Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* ============================================================
Sinfar Wiki Visual System v3.0
Unified Common.css Framework
Scope doctrine:
- New/refit pages use: <div class="sf-page">
- Legacy pages may still use .sinfar-page / .sf-card / .sf-heading
============================================================ */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
--sf-bg-page: #0f141b;
--sf-bg-shell: #11161d;
--sf-bg-panel: rgba(18, 14, 12, .78);
--sf-bg-panel-solid: #181214;
--sf-bg-panel-soft: rgba(216, 180, 106, .08);
--sf-bg-hero: linear-gradient(135deg, #21150f, #3a2417);
--sf-border: rgba(216, 180, 106, .28);
--sf-border-strong: rgba(216, 180, 106, .48);
--sf-border-muted: rgba(244, 239, 230, .09);
--sf-text: #f4efe6;
--sf-text-muted: #c9bda9;
--sf-gold: #d8b46a;
--sf-gold-bright: #f0d28a;
--sf-link: #8fc6ff;
--sf-link-hover: #b8d6ff;
--sf-red: #9f4b3e;
--sf-green: #2f5d3a;
--sf-blue: #334e7a;
--sf-purple: #60456f;
--sf-radius-sm: 7px;
--sf-radius-md: 10px;
--sf-gap: 8px;
}
/* ============================================================
2. SOVEREIGN PAGE SHELL
============================================================ */
.sf-page,
.sinfar-page {
background: var(--sf-bg-shell);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 16px;
line-height: 1.45;
font-size: 14px;
box-shadow: 0 0 22px rgba(0,0,0,.35);
}
.sf-page *,
.sinfar-page * {
box-sizing: border-box;
}
.sf-page a,
.sf-page a:visited,
.sf-page a.external,
.sf-page a.external:visited,
.sinfar-page a,
.sinfar-page a:visited,
.sinfar-page a.external,
.sinfar-page a.external:visited {
color: var(--sf-link);
}
.sf-page a:hover,
.sinfar-page a:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}
.sf-page code,
.sinfar-page code {
background: #120d10;
color: var(--sf-gold-bright);
border: 1px solid var(--sf-border);
border-radius: 4px;
padding: 1px 4px;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
.sf-page h1,
.sf-page h2,
.sf-page h3,
.sinfar-page h1,
.sinfar-page h2,
.sinfar-page h3 {
color: var(--sf-gold-bright);
}
.sf-section-title,
.sf-heading {
color: var(--sf-gold-bright);
border-bottom: 1px solid var(--sf-border-strong);
margin: 18px 0 8px;
padding-bottom: 3px;
font-size: 1.45rem;
line-height: 1.2;
}
.sf-subheading {
color: var(--sf-gold-bright);
margin: 10px 0 6px;
font-size: 1.15rem;
}
.sf-muted {
color: var(--sf-text-muted);
}
.sf-label,
.sf-name {
color: var(--sf-gold-bright);
font-weight: 700;
}
.sf-center {
text-align: center;
}
/* ============================================================
4. HEROES
============================================================ */
.sf-hero,
.sf-hero-compact {
background: var(--sf-bg-hero);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius-md);
padding: 14px 18px;
margin: 0 0 12px;
text-align: center;
}
.sf-hero h1,
.sf-hero-compact h1,
.sf-title {
color: var(--sf-gold-bright);
margin: 0 0 4px;
font-size: 1.85rem;
line-height: 1.15;
}
.sf-hero p,
.sf-hero-compact p,
.sf-subtitle {
color: var(--sf-text);
margin: 0;
}
.sf-eyebrow {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
font-weight: 800;
}
.sf-hero-main {
padding: 22px;
}
.sf-hero-main h1 {
font-size: 2.35rem;
}
/* ============================================================
5. GRIDS / STATUS TILES
============================================================ */
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
display: grid;
gap: var(--sf-gap);
margin-bottom: 14px;
}
.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4,
.sf-status-grid,
.sf-start-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-status-grid > div,
.sf-start-status > div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
}
.sf-status-grid b,
.sf-start-status b {
color: var(--sf-gold-bright);
}
.sf-status-grid span,
.sf-start-status span {
color: var(--sf-text);
}
/* ============================================================
6. QUICKBARS / INDEX GRIDS
============================================================ */
.sf-quickbar,
.sf-index-grid {
display: grid;
gap: var(--sf-gap);
margin: 0 0 14px;
}
.sf-quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sf-index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sf-quickbar > div,
.sf-index-grid > div,
.sf-pathline {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 8px 10px;
color: var(--sf-text);
}
.sf-quickbar b,
.sf-index-grid b {
color: var(--sf-gold-bright);
}
/*
============================================================
6A. REFERENCE MANUAL LAYOUT
Reusable side directory for long technical documentation.
============================================================ */
.sf-manual-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.sf-manual-content {
min-width: 0;
}
.sf-manual-content [id] {
scroll-margin-top: 18px;
}
.sf-manual-toc {
position: sticky;
top: 12px;
max-height: calc(100vh - 24px);
overflow-y: auto;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
padding: 12px;
}
.sf-manual-toc-title {
color: var(--sf-gold-bright);
font-size: 1rem;
font-weight: 900;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--sf-border-strong);
}
.sf-manual-toc-group {
color: var(--sf-gold);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
margin: 12px 0 4px;
}
.sf-manual-toc a,
.sf-manual-toc a:visited {
display: block;
padding: 5px 1px;
color: var(--sf-link);
border-bottom: 1px solid var(--sf-border-muted);
font-size: .88rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}
.sf-manual-toc a:hover {
color: var(--sf-link-hover);
text-decoration: none;
}
.sf-manual-example {
background: rgba(216,180,106,.06);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
margin: 7px 0 9px;
}
.sf-manual-example > :first-child {
margin-top: 0;
}
.sf-manual-example > :last-child {
margin-bottom: 0;
}
.sf-color-swatch {
display: inline-block;
width: 22px;
height: 14px;
margin-right: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 3px;
vertical-align: -2px;
}
@media screen and (max-width: 900px) {
.sf-manual-layout {
grid-template-columns: 1fr;
}
.sf-manual-toc {
position: static;
max-height: none;
}
}
/*
===========================================================
7. DECISION PANELS
============================================================ */
.sf-decision-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: var(--sf-gap);
margin-bottom: 14px;
}
.sf-decision,
.sf-card,
.sf-panel {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-md);
color: var(--sf-text);
padding: 12px;
}
.sf-decision-primary {
border-color: rgba(240,210,138,.58);
background: linear-gradient(135deg, rgba(60,38,20,.88), rgba(18,14,12,.78));
}
.sf-decision-kicker {
color: var(--sf-gold);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .07em;
font-weight: 800;
}
.sf-decision h3 {
color: var(--sf-gold-bright);
margin: 4px 0 6px;
}
.sf-decision p {
margin: 0 0 10px;
color: var(--sf-text);
}
/* ============================================================
8. ACTION LISTS / BUTTONS
============================================================ */
.sf-action-list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: grid;
gap: 8px;
}
.sf-action-list li {
margin: 0;
padding: 0;
}
.sf-action-list a,
.sf-action-list a:visited,
.sf-action-list a.external,
.sf-action-list a.external:visited {
display: block;
width: 100%;
background: rgba(216,180,106,.10);
border: 1px solid rgba(216,180,106,.32);
border-radius: 7px;
padding: 8px 11px;
color: #8fc6ff;
font-weight: 800;
text-align: left;
text-decoration: none;
}
.sf-action-list a:hover,
.sf-action-list a.external:hover {
background: rgba(216,180,106,.16);
border-color: rgba(240,210,138,.48);
color: #b8d6ff;
text-decoration: none;
}
/* ============================================================
9. TABLES
============================================================ */
.sf-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
color: var(--sf-text);
margin-bottom: 12px;
}
.sf-table th {
color: var(--sf-gold-bright);
background: rgba(216,180,106,.14);
border-bottom: 1px solid var(--sf-border-strong);
padding: 8px 10px;
text-align: left;
}
.sf-table td {
color: var(--sf-text);
border-bottom: 1px solid var(--sf-border-muted);
padding: 7px 10px;
vertical-align: top;
}
.sf-table tr:last-child td {
border-bottom: 0;
}
.sf-table-scroll {
width: 100%;
overflow-x: auto;
margin-bottom: 12px;
}
.sf-table-scroll .sf-table {
min-width: 760px;
margin-bottom: 0;
}
.sf-value,
.sf-good {
text-align: center;
}
.sf-value {
color: #f4c96b;
}
.sf-good {
color: #9fe6bd;
}
/* Standard table column helpers */
.sf-channel-table th:nth-child(1),
.sf-channel-table td:nth-child(1) { width: 14%; }
.sf-channel-table th:nth-child(2),
.sf-channel-table td:nth-child(2) { width: 31%; }
.sf-channel-table th:nth-child(3),
.sf-channel-table td:nth-child(3) { width: 37%; }
.sf-channel-table th:nth-child(4),
.sf-channel-table td:nth-child(4) { width: 18%; }
.sf-setup-table th:nth-child(1),
.sf-setup-table td:nth-child(1) { width: 24%; }
.sf-setup-table th:nth-child(2),
.sf-setup-table td:nth-child(2) { width: 52%; }
.sf-setup-table th:nth-child(3),
.sf-setup-table td:nth-child(3) { width: 24%; }
/* ============================================================
10. BADGES
============================================================ */
.sf-badge {
display: inline-block;
border-radius: 999px;
padding: 2px 7px;
margin: 1px 2px 1px 0;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}
.sf-badge-ic { background: #2f5d3a; color: #eaffef; }
.sf-badge-ooc { background: #334e7a; color: #eef4ff; }
.sf-badge-dm { background: #6f3b3b; color: #fff0f0; }
.sf-badge-range { background: #5f4c27; color: #fff2c2; }
.sf-badge-area { background: #60456f; color: #f7eaff; }
.sf-badge-support { background: #4e5563; color: #f0f3f8; }
.sf-badge-best { background: #6a5423; color: #fff0bd; }
/* ============================================================
11. ALERTS / NOTES / RULES
============================================================ */
.sf-note,
.sf-alert,
.sf-warning,
.sf-rule {
color: var(--sf-text);
border-radius: var(--sf-radius-sm);
padding: 8px 11px;
margin: 8px 0;
}
.sf-note {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-left: 4px solid var(--sf-gold);
}
.sf-alert,
.sf-warning {
background: rgba(94,63,18,.35);
border: 1px solid rgba(216,180,106,.24);
border-left: 4px solid #d8a447;
}
.sf-alert b,
.sf-warning b {
display: block;
color: var(--sf-gold-bright);
margin-bottom: 3px;
}
.sf-alert-info {
background: rgba(38,58,92,.34);
border-left-color: #6fa8dc;
}
.sf-alert-warning {
background: rgba(94,63,18,.35);
border-left-color: #d8a447;
}
.sf-alert-danger,
.sf-note--red {
background: rgba(80,30,25,.30);
border-left-color: var(--sf-red);
}
.sf-rule {
border-left: 4px solid var(--sf-red);
background: rgba(80,30,25,.30);
}
/* ============================================================
12. PROGRESS LINES
============================================================ */
.sf-progress-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sf-gap);
margin: 0 0 14px;
}
.sf-progress-line div {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 8px;
text-align: center;
}
.sf-progress-line b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
line-height: 24px;
background: rgba(216,180,106,.24);
color: var(--sf-gold-bright);
margin-bottom: 4px;
}
.sf-progress-line span {
display: block;
color: var(--sf-text);
font-size: .88rem;
}
/* ============================================================
13. CODE / SCRIPTING DOCS
============================================================ */
.sf-codeblock,
.sf-codebox,
.sf-page pre,
.sinfar-page pre {
background: #120d10;
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 10px 12px;
overflow-x: auto;
line-height: 1.45;
}
.sf-codeblock code,
.sf-codebox code,
.sf-page pre code,
.sinfar-page pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-text);
}
/*
============================================================
14. IMAGES / SCREENSHOTS
============================================================ */
.sf-img-frame {
background: var(--sf-bg-panel);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 6px;
margin: 8px 0 12px;
}
.sf-img-frame img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/*
============================================================
MAIN PAGE IMAGE SLOTS
============================================================ */
.sf-img-slot{
position:relative;
display:block;
width:100%;
overflow:hidden;
border-radius:8px;
border:1px solid var(--sf-border);
background:#120d10;
}
.sf-main-page .sf-journey-img{
aspect-ratio:16/9;
margin:0 0 14px;
}
.sf-main-page .sf-feature-img{
aspect-ratio:16/9;
margin:0 0 12px;
}
.sf-img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* ============================================================
15. CHAT CHANNEL COLOR LOCKS
Match in-game channel color identity.
============================================================ */
.sf-chan {
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.sf-chan-shout { color: #feef50; }
.sf-chan-dm { color: #f67271; }
.sf-chan-event { color: #ab23f2; }
.sf-chan-action { color: #b56a23; }
.sf-chan-ooc { color: #b1a2bd; }
.sf-chan-pvp { color: #fe5f2e; }
.sf-chan-sex { color: #f520e1; }
.sf-chan-build { color: #b7f520; }
.sf-chan-ffa { color: #20bff0; }
.sf-chan-talk { color: #fefefe; }
.sf-chan-whisper { color: #b0b0b0; }
.sf-chan-quiet { color: #777777; }
.sf-chan-silent { color: #666666; }
.sf-chan-yell { color: #d92324; }
.sf-chan-party { color: #fefefe; }
/* ============================================================
16. FOOTERS
============================================================ */
.sf-footerlinks,
.sf-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--sf-border);
color: var(--sf-gold);
}
.sf-footer {
text-align: center;
background: #120d10;
padding: 12px 14px;
}
/* ============================================================
17. LEGACY COMPATIBILITY
Keeps older remaster pages readable without preserving chaos.
============================================================ */
.sf-card--gold,
.sf-table--gold {
background: var(--sf-bg-panel);
border-color: var(--sf-border);
}
.sf-card--green,
.sf-table--green {
background: rgba(17,26,18,.82);
border-color: rgba(68,107,53,.72);
}
.sf-card--blue,
.sf-table--blue {
background: rgba(16,24,32,.82);
border-color: rgba(52,87,122,.72);
}
.sf-card--red,
.sf-table--red {
background: rgba(26,16,16,.82);
border-color: rgba(122,52,47,.72);
}
.sf-card--purple,
.sf-table--purple {
background: rgba(25,17,29,.82);
border-color: rgba(91,59,120,.72);
}
.sf-heading--gold { color: var(--sf-gold-bright); border-bottom-color: var(--sf-border); }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }
.sf-docket {
width: 100%;
background: var(--sf-bg-panel);
color: var(--sf-text);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
margin: 9px 0 8px;
}
.sf-docket th {
background: rgba(216,180,106,.14);
color: var(--sf-gold-bright);
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--sf-border);
}
.sf-docket td {
background: rgba(18,14,12,.72);
color: var(--sf-text);
padding: 10px 12px;
}
/* ============================================================
18. LISTS
============================================================ */
.sf-page ul,
.sf-page ol,
.sinfar-page ul,
.sinfar-page ol {
margin: 6px 0 8px;
padding-left: 22px;
}
.sf-page li,
.sinfar-page li {
margin: 2px 0;
}
/* ============================================================
19. MOBILE RULES
============================================================ */
@media screen and (max-width: 900px) {
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sf-decision-grid,
.sf-index-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 720px) {
.sf-page,
.sinfar-page {
padding: 12px;
}
.sf-quickbar,
.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5,
.sf-status-grid,
.sf-start-status,
.sf-progress-line {
grid-template-columns: 1fr;
}
.sf-table {
table-layout: auto;
font-size: .92rem;
}
.sf-channel-table th:nth-child(n),
.sf-channel-table td:nth-child(n),
.sf-setup-table th:nth-child(n),
.sf-setup-table td:nth-child(n) {
width: auto;
}
}
/* ============================================================
Sinfar Main Page Module v1.0
Purpose: cinematic front-door layout for Main Page only.
Requires wrapper: <div class="sf-page sf-main-page">
============================================================ */
.sf-main-page {
max-width: 1320px;
margin: 0 auto;
}
/* ---------- Cinematic Main Hero ---------- */
.sf-main-page .sf-hero-main {
position: relative;
overflow: hidden;
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 64px 48px;
border-radius: 12px;
background: #0b0d11;
text-align: center;
}
}
/* ---------- Main Page Hero Artwork ---------- */
.sf-main-page .sf-hero-art-slot {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
border: 0;
border-radius: inherit;
}
/* Simple flat readability overlay — no blur or filter */
.sf-main-page .sf-hero-art-slot::after {
content: "";
position: absolute;
inset: 0;
background: rgba(5, 8, 12, .48);
pointer-events: none;
}
/* Control the MediaWiki image and its wrapper */
.sf-main-page .sf-hero-art-slot > a,
.sf-main-page .sf-hero-art-slot > span {
display: block;
width: 100%;
height: 100%;
}
.sf-main-page .sf-hero-art-slot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 52%;
}
/* Keep all text above the artwork */
.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
position: relative;
z-index: 1;
}
.sf-main-page .sf-hero-main h1 {
text-shadow:
0 2px 3px rgba(0,0,0,.95),
0 0 14px rgba(0,0,0,.78);
}
.sf-main-page .sf-hero-main .sf-eyebrow,
.sf-main-page .sf-hero-main p {
text-shadow: 0 2px 4px rgba(0,0,0,.95);
}
.sf-main-page .sf-hero-main h1 {
font-size: 3.15rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.sf-main-page .sf-hero-main p {
max-width: 680px;
font-size: 1.08rem;
}
/* ---------- Main Page Journey Cards ---------- */
.sf-main-page .sf-decision-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.sf-main-page .sf-decision {
min-height: 300px;
padding: 22px;
}
.sf-main-page .sf-decision h3 {
font-size: 1.45rem;
}
/* ---------- Main Page Feature Cards ---------- */
.sf-main-page .sf-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.sf-main-page .sf-card {
min-height: 190px;
padding: 20px;
}
.sf-main-page .sf-card h3 {
color: var(--sf-gold-bright);
margin: 0 0 8px;
font-size: 1.25rem;
}
.sf-main-page .sf-card p {
margin: 0 0 10px;
}
/* ---------- Main Page Action Links ---------- */
.sf-main-page .sf-action-links {
margin-top: 12px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1.8;
}
.sf-main-page .sf-action-links a,
.sf-main-page .sf-action-links a:visited,
.sf-main-page .sf-action-links a.external,
.sf-main-page .sf-action-links a.external:visited {
background: transparent;
border: 0;
padding: 0;
color: var(--sf-link);
font-weight: 800;
text-decoration: none;
}
.sf-main-page .sf-action-links a:hover,
.sf-main-page .sf-action-links a.external:hover {
color: var(--sf-link-hover);
text-decoration: underline;
}
/* ---------- Community Strip ---------- */
.sf-main-page .sf-quickbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
/* ---------- Main Page Mobile ---------- */
@media screen and (max-width: 980px) {
.sf-main-page .sf-decision-grid,
.sf-main-page .sf-grid-3,
.sf-main-page .sf-quickbar {
grid-template-columns: 1fr;
}
.sf-main-page .sf-hero-main {
min-height: 320px;
padding: 48px 24px;
}
.sf-main-page .sf-hero-main h1 {
font-size: 2.35rem;
}
}
/* =========================================================
COMMUNITY LINKS — DISCORD / PATREON
========================================================= */
.community-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 8px;
width: 100%;
margin: 8px 0;
}
.community-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
box-sizing: border-box;
padding: 0 16px;
overflow: hidden;
border: 0;
border-radius: 6px;
}
.community-link img {
display: block;
width: auto;
height: 30px;
max-width: 82%;
margin: 0 auto;
object-fit: contain;
transition: transform 250ms ease;
}
.community-link:hover img {
transform: scale(1.1);
}
.community-link--discord {
background-color: #5865F2;
}
.community-link--patreon {
background-color: #FF424D;
}
@media screen and (max-width: 520px) {
.community-link-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
MAIN PAGE — COLORED CARD SYSTEM
Static layered gradients only. No glow, blur, or filters.
============================================================ */
/* ---------- Shared Card Construction ---------- */
.sf-main-page .sf-journey-card,
.sf-main-page .sf-feature-card {
position: relative;
overflow: hidden;
isolation: isolate;
background-color: #181214;
background-image:
linear-gradient(
135deg,
rgba(255,255,255,.025) 0%,
transparent 34%,
rgba(0,0,0,.12) 70%,
rgba(0,0,0,.24) 100%
),
repeating-linear-gradient(
118deg,
rgba(255,255,255,.014) 0,
rgba(255,255,255,.014) 1px,
transparent 1px,
transparent 7px
);
border: 1px solid var(--sf-card-border, var(--sf-border));
}
/* Subtle inner line without glow or shadow. */
.sf-main-page .sf-journey-card::after,
.sf-main-page .sf-feature-card::after {
content: "";
position: absolute;
inset: 4px;
z-index: -1;
pointer-events: none;
border: 1px solid rgba(244,239,230,.035);
border-radius: 6px;
}
/* ---------- Card Header ---------- */
.sf-main-page .sf-card-head {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
margin: -22px -22px 14px;
padding: 10px 16px;
background-color: var(--sf-card-head, rgba(216,180,106,.10));
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.035),
transparent 48%,
rgba(0,0,0,.16)
),
repeating-linear-gradient(
120deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 6px
);
border-bottom: 1px solid var(--sf-card-border, var(--sf-border));
}
.sf-main-page .sf-card-head h3 {
flex: 1;
min-width: 0;
margin: 0;
color: var(--sf-gold-bright);
font-size: 1.25rem;
line-height: 1.15;
}
/* ---------- Header Icon Slot ---------- */
.sf-main-page .sf-card-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
}
.sf-main-page .sf-card-icon img,
.sf-main-page .sf-card-icon .mw-file-element {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
}
/* ---------- Journey Cards ---------- */
.sf-main-page .sf-journey-card {
--sf-card-border: rgba(216,180,106,.42);
min-height: 100%;
}
/* ---------- Featured System Cards ---------- */
.sf-main-page .sf-feature-card {
--sf-card-border: rgba(216,180,106,.34);
display: flex;
flex-direction: column;
min-height: 100%;
padding: 14px;
}
.sf-main-page .sf-feature-card .sf-card-head {
min-height: 40px;
margin: -14px -14px 12px;
padding: 8px 11px;
gap: 8px;
}
.sf-main-page .sf-feature-card .sf-card-head h3 {
font-size: 1.02rem;
}
.sf-main-page .sf-feature-card .sf-card-icon {
width: 23px;
height: 23px;
}
.sf-main-page .sf-feature-card .sf-action-links {
margin-top: auto;
padding-top: 8px;
}
/* ============================================================
CATEGORY THEMES
============================================================ */
/* New arrivals — crimson */
.sf-main-page .sf-theme-crimson {
--sf-card-head: rgba(83,20,20,.92);
--sf-card-border: rgba(155,69,57,.70);
background-color: #1b1011;
}
/* Player resources — midnight blue */
.sf-main-page .sf-theme-blue {
--sf-card-head: rgba(18,46,74,.94);
--sf-card-border: rgba(62,104,143,.72);
background-color: #101922;
}
/* Builder resources — forest green */
.sf-main-page .sf-theme-green {
--sf-card-head: rgba(29,65,38,.94);
--sf-card-border: rgba(65,110,67,.72);
background-color: #111a14;
}
/* Community — royal purple */
.sf-main-page .sf-theme-purple {
--sf-card-head: rgba(67,32,79,.94);
--sf-card-border: rgba(104,68,124,.72);
background-color: #19121d;
}
/* Housing — slate blue */
.sf-main-page .sf-theme-slate {
--sf-card-head: rgba(40,57,72,.94);
--sf-card-border: rgba(76,102,123,.72);
background-color: #141a1f;
}
/* Businesses — warm tavern bronze */
.sf-main-page .sf-theme-bronze {
--sf-card-head: rgba(83,52,24,.94);
--sf-card-border: rgba(133,89,43,.72);
background-color: #1d1610;
}
/* Character development — arcane violet */
.sf-main-page .sf-theme-arcane {
--sf-card-head: rgba(68,42,88,.94);
--sf-card-border: rgba(104,70,132,.72);
background-color: #19131e;
}
/* Dungeon running — deep teal */
.sf-main-page .sf-theme-teal {
--sf-card-head: rgba(21,62,66,.94);
--sf-card-border: rgba(48,104,108,.72);
background-color: #101b1c;
}
/* PvP — battle red */
.sf-main-page .sf-theme-battle {
--sf-card-head: rgba(92,31,26,.94);
--sf-card-border: rgba(145,65,54,.74);
background-color: #1c1110;
}
/* Custom scripting — dark builder green */
.sf-main-page .sf-theme-script {
--sf-card-head: rgba(37,67,42,.94);
--sf-card-border: rgba(71,111,73,.72);
background-color: #121a13;
}
/* ============================================================
REFERENCE MANUAL — DEFINITIVE WIDTH CONTAINMENT
Keeps later source examples from widening the entire manual.
============================================================ */
.sf-manual-page,
.sf-manual-layout,
.sf-manual-content,
.sf-manual-toc {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.sf-manual-layout {
width: 100%;
}
.sf-manual-content {
width: 100%;
overflow: hidden;
}
/* Every direct manual component must be permitted to shrink. */
.sf-manual-content > *,
.sf-manual-example,
.sf-manual-page .sf-card,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert,
.sf-manual-page .sf-quickbar,
.sf-manual-page .sf-start-status,
.sf-manual-page .sf-progress-line,
.sf-manual-page .sf-img-frame,
.sf-manual-page .sf-footerlinks {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Ordinary prose and callout content must wrap. */
.sf-manual-page p,
.sf-manual-page li,
.sf-manual-page dd,
.sf-manual-page span,
.sf-manual-page .sf-note,
.sf-manual-page .sf-alert {
overflow-wrap: anywhere;
word-break: normal;
}
/* Preformatted source remains intact, but scrolls only
inside its own code box. */
.sf-manual-page pre,
.sf-manual-page .sf-codeblock,
.sf-manual-page .sf-codebox {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
white-space: pre;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* Inline code inside tables and paragraphs may wrap. */
.sf-manual-page :not(pre) > code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Tables may never establish the width of the whole page. */
.sf-manual-page .sf-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}
.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Explicit wrapper for tables that genuinely need more width. */
.sf-manual-page .sf-table-scroll {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* Desktop manual layout. */
@media screen and (min-width: 901px) {
.sf-manual-layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}
/* Mobile and narrow-tablet layout. */
@media screen and (max-width: 900px) {
.sf-manual-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}
.sf-manual-toc {
position: static;
width: 100%;
max-width: 100%;
max-height: none;
overflow-x: hidden;
}
.sf-manual-content {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.sf-manual-page .sf-table th,
.sf-manual-page .sf-table td {
padding-left: 7px;
padding-right: 7px;
}
/* Only deliberately wide tables scroll horizontally. */
.sf-manual-page .sf-table-scroll .sf-table {
width: 760px;
min-width: 760px;
max-width: none;
}
}