/* Rusti.fi — exact single-server markup pass */ :root { --rd-bg:#0a1118; --rd-panel:#111923; --rd-panel2:#141e29; --rd-border:rgba(255,255,255,.09); --rd-border2:rgba(255,255,255,.14); --rd-text:#f3f6f8; --rd-muted:#96a1ad; --rd-dim:#6f7b87; --rd-accent:#ef4939; --rd-green:#64cf71; --rd-yellow:#e6bb5d; --rd-red:#ff5a5a; --rd-blue:#82a8ff; --rd-purple:#a18cff; --rd-radius:12px; --rd-shadow:0 18px 50px rgba(0,0,0,.20); --rd-shell:1120px; } html{background:var(--rd-bg)} body{color:var(--rd-text);background:radial-gradient(circle at 17% -5%,rgba(239,73,57,.06),transparent 34rem),linear-gradient(180deg,#0b1219 0%,#091017 100%)} #primary.rusto-server-detail{ width:min(calc(100% - 48px),var(--rd-shell));margin-inline:auto;padding:38px 0 76px; display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:18px;row-gap:16px;align-items:stretch; } #primary.rusto-server-detail>h1{ grid-column:1/-1;margin:0 0 8px;max-width:1050px;color:var(--rd-text); font-size:clamp(2rem,4vw,3.15rem);line-height:1.06;font-weight:850;letter-spacing:-.045em;text-wrap:balance; } /* Celebratory full-width banner, shown only when next_wipe_at falls on today's UTC date — bright and high-contrast (near-black text on --rd-green, ~9.7:1, comfortably passes WCAG AAA) rather than the page's usual dark-panel language, specifically so a wipe happening today reads as a distinct, unmissable event rather than just another info row. Deliberately *not* --rd-accent as a fill with light text — that red only manages ~3.6:1 with white, already confirmed elsewhere in this project's dark-theme work to fail WCAG AA. */ #primary.rusto-server-detail>.rusto-wipe-today{ grid-column:1/-1;margin:0;padding:22px 24px;display:flex;align-items:center;justify-content:center;gap:10px; background:var(--rd-green);border-radius:var(--rd-radius);box-shadow:0 10px 28px rgba(100,207,113,.35); color:var(--rd-bg);font-size:1.5rem;font-weight:850;text-align:center; } #primary.rusto-server-detail>.rusto-wipe-today time{font-weight:900} /* top status row */ #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked{ min-height:66px;margin:0;padding:14px 16px;display:flex;align-items:center; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel); border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:inset 0 1px rgba(255,255,255,.025); } #primary.rusto-server-detail>.rusto-server-status{grid-column:span 3;color:#d7dde3;font-size:.9rem;font-weight:650} #primary.rusto-server-detail>.rusto-server-status::before{content:"";width:10px;height:10px;margin-right:9px;flex:0 0 auto;border-radius:50%;background:var(--rd-green);box-shadow:0 0 0 4px rgba(100,207,113,.08)} #primary.rusto-server-detail>.rusto-probe-form{grid-column:span 3;gap:8px;color:var(--rd-muted);font-size:.84rem} #primary.rusto-server-detail>.rusto-probe-form label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:9px} #primary.rusto-server-detail>.rusto-probe-form select{min-width:120px;height:36px;padding:0 32px 0 11px;color:var(--rd-text);background:#0e161f;border:1px solid var(--rd-border2);border-radius:7px;font:inherit;font-weight:650} #primary.rusto-server-detail>.rusto-probe-form button{min-height:36px;padding:0 13px;color:var(--rd-text);background:#18232e;border:1px solid var(--rd-border2);border-radius:7px;font:inherit;font-weight:700;cursor:pointer} #primary.rusto-server-detail>.rusto-server-jitter{grid-column:span 3;font-size:.9rem;font-weight:800} /* rd-muted(#96a1ad) on rd-panel2(#141e29): ~6.4:1, past WCAG AA (4.5:1) — same pairing already verified for .rusto-adjusted-retention above. Left accent border only (no text on it), so no contrast requirement there. */ #primary.rusto-server-detail>.rusto-owner-note{grid-column:1/-1;margin:10px 0 0;padding:12px 16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-left:3px solid var(--rd-blue);border-radius:var(--rd-radius);font-size:.82rem;line-height:1.55} #primary.rusto-server-detail>.rusto-server-jitter::before{content:"Jitter";margin-right:8px;color:var(--rd-muted);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-jitter-excellent{color:var(--rd-green)} #primary.rusto-server-detail>.rusto-jitter-good{color:#93d36a} #primary.rusto-server-detail>.rusto-jitter-fair, #primary.rusto-server-detail>.rusto-jitter-medium{color:var(--rd-yellow)} #primary.rusto-server-detail>.rusto-jitter-poor, #primary.rusto-server-detail>.rusto-jitter-bad, #primary.rusto-server-detail>.rusto-jitter-unstable{color:var(--rd-red)} #primary.rusto-server-detail>.rusto-server-checked{grid-column:span 3;color:var(--rd-muted);font-size:.82rem} #primary.rusto-server-detail>.rusto-server-checked::before{content:"↻";margin-right:8px;color:var(--rd-dim);font-size:1rem} /* players, map, badges */ #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map, #primary.rusto-server-detail>.rusto-server-keywords{ margin:0;min-height:92px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004)),var(--rd-panel); border:1px solid var(--rd-border);border-radius:var(--rd-radius); } #primary.rusto-server-detail>.rusto-server-players{grid-column:span 3;padding:19px 18px;display:flex;flex-direction:column;justify-content:center;color:var(--rd-text);font-size:1.22rem;line-height:1.2;font-weight:850} #primary.rusto-server-detail>.rusto-server-players::before{content:"Players";margin-bottom:8px;color:var(--rd-muted);font-size:.73rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-map{grid-column:span 3;padding:19px 18px;display:flex;flex-direction:column;justify-content:center;color:#c5cdd5;font-size:.9rem;font-style:normal;line-height:1.45} #primary.rusto-server-detail>.rusto-server-map::before{content:"Map";margin-bottom:8px;color:var(--rd-muted);font-size:.73rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-keywords{grid-column:span 6;padding:13px;display:flex;flex-wrap:wrap;align-content:center;gap:9px} #primary.rusto-server-detail .rusto-keyword-badge{min-height:42px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;color:#f8f9fa;background:linear-gradient(180deg,rgba(239,73,57,.20),rgba(239,73,57,.08));border:1px solid rgba(239,73,57,.35);border-radius:9px;font-size:.83rem;line-height:1.05;font-weight:800;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.045)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(2){color:#dcffe1;background:linear-gradient(180deg,rgba(100,207,113,.18),rgba(100,207,113,.07));border-color:rgba(100,207,113,.30)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(3){color:#dfe8ff;background:linear-gradient(180deg,rgba(130,168,255,.17),rgba(130,168,255,.06));border-color:rgba(130,168,255,.30)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(4){color:#eee8ff;background:linear-gradient(180deg,rgba(161,140,255,.17),rgba(161,140,255,.06));border-color:rgba(161,140,255,.30)} /* website + Discord link/hint */ #primary.rusto-server-detail>.rusto-server-website{grid-column:span 4;margin:0;min-height:82px;padding:14px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail .rusto-website-badge{width:100%;min-height:50px;padding:0 16px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;color:#dce6ff;background:linear-gradient(180deg,rgba(130,168,255,.13),rgba(130,168,255,.055));border:1px solid rgba(130,168,255,.25);border-radius:9px;font-size:.89rem;font-weight:800;text-decoration:none} #primary.rusto-server-detail .rusto-website-badge::before{content:"Server website";color:var(--rd-muted);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail .rusto-website-badge::after{content:"↗";color:var(--rd-blue);font-size:1rem} #primary.rusto-server-detail .rusto-website-badge:hover{color:#fff;border-color:rgba(130,168,255,.45);background:linear-gradient(180deg,rgba(130,168,255,.18),rgba(130,168,255,.08))} #primary.rusto-server-detail>.rusto-server-discord-hint{grid-column:span 8;margin:0;min-height:82px;padding:17px 18px;display:flex;align-items:center;color:var(--rd-muted);background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);font-size:.85rem;font-style:italic;line-height:1.55} #primary.rusto-server-detail>.rusto-server-discord-hint code{margin-inline:5px;padding:3px 6px;color:#ffe4a3;background:rgba(230,187,93,.10);border:1px solid rgba(230,187,93,.22);border-radius:5px;font-style:normal} /* .rusto-server-discord is the "Join Discord" badge shown once eligible (ServerInsights::discordLinkFor()) — same row/span as the hint it replaces, so the row still reads as one 12-column line alongside .rusto-server-website. Discord's own brand color ("blurple", #5865f2), matching the plugin's existing .rusto-discord-badge on the list page (assets/server-list.css) rather than inventing a new one. */ #primary.rusto-server-detail>.rusto-server-discord{grid-column:span 8;margin:0;min-height:82px;padding:14px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail .rusto-discord-badge{width:100%;min-height:50px;padding:0 16px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;background:linear-gradient(180deg,#5865f2,#4752c4);border:1px solid rgba(88,101,242,.5);border-radius:9px;font-size:.89rem;font-weight:800;text-decoration:none} #primary.rusto-server-detail .rusto-discord-badge::before{content:"Discord";color:rgba(255,255,255,.75);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail .rusto-discord-badge::after{content:"↗";font-size:1rem} #primary.rusto-server-detail .rusto-discord-badge:hover{background:linear-gradient(180deg,#6570f5,#525dd6)} /* connection + tracked date */ #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-dates{min-height:78px;margin:0;padding:16px 18px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail>.rusto-server-connect{grid-column:span 6;color:var(--rd-muted)} #primary.rusto-server-detail>.rusto-server-connect code{margin-left:9px;padding:8px 10px;color:#fff;background:#0d151e;border:1px solid var(--rd-border);border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem;font-weight:700} #primary.rusto-server-detail>.rusto-server-dates{grid-column:span 6;color:#cbd2d9;font-size:.88rem} #primary.rusto-server-detail>.rusto-server-dates::before{content:"Tracked since";margin-right:10px;color:var(--rd-muted);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} /* Next/last wipe facts — only rendered when the underlying data exists (see the template), so either can be absent; same panel language as .rusto-server-connect/.rusto-server-dates above rather than a new visual pattern. The *today* case is covered by .rusto-wipe-today above instead of this pair — see the template's own is_wipe_today guard. */ #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe{min-height:60px;margin:0;padding:16px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;grid-column:span 6;color:#cbd2d9;font-size:.88rem;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail>.rusto-server-next-wipe time, #primary.rusto-server-detail>.rusto-server-last-wipe time{color:var(--rd-text);font-weight:700} .rusto-wipe-confidence{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-radius:999px;padding:.15rem .55rem} .rusto-wipe-confidence-high{background:linear-gradient(180deg,#8c302c,#702522);color:#fff} .rusto-wipe-confidence-predicted{background:transparent;color:var(--rd-muted);border:1px solid var(--rd-border2)} /* free-text "Server info" block (A2S_RULES description) — full-width long-form content panel, same family as the connect/dates panels above but roomier line-height for prose. Its own

is nested *inside* this div (not a direct child of #primary), so it's styled by the scoped rule below rather than the bare `>h2` rule further down (which every other top-level section heading uses). */ #primary.rusto-server-detail>.rusto-server-info{grid-column:1/-1;margin:0;padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);color:#c9d1d9;line-height:1.7} #primary.rusto-server-detail>.rusto-server-info h2{margin:0 0 12px;color:var(--rd-text);font-size:1rem;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>.rusto-server-info p{margin:0} /* FAQ block — same nested-container/nested-h2 pattern as .rusto-server-info above, for the same reason (its own heading, not a top-level section heading). AEO-facing content: real

questions the way a visitor would search them, plain-language answers immediately after — see Servers/ServerSeo.php's faqItems(), also the source for this section's matching FAQPage JSON-LD. */ #primary.rusto-server-detail>.rusto-faq{grid-column:1/-1;margin:0;padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow)} #primary.rusto-server-detail>.rusto-faq h2{margin:0 0 16px;color:var(--rd-text);font-size:1rem;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>.rusto-faq .rusto-faq-item{padding:14px 0;border-top:1px solid var(--rd-border)} #primary.rusto-server-detail>.rusto-faq .rusto-faq-item:first-of-type{border-top:none;padding-top:0} #primary.rusto-server-detail>.rusto-faq h3{margin:0 0 6px;color:var(--rd-text);font-size:.92rem;font-weight:700} #primary.rusto-server-detail>.rusto-faq p{margin:0;color:var(--rd-muted);font-size:.88rem;line-height:1.6} /* charts — the existing markup is h2 + svg + h2 + svg. Deliberately full-width/stacked, not a 1/7 + 7/-1 side-by-side split: CSS Grid's auto-placement cursor doesn't pair interleaved same-column-span items the way it looks like it should — tracing the algorithm, the *second* heading's column-start (7) isn't less than the cursor's column position after the *first* chart is placed, so the engine slots that heading into the first chart's row instead of the second chart's, leaving the jitter chart orphaned a row below with a gap beside it. Full-width avoids the auto-placement cursor logic entirely — each item just takes the next row, in document order, with guaranteed correct heading-above-its-own-chart pairing. */ #primary.rusto-server-detail>h2{grid-column:1/-1;margin:22px 0 0;color:var(--rd-text);font-size:1rem;line-height:1.3;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>.rusto-chart{grid-column:1/-1;width:100%;height:auto;min-height:270px;padding:18px;background-color:var(--rd-panel);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 25%,20% 100%;border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);overflow:visible} #primary.rusto-server-detail>.rusto-chart text{fill:#8e99a5!important;font-family:inherit} #primary.rusto-server-detail>.rusto-chart polyline{stroke:var(--rd-accent)!important;stroke-width:2.2!important;vector-effect:non-scaling-stroke;filter:drop-shadow(0 3px 5px rgba(239,73,57,.18))} /* history */ #primary.rusto-server-detail>h2.rusto-recent-history-heading{grid-column:1/-1;margin-top:28px;font-size:1.12rem} /* rd-yellow(#e6bb5d) on rd-panel2(#141e29): ~9.3:1, well past WCAG AA (4.5:1) for this small-text pill. */ .rusto-admin-only-badge{display:inline-block;margin-left:6px;padding:2px 8px;color:var(--rd-yellow);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle} /* rd-muted(#96a1ad) on rd-panel2(#141e29): ~6.4:1; rd-text(#f3f6f8) on the same background: ~15.5:1 — both comfortably past WCAG AA (4.5:1). */ #primary.rusto-server-detail>.rusto-adjusted-retention{grid-column:1/-1;margin:10px 0 0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:var(--rd-radius);font-size:.78rem} .rusto-adjusted-retention-figure{display:inline-flex;align-items:baseline;gap:5px;text-transform:uppercase;font-weight:700;letter-spacing:.04em} .rusto-adjusted-retention-figure strong{color:var(--rd-text);font-size:1rem;font-weight:800;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums} #primary.rusto-server-detail>.rusto-server-history, #primary.rusto-server-detail>.rusto-wipe-history{grid-column:1/-1;width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;color:#dce2e7;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);font-size:.86rem} #primary.rusto-server-detail>.rusto-server-history thead th, #primary.rusto-server-detail>.rusto-wipe-history thead th{padding:13px 16px;color:#a8b2bd;background:#151f29;border-bottom:1px solid var(--rd-border);font-size:.72rem;line-height:1.2;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-history tbody td, #primary.rusto-server-detail>.rusto-wipe-history tbody td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums} #primary.rusto-server-detail>.rusto-server-history tbody tr:last-child td, #primary.rusto-server-detail>.rusto-wipe-history tbody tr:last-child td{border-bottom:0} #primary.rusto-server-detail>.rusto-server-history tbody tr:hover, #primary.rusto-server-detail>.rusto-wipe-history tbody tr:hover{background:rgba(255,255,255,.025)} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(2){position:relative;padding-left:32px;color:#a4e0ac;font-weight:700} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(2)::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--rd-green);transform:translateY(-50%)} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(3){font-weight:700} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(4){font-weight:800} #primary.rusto-server-detail>.rusto-wipe-history tbody td:nth-child(2){font-weight:700} #primary.rusto-server-detail a:focus-visible, #primary.rusto-server-detail button:focus-visible, #primary.rusto-server-detail select:focus-visible{outline:2px solid var(--rd-accent);outline-offset:3px} @media(max-width:900px){ #primary.rusto-server-detail{grid-template-columns:repeat(6,minmax(0,1fr))} #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked, #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map{grid-column:span 3} #primary.rusto-server-detail>.rusto-server-keywords, #primary.rusto-server-detail>.rusto-server-website, #primary.rusto-server-detail>.rusto-server-discord, #primary.rusto-server-detail>.rusto-server-discord-hint, #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-dates, #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe, #primary.rusto-server-detail>.rusto-server-history{grid-column:1/-1} } @media(max-width:620px){ #primary.rusto-server-detail{width:min(calc(100% - 28px),var(--rd-shell));padding-top:26px;grid-template-columns:1fr;row-gap:12px} #primary.rusto-server-detail>h1, #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked, #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map, #primary.rusto-server-detail>.rusto-server-keywords, #primary.rusto-server-detail>.rusto-server-website, #primary.rusto-server-detail>.rusto-server-discord, #primary.rusto-server-detail>.rusto-server-discord-hint, #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-dates, #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe, #primary.rusto-server-detail>.rusto-server-history{grid-column:1} #primary.rusto-server-detail>h1{font-size:clamp(1.75rem,9vw,2.45rem)} #primary.rusto-server-detail>.rusto-wipe-today{font-size:1.15rem;padding:16px 18px} #primary.rusto-server-detail>.rusto-probe-form label{align-items:flex-start;flex-direction:column} #primary.rusto-server-detail>.rusto-probe-form select{width:100%} #primary.rusto-server-detail .rusto-keyword-badge{flex:1 1 calc(50% - 9px)} #primary.rusto-server-detail>.rusto-server-connect{align-items:flex-start;flex-direction:column;gap:9px} #primary.rusto-server-detail>.rusto-server-connect code{margin-left:0;max-width:100%;overflow-wrap:anywhere} #primary.rusto-server-detail>.rusto-chart{min-height:220px;padding:12px} #primary.rusto-server-detail>.rusto-server-history, #primary.rusto-server-detail>.rusto-wipe-history{display:block;overflow-x:auto;white-space:nowrap} }