/*! * SOTB custom theme for ts-website 2 * Loaded after css/themes/dark.css, so it wins on equal specificity. * Keep all site-specific styling here - never edit dark.css directly, * otherwise an upstream update will wipe it. */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap'); /* ========== */ /* PALETTE */ /* ========== */ :root { /* base surfaces, darkest to lightest */ --sotb-night: #0d0b1a; --sotb-deep: #14112a; --sotb-surface: #1c1836; --sotb-surface-2: #241f45; --sotb-line: #322c5c; /* sunset accents */ --sotb-sun: #ff8a3d; --sotb-coral: #ff4d6d; --sotb-magenta: #e6337f; --sotb-violet: #8b46f0; --sotb-cyan: #35d6e0; --sotb-sunset: linear-gradient(100deg, var(--sotb-sun), var(--sotb-magenta) 55%, var(--sotb-violet)); /* overrides of the stock dark theme variables */ --site-background: var(--sotb-night); --site-secondary-color: var(--sotb-magenta); --site-accent-color: var(--sotb-coral); --site-text: #a7a2c4; --font-family-main: "Outfit", "Exo 2", sans-serif; } /* ========== */ /* BACKGROUND */ /* ========== */ /* ================= */ /* BACKGROUND LAYERS */ /* ================= */ /* The base colour lives on so that body can stay transparent - that is what lets .site-bg sit behind the content on a negative z-index. */ html { background-color: var(--sotb-night); } body { background-color: transparent; letter-spacing: .01em; } /* Fixed stack behind everything: one .site-bg-layer per photo, crossfaded by toggling .is-active, plus a scrim on top of them all for readability. */ .site-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; } .site-bg-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: 0; transition: opacity 2.5s ease-in-out; /* very slow drift, so a single image never feels static */ transform: scale(1.04); } .site-bg-layer.is-active { opacity: 1; } .site-bg-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(125% 95% at 50% 25%, transparent 55%, rgba(0, 0, 0, .40)), linear-gradient(to bottom, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .80) 100%); } @media (prefers-reduced-motion: reduce) { .site-bg-layer { transition: none; } } /* ============ */ /* TYPOGRAPHY */ /* ============ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-main); font-weight: 600; letter-spacing: -.01em; } a { color: #fff; } a:hover { color: var(--sotb-sun); } ::selection { background-color: var(--sotb-magenta); color: #fff; } /* ========= */ /* NAVBAR */ /* ========= */ #main-navbar { background-color: rgba(20, 17, 42, .82) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 8px 32px rgba(0, 0, 0, .45); } /* the sunset strip along the bottom edge */ #main-navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sotb-sunset); opacity: .9; } #main-navbar .navbar-brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 1.05rem; background: var(--sotb-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } #main-navbar .navbar-brand img { filter: drop-shadow(0 2px 6px rgba(230, 51, 127, .55)); } #main-navbar .navbar-nav .nav-link { font-weight: 500; font-size: .82rem; letter-spacing: .06em; color: rgba(255, 255, 255, .62); } #main-navbar .nav-item.active, #main-navbar .nav-item:hover, #main-navbar .nav-item.dropdown.show { background-color: rgba(255, 255, 255, .04); } #main-navbar .nav-item.active .nav-link, #main-navbar .nav-item:hover .nav-link { color: #fff; } @media (min-width: 992px) { #main-navbar .navbar-nav, #main-navbar .navbar-nav li { border-color: rgba(255, 255, 255, .06); } /* With the extra "Szervereink" item the bar no longer fits on one line at the lg breakpoint - keep every label on its own line and tighten up. */ #main-navbar .navbar-nav .nav-link { white-space: nowrap; font-size: .74rem; padding-right: .58rem; padding-left: .58rem; } #main-navbar .navbar-nav .nav-link i { margin-right: .35em; } #main-navbar .navbar-brand { font-size: .88rem; margin-right: .5rem; } } @media (min-width: 1200px) { #main-navbar .navbar-nav .nav-link { font-size: .8rem; padding-right: .85rem; padding-left: .85rem; } #main-navbar .navbar-brand { font-size: 1rem; } } @media (min-width: 992px) { /* thicker, gradient version of the stock underline sweep */ #main-navbar .nav-item:after { border-bottom: 0.16rem solid transparent; border-image: var(--sotb-sunset) 1; top: calc(100% - 0.16rem); } } /* ========= */ /* DROPDOWNS */ /* ========= */ .dropdown-menu { background-color: var(--sotb-surface); border: 1px solid var(--sotb-line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); padding: .35rem; } .dropdown-item { border-radius: 8px; color: rgba(255, 255, 255, .75); } .dropdown-item.active, .dropdown-item:focus, .dropdown-item:hover { background-color: var(--sotb-surface-2); color: #fff; } /* ===== */ /* CARDS */ /* ===== */ .card { background-color: rgba(10, 8, 18, .28); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover { border-color: rgba(230, 51, 127, .38); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(230, 51, 127, .08); } .card .card-header { background-color: rgba(255, 255, 255, .055); border-bottom: 1px solid rgba(255, 255, 255, .09); font-family: var(--font-family-main); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: #fff; padding-top: .8rem; padding-bottom: .8rem; } /* replace the flat 2px accent bar with the sunset gradient */ .card.card-accent > .card-header::before { height: 3px; background: var(--sotb-sunset); } /* Gradient only on the header's own icon - never on icons inside buttons, otherwise the button glyph turns invisible and leaves a coloured blob. */ .card > .card-header > i, .card > .card-header > span > i { background: var(--sotb-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .card-header .btn i { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; } .card .card-body { padding: 1.1rem; } /* ======= */ /* BUTTONS */ /* ======= */ .btn { border-radius: 10px; font-weight: 500; letter-spacing: .03em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: var(--sotb-sunset); border: none; box-shadow: 0 6px 18px rgba(230, 51, 127, .3); } .btn-primary:hover { background: var(--sotb-sunset); filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(230, 51, 127, .42); } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background: var(--sotb-sunset); filter: brightness(.9); transform: translateY(0); } .btn-primary.focus, .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(230, 51, 127, .38); } /* ====== */ /* BADGES */ /* ====== */ .badge { border-radius: 999px; font-weight: 600; letter-spacing: .02em; padding: .38em .7em; } .server-status .data .badge, .badge-primary { background: var(--sotb-sunset); color: #fff; } .badge-secondary { background-color: var(--sotb-surface-2); color: rgba(255, 255, 255, .82); } /* ============== */ /* SERVER STATUS */ /* ============== */ .server-status .data p { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 0; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); } .server-status .data p:last-child { border-bottom: none; padding-bottom: 0; } .server-status .data p > span:first-child { color: var(--site-text); font-size: .88rem; white-space: nowrap; } .server-status .data i { color: var(--sotb-coral); } /* ============ */ /* ADMIN STATUS */ /* ============ */ .admin-status .status-container .status .badge-success { background: linear-gradient(100deg, var(--sotb-cyan), #2bb3a8); color: #06232a; } .admin-status .status-container .status .badge-secondary { background-color: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .5); } /* ============== */ /* GROUP ASSIGNER */ /* ============== */ .group-assigner .assigner-category { border-radius: 12px; overflow: hidden; border: 1px solid var(--sotb-line); margin-bottom: 1rem; } .group-assigner .assigner-header { background: linear-gradient(100deg, rgba(255, 138, 61, .16), rgba(139, 70, 240, .16)); border-bottom: 1px solid var(--sotb-line); font-weight: 600; letter-spacing: .03em; color: #fff; } .group-assigner .list-group-item { background-color: rgba(36, 31, 69, .55); border-color: rgba(255, 255, 255, .04); transition: background-color .18s ease; } .group-assigner .list-group-item:hover { background-color: rgba(230, 51, 127, .12); } .group-assigner .assigner-icon { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); } /* ====== */ /* FORMS */ /* ====== */ .form-control, .custom-select { background-color: rgba(13, 11, 26, .7); border: 1px solid var(--sotb-line); border-radius: 10px; color: #fff; } .form-control:focus, .custom-select:focus { background-color: rgba(13, 11, 26, .9); border-color: var(--sotb-magenta); box-shadow: 0 0 0 .2rem rgba(230, 51, 127, .22); } .custom-control-input:checked ~ .custom-control-label::before { background: var(--sotb-sunset); border-color: transparent; } /* ====== */ /* TABLES */ /* ====== */ .table thead th { color: rgba(255, 255, 255, .72); font-size: .78rem; letter-spacing: .06em; border-bottom: 1px solid var(--sotb-line); } .table td, .table th { border-top-color: rgba(255, 255, 255, .05); } .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .03); } /* ====== */ /* MODAL */ /* ====== */ .modal .modal-content { background-color: var(--sotb-surface); border: 1px solid var(--sotb-line); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .modal .modal-header { background-color: rgba(0, 0, 0, .22); border-bottom: 1px solid rgba(255, 255, 255, .05); } /* ====== */ /* ALERTS */ /* ====== */ .alert { border-radius: 12px; } .alert-info { background: linear-gradient(100deg, rgba(53, 214, 224, .18), rgba(139, 70, 240, .18)); border: 1px solid rgba(53, 214, 224, .25); color: #d7f6f8; } /* ====== */ /* FOOTER */ /* ====== */ /* The stock footer is absolutely positioned against the body, which leaves a gap whenever the body is shorter than the viewport. Turn it into a proper sticky footer instead: body becomes a flex column and the footer is pushed down by its auto top margin. */ body { display: flex; flex-direction: column; padding-bottom: 0; } body > * { flex-shrink: 0; } .footer { position: static; margin-top: auto; background-color: rgba(13, 11, 26, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .06); } .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--sotb-sunset); opacity: .65; } .footer-sep { margin: 0 .45rem; color: rgba(255, 255, 255, .22); } .footer-credit { letter-spacing: .02em; } .footer-author { font-weight: 600; letter-spacing: .05em; background: var(--sotb-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========= */ /* SCROLLBAR */ /* ========= */ ::-webkit-scrollbar { width: 8px; height: 8px; background-color: var(--sotb-night); } ::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--sotb-sunset); } /* ============ */ /* SERVERS PAGE */ /* ============ */ .server-list .server-card { margin-bottom: 1.25rem; } .server-card-top { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; } .server-icon { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--sotb-sunset); box-shadow: 0 6px 18px rgba(230, 51, 127, .32); } .server-icon i { margin: 0; font-size: 1.25rem; color: #fff; } .server-heading { min-width: 0; } .server-name { margin: 0; font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.25; } .server-game { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--site-text); } .server-badge { margin-left: auto; align-self: flex-start; } .badge-success.server-badge { background: linear-gradient(100deg, var(--sotb-cyan), #2bb3a8); color: #06232a; } .server-desc { font-size: .9rem; color: var(--site-text); margin-bottom: 1rem; } .server-address { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 10px; background-color: rgba(13, 11, 26, .55); border: 1px solid rgba(255, 255, 255, .07); } .server-address i { color: var(--sotb-sun); margin: 0; } .server-address code { color: #fff; background: none; padding: 0; font-size: .88rem; word-break: break-all; } .server-copy { flex: 0 0 auto; padding: .15rem .5rem; line-height: 1.4; } /* ========== */ /* RULES PAGE */ /* ========== */ .rules-intro { font-size: .95rem; margin-bottom: 1.25rem; } .rules-list { margin: 0; padding-left: 0; list-style: none; counter-reset: rule; } .rules-list li { counter-increment: rule; position: relative; padding: .6rem 0 .6rem 2.6rem; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .93rem; line-height: 1.55; } .rules-list li:last-child { border-bottom: none; padding-bottom: 0; } .rules-list li::before { content: counter(rule); position: absolute; left: 0; top: .55rem; width: 1.85rem; height: 1.85rem; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--sotb-sunset); color: #fff; font-family: var(--font-family-main); font-size: .8rem; font-weight: 600; box-shadow: 0 4px 12px rgba(230, 51, 127, .28); } .rules-outro { font-size: .85rem; color: var(--site-text); text-align: center; margin: 1.25rem 0 0; } /* =========== */ /* RESPONSIVE */ /* =========== */ @media (max-width: 991px) { .card { border-radius: 12px; } #main-navbar .navbar-brand { font-size: .95rem; } } /* Users who prefer less motion get no lift/transform effects */ @media (prefers-reduced-motion: reduce) { .card, .btn, .btn-primary:hover { transition: none; transform: none; } }