/* TheGmod.Club custom site skin (homepage + store). Loaded after compiled/css/site.css and the active themes/*/style.css, so it can safely win cascade ties without touching the admin theme editor's file. */ :root { --bg: #0b0906; --bg-alt: #120d08; --surface: #1a140d; --surface-hover: #221a10; --border: #2e2115; --border-light: #3d2b1a; --text: #f5efe6; --text-muted: #a99a86; --text-dim: #6f6152; --orange: #ff7a1a; --orange-light: #ff9d4d; --orange-dim: #cc5500; --purple: #7a3aa8; --purple-light: #9d5fc9; --purple-dim: #4a2069; --brand-gradient: linear-gradient(135deg, var(--orange) 0%, var(--purple) 100%); --shadow-glow: rgba(255, 122, 26, 0.35); --shadow-glow-purple: rgba(122, 58, 168, 0.35); } body { font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Ambient background glow, inserted right after for non-admin pages */ .bg-glow, .bg-glow-purple, .bg-grid { position: fixed; pointer-events: none; z-index: 0; } .bg-glow { top: -20%; left: 50%; transform: translateX(-50%); width: 1200px; height: 800px; background: radial-gradient(ellipse at center, rgba(255, 122, 26, 0.16) 0%, rgba(255, 122, 26, 0.05) 40%, transparent 70%); } .bg-glow-purple { top: 10%; right: -15%; width: 900px; height: 900px; background: radial-gradient(ellipse at center, rgba(122, 58, 168, 0.14) 0%, rgba(122, 58, 168, 0.04) 40%, transparent 70%); } .bg-grid { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%); } .wrap { position: relative; z-index: 1; } /* Navbar */ .navbar-inverse { position: sticky !important; top: 0; z-index: 50; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border) !important; font-family: 'Inter', sans-serif !important; min-height: 68px; } .navbar .nav-item .nav-link { font-weight: 500 !important; font-size: 14.5px !important; text-transform: none !important; padding: 10px 16px !important; border-radius: 8px; transition: color .2s ease; } .navbar-brand img { border-radius: 10px; } /* Buttons */ .btn-prom { border-radius: 10px !important; font-weight: 600 !important; padding: 10px 20px !important; border: 1px solid transparent !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } .btn-prom:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn-prom-primary, a[href*="steamcommunity.com/openid"] img { border-radius: 10px; } /* Sale / notice bars */ .notSetup, .sale-box { border-radius: 0 !important; } /* Content wrapper */ .content { position: relative; z-index: 1; padding-top: 48px !important; } /* Hero welcome block */ .hero-welcome { padding: 44px 40px; border-radius: 20px; border: 1px solid var(--border-light); background: linear-gradient(155deg, var(--surface) 0%, var(--bg-alt) 100%); position: relative; overflow: hidden; } .hero-welcome::before { content: ''; position: absolute; top: -60%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(122, 58, 168, 0.22) 0%, transparent 70%); pointer-events: none; } .hero-welcome .header { position: relative; font-family: 'Inter', sans-serif !important; font-size: 2.1rem !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -0.02em; color: var(--text) !important; margin-bottom: 0; width: auto; } .hero-signin { position: relative; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .hero-signin p { color: var(--text-muted); max-width: 52ch; line-height: 1.6; margin-bottom: 16px; } .hero-signin img { transition: transform .2s ease, filter .2s ease; border-radius: 6px; } .hero-signin img:hover { transform: translateY(-2px); filter: brightness(1.08); } /* Row layout */ .homepage-row { margin-top: 32px; } /* News card */ .news-card .header, .homepage-row > div > .header { font-family: 'Inter', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-light) !important; } .news-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; } .news-card .news-block { background: transparent !important; padding: 0 !important; margin-top: 12px; } /* Goal card */ .goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; margin-bottom: 28px; } .goal-card h2 { font-family: 'Inter', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--text) !important; margin-bottom: 16px !important; } .goal-card .progress { background-color: var(--bg-alt) !important; border-radius: 999px !important; height: 1.4rem !important; overflow: hidden; } .goal-card .progress-bar { background: var(--brand-gradient) !important; font-weight: 600; font-size: .72rem; } /* Donator cards */ .donator-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 28px; } .donator-cards > div { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; } .donator-cards h2 { font-family: 'Inter', sans-serif !important; font-size: .95rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-light) !important; margin-bottom: 14px !important; } .donator-cards .table { margin-bottom: 0 !important; } .donator-cards .table-striped thead { background-color: transparent !important; color: var(--text-dim) !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .donator-cards .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bg-alt) !important; } .donator-cards .table td, .donator-cards .table th { border: 0 !important; padding: 10px 12px !important; color: var(--text-muted) !important; font-size: 13.5px; } /* Frontpage rich content */ .frontpage-content { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; color: var(--text-muted); line-height: 1.7; } .frontpage-content img { border-radius: 10px; } /* Callouts */ .bs-callout { border-radius: 12px !important; } /* Footer */ .footer { position: relative; z-index: 1; background: var(--bg) !important; } .footer-card { position: relative; border-radius: 20px; border: 1px solid var(--border-light); background: linear-gradient(155deg, var(--surface) 0%, var(--bg-alt) 100%); padding: 36px 40px; overflow: hidden; } .footer-card::before { content: ''; position: absolute; top: -50%; right: -8%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(122, 58, 168, 0.20) 0%, transparent 70%); pointer-events: none; } .footer-card > .row { position: relative; z-index: 1; } .footer .tos-link { transition: color .2s ease; } .footer .version { color: var(--text-dim) !important; } @media (max-width: 640px) { .footer-card { padding: 28px 22px; } .footer-card .col-12.col-md-6[style] { text-align: left !important; margin-top: 16px; } } @media (max-width: 767px) { .hero-welcome { padding: 30px 24px; } .donator-cards { grid-template-columns: 1fr; } } /* ========================================================================== Store / package listing pages (server select, packages, global packages) ========================================================================== */ /* Page titles used across store, credits, tos, imprint, privacy, install */ .header { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 2rem !important; text-transform: none !important; letter-spacing: -0.02em; color: var(--text) !important; margin-bottom: 20px; } /* Sidebar filter panel (search / sort / categories) + TOS notice box */ .darker-box, .info-box { background: var(--surface) !important; border: 1px solid var(--border); border-radius: 16px !important; padding: 22px 24px !important; margin-top: 0 !important; margin-bottom: 24px !important; } .darker-box h6, .info-box h2 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px; } #storeSidebar .form-control { margin-bottom: 4px; } #storeSidebar .categoryLink { display: inline-flex; align-items: center; border-radius: 999px !important; padding: 7px 14px !important; height: auto !important; font-size: 13px; font-weight: 600; margin: 4px 6px 0 0; transition: transform .15s ease, filter .15s ease; } #storeSidebar .categoryLink:hover { transform: translateY(-1px); filter: brightness(1.1); } #storeSidebar .categoryLink span { opacity: .75; margin-left: 4px; } /* Generic form controls (search box, sort dropdown, steamid/coupon inputs) */ .form-control { background-color: var(--bg-alt) !important; border: 1px solid var(--border-light) !important; border-radius: 10px !important; color: var(--text) !important; } .form-control:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18) !important; } .form-control::placeholder { color: var(--text-dim); } /* Server selection tiles */ .srv-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease !important; } .srv-box:hover { transform: translateY(-4px); border-color: var(--border-light); } .srv-label { border-radius: 0 0 15px 15px; font-weight: 600; font-size: 13.5px; } /* Package grid -- Prometheus emits bare .col-md-N cards with no .row wrapper, so we lay #packages out as its own responsive grid instead of relying on Bootstrap's flex row. */ #packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; align-items: start; } #packages > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform .2s ease, border-color .2s ease; } #packages > [class*="col-"]:hover { transform: translateY(-4px); border-color: var(--border-light); } #packages .featured-header { margin-top: 0 !important; background: var(--brand-gradient) !important; color: #1a0e00 !important; font-weight: 700; text-align: center; padding: 6px !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; } #packages .store-box-header { border: 0 !important; border-radius: 0 !important; margin-top: 0 !important; font-size: 1.05rem !important; padding: 16px 18px !important; } #packages .store-box { border: 0 !important; border-radius: 0 !important; flex: 1; display: flex; flex-direction: column; } #packages .store-box-upper { flex: 1; padding: 4px 20px 16px !important; } #packages .store-box img { border-radius: 10px; margin: 8px 0; } #packages .store-box-lower { border: 0 !important; padding: 0 20px 18px !important; } #packages .buy-btn { border: 0 !important; border-radius: 0 !important; margin-bottom: 0 !important; font-weight: 700; padding: 14px !important; } #packages .buy-btn.disabled { opacity: .55; } /* Standalone featured package banner (server select page) */ .featured-pkg { background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; overflow: hidden; margin-bottom: 28px; } .featured-pkg .featured-header { background: var(--brand-gradient); color: #1a0e00; font-weight: 700; text-align: center; padding: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .featured-pkg .store-box-header { border: 0 !important; border-radius: 0 !important; margin-top: 0 !important; } .featured-pkg img { width: 100%; display: block; } .featured-pkg .buy-btn { border-radius: 0 !important; border: 0 !important; font-weight: 700; } @media (max-width: 767px) { #packages { grid-template-columns: 1fr; } } /* ========================================================================== Frontpage "Why Donate?" info section Markup for this lives in the admin's Frontpage content field (TinyMCE strips