/* ============================================================ TF2 site — Tabler theme layer (the ONLY override layer; see DESIGN.md) Native Tabler theming does color mode / scheme / base / radius via tabler-themes.min.css + the seeded localStorage config in index.html. This file only does what native theming cannot: 1. Self-hosted fonts (Tabler's demo pulls Inter from a CDN — we stay fully offline per DESIGN.md Rule 2). 2. The operator-approved TF2 color palette + token overrides (DESIGN.md — primary=TFOrange, semantic + team colors). 3. A couple of shell bridges Tabler doesn't ship. MUST load AFTER tabler.min.css / tabler-themes.min.css so equal-specificity :root rules win on source order. ============================================================ */ /* ---- 1. Self-hosted fonts (offline-capable) -------------------------------- Noto Sans = body/sans face; Noto Sans Mono = monospace; Oswald + Antonio are condensed display faces for the brand mark / headings (Antonio is TF2's own look, carried over from the old site). ------------------------------------ */ @font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Noto Sans Mono"; src: url("/static/fonts/noto-sans-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Noto Sans Mono"; src: url("/static/fonts/noto-sans-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Antonio"; src: url("/static/fonts/Antonio-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Antonio"; src: url("/static/fonts/Antonio-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* Official TF2 display font — page headers + brand mark (self-hosted woff2). */ @font-face { font-family: "TF2"; src: url("/static/fonts/TF2.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* Map Tabler's "sans-serif" / "monospace" theme fonts onto our offline faces. */ :root { --tblr-font-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --tblr-font-monospace: "Noto Sans Mono", ui-monospace, SFMono-Regular, monospace; } /* ---- 2a. TF2 color palette (canonical; reference these vars, never raw hex) -- */ :root { --tf-blue: #395c78; --tf-slate: #5b7a8c; --tf-green: #768a88; --tf-dark-green: #2e7d32; --tf-grey: #6b6a65; --tf-dark-brown: #34302d; --tf-brown: #462d26; --tf-light-brown: #6a4535; --tf-burnt-orange: #913a1e; --tf-bright-red: #bd3b3b; --tf-dark-red: #9d312f; --tf-orange: #f08149; --tf-yellow: #ef9849; --tf-peach: #f5ad87; --tf-almond: #f6b98a; --tf-white: #f5e7de; --tf-tan: #c1a18a; --tf-sand: #dabdab; } /* ---- 2b. Approved Tabler token overrides (DESIGN.md [LAW]) ------------------ Tabler builds component colors from these base vars + their -rgb pair (used inside rgba() for backgrounds, borders, focus rings). Set both so bg-*, text-*, btn-*, badges and alerts all pick up TF2 colors natively. --------- */ :root { --tblr-primary: #f08149; --tblr-primary-rgb: 240, 129, 73; /* TFOrange */ --tblr-success: #2e7d32; --tblr-success-rgb: 46, 125, 50; /* TFDarkGreen */ --tblr-danger: #bd3b3b; --tblr-danger-rgb: 189, 59, 59; /* TFBrightRed */ --tblr-warning: #ef9849; --tblr-warning-rgb: 239, 152, 73; /* TFYellow */ --tblr-info: #395c78; --tblr-info-rgb: 57, 92, 120; /* TFBlue */ } /* ---- 2b-text. Site-wide text color (operator: TFTan/TFSand, matching gen2's --daybreak font color). Body = TFTan; headings = TFSand for a little hierarchy. Team colors + semantic tokens still win where explicitly applied. ---- */ :root { --tblr-body-color: var(--tf-tan); --tblr-heading-color: var(--tf-sand); } /* ---- 2c. Team colors — taken from the old kill log (.tm-red / .tm-blue) ----- */ .team-red { color: var(--tf-bright-red); font-weight: 700; } .team-blu { color: var(--tf-blue); font-weight: 700; } /* ---- 2d. Operator-requested outline button in TFDarkRed (not a Tabler token; `danger` is TFBrightRed). Used by the header "Bans" button. Mirrors Tabler's .btn-outline-* behavior (color+border, fills on hover). ---- */ .btn-outline-tfdarkred { color: var(--tf-dark-red); border-color: var(--tf-dark-red); } .btn-outline-tfdarkred:hover, .btn-outline-tfdarkred:focus, .btn-outline-tfdarkred:active { color: #fff; background-color: var(--tf-dark-red); border-color: var(--tf-dark-red); } /* Operator-requested outline button in TFGreen (the muted #768a88, distinct from the TFDarkGreen `success` token). Used by the Home "Request Password" button. */ .btn-outline-tfgreen { color: var(--tf-green); border-color: var(--tf-green); } .btn-outline-tfgreen:hover, .btn-outline-tfgreen:focus, .btn-outline-tfgreen:active { color: #fff; background-color: var(--tf-green); border-color: var(--tf-green); } /* TFGreen avatar/background helper (Tabler has bg-success = TFDarkGreen only). Used by the Ban Stats "Admins" widget icon. */ .bg-tfgreen { background-color: var(--tf-green) !important; } /* ---- 3. Shell bridges ------------------------------------------------------- */ /* Brand mark + page headers use the official TF2 display font. Uppercased so it works even if the face is caps-only; Antonio is the swap fallback. */ .navbar-brand .brand-mark, .page-title, .tf2-head { font-family: "TF2", "Antonio", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .03em; } /* Home Server-Rules number badges — TF2 display font, TFBrown numerals on TFGreen (operator: distinct from the orange bg-primary used elsewhere). */ .badge.rule-num { font-family: "TF2", "Antonio", "Oswald", sans-serif; background-color: var(--tf-green); color: var(--tf-brown); font-size: .9rem; font-weight: 700; letter-spacing: .03em; } /* Bare status dot (no Tabler .status pill/oval behind it) — colored via the Tabler status-color var. Default (no class) = neutral "connecting". */ .status-dot.dot-online { --tblr-status-color: var(--tf-dark-green); } .status-dot.dot-offline { --tblr-status-color: var(--tf-bright-red); } .status-dot.dot-warn { --tblr-status-color: var(--tf-yellow); } /* rebooting/updating */ /* Ban Stats status/type badges — explicit fg/bg for contrast (the site-wide TFTan body color washed out Tabler's default badge text). Warm-white on TF reds/greys reads cleanly. */ .badge.badge-active { background-color: var(--tf-bright-red); color: var(--tf-white); } .badge.badge-perm { background-color: var(--tf-brown); color: var(--tf-white); } /* distinct from Active red */ .badge.badge-gone { background-color: var(--tf-grey); color: var(--tf-white); } /* Expired */ .badge.badge-lifted { background-color: var(--tf-green); color: var(--tf-white); } /* manually unbanned */ .badge.badge-type { background-color: var(--tf-slate); color: var(--tf-white); } /* Server Info state badge — mirror the header status-dot colors: green ONLINE / yellow REBOOTING / red OFFLINE (grey = unknown via badge-gone). */ .badge.badge-online { background-color: var(--tf-dark-green); color: var(--tf-white); } .badge.badge-warn { background-color: var(--tf-yellow); color: var(--tf-brown); } .badge.badge-offline { background-color: var(--tf-bright-red); color: var(--tf-white); } /* Kill feed — OVERRIDE (no Tabler equivalent for a game kill feed). Kept minimal: a scrollable monospace log; icons sized inline. Everything around it (card, header, buttons, badges) is native Tabler. */ .kill-feed { /* Fill the card so the Kill Feed card matches the roster cards' height (the card is h-100; its card-body is a flex column). min-height:0 lets it shrink to the row height and scroll internally instead of forcing the card taller. */ flex: 1 1 0; min-height: 0; overflow-y: auto; font-family: var(--tblr-font-monospace); font-size: .8125rem; line-height: 1.7; padding: .5rem .75rem; } .kill-feed .logline { white-space: nowrap; } .kill-feed .logline .time { color: var(--tf-sand); } .kill-feed .logline .weapon { color: var(--tf-green); font-style: italic; } /* Kill icons are pre-tinted TFTan (baked by the gen2 tint_icons.py); no CSS filter — let the baked tint show, matching the site text color. */ .kill-feed .kill-icon { height: 1.15rem; vertical-align: -.25rem; margin: 0 .15rem; } /* When the Kill Feed card stacks on its own row (