/* =========================================================================== SUDO DayZ - theme for the DocFX "modern" template. Two complete looks, not one look with a dark switch: dark = night ops. Near-black charcoal, arterial red accents. light = field manual. Warm paper, stamped-ink oxblood. The modern template is Bootstrap 5 and drives themes off [data-bs-theme] on , so everything is expressed as custom properties per theme and the component rules below never hardcode a colour. =========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { --sudo-red: #8e1c22; /* oxblood, for light surfaces */ --sudo-red-lit: #e0353c; /* arterial, for fills and rules */ /* Lighter still, for small red text on dark. --sudo-red-lit measured 4.05:1 against the hero photo, under the 4.5:1 AA floor for text this size. */ --sudo-red-bright: #ef5a60; --sudo-rust: #b0442a; --sudo-amber: #d99a2b; --sudo-display: "Oswald", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "Segoe UI", sans-serif; --sudo-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sudo-mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --sudo-radius: 3px; } /* --- dark: night ops --- */ [data-bs-theme="dark"] { --bs-body-bg: #0b0a0a; --bs-body-color: #cbc6c4; --bs-emphasis-color: #f1eeec; --bs-secondary-color: #8b8280; --bs-border-color: #2b2424; --bs-link-color: #ef5a60; --bs-link-hover-color: #ff7a7f; --bs-link-color-rgb: 239, 90, 96; --bs-link-hover-color-rgb: 255, 122, 127; --sudo-panel: #141111; --sudo-panel-2: #1b1616; --sudo-line: #2b2424; --sudo-line-soft: #201a1a; --sudo-ink: #cbc6c4; --sudo-ink-dim: #8b8280; --sudo-accent: var(--sudo-red-lit); --sudo-accent-hi: var(--sudo-red-bright); /* hover, one step brighter */ /* Driven separately from --sudo-accent so tints can be composed with rgba(var(--sudo-accent-rgb), a) instead of hardcoding the channels. */ --sudo-accent-rgb: 224, 53, 60; --sudo-chip-bg: #1f1616; --sudo-chip-ink: #f08a8e; --sudo-header-bg: rgba(8, 7, 7, 0.92); --sudo-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.6); --sudo-grit: 0.030; } /* --- light: field manual --- */ [data-bs-theme="light"], :root:not([data-bs-theme]) { --bs-body-bg: #f4f1ef; --bs-body-color: #2a2422; --bs-emphasis-color: #16110f; --bs-secondary-color: #6b6260; --bs-border-color: #d8cfcd; --bs-link-color: #8e1c22; --bs-link-hover-color: #6b1218; --bs-link-color-rgb: 142, 28, 34; --bs-link-hover-color-rgb: 107, 18, 24; --sudo-panel: #eae4e2; --sudo-panel-2: #e1dad8; --sudo-line: #d8cfcd; --sudo-line-soft: #e2dbd9; --sudo-ink: #2a2422; --sudo-ink-dim: #6b6260; --sudo-accent: var(--sudo-red); --sudo-accent-hi: var(--sudo-red-lit); /* hover, one step brighter */ --sudo-accent-rgb: 142, 28, 34; --sudo-chip-bg: #e6dedc; --sudo-chip-ink: #7a171d; --sudo-header-bg: rgba(244, 241, 239, 0.92); --sudo-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.07); --sudo-grit: 0.022; } /* ------------------------------------------------------------------ base -- */ body { font-family: var(--sudo-body); font-size: 0.95rem; line-height: 1.65; /* Faint diagonal grain so large dark areas aren't dead flat. */ background-image: repeating-linear-gradient( 135deg, rgba(var(--sudo-accent-rgb), var(--sudo-grit)) 0px, rgba(var(--sudo-accent-rgb), var(--sudo-grit)) 1px, transparent 1px, transparent 5px ); background-attachment: fixed; } ::selection { background: var(--sudo-accent); color: #0b0a0a; } /* Scrollbars, so the long price tables don't ship a bright default bar. */ * { scrollbar-color: var(--sudo-line) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--sudo-line); border-radius: 10px; border: 2px solid var(--bs-body-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--sudo-accent); } /* ---------------------------------------------------------------- header -- */ header.bg-body { background: var(--sudo-header-bg) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--sudo-line) !important; box-shadow: 0 1px 0 rgba(var(--sudo-accent-rgb), 0.12); position: sticky; top: 0; z-index: 1030; } #autocollapse .navbar-brand { display: flex; align-items: center; gap: 0.65rem; font-family: var(--sudo-display); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 1rem; color: var(--bs-emphasis-color); } /* The mark is a self-contained plate with its own dark background, so it needs no per-theme treatment - it sits on light and dark identically. */ #logo { height: 30px; width: auto; margin: 0; } #navbar .nav-link { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.86rem; font-weight: 500; color: var(--sudo-ink-dim); border-bottom: 2px solid transparent; padding-bottom: 0.15rem; /* Colour is not transitioned: Chromium will not re-resolve a transitioned property when its custom property changes, which strands accent colours on the previous theme after a theme toggle. */ transition: none; } #navbar .nav-link:hover, #navbar .nav-link.active { color: var(--bs-emphasis-color); border-bottom-color: var(--sudo-accent); } /* Search box reads as a piece of kit rather than a browser default. */ #search-query { background: var(--sudo-panel); border: 1px solid var(--sudo-line); border-radius: var(--sudo-radius); color: var(--sudo-ink); font-size: 0.86rem; } #search-query:focus { border-color: var(--sudo-accent); box-shadow: 0 0 0 2px rgba(var(--sudo-accent-rgb), 0.16); background: var(--sudo-panel-2); } #search-query::placeholder { color: var(--sudo-ink-dim); } /* --------------------------------------------------------------- sidebar -- */ .toc-offcanvas .offcanvas-body, #tocOffcanvas { background: transparent; } #toc { font-size: 0.875rem; padding-top: 0.5rem; } #toc .nav-link, #toc a { color: var(--sudo-ink-dim); padding: 0.24rem 0.6rem; border-left: 2px solid transparent; border-radius: 0; /* Colour is not transitioned: Chromium will not re-resolve a transitioned property when its custom property changes, which strands accent colours on the previous theme after a theme toggle. */ transition: none; } #toc a:hover { color: var(--bs-emphasis-color); background: var(--sudo-panel); border-left-color: var(--sudo-line); } #toc a.active { color: var(--sudo-accent); font-weight: 600; background: var(--sudo-panel); border-left-color: var(--sudo-accent); } /* Top-level nav groups read as stencilled section headers. */ #toc > ul > li > .nav-link, #toc .expand-stub + a { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.09em; } /* ------------------------------------------------------------- typography -- */ article h1, article h2, article h3, article h4 { font-family: var(--sudo-display); color: var(--bs-emphasis-color); letter-spacing: 0.02em; } article h1 { font-size: 2.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.045em; margin-bottom: 1.4rem; padding-bottom: 0.55rem; position: relative; border-bottom: 1px solid var(--sudo-line); } /* Short accent rule overlapping the full-width hairline. */ article h1::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; background: var(--sudo-accent); } article h2 { font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2.6rem; margin-bottom: 0.9rem; padding-left: 0.7rem; border-left: 3px solid var(--sudo-accent); } article h3 { font-size: 1.12rem; font-weight: 600; margin-top: 1.8rem; color: var(--sudo-accent); } article hr { border: 0; border-top: 1px dashed var(--sudo-line); opacity: 1; margin: 2rem 0; } article blockquote { border-left: 3px solid var(--sudo-accent); background: var(--sudo-panel); margin: 1.2rem 0; padding: 0.8rem 1rem; color: var(--sudo-ink); } article a { text-decoration: none; } article a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Inline code / classnames - the primary lookup key on price pages. */ article code { font-family: var(--sudo-mono); font-size: 0.85em; background: var(--sudo-chip-bg); color: var(--sudo-chip-ink); border: 1px solid var(--sudo-line); border-radius: var(--sudo-radius); padding: 0.08em 0.4em; } article pre { background: var(--sudo-panel) !important; border: 1px solid var(--sudo-line); border-left: 3px solid var(--sudo-accent); border-radius: var(--sudo-radius); padding: 0.9rem 1rem; } article pre code { background: none; border: 0; padding: 0; color: var(--sudo-ink); } /* ---------------------------------------------------------------- tables -- */ /* The template already wraps tables in .table-responsive, so let that box own horizontal scrolling and leave the table itself a real table - otherwise sticky headers and column alignment break. */ .table-responsive { border: 1px solid var(--sudo-line); border-radius: var(--sudo-radius); background: var(--sudo-panel); margin: 1.1rem 0; max-height: 32rem; /* long price categories scroll in place */ overflow: auto; } /* DocFX tags every table .table.table-bordered, and Bootstrap paints each cell with an opaque --bs-table-bg, which hides row striping and hover entirely. Beating it needs the class in the selector: Bootstrap's own rules are `.table > :not(caption) > * > *` (0,1,1), so `article table` (0,0,2) loses. Every rule in this block therefore carries `.table`. */ article table, article table.table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; --bs-table-color: var(--sudo-ink); --bs-table-border-color: var(--sudo-line-soft); width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } article table.table > :not(caption) > * > * { background-color: transparent; box-shadow: none; border-left: 0; border-right: 0; } /* Declared after the reset above, at equal specificity, so it wins. */ article table.table > thead > tr > th { position: sticky; top: 0; z-index: 2; background-color: var(--sudo-panel-2); color: var(--bs-emphasis-color); font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; text-align: left; white-space: nowrap; padding: 0.6rem 0.85rem; border-bottom: 2px solid var(--sudo-accent); } article table.table > tbody > tr > td { padding: 0.42rem 0.85rem; border-bottom: 1px solid var(--sudo-line-soft); vertical-align: top; } article table.table > tbody > tr:nth-child(even) { background-color: rgba(var(--sudo-accent-rgb), 0.05); } article table.table > tbody > tr:hover { background-color: rgba(var(--sudo-accent-rgb), 0.12); } article table.table > tbody > tr:last-child > td { border-bottom: 0; } /* Price columns read far faster right-aligned and tabular - but only on price tables. Those are exactly the tables whose first column is an item classname wrapped in , which cleanly excludes prose tables like Core Mods. */ article table:has(tbody td:first-child code) td:nth-child(n + 2), article table:has(tbody td:first-child code) th:nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; } article table td code { white-space: nowrap; } /* ------------------------------------------------- collapsible categories -- */ /* Generated price pages wrap each market category in
. */ article details { border: 1px solid var(--sudo-line); border-left: 3px solid var(--sudo-accent); border-radius: var(--sudo-radius); background: var(--sudo-panel); margin: 0.6rem 0; padding: 0 1rem; /* Colour is not transitioned: Chromium will not re-resolve a transitioned property when its custom property changes, which strands accent colours on the previous theme after a theme toggle. */ transition: none; } article details:hover { border-left-color: var(--sudo-accent-hi); } article details[open] { padding-bottom: 0.75rem; background: transparent; } article details > summary { cursor: pointer; padding: 0.7rem 0; font-family: var(--sudo-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.95rem; color: var(--bs-emphasis-color); list-style: none; user-select: none; } article details > summary::-webkit-details-marker { display: none; } article details > summary::before { content: "\25B8"; display: inline-block; width: 1em; margin-right: 0.5rem; color: var(--sudo-accent); transition: transform 0.15s ease; } article details[open] > summary::before { transform: rotate(90deg); } article details > summary:hover { color: var(--sudo-accent); } /* The wiki nests an inline

inside ; stop it breaking the line. */ article details > summary h3 { display: inline; font-size: inherit; font-family: inherit; color: inherit; margin: 0; border: 0; padding: 0; } /* ---------------------------------------------------------------- alerts -- */ .alert { border: 1px solid var(--sudo-line); border-left-width: 3px; border-radius: var(--sudo-radius); background: var(--sudo-panel); color: var(--sudo-ink); } .alert-info { border-left-color: var(--sudo-accent); } .alert-warning { border-left-color: var(--sudo-amber); } .alert-danger { border-left-color: var(--sudo-rust); } .alert h5 { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; } /* ------------------------------------------------------------ landing page -- */ .hero { position: relative; isolation: isolate; margin: -1rem 0 2.5rem; padding: 5.5rem 2.2rem 3rem; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--sudo-line); border-radius: var(--sudo-radius); overflow: hidden; /* This file is served from /public/main.css, so images/ is one level up. Anchored right so the DAYZ wordmark baked into the artwork stays visible while the copy sits over the darkened left side. */ background: #0b0a0a url("../images/hero.jpg") center right / cover no-repeat; } /* Scrim. The source art is a bright, hazy daytime scene - white text on it raw is unreadable, so this lays a hard left-to-right darkening over the photo and a bottom fade into the page. ::before rather than a background layer so the two gradients can be tuned independently of the image. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 10, 0.94) 0%, rgba(11, 10, 10, 0.86) 38%, rgba(11, 10, 10, 0.45) 68%, rgba(11, 10, 10, 0.25) 100%), linear-gradient(0deg, rgba(11, 10, 10, 0.85) 0%, rgba(11, 10, 10, 0.15) 55%, rgba(11, 10, 10, 0.35) 100%); } /* Red wash, so the artwork reads as part of the theme rather than a stock photo dropped in. Multiply keeps the shadows black instead of muddy grey. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(var(--sudo-accent-rgb), 0.30) 0%, rgba(var(--sudo-accent-rgb), 0.10) 45%, transparent 75%); mix-blend-mode: multiply; pointer-events: none; } /* Accent rule along the bottom edge of the cover. */ .hero { box-shadow: inset 0 -3px 0 var(--sudo-accent); } /* The cover is dark in BOTH themes, so everything inside it is pinned to light ink rather than inheriting theme tokens - otherwise light mode renders dark text on a dark photograph. */ .hero .kicker { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; color: var(--sudo-red-bright); margin-bottom: 0.5rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 0.95; margin: 0 0 0.75rem; border: 0; padding: 0; color: #f7f4f2; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); } .hero h1::after { display: none; } .hero .hero-sub { max-width: 42ch; color: rgba(255, 255, 255, 0.80); font-size: 1.03rem; margin-bottom: 1.5rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } /* Secondary buttons sit on the photo, so they need to be glass rather than the opaque panel fill used elsewhere. */ .hero .btn-sudo { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #f7f4f2; backdrop-filter: blur(3px); } .hero .btn-sudo:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; color: #fff; } .hero .btn-sudo.primary { background: var(--sudo-red-lit); border-color: var(--sudo-red-lit); color: #14090a; backdrop-filter: none; } .hero .btn-sudo.primary:hover { background: #f04a50; border-color: #f04a50; color: #14090a; } .btn-sudo { display: inline-block; font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1.3rem; border: 1px solid var(--sudo-line); border-radius: var(--sudo-radius); color: var(--bs-emphasis-color); background: var(--sudo-panel-2); /* Colour is not transitioned: Chromium will not re-resolve a transitioned property when its custom property changes, which strands accent colours on the previous theme after a theme toggle. */ transition: transform 0.14s ease, box-shadow 0.14s ease; } .btn-sudo:hover { border-color: var(--sudo-accent); color: var(--sudo-accent); text-decoration: none; transform: translateY(-1px); } .btn-sudo.primary { background: var(--sudo-accent); border-color: var(--sudo-accent); color: #0b0a0a; } .btn-sudo.primary:hover { background: var(--sudo-accent-hi); border-color: var(--sudo-accent-hi); color: #0b0a0a; box-shadow: 0 4px 16px rgba(var(--sudo-accent-rgb), 0.30); } /* Card grid of entry points. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; margin: 1.2rem 0 2rem; } .card-sudo { border: 1px solid var(--sudo-line); border-top: 3px solid var(--sudo-accent); border-radius: var(--sudo-radius); background: var(--sudo-panel); padding: 1.1rem 1.15rem 1.25rem; /* border-color is deliberately NOT transitioned. Its value comes from a custom property, and Chromium will not re-resolve a transitioned property when the underlying variable changes - so toggling the theme left these borders stuck on the previous theme's red. */ transition: transform 0.14s ease, box-shadow 0.14s ease; } .card-sudo:hover { transform: translateY(-2px); box-shadow: var(--sudo-shadow); border-top-color: var(--sudo-accent-hi); } .card-sudo h3 { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.92rem; margin: 0 0 0.7rem; color: var(--bs-emphasis-color); } .card-sudo ul { list-style: none; margin: 0; padding: 0; } .card-sudo li { padding: 0.16rem 0; font-size: 0.9rem; } .card-sudo li a { color: var(--sudo-ink); } .card-sudo li a::before { content: "\203A"; color: var(--sudo-accent); margin-right: 0.5rem; font-weight: 700; } .card-sudo li a:hover { color: var(--sudo-accent); text-decoration: none; } /* Server status board. */ .server-board { margin: 1.2rem 0 2rem; } .server-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(130px, 1fr) auto auto; gap: 0.75rem 1.1rem; align-items: center; padding: 0.7rem 1rem; border: 1px solid var(--sudo-line); border-left: 3px solid var(--sudo-accent); border-radius: var(--sudo-radius); background: var(--sudo-panel); margin-bottom: 0.5rem; font-size: 0.9rem; } .server-row:hover { background: var(--sudo-panel-2); } .server-row .name { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--bs-emphasis-color); } .server-row .addr { font-family: var(--sudo-mono); font-size: 0.84rem; color: var(--sudo-chip-ink); } .server-row .meta { color: var(--sudo-ink-dim); font-size: 0.82rem; } .server-row .meta b { color: var(--sudo-ink); font-weight: 600; } @media (max-width: 640px) { .server-row { grid-template-columns: 1fr 1fr; } .server-row .name { grid-column: 1 / -1; } } /* ------------------------------------------------------ affix / footer -- */ .affix h5, #affix h5 { font-family: var(--sudo-display); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.76rem; color: var(--sudo-ink-dim); border-bottom: 1px solid var(--sudo-line) !important; padding-bottom: 0.4rem; } #affix a { color: var(--sudo-ink-dim); font-size: 0.83rem; border-left: 2px solid transparent; padding-left: 0.6rem; } #affix a:hover { color: var(--sudo-accent); text-decoration: none; } #affix li.active > a { color: var(--sudo-accent); border-left-color: var(--sudo-accent); } .actionbar, #breadcrumb { font-size: 0.82rem; } #breadcrumb .breadcrumb-item a { color: var(--sudo-ink-dim); } .next-article, .contribution { border-color: var(--sudo-line) !important; } footer { border-top: 1px solid var(--sudo-line) !important; background: var(--sudo-panel); margin-top: 3rem; padding: 1.4rem 0; font-size: 0.84rem; color: var(--sudo-ink-dim) !important; } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 768px) { article h1 { font-size: 1.7rem; } article h2 { font-size: 1.2rem; margin-top: 2rem; } article table { font-size: 0.82rem; } article table.table > thead > tr > th { font-size: 0.72rem; padding: 0.5rem 0.6rem; } article table.table > tbody > tr > td { padding: 0.36rem 0.6rem; } .table-responsive { max-height: 24rem; } .hero { padding: 3.5rem 1.2rem 2rem; min-height: 260px; /* Narrow viewports crop hard to the right, which would leave the copy sitting on the survivor. Pull the framing back toward centre. */ background-position: center center; } /* The horizontal scrim is tuned for a wide crop; on mobile the text spans the full width, so darken evenly instead. */ .hero::before { background: linear-gradient(0deg, rgba(11, 10, 10, 0.92) 0%, rgba(11, 10, 10, 0.55) 60%, rgba(11, 10, 10, 0.45) 100%); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .card-sudo:hover, .btn-sudo:hover { transform: none; } } @media print { header, footer, .affix, .toc-offcanvas, .hero::after { display: none !important; } .table-responsive { max-height: none; overflow: visible; } body { background-image: none; } }