/* Oblivion - "The Rift" (2026-09-27). One design system for the whole site. Colours, fonts and the portal glow come from the Oblivion artwork (images/banner.jpg, emblem-*.png). */ :root { --bg: #0a0504; --bg-2: #120807; --panel: rgba(22, 11, 9, 0.9); --panel-2: rgba(33, 16, 12, 0.92); --line: rgba(216, 162, 74, 0.28); --line-strong: rgba(216, 162, 74, 0.55); --gold: #d8a24a; --gold-hi: #f5d488; --gold-lo: #8a6127; --ruby: #a50f1c; --ruby-hi: #d8262f; --ember: #ff7b2c; --text: #ecdfc8; --muted: #b09c80; --dim: #7c6c58; --ok: #7fd08a; --bad: #ef5a4f; --radius: 6px; --shadow: 0 18px 40px rgba(0, 0, 0, 0.55); --glow: 0 0 0 1px rgba(245, 212, 136, 0.55), 0 0 18px rgba(255, 123, 44, 0.35); --font-display: "Cinzel", "Times New Roman", serif; --font-deco: "Cinzel Decorative", "Cinzel", serif; --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif; --shell: 1240px; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color-scheme: dark; } html, body { overflow-x: clip; } /* the off-screen mobile menu must not widen the page */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 600px at 50% -10%, rgba(165, 15, 28, 0.25), transparent 70%), radial-gradient(900px 500px at 50% 110%, rgba(255, 123, 44, 0.08), transparent 70%), var(--bg); color: var(--text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; } /* ---------- site-wide background art (owner's image 2026-10-01; source images/site-bg-source.png) ---------- A fixed layer behind every page: the art at 50% strength, fading into --bg toward the bottom of the window. body gets its own stacking context so the z-index:-1 layer sits above body's colour but below all content. */ body { position: relative; z-index: 0; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(images/site-bg.webp) center top / cover no-repeat; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } @media (max-width: 960px) { body::before { background-image: url(images/site-bg-960.webp); } } img { max-width: 100%; } a { color: var(--gold-hi); text-decoration: none; transition: color .15s, text-shadow .15s; } a:hover { color: #fff1cf; text-shadow: 0 0 12px rgba(255, 123, 44, 0.45); } :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #1b0d06; padding: 8px 14px; border-radius: var(--radius); } .skip-link:focus { left: 8px; } /* ---------- buttons: one language everywhere ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 700 .82rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: .95em 1.5em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; color: #fff5dc; text-shadow: none; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s; } .btn svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn:hover { transform: translateY(-1px); box-shadow: var(--glow); color: #fff; text-shadow: none; } .btn:active { transform: translateY(0); filter: brightness(.95); } .btn-ruby { background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); border-color: #f0735f55; } .btn-gold { background: linear-gradient(180deg, rgba(245, 212, 136, .16), rgba(138, 97, 39, .18)); border-color: var(--line-strong); color: var(--gold-hi); } .btn-gold:hover { color: #fff1cf; } .btn-ghost { background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--gold-hi); } .btn-link { background: none; color: var(--muted); padding-left: .6em; padding-right: .6em; } .btn-link:hover { box-shadow: none; color: var(--gold-hi); } .btn-discord { background: #5865f2; border-color: #7b86ff; } .btn-sm { padding: .7em 1.05em; font-size: .72rem; } .btn-lg { padding: 1.1em 2em; font-size: .9rem; } .btn-block { width: 100%; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; } .topbar::after { /* thin ember line */ content: ""; position: absolute; left: 0; right: 0; } .topbar-inner { max-width: 1440px; margin: 0 auto; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--gold-hi); flex-shrink: 0; } .brand:hover { text-shadow: none; } .brand-emblem { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(255, 123, 44, .35)); transition: transform .4s ease; } .brand:hover .brand-emblem { transform: rotate(-8deg) scale(1.05); } .brand-name { font: 700 1.35rem/1 var(--font-deco); letter-spacing: .04em; background: linear-gradient(180deg, #fff0c4, var(--gold) 55%, #9b6a2a); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-name small { display: block; margin-top: 4px; font: 600 .6rem/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); -webkit-text-fill-color: var(--muted); } .mainnav { justify-content: space-between; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: 600 .8rem/1 var(--font-display); text-transform: uppercase; border-radius: var(--radius); } .nav-link .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; } .nav-link:hover, .nav-item:focus-within > .nav-link { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255, 123, 44, .5); } .nav-item.is-active > .nav-link::after { content: ""; position: absolute; } .nav-admin { color: var(--ember); } /* the Shop link stands out on purpose (owner's request: draw the eye to the shop) */ .nav-shop { gap: 7px; background: linear-gradient(100deg, #ffe39a 0%, #ffb347 35%, #ff7b2c 55%, #ffe39a 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 5s linear infinite; } .nav-shop svg { width: 16px; height: 16px; fill: none; stroke: #ffb347; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 150, 60, .7)); } .nav-shop span { font-weight: 800; } .nav-shop:hover { text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 140, 50, .6)); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } } .nav-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; } .has-menu:hover .nav-menu, .has-menu:focus-within .nav-menu, .has-menu.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .has-menu:hover .chev, .has-menu.is-open .chev { transform: rotate(180deg); } .nav-menu a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--text); font-size: .95rem; } .nav-menu a:hover, .nav-menu a[aria-current="page"] { background: linear-gradient(90deg, rgba(165, 15, 28, .45), rgba(165, 15, 28, 0)); color: var(--gold-hi); text-shadow: none; } .nav-menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ember); } .nav-actions { align-items: center; gap: 10px; } /* ---------- portal status (header + world panel) ---------- */ .portal-status { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: radial-gradient(circle at 20% 50%, rgba(255, 123, 44, .12), rgba(0, 0, 0, .45) 60%); color: var(--text); } .portal-status:hover { border-color: var(--line-strong); box-shadow: var(--glow); text-shadow: none; } .portal-text { display: flex; flex-direction: column; line-height: 1; } .portal-text strong { font: 800 1rem/1 var(--font-display); color: var(--gold-hi); } .portal-text small { margin-top: 3px; font: 600 .56rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .portal-ring { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(from 0deg, var(--gold-lo), var(--gold-hi), var(--gold-lo), #5a3a16, var(--gold-lo)); padding: 3px; } .portal-ring::before { /* the rotating ember arc */ content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 123, 44, .9) 85%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 3.2s linear infinite; } .portal-ring i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #b8ffc2, #3fbf5a 45%, #0d3a18 80%); box-shadow: inset 0 0 6px rgba(0, 0, 0, .8), 0 0 10px rgba(80, 220, 110, .55); animation: core 2.6s ease-in-out infinite; } .is-offline .portal-ring i { background: radial-gradient(circle at 50% 45%, #ffb3a8, #d23a2e 45%, #3d0b07 80%); box-shadow: inset 0 0 6px rgba(0, 0, 0, .8), 0 0 10px rgba(230, 60, 40, .55); } .is-offline .portal-ring::before { animation-duration: 9s; opacity: .4; } .portal-ring-lg { width: 64px; height: 64px; padding: 5px; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes core { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.25); } } .portal-status-mobile { display: none; } .btn-icon span { display: inline; } .btn-xl { padding: 1.15em 2.6em; font-size: 1.05rem; letter-spacing: .18em; } .btn-xl svg { fill: currentColor; stroke: none; } .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, .3); cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 2px; background: var(--gold-hi); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-open .nav-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } /* ---------- hero banner (front page) ---------- A banner, not a splash screen: it shows the logo and the portal, and the three columns start on its lower edge. Sizes use container units (cqw = 1% of the banner width), so the portal glow stays on the rift in the artwork at every width. Artwork: 1672x941, rift centre at 50.4% / 59.5%. */ .hero { position: relative; } .hero-stage { position: relative; max-width: 1672px; margin: 0 auto; aspect-ratio: 1672 / 500; overflow: hidden; container-type: inline-size; } .hero-art { position: absolute; left: 0; top: -5cqw; display: block; width: 100%; height: auto; } .portal-glow { position: absolute; left: 50.4%; top: 28.5cqw; width: 15cqw; height: 24.8cqw; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 160, 70, .55), rgba(255, 90, 30, .28) 45%, transparent 75%); mix-blend-mode: screen; pointer-events: none; animation: rift 4.8s ease-in-out infinite; } @keyframes rift { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg), transparent 9%, transparent 91%, var(--bg)), linear-gradient(180deg, transparent 62%, rgba(10, 5, 4, .75) 84%, var(--bg)); } .is-home .shell { position: relative; z-index: 2; margin-top: -70px; } /* ---------- pillars (front page, centre column) ---------- */ .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; } .pillar { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 8px; background: linear-gradient(180deg, rgba(33, 16, 12, .85), rgba(15, 7, 6, .85)); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; } .pillar::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ember), transparent); opacity: .7; } .pillar:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--glow); } .pillar-icon { width: 40px; height: 40px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 123, 44, .35)); } .pillar:hover .pillar-icon { stroke: var(--gold-hi); } .pillar h3 { margin: 0 0 6px; font: 700 1rem/1.25 var(--font-display); letter-spacing: .05em; color: var(--gold-hi); } .pillar p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.5; } /* ---------- page header (every other page) ---------- */ .page-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 5, 4, .35), rgba(10, 5, 4, .92)), url(images/banner-960.jpg) center 38% / cover no-repeat; } .page-head-inner { max-width: var(--shell); margin: 0 auto; padding: 54px 24px 34px; } .page-head h1 { margin: 0; font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--font-display); letter-spacing: .06em; color: var(--gold-hi); text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 0 30px rgba(255, 123, 44, .25); } .page-head p { margin: 10px 0 0; color: var(--text); opacity: .8; font-size: 1.05rem; } /* ---------- three columns ---------- */ .shell { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 36px 24px 56px; display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; grid-template-areas: "left main right"; gap: 26px; align-items: start; } .rail-left { grid-area: left; } .main { grid-area: main; min-width: 0; } .rail-right { grid-area: right; } .rail { display: grid; gap: 22px; } .section-title { margin: 0 0 14px; font: 700 1.2rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 28px; } /* ornate frame: gold double line, corner brackets, ruby gem on top (like the emblem) */ .frame { position: relative; border-radius: 8px; border: 1px solid var(--gold-lo); } /* the gem on top of every frame (): a dark hexagon ruby with a smoky ember glow circling it */ .gem { position: absolute; left: 50%; z-index: 2; pointer-events: none; } .gem::before { content: ""; position: absolute; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 40%, rgba(60, 4, 8, .7) 58%, rgba(150, 22, 26, .75) 76%, rgba(255, 120, 60, .8) 84%, transparent 90%); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 66%, #000 82%, transparent 100%); mask: radial-gradient(closest-side, transparent 58%, #000 66%, #000 82%, transparent 100%); filter: blur(1.5px); animation: spin 3.6s linear infinite; } .gem::after { content: ""; position: absolute; animation: gem-pulse 3.6s ease-in-out infinite; } @keyframes gem-pulse { 0%, 100% { opacity: .92; } 50% { opacity: 1; } } .frame::after { content: ""; position: absolute; pointer-events: none; } .frame-title { margin: 0; padding: 24px 18px 12px; text-align: center; font: 700 .8rem/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi); } .frame-body { position: relative; z-index: 1; padding: 16px 18px; margin: 0; } .frame-body p { margin: 0 0 12px; color: var(--muted); } .frame-link { position: relative; z-index: 1; display: block; text-align: center; font: 700 .7rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; } .muted { color: var(--muted); } /* account frame */ .quick-login { display: grid; gap: 10px; } .quick-login label { display: grid; gap: 5px; font: 600 .66rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .quick-login input { width: 100%; background: rgba(0, 0, 0, .5); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; font: 400 1rem/1.2 var(--font-body); } .quick-login input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 162, 74, .2); } .quick-login .btn { margin-top: 4px; } .quick-links { display: flex; justify-content: space-between; margin: 12px 0 0 !important; font-size: .9rem; } .acc-hello { font-family: var(--font-display); color: var(--gold) !important; letter-spacing: .04em; } .char-list { list-style: none; margin: 0 0 14px; padding: 0; } .char-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(216, 162, 74, .1); } .char-list span { color: var(--dim); font-size: .88rem; white-space: nowrap; } .frame-actions { display: grid; gap: 6px; } /* last deaths */ .death-feed { list-style: none; padding: 8px 14px; } .death-feed li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid rgba(216, 162, 74, .08); font-size: .92rem; line-height: 1.35; color: var(--muted); } .death-feed li:last-child { border-bottom: 0; } .death-feed time { grid-column: 2; font-size: .78rem; color: var(--dim); } .death-feed .empty { display: block; text-align: center; } .skull { width: 16px; height: 16px; margin-top: 2px; background: currentColor; color: var(--ruby-hi); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 3 5.8 3 10.5c0 2.6 1.1 4.6 3 5.9V20h3v-2h2v2h2v-2h2v2h3v-3.6c1.9-1.3 3-3.3 3-5.9C21 5.8 17.5 2 12 2zm-3.5 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 3 5.8 3 10.5c0 2.6 1.1 4.6 3 5.9V20h3v-2h2v2h2v-2h2v2h3v-3.6c1.9-1.3 3-3.3 3-5.9C21 5.8 17.5 2 12 2zm-3.5 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat; } /* world frame: the emblem with a status halo, the count, and four stat tiles */ .world { text-align: center; padding-top: 20px; } .world-emblem { position: relative; width: 112px; height: 112px; margin: 0 auto; } .world-emblem img { position: relative; z-index: 1; width: 112px; height: 112px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); animation: float 6s ease-in-out infinite; } .world-halo { position: absolute; inset: -14px; border-radius: 50%; animation: halo 3.2s ease-in-out infinite; background: radial-gradient(closest-side, rgba(90, 230, 120, .55), rgba(60, 200, 90, .18) 55%, transparent 72%); } .world-emblem.is-offline .world-halo { background: radial-gradient(closest-side, rgba(240, 70, 50, .6), rgba(200, 40, 30, .2) 55%, transparent 72%); } @keyframes halo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .world-state { margin: 12px 0 2px !important; font: 700 .66rem/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; } .world-state.is-online { color: var(--ok) !important; } .world-state.is-offline { color: var(--bad) !important; } .world-count { margin: 0 0 16px !important; } .world-count strong { display: block; font: 800 2.6rem/1.05 var(--font-display); color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 123, 44, .35); } .world-count span { font: 600 .64rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .world-tiles { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .world-tiles div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px 10px; border-radius: 6px; background: linear-gradient(180deg, rgba(165, 15, 28, .16), rgba(0, 0, 0, .25)); border: 1px solid rgba(216, 162, 74, .18); transition: border-color .2s, box-shadow .2s; } .world-tiles div:hover { border-color: var(--line-strong); box-shadow: var(--glow); } .world-tiles svg { width: 26px; height: 26px; margin-bottom: 3px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 6px rgba(255, 123, 44, .25)); } .world-tiles dd { order: 1; margin: 0; font: 700 1rem/1.1 var(--font-display); color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; } .world-tiles dt { order: 2; font: 600 .56rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } /* top players */ .top-list { list-style: none; } .top-list li { display: grid; align-items: center; transition: background .15s; } .top-list li:hover { background: rgba(165, 15, 28, .18); } .top-list .rank { border-radius: 50%; display: grid; place-items: center; font: 700 .7rem/1 var(--font-display); } .top-list li:first-child .rank { border-color: var(--gold); } .top-list .outfit { width: 40px; height: 40px; image-rendering: pixelated; } .top-list .who { color: var(--text); font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; } .top-list .who small { display: block; font-weight: 400; color: var(--dim); font-size: .8rem; } .top-list .lvl { font: 700 1rem/1 var(--font-display); color: var(--gold-hi); text-align: right; } .top-list .lvl small { display: block; font-size: .55rem; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; } .top-list .empty { display: block; color: var(--muted); text-align: center; padding: 14px; } /* ---------- left menu (vertical categories, like classic Tibia sites) ---------- */ .side-menu { padding: 20px 10px 12px; } .sm-head { width: 100%; display: flex; align-items: center; background: none; border: 0; cursor: pointer; border-radius: 6px; font: 700 .82rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-align: left; transition: background .15s, color .15s; } .sm-head:hover, .sm-group.is-open > .sm-head { color: var(--gold-hi); background: linear-gradient(90deg, rgba(165, 15, 28, .35), rgba(165, 15, 28, 0)); text-shadow: none; } .sm-icon { width: 28px; height: 28px; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 6px rgba(255, 123, 44, .22)); transition: transform .2s, filter .2s; } .sm-head:hover .sm-icon, .sm-group.is-open .sm-icon { transform: scale(1.08); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(255, 140, 50, .55)); } .sm-head span { flex: 1; } .sm-chev { width: 10px; height: 10px; fill: none; stroke: var(--muted); stroke-width: 1.6; transition: transform .2s; } .sm-group.is-open .sm-chev { transform: rotate(180deg); stroke: var(--gold-hi); } .sm-badge { font: 700 .55rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; } .sm-items { list-style: none; margin: 0; padding: 0 0 8px 44px; display: none; } .sm-group.is-open .sm-items { display: block; } .sm-items a { display: block; padding: 6px 8px; border-radius: 4px; color: var(--muted); font-size: .95rem; } .sm-items a:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .03); text-shadow: none; } .sm-items a[aria-current="page"] { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--ember); } .sm-admin { color: var(--ember); } /* ---------- news ticker ---------- */ .ticker-list { list-style: none; } .ticker-list li { display: grid; } .ticker-list li:last-child { border-bottom: 0; } .ticker-dot { align-self: center; } .ticker-list time { font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; color: var(--gold); white-space: nowrap; } .ticker-text { color: var(--text); } .ticker-list .empty { display: block; color: var(--muted); text-align: center; padding: 12px 0; } /* ---------- latest news cards (front page) ---------- */ .news-card { margin-bottom: 30px; } .news-head { position: relative; z-index: 1; padding: 30px 28px 14px; text-align: center; } .news-head h3 { margin: 0 0 8px; font: 700 1.3rem/1.25 var(--font-display); letter-spacing: .05em; color: var(--gold-hi); } .news-meta { margin: 0; font-size: .82rem; color: var(--muted); } .news-meta time { color: var(--gold); } .news-body { position: relative; z-index: 1; padding: 20px 28px 22px; line-height: 1.7; color: var(--text); } .news-body b { color: var(--gold-hi); font-family: var(--font-display); letter-spacing: .04em; } .news-body i { color: var(--muted); } /* ---------- coming soon (shop) ---------- */ .soon { text-align: center; padding: 30px 10px; } .soon img { width: 150px; height: 150px; filter: drop-shadow(0 0 22px rgba(255, 123, 44, .4)); animation: float 7s ease-in-out infinite; } .soon h2 { margin: 16px 0 8px; font: 700 1.6rem/1.2 var(--font-display); color: var(--gold-hi); } .soon p { max-width: 520px; margin: 0 auto 10px; color: var(--muted); } .soon-list { list-style: none; margin: 22px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 620px; } .soon-list li { padding: 14px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .25); font: 700 .8rem/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 9, 7, .6), #070302); } .footer-inner { max-width: var(--shell); margin: 0 auto; padding: 34px 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: center; } .footer-brand { display: flex; align-items: center; gap: 14px; color: var(--gold-hi); } .footer-brand span { font: 700 1.3rem/1 var(--font-deco); } .footer-brand small { display: block; margin-top: 6px; font: 600 .6rem/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; font-size: .95rem; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--gold-hi); } .footer-copy { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgba(216, 162, 74, .12); color: var(--dim); font-size: .85rem; text-align: center; } /* empty states */ .empty-state { text-align: center; padding: 34px 16px; } .empty-state .empty-icon { width: 56px; height: 56px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(255, 123, 44, .4)); } .empty-state h3 { margin: 14px 0 6px; font: 700 1.2rem/1.3 var(--font-display); color: var(--gold-hi); } .empty-state p { margin: 0 auto; max-width: 420px; color: var(--muted); } /* ---------- old page content (until step 4 rebuilds each page) ---------- */ .legacy { overflow-x: auto; } .legacy h1, .legacy h2, .legacy h3 { font-family: var(--font-display); color: var(--gold-hi); letter-spacing: .04em; } .legacy table { border-collapse: collapse; width: 100%; max-width: 100%; } .legacy td, .legacy th { padding: 8px 10px; vertical-align: top; } .legacy [bgcolor] { background-color: transparent !important; } .legacy tr:nth-child(even) > td { background: rgba(255, 255, 255, .025); } .legacy font[color] { color: inherit; } .legacy input[type="text"], .legacy input[type="password"], .legacy input[type="email"], .legacy input[type="number"], .legacy input:not([type]), .legacy select, .legacy textarea { background: rgba(0, 0, 0, .45); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font: inherit; max-width: 100%; } .legacy input:focus, .legacy select:focus, .legacy textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 162, 74, .2); } .legacy .CaptionContainer .Text, .legacy .Text { font: 700 .95rem/1.3 var(--font-display); letter-spacing: .08em; color: var(--gold-hi); padding: 10px 0; } .legacy .CaptionContainer span, .legacy .TableShadowContainer, .legacy .TableShadowContainerRightTop, .legacy .BoxFrameHorizontal, .legacy .BoxFrameEdgeLeftTop, .legacy .BoxFrameEdgeRightTop, .legacy .BoxFrameEdgeLeftBottom, .legacy .BoxFrameEdgeRightBottom, .legacy .BoxFrameVerticalLeft, .legacy .BoxFrameVerticalRight, .legacy .BigButtonOver { display: none !important; } .legacy .TableContainer, .legacy .SmallBox { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px 12px; background: rgba(0, 0, 0, .18); } .legacy .ErrorMessage { color: #ffd0c8; } .legacy .BigButton { display: inline-block; background: none !important; } .legacy input[type="image"].ButtonText { display: none; } .legacy .NewsHeadline { font-family: var(--font-display); color: var(--gold-hi); } /* ---------- responsive ---------- *//* ---------- ornament pass (from the owner's reference art): thorn corners, ruby crest, ruby dividers, medallions ---------- */ /* frame titles: ◆── TITLE ──◆ over a ruby divider */ /* plaque buttons at the bottom of frames ("All highscores ›") */ /* ticker: ruby bullets, date | text, ruby dividers */ /* left menu: medallion icons, ruby dividers, gold "Soon" plaque */ .sm-medal { position: relative; isolation: isolate; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #4a1008, #1a0605 62%, #0d0403); box-shadow: 0 0 0 1px #1a0a04, 0 0 0 2px #a8762f, 0 0 0 3px #1a0a04, inset 0 0 8px #000; } /* top players: separate rows, rank medals (gold with crown, silver, bronze), the leader row glows red */ /* header: slim utility strip, then the ornate bar with the menu split around the hanging crest (owner's reference art) */ /* the banner right below already carries the full logo */ /* ---------- ornament pass (from the owner's reference art): thorn corners, ruby crest, ruby dividers, medallions ---------- */ /* frame titles: ◆── TITLE ──◆ over a ruby divider */ /* plaque buttons at the bottom of frames ("All highscores ›") */ /* ticker: ruby bullets, date | text, ruby dividers */ /* left menu: medallion icons, ruby dividers, gold "Soon" plaque */ /* top players: separate rows, rank medals (gold with crown, silver, bronze), the leader row glows red */ /* header: slim utility strip, then the ornate bar with the menu split around the hanging crest (owner's reference art) */ /* the banner right below already carries the full logo */ /* show the city, not the banner's lettering, behind page titles */ /* Top Players: portal scene above the frame, lava title plate, laurel rank medals, glowing leader, lava button */ .top-players { margin-top: 104px; } .frame-scene { position: absolute; left: -12%; bottom: 100%; width: 124%; height: auto; margin-bottom: -22px; z-index: 1; pointer-events: none; } .top-players .gem { z-index: 3; } .top-players .frame-title { position: relative; z-index: 2; padding: 26px 14px 20px; font-size: .98rem; letter-spacing: .2em; color: #f7dc98; text-shadow: 0 2px 2px #000, 0 0 14px rgba(255, 120, 40, .55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center bottom / 9px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='90'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.025 .07' numOctaves='3' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 0 0 0 1.1' result='a'/%3E%3CfeFlood flood-color='%23ff8a3a'/%3E%3CfeComposite in2='a' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") center / 320px 90px, radial-gradient(ellipse at 50% 55%, #8e1013, #3a0506 80%); box-shadow: inset 0 1px 0 rgba(224, 187, 112, .7), inset 0 -2px 0 rgba(224, 187, 112, .55), inset 0 0 18px rgba(0, 0, 0, .6); } .top-players .frame-title::before, .top-players .frame-title::after { flex-basis: 34px; } .top-players .top-list li { grid-template-columns: 42px 40px 1fr auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"), rgba(0, 0, 0, .35); border: 1px solid rgba(201, 161, 94, .32); } .top-players .top-list li:first-child { border-color: #e0bb70; background: radial-gradient(ellipse at 25% 50%, rgba(255, 160, 60, .2), transparent 70%), rgba(42, 22, 8, .7); box-shadow: 0 0 12px rgba(255, 160, 60, .45), inset 0 0 14px rgba(255, 150, 50, .22); } .top-players .top-list .rank { width: 42px; height: 42px; color: transparent; text-shadow: none; background: url(images/rank-5.png) center / contain no-repeat; } .top-players .top-list li:first-child .rank { background-image: url(images/rank-1.png); } .top-players .top-list li:first-child .rank::before { display: none; } .top-players .top-list li:nth-child(2) .rank { background-image: url(images/rank-2.png); } .top-players .top-list li:nth-child(3) .rank { background-image: url(images/rank-3.png); } .top-players .top-list li:nth-child(4) .rank { background-image: url(images/rank-4.png); } .top-players .top-list .who { font-size: 1.05rem; color: #f3e6cc; } .top-players .top-list .who small { margin-top: 3px; font: 700 .6rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .top-players .frame-link { padding: 13px 34px 13px 38px; color: #f7dc98; text-shadow: 0 1px 2px #000; } .top-players .frame-link::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='90'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.025 .07' numOctaves='3' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 0 0 0 1.1' result='a'/%3E%3CfeFlood flood-color='%23ff8a3a'/%3E%3CfeComposite in2='a' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") center / 320px 90px, radial-gradient(ellipse at 50% 50%, #9a1214, #3a0506 85%); } .top-players .frame-link:hover::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='90'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.025 .07' numOctaves='3' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 0 0 0 1.1' result='a'/%3E%3CfeFlood flood-color='%23ff8a3a'/%3E%3CfeComposite in2='a' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") center / 320px 90px, radial-gradient(ellipse at 50% 50%, #c0181a, #4a0607 85%); }/* ---------- ornament pass (from the owner's reference art): thorn corners, ruby crest, ruby dividers, medallions ---------- */ .frame { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0, rgba(130, 22, 12, .2), transparent 60%), linear-gradient(180deg, rgba(26, 12, 9, .97), rgba(12, 6, 5, .98)); box-shadow: inset 0 0 0 3px rgba(10, 5, 4, .9), inset 0 0 0 4px rgba(216, 162, 74, .28), inset 0 0 26px rgba(150, 28, 10, .28), 0 0 18px rgba(190, 45, 15, .13), var(--shadow); } .frame::after { inset: -7px; border-radius: 0; opacity: 1; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg %3E%3Cpolygon points='2,9 0,0 9,2' fill='url(%23g)'/%3E%3Cpolygon points='6,3 54,7 6,11' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='3,6 7,54 11,6' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='10,10 23,15 15,23' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M13,32 C13,19 19,13 32,13' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpolygon points='8,1.5 14.5,8 8,14.5 1.5,8' fill='url(%23r)' stroke='%23d9ae62' stroke-width='1'/%3E%3Cpolygon points='8,1.5 14.5,8 8,7 1.5,8' fill='%23fff' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") left top / 58px 58px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(56,0) scale(-1,1)'%3E%3Cpolygon points='2,9 0,0 9,2' fill='url(%23g)'/%3E%3Cpolygon points='6,3 54,7 6,11' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='3,6 7,54 11,6' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='10,10 23,15 15,23' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M13,32 C13,19 19,13 32,13' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpolygon points='8,1.5 14.5,8 8,14.5 1.5,8' fill='url(%23r)' stroke='%23d9ae62' stroke-width='1'/%3E%3Cpolygon points='8,1.5 14.5,8 8,7 1.5,8' fill='%23fff' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right top / 58px 58px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0,56) scale(1,-1)'%3E%3Cpolygon points='2,9 0,0 9,2' fill='url(%23g)'/%3E%3Cpolygon points='6,3 54,7 6,11' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='3,6 7,54 11,6' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='10,10 23,15 15,23' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M13,32 C13,19 19,13 32,13' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpolygon points='8,1.5 14.5,8 8,14.5 1.5,8' fill='url(%23r)' stroke='%23d9ae62' stroke-width='1'/%3E%3Cpolygon points='8,1.5 14.5,8 8,7 1.5,8' fill='%23fff' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") left bottom / 58px 58px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(56,56) scale(-1,-1)'%3E%3Cpolygon points='2,9 0,0 9,2' fill='url(%23g)'/%3E%3Cpolygon points='6,3 54,7 6,11' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='3,6 7,54 11,6' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='10,10 23,15 15,23' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M13,32 C13,19 19,13 32,13' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpolygon points='8,1.5 14.5,8 8,14.5 1.5,8' fill='url(%23r)' stroke='%23d9ae62' stroke-width='1'/%3E%3Cpolygon points='8,1.5 14.5,8 8,7 1.5,8' fill='%23fff' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right bottom / 58px 58px no-repeat; } .frame::before { content: ""; position: absolute; bottom: -10px; left: 50%; width: 44px; height: 20px; margin-left: -22px; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='15,8.8 0,10 15,11.2' fill='url(%23g)'/%3E%3Cpolygon points='29,8.8 44,10 29,11.2' fill='url(%23g)'/%3E%3Cpolygon points='22,0 29,10 22,20 15,10' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='22,3 26.5,10 22,17 17.5,10' fill='url(%23r)'/%3E%3Cpolygon points='22,3 26.5,10 22,9 17.5,10' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); } .gem { top: -20px; width: 96px; height: 40px; margin-left: -48px; } .gem::before { inset: -4px 24px; } .gem::after { left: 0; top: 0; width: 96px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='36,17.5 1,20 36,22.5' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='60,17.5 95,20 60,22.5' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M38,14 C30,13 26,9 24,4 M58,14 C66,13 70,9 72,4 M38,26 C31,27 28,31 27,35 M58,26 C65,27 68,31 69,35' fill='none' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpolygon points='48,0 60,20 48,40 36,20' fill='url(%23g)' stroke='%231a0a04' stroke-width='.8'/%3E%3Cpolygon points='48,4 57,20 48,36 39,20' fill='%23140504'/%3E%3Cpolygon points='48,7 55,20 48,33 41,20' fill='url(%23r)'/%3E%3Cpolygon points='48,7 55,20 48,17 41,20' fill='%23ffb0a0' fill-opacity='.16'/%3E%3Cpolygon points='41,20 48,17 48,33' fill='%23000' fill-opacity='.3'/%3E%3Cpolygon points='44,17 47,11 46,19' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 6px rgba(120, 12, 18, .45)); } /* frame titles: ◆── TITLE ──◆ over a ruby divider */ .frame-title { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 16px; border-bottom: 0; white-space: nowrap; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center bottom / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201, 161, 94, .38) 12%, rgba(201, 161, 94, .38) 88%, transparent) center calc(100% - 4px) / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(150, 14, 26, .38), rgba(90, 8, 14, .08)); } .frame-title::before, .frame-title::after { content: ""; flex: 0 1 54px; min-width: 14px; height: 9px; } .frame-title::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") left center / 7px 7px no-repeat, linear-gradient(90deg, rgba(201, 161, 94, .8), rgba(201, 161, 94, .15)) 7px center / calc(100% - 7px) 1px no-repeat; } .frame-title::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") right center / 7px 7px no-repeat, linear-gradient(270deg, rgba(201, 161, 94, .8), rgba(201, 161, 94, .15)) 0 center / calc(100% - 7px) 1px no-repeat; } .news-head { border-bottom: 0; padding-bottom: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center bottom / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201, 161, 94, .38) 12%, rgba(201, 161, 94, .38) 88%, transparent) center calc(100% - 4px) / 100% 1px no-repeat, linear-gradient(180deg, rgba(150, 14, 26, .3), transparent); } /* plaque buttons at the bottom of frames ("All highscores ›") */ .frame-link { width: fit-content; margin: 10px auto 22px; padding: 11px 30px 11px 34px; border-top: 0; color: var(--gold-hi); background: linear-gradient(180deg, #e0bb70, #6e4a1c); clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); } .frame-link::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, #24100b, #0e0605); clip-path: polygon(12.5px 0, calc(100% - 12.5px) 0, 100% 50%, calc(100% - 12.5px) 100%, 12.5px 100%, 0 50%); } .frame-link::after { content: "\203A"; margin-left: 10px; font-size: 1rem; line-height: 0; } .frame-link:hover { color: #fff; text-shadow: 0 0 8px rgba(255, 140, 60, .6); } .frame-link:hover::before { background: linear-gradient(180deg, #3a130c, #160806); } /* ticker: ruby bullets, date | text, ruby dividers */ .ticker-list li { border-bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center bottom / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201, 161, 94, .38) 12%, rgba(201, 161, 94, .38) 88%, transparent) center calc(100% - 4px) / 100% 1px no-repeat; } .ticker-list li:last-child { background: none; } .ticker-dot { transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='6,0 12,9 6,18 0,9' fill='url(%23g)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,16.2 1.7,9' fill='url(%23r)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,8 1.7,9' fill='%23ffc0b0' fill-opacity='.3'/%3E%3Cpolygon points='1.7,9 6,8 6,16.2' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 5px rgba(200, 30, 40, .55)); } .ticker-list time { border-right: 1px solid rgba(201, 161, 94, .3); } /* left menu: medallion icons, ruby dividers, gold "Soon" plaque */ .sm-group + .sm-group { border-top: 0; padding-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center top / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201, 161, 94, .38) 12%, rgba(201, 161, 94, .38) 88%, transparent) center 4px / 100% 1px no-repeat; } .sm-head { gap: 16px; padding: 12px 10px 12px 12px; } .sm-head .sm-medal { position: relative; isolation: isolate; width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #4a1008, #1a0605 62%, #0d0403); box-shadow: 0 0 0 1px #1a0a04, 0 0 0 2px #a8762f, 0 0 0 3px #1a0a04, inset 0 0 8px #000; } .sm-medal::before { content: ""; position: absolute; inset: -9px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(0 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(90 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(180 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(270 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(45 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(135 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(225 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(315 28 28)'/%3E%3C/svg%3E") center / contain no-repeat; } .sm-medal .sm-icon { width: 24px; height: 24px; } .sm-head:hover .sm-medal, .sm-group.is-open .sm-medal { box-shadow: 0 0 0 1px #1a0a04, 0 0 0 2px #e0bb70, 0 0 0 3px #1a0a04, inset 0 0 8px #000, 0 0 14px rgba(220, 60, 30, .45); } .sm-items { padding-left: 68px; } .sm-badge { color: #2a1405; padding: 4px 8px; border-radius: 2px; border: 1px solid #3a2208; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); background: linear-gradient(180deg, #fbe3a4, #d4a24e 48%, #9a6a26 52%, #c89448); box-shadow: 0 0 0 1px rgba(224, 187, 112, .5), inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .6); } /* top players: separate rows, rank medals (gold with crown, silver, bronze), the leader row glows red */ .top-list { padding: 12px 12px 4px; } .top-list li { grid-template-columns: 36px 40px 1fr auto; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 4px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 161, 94, .12); } .top-list li + li { border-top: 1px solid rgba(201, 161, 94, .12); } .top-list li:first-child { background: linear-gradient(90deg, rgba(160, 16, 26, .5), rgba(90, 10, 16, .18)); border-color: rgba(201, 161, 94, .3); box-shadow: inset 0 0 14px rgba(0, 0, 0, .5); } .top-list .rank { position: relative; width: 36px; height: 36px; border: 0; font-size: .85rem; color: var(--gold-hi); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c9a15e'/%3E%3Cstop offset='.5' stop-color='%236e4a1c'/%3E%3Cstop offset='1' stop-color='%232a1806'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='20.0,1.0 25.5,6.6 33.4,6.6 33.4,14.5 39.0,20.0 33.4,25.5 33.4,33.4 25.5,33.4 20.0,39.0 14.5,33.4 6.6,33.4 6.6,25.5 1.0,20.0 6.6,14.5 6.6,6.6 14.5,6.6' fill='url(%23m)'/%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23m)' stroke='%23120804' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='11.3' fill='%23140806' stroke='%23000' stroke-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; text-shadow: 0 1px 2px #000; } .top-list li:first-child .rank { color: #fff; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f7da90'/%3E%3Cstop offset='.5' stop-color='%23b8863c'/%3E%3Cstop offset='1' stop-color='%234a2c0c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='20.0,1.0 25.5,6.6 33.4,6.6 33.4,14.5 39.0,20.0 33.4,25.5 33.4,33.4 25.5,33.4 20.0,39.0 14.5,33.4 6.6,33.4 6.6,25.5 1.0,20.0 6.6,14.5 6.6,6.6 14.5,6.6' fill='url(%23m)'/%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23m)' stroke='%23120804' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='11.3' fill='url(%23r)' stroke='%23000' stroke-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; } .top-list li:first-child .rank::before { content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 10px; margin-left: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,11 1,3 5,7 9,0 13,7 17,3 18,11' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Ccircle cx='9' cy='2' r='1.3' fill='%23e0404a'/%3E%3C/svg%3E") center / contain no-repeat; } .top-list li:nth-child(2) .rank { color: #f2f2f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23a4aab2'/%3E%3Cstop offset='1' stop-color='%233a3d42'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='20.0,1.0 25.5,6.6 33.4,6.6 33.4,14.5 39.0,20.0 33.4,25.5 33.4,33.4 25.5,33.4 20.0,39.0 14.5,33.4 6.6,33.4 6.6,25.5 1.0,20.0 6.6,14.5 6.6,6.6 14.5,6.6' fill='url(%23m)'/%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23m)' stroke='%23120804' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='11.3' fill='%2318181b' stroke='%23000' stroke-opacity='.5'/%3E%3C/svg%3E"); } .top-list li:nth-child(3) .rank { color: #f3cfae; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0bf98'/%3E%3Cstop offset='.5' stop-color='%23a0602f'/%3E%3Cstop offset='1' stop-color='%233a1a0a'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='20.0,1.0 25.5,6.6 33.4,6.6 33.4,14.5 39.0,20.0 33.4,25.5 33.4,33.4 25.5,33.4 20.0,39.0 14.5,33.4 6.6,33.4 6.6,25.5 1.0,20.0 6.6,14.5 6.6,6.6 14.5,6.6' fill='url(%23m)'/%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23m)' stroke='%23120804' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='11.3' fill='%231f0d07' stroke='%23000' stroke-opacity='.5'/%3E%3C/svg%3E"); } .top-list .empty { background: none; border: 0; } /* header: slim utility strip, then the ornate bar with the menu split around the hanging crest (owner's reference art) */ .utilbar { background: #060302; border-bottom: 1px solid rgba(201, 161, 94, .14); } .utilbar-inner { max-width: 1440px; margin: 0 auto; padding: 5px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .utilbar .portal-status { padding: 3px 12px 3px 4px; } .utilbar .portal-ring { width: 24px; height: 24px; } .util-actions { display: flex; gap: 8px; } .util-actions .btn { padding: .55em .95em; font-size: .66rem; } .topbar { backdrop-filter: none; border-bottom: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"), radial-gradient(ellipse 40% 140% at 50% 0, rgba(150, 28, 12, .32), transparent 70%), linear-gradient(180deg, #1a0b08, #0b0504); } .topbar::after { height: 3px; bottom: -3px; opacity: 1; background: linear-gradient(180deg, #e0bb70, #6e4a1c 50%, #1a0a04); box-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 10px rgba(200, 60, 20, .35); } .topbar-inner { position: relative; height: 66px; padding: 0 24px; display: flex; justify-content: center; } .mainnav { flex: 1; display: grid; grid-template-columns: 1fr 250px 1fr; align-items: stretch; gap: 0; } .nav-left { grid-column: 1; justify-content: flex-end; } .nav-right { grid-column: 3; justify-content: flex-start; } .nav-list { gap: 0; align-items: stretch; } .nav-item { display: flex; align-items: stretch; } .nav-list > .nav-item + .nav-item::before { content: ""; align-self: center; width: 7px; height: 7px; margin: 0 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; } .nav-link { padding: 0 16px; font-size: .84rem; letter-spacing: .16em; color: #ecd7ae; } .nav-item.is-active > .nav-link { color: #fff0cf; text-shadow: 0 0 10px rgba(255, 90, 50, .7); background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(200, 30, 30, .55), transparent 75%); } .nav-item.is-active > .nav-link::after { left: 50%; right: auto; bottom: -8px; width: 11px; height: 11px; margin-left: -5.5px; z-index: 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 60, 40, .9)); } .has-menu > .nav-menu { top: calc(100% + 3px); } .nav-actions { display: none; } .nav-actions .portal-status { display: none; } .crest { position: absolute; left: 50%; top: 0; z-index: 60; width: 250px; margin-left: -125px; display: flex; flex-direction: column; align-items: center; text-shadow: none; } .crest::before { content: ""; position: absolute; left: 50%; top: 22px; width: 360px; height: 44px; margin-left: -180px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='140,19 14,22 140,25' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpolygon points='220,19 346,22 220,25' fill='url(%23g)' stroke='%231a0a04' stroke-width='.6'/%3E%3Cpath d='M146,16 C128,14 120,8 116,1 M214,16 C232,14 240,8 244,1 M146,28 C132,30 126,35 123,42 M214,28 C228,30 234,35 237,42' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M120,21 C104,16 96,10 94,4 M240,21 C256,16 264,10 266,4' fill='none' stroke='url(%23g)' stroke-width='1.1' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); } .crest-medal { position: relative; width: 88px; height: 88px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #4a1008, #1a0605 62%, #0d0403); box-shadow: 0 0 0 1px #1a0a04, 0 0 0 3px #b8863c, 0 0 0 4px #1a0a04, 0 0 0 5px rgba(224, 187, 112, .5), 0 6px 16px rgba(0, 0, 0, .8), 0 0 26px rgba(200, 50, 20, .35), inset 0 0 12px #000; } .crest-medal::before { content: ""; position: absolute; inset: -16px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(0 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(90 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(180 28 28)'/%3E%3Cpolygon points='28,0 25,8 31,8' fill='url(%23g)' transform='rotate(270 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(45 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(135 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(225 28 28)'/%3E%3Cpolygon points='28,4 26.5,9 29.5,9' fill='url(%23g)' opacity='.7' transform='rotate(315 28 28)'/%3E%3C/svg%3E") center / contain no-repeat; } .crest-medal::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 55%, rgba(120, 12, 16, .6) 72%, rgba(255, 120, 60, .75) 84%, transparent 90%); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 86%, #000 94%, transparent 100%); mask: radial-gradient(closest-side, transparent 80%, #000 86%, #000 94%, transparent 100%); filter: blur(1px); animation: spin 5s linear infinite; } .crest-medal img { width: 76px; height: 76px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8)); transition: transform .4s ease; } .crest:hover .crest-medal img { transform: scale(1.06) rotate(-4deg); } .crest-name { margin-top: 8px; padding: 6px 22px 7px; text-align: center; font: 700 1.2rem/1 var(--font-deco); letter-spacing: .06em; color: #f7dc98; text-shadow: 0 2px 3px #000, 0 0 12px rgba(255, 120, 50, .35); background: linear-gradient(180deg, #24100b, #0e0605); border: 1px solid #a8762f; box-shadow: 0 0 0 1px #1a0a04, 0 6px 14px rgba(0, 0, 0, .7); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } .crest-name small { display: block; margin-top: 4px; font: 600 .52rem/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); text-shadow: none; } .is-home .crest-name { display: none; } /* the banner right below already carries the full logo */ .is-page .page-head-inner { padding-top: 92px; } .page-head { background-position: 0 0, center 92%; } /* show the city, not the banner's lettering, behind page titles */ @media (max-width: 1180px) { .mainnav { grid-template-columns: 1fr 210px 1fr; } .nav-link { font-size: .76rem; } .nav-list > .nav-item + .nav-item::before { margin: 0 1px; } } @media (max-width: 1020px) { .utilbar { display: none; } .topbar-inner { height: 62px; padding: 0 14px; justify-content: space-between; align-items: center; } .mainnav { display: flex; grid-template-columns: none; } .nav-list { align-items: stretch; } .nav-item { display: block; } .nav-list > .nav-item + .nav-item::before { display: none; } .nav-link { height: auto; } .nav-item.is-active > .nav-link { background: linear-gradient(90deg, rgba(165, 15, 28, .45), transparent); } .nav-actions { display: flex; } .crest { width: 120px; margin-left: -60px; } .crest::before { width: 240px; margin-left: -120px; top: 18px; height: 30px; } .crest-medal { width: 60px; height: 60px; margin-top: 4px; } .crest-medal::before { inset: -11px; } .crest-medal img { width: 52px; height: 52px; } .crest-name { display: none; } .is-page .page-head-inner { padding-top: 52px; } } /* Top Players: built from the owner's artwork. tp-top (scene, crest, title plate) + tiled border strips + tp-bottom (button, pendant) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tp { position: relative; margin: 6px -4% 22px; font-variant-numeric: lining-nums; } .tp-top img, .tp-bottom img { display: block; width: 100%; height: auto; } .tp-body { padding: 0 7.6%; background: url(images/tp-side-l.png) left top / 7.43% auto repeat-y, url(images/tp-side-r.png) right top / 7.43% auto repeat-y, linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(images/tp-stone.jpg) center / 180px auto repeat; background-clip: border-box, border-box, content-box, content-box; } .tp-bottom { position: relative; } .tp-more { position: absolute; left: 15.5%; top: 6%; width: 69%; height: 36%; border-radius: 6px; } .tp-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s; background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 60, .35), transparent 70%); mix-blend-mode: screen; } .tp-more:hover::after, .tp-more:focus-visible::after { opacity: 1; } .tp .top-list { display: grid; gap: 6px; padding: 0; margin: 0; } .tp .top-list li { grid-template-columns: 36px 34px 1fr auto; gap: 8px; margin: 0; padding: 7px 10px 7px 6px; border-radius: 2px; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(images/tp-stone.jpg) center / cover; border: 1px solid rgba(214, 170, 96, .6); box-shadow: inset 0 0 10px rgba(0, 0, 0, .6); } .tp .top-list li + li { border-top: 1px solid rgba(214, 170, 96, .6); } .tp .top-list li:hover { background: linear-gradient(rgba(120, 20, 10, .25), rgba(120, 20, 10, .25)), url(images/tp-stone.jpg) center / cover; } .tp .top-list li:first-child { border-color: #f2c96e; background: radial-gradient(ellipse at 50% 0, rgba(255, 170, 60, .28), transparent 70%), linear-gradient(rgba(60, 32, 8, .45), rgba(60, 32, 8, .45)), url(images/tp-stone.jpg) center / cover; box-shadow: 0 0 10px rgba(255, 165, 60, .6), inset 0 0 12px rgba(255, 160, 60, .3); } .tp .top-list .rank { width: 36px; height: 36px; border: 0; color: transparent; text-shadow: none; background: url(images/rank-5.png) center / contain no-repeat; } .tp .top-list li:first-child .rank { background-image: url(images/rank-1.png); } .tp .top-list li:first-child .rank::before { display: none; } .tp .top-list li:nth-child(2) .rank { background-image: url(images/rank-2.png); } .tp .top-list li:nth-child(3) .rank { background-image: url(images/rank-3.png); } .tp .top-list li:nth-child(4) .rank { background-image: url(images/rank-4.png); } .tp .top-list .outfit { width: 56px; height: 56px; margin: -20px 0 0 -20px; } /* the sprite sits in the bottom-right of its 64px canvas */ .tp .top-list .who { font: 700 1.02rem/1.1 'Alegreya', Georgia, serif; color: #f6ead2; text-shadow: 0 1px 2px #000; } .tp .top-list .who small { margin-top: 3px; font: 700 .64rem/1.1 'Alegreya', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #e9b44c; } .tp .top-list .lvl { font: 700 1.12rem/1 'Alegreya', Georgia, serif; color: #f3dca6; text-shadow: 0 1px 2px #000; } .tp .top-list .lvl small { margin-top: 2px; font: 700 .6rem/1 'Alegreya', Georgia, serif; letter-spacing: .08em; color: #a9a39a; } .tp .top-list .empty { display: block; padding: 14px; text-align: center; background: none; border: 0; box-shadow: none; } @media (max-width: 1320px) { .shell { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "main right" "main left"; } .rail-left { align-self: start; } } /* ---------- home: compact news ticker + "Read more" on older news (2026-09-29) ---------- */ .ticker { margin-bottom: 20px; } .ticker-list { padding: 2px 18px 6px; } .ticker-list li { grid-template-columns: 10px auto 1fr; gap: 12px; align-items: center; padding: 7px 0 9px; font-size: .9rem; } .ticker-list li:last-child { padding-bottom: 4px; } .ticker-dot { width: 10px; height: 15px; } .ticker-list time { font-size: .68rem; padding-right: 12px; } .ticker-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-list li.is-cut { cursor: pointer; } .ticker-list li.is-cut:hover .ticker-text, .ticker-list li.is-cut:focus-visible .ticker-text { color: var(--gold-hi); } .ticker-list li.is-open { align-items: baseline; } .ticker-list li.is-open .ticker-text { white-space: normal; } .news-body.is-folded { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } button.frame-link { border: 0; cursor: pointer; background-color: transparent; } .news-card .read-more { margin-bottom: 4px; } .news-card .read-more::after { content: "\25BE"; font-size: .8rem; } .news-card .read-more[aria-expanded="true"]::after { content: "\25B4"; } /* left rail: Server Info box */ .info-list { margin: 0; padding: 6px 20px 4px; } .info-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(216, 162, 74, .12); } .info-list div:last-child { border-bottom: 0; } .info-list dt { font: 700 .66rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .info-list dd { margin: 0; font: 700 .9rem/1.2 var(--font-display); color: var(--gold-hi); text-align: right; } @media (max-width: 640px) { .ticker-list li { grid-template-columns: 10px auto 1fr; } .ticker-list time { grid-column: auto; border-right: 1px solid rgba(201, 161, 94, .3); padding-right: 10px; } .ticker-text { grid-column: auto; white-space: nowrap; } .ticker-list li.is-open .ticker-text { white-space: normal; } } /* ---------- page: Create Account (legacy table markup restyled; the PHP is shared with the old layout) ---------- */ #createaccount .CreateAccountHeader { display: none; } /* the page header above already says it */ #createaccount .CreateAccountIntro { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--ruby-hi); background: rgba(120, 12, 20, .14); color: var(--text); } #createaccount table, #createaccount tbody, #createaccount tr, #createaccount td { display: block; width: auto !important; padding: 0; background: none !important; } #createaccount td.white { margin: 0 0 18px; text-align: center; font: 700 .8rem/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); } #createaccount td.white b::before, #createaccount td.white b::after { content: ""; display: inline-block; width: 70px; height: 1px; margin: 0 14px; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--gold)); } #createaccount td.white b::after { background: linear-gradient(90deg, var(--gold), transparent); } #createaccount tr:has(> td[width="150"]) { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: start; gap: 6px 18px; padding: 12px 0; border-bottom: 1px solid rgba(216, 162, 74, .1); } #createaccount td[width="150"] { padding-top: 11px; font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } #createaccount td[width="150"] b { font-weight: inherit; } #createaccount input:not([type]), #createaccount input[type="password"], #createaccount select { width: 100%; max-width: 380px; } #createaccount font[size="1"] { display: block; margin-top: 6px; font: 400 .82rem/1.4 var(--font-body); color: var(--muted); } #acc_name_check, #email_check { padding-top: 10px; font-size: .92rem; font-weight: 400; color: var(--muted); } #createaccount font[color="red"] { color: #ff7b6e; } #createaccount font[color="green"] { color: #7fd88a; } #createaccount img[src*="imagebuilder"] { display: block; height: 42px; width: auto; border: 1px solid var(--line); border-radius: 4px; } #createaccount img[src$="blank.gif"] { display: none; } #createaccount textarea { display: block; width: 100%; height: 240px; margin-top: 10px; padding: 14px 16px; resize: vertical; font: 400 .88rem/1.6 var(--font-body); color: var(--muted); scrollbar-color: var(--gold) rgba(0, 0, 0, .3); } #createaccount table table table:not(:has(td[width="150"])) td { padding: 8px 0; } #createaccount input[type="checkbox"] { width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; accent-color: var(--ruby-hi); } #createaccount label[for="rules"] { cursor: pointer; font: 700 .95rem/1.3 var(--font-display); letter-spacing: .04em; color: var(--gold-hi); } #createaccount label[for="rules"] u { text-decoration: none; } .CreateAccountActions { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; } .CreateAccountSubmit { padding: 1em 2.6em; border: 1px solid #f0735f55; border-radius: 4px; cursor: pointer; font: 700 .85rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .CreateAccountSubmit:hover { box-shadow: var(--glow); filter: brightness(1.08); } .CreateAccountCancel { color: var(--muted); } .CreateAccountCancel:hover { color: var(--gold-hi); } /* ---------- page: Download ---------- */ #download .DownloadEyebrow, #download .DownloadPage > h2 { display: none; } #download .DownloadLead { margin: 0 0 26px; text-align: center; font-size: 1.05rem; } #download .DownloadCard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; max-width: 640px; margin: 0 auto 34px; padding: 22px 26px; border: 1px solid var(--line-strong); border-radius: 8px; background: linear-gradient(180deg, rgba(120, 14, 20, .22), rgba(0, 0, 0, .35)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), var(--shadow); } #download .DownloadIcon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 35%, #5a1016, #1a0405 75%); box-shadow: 0 0 16px rgba(200, 30, 40, .35); } #download .DownloadIcon svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #download .DownloadDetails { display: grid; gap: 6px; } #download .DownloadDetails strong { font: 700 1.2rem/1.1 var(--font-display); letter-spacing: .05em; color: var(--gold-hi); } #download .DownloadDetails span { font-size: .88rem; color: var(--muted); } #download .DownloadPageButton { display: inline-flex; align-items: center; gap: 10px; padding: 1em 1.8em; border: 1px solid #f0735f55; border-radius: 4px; white-space: nowrap; font: 700 .8rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } #download .DownloadPageButton:hover { box-shadow: var(--glow); filter: brightness(1.08); color: #fff; text-shadow: none; } #download .DownloadPageButton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #download .DownloadSteps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; } #download .DownloadSteps li { counter-increment: step; position: relative; padding: 38px 18px 18px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); } #download .DownloadSteps li::before { content: counter(step); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 50% 35%, #7a141c, #230507 75%); font: 700 1rem/1 var(--font-display); color: var(--gold-hi); } #download .DownloadSteps strong { display: block; margin-bottom: 8px; font: 700 .8rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } #download .DownloadSteps span { font-size: .9rem; line-height: 1.55; color: var(--muted); } #download .DownloadSteps b { color: var(--text); } @media (max-width: 760px) { #createaccount tr:has(> td[width="150"]) { grid-template-columns: 1fr; gap: 6px; } #createaccount td[width="150"] { padding-top: 0; } #download .DownloadCard { grid-template-columns: auto 1fr; } #download .DownloadPageButton { grid-column: 1 / -1; justify-content: center; } #download .DownloadSteps { grid-template-columns: 1fr; gap: 26px; } } /* ---------- page: Highscores (own markup from pages/highscores.php) ---------- */ .hs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 0 12px; } .hs-tabs a, .hs-vocs a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: 700 .68rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(0, 0, 0, .25); } .hs-tabs a:hover, .hs-vocs a:hover { color: var(--gold-hi); border-color: var(--line-strong); } .hs-tabs a.is-active { color: #fff; border-color: #f0735f55; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); } .hs-vocs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 22px; } .hs-vocs a { padding: 6px 2px; border: 0; background: none; border-bottom: 2px solid transparent; border-radius: 0; } .hs-vocs a.is-active { color: var(--gold-hi); border-bottom-color: var(--gold); } .legacy .hs-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .hs-table th { padding: 4px 12px 8px; text-align: left; font: 700 .66rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); } .legacy .hs-table td { padding: 8px 12px; vertical-align: middle; background: rgba(255, 255, 255, .03); border-top: 1px solid rgba(216, 162, 74, .1); border-bottom: 1px solid rgba(216, 162, 74, .1); } .legacy .hs-table tr:nth-child(even) > td { background: rgba(255, 255, 255, .03); } .legacy .hs-table td:first-child { border-left: 1px solid rgba(216, 162, 74, .1); border-radius: 6px 0 0 6px; } .legacy .hs-table td:last-child { border-right: 1px solid rgba(216, 162, 74, .1); border-radius: 0 6px 6px 0; } .legacy .hs-table tr:hover > td { background: rgba(216, 162, 74, .07); } .legacy .hs-table tr.hs-top-1 > td { background: rgba(140, 18, 26, .3); border-color: rgba(245, 212, 136, .45); } .legacy .hs-table tr.hs-top-2 > td, .legacy .hs-table tr.hs-top-3 > td { background: rgba(120, 14, 20, .16); } .hs-rank { width: 50px; text-align: center !important; font: 700 1rem/1 var(--font-display); color: var(--muted); } .hs-rank img { display: block; margin: 0 auto; width: 34px; height: 34px; } .hs-outfit { width: 56px; padding-left: 0 !important; padding-right: 0 !important; } .hs-outfit img { display: block; width: 48px; height: 48px; margin: -6px auto -8px; image-rendering: pixelated; } .hs-name a { font: 700 1.02rem/1.2 var(--font-display); letter-spacing: .03em; color: var(--gold-hi); } .hs-name a:hover { color: #fff; } .hs-name small { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); } .hs-flag { width: 16px; height: 11px; margin-left: 8px; vertical-align: 1px; } .hs-online { margin-left: 8px; padding: 2px 6px; border-radius: 3px; font: 700 .58rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #9df0a7; background: rgba(60, 160, 80, .18); border: 1px solid rgba(120, 220, 140, .35); vertical-align: 2px; } .hs-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } .legacy .hs-value { font: 700 1rem/1 var(--font-display); color: var(--text); } .legacy .hs-exp, .legacy .hs-level { color: var(--muted); } .hs-empty { padding: 30px 0; text-align: center; color: var(--muted); } .hs-pages { display: flex; justify-content: center; gap: 12px; margin-top: 18px; } @media (max-width: 640px) { .hs-outfit { display: none; } .legacy .hs-table td, .hs-table th { padding-left: 8px; padding-right: 8px; } .hs-exp { font-size: .8rem; } } /* ---------- page: Characters (pages/characters_oblivion.php) ---------- */ .char { display: grid; gap: 18px; } .char-head { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: radial-gradient(ellipse at 0% 50%, rgba(160, 20, 28, .35), transparent 60%), rgba(0, 0, 0, .3); } .char-portrait { flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 40%, #3a0b0e, #0d0303 72%); box-shadow: 0 0 22px rgba(200, 30, 40, .3), inset 0 0 0 4px rgba(0, 0, 0, .4); } .char-portrait img { width: 64px; height: 64px; image-rendering: pixelated; transform: translate(-6px, -6px) scale(1.25); } .char-id h2 { margin: 0; font: 700 1.7rem/1.1 var(--font-display); letter-spacing: .04em; color: var(--gold-hi); } .char-skull { vertical-align: 2px; } .char-flag { width: 18px; height: 12px; vertical-align: 4px; } .char-sub { margin: 6px 0 10px !important; color: var(--muted); } .char-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; } .badge { display: inline-block; padding: 4px 8px; border-radius: 3px; font: 700 .6rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; border: 1px solid; } .badge-on { color: #9df0a7; background: rgba(60, 160, 80, .16); border-color: rgba(120, 220, 140, .35); } .badge-off { color: var(--muted); background: rgba(255, 255, 255, .03); border-color: var(--line); } .badge-bad { color: #ffb4a8; background: rgba(200, 40, 40, .18); border-color: rgba(255, 110, 100, .4); } .badge-staff { color: var(--gold-hi); background: rgba(216, 162, 74, .12); border-color: var(--line-strong); } .char .ok { color: #7fd88a; } .char .bad { color: #ff8a7e; } .char .muted { color: var(--muted); } .char-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; } .char-box { padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); } .legacy .char-box h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 700 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .char-info { margin: 0; } .char-info div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(216, 162, 74, .08); } .char-info div:last-child { border-bottom: 0; } .char-info dt { font: 700 .66rem/1.6 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .char-info dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .char-comment { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(216, 162, 74, .06); font-style: italic; color: var(--text); } .char-gear { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; } .inv { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .35); } .slot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; border: 1px solid rgba(216, 162, 74, .25); background: linear-gradient(180deg, #2a1c14, #140c09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 4px rgba(0, 0, 0, .6); } .slot img { width: 32px; height: 32px; image-rendering: pixelated; } .slot.is-empty img { opacity: .35; filter: grayscale(1); } .slot-stat { align-content: center; gap: 2px; font: 700 .82rem/1 var(--font-display); color: var(--gold-hi); } .slot-stat small { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .vitals { display: grid; gap: 12px; } .vital-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: .84rem; } .vital-top span { font: 700 .66rem/1.6 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .vital-top b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .vital-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; } .vital-bar i { display: block; height: 100%; border-radius: 3px; } .vital.hp i { background: linear-gradient(180deg, #ff6a5c, #b3141c); } .vital.mana i { background: linear-gradient(180deg, #6f8dff, #2a3fb8); } .vital.exp i { background: linear-gradient(180deg, #f5d488, #a8762f); } .vital-note { margin: 0 !important; font-size: .8rem; color: var(--muted); } .char-skills { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; } .char-skills a { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid rgba(216, 162, 74, .15); border-radius: 6px; background: rgba(255, 255, 255, .02); } .char-skills a:hover { border-color: var(--line-strong); background: rgba(216, 162, 74, .07); } .char-skills img { width: 32px; height: 32px; } .char-skills b { font: 700 1.1rem/1 var(--font-display); color: var(--gold-hi); } .char-skills span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .char-quests, .char-deaths, .char-others { list-style: none; margin: 0; padding: 0; } .char-quests li, .char-others li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(216, 162, 74, .08); } .char-quests li b { margin-left: auto; font: 700 .62rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .char-quests li.is-done b { color: #7fd88a; } .char-deaths li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(216, 162, 74, .08); } .char-deaths li:last-child, .char-quests li:last-child, .char-others li:last-child { border-bottom: 0; } .char-deaths time { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; } .char-deaths b { color: var(--gold-hi); } .legacy .char-sub-title { margin: 16px 0 4px; font: 700 .66rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .char-others a { font: 700 .98rem/1.2 var(--font-display); color: var(--gold-hi); } .char-others .muted { margin-left: auto; font-size: .86rem; } .char-others li.is-current a { color: #fff; } .char-others li.is-current a::before { content: "\25C6"; margin-right: 8px; font-size: .6rem; vertical-align: 2px; color: var(--ruby-hi); } .char-error { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--ruby-hi); background: rgba(200, 30, 40, .12); color: #ffd0c8; } .char-search { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .18); text-align: center; } .legacy .char-search h3 { margin: 0 0 12px; font: 700 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .char-search form { display: flex; justify-content: center; gap: 10px; } .char-search input { flex: 0 1 320px; } @media (max-width: 980px) { .char-grid { grid-template-columns: 1fr; } .char-skills { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 640px) { .char-head { flex-direction: column; text-align: center; } .char-badges { justify-content: center; } .char-gear { grid-template-columns: 1fr; justify-items: center; } .vitals { width: 100%; } .char-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } .char-deaths li { grid-template-columns: 1fr; gap: 2px; } } /* ---------- page: Who is Online (pages/whoisonline.php, oblivion branch) ---------- */ .wio-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: 8px; background: radial-gradient(ellipse at 0% 50%, rgba(160, 20, 28, .3), transparent 60%), rgba(0, 0, 0, .3); } .wio-count { display: flex; align-items: baseline; gap: 10px; margin: 0 !important; } .wio-count strong { font: 700 2.6rem/1 var(--font-display); color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 123, 44, .35); } .wio-count span { font: 700 .72rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .wio-vocs { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; } .wio-vocs li { display: grid; justify-items: center; gap: 3px; min-width: 70px; padding: 8px 6px; border: 1px solid rgba(216, 162, 74, .15); border-radius: 6px; background: rgba(0, 0, 0, .25); } .wio-vocs img { width: 28px; height: 28px; object-fit: contain; } .wio-vocs b { font: 700 1.05rem/1 var(--font-display); color: var(--gold-hi); } .wio-vocs span { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .wio-empty { padding: 26px 0; text-align: center; color: var(--muted); } .wio-table th a { color: var(--gold); } .wio-table th a.is-active, .wio-table th a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 4px; } .legacy .wio-voc { color: var(--muted); } @media (max-width: 640px) { .wio-summary { justify-content: center; } .wio-vocs li { min-width: 60px; } } /* ---------- legacy pages: shared pass (buttons, intros, forms) 2026-09-29 ---------- */ /* image buttons are turned into .legacy-btn by layout.php; the old BigButton wrappers just hold them now */ .legacy .BigButton, .legacy .BigButton > div { display: inline-block; width: auto !important; height: auto !important; background: none !important; } .legacy .legacy-btn { margin: 4px 2px; } .legacy input[type="submit"], .legacy input[type="button"], .legacy button:not(.btn) { display: inline-flex; align-items: center; justify-content: center; margin: 4px 2px; padding: .7em 1.05em; border: 1px solid #f0735f55; border-radius: 4px; cursor: pointer; font: 700 .72rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); } .legacy input[type="submit"]:hover, .legacy input[type="button"]:hover, .legacy button:not(.btn):hover { box-shadow: var(--glow); filter: brightness(1.08); } /* the page header already names the page: hide the repeated eyebrow + heading, keep the intro line */ .AccountLoginHeader > span, .AccountLoginHeader > h2, .HousesHeader > span, .HousesHeader > h2, .ExperienceHeader > span, .ExperienceHeader > h2, .legacy .RulesEyebrow { display: none; } .AccountLoginHeader > p, .HousesHeader > p, .ExperienceHeader > p { margin: 0 0 20px; padding: 12px 16px; border-left: 3px solid var(--ruby-hi); background: rgba(120, 12, 20, .14); } .legacy fieldset { margin: 0 0 14px; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .18); } .legacy legend { padding: 0 8px; font: 700 .7rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .legacy input[type="radio"], .legacy input[type="checkbox"] { accent-color: var(--ruby-hi); } .legacy fieldset label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; cursor: pointer; } .legacy td.LabelV { width: 1%; white-space: nowrap; padding-right: 18px; font: 700 .7rem/2.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } /* header rows of old tables (painted with the "vdarkborder" colour) */ .legacy tr[bgcolor="#3a1712"] > td, .legacy tr[bgcolor="#3a1712"] > th { padding-top: 10px; padding-bottom: 8px; background: none !important; border-bottom: 1px solid var(--line-strong); font: 700 .68rem/1.2 var(--font-display) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gold) !important; } .legacy tr[bgcolor="#3a1712"] font, .legacy tr[bgcolor="#3a1712"] a { font: inherit; color: inherit !important; } #forum > table > tbody > tr:not([bgcolor="#3a1712"]) > td:first-child > a:first-child { font: 700 1.02rem/1.3 var(--font-display); color: var(--gold-hi); } #forum > b:first-of-type { display: block; margin: 10px 0 6px; font: 700 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } /* forum "new topic" / "reply" image links become buttons */ #forum a:has(> img[src$="forum/topic.gif"]), #forum a:has(> img[src$="forum/post.gif"]) { display: inline-flex; margin: 6px 0; padding: .7em 1.2em; border: 1px solid #f0735f55; border-radius: 4px; font: 700 .72rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); } #forum a:has(> img[src$="forum/topic.gif"]):hover, #forum a:has(> img[src$="forum/post.gif"]):hover { box-shadow: var(--glow); color: #fff; } #forum a > img[src$="forum/topic.gif"], #forum a > img[src$="forum/post.gif"] { display: none; } #forum a:has(> img[src$="forum/topic.gif"])::before { content: "New topic"; } #forum a:has(> img[src$="forum/post.gif"])::before { content: "Reply"; } /* account login */ .AccountLoginForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 14px; max-width: 640px; } .AccountLoginForm label { display: grid; gap: 6px; } .AccountLoginForm label span { font: 700 .66rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .AccountLoginForm input { width: 100%; } .AccountLoginForm button { height: 42px; margin: 0; } .AccountLoginFooter { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--muted); } @media (max-width: 640px) { .AccountLoginForm { grid-template-columns: 1fr; } } /* ---------- page: Guilds (pages/guilds_oblivion.php) ---------- */ .guilds-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; padding: 12px 16px; border-left: 3px solid var(--ruby-hi); background: rgba(120, 12, 20, .14); } .guilds-bar p { margin: 0 !important; flex: 1 1 320px; } .guild-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; } .guild-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); color: var(--text); } .guild-card:hover { border-color: var(--line-strong); background: rgba(216, 162, 74, .06); color: var(--text); } .guild-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 162, 74, .2); } .guild-text strong { display: block; margin-bottom: 4px; font: 700 1.1rem/1.2 var(--font-display); color: var(--gold-hi); } .guild-text span { display: block; font-size: .9rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .guild-go { font-size: 1.8rem; color: var(--gold); } .guild-admin { display: inline-block; margin: 4px 0 0 18px; font-size: .8rem; color: #ff8a7e; } .guild-empty { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 8px; background: rgba(0, 0, 0, .18); } .guild-empty p { margin: 0 !important; color: var(--muted); } .guild-empty strong { display: block; margin-bottom: 4px; font: 700 1.05rem/1.2 var(--font-display); color: var(--gold-hi); } .guild-help { margin-top: 18px !important; font-size: .88rem; color: var(--muted); } .guild { display: grid; gap: 18px; } .guild-logo-lg { flex: none; width: 88px; height: 88px; padding: 10px; } .guild-desc { line-height: 1.7; } .guild-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .legacy .guild-rank h4 { margin: 0 0 4px; font: 700 .7rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ruby-hi); } .guild-rank ul { list-style: none; margin: 0; padding: 0; } .guild-rank li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid rgba(216, 162, 74, .08); } .guild-rank li:last-child { border-bottom: 0; } .guild-rank li > a:first-child { font: 700 .98rem/1.2 var(--font-display); color: var(--gold-hi); } .guild-member-meta { margin-left: auto; font-size: .86rem; color: var(--muted); } .guild-nick { display: inline-flex; gap: 6px; } .legacy .guild-nick input { width: 160px; padding: 5px 8px; font-size: .85rem; } .guild .char-others li a.guild-kick, .guild-kick { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #ff8a7e; font-family: var(--font-body); font-weight: 400; } .guild .char-others li .guild-kick { margin-left: auto; } .guild-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .guild-actions form { margin: 0; } .guild .muted { color: var(--muted); } @media (max-width: 640px) { .guild-card { grid-template-columns: 48px minmax(0, 1fr); } .guild-card .guild-logo { width: 48px; height: 48px; } .guild-go { display: none; } .guild-member-meta { margin-left: 0; width: 100%; } } /* ---------- page: Account overview (pages/accountmanagement_oblivion.php) ---------- */ .acc { display: grid; gap: 18px; } .acc-head { justify-content: space-between; } .acc-head form { margin: 0; } .acc-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border: 1px solid rgba(255, 110, 100, .35); border-left: 3px solid var(--ruby-hi); border-radius: 6px; background: rgba(160, 20, 28, .16); } .acc-alert p { margin: 0 !important; flex: 1 1 340px; } .acc-alert strong { color: var(--gold-hi); } .acc-alert form, .acc-actions form { margin: 0; } .acc-note { margin: 0 !important; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(216, 162, 74, .07); } .acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .acc-chars li { flex-wrap: wrap; } .acc-link { font-size: .8rem; color: var(--gold); } .acc-chars .muted { margin-left: auto; } .acc-small { margin: 8px 0 0 !important; font-size: .82rem; } @media (max-width: 640px) { .acc-head { align-items: center; } } /* ---------- page: Houses (filters as chips; markup from pages/houses.php) ---------- */ .HouseFilters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .HouseFilters fieldset:first-of-type { grid-column: 1 / -1; } .HouseFilters br { display: none; } .HouseFilters fieldset { display: flex; flex-wrap: wrap; gap: 6px; } .HouseFilters legend { width: 100%; margin-bottom: 4px; } .HouseFilters input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .legacy .HouseFilters fieldset label { margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, .25); font-size: .9rem; color: var(--muted); } .legacy .HouseFilters fieldset label:hover { color: var(--gold-hi); border-color: var(--line-strong); } .HouseFilters input[type="radio"]:checked + label { color: #fff !important; border-color: #f0735f55 !important; background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912) !important; } .HouseFilters input[type="radio"]:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; } .HouseFilters > button { grid-column: 1 / -1; justify-self: center; padding: .9em 2.2em; } .HouseResults { margin-top: 20px; } .legacy .HouseResults table { border-collapse: separate; border-spacing: 0 6px; } .HouseResults th { padding: 4px 12px 8px; text-align: left; font: 700 .66rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); } .HouseResults th:last-child { text-align: right; } .legacy .HouseResults td { padding: 10px 12px; background: rgba(255, 255, 255, .03) !important; border-top: 1px solid rgba(216, 162, 74, .1); border-bottom: 1px solid rgba(216, 162, 74, .1); } .legacy .HouseResults td:first-child { border-left: 1px solid rgba(216, 162, 74, .1); border-radius: 6px 0 0 6px; color: var(--gold-hi); font-family: var(--font-display); font-weight: 700; } .legacy .HouseResults td:last-child { border-right: 1px solid rgba(216, 162, 74, .1); border-radius: 0 6px 6px 0; text-align: right; color: var(--muted); white-space: nowrap; } @media (max-width: 640px) { .HouseFilters { grid-template-columns: 1fr; } } /* ---------- page: Server Rules (markup from pages/tibiarules.php) ---------- */ .RulesHero > h2 { display: none; } .RulesHero > p { margin: 0 0 12px; font-size: 1.02rem; } .RulesNotice { margin-bottom: 18px; padding: 12px 16px; border-left: 3px solid var(--ruby-hi); background: rgba(120, 12, 20, .14); } .RulesNotice strong { color: var(--gold-hi); } .RulesIndex { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .RulesIndex a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, .25); color: var(--text); font-size: .92rem; } .RulesIndex a:hover { border-color: var(--line-strong); color: var(--gold-hi); } .RulesIndex span { font: 700 .72rem/1 var(--font-display); color: var(--ruby-hi); } .RulesSections { display: grid; gap: 18px; } .RulesSection { padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); scroll-margin-top: 90px; } .RulesSectionHeading { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .RulesSectionHeading > span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 50% 35%, #7a141c, #230507 75%); font: 700 .95rem/1 var(--font-display); color: var(--gold-hi); } .legacy .RulesSectionHeading h3 { margin: 2px 0 4px; font: 700 1.2rem/1.2 var(--font-display); color: var(--gold-hi); } .RulesSectionHeading p { margin: 0 !important; color: var(--muted); } .RulesList { display: grid; gap: 4px; } .RuleItem { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 8px 0; } .RuleLetter { font: 700 .9rem/1.6 var(--font-display); color: var(--ruby-hi); text-align: center; } .legacy .RuleItem h4 { margin: 0 0 2px; font: 700 .98rem/1.4 var(--font-body); color: var(--gold-hi); } .RuleItem p { margin: 0 !important; color: var(--text); } .RulesFooter { margin-top: 20px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); } .RulesFooter strong { display: block; margin-bottom: 6px; font: 700 .72rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .RulesFooter p { margin: 6px 0 0 !important; } /* ---------- page: Server Info (pages/serverinfo.php, oblivion branch) ---------- */ .sinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sinfo-list div { grid-template-columns: 150px minmax(0, 1fr); } .sinfo-more { margin-top: 18px !important; text-align: center; color: var(--muted); } @media (max-width: 980px) { .sinfo { grid-template-columns: 1fr; } } /* ---------- pages: Experience Table, Lost Account, Support Team ---------- */ .xp-intro { margin: 0 0 16px !important; padding: 12px 16px; border-left: 3px solid var(--ruby-hi); background: rgba(120, 12, 20, .14); } .xp-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .xp-lookup label { font: 700 .7rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .legacy .xp-lookup input { width: 140px; } .xp-answer { margin: 0 0 16px !important; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(216, 162, 74, .07); } .xp-answer b { color: var(--gold-hi); } .xp-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .legacy .xp-table { width: 100%; font-variant-numeric: tabular-nums; } .xp-table th { padding: 6px 8px; text-align: left; font: 700 .64rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); } .xp-table th:last-child, .legacy .xp-table td:last-child { text-align: right; } .legacy .xp-table td { padding: 4px 8px; font-size: .88rem; } .legacy .xp-table td:first-child { color: var(--gold-hi); font-weight: 700; } .lost-help { padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 8px; background: radial-gradient(ellipse at 0% 50%, rgba(160, 20, 28, .25), transparent 60%), rgba(0, 0, 0, .25); } .lost-help p { margin: 0 0 10px !important; } .lost-help p:last-child { margin-bottom: 0 !important; } .lost-help strong { color: var(--gold-hi); } #team > center > h2 { margin: 0 0 16px; font-size: 1.1rem; } #team td:first-child { text-transform: capitalize; } #team font[color="green"], #team font[color="red"] { display: inline-block; padding: 4px 8px; border-radius: 3px; border: 1px solid; font: 700 .6rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; } #team font[color="green"] { color: #9df0a7 !important; background: rgba(60, 160, 80, .16); border-color: rgba(120, 220, 140, .35); } #team font[color="red"] { color: var(--muted) !important; background: rgba(255, 255, 255, .03); border-color: var(--line); } @media (max-width: 980px) { .xp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .xp-cols { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .topbar-inner { gap: 16px; } .nav-link { padding: 12px 9px; letter-spacing: .1em; } .btn-icon span { display: none; } .btn-icon { padding-left: .8em; padding-right: .8em; } } @media (max-width: 1020px) { .topbar { backdrop-filter: none; background: rgba(10, 5, 4, .98); } /* a backdrop-filter would trap the fixed menu inside the bar */ .portal-status-mobile { display: inline-flex; margin-left: auto; } .nav-actions .portal-status { display: none; } .nav-toggle { display: flex; margin-left: 0; } .mainnav { position: fixed; inset: 63px 0 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; background: var(--bg); padding: 18px 20px 40px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; } .nav-open .mainnav { transform: none; visibility: visible; } .nav-list { flex-direction: column; gap: 2px; } .nav-link { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: .9rem; border-bottom: 1px solid rgba(216, 162, 74, .12); border-radius: 0; } .nav-item.is-active > .nav-link::after { display: none; } .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; background: none; padding: 4px 0 8px 12px; } .has-menu:hover .nav-menu { display: none; } .has-menu.is-open .nav-menu { display: block; } .nav-actions { flex-wrap: wrap; } .nav-actions .btn { flex: 1; } .btn-icon span { display: inline; } .shell { grid-template-columns: 1fr; grid-template-areas: "main" "right" "left"; } .rail { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } } @media (max-width: 640px) { body { font-size: 16px; } .topbar-inner { padding: 8px 12px; gap: 10px; } .brand-name { font-size: 1.1rem; } .brand-name small { display: none; } .brand-emblem { width: 40px; height: 40px; } .hero-stage { aspect-ratio: 1672 / 941; } .hero-art { top: 0; } .portal-glow { top: 33.5cqw; } .is-home .shell { margin-top: -30px; } .pillars { grid-template-columns: 1fr; } .soon-list { grid-template-columns: 1fr; } .shell { padding: 22px 12px 40px; gap: 22px; } .panel { padding: 18px 14px; } .news-head { padding: 28px 16px 12px; } .news-body { padding: 16px; } .page-head-inner { padding: 38px 16px 24px; } .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-links { justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .embers { display: none; } } /* the active-page highlight must not replace the Shop link's gradient text (it is clipped to the letters) */ .nav-item.is-active > .nav-shop { background: linear-gradient(100deg, #ffe39a 0%, #ffb347 35%, #ff7b2c 55%, #ffe39a 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px rgba(255, 90, 50, .7)); } /* dropdown menus: fully opaque (the banner showed through) and above the bar's gold edge (it covered the first item) */ .has-menu > .nav-menu { z-index: 80; top: calc(100% + 6px); padding: 10px 8px 8px; background: linear-gradient(180deg, #1f0d0a, #140806); border: 1px solid var(--line-strong); border-top: 2px solid var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 220, 150, .12); } .nav-menu a { font-size: .98rem; } /* scrolled: the sticky bar keeps a smaller crest and drops the plaque, so nothing hangs over the page content */ .crest, .crest-name { transition: transform .2s ease, opacity .2s ease, visibility .2s; } .crest { transform-origin: 50% 0; } .is-scrolled .crest { transform: scale(.66); } .is-scrolled .crest-name { opacity: 0; visibility: hidden; transform: translateY(-10px); } /* ---------- right rail: Server Status box from the owner's artwork (images/ss-frame.png = ss-source.png with the text erased) ---------- Positions are percentages of the 1024x1536 artwork, text sizes follow the box width (container units). */ .ss { position: relative; container-type: inline-size; width: 100%; margin: 0 0 6px; } .ss-frame { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); } .ss-gem-off { position: absolute; left: 15.63%; top: 23.57%; width: 16.21%; height: auto; } .ss-rows { position: absolute; inset: 0; margin: 0; } .ss-row { position: absolute; left: 35.5%; right: 12%; transform: translateY(-50%); line-height: 1; white-space: nowrap; } .ss-r1 { top: 28.5%; } .ss-r2 { top: 39.9%; } .ss-r3 { top: 51.1%; } .ss-r4 { top: 62.2%; } .ss-r5 { top: 73%; } .ss-row dt { font: 700 3.4cqw/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; color: #f1dca4; text-shadow: 0 1px 2px #000; } .ss-row dd { margin: 0; } .ss-val { margin-top: .9cqw !important; font: 700 6cqw/1 var(--font-display); color: #fbecc5; text-shadow: 0 2px 4px #000, 0 0 10px rgba(255, 170, 80, .25); white-space: nowrap; } .ss-sub { margin-top: .8cqw !important; font: 600 2.8cqw/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #b9aa92; text-shadow: 0 1px 2px #000; white-space: nowrap; } .ss.is-offline .ss-r1 .ss-val { color: #ff8a7e; font-size: 5.4cqw; } .ss-more { position: absolute; left: 22%; right: 22%; top: 83.3%; transform: translateY(-50%); padding: 2.6cqw 0; text-align: center; font: 700 4.1cqw/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #f6dfa6; text-shadow: 0 1px 3px #000; } .ss-more span { margin-left: 1.5cqw; font-size: 5.4cqw; vertical-align: -.3cqw; } .ss-more:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 140, 60, .8), 0 1px 3px #000; } /* Top Players: the gold #1 row has its own background, so it needs its own hover (it showed no change) */ .tp .top-list li:first-child:hover { background: radial-gradient(ellipse at 50% 0, rgba(255, 190, 80, .42), transparent 72%), linear-gradient(rgba(110, 50, 10, .45), rgba(110, 50, 10, .45)), url(images/tp-stone.jpg) center / cover; box-shadow: 0 0 16px rgba(255, 175, 70, .85), inset 0 0 16px rgba(255, 170, 70, .45); } /* Server Status: the Online plate is a link to Who is Online */ .ss-hit { position: absolute; z-index: 2; border-radius: 6px; } .ss-hit-online { left: 10.5%; right: 10.5%; top: 23.4%; bottom: 66.4%; } .ss-hit-online:hover, .ss-hit-online:focus-visible { background: radial-gradient(ellipse at 30% 50%, rgba(110, 255, 140, .12), transparent 70%); box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .45), 0 0 14px rgba(255, 170, 70, .35); outline: none; } .ss-rows, .ss-more { z-index: 3; } .ss-rows { pointer-events: none; } /* Server Status: light circling the Online gem (centre of the gem in the artwork: 240,440 of 1024x1536) */ .ss-orb { position: absolute; z-index: 1; left: 23.45%; top: 28.65%; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; pointer-events: none; } .ss-orb::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(120, 255, 140, .55), rgba(40, 200, 80, .15) 55%, transparent 72%); mix-blend-mode: screen; animation: ss-pulse 2.4s ease-in-out infinite; } .ss-orb i { position: absolute; inset: 6%; border-radius: 50%; mix-blend-mode: screen; animation: ss-spin 3.2s linear infinite; background: conic-gradient(from 0deg, transparent 0 62%, rgba(90, 255, 130, .15) 72%, rgba(170, 255, 190, .95) 86%, transparent 88%); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); } .ss-orb b { position: absolute; left: 50%; top: 50%; width: 1.3cqw; height: 1.3cqw; margin: -.65cqw; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, #eaffef, rgba(120, 255, 150, .8) 45%, transparent 70%); box-shadow: 0 0 1.4cqw rgba(120, 255, 150, .9); animation: ss-orbit 4.2s linear infinite; } .ss-orb b + b { width: .9cqw; height: .9cqw; margin: -.45cqw; animation-duration: 6.5s; animation-direction: reverse; opacity: .8; } @keyframes ss-spin { to { transform: rotate(360deg); } } @keyframes ss-orbit { from { transform: rotate(0deg) translateX(4.6cqw) rotate(0deg); } to { transform: rotate(360deg) translateX(4.6cqw) rotate(-360deg); } } @keyframes ss-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } } /* offline: the light turns red and slows down */ .ss.is-offline .ss-orb::before { background: radial-gradient(circle, rgba(255, 90, 80, .5), rgba(200, 30, 30, .15) 55%, transparent 72%); animation-duration: 3.6s; } .ss.is-offline .ss-orb i { background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 90, 80, .15) 72%, rgba(255, 170, 150, .9) 86%, transparent 88%); animation-duration: 6s; } .ss.is-offline .ss-orb b { background: radial-gradient(circle, #ffe8e4, rgba(255, 110, 90, .8) 45%, transparent 70%); box-shadow: 0 0 1.4cqw rgba(255, 100, 80, .9); } /* ---------- left rail: side menu from the owner's artwork (images/sm-frame.png, art 1024x1536) ---------- Six pieces of the same image, cut at the divider gems (art y 365/560/755/950/1145); plates are 170px tall around y 270/465/660/855/1050/1245. Each piece shows its slice with background-size/position. */ .smx { position: relative; margin: 0 0 6px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); } .smx-piece { position: relative; background: url(images/sm-frame.png?v=5) 0 0 no-repeat; } .smx-head { position: absolute; left: 10.3%; right: 10.4%; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; transition: box-shadow .15s, background .15s; } .smx-head:hover, .smx-head:focus-visible { outline: none; background: radial-gradient(ellipse at 55% 50%, rgba(255, 170, 70, .16), transparent 70%); box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .55), 0 0 14px rgba(255, 150, 60, .45); } .smx-group.is-current .smx-head { box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .35), inset 0 0 22px rgba(200, 30, 40, .35); } .smx-slide { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; background: url(images/sm-strip.png?v=4) 0 0 / 100% 1px repeat-y; } .smx-group.is-open > .smx-slide { grid-template-rows: 1fr; } .smx-slide > div { min-height: 0; overflow: hidden; } .smx-slide ul { list-style: none; margin: 0; padding: 6px 14% 10px 16%; } .smx-slide a { display: block; padding: 5px 10px; border-radius: 3px; font-size: .95rem; color: #cdb892; text-shadow: 0 1px 2px #000; } .smx-slide a:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .04); text-shadow: 0 1px 2px #000; } .smx-slide a[aria-current="page"] { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--ember); background: linear-gradient(90deg, rgba(165, 15, 28, .4), transparent); } .smx-admin { margin-bottom: 18px; } @media (max-width: 1020px) { .smx { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; } } /* alignment (2026-09-29): both rails 280px; the menu art has 16px transparent sides (32 of 560), so it is widened to show the same frame width as Server Status; the crest tips of both artworks line up with the gem above the centre frames (which sticks out 19px above the columns) */ @media (min-width: 1321px) { /* three columns only on wide screens; narrower layouts come from the media queries above */ .shell { grid-template-columns: 280px minmax(0, 1fr) 280px; } } /* crest tips: the ticker art's tip is at the top of the centre column, the menu art's at its top edge */ .smx { width: calc(100% + 24px); margin-left: -12px; } /* v3 art: 12px transparent at each side */ @media (max-width: 1020px) { .smx { width: 100%; margin-left: auto; } } @media (min-width: 1321px) { .ss { margin-top: -5px; } } /* the Server Status art's tip is 5px below its top */ @media (max-width: 1020px) { .smx { width: 100%; margin-left: auto; margin-top: 0; } .ss { margin-top: 0; } } /* medium widths: the menu comes first in the side column, above Server Status and Top Players */ @media (max-width: 1320px) and (min-width: 1021px) { .shell { grid-template-areas: "main left" "main right"; grid-template-rows: auto 1fr; } .rail-right { margin-top: -30px; } /* the menu art ends in ~18px of empty space below its bottom gem */ } @media (max-width: 1020px) { .ss { max-width: 340px; margin-left: auto; margin-right: auto; } } /* side menu v3 art (MAIN MENU title, 1086x1448, 2026-09-29): pieces cut at the divider gems y 473/636/800/965/1124, bottom edge from 1290 */ .smx-p1 .smx-piece { aspect-ratio: 1086 / 473; background-size: 100% 306.13%; background-position: 0 0.00%; } .smx-p1 .smx-head { top: 66.60%; height: 32.14%; } .smx-p2 .smx-piece { aspect-ratio: 1086 / 163; background-size: 100% 888.34%; background-position: 0 36.81%; } .smx-p2 .smx-head { top: 4.91%; height: 93.25%; } .smx-p3 .smx-piece { aspect-ratio: 1086 / 164; background-size: 100% 882.93%; background-position: 0 49.53%; } .smx-p3 .smx-head { top: 4.88%; height: 92.68%; } .smx-p4 .smx-piece { aspect-ratio: 1086 / 165; background-size: 100% 877.58%; background-position: 0 62.35%; } .smx-p4 .smx-head { top: 4.85%; height: 92.12%; } .smx-p5 .smx-piece { aspect-ratio: 1086 / 159; background-size: 100% 910.69%; background-position: 0 74.86%; } .smx-p5 .smx-head { top: 2.52%; height: 95.60%; } .smx-p6 .smx-piece { aspect-ratio: 1086 / 166; background-size: 100% 872.29%; background-position: 0 87.68%; } .smx-p6 .smx-head { top: 4.82%; height: 91.57%; } .smx-cap { aspect-ratio: 1086 / 158; background: url(images/sm-frame.png?v=5) 0 100% / 100% 916.46% no-repeat; } .smx-head { left: 13.35%; right: 13.45%; } .smx-slide ul { padding-left: 19%; padding-right: 16%; } /* ---------- home: News Ticker from the owner's artwork (images/nt-*.png, art 2000 wide) ---------- nt-top = art y 0-245, nt-row = y 310-374 (one per message, line to line), nt-bottom = y 510-667. Inside a row (percent of the 2000px art): date x 222-428, message x 490-1765, plus button x 1786-1848. */ .nt { container-type: inline-size; margin: 0 0 18px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .nt-top { aspect-ratio: 2000 / 245; background: url(images/nt-top.png?v=2) 0 0 / 100% 100% no-repeat; } .nt-bottom { aspect-ratio: 2000 / 157; background: url(images/nt-bottom.png?v=2) 0 0 / 100% 100% no-repeat; } .nt-list { list-style: none; margin: 0; padding: 0; } .nt-row { position: relative; aspect-ratio: 2000 / 64; background: url(images/nt-row.png?v=5) 0 0 / 100% 100% no-repeat; } .nt-row time { position: absolute; left: 11.1%; width: 10.3%; top: 50%; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 700 1.3cqw/1 var(--font-display); letter-spacing: .04em; color: #f1d9a0; text-shadow: 0 1px 2px #000; } .nt-text { position: absolute; left: 24.5%; right: 11.8%; top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.55cqw/1.2 var(--font-body); color: #f3e6cc; text-shadow: 0 1px 2px #000; } .nt-empty { left: 12%; color: var(--muted); } .nt-plus { position: absolute; left: 89.3%; width: 3.1%; top: 9.4%; height: 84.4%; padding: 0; border: 0; cursor: pointer; background: url(images/nt-plus.png) center / 100% 100% no-repeat; transition: transform .2s ease, filter .15s; } .nt-plus:hover, .nt-plus:focus-visible { outline: none; filter: brightness(1.25) drop-shadow(0 0 6px rgba(120, 255, 140, .6)); } .nt-item.is-open .nt-plus { transform: rotate(45deg); } .nt-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; background: url(images/nt-strip.png) 0 0 / 100% 1px repeat-y; } .nt-item.is-open > .nt-more { grid-template-rows: 1fr; } .nt-more > div { min-height: 0; overflow: hidden; } .nt-more p { margin: 0 !important; padding: 8px 11.8% 12px 24.5%; font-size: max(13px, 1.6cqw); line-height: 1.55; color: #eadcbf; } /* phones: the art rows would be too thin for text, so rows are plain there (top and bottom art stay) */ @media (max-width: 640px) { .nt-row { aspect-ratio: auto; min-height: 40px; background: #150d0a; border-top: 1px solid rgba(214, 170, 96, .45); margin: 0 3.5%; } .nt-row time { position: static; transform: none; display: block; width: auto; padding: 7px 12px 0; text-align: left; font-size: .66rem; } .nt-text { position: static; transform: none; display: block; padding: 3px 12px 8px; font-size: .88rem; white-space: normal; } .nt-plus, .nt-more { display: none; } /* the whole message already shows */ .nt-more { margin: 0 3.5%; background: #150d0a; } .nt-more p { padding: 0 12px 10px; } .nt-item.is-open .nt-text { display: none; } } /* ---------- home: Latest News frame from the owner's artwork (images/ln-*.png, art 1343x1171) ---------- ln-top = art y 0-282 (with the LATEST NEWS title), ln-bottom = y 1046-1171, ln-strip = side borders of row 820 repeated down; the interior (art x 97-1245 = 7.22% in from each side) is a gradient sampled from the art. */ .ln { margin: 0 0 20px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .ln-top { aspect-ratio: 1343 / 282; background: url(images/ln-top.png?v=3) 0 0 / 100% 100% no-repeat; } .ln-bottom { aspect-ratio: 1343 / 125; background: url(images/ln-bottom.png?v=3) 0 0 / 100% 100% no-repeat; } .ln-body { padding: 0 10% 4px; background: url(images/ln-strip.png) 0 0 / 100% 1px repeat-y, linear-gradient(#3e0506, #200704 120px, #190806 45%, #140403) 50% 0 / 85.6% 100% no-repeat; } .ln-post { margin: 0; background: none; border: 0; box-shadow: none; } .ln-post + .ln-post { margin-top: 26px; padding-top: 8px; border-top: 1px solid rgba(214, 170, 96, .4); } .ln .news-head { padding: 4px 0 18px; } .ln .news-body { padding: 16px 0 6px; } .ln .frame-link { margin: 14px auto 6px; } /* post titles sit straight on the frame's stone, like in the art (no red box) */ .ln .news-head { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='4.5,.5 8.5,4.5 4.5,8.5 .5,4.5' fill='url(%23r)' stroke='%23c9a15e' stroke-width='.9'/%3E%3C/svg%3E") center bottom / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201, 161, 94, .38) 12%, rgba(201, 161, 94, .38) 88%, transparent) center calc(100% - 4px) / 100% 1px no-repeat; } /* ruby diamond bullets in news posts (same gem as the old ticker bullets) */ .ln-bullet { display: inline-block; width: 10px; height: 15px; margin: 0 9px 0 2px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='6,0 12,9 6,18 0,9' fill='url(%23g)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,16.2 1.7,9' fill='url(%23r)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,8 1.7,9' fill='%23ffc0b0' fill-opacity='.3'/%3E%3Cpolygon points='1.7,9 6,8 6,16.2' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat; filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 4px rgba(230, 40, 50, .7)); } /* utility bar without the online counter: the buttons sit on the right */ .utilbar-inner { justify-content: flex-end; } @media (max-width: 1020px) { .mainnav .nav-shop { justify-content: flex-start; } } /* ====================================================================== Size pass like miracle74.com (2026-09-29): content 1118px wide in 198 / 688 / 198px columns, banner about 300px tall, 13-14px text. (Backup before this: ~/oblivion-backups/website/oblivion-cms-20260929-2350.tgz) ====================================================================== */ body { font-size: 14px; line-height: 1.55; } .shell { max-width: 1150px; padding: 18px 16px 44px; gap: 16px; } @media (min-width: 1321px) { .shell { grid-template-columns: 198px minmax(0, 1fr) 198px; } } @media (max-width: 1320px) and (min-width: 1021px) { .shell { grid-template-columns: minmax(0, 1fr) 198px; } } .page-head-inner { max-width: 1150px; padding-bottom: 20px; } .is-page .page-head-inner { padding-top: 76px; } .page-head h1 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .page-head p { font-size: .85rem; } /* banner: the same picture, centred at 1000px (about 300px tall), its edges fade into the page */ .hero-stage { max-width: 1000px; } .is-home .shell { margin-top: -40px; } /* side menu art: the 12px overhang was for a 280px column; scale it with the column */ @media (min-width: 1021px) { .smx { width: calc(100% + 8.6%); margin-left: -4.3%; } } /* news */ .ln .news-head { padding: 2px 0 12px; } .ln .news-head h3 { font-size: 1.05rem; } .ln .news-meta { font-size: .72rem; } .ln .news-body { padding: 10px 0 4px; font-size: 13.5px; line-height: 1.6; } .ln .frame-link, .frame-link { padding: 8px 20px 8px 24px; font-size: .6rem; } .nt-row time { font-size: 1.45cqw; } .nt-text { font-size: 1.75cqw; } /* legacy pages */ .panel { padding: 18px 20px; font-size: 13.5px; } .legacy td, .legacy th { padding: 6px 8px; } /* size pass: narrow side columns */ .tp .top-list li { grid-template-columns: 26px 26px minmax(0, 1fr) auto; gap: 6px; padding: 5px 7px 5px 4px; } .tp .top-list .rank { width: 26px; height: 26px; } .tp .top-list .outfit { width: 42px; height: 42px; margin: -14px 0 0 -14px; } .tp .top-list .who { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp .top-list .who small { font-size: .55rem; } .tp .top-list .lvl { font-size: .86rem; } .tp .top-list .lvl small { font-size: .5rem; } .smx-slide a { padding: 3px 8px; font-size: .8rem; } .smx-slide ul { padding-top: 4px; padding-bottom: 6px; } /* header links: smaller, like Miracle's top menu */ @media (min-width: 1021px) { .mainnav .nav-link { padding: 0 11px; font-size: .74rem; letter-spacing: .13em; } .utilbar .btn-sm { font-size: .64rem; padding: .55em .95em; } } /* fit the side columns on one screen (owner): smaller banner, compact Top Players, smaller ticker (4 rows) */ .hero-stage { max-width: 800px; } .is-home .shell { margin-top: -28px; } .tp .top-list { gap: 3px; } .tp .top-list li { padding: 2px 7px 2px 4px; } .tp .top-list .outfit { width: 36px; height: 36px; margin: -10px 0 0 -10px; } .nt { width: 90%; margin: 0 auto 12px; } .nt-row time { font-size: 1.6cqw; } .nt-text { font-size: 1.95cqw; } /* fit pass 2 */ .is-home .shell { margin-top: -62px; } @media (min-width: 1021px) { .topbar-inner { height: 56px; } .utilbar-inner { padding-top: 3px; padding-bottom: 3px; } .crest-medal { width: 76px; height: 76px; } .crest-medal img { width: 64px; height: 64px; } } .ss { margin-bottom: 0; } .tp { margin-top: -14px; } .tp .top-list li { min-height: 0; padding-top: 0; padding-bottom: 0; } .tp .top-list .outfit { width: 32px; height: 32px; margin: -8px 0 0 -8px; } /* ---------- pages: Privacy Policy, Service Agreement ---------- */ .legal { max-width: 70ch; line-height: 1.65; } .legal-updated { margin: 0 0 14px !important; font-size: .8rem; color: var(--muted); } .legal h3 { margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font: 700 1rem/1.3 var(--font-display); letter-spacing: .04em; color: var(--gold-hi); } .legal h4 { margin: 14px 0 4px; font: 700 .9rem/1.3 var(--font-body); color: var(--gold); } .legal ul { margin: 6px 0 10px; padding-left: 20px; } .legal li { margin: 3px 0; } .legal b { color: var(--text); } .legal-todo { padding: 1px 6px; border-radius: 3px; background: #6e0912; color: #fff; font-size: .85em; } .footer-copy a { color: var(--gold); } /* ====================================================================== Colour pass 1 (2026-09-30): crimson-graded banner (images/banner-crimson*.jpg, made by ~/webshot/src/grade_banner.php from banner.jpg) and a full-width banner: the sharp picture stays 800px in the middle, a blurred, darker copy of the same scene fills the full width. ====================================================================== */ .hero { overflow: hidden; background: var(--bg); } /* no blurred copy (owner found it confusing): dark page background with a soft crimson glow behind the picture */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 90% at 50% 40%, rgba(150, 18, 20, .35), rgba(90, 10, 12, .12) 55%, transparent 80%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 5, 4, .35), transparent 30%, transparent 55%, var(--bg)); } .hero-stage { z-index: 2; -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); } .hero-fade { background: linear-gradient(180deg, transparent 58%, rgba(10, 5, 4, .7) 84%, var(--bg)); } /* ---------- wide framed banner (owner art images/banner-wide-source.png, 2000x667, 2026-09-30) ---------- shown whole with its own gold frame; the columns start below it */ .hero-stage { max-width: 1118px; width: calc(100% - 32px); aspect-ratio: 3 / 1; margin: 10px auto 0; -webkit-mask-image: none; mask-image: none; overflow: hidden; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .7)); } .hero-art.hero-wide { position: static; width: 100%; height: 100%; object-fit: cover; } .portal-glow { left: 50%; top: 64%; width: 9%; height: 30%; } .is-home .shell { margin-top: 0; padding-top: 16px; } /* ====================================================================== Colour pass step 3 (2026-09-30): header matches the banner frame - black stone bar, crimson glow behind the crest, bright bevelled gold edge with ruby gems at its ends, menu words in the art's gold. ====================================================================== */ .utilbar { background: #040202; border-bottom: 1px solid rgba(245, 212, 136, .16); } .topbar { background: radial-gradient(ellipse 34% 160% at 50% 0%, rgba(175, 22, 28, .38), rgba(120, 12, 16, .12) 55%, transparent 75%), linear-gradient(180deg, #160908 0%, #0d0505 60%, #080303 100%); box-shadow: 0 10px 26px rgba(0, 0, 0, .7); } .topbar::after { height: 4px; bottom: -4px; background: linear-gradient(180deg, #fde7a6 0%, #d7a44a 35%, #8a5a1e 70%, #2a1406 100%); box-shadow: 0 1px 0 #000, 0 0 12px rgba(230, 80, 30, .35); } .topbar-inner::before, .topbar-inner::after { content: ""; position: absolute; bottom: -13px; z-index: 3; width: 15px; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0cf85'/%3E%3Cstop offset='.5' stop-color='%23a8762f'/%3E%3Cstop offset='1' stop-color='%233a2208'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4404a'/%3E%3Cstop offset='.45' stop-color='%236e0a14'/%3E%3Cstop offset='1' stop-color='%231a0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='6,0 12,9 6,18 0,9' fill='url(%23g)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,16.2 1.7,9' fill='url(%23r)'/%3E%3Cpolygon points='6,1.8 10.3,9 6,8 1.7,9' fill='%23ffc0b0' fill-opacity='.3'/%3E%3Cpolygon points='1.7,9 6,8 6,16.2' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat; filter: brightness(1.5) saturate(1.3) drop-shadow(0 0 6px rgba(230, 40, 40, .75)); } .topbar-inner::before { left: 18px; } .topbar-inner::after { right: 18px; } .mainnav .nav-link { color: #f1d9a0; text-shadow: 0 1px 2px #000; } .mainnav .nav-link:hover, .mainnav .nav-item:focus-within > .nav-link { color: #fff4d8; text-shadow: 0 0 10px rgba(255, 120, 50, .8), 0 1px 2px #000; } .mainnav .nav-item.is-active > .nav-link { color: #fff0cf; } @media (max-width: 1020px) { .topbar-inner::before, .topbar-inner::after { display: none; } } /* the Shop link's gold is gradient text: a text-shadow would show through it and dull it */ .mainnav .nav-link.nav-shop, .mainnav .nav-link.nav-shop:hover { text-shadow: none; } /* no plaque under the crest any more (owner): inner page titles need less room at the top */ .is-page .page-head-inner { padding-top: 58px; } /* ---------- Who is Online from the owner's artwork (images/wio-*.png, art 2000 wide) ---------- wio-top = art y 0-440, wio-strip = row y 480 behind the player list, wio-bottom = y 520-674. Live numbers sit where the art had its "0"s (positions in % of the top piece). */ #whoisonline.panel { padding: 0; background: none; border: 0; box-shadow: none; } .wio-art { container-type: inline-size; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .wio-top { position: relative; aspect-ratio: 2000 / 440; background: url(images/wio-top.png?v=9) 0 0 / 100% 100% no-repeat; } .wio-top p { position: absolute; margin: 0 !important; transform: translate(-50%, -50%); text-align: center; line-height: 1; } .wio-total { left: 9%; top: 56.8%; } .wio-total strong { font: 700 10cqw/1 var(--font-display); color: #f3c86a; background: linear-gradient(180deg, #fff1b8, #e7b04f 45%, #9a6320); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 8px rgba(255, 140, 40, .35)); } .wio-voc { top: 63.9%; } .wio-voc b { font: 700 2.5cqw/1 var(--font-display); color: #f7dc98; text-shadow: 0 2px 3px #000; } .wio-v1 { left: 51.95%; } .wio-v2 { left: 61.2%; } .wio-v3 { left: 70.6%; } .wio-v4 { left: 80.25%; } .wio-v0 { left: 89.95%; } .wio-v0 span { position: absolute; left: 50%; top: 2.95cqw; transform: translateX(-50%); white-space: nowrap; font: 500 1.05cqw/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #efe0bf; text-shadow: 0 1px 2px #000; } .wio-body { padding: 4px 6% 0; background: url(images/wio-strip.png?v=3) 0 0 / 100% 1px repeat-y; } .wio-bottom { aspect-ratio: 2000 / 154; background: url(images/wio-bottom.png) 0 0 / 100% 100% no-repeat; } .wio-art .wio-empty { margin: 0 !important; padding: 18px 0 6px; text-align: center; font-size: max(13px, 1.9cqw); color: #efe0bf; } .wio-art .wio-table { margin: 0; } /* animated outfits (outfit.php&anim=1): show the 32px sprite at double size (it sits in the bottom-right of a 64px canvas) */ .hs-outfit { width: 70px; } .hs-outfit img { width: 96px; height: 96px; margin: -44px -4px -8px -30px; image-rendering: pixelated; } .char-portrait img { width: 96px; height: 96px; transform: translate(-22px, -22px); } .tp .top-list .outfit { width: 56px; height: 56px; margin: -24px -4px -4px -22px; } /* ---------- Highscores: classic table (2026-09-30), in the site's colours; the page frame comes later ---------- */ .hsx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 10px 14px; background: linear-gradient(180deg, #2a0f0c, #180806); border: 1px solid rgba(214, 170, 96, .45); border-radius: 4px; } .hsx-filter label { display: flex; align-items: center; gap: 8px; font: 700 .68rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .legacy .hsx-filter select { width: auto; padding: 5px 8px; font-size: .85rem; } .hsx-filter button { margin-left: auto; } .hsx-head { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; border: 1px solid rgba(214, 170, 96, .45); border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #3a1210, #220907); font: 700 .8rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); } .hsx-head span { font: 400 .75rem/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); } .legacy .hsx-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(214, 170, 96, .3); font-size: .88rem; } .hsx-table th { padding: 7px 8px; text-align: left; background: #1d0907; border-bottom: 1px solid rgba(214, 170, 96, .45); font: 700 .62rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .legacy .hsx-table td { padding: 0 8px; height: 46px; vertical-align: middle; border-bottom: 1px solid rgba(214, 170, 96, .12); background: #150806; } .legacy .hsx-table tr:nth-child(even) > td { background: #1c0b08; } .legacy .hsx-table tbody tr:hover > td { background: #2b100c; } .legacy .hsx-table tr.hsx-top-1 > td { background: #3a1010; } .legacy .hsx-table tr.hsx-top-2 > td, .legacy .hsx-table tr.hsx-top-3 > td { background: #2a0d0b; } .hsx-rank { width: 44px; text-align: center; font: 700 .95rem/1 var(--font-display); color: var(--muted); } .hsx-rank img { display: block; margin: 0 auto; } .hsx-outfit { width: 48px; } .hsx-outfit img { display: block; width: 64px; height: 64px; margin: -24px 0 -2px -16px; image-rendering: pixelated; } .hsx-name a { font: 700 .95rem/1.2 var(--font-display); color: var(--gold-hi); } .hsx-name a:hover { color: #fff; } .hsx-on { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #5de06e; box-shadow: 0 0 6px #5de06e; vertical-align: 1px; } .hsx-flag { width: 40px; } .hsx-flag img { display: block; width: 22px; height: 15px; border: 1px solid rgba(0, 0, 0, .6); } .hsx-voc { color: var(--text); white-space: nowrap; } .hsx-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } .hsx-table td.hsx-num { color: var(--text); } .hsx-table td.hsx-points { font-weight: 700; color: #f3dca6; } .hs-pages span { align-self: center; color: var(--muted); font-size: .85rem; } @media (max-width: 640px) { .hsx-flag, .hsx-voc, .hsx-table th:nth-child(4), .hsx-table th:nth-child(5) { display: none; } .hsx-filter button { margin-left: 0; } } /* highscores: bigger walking outfits and taller rows */ .legacy .hsx-table td { height: 58px; } .hsx-outfit { width: 60px; } .hsx-outfit img { width: 80px; height: 80px; margin: -34px 0 -4px -22px; } /* staff title badge and skull over the character's shoulder (2026-09-30) */ .staff-badge { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 3px; vertical-align: 2px; font: 700 .56rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; border: 1px solid; } .staff-god { color: #1a0a02; background: linear-gradient(180deg, #ffe7a0, #d69b35); border-color: #f5d488; box-shadow: 0 0 8px rgba(255, 190, 80, .5); } .staff-gamemaster, .staff-senior-tutor, .staff-tutor { color: #f5d488; background: rgba(216, 162, 74, .12); border-color: rgba(245, 212, 136, .55); } .fig { position: relative; display: inline-block; line-height: 0; } .fig .skull-badge { position: absolute; left: 74%; top: 42%; width: 12px; height: 12px; image-rendering: pixelated; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); } .char-portrait .fig .skull-badge { width: 16px; height: 16px; left: 78%; top: 40%; } /* bigger outfits */ .legacy .hsx-table td { height: 70px; } .hsx-outfit { width: 74px; } .hsx-outfit img { width: 104px; height: 104px; margin: -46px 0 -4px -30px; } .hs-outfit img { width: 104px; height: 104px; margin: -48px -4px -8px -32px; } .hsx-outfit .fig .skull-badge, .hs-outfit .fig .skull-badge { left: 76%; top: 53%; width: 14px; height: 14px; } /* the negative margins belong on the figure wrapper, so the skull is positioned against the whole picture */ .hsx-outfit .fig { margin: -46px 0 -4px -30px; } .hsx-outfit .fig img { margin: 0; } .hs-outfit .fig { margin: -48px -4px -8px -32px; } .hs-outfit .fig img { margin: 0; } .hsx-outfit .fig .skull-badge, .hs-outfit .fig .skull-badge { left: 74%; top: 44%; } /* sharp outfits (2026-09-30): pixel art only at whole-number sizes (64px image = 1x, 128px = 2x) with hard pixel edges */ .hsx-outfit img, .hs-outfit img, .char-portrait img, .tp .top-list .outfit, .hs-mini img { image-rendering: crisp-edges; image-rendering: pixelated; } .hsx-outfit img, .hs-outfit img { width: 128px; height: 128px; } .hsx-outfit .fig { margin: -60px 0 -4px -44px; } .hs-outfit .fig { margin: -60px -4px -6px -44px; } .char-portrait img { width: 128px; height: 128px; transform: translate(-30px, -30px); } .tp .top-list .outfit { width: 64px; height: 64px; margin: -30px -6px -2px -30px; } .tp .top-list .outfit { min-width: 64px; max-width: none; margin: -32px -14px -2px -24px; position: relative; z-index: 1; } .tp .top-list .outfit { margin: -32px -38px -2px -36px; } /* outfits at their real size (1x, owner 2026-09-30): the 64px picture holds the 32px sprite in its bottom-right quarter */ .hsx-outfit img, .hs-outfit img { width: 64px; height: 64px; } .legacy .hsx-table td { height: 52px; } .hsx-outfit { width: 52px; } .hsx-outfit .fig { margin: -18px -8px -6px -22px; } .hs-outfit .fig { margin: -18px -8px -6px -22px; } .char-portrait img { width: 64px; height: 64px; transform: translate(-16px, -16px); } .fig .skull-badge, .hsx-outfit .fig .skull-badge, .hs-outfit .fig .skull-badge, .char-portrait .fig .skull-badge { width: 11px; height: 11px; left: 72%; top: 40%; } /* ---------- Highscores frame from the owner's art (images/hsf-*.png, 2000px art -> 690px column) ---------- hsf-top = art y 0-600: stone panel (x 95-1165, y 150-425) holds the filters, red plate (centre y 500) the title. hsf-body: gold stems (hsf-bars) + gem clusters (hsf-cluster) down both sides, stone between; hsf-bottom = y 212-645. */ .hsf { container-type: inline-size; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .hsf-top { position: relative; z-index: 2; aspect-ratio: 2000 / 600; background: url(images/hsf-top.png) 0 0 / 100% 100% no-repeat; } .hsf .hsx-filter { position: absolute; left: 6%; top: 27%; width: 49%; margin: 0; padding: 0; background: none; border: 0; gap: 1.6cqw 2.2cqw; } .hsf .hsx-filter label { font-size: max(10px, 1.55cqw); } .hsf .hsx-filter button { margin-left: 0; } .hsf-title { position: absolute; left: 20%; right: 20%; top: 83.3%; transform: translateY(-50%); margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 max(13px, 2.5cqw)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, #fff1c0, #f0c060 50%, #b27427); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .9)); } .hsf-body { position: relative; z-index: 1; margin-top: -5.25cqw; padding: 5.25cqw 6% 1cqw; background: url(images/hsf-cluster.png) 0 2cqw / 100% auto repeat-y, url(images/hsf-bars.png) 0 0 / 100% 1px repeat-y; } .hsf-body::before { content: ""; position: absolute; z-index: -1; left: 4.4%; right: 4.4%; top: 0; bottom: 0; background: url(images/hsf-stone.jpg) 0 0 / 50% auto repeat, #140806; } .hsf .hsx-table { border: 0; } .hsf .hsx-table th { background: rgba(0, 0, 0, .35); } .legacy .hsf .hsx-table td { background: rgba(10, 4, 3, .55); } .legacy .hsf .hsx-table tr:nth-child(even) > td { background: rgba(28, 11, 8, .55); } .legacy .hsf .hsx-table tbody tr:hover > td { background: rgba(70, 20, 14, .6); } .legacy .hsf .hsx-table tr.hsx-top-1 > td { background: rgba(110, 18, 18, .55); } .legacy .hsf .hsx-table tr.hsx-top-2 > td, .legacy .hsf .hsx-table tr.hsx-top-3 > td { background: rgba(80, 14, 14, .5); } .legacy .hsf .hsx-table tr.hsf-div > td { height: 3.6cqw; padding: 0; border: 0; background: url(images/hsf-divider.png) center / 100% auto no-repeat; } .hsf-bottom { position: relative; z-index: 2; margin-top: -1cqw; aspect-ratio: 2000 / 433; background: url(images/hsf-bottom.png) 0 0 / 100% 100% no-repeat; } .hsf .hs-pages { margin: 12px 0 4px; } /* highscores page: the banner replaces the title strip */ .is-page .hero + .page-head { display: none; } /* frame fixes: filters fit the stone panel (art x 95-1165, y 150-425 = 369 x 95 px at 690 wide); stone runs down to the bottom plate */ .hsf .hsx-filter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.2cqw 1.6cqw; left: 6.5%; top: 29%; width: 50%; } .hsf .hsx-filter label { display: contents; font-size: max(9px, 1.35cqw); letter-spacing: .12em; } .legacy .hsf .hsx-filter select { width: 100%; max-width: 22cqw; padding: .35cqw .8cqw; font-size: max(11px, 1.6cqw); } .hsf .hsx-filter button { grid-column: 2; justify-self: start; margin-top: .2cqw; padding: .6cqw 2.2cqw; font-size: max(9px, 1.3cqw); } .hsf-body { padding-bottom: 13cqw; } .hsf-bottom { margin-top: -12.5cqw; } .hsf .hsx-filter { grid-template-columns: auto 1fr auto; top: 28%; } .legacy .hsf .hsx-filter select[name="list"], .legacy .hsf .hsx-filter select[name="vocation"] { grid-column: 2 / 4; max-width: none; } .legacy .hsf .hsx-filter select[name="page"] { width: 9cqw; } .hsf .hsx-filter button { grid-column: 3; grid-row: 3; margin: 0; } /* phones: filters below the art panel as a normal bar; the table scrolls sideways inside the frame */ @media (max-width: 640px) { .hsf-top { margin-bottom: 0; } .hsf .hsx-filter { position: relative; left: auto; top: auto; width: auto; margin: 0 4.4% 0; padding: 10px 12px; background: #1a0907; border: 1px solid rgba(214, 170, 96, .35); grid-template-columns: auto 1fr auto; order: 2; } .hsf-top { display: flex; flex-direction: column; aspect-ratio: auto; background-size: 100% auto; padding-top: 30cqw; } .hsf-title { position: absolute; top: 25cqw; transform: translateY(-50%); font-size: 13px; left: 14%; right: 14%; } .hsf .hsx-filter label { font-size: 10px; } .legacy .hsf .hsx-filter select { font-size: 13px; padding: 4px 6px; } .legacy .hsf .hsx-filter select[name="page"] { width: 60px; } .hsf .hsx-filter button { font-size: 11px; padding: 6px 12px; } .hsf-body { margin-top: 0; padding-top: 8px; overflow-x: auto; } } /* ---------- Highscores frame v2 from the owner's full mockup (images/hs2-*.png, art 1122 wide) ---------- Labels, dropdown boxes and the SHOW button are part of the art; the real selects and button sit on top of them. */ .hs2 { container-type: inline-size; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .hs2-top { position: relative; aspect-ratio: 1122 / 298; background: url(images/hs2-top.png?v=2) 0 0 / 100% 100% no-repeat; } .hs2 .hsx-filter { position: static; display: block; margin: 0; padding: 0; background: none; border: 0; } .hs2 .hsx-filter label { position: absolute; display: block; margin: 0; } .hs2-skill { left: 14.9%; width: 22.5%; top: 18.6%; height: 12.4%; } .hs2-voc { left: 53.6%; width: 23.3%; top: 18.6%; height: 12.4%; } .hs2-page { left: 14.9%; width: 4.8%; top: 39.9%; height: 12.8%; } .legacy .hs2 .hsx-filter select { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0 0 0 .8cqw; background: transparent; border: 0; box-shadow: none; cursor: pointer; font: 700 max(10px, 1.9cqw)/1 var(--font-display); letter-spacing: .04em; color: #f4e2b8; } .legacy .hs2 .hsx-filter select:focus { outline: 1px solid rgba(245, 212, 136, .6); } .hs2 .hsx-filter option { background: #1a0907; color: #f4e2b8; } .hs2-show { position: absolute; left: 71.3%; width: 11.9%; top: 38.3%; height: 16.8%; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; } .hs2-show:hover, .hs2-show:focus-visible { outline: none; box-shadow: 0 0 12px rgba(255, 90, 60, .7); background: rgba(255, 120, 80, .12); } .hs2-title { position: absolute; left: 12%; right: 12%; top: 83.2%; transform: translateY(-50%); margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 max(13px, 2.9cqw)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, #fff1c0, #f0c060 50%, #b27427); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .95)); } .hs2-body { padding: 0 5.9% 0; background: url(images/hs2-side.png) 0 0 / 100% 1px repeat-y, linear-gradient(#200a08, #170706) 5.5% 0 / 89% 100% no-repeat; } .hs2 .hsx-table { border: 0; margin: 0; } .hs2 .hsx-table th { background: rgba(0, 0, 0, .3); } .hs2-bottom { aspect-ratio: 1122 / 82; background: url(images/hs2-bottom.png) 0 0 / 100% 100% no-repeat; } .hs2 .hs-pages { margin: 0; padding: 12px 0 6px; } @media (max-width: 640px) { .hs2-body { overflow-x: auto; } } .legacy .hs2 .hs2-show { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; filter: none; } .legacy .hs2 .hs2-show:hover, .legacy .hs2 .hs2-show:focus-visible { box-shadow: 0 0 12px rgba(255, 90, 60, .7); background: rgba(255, 120, 80, .12); } /* body fill only between the side borders (art x 47-1075 of 1122), not outside them */ .hs2-body { position: relative; background: url(images/hs2-side.png) 0 0 / 100% 1px repeat-y; } .hs2-body::before { content: ""; position: absolute; z-index: -1; left: 4.2%; right: 4.2%; top: 0; bottom: 0; background: linear-gradient(#200a08, #170706); } .hs2-body { z-index: 0; } /* styled dropdowns (oblivion.js .xsel) */ .xsel-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; } .xsel { position: relative; width: 100%; height: 100%; } .legacy .xsel-btn, .xsel-btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0 3cqw 0 .8cqw; text-align: left; background: transparent; border: 0; box-shadow: none; cursor: pointer; font: 700 max(10px, 1.9cqw)/1 var(--font-display); letter-spacing: .04em; text-transform: none; color: #f4e2b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: none; } .legacy .xsel-btn:hover, .xsel-btn:focus-visible { outline: none; color: #fff; box-shadow: none; background: rgba(255, 190, 90, .06); } .xsel-list { position: absolute; z-index: 100; left: -2px; top: calc(100% + 4px); min-width: calc(100% + 4px); max-height: 280px; overflow-y: auto; margin: 0; padding: 5px; list-style: none; background: linear-gradient(180deg, #1f0d0a, #140806); border: 1px solid rgba(245, 212, 136, .55); border-top: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .8); display: none; scrollbar-color: var(--gold) #140806; } .xsel.is-open .xsel-list { display: block; } .xsel-list li { padding: 7px 12px; border-radius: 3px; cursor: pointer; white-space: nowrap; font: 700 .82rem/1.2 var(--font-display); letter-spacing: .04em; color: #e9d7b0; } .xsel-list li:hover, .xsel-list li.is-active { background: linear-gradient(90deg, rgba(165, 15, 28, .55), rgba(165, 15, 28, .1)); color: #fff4d8; } .xsel-list li[aria-selected] { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--ember); } .legacy .hs2 .xsel-btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0 3cqw 0 .8cqw; text-align: left; justify-content: flex-start; background: transparent; border: 0; border-radius: 0; box-shadow: none; filter: none; font: 700 max(10px, 1.9cqw)/1 var(--font-display); letter-spacing: .04em; text-transform: none; color: #f4e2b8; } .legacy .hs2 .xsel-btn:hover, .legacy .hs2 .xsel-btn:focus-visible { box-shadow: none; filter: none; color: #fff; background: rgba(255, 190, 90, .06); } /* page banner (owner art, no text on top) */ .page-banner { max-width: 1150px; margin: 12px auto 0; padding: 0 16px; } .page-banner img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .65)); } .page-banner-stage { position: relative; overflow: hidden; } .page-banner .portal-glow { left: 49.6%; top: 78%; width: 5%; height: 42%; } .page-banner .embers { position: absolute; inset: 0; width: 100%; height: 100%; } .is-page .page-head { display: none; } .hs2-page .xsel-list { min-width: 90px; } .hs2-page .xsel-list li { text-align: center; } /* the click area covers the whole art box including its arrow (art: box1 x164-453, box2 x598-894, box3 x164-254 of 1122) */ .hs2-skill { left: 14.6%; width: 25.8%; } .hs2-voc { left: 53.3%; width: 26.4%; } .hs2-page { left: 14.6%; width: 8.1%; } .legacy .hs2 .xsel-btn { padding-right: 3.2cqw; } .hs2-page .xsel-list { min-width: 100%; left: 0; } /* ---------- Account login from the owner's artwork (images/login.jpg, art 1536x1024) ---------- */ .panel:has(.accl) { padding: 0; background: none; border: 0; box-shadow: none; } .accl { position: relative; container-type: inline-size; aspect-ratio: 1536 / 1024; background: url(images/login.jpg) 0 0 / 100% 100% no-repeat; } .accl-form { margin: 0; } .accl label { position: absolute; margin: 0; } .accl-acc { left: 36.5%; top: 52.8%; width: 17.2%; height: 6.9%; } .accl-pass { left: 36.5%; top: 63.5%; width: 30.9%; height: 6.9%; } .legacy .accl input { width: 100%; height: 100%; margin: 0; padding: 0 1.4cqw; background: transparent; border: 0; box-shadow: none; border-radius: 0; font: 700 max(12px, 2.1cqw)/1 var(--font-body); color: #f4e2b8; caret-color: var(--gold-hi); } .legacy .accl input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .6), 0 0 12px rgba(255, 150, 60, .35); } .legacy .accl .accl-submit { position: absolute; left: 19.4%; top: 80.8%; width: 23.6%; height: 8%; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; filter: none; cursor: pointer; } .accl-lost { position: absolute; left: 56%; top: 80.8%; width: 24.7%; height: 8%; border-radius: 6px; } .legacy .accl .accl-submit:hover, .legacy .accl .accl-submit:focus-visible, .accl-lost:hover, .accl-lost:focus-visible { outline: none; box-shadow: 0 0 16px rgba(255, 90, 60, .75); background: rgba(255, 130, 80, .1); } .accl-create { position: absolute; left: 11.4%; top: 32.3%; width: 34%; height: 4.2%; color: transparent !important; text-shadow: none; } .accl-create:hover, .accl-create:focus-visible { outline: none; box-shadow: 0 2px 0 rgba(245, 212, 136, .7); } .accl-msg { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; padding: 10px 14px; border: 1px solid rgba(255, 110, 100, .45); border-left: 3px solid var(--ruby-hi); border-radius: 4px; background: linear-gradient(90deg, rgba(160, 20, 28, .35), rgba(40, 8, 8, .6)); color: #ffe2d8; font-weight: 600; } .accl-msg::before { content: ""; flex: none; width: 10px; height: 15px; background: var(--ruby-hi); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 6px var(--ruby-hi); } .accl-msg[hidden] { display: none; } .accl { background-image: url(images/login.jpg?v=2); } /* login art v2: transparent edges, account box as wide as the password box, red button lettering on hover */ .accl { background-image: url(images/login.png?v=3); } .accl-acc { width: 30.9%; } .legacy .accl .accl-submit:hover, .legacy .accl .accl-submit:focus-visible { background: url(images/login-hover-submit.png) 0 0 / 100% 100% no-repeat; box-shadow: 0 0 16px rgba(255, 60, 40, .55); } .accl-lost:hover, .accl-lost:focus-visible { background: url(images/login-hover-lost.png) 0 0 / 100% 100% no-repeat; box-shadow: 0 0 16px rgba(255, 60, 40, .55); } .legacy .accl .accl-submit { left: 19.4%; top: 80.76%; width: 23.63%; height: 8.1%; } .accl-lost { left: 55.99%; top: 80.76%; width: 24.8%; height: 8.1%; } /* hover: only the lettering changes (dark red), no glow or tint on the button */ .legacy .accl .accl-submit:hover, .legacy .accl .accl-submit:focus-visible { background: url(images/login-hover-submit.png?v=2) 0 0 / 100% 100% no-repeat; box-shadow: none; } .accl-lost:hover, .accl-lost:focus-visible { background: url(images/login-hover-lost.png?v=2) 0 0 / 100% 100% no-repeat; box-shadow: none; } /* login art v2 (1536x1024): account box y 507-565, password y 580-637 (x 563-1023), panel x 308-1228 y 655-765, SUBMIT x 298-661 / ACCOUNT LOST? x 860-1241 at y 838-921 */ .accl { background-image: url(images/login.png?v=4); } .accl-acc { left: 36.9%; top: 49.8%; width: 29.7%; height: 5.4%; } .accl-pass { left: 36.9%; top: 57.1%; width: 29.7%; height: 5.4%; } .accl-panel { position: absolute; left: 20.4%; top: 64.4%; width: 59.4%; height: 10.4%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw; } .accl-panel .accl-msg { margin: 0 !important; padding: .3cqw 1cqw; border: 0; background: none; font-size: max(11px, 1.55cqw); text-align: center; } .accl-panel .accl-msg::before { width: 8px; height: 12px; } .accl-panel .cf-turnstile { max-width: 100%; } .legacy .accl .accl-submit { left: 19.4%; top: 81.8%; width: 23.63%; height: 8.1%; } .accl-lost { left: 55.99%; top: 81.8%; width: 24.8%; height: 8.1%; } .legacy .accl .accl-submit:hover, .legacy .accl .accl-submit:focus-visible { background-image: url(images/login-hover-submit.png?v=3); } .accl-lost:hover, .accl-lost:focus-visible { background-image: url(images/login-hover-lost.png?v=3); } /* panel: message on top, robot check under it; the check only takes space when Cloudflare needs a click */ .accl-panel { justify-content: center; overflow: visible; } .accl-panel .cf-turnstile { transform: scale(.82); transform-origin: center; margin: -6px 0; } .accl-panel .accl-msg:not([hidden]) + .cf-turnstile { transform: scale(.72); margin: -10px 0; } /* message and robot check side by side inside the panel */ .accl-panel { flex-direction: row; gap: 1cqw; padding: 0 1.2cqw; } .accl-panel .accl-msg { flex: 1 1 0; min-width: 0; font-size: max(10px, 1.35cqw); line-height: 1.25; text-align: left; } .accl-panel .cf-turnstile, .accl-panel .accl-msg:not([hidden]) + .cf-turnstile { flex: none; transform: scale(.72); transform-origin: right center; margin: 0 -40px 0 0; } /* the scaled check (300x65 -> 216x47) must also take only 216x47 of room */ .accl-panel .cf-turnstile, .accl-panel .accl-msg:not([hidden]) + .cf-turnstile { width: 300px; height: 65px; transform: scale(.72); transform-origin: top left; margin: 0 -84px -18px 0; } /* ---------- My Account (structure like Nostalther) ---------- */ .myacc { display: grid; gap: 16px; } .myacc-box { border: 1px solid rgba(214, 170, 96, .45); border-radius: 4px; background: rgba(12, 5, 4, .6); overflow: hidden; } .legacy .myacc-box h3 { margin: 0; padding: 9px 12px; background: linear-gradient(180deg, #3a1210, #220907); border-bottom: 1px solid rgba(214, 170, 96, .45); font: 700 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } .legacy .myacc-info, .legacy .myacc-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .legacy .myacc-info th { width: 180px; padding: 8px 12px; text-align: left; font: 700 .7rem/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .legacy .myacc-info td, .legacy .myacc-table td { padding: 8px 12px; border-top: 1px solid rgba(214, 170, 96, .1); } .legacy .myacc-info tr:nth-child(even) > *, .legacy .myacc-table tbody tr:nth-child(even) > td { background: rgba(255, 255, 255, .025); } .legacy .myacc-table th { padding: 7px 12px; text-align: left; font: 700 .64rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: rgba(0, 0, 0, .3); } .myacc-table .num { text-align: right; } .myacc-table a { font-weight: 700; color: var(--gold-hi); } .myacc .ok { color: #7fd88a; } .myacc .bad { color: #ff8a7e; } .myacc-secret { font-variant-numeric: tabular-nums; } .legacy .myacc-show { float: right; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: 700 .72rem/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); cursor: pointer; } .legacy .myacc-show:hover { color: #fff; box-shadow: none; filter: none; } .myacc-empty { margin: 0 !important; padding: 12px; text-align: center; color: var(--muted); } .myacc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(214, 170, 96, .12); } .myacc-actions form, .myacc-manage { margin: 0; } .myacc-center { justify-content: center; } .myacc-manage { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; } .legacy .myacc-manage select { width: auto; min-width: 180px; } .myacc-manage button { margin-left: auto; } .legacy .myacc button.myacc-show { display: inline; float: right; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; font: 700 .72rem/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .legacy .myacc button.myacc-show:hover { color: #fff; background: none; box-shadow: none; } /* site-wide background art (2026-10-01): the banner section must not paint the page colour over it */ .hero { background: transparent; } .hero::after { background: linear-gradient(180deg, rgba(10, 5, 4, .35), transparent 30%); } /* owner 2026-10-01: no gold line under the menu bar, and no red diamonds on it (the centre emblem stays) */ .topbar::after, .topbar-inner::before, .topbar-inner::after { content: none; } /* ---------- My Account on the owner's mockup (images/myacc-source.png, art 1024 x 1536), background scenery removed ---------- Boxes: box-frame.webp (856 x 140, drawn as a 9-slice border-image: 64 top incl. the red title bar, 36 sides, 50 bottom); the title is real text. Account Information: acc-panel.webp (848 x 470) with the sample values erased; its title, labels, SHOW plates and four buttons are part of the art, the real elements sit on top of them (own text for screen readers only). CREATE CHARACTER / SUBMIT: btn-create.webp / btn-submit.webp. */ /* --s = art pixels -> CSS pixels (box width / 856), never below .6 so phones keep readable titles and gems */ .legacy .myacc { grid-template-columns: minmax(0, 1fr); gap: 12px; container-type: inline-size; --s: max(.6px, calc(100cqw / 856)); } .legacy .myacc-box { position: relative; min-width: 0; overflow: visible; border-radius: 0; background: none; padding: 0; border-style: solid; border-width: calc(64 * var(--s)) calc(36 * var(--s)) calc(50 * var(--s)) calc(36 * var(--s)); border-image: url(images/box-frame.webp) 64 36 50 36 fill / 1 / 0 stretch; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); } .legacy .myacc-box .mb-top { position: static; } .legacy .myacc-box h3 { position: absolute; left: calc(8 * var(--s)); right: 0; top: calc(-31.5 * var(--s)); transform: translateY(-50%); margin: 0; padding: 0; background: none; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 max(11px, calc(16.5 * var(--s)))/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #f3dca0; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .6); } .legacy .myacc-box .mb-body { padding: 0 .3em; } .legacy .myacc-box .mb-bot { display: none; } .legacy .myacc-empty { padding: .7em 0 .1em; text-align: center; font: 400 max(13px, 1.75cqw)/1.4 "Alegreya", Georgia, serif; color: #eadcc4; } /* tables inside the inset */ .legacy .myacc-box .myacc-table { width: 100%; border-collapse: collapse; font: 400 max(13px, 1.75cqw)/1.3 "Alegreya", Georgia, serif; color: #efe3cc; } .legacy .myacc-box .myacc-table th { padding: .7em .9em .6em; background: none; font: 600 max(10px, 1.3cqw)/1 var(--font-display); letter-spacing: .14em; color: #e0b870; border-bottom: 1px solid rgba(200, 150, 70, .4); } .legacy .myacc-box .myacc-table td { padding: .55em .9em; border-top: 0; border-bottom: 1px solid rgba(200, 150, 70, .2); background: none !important; } .legacy .myacc-box .myacc-table td + td, .legacy .myacc-box .myacc-table th + th { border-left: 1px solid rgba(200, 150, 70, .2); } .legacy .myacc-box .myacc-table tr > :first-child + .num { border-left: 0; } .legacy .myacc-box .myacc-table a { font-weight: 400; color: #f1e4cc; } .legacy .myacc-box .myacc-table a:hover { color: var(--gold-hi); } .legacy .myacc-box .ok { color: #5fe0a0; } .legacy .myacc-box .bad { color: #ff5a5a; } .legacy .myacc-box .myacc-actions { padding: .6em 0 0; border: 0; justify-content: center; } /* art buttons */ .legacy .myacc-box button.art-create, .legacy .myacc-box button.art-submit { display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px; box-shadow: none; color: transparent; font-size: 1px; text-shadow: none; overflow: hidden; cursor: pointer; transition: filter .15s; } .legacy .myacc-box button.art-create { width: max(150px, 27.1cqw); aspect-ratio: 232 / 44; background: url(images/btn-create.webp) 0 0 / 100% 100% no-repeat; } .legacy .myacc-box button.art-submit { width: max(84px, 13.6cqw); aspect-ratio: 116 / 44; margin-left: auto; background: url(images/btn-submit.webp) 0 0 / 100% 100% no-repeat; } .legacy .myacc-box button.art-create:hover, .legacy .myacc-box button.art-create:focus-visible, .legacy .myacc-box button.art-submit:hover, .legacy .myacc-box button.art-submit:focus-visible { outline: none; color: transparent; box-shadow: none; filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 90, 60, .6)); } /* character management: two styled dropdowns + SUBMIT on one line */ .legacy .myacc-box .myacc-manage { padding: .9em 0 .2em; gap: 2.2cqw; } .legacy .myacc-box .myacc-manage .xsel, .legacy .myacc-box .myacc-manage select { width: 28.5cqw; min-width: 130px; height: max(32px, 4.4cqw); } .legacy .myacc-box .myacc-manage .xsel + .xsel-native + .xsel { width: 31cqw; } .legacy .myacc-box .myacc-manage .xsel-btn { padding: 0 2.6em 0 .8em; border: 1px solid #9a7438; border-radius: 3px; background: linear-gradient(#120a08, #0a0605); font: 400 max(13px, 1.75cqw)/1 "Alegreya", Georgia, serif; letter-spacing: 0; text-transform: none; text-align: left; display: flex; align-items: center; justify-content: flex-start; color: #efe3cc; } .legacy .myacc-box .myacc-manage .xsel-btn:hover, .legacy .myacc-box .myacc-manage .xsel-btn:focus-visible { border-color: #e0b870; background: linear-gradient(#170d0a, #0d0706); color: #fff; } .legacy .myacc-box .myacc-manage .xsel::after { content: ""; position: absolute; right: .9em; top: 50%; width: .45em; height: .45em; margin-top: -.35em; pointer-events: none; border-right: 2px solid #e0b870; border-bottom: 2px solid #e0b870; transform: rotate(45deg); font-size: max(13px, 1.75cqw); } .legacy .myacc-box .myacc-manage .xsel-list li { font: 400 max(13px, 1.6cqw)/1.3 "Alegreya", Georgia, serif; } @media (max-width: 640px) { .legacy .myacc-box .mb-body { overflow-x: auto; } .legacy .myacc-box .myacc-manage { flex-wrap: wrap; } .legacy .myacc-box .myacc-manage .xsel, .legacy .myacc-box .myacc-manage .xsel + .xsel-native + .xsel { width: 100%; } .legacy .myacc-box .myacc-info th { width: 40%; padding-left: .5em; padding-right: .5em; } .legacy .myacc-box .myacc-info td { padding-left: .5em; padding-right: .5em; } } .legacy .myacc-box:has(.xsel.is-open) { z-index: 5; } /* open dropdown list above the next box */ /* Account Information on its own art panel (wide screens; phones keep the box frame above) */ @media (min-width: 641px) { .legacy .myacc-box.acc-art { aspect-ratio: 848 / 470; border: 0; border-image: none; background: url(images/acc-panel.webp) 0 0 / 100% 100% no-repeat; } .legacy .acc-art .mb-top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .legacy .acc-art .mb-bot { display: none; } .legacy .acc-art .mb-body { padding: 0; background: none; } .legacy .acc-art .myacc-info th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; } .legacy .acc-art .myacc-info, .legacy .acc-art .myacc-info tbody { display: block; } /* row centres at art y 160/201/242/282/322/362 of 470; values from x 321 of 848 */ .legacy .acc-art .myacc-info tr { position: absolute; left: 37.85%; right: 5%; height: 8%; display: block; } .legacy .acc-art .myacc-info tr:nth-child(1) { top: 30.05%; } .legacy .acc-art .myacc-info tr:nth-child(2) { top: 38.75%; } .legacy .acc-art .myacc-info tr:nth-child(3) { top: 47.5%; } .legacy .acc-art .myacc-info tr:nth-child(4) { top: 56%; } .legacy .acc-art .myacc-info tr:nth-child(5) { top: 64.5%; } .legacy .acc-art .myacc-info tr:nth-child(6) { top: 73%; } .legacy .acc-art .myacc-info tr > * { background: none !important; } .legacy .acc-art .myacc-info td { display: flex; align-items: center; gap: .3em; height: 100%; padding: 0; border: 0; white-space: nowrap; overflow: hidden; font: 400 1.85cqw/1 "Alegreya", Georgia, serif; color: #efe3cc; text-shadow: 0 1px 2px #000; } .legacy .myacc-box.acc-art .myacc-info td a { color: #efe3cc; font-weight: 400; } .legacy .myacc-box.acc-art .myacc-info td a:hover { color: var(--gold-hi); } .legacy .acc-art .myacc-secret { overflow: hidden; text-overflow: ellipsis; max-width: 76%; } /* SHOW plates: art x 703-795, 26 px high */ .legacy .acc-art button.myacc-show { position: absolute; float: none; left: 78.8%; width: 19%; top: 16%; height: 69%; border-radius: 3px; color: transparent; font-size: 1px; overflow: hidden; } .legacy .acc-art button.myacc-show:hover, .legacy .acc-art button.myacc-show:focus-visible, .legacy .acc-art button.myacc-show[aria-pressed="true"] { outline: none; color: transparent; background: rgba(255, 120, 80, .12); box-shadow: 0 0 12px rgba(255, 90, 60, .7); } /* the four buttons: art y 392-432, x 58-230 / 235-425 / 429-615 / 621-794 */ .legacy .acc-art .myacc-actions { position: static; padding: 0; border: 0; } .legacy .acc-art .myacc-actions form { position: absolute; top: 83.4%; height: 8.5%; } .legacy .acc-art .myacc-actions form:nth-child(1) { left: 6.85%; width: 20.3%; } .legacy .acc-art .myacc-actions form:nth-child(2) { left: 27.7%; width: 22.4%; } .legacy .acc-art .myacc-actions form:nth-child(3) { left: 50.6%; width: 21.9%; } .legacy .acc-art .myacc-actions form:nth-child(4) { left: 73.2%; width: 20.4%; } .legacy .acc-art .myacc-actions button { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: none; filter: none; color: transparent; font-size: 1px; text-shadow: none; overflow: hidden; cursor: pointer; } .legacy .acc-art .myacc-actions button:hover, .legacy .acc-art .myacc-actions button:focus-visible { outline: none; color: transparent; background: rgba(255, 120, 80, .1); box-shadow: 0 0 14px rgba(255, 90, 60, .65); } } /* My Account (logged in): the frames stand on the site background, no dark content panel behind them (like #highscores) */ #accountmanagement.panel:has(> .myacc), #accountmanagement.panel:has(.myacc) { padding: 0; background: none; border: 0; box-shadow: none; } /* Create Account on the owner's artwork (images/createaccount.webp, 895x1509 art px, 2026-10-02). Box positions are art pixels measured from images/createaccount.png: inputs x 395-822; account y 363-407, availability 409-479, email 490-532, email status 543-604, password 615-658, repeat 677-721, country 741-785, verification 806-902; intro x 60-835 y 160-245; rules x 64-831 y 1036-1304; checkbox x 76-112 y 1328-1363; button x 275-615 y 1378-1446. Phones (<= 640px) get the fields stacked with visible labels instead. */ .cacc { container-type: inline-size; max-width: 760px; margin: 0 auto; } #createaccount .cacc-form { margin: 0; } #createaccount .cacc .cacc-status font[color="red"] { color: #ff7b6e; } #createaccount .cacc .cacc-status font[color="green"] { color: #7fd88a; } #createaccount .cacc textarea { scrollbar-color: #b8893f rgba(0, 0, 0, .3); } @media (min-width: 641px) { .panel:has(.cacc) { padding: 0; background: none; border: 0; box-shadow: none; } #createaccount .cacc-form { position: relative; aspect-ratio: 895 / 1509; background: url(images/createaccount.webp) 0 0 / 100% 100% no-repeat; } #createaccount .cacc .cacc-lab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #createaccount .cacc-intro, #createaccount .cacc-f, #createaccount .cacc-check, #createaccount .cacc-agree, #createaccount .cacc .cacc-submit { position: absolute; margin: 0; } #createaccount .cacc-intro { left: calc(60 / 895 * 100%); top: calc(160 / 1509 * 100%); width: calc(775 / 895 * 100%); height: calc(85 / 1509 * 100%); display: flex; align-items: center; justify-content: center; padding: 0 5cqw; text-align: center; font: 400 max(12px, 1.9cqw)/1.5 var(--font-body); color: #eadcc2; } #createaccount .cacc-f { left: calc(395 / 895 * 100%); width: calc(428 / 895 * 100%); } #createaccount .cacc-acc { top: calc(363 / 1509 * 100%); height: calc(45 / 1509 * 100%); } #createaccount .cacc-accchk { top: calc(409 / 1509 * 100%); height: calc(70 / 1509 * 100%); } #createaccount .cacc-mail { top: calc(490 / 1509 * 100%); height: calc(43 / 1509 * 100%); } #createaccount .cacc-mailchk { top: calc(543 / 1509 * 100%); height: calc(61 / 1509 * 100%); } #createaccount .cacc-pass { top: calc(615 / 1509 * 100%); height: calc(44 / 1509 * 100%); } #createaccount .cacc-pass2 { top: calc(677 / 1509 * 100%); height: calc(45 / 1509 * 100%); } #createaccount .cacc-country { top: calc(741 / 1509 * 100%); height: calc(45 / 1509 * 100%); } #createaccount .cacc-verify { top: calc(806 / 1509 * 100%); height: calc(97 / 1509 * 100%); } #createaccount .cacc-rules { left: calc(64 / 895 * 100%); width: calc(768 / 895 * 100%); top: calc(1036 / 1509 * 100%); height: calc(269 / 1509 * 100%); } #createaccount .cacc input:not([type="checkbox"]), #createaccount .cacc select { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0 1.4cqw; background: transparent; border: 0; border-radius: 0; box-shadow: none; font: 400 max(13px, 2.05cqw)/1 var(--font-body); color: #f4e2b8; caret-color: var(--gold-hi); } #createaccount .cacc select { appearance: none; -webkit-appearance: none; padding-right: 5cqw; cursor: pointer; } #createaccount .cacc select option { background: #120a08; color: #efe3cc; } #createaccount .cacc input::placeholder { color: rgba(234, 220, 194, .38); } #createaccount .cacc input:not([type="checkbox"]):focus, #createaccount .cacc select:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .6), 0 0 12px rgba(255, 150, 60, .35); border-radius: .5cqw; } #createaccount .cacc-status { display: flex; align-items: center; height: 100%; padding: 0 1.4cqw; font: 400 max(13px, 2cqw)/1.3 var(--font-body); color: #b9ab93; } #createaccount .cacc-vbox { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 100%; padding: 0 1.4cqw; } #createaccount .cacc-vbox img { flex: none; height: 52%; width: auto; border: 1px solid rgba(216, 162, 74, .45); border-radius: .4cqw; } #createaccount .cacc .cacc-vbox input { flex: 1; min-width: 0; height: 46%; border: 1px solid rgba(216, 162, 74, .55); border-radius: .4cqw; background: rgba(0, 0, 0, .35); } #createaccount .cacc-vbox .cf-turnstile, #createaccount .cacc-vbox .g-recaptcha { flex: none; } #createaccount .cacc textarea { display: block; width: 100%; height: 100%; margin: 0; padding: 1.8cqw 2.2cqw; resize: none; background: transparent; border: 0; box-shadow: none; font: 400 max(12px, 1.8cqw)/1.6 var(--font-body); color: #cdbfa6; } #createaccount .cacc textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .45); } #createaccount .cacc .cacc-check { left: calc(76 / 895 * 100%); top: calc(1328 / 1509 * 100%); width: calc(37 / 895 * 100%); height: calc(36 / 1509 * 100%); padding: 0; appearance: none; -webkit-appearance: none; background: transparent no-repeat center / 70%; border: 0; border-radius: .5cqw; cursor: pointer; accent-color: auto; } #createaccount .cacc .cacc-check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23f5d488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 4px rgba(255, 150, 60, .7)); } #createaccount .cacc .cacc-check:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(245, 212, 136, .7), 0 0 10px rgba(255, 150, 60, .45); } #createaccount .cacc-agree { left: calc(118 / 895 * 100%); top: calc(1328 / 1509 * 100%); width: calc(390 / 895 * 100%); height: calc(36 / 1509 * 100%); cursor: pointer; } #createaccount .cacc .cacc-submit { left: calc(290 / 895 * 100%); top: calc(1381 / 1509 * 100%); width: calc(312 / 895 * 100%); height: calc(62 / 1509 * 100%); padding: 0; border: 0; border-radius: 1cqw; background: transparent; box-shadow: none; filter: none; cursor: pointer; } #createaccount .cacc .cacc-submit:hover, #createaccount .cacc .cacc-submit:focus-visible { outline: none; background: rgba(255, 190, 130, .1); box-shadow: 0 0 18px rgba(255, 70, 40, .55); } } @media (max-width: 640px) { #createaccount .cacc-form { display: flex; flex-direction: column; gap: 14px; } #createaccount .cacc-title { margin: 0; text-align: center; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } #createaccount .cacc-intro { margin: 0; color: var(--text); } #createaccount .cacc-f { display: flex; flex-direction: column; gap: 6px; } #createaccount .cacc .cacc-lab { font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } #createaccount .cacc input:not([type="checkbox"]), #createaccount .cacc select { width: 100%; max-width: none; } #createaccount .cacc-status { color: var(--muted); } #createaccount .cacc-vbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #createaccount .cacc-vbox img { height: 42px; border: 1px solid var(--line); border-radius: 4px; } #createaccount .cacc-vbox input { flex: 1; min-width: 140px; } #createaccount .cacc textarea { width: 100%; height: 220px; padding: 12px 14px; resize: vertical; font: 400 .88rem/1.6 var(--font-body); color: var(--muted); } #createaccount .cacc .cacc-check { position: absolute; width: 1px; height: 1px; opacity: 0; } #createaccount .cacc-agree { display: flex; align-items: center; gap: 10px; cursor: pointer; } #createaccount .cacc-agree::before { content: ""; flex: none; width: 20px; height: 20px; border: 1px solid #b8893f; border-radius: 3px; background: #0c0706 no-repeat center / 80%; } #createaccount .cacc .cacc-check:checked + .cacc-agree::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23f5d488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #createaccount .cacc .cacc-check:focus-visible + .cacc-agree::before { box-shadow: 0 0 0 2px rgba(245, 212, 136, .6); } #createaccount .cacc-agree .cacc-lab { font-size: .85rem; color: var(--gold-hi); } #createaccount .cacc .cacc-submit { align-self: center; padding: 1em 2.6em; border: 1px solid #f0735f55; border-radius: 4px; cursor: pointer; background: linear-gradient(#b3161f, #6e0b10); font: 700 .85rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff; } #createaccount .cacc .cacc-submit .cacc-lab { font: inherit; letter-spacing: inherit; color: inherit; } } /* Create Account mistakes: shown in the box under the title, in place of the intro text; the field is marked red */ #createaccount .cacc-msg { margin: 0; padding: 0; list-style: none; color: #ff8f80; } #createaccount .cacc-msg[hidden], #createaccount .cacc-intro[hidden] { display: none; } #createaccount .cacc-msg li { display: flex; align-items: center; justify-content: center; gap: .7em; margin: 0; } #createaccount .cacc-msg li::before { content: ""; flex: none; width: .6em; height: .9em; background: var(--ruby-hi); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 6px var(--ruby-hi); } #createaccount .cacc [aria-invalid="true"] { box-shadow: inset 0 0 0 1px rgba(255, 110, 90, .85), 0 0 12px rgba(255, 60, 40, .55) !important; border-radius: .5cqw; } @media (min-width: 641px) { #createaccount .cacc-msg { position: absolute; left: calc(60 / 895 * 100%); top: calc(160 / 1509 * 100%); width: calc(775 / 895 * 100%); height: calc(85 / 1509 * 100%); display: flex; flex-direction: column; justify-content: center; gap: .3cqw; padding: 0 4cqw; overflow-y: auto; font: 600 max(12px, 1.9cqw)/1.35 var(--font-body); } } @media (max-width: 640px) { #createaccount .cacc-msg { padding: 10px 14px; border: 1px solid rgba(255, 110, 100, .45); border-left: 3px solid var(--ruby-hi); border-radius: 4px; background: linear-gradient(90deg, rgba(160, 20, 28, .35), rgba(40, 8, 8, .6)); font-weight: 600; } #createaccount .cacc-msg li { justify-content: flex-start; } #createaccount .cacc .cacc-check[aria-invalid="true"] + .cacc-agree::before { border-color: #ff6e5a; box-shadow: 0 0 10px rgba(255, 60, 40, .55); } } /* ---------- email code steps (Create Account "Check your email", Lost Account), 2026-10-02 ---------- */ .legacy .xflow { max-width: 560px; margin: 8px auto; padding: 4px 6px 8px; } .legacy .xflow-title { margin: 0 0 16px; text-align: center; font: 700 1.35rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } .legacy .xflow-title::after { content: ""; display: block; width: 140px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .legacy .xflow p { margin: 0 0 14px; line-height: 1.6; color: var(--text); } .legacy .xflow b { color: var(--gold-hi); } .legacy .xflow-msg { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(216, 162, 74, .4); border-left: 3px solid var(--gold); border-radius: 4px; background: rgba(120, 90, 30, .14); font-weight: 600; color: #f1dfb5 !important; } .legacy .xflow-msg.is-error { border-color: rgba(255, 110, 100, .45); border-left-color: var(--ruby-hi); background: linear-gradient(90deg, rgba(160, 20, 28, .35), rgba(40, 8, 8, .6)); color: #ffe2d8 !important; } .legacy .xflow-msg::before { content: ""; flex: none; width: 9px; height: 13px; background: var(--gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .legacy .xflow-msg.is-error::before { background: var(--ruby-hi); box-shadow: 0 0 6px var(--ruby-hi); } .legacy .xflow-form { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 18px; } .legacy .xflow-field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .legacy .xflow-field > span { font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .legacy .xflow-field input { width: 100%; max-width: none; } .legacy .xflow .xflow-code { padding: .5em .6em; text-align: center; font: 700 1.9rem/1.2 "Courier New", Courier, monospace; letter-spacing: .4em; color: var(--gold-hi); } .legacy .xflow .xflow-code::placeholder { color: rgba(245, 212, 136, .18); } .legacy .xflow-submit { align-self: center; margin-top: 4px; padding: .95em 2.4em; font-size: .85rem; cursor: pointer; } .legacy .xflow-resend, .legacy .xflow-note { margin: 0; padding-top: 14px; border-top: 1px solid rgba(216, 162, 74, .14); text-align: center; font-size: .9rem; line-height: 1.7; color: var(--muted); } .legacy .xflow .xflow-link { display: inline; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; filter: none; font: inherit; color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .legacy .xflow .xflow-link:hover { color: #fff1cf; box-shadow: none; filter: none; } .legacy .xflow-big { margin: 6px 0 18px !important; text-align: center; font: 700 2.2rem/1.2 "Courier New", Courier, monospace; letter-spacing: .12em; color: var(--gold-hi) !important; } .legacy .xflow-actions { text-align: center; margin-top: 8px !important; } #createaccount .xflow-field input { max-width: none; } /* the old form's 380px limit on this page */ .legacy .xflow .xflow-link { text-transform: none; letter-spacing: 0; font-weight: 600; } .legacy .xflow-submit.is-busy, #createaccount .cacc .cacc-submit.is-busy { pointer-events: none; opacity: .7; cursor: progress; } /* ---------- Buy Points (pages/buypoints.php), 2026-10-02 ---------- */ .legacy .bp { max-width: 760px; margin: 8px auto; } .legacy .bp-intro { text-align: center; color: var(--text); } .legacy .bp-intro b { color: var(--gold-hi); } .legacy .bp .xflow-msg { margin: 0 0 16px; } .legacy .bp-form { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 8px; } .legacy .bp fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .legacy .bp-h { display: block; margin: 0 0 12px; padding: 0; font: 700 .78rem/1.2 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .legacy .bp-packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .legacy .bp-packages legend { grid-column: 1 / -1; } .legacy .bp-package input, .legacy .bp-provider input { position: absolute; opacity: 0; pointer-events: none; } .legacy .bp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 8px 16px; border: 1px solid rgba(216, 162, 74, .3); border-radius: 6px; background: linear-gradient(180deg, rgba(60, 14, 16, .55), rgba(16, 8, 7, .85)); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .legacy .bp-card:hover { border-color: rgba(245, 212, 136, .6); transform: translateY(-1px); } .legacy .bp-package input:checked + .bp-card { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 18px rgba(255, 140, 60, .35); } .legacy .bp-package input:focus-visible + .bp-card, .legacy .bp-provider input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; } .legacy .bp-points { font: 700 1.7rem/1 var(--font-display); color: var(--gold-hi); } .legacy .bp-unit { font: 700 .66rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .legacy .bp-price { margin-top: 8px; font: 600 1.05rem/1 var(--font-body); color: #f4e8d2; } .legacy .bp-providers { display: flex; flex-wrap: wrap; gap: 10px; } .legacy .bp-providers legend { width: 100%; } .legacy .bp-provider span { display: inline-block; padding: .7em 1.2em; border: 1px solid rgba(216, 162, 74, .3); border-radius: 4px; background: rgba(16, 8, 7, .7); color: var(--text); cursor: pointer; } .legacy .bp-provider input:checked + span { border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 12px rgba(255, 140, 60, .3); } .legacy .bp-consent { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid rgba(216, 162, 74, .25); border-radius: 4px; background: rgba(120, 90, 30, .1); cursor: pointer; line-height: 1.5; color: var(--text); } .legacy .bp-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ruby-hi); } .legacy .bp-note { margin: 0; text-align: center; font-size: .82rem; line-height: 1.6; color: var(--muted); } .legacy .bp-testbtns { display: flex; justify-content: center; gap: 14px; margin-top: 16px; } .legacy .bp-testbtns form { margin: 0; } .legacy .bp-history { overflow-x: auto; } .legacy .bp-history table { width: 100%; border-collapse: collapse; font-size: .88rem; } .legacy .bp-history th { padding: 8px 10px; text-align: left; font: 700 .66rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(216, 162, 74, .3); } .legacy .bp-history td { padding: 8px 10px; border-bottom: 1px solid rgba(216, 162, 74, .1); color: var(--text); white-space: nowrap; } .legacy .bp-history form { margin: 0; } .legacy .bp-status { font-weight: 700; } .legacy .bp-status.is-paid { color: #7fd88a; } .legacy .bp-status.is-created { color: var(--gold-hi); } .legacy .bp-status.is-reversed, .legacy .bp-status.is-mismatch { color: #ff7b6e; } .legacy .bp h3.bp-h { margin-top: 30px; } @media (max-width: 640px) { .legacy .bp-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .legacy .bp-package { display: block; margin: 0; min-width: 0; } .legacy .bp-package .bp-card { height: 100%; } .legacy .bp-provider { margin: 0; } .legacy .pr-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; justify-content: center; margin: 0 0 16px; } .legacy .pr-period .xflow-field input { width: auto; } .legacy .bp-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .legacy .bp-history td { white-space: normal; } .legacy .bp-history td:nth-child(2) { white-space: nowrap; } .legacy .bp-history th { white-space: normal; letter-spacing: .1em; padding: 8px 7px; } .legacy .bp-history td { padding: 8px 7px; } /* Buy Points "Thank you!" on the owner's artwork (images/thankyou.webp, 1501x982 art px, second version, 2026-10-02): message box x 114-1386 y 350-574, balance box y 614-714, GO TO THE SHOP x 145-715 / BUY POINTS x 795-1370 at y 762-875 */ @media (min-width: 641px) { .panel:has(.bpty) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy .bpty { position: relative; container-type: inline-size; max-width: 560px; margin: 0 auto; aspect-ratio: 1501 / 982; background: url(images/thankyou.webp?v=2) 0 0 / 100% 100% no-repeat; } .legacy .bpty-title, .legacy .bpty-shop span, .legacy .bpty-buy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .legacy .bpty-msg, .legacy .bpty-bal { position: absolute; left: calc(114 / 1501 * 100%); width: calc(1272 / 1501 * 100%); margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 4cqw; text-align: center; } .legacy .bpty-msg { top: calc(350 / 982 * 100%); height: calc(224 / 982 * 100%); font: 700 max(15px, 3.6cqw)/1.3 var(--font-display); letter-spacing: .04em; color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 140, 60, .35); } .legacy .bpty-bal { top: calc(614 / 982 * 100%); height: calc(100 / 982 * 100%); font: 400 max(13px, 2.6cqw)/1.2 var(--font-body); color: #eadcc2; } .legacy .bpty-bal b { color: var(--gold-hi); } .legacy .bpty-shop, .legacy .bpty-buy { position: absolute; top: calc(762 / 982 * 100%); height: calc(113 / 982 * 100%); border-radius: 1cqw; } .legacy .bpty-shop { left: calc(145 / 1501 * 100%); width: calc(570 / 1501 * 100%); } .legacy .bpty-buy { left: calc(795 / 1501 * 100%); width: calc(575 / 1501 * 100%); } .legacy .bpty-shop:hover, .legacy .bpty-shop:focus-visible, .legacy .bpty-buy:hover, .legacy .bpty-buy:focus-visible { outline: none; background: rgba(255, 200, 140, .08); box-shadow: 0 0 18px rgba(255, 90, 50, .55); } } @media (max-width: 640px) { .legacy .bpty { max-width: 560px; margin: 8px auto; text-align: center; } .legacy .bpty-title { margin: 0 0 14px; font: 700 1.35rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } .legacy .bpty-msg { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(216, 162, 74, .4); border-left: 3px solid var(--gold); border-radius: 4px; background: rgba(120, 90, 30, .14); font-weight: 600; color: #f1dfb5; } .legacy .bpty-bal { margin: 0 0 16px; color: var(--text); } .legacy .bpty-bal b { color: var(--gold-hi); } .legacy .bpty-shop, .legacy .bpty-buy { display: inline-block; margin: 0 4px; padding: .9em 1.6em; border-radius: 4px; font: 700 .8rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; } .legacy .bpty-shop { background: linear-gradient(#b3161f, #6e0b10); color: #fff; } .legacy .bpty-buy { border: 1px solid rgba(216, 162, 74, .5); color: var(--gold-hi); } } /* phones: the old Gesior forms (TableContainer: change password/email/info, edit character, create character, guild forms) stack each label above its field instead of two squeezed columns; no field wider than the screen (2026-10-02) */ @media (max-width: 640px) { .legacy .TableContainer { padding-left: 10px; padding-right: 10px; } .legacy .InnerTableContainer > table, .legacy .InnerTableContainer > table > tbody, .legacy .InnerTableContainer > table > tbody > tr, .legacy .InnerTableContainer > table > tbody > tr > td { display: block; width: auto !important; } .legacy .InnerTableContainer td.LabelV { white-space: normal; padding: 10px 0 2px; line-height: 1.4; } .legacy .TableContainer input:not([type="checkbox"]):not([type="radio"]):not([type="image"]), .legacy .TableContainer textarea, .legacy .TableContainer select { width: 100% !important; max-width: 100%; box-sizing: border-box; } .legacy .TableContainer textarea { min-height: 160px; } .legacy table { max-width: 100%; } } @media (max-width: 640px) { /* My Account > Characters: the Visibility column is left out on phones so the table fits */ .legacy .myacc-table th:nth-child(5), .legacy .myacc-table td:nth-child(5) { display: none; } .legacy .myacc-table th, .legacy .myacc-table td { padding-left: .45em; padding-right: .45em; } /* Found a guild (old table layout): stacked like the other forms */ .legacy form[action*="createguild"] table, .legacy form[action*="createguild"] tbody, .legacy form[action*="createguild"] tr, .legacy form[action*="createguild"] td { display: block; width: auto !important; } .legacy form[action*="createguild"] input:not([type="image"]), .legacy form[action*="createguild"] select { width: 100% !important; box-sizing: border-box; } } /* Highscores: numbered pages under the list (2026-10-02) */ .legacy .hs-pages { flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 6px; } .legacy .hs-pages .hs-label { margin-right: 4px; font: 700 .7rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .legacy .hs-pages .hs-num { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1em; height: 2.1em; padding: 0 .55em; border: 1px solid rgba(216, 162, 74, .35); border-radius: 4px; background: rgba(16, 8, 7, .7); font: 700 .82rem/1 var(--font-body); color: var(--gold-hi); text-decoration: none; } .legacy .hs-pages a.hs-num:hover, .legacy .hs-pages a.hs-num:focus-visible { border-color: var(--gold-hi); color: #fff1cf; box-shadow: 0 0 10px rgba(255, 140, 60, .35); outline: none; } .legacy .hs-pages .hs-num.is-current { border-color: var(--gold-hi); background: linear-gradient(180deg, var(--ruby-hi), var(--ruby) 60%, #6e0912); color: #fff; } .legacy .hs-pages .hs-step { font-weight: 600; color: var(--text); } .legacy .hs-pages .hs-gap { color: var(--muted); padding: 0 2px; } /* ---------- header bar on the owner's artwork (images/navbar.webp, 1996x246 art px, 2026-10-03) ---------- Same size as the plain header it replaces: the red strip (art y 69-176) is drawn exactly as tall as the 56px topbar, so the whole bar is 1035px wide and its spikes and emblem stick out above and below like the old crest did. The words are part of the art; the links sit on them as invisible click areas (glow on hover / current page). Word boxes in art px: NEWS 156-247, HIGHSCORES 288-475, CHARACTERS 507-697, GUILDS 730-847, emblem 915-1085, HOUSES 1181-1301, FORUM 1358-1469, RULES 1525-1622, SHOP 1687-1831. Phones (<= 1020px) keep the menu button. */ @media (min-width: 1021px) { .topbar-inner { position: relative; } .topbar .mainnav { position: absolute; left: 50%; top: 50%; z-index: 61; width: min(1035px, calc(100vw - 16px)); aspect-ratio: 1996 / 246; height: auto; transform: translate(-50%, -50%); display: block; padding: 0; margin: 0; background: url(images/navbar.webp?v=3) 0 0 / 100% 100% no-repeat; pointer-events: none; } .topbar .mainnav .nav-list, .topbar .mainnav .nav-item { display: contents; } .topbar .mainnav .nav-actions { display: none; } .topbar .mainnav .nav-link { position: absolute; top: 31%; height: 38%; padding: 0; margin: 0; border-radius: 3px; pointer-events: auto; color: transparent !important; font-size: 0; text-shadow: none; background: none; box-shadow: none; transition: box-shadow .15s, background-color .15s; } .topbar .mainnav .nav-link::before, .topbar .mainnav .nav-link::after { display: none !important; } .topbar .mainnav .nav-link svg, .topbar .mainnav .nav-link span { display: none; } .topbar .mainnav .nav-link:hover, .topbar .mainnav .nav-link:focus-visible { outline: none; background: rgba(255, 190, 110, .1); box-shadow: 0 0 14px rgba(255, 120, 50, .45); } .topbar .mainnav .nav-item.is-active .nav-link { background: rgba(255, 190, 110, .08); box-shadow: inset 0 -2px 0 rgba(245, 212, 136, .85), 0 0 12px rgba(255, 120, 50, .35); } .topbar .nav-latestnews { left: calc(156 / 1996 * 100%); width: calc(91 / 1996 * 100%); } .topbar .nav-highscores { left: calc(288 / 1996 * 100%); width: calc(187 / 1996 * 100%); } .topbar .nav-characters { left: calc(507 / 1996 * 100%); width: calc(190 / 1996 * 100%); } .topbar .nav-guilds { left: calc(730 / 1996 * 100%); width: calc(117 / 1996 * 100%); } .topbar .nav-houses { left: calc(1181 / 1996 * 100%); width: calc(120 / 1996 * 100%); } .topbar .nav-whoisonline { left: calc(1354 / 1996 * 100%); width: calc(120 / 1996 * 100%); } /* ONLINE, painted over FORUM (2026-10-03; old art navbar-with-forum.webp) */ .topbar .nav-tibiarules { left: calc(1525 / 1996 * 100%); width: calc(97 / 1996 * 100%); } .topbar .nav-shop { left: calc(1687 / 1996 * 100%); width: calc(144 / 1996 * 100%); } /* the emblem in the art is the home link (the old crest medal is hidden) */ .topbar .crest { left: 50%; top: 50%; z-index: 62; width: calc(min(1035px, calc(100vw - 16px)) * 170 / 1996); height: calc(min(1035px, calc(100vw - 16px)) * 170 / 1996); margin: 0; transform: translate(-50%, -50%); border-radius: 50%; } .topbar .crest::before, .topbar .crest::after, .topbar .crest-medal { display: none; } .topbar .crest:hover, .topbar .crest:focus-visible { outline: none; box-shadow: 0 0 22px rgba(255, 110, 40, .55); } } /* the art bar's end spikes reach 13px above its strip: the top row gets that much more room so they stay below the Download / Create Account buttons (owner, 2026-10-03) */ @media (min-width: 1021px) { .utilbar-inner { padding-bottom: 16px; } } /* the art bar's emblem reaches 36px below its strip: the banner starts that much lower so the bottom spike stays clear of the OBLIVION logo (owner, 2026-10-03) */ @media (min-width: 1021px) { .hero { margin-top: 18px; } } @media (min-width: 1021px) { .page-banner { margin-top: 42px; } } /* same for the banner strip on the other pages */ /* with the art bar (2026-10-03): no dark strips behind it, the site background shows up to the top; the Download / Create Account buttons sit at the right edge of the window */ @media (min-width: 1021px) { .utilbar { background: transparent; border-bottom: 0; } .utilbar-inner { max-width: none; padding-right: 18px; } .topbar { background: transparent; box-shadow: none; } .topbar::after, .topbar-inner::before, .topbar-inner::after { display: none; } } /* 2026-10-03 (owner): banners are cut out (transparent outside their gold frame: images/banner-wide.webp, banner-strip.webp), and no dark bands/lines around the banner section: the site background shows through */ .hero::before, .hero::after { content: none; } .hero-fade { display: none; } .hero-stage { overflow: visible; } /* top strip (owner's test 2026-10-03, after Miracle's): welcome line left, buttons + Discord right, see-through with a thin gold line under it; a little taller than before */ @media (min-width: 1021px) { .utilbar-inner { justify-content: space-between; padding: 8px 18px 22px 24px; } .utilbar { position: relative; } .utilbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(216, 162, 74, .45) 15%, rgba(245, 212, 136, .6) 50%, rgba(216, 162, 74, .45) 85%, transparent); } .util-welcome { margin: 0; font: 400 .95rem/1 var(--font-body); color: #e6d8bf; text-shadow: 0 1px 3px #000; } .util-welcome b { font-family: var(--font-display); letter-spacing: .06em; color: var(--gold-hi); } .util-actions { display: flex; align-items: center; gap: 10px; } .util-discord { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #5865f2; color: #fff; border: 1px solid #7b86ff; } .util-discord svg { width: 20px; height: 20px; } .util-discord:hover, .util-discord:focus-visible { outline: none; filter: brightness(1.1); box-shadow: 0 0 12px rgba(88, 101, 242, .6); } } @media (max-width: 1020px) { .util-welcome { display: none; } } /* the art bar is exactly as wide as the banner below (both min(1118px, 100% - 32px)), so their outer points line up (owner, 2026-10-03); the emblem/home link scales with it */ @media (min-width: 1021px) { .topbar .mainnav { width: min(1118px, calc(100vw - 32px)); } .topbar .crest { width: calc(min(1118px, calc(100vw - 32px)) * 170 / 1996); height: calc(min(1118px, calc(100vw - 32px)) * 170 / 1996); } } @media (min-width: 1021px) { .hero { margin-top: 30px; } .page-banner { margin-top: 52px; } } /* room for the wider bar's emblem */ /* ---------- Create Account v3 on the owner's compact art (images/createaccount2.webp, 1131x1140 art px, 2026-10-03) ---------- art boxes: inputs x 503-981 at y 311-369 / 405-463 / 498-555 / 589-646, mark space x 984-1030, verification box x 230-898 y 698-816, checkbox x 121-170 y 847-894, button x 318-808 y 919-1021. Phones get the fields stacked. */ #createaccount .cac-errors { max-width: 620px; margin: 0 auto 14px; padding: 10px 16px; border: 1px solid rgba(255, 110, 100, .45); border-left: 3px solid var(--ruby-hi); border-radius: 4px; background: linear-gradient(90deg, rgba(160, 20, 28, .35), rgba(40, 8, 8, .6)); color: #ffe2d8; } #createaccount .cac-errors ul { margin: 6px 0 0 18px; padding: 0; } #createaccount .cac { max-width: 620px; margin: 0 auto; } #createaccount .cac-form { margin: 0; } #createaccount .cac .cac-tip:empty { display: none; } #createaccount .cac-rules span::before { content: "\2715"; display: inline-block; width: 1.3em; color: #ff6e5a; font-weight: 700; } #createaccount .cac-rules span.is-met::before { content: "\2713"; color: #6fd17c; } #createaccount .cac-agree a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } @media all { #createaccount .cac-form { display: flex; flex-direction: column; gap: 12px; } #createaccount .cac-title { margin: 0 0 4px; text-align: center; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } #createaccount .cac-f { position: relative; display: flex; flex-direction: column; gap: 5px; } #createaccount .cac .cac-lab { font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } #createaccount .cac input:not([type="checkbox"]) { width: 100%; max-width: none; padding-right: 40px; } #createaccount .cac-mark { position: absolute; right: 10px; top: 32px; } #createaccount .cac-f.is-ok .cac-mark::before { content: "\2713"; color: #6fd17c; font-weight: 700; } #createaccount .cac-f.is-bad .cac-mark::before { content: "\2715"; color: #ff6e5a; font-weight: 700; } #createaccount .cac-tip { font-size: .85rem; color: #ff9f8f; } #createaccount .cac-rules { display: none; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid rgba(216, 162, 74, .4); border-radius: 4px; font-size: .85rem; color: var(--text); } #createaccount .cac-form:has(#passor:focus) .cac-rules { display: flex; } #createaccount .cac-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #createaccount .cac-verify img { height: 42px; border: 1px solid var(--line); border-radius: 4px; } #createaccount .cac-verify input { flex: 1; min-width: 140px; } #createaccount .cac .cac-check { position: absolute; opacity: 0; width: 1px; height: 1px; } #createaccount .cac-agree { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--text); cursor: pointer; } #createaccount .cac-agree::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1px solid #b8893f; border-radius: 3px; background: #0c0706 no-repeat center / 80%; } #createaccount .cac .cac-check:checked + .cac-agree::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23f5d488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #createaccount .cac-agree.is-bad::before { border-color: #ff6e5a; box-shadow: 0 0 10px rgba(255, 60, 40, .55); } #createaccount .cac .cac-submit { align-self: center; padding: 1em 2.6em; border: 1px solid #f0735f55; border-radius: 4px; cursor: pointer; background: linear-gradient(#b3161f, #6e0b10); font: 700 .85rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff; } #createaccount .cac .cac-submit .cac-lab { font: inherit; letter-spacing: inherit; color: inherit; } } /* the agree line is plain text with links (an older label[for="rules"] rule set capitals and a display font) */ @media all { #createaccount label.cac-agree { text-transform: none; letter-spacing: 0; font: 400 .9rem/1.4 var(--font-body); } } @media all { #createaccount label.cac-agree { display: block; position: relative; padding-left: 30px; } #createaccount label.cac-agree::before { position: absolute; left: 0; top: 1px; margin: 0; } } /* Create Account v3, art with two checkboxes (1133x1167 art px): inputs x 504-981 at y 313/407/500/591 (58 tall), verification x 231-901 y 692-808, checkboxes x 121-170 at y 831-879 and 895-943, button x 319-809 y 950-1052 */ /* the heading like Account Login and Lost Account (2026-10-08) */ #createaccount .cac .cac-title { margin: 0 0 6px; text-align: center; font: 700 1.35rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } #createaccount .cac .cac-title::after { content: ""; display: block; width: 140px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* owner's choice 2026-10-03: Create Account panel 540px wide (was 620px) */ #createaccount .cac, #createaccount .cac-errors { max-width: 540px; } .legacy .xflow-list { margin: 0 0 14px 20px; padding: 0; line-height: 1.6; color: var(--text); } .legacy .xflow-list li { margin-bottom: 6px; } .legacy .xflow-list a, .legacy .xflow p a:not(.btn) { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } /* styled dropdown in the plain forms (Account Settings > Country), 2026-10-03 */ .legacy .xflow .xsel { height: auto; } .legacy .xflow .xsel-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #9a7438; border-radius: 4px; background: linear-gradient(#120a08, #0a0605); box-shadow: none; filter: none; cursor: pointer; font: 400 1rem/1 var(--font-body); letter-spacing: 0; text-transform: none; text-align: left; color: #efe3cc; } .legacy .xflow .xsel-btn::after { content: ""; width: .5em; height: .5em; margin: -.3em 2px 0 12px; border-right: 2px solid #e0b870; border-bottom: 2px solid #e0b870; transform: rotate(45deg); } .legacy .xflow .xsel-btn:hover, .legacy .xflow .xsel-btn:focus-visible { border-color: #e0b870; color: #fff; outline: none; } .legacy .xflow .xsel-list { left: 0; min-width: 100%; max-height: 320px; } .legacy .xflow .xsel-list li { font: 400 .95rem/1.2 var(--font-body); letter-spacing: 0; } .legacy .xflow select option { background: #120a08; color: #efe3cc; } .legacy.panel:has(.xflow .xsel.is-open) { overflow: visible; } /* the open country list may reach past the panel */ /* Welcome after sign-up on the owner's artwork (images/welcome.webp, 1450x998 art px, 2026-10-03): line x 123-1323 y 278-338, number box x 145-1304 y 365-506, tips x 133-1318 y 577-731, CREATE YOUR CHARACTER x 187-737 / MY ACCOUNT x 813-1267 at y 766-853. Phones: plain text version. */ @media (min-width: 641px) { .panel:has(.welc) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy .welc { position: relative; container-type: inline-size; max-width: 760px; margin: 0 auto; aspect-ratio: 1450 / 998; background: url(images/welcome.webp) 0 0 / 100% 100% no-repeat; } .legacy .welc .welc-lab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .legacy .welc-line, .legacy .welc-num, .legacy .welc-tips { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .legacy .welc-line { left: calc(123 / 1450 * 100%); top: calc(278 / 998 * 100%); width: calc(1200 / 1450 * 100%); height: calc(60 / 998 * 100%); padding: 0 2cqw; font: 400 max(12px, 2.05cqw)/1.2 var(--font-body); color: #eadcc2; } .legacy .welc-num { left: calc(145 / 1450 * 100%); top: calc(365 / 998 * 100%); width: calc(1159 / 1450 * 100%); height: calc(141 / 998 * 100%); font: 700 max(22px, 6cqw)/1 "Courier New", Courier, monospace; letter-spacing: .14em; color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 140, 60, .45); } .legacy .welc-tips { left: calc(133 / 1450 * 100%); top: calc(577 / 998 * 100%); width: calc(1185 / 1450 * 100%); height: calc(154 / 998 * 100%); flex-direction: column; align-items: flex-start; gap: .6cqw; padding: 0 3cqw 0 5cqw; list-style: disc; text-align: left; font: 400 max(11px, 1.8cqw)/1.4 var(--font-body); color: #e6d8bf; } .legacy .welc-tips li { margin: 0; } .legacy .welc-tips a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } .legacy .welc-char, .legacy .welc-acc { position: absolute; top: calc(766 / 998 * 100%); height: calc(87 / 998 * 100%); border-radius: 1.2cqw; } .legacy .welc-char { left: calc(187 / 1450 * 100%); width: calc(550 / 1450 * 100%); } .legacy .welc-acc { left: calc(813 / 1450 * 100%); width: calc(454 / 1450 * 100%); } .legacy .welc-char:hover, .legacy .welc-char:focus-visible, .legacy .welc-acc:hover, .legacy .welc-acc:focus-visible { outline: none; background: rgba(255, 190, 130, .08); box-shadow: 0 0 18px rgba(255, 70, 40, .5); } } @media (max-width: 640px) { .legacy .welc { text-align: center; } .legacy .welc h2 { margin: 0 0 12px; font: 700 1.3rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); } .legacy .welc-num { margin: 6px 0 16px; font: 700 2rem/1.2 "Courier New", Courier, monospace; letter-spacing: .12em; color: var(--gold-hi); } .legacy .welc h3 { margin: 0 0 6px; text-align: left; font: 700 .8rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .legacy .welc-tips { margin: 0 0 16px 18px; padding: 0; text-align: left; line-height: 1.55; } .legacy .welc-tips a { color: var(--gold-hi); text-decoration: underline; } .legacy .welc-char, .legacy .welc-acc { display: inline-block; margin: 0 4px 8px; padding: .9em 1.4em; border-radius: 4px; font: 700 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; } .legacy .welc-char { background: linear-gradient(#b3161f, #6e0b10); color: #fff; } .legacy .welc-acc { border: 1px solid rgba(216, 162, 74, .5); color: var(--gold-hi); } } @media (min-width: 641px) { .legacy .welc-tips { top: calc(602 / 998 * 100%); height: calc(126 / 998 * 100%); gap: .3cqw; font-size: max(11px, 1.7cqw); } } /* ---------- Create Character on the owner's artwork (images/createchar.webp, 1459x984 art px, 2026-10-03) ---------- note x 131-1326 y 297-434, name x 505-1296 y 479-555, Male box x 505-889 / Female x 929-1296 at y 602-679 (round buttons at x 527-568 / 951-991), CREATE CHARACTER x 202-725 / BACK x 853-1252 at y 739-833. Phones: stacked. */ .legacy .cch { max-width: 680px; margin: 0 auto; } .legacy .cch-form { margin: 0; } .legacy .cch-sex { margin: 0; padding: 0; border: 0; min-width: 0; } @media (min-width: 641px) { .panel:has(.cch) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy .cch-form { position: relative; container-type: inline-size; aspect-ratio: 1459 / 984; background: url(images/createchar.webp) 0 0 / 100% 100% no-repeat; } .legacy .cch .cch-lab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .legacy .cch-note { position: absolute; left: calc(131 / 1459 * 100%); top: calc(297 / 984 * 100%); width: calc(1195 / 1459 * 100%); height: calc(137 / 984 * 100%); margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 4cqw; text-align: center; font: 400 max(11px, 1.85cqw)/1.45 var(--font-body); color: #e6d8bf; } .legacy .cch-note a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } .legacy .cch .cch-name { position: absolute; left: calc(505 / 1459 * 100%); top: calc(479 / 984 * 100%); width: calc(791 / 1459 * 100%); height: calc(76 / 984 * 100%); } .legacy .cch .cch-name input { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0 6cqw 0 1.6cqw; background: transparent; border: 0; border-radius: 1cqw; box-shadow: none; font: 400 max(13px, 2.3cqw)/1 var(--font-body); color: #f4e2b8; caret-color: var(--gold-hi); } .legacy .cch .cch-name input::placeholder { color: rgba(234, 220, 194, .35); } .legacy .cch .cch-name input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .55), 0 0 12px rgba(255, 150, 60, .3); } /* the check mark sits inside the box at its right end (the art has no room next to it) */ .legacy .cch .cch-name .cac-mark { left: auto; right: 1.4cqw; width: 3cqw; height: 3cqw; } .legacy .cch .cch-name.is-ok .cac-mark, .legacy .cch .cch-name.is-bad .cac-mark { display: grid; place-items: center; font: 700 2cqw/1 sans-serif; color: #fff; } .legacy .cch .cch-name.is-ok .cac-mark { background: #2f8a3c; } .legacy .cch .cch-name.is-ok .cac-mark::before { content: "\2713"; } .legacy .cch .cch-name.is-bad .cac-mark { background: #b3161f; } .legacy .cch .cch-name.is-bad .cac-mark::before { content: "\2715"; } .legacy .cch .cch-name.is-bad input:not(:focus) { box-shadow: inset 0 0 0 1px rgba(255, 110, 90, .75); } .legacy .cch .cch-name .cac-tip { display: block; } .legacy .cch .cch-name .cac-tip:empty { display: none; } .legacy .cch-opt { position: absolute; top: calc(602 / 984 * 100%); height: calc(77 / 984 * 100%); margin: 0; display: flex; align-items: center; cursor: pointer; border-radius: 1cqw; } .legacy .cch-male { left: calc(505 / 1459 * 100%); width: calc(384 / 1459 * 100%); } .legacy .cch-female { left: calc(929 / 1459 * 100%); width: calc(367 / 1459 * 100%); } .legacy .cch-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* a dot inside the drawn round button when chosen; the word sits right of it */ .legacy .cch-opt::before { content: ""; position: absolute; left: calc(32 / 384 * 100%); top: 50%; width: 1.4cqw; height: 1.4cqw; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; } .legacy .cch-female::before { left: calc(42 / 367 * 100%); } .legacy .cch-opt:has(input:checked)::before { background: radial-gradient(circle, #fff1c6, #e0a640 60%, #8a5a1e); box-shadow: 0 0 8px rgba(255, 170, 60, .8); } .legacy .cch-opt span { margin-left: 22%; font: 700 max(13px, 2.3cqw)/1 var(--font-display); letter-spacing: .08em; color: #e6d8bf; } .legacy .cch-opt:hover span, .legacy .cch-opt:has(input:checked) span { color: var(--gold-hi); } .legacy .cch-opt:has(input:focus-visible) { box-shadow: 0 0 0 1px rgba(245, 212, 136, .7), 0 0 10px rgba(255, 150, 60, .45); } .legacy .cch-sex.is-bad .cch-opt { box-shadow: inset 0 0 0 1px rgba(255, 110, 90, .75); } .legacy .cch .cch-create, .legacy .cch .cch-back { position: absolute; top: calc(739 / 984 * 100%); height: calc(94 / 984 * 100%); margin: 0; padding: 0; border: 0; border-radius: 1.4cqw; background: transparent; box-shadow: none; filter: none; cursor: pointer; } .legacy .cch .cch-create { left: calc(202 / 1459 * 100%); width: calc(523 / 1459 * 100%); } .legacy .cch .cch-back { left: calc(853 / 1459 * 100%); width: calc(399 / 1459 * 100%); } .legacy .cch .cch-create:hover, .legacy .cch .cch-create:focus-visible, .legacy .cch .cch-back:hover, .legacy .cch .cch-back:focus-visible { outline: none; background: rgba(255, 190, 130, .08); box-shadow: 0 0 18px rgba(255, 70, 40, .5); } } @media (max-width: 640px) { .legacy .cch-form { display: flex; flex-direction: column; gap: 12px; } .legacy .cch h2 { margin: 0; text-align: center; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } .legacy .cch-note { margin: 0; color: var(--text); } .legacy .cch-note a { color: var(--gold-hi); } .legacy .cch .cch-name { position: relative; display: flex; flex-direction: column; gap: 5px; } .legacy .cch .cch-lab { font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .legacy .cch .cch-name input { width: 100%; max-width: none; padding-right: 40px; } .legacy .cch .cch-name .cac-mark { position: absolute; right: 10px; top: 32px; } .legacy .cch .cch-name.is-ok .cac-mark::before { content: "\2713"; color: #6fd17c; font-weight: 700; } .legacy .cch .cch-name.is-bad .cac-mark::before { content: "\2715"; color: #ff6e5a; font-weight: 700; } .legacy .cch .cac-tip { font-size: .85rem; color: #ff9f8f; } .legacy .cch-sex { display: flex; gap: 10px; flex-wrap: wrap; } .legacy .cch-sex legend { margin-bottom: 6px; } .legacy .cch-opt { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(216, 162, 74, .4); border-radius: 4px; cursor: pointer; } .legacy .cch-sex.is-bad .cch-opt { border-color: #ff6e5a; } .legacy .cch .cch-create { align-self: center; padding: 1em 2.4em; border: 1px solid #f0735f55; border-radius: 4px; cursor: pointer; background: linear-gradient(#b3161f, #6e0b10); color: #fff; } .legacy .cch .cch-create .cch-lab, .legacy .cch .cch-back .cch-lab { font: 700 .82rem/1 var(--font-display); letter-spacing: .16em; color: inherit; } .legacy .cch .cch-back { align-self: center; color: var(--gold-hi); } } @media (min-width: 641px) { .legacy .cch .cch-name .cac-mark { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; display: none; } .legacy .cch .cch-name .cac-tip { position: absolute; right: 0; top: calc(100% + .3cqw); z-index: 5; max-width: 100%; padding: .5cqw 1.2cqw; border: 1px solid rgba(255, 110, 90, .6); border-radius: .6cqw; background: #2a0a0b; font: 600 max(11px, 1.7cqw)/1.3 var(--font-body); color: #ffcfc4; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); white-space: nowrap; } } /* the dot exactly in the drawn round buttons (centres measured: male art 548,642 / female 972,641.5) and a smaller panel */ @media (min-width: 641px) { .legacy .cch-opt::before { left: calc(43 / 384 * 100%); top: calc(40 / 77 * 100%); width: 1.55cqw; height: 1.55cqw; } .legacy .cch-female::before { left: calc(43 / 367 * 100%); top: calc(39.5 / 77 * 100%); } } .legacy .cch, #accountmanagement .cac-errors:has(+ .cch) { max-width: 600px; } /* ---------- Account Settings on the owner's artwork (images/settings.webp, 1469x924 art px, 2026-10-03) ---------- note strip x 135-1332 y 308-449, dropdown box x 503-1302 y 506-589 (arrow drawn at its right end), SAVE x 211-686 / BACK x 771-1266 at y 653-761. Phones: stacked. */ .legacy .aset { max-width: 600px; margin: 0 auto; } .legacy .aset-form { margin: 0; } .legacy .aset-flag { width: 26px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); } .legacy .aset-flag[hidden] { display: none; } @media (min-width: 641px) { .panel:has(.aset) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy.panel:has(.aset .xsel.is-open) { overflow: visible; } .legacy .aset-form { position: relative; container-type: inline-size; aspect-ratio: 1469 / 924; background: url(images/settings.webp) 0 0 / 100% 100% no-repeat; } .legacy .aset .aset-lab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .legacy .aset-note { position: absolute; left: calc(135 / 1469 * 100%); top: calc(308 / 924 * 100%); width: calc(1197 / 1469 * 100%); height: calc(141 / 924 * 100%); margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 4cqw; text-align: center; font: 400 max(12px, 2.2cqw)/1.4 var(--font-body); color: #e6d8bf; } .legacy .aset-note.is-saved { font-weight: 700; color: #8fe39b; } .legacy .aset-box { position: absolute; left: calc(503 / 1469 * 100%); top: calc(506 / 924 * 100%); width: calc(799 / 1469 * 100%); height: calc(83 / 924 * 100%); display: flex; align-items: center; } .legacy .aset-flag { position: absolute; left: 1.8cqw; top: 50%; width: 3.4cqw; transform: translateY(-50%); z-index: 2; pointer-events: none; } .legacy .aset .xsel { width: 100%; height: 100%; } .legacy .aset .xsel-btn { display: flex; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0 7cqw 0 6.6cqw; border: 0; border-radius: 1cqw; background: transparent; box-shadow: none; filter: none; cursor: pointer; font: 400 max(13px, 2.4cqw)/1 var(--font-body); letter-spacing: 0; text-transform: none; text-align: left; color: #f4e2b8; } .legacy .aset-flag[hidden] + .xsel .xsel-btn, .legacy .aset-box:has(.aset-flag[hidden]) .xsel-btn { padding-left: 1.8cqw; } .legacy .aset .xsel-btn:hover, .legacy .aset .xsel-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(245, 212, 136, .55), 0 0 12px rgba(255, 150, 60, .3); } .legacy .aset .xsel-list { left: 0; min-width: 100%; max-height: 300px; } .legacy .aset .xsel-list li { font: 400 .95rem/1.2 var(--font-body); letter-spacing: 0; } .legacy .aset .aset-save, .legacy .aset .aset-back { position: absolute; top: calc(653 / 924 * 100%); height: calc(108 / 924 * 100%); margin: 0; padding: 0; border: 0; border-radius: 1.4cqw; background: transparent; box-shadow: none; filter: none; cursor: pointer; } .legacy .aset .aset-save { left: calc(211 / 1469 * 100%); width: calc(475 / 1469 * 100%); } .legacy .aset .aset-back { left: calc(771 / 1469 * 100%); width: calc(495 / 1469 * 100%); } .legacy .aset .aset-save:hover, .legacy .aset .aset-save:focus-visible, .legacy .aset .aset-back:hover, .legacy .aset .aset-back:focus-visible { outline: none; background: rgba(255, 190, 130, .08); box-shadow: 0 0 18px rgba(255, 70, 40, .5); } } @media (max-width: 640px) { .legacy .aset-form { display: flex; flex-direction: column; gap: 12px; } .legacy .aset h2 { margin: 0; text-align: center; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); } .legacy .aset-note { margin: 0; color: var(--text); } .legacy .aset-note.is-saved { color: #8fe39b; font-weight: 700; } .legacy .aset label { font: 700 .72rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .legacy .aset-box { display: flex; align-items: center; gap: 10px; } .legacy .aset-box select { flex: 1; } .legacy .aset .aset-save { align-self: center; padding: 1em 2.6em; border: 1px solid #f0735f55; border-radius: 4px; background: linear-gradient(#b3161f, #6e0b10); color: #fff; cursor: pointer; } .legacy .aset .aset-save .aset-lab, .legacy .aset .aset-back .aset-lab { font: 700 .82rem/1 var(--font-display); letter-spacing: .16em; color: inherit; } .legacy .aset .aset-back { align-self: center; color: var(--gold-hi); } } @media (max-width: 640px) { .legacy .aset .xsel { flex: 1; } .legacy .aset .xsel-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #9a7438; border-radius: 4px; background: linear-gradient(#120a08, #0a0605); box-shadow: none; filter: none; font: 400 1rem/1 var(--font-body); letter-spacing: 0; text-transform: none; color: #efe3cc; } .legacy .aset .xsel-list { left: 0; min-width: 100%; } .legacy .aset .xsel-list li { font: 400 .95rem/1.2 var(--font-body); letter-spacing: 0; } } @media (min-width: 641px) { .legacy .aset .xsel-btn { justify-content: flex-start; } } .legacy .aset { max-width: 470px; } /* owner 2026-10-03: smaller, the drawn buttons were too big at 600px */ /* current page in the art bar (owner 2026-10-03): no box, a soft glow behind the word and a short gold line under it */ @media (min-width: 1021px) { .topbar .mainnav .nav-item.is-active .nav-link, .topbar .mainnav .nav-link:hover, .topbar .mainnav .nav-link:focus-visible { background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(255, 150, 60, .22), transparent 75%); box-shadow: none; } .topbar .mainnav .nav-item.is-active .nav-link::after { content: ""; display: block !important; position: absolute; left: 22%; right: 22%; top: 72%; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, #f5d488, transparent); box-shadow: 0 0 6px rgba(255, 170, 60, .7); } } @media (min-width: 1021px) { .topbar .mainnav .nav-item.is-active .nav-link::after { left: 50% !important; right: auto !important; width: 70% !important; transform: translateX(-50%) !important; margin: 0 !important; opacity: 1 !important; } } /* hover in the art bar (owner 2026-10-03): clearly visible, the same gold line as the current page plus a brighter glow */ @media (min-width: 1021px) { .topbar .mainnav .nav-link:hover, .topbar .mainnav .nav-link:focus-visible { background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255, 175, 80, .38), rgba(255, 120, 40, .12) 55%, transparent 80%); } .topbar .mainnav .nav-link:hover::after, .topbar .mainnav .nav-link:focus-visible::after { content: ""; display: block !important; position: absolute; left: 50% !important; right: auto !important; width: 70% !important; transform: translateX(-50%) !important; top: 72%; height: 2px; border-radius: 1px; margin: 0 !important; opacity: 1 !important; background: linear-gradient(90deg, transparent, #fff1c6, transparent); box-shadow: 0 0 8px rgba(255, 190, 80, .9); } } /* News Archive list (2026-10-03) */ .legacy .narc { max-width: 900px; margin: 0 auto; } .legacy .narc-table td a { color: var(--gold-hi); font-weight: 600; text-decoration: none; } .legacy .narc-table td a:hover { text-decoration: underline; } .legacy .narc-table td:nth-child(2) { white-space: nowrap; color: var(--muted); } .legacy .narc-table .narc-num { text-align: right; width: 1%; white-space: nowrap; } .legacy .narc-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .025); } /* News Archive on the owner's slim frame (2026-10-03, Miracle's size): na2-top (title bar + Title/Date header, keeps its shape), one 32px row per post (na2-row-a/b alternate, stretched sideways only), na2-bottom; 1662 art px wide, columns: icon 1-101, title 102-1163, date 1165-1660 */ .legacy .narc { max-width: 900px; margin: 0 auto; } .panel:has(.narc) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy .narc-top { aspect-ratio: 1662 / 147; background: url(images/na2-top.webp) 0 0 / 100% 100% no-repeat; } .legacy .narc-bottom { height: 3px; background: url(images/na2-bottom.webp) 0 0 / 100% 100% no-repeat; } .legacy .narc-list { list-style: none; margin: 0; padding: 0; } .legacy .narc-row { position: relative; height: 32px; background: url(images/na2-row-a.webp) 0 0 / 100% 100% no-repeat; } .legacy .narc-row:nth-child(even) { background-image: url(images/na2-row-b.webp); } .legacy .narc-row:hover { filter: brightness(1.25); } .legacy .narc-ico { position: absolute; left: calc(1 / 1662 * 100%); width: calc(100 / 1662 * 100%); top: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; } .legacy .narc-ico img { width: 16px; height: 16px; image-rendering: pixelated; } .legacy .narc-title, .legacy .narc-date { position: absolute; top: 0; bottom: 2px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/1.2 var(--font-body); } .legacy .narc-title { left: calc(130 / 1662 * 100%); width: calc(1010 / 1662 * 100%); color: var(--gold-hi); text-decoration: none; } .legacy a.narc-title:hover { color: #fff1cf; text-decoration: underline; } .legacy .narc-date { left: calc(1190 / 1662 * 100%); width: calc(460 / 1662 * 100%); font-weight: 400; color: #cdbfa6; } @media (max-width: 640px) { .legacy .narc-title { font-size: .78rem; } .legacy .narc-date { font-size: .68rem; } } /* News Ticker avatar like Miracle's (2026-10-03): the owner's round scroll icon (newsicon2_scroll.png) over the scroll painted in the row art's small box (nt-row.png 1560x50, inner box x 128-162, y 7-41) */ .nt-ico { position: absolute; left: calc(128 / 1560 * 100%); width: calc(34 / 1560 * 100%); top: 14%; height: 68%; object-fit: contain; background: #0b0907; } @media (max-width: 640px) { .nt-ico { position: static; float: left; width: 18px; height: 18px; margin: 9px 0 0 12px; } .nt-row time { padding-left: 34px; } } /* polish pass (2026-10-03, owner asked "does it look professional"): ticker rows a bit taller with readable text and a calm mixed-case date; news posts get a clear ornament between them and a readable date/author line */ @media (min-width: 641px) { .nt-row { aspect-ratio: 2000 / 80; } } .nt-row time { font: 600 max(11px, 1.85cqw)/1 var(--font-body); letter-spacing: .02em; color: #e3c27e; } @media (min-width: 641px) { .nt-text { font-size: max(12px, 2.25cqw); } } .ln-post + .ln-post { margin-top: 34px; padding-top: 30px; border-top: 0; position: relative; } .ln-post + .ln-post::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 170, 96, .65) 25%, rgba(214, 170, 96, .65) 75%, transparent); } .ln-post + .ln-post::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: linear-gradient(135deg, #ff5a4a, #9b0f12); border: 1px solid #e3b866; box-shadow: 0 0 8px rgba(255, 60, 40, .55); } .ln .news-meta { font-size: .8rem; color: #cdbfa6; } .ln .news-meta time { color: #e8c98a; } .ln .news-meta a { color: #f1dca8; } @media (max-width: 640px) { .nt .nt-row time { font-size: .74rem; } .nt .nt-text { font-size: .86rem; line-height: 1.45; } } /* one news post on the News Archive (?subtopic=archive&id=N) and the team's links under the list (2026-10-03) */ .panel:has(.ln-single) { padding: 0; background: none; border: 0; box-shadow: none; } .ln-single .frame-link { display: inline-flex; } .ln-single .news-card { text-align: center; } .ln-single .news-body { text-align: left; } .narc-team { margin: 14px 0 0; text-align: center; } /* News Ticker on the owner's new empty frame (2026-10-03, images/nt2-*.webp cut from the 2000x700 art, 1999 px wide): top = title (233 px), one row per message (82 px: icon box x 81-142, text area 145-1851, plus box 1853-1918, y 13-67), bottom (54 px), nt2-strip = the row's background for the opened message. Replaces the nt-* slices. */ .nt-top { aspect-ratio: 1999 / 233; background-image: url(images/nt2-top.webp); } .nt-bottom { aspect-ratio: 1999 / 54; background-image: url(images/nt2-bottom.webp); } .nt-more { background-image: url(images/nt2-strip.webp); } @media (min-width: 641px) { .nt-row { aspect-ratio: 1999 / 82; background-image: url(images/nt2-row.webp); } .nt-ico { left: calc(81 / 1999 * 100%); width: calc(62 / 1999 * 100%); top: 16%; height: 66%; background: none; padding: 0 .3%; box-sizing: border-box; } .nt-row time { left: calc(165 / 1999 * 100%); width: calc(260 / 1999 * 100%); text-align: left; } .nt-text { left: calc(430 / 1999 * 100%); right: calc(170 / 1999 * 100%); } .nt-more p { padding-left: calc(430 / 1999 * 100%); padding-right: calc(170 / 1999 * 100%); } .nt-plus { left: calc(1856 / 1999 * 100%); width: calc(60 / 1999 * 100%); top: 17%; height: 64%; background: none; display: flex; align-items: center; justify-content: center; color: #f0d9a2; font: 700 max(13px, 2.3cqw)/1 var(--font-body); } .nt-plus::before { content: "+"; } .nt-plus:hover, .nt-plus:focus-visible { filter: none; color: #fff3d6; text-shadow: 0 0 6px rgba(255, 190, 90, .8); } } /* the ticker spans the whole middle column like Miracle's (owner preview, 2026-10-03; was 90% wide) */ .nt { width: 100%; } /* ticker icons are the original 16px Tibia news icons (2026-10-03): kept at their real size, centred in the art's box */ @media (min-width: 641px) { .nt-ico { left: calc(112 / 1999 * 100% - 8px); top: calc(48.8% - 8px); width: 16px; height: 16px; padding: 0; object-fit: fill; image-rendering: pixelated; } } @media (max-width: 640px) { .nt-ico { width: 16px; height: 16px; image-rendering: pixelated; } } /* the header scrolls away with the page, it is no longer pinned (owner, 2026-10-05); relative keeps its stacking order */ .topbar { position: relative; top: auto; } /* Latest News as wide as the News Ticker (owner, 2026-10-05): the ticker's visible frame is art x 45-1954 of 1999, the Latest News side borders art x 83-1474 of 1560, so the frame is 107.1% wide and starts 3.45% further left */ .ln { width: 107.1%; margin-left: -3.45%; margin-top: -4%; } /* -4%: the top spike just meets the ticker's bottom edge */ /* folded older posts end on a whole line (oblivion.js), without the fade (owner, 2026-10-05) */ .news-body.is-folded { -webkit-mask-image: none; mask-image: none; } /* ---------- Lost Account (first step) on the owner's artwork (images/lostaccount.webp, 1517x1014 art px, 2026-10-05) ---------- art boxes: text x 70-1446 y 202-358, labels y 380-426 / 549-597, fields y 440-529 / 609-696, button x 450-1066 y 736-818, note y 863-922. --u = one art pixel. Phones keep the plain form. */ /* "Start again" on the Check your email page looked like plain text: styled like the "send a new code" link next to it */ .legacy .xflow-resend a { color: var(--gold-hi); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .legacy .xflow-resend a:hover { color: #fff1cf; } /* ---------- Download page like miracle74.com's (2026-10-05): Downloads box with the owner's icon, then the FAQ ---------- each box is the owner's panel art (1564 art px wide): a top with the baked title, a middle that repeats down (crossfaded so it tiles) and a bottom */ /* plain boxes like Server Info (2026-10-08; the owner's panel art dl-*.png is no longer used) */ .legacy .dlp { display: flex; flex-direction: column; gap: 18px; } .legacy .dlp-box { position: relative; padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .22); } .legacy .dlp-mid { display: none; } .legacy .dlp-head { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 700 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .legacy .dlp-body { position: relative; z-index: 1; padding: 0; color: var(--text); } .legacy .dlp-body p { margin: 0 0 8px; line-height: 1.6; } .legacy .dlp-name { margin: 0 0 4px; font: 700 1rem/1.3 var(--font-display); letter-spacing: .06em; color: var(--gold-hi); } .legacy .dlp-get { display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; margin: 14px auto 6px; padding: 8px 18px 10px; border-radius: 6px; text-decoration: none; transition: background .15s, box-shadow .15s; } .legacy .dlp-get img { width: 160px; height: auto; filter: drop-shadow(0 0 1px #000) drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); transition: transform .15s; } .legacy .dlp-get:hover, .legacy .dlp-get:focus-visible { outline: none; background: rgba(255, 140, 60, .08); box-shadow: 0 0 18px rgba(255, 90, 40, .25); } .legacy .dlp-get:hover img, .legacy .dlp-get:focus-visible img { transform: translateY(-2px) scale(1.03); } .legacy .dlp-size { margin-top: 6px; font: 600 .9rem/1.2 var(--font-body); color: #e6d8bf; } .legacy .dlp-link { font: 700 .95rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-decoration: underline; text-underline-offset: 4px; } .legacy .dlp-help { text-align: center; font-weight: 600; } .legacy .dlp-body a:not(.dlp-get) { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } .legacy .dlp-faq h3 { margin: 18px 0 6px; font: 700 .95rem/1.3 var(--font-display); letter-spacing: .04em; color: var(--gold-hi); } .legacy .dlp-faq h3:first-child { margin-top: 0; } .legacy .dlp-faq ol, .legacy .dlp-faq ul { margin: 0; padding-left: 24px; line-height: 1.65; } .legacy .dlp-faq li { margin: 2px 0; } .legacy .dlp-faq ul { list-style: none; padding-left: 4px; } .legacy .dlp-faq ul li::before { content: "\2022"; margin-right: 8px; color: var(--ruby-hi); } .legacy .dlp-faq b { color: #f1dca8; } /* ---------- plain frame (owner's art, 2026-10-05): one box for the small message pages, the title written on its empty bar ---------- art 2000 art px wide (pf-top/mid/bot.png cut from plain-frame-source.png; the middle repeats down). Phones: a plain box. */ .panel:has(.pfr) { padding: 0; background: none; border: 0; box-shadow: none; } .legacy .pfr { position: relative; padding: 14px 18px 16px; border: 1px solid rgba(216, 162, 74, .45); border-radius: 6px; background: linear-gradient(180deg, rgba(30, 10, 8, .94), rgba(16, 6, 5, .96)); } .legacy .pfr-title { margin: 0 0 10px; font: 700 1rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); } .legacy .pfr-body { position: relative; z-index: 1; color: var(--text); } .legacy .pfr-body p { margin: 0 0 8px; line-height: 1.6; } .legacy .pfr-body p:last-child { margin-bottom: 0; } .legacy .pfr-body a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 641px) { .legacy .pfr-wrap { container-type: inline-size; } .legacy .pfr { --u: calc(100cqw / 2000); border: 0; border-radius: 0; background: none; min-height: calc(480 * var(--u)); padding: calc(185 * var(--u)) calc(120 * var(--u)) calc(115 * var(--u)); } .legacy .pfr::before, .legacy .pfr::after, .legacy .pfr-mid { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; } .legacy .pfr::before { top: 0; height: calc(200 * var(--u)); background: url(images/pf-top.png?v=1) 0 0 / 100% 100% no-repeat; } .legacy .pfr::after { bottom: 0; height: calc(146 * var(--u)); background: url(images/pf-bot.png?v=1) 0 0 / 100% 100% no-repeat; } .legacy .pfr-mid { top: calc(200 * var(--u)); bottom: calc(146 * var(--u)); background: url(images/pf-mid.png?v=1) 0 0 / 100% auto repeat-y; } .legacy .pfr-title { position: absolute; z-index: 1; left: calc(130 * var(--u)); right: calc(400 * var(--u)); top: calc(70 * var(--u)); height: calc(62 * var(--u)); margin: 0; display: flex; align-items: center; font-size: calc(40 * var(--u)); letter-spacing: .1em; white-space: nowrap; background: linear-gradient(180deg, #fff1c4 15%, #e8b45a 55%, #a8702a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)); } } /* search-only Characters page: no panel behind the framed search art (2026-10-06); the result view keeps it */ #characters.panel:not(:has(.char)) > .char-search { margin-top: 0; } /* ---------- Characters search on the owner's art (charsearch.webp, 2000x584 art px, 2026-10-05) ---------- field box x292-1455 y292-384, button x1486-1871 y287-390; the heading and the button text are painted */ /* Who is Online: walking figures over the art (owner's frames, wio-walk-*.png = 4 frames: step, pass, step, pass; 2026-10-05). Place in % of the 1380x304 top piece; the figure stands in place and only the frames change. */ .wio-walk { position: absolute; background: 0 0 / 400% 100% no-repeat; animation: wio-walk .72s steps(4) infinite; pointer-events: none; } .wio-walk-k { left: 77.43%; top: 35.53%; width: 5.58%; aspect-ratio: 77 / 64; background-image: url(images/wio-walk-knight.png?v=1); } .wio-walk-r { left: 87.25%; top: 36.18%; width: 5.22%; aspect-ratio: 72 / 62; background-image: url(images/wio-walk-rook.png?v=5); animation-delay: -.3s; } .wio-walk-d { left: 58.59%; top: 34.87%; width: 5.29%; aspect-ratio: 73 / 66; background-image: url(images/wio-walk-druid.png?v=3); animation-delay: -.5s; } .wio-walk-p { left: 68.26%; top: 35.53%; width: 4.64%; aspect-ratio: 1; background-image: url(images/wio-walk-paladin.png?v=1); animation-delay: -.15s; } .wio-walk-s { left: 49.24%; top: 36.18%; width: 5.43%; aspect-ratio: 75 / 62; background-image: url(images/wio-walk-sorcerer.png?v=1); animation-delay: -.6s; } @keyframes wio-walk { to { background-position-x: 133.333%; } } @media (prefers-reduced-motion: reduce) { .wio-walk { animation: none; background-position-x: 33.333%; } } /* Houses (2026-10-08): plain table like Highscores; rows are text only, so they are lower */ .legacy .hfx-table td { height: 38px; } .legacy .hfx-table td a { font-weight: 700; color: var(--gold-hi); } /* Latest Deaths (2026-10-08): plain table like Highscores */ .ldx .ld-lvl { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); } .legacy .ldx .ld-by { color: var(--text); } .legacy .ldx .ld-by a { font-weight: 700; color: var(--gold-hi); } .legacy .ldx .ld-by a.ld-pk { color: #ff7a6a; } .legacy .ldx .ld-time { white-space: nowrap; color: #d9c7a4; } .ldx .ld-when-sm { display: none; } /* phones: the date goes under the player's name, and wide tables (Highscores points) scroll sideways */ @media (max-width: 640px) { .legacy .char-box.hsx { padding: 14px 10px 16px; overflow-x: auto; } .ldx th:nth-child(4), .legacy .ldx td.ld-time { display: none; } .hsx-exp th:last-child, .legacy .hsx-exp td.hsx-points { display: none; } .hsx-table th.hsx-num { white-space: normal; } .legacy .hsx-table td, .hsx-table th { padding-left: 4px; padding-right: 4px; } .hsx-rank { width: 32px; } .hsx-outfit { width: 44px; } .hsx-tk th:nth-child(5) { display: table-cell; } /* Top Killers: column 5 is Level (Highscores hides Flag/Vocation there) */ .panel.legacy:has(> .char-box.hsx) { padding-left: 10px; padding-right: 10px; } /* "Distance Fighting" etc. may wrap so the values stay in view */ /* experience list: Level stays, the long experience number goes */ .ldx .ld-when-sm { display: block; margin-top: 2px; font-size: .74rem; color: #d9c7a4; } }