/* ========================================================== Professional UI Suite for Rust-France Stats Scope: pages using Version: 2.0.0 ========================================================== */ :root { --pro-surface-0: rgba(10, 12, 15, .86); --pro-surface-1: rgba(23, 27, 34, .82); --pro-surface-2: rgba(35, 40, 50, .78); --pro-border: rgba(255, 255, 255, .095); --pro-border-strong: rgba(255, 255, 255, .18); --pro-text: #f2f5f8; --pro-muted: rgba(242, 245, 248, .64); --pro-orange: #e67e22; --pro-orange-soft: rgba(230, 126, 34, .18); --pro-red: #c0392b; --pro-green: #27ae60; --pro-blue: #3498db; --pro-radius: 18px; --pro-radius-sm: 12px; --pro-shadow: 0 18px 45px rgba(0, 0, 0, .34); --pro-shadow-soft: 0 10px 25px rgba(0, 0, 0, .22); } body.pro-ui-suite { background: radial-gradient(circle at 12% 0%, rgba(230, 126, 34, .13), transparent 34rem), radial-gradient(circle at 88% 12%, rgba(52, 152, 219, .10), transparent 30rem), linear-gradient(180deg, #111419 0%, #0c0f13 52%, #090b0f 100%) !important; color: var(--pro-text); } body.pro-ui-suite #app, body.pro-ui-suite main, body.pro-ui-suite .container, body.pro-ui-suite .container-fluid { position: relative; } body.pro-ui-suite .section-heading, body.pro-ui-suite h1.section-heading, body.pro-ui-suite h2.section-heading { letter-spacing: .02em; font-weight: 800; text-transform: none; position: relative; } body.pro-ui-suite .section-heading::after { content: ""; display: block; width: 88px; height: 4px; margin-top: .8rem; border-radius: 99px; background: linear-gradient(90deg, var(--pro-orange), rgba(230,126,34,0)); } .pro-page-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: stretch; padding: 1.45rem; border: 1px solid var(--pro-border); border-radius: var(--pro-radius); background: linear-gradient(135deg, rgba(230,126,34,.18), rgba(52,58,64,.18) 44%, rgba(0,0,0,.28)), rgba(16, 19, 25, .76); box-shadow: var(--pro-shadow); overflow: hidden; position: relative; } .pro-page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 24%), radial-gradient(circle at 92% 0%, rgba(230,126,34,.19), transparent 22rem); opacity: .85; } .pro-page-hero > * { position: relative; z-index: 1; } .pro-hero-content { min-width: 240px; flex: 1 1 auto; } .pro-kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .7rem; padding: .38rem .7rem; border: 1px solid var(--pro-border); border-radius: 999px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.82); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .pro-page-hero h1, .pro-page-hero h2 { margin: 0; font-weight: 850; letter-spacing: -.035em; line-height: 1.04; } .pro-hero-subtitle { margin: .72rem 0 0; max-width: 760px; color: var(--pro-muted); font-size: 1rem; } .pro-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; } .pro-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: .75rem; min-width: min(440px, 100%); } .pro-stat-tile { display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: .95rem; border: 1px solid var(--pro-border); border-radius: 16px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .pro-stat-value { color: #fff; font-size: 1.55rem; font-weight: 850; line-height: 1; } .pro-stat-label { margin-top: .35rem; color: var(--pro-muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .pro-stat-hint { margin-top: .35rem; color: rgba(255,255,255,.46); font-size: .74rem; } body.pro-ui-suite .card, body.pro-ui-suite .stat-card, body.pro-ui-suite .profile-section-card, body.pro-ui-suite .privacy-card, body.pro-ui-suite .recruitment-card, body.pro-ui-suite .clan-card, body.pro-ui-suite .member-list-card, body.pro-ui-suite .clan-management-card, body.pro-ui-suite .server-selection-card, body.pro-ui-suite .friends-container, body.pro-ui-suite .form-section { border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius) !important; background: linear-gradient(180deg, rgba(30,35,43,.83), rgba(16,19,24,.84)) !important; box-shadow: var(--pro-shadow-soft); backdrop-filter: blur(10px); } body.pro-ui-suite .card:hover, body.pro-ui-suite .recruitment-card:hover, body.pro-ui-suite .clan-card:hover, body.pro-ui-suite .war-card:hover { border-color: rgba(230,126,34,.26) !important; box-shadow: 0 22px 55px rgba(0,0,0,.38); } body.pro-ui-suite .card-header, body.pro-ui-suite .stat-card .card-header, body.pro-ui-suite .recruitment-card .card-header, body.pro-ui-suite .clan-card .card-header, body.pro-ui-suite .member-list-card .card-header, body.pro-ui-suite .clan-management-card .card-header { border-bottom: 1px solid var(--pro-border) !important; background: rgba(255,255,255,.045) !important; border-radius: calc(var(--pro-radius) - 1px) calc(var(--pro-radius) - 1px) 0 0 !important; } body.pro-ui-suite .card-footer, body.pro-ui-suite .recruitment-card .card-footer, body.pro-ui-suite .clan-card .card-footer { border-top: 1px solid var(--pro-border) !important; background: rgba(0,0,0,.18) !important; border-radius: 0 0 calc(var(--pro-radius) - 1px) calc(var(--pro-radius) - 1px) !important; } body.pro-ui-suite .btn { border-radius: 12px; font-weight: 750; letter-spacing: .01em; box-shadow: 0 8px 18px rgba(0,0,0,.16); } body.pro-ui-suite .btn-primary { background: linear-gradient(135deg, #e67e22, #bd5e13) !important; border-color: rgba(255,255,255,.12) !important; } body.pro-ui-suite .btn-info { background: linear-gradient(135deg, #3498db, #1f6fa7) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; } body.pro-ui-suite .btn-success { background: linear-gradient(135deg, #27ae60, #167944) !important; border-color: rgba(255,255,255,.12) !important; } body.pro-ui-suite .btn-danger { background: linear-gradient(135deg, #c0392b, #852216) !important; border-color: rgba(255,255,255,.12) !important; } body.pro-ui-suite .btn:hover { transform: translateY(-1px); } body.pro-ui-suite .form-control, body.pro-ui-suite .form-select, body.pro-ui-suite textarea, body.pro-ui-suite .bootstrap-select > .dropdown-toggle { border: 1px solid var(--pro-border-strong) !important; border-radius: 12px !important; background-color: rgba(255,255,255,.06) !important; color: var(--pro-text) !important; } body.pro-ui-suite .form-control:focus, body.pro-ui-suite .form-select:focus, body.pro-ui-suite textarea:focus { border-color: rgba(230,126,34,.58) !important; box-shadow: 0 0 0 .22rem rgba(230,126,34,.15) !important; } body.pro-ui-suite .form-text, body.pro-ui-suite .text-muted, body.pro-ui-suite .text-white-50, body.pro-ui-suite .small.text-muted { color: var(--pro-muted) !important; } body.pro-ui-suite .nav-tabs { border-bottom: 1px solid var(--pro-border) !important; gap: .35rem; } body.pro-ui-suite .nav-tabs .nav-link, body.pro-ui-suite .friends-tabs .nav-link { border: 1px solid transparent !important; border-radius: 12px 12px 0 0 !important; color: var(--pro-muted) !important; font-weight: 750; } body.pro-ui-suite .nav-tabs .nav-link:hover, body.pro-ui-suite .friends-tabs .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; border-color: var(--pro-border) !important; } body.pro-ui-suite .nav-tabs .nav-link.active, body.pro-ui-suite .friends-tabs .nav-link.active { color: #fff !important; background: linear-gradient(180deg, rgba(230,126,34,.2), rgba(230,126,34,.08)) !important; border-color: rgba(230,126,34,.32) !important; } body.pro-ui-suite .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.027); --bs-table-hover-bg: rgba(230,126,34,.07); overflow: hidden; } body.pro-ui-suite .table thead th { border-bottom: 1px solid rgba(230,126,34,.24) !important; color: rgba(255,255,255,.82); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } body.pro-ui-suite .table tbody td { border-color: rgba(255,255,255,.065) !important; vertical-align: middle; } body.pro-ui-suite .list-group-item, body.pro-ui-suite .notification-item, body.pro-ui-suite .tab-content .list-group-item { border: 1px solid var(--pro-border) !important; border-radius: 14px !important; margin-bottom: .65rem; background: rgba(255,255,255,.035) !important; } body.pro-ui-suite .notification-item.unread, body.pro-ui-suite .unread-request { border-left: 4px solid var(--pro-orange) !important; background: linear-gradient(90deg, rgba(230,126,34,.14), rgba(255,255,255,.035)) !important; } body.pro-ui-suite .badge { border-radius: 999px; padding: .42em .72em; font-weight: 800; } body.pro-ui-suite .badge.bg-secondary, body.pro-ui-suite .text-bg-secondary { background-color: rgba(255,255,255,.10) !important; border: 1px solid var(--pro-border); } body.pro-ui-suite .friends-avatar, body.pro-ui-suite .search-result-avatar, body.pro-ui-suite .clan-avatar, body.pro-ui-suite .clan-avatar-large, body.pro-ui-suite .clan-war-avatar { border-color: rgba(230,126,34,.72) !important; box-shadow: 0 0 0 4px rgba(230,126,34,.10), 0 12px 24px rgba(0,0,0,.24) !important; } body.pro-ui-suite .war-card, body.pro-ui-suite .achievement-card, body.pro-ui-suite .search-result-card { border: 1px solid var(--pro-border) !important; border-radius: 16px !important; background: rgba(255,255,255,.045) !important; box-shadow: var(--pro-shadow-soft); } body.pro-ui-suite .war-score { font-weight: 900; letter-spacing: -.04em; text-shadow: 0 8px 18px rgba(0,0,0,.42); } body.pro-ui-suite .clan-header, body.pro-ui-suite .profile-header { border: 1px solid rgba(230,126,34,.22) !important; border-radius: var(--pro-radius) !important; background: linear-gradient(135deg, rgba(230,126,34,.16), rgba(0,0,0,.22)), rgba(20, 24, 31, .84) !important; box-shadow: var(--pro-shadow); padding: 1.4rem !important; } body.pro-ui-suite .pagination .page-link { border: 1px solid var(--pro-border) !important; border-radius: 10px !important; margin: 0 .15rem; background: rgba(255,255,255,.045) !important; color: rgba(255,255,255,.76) !important; } body.pro-ui-suite .pagination .page-item.active .page-link { background: linear-gradient(135deg, #e67e22, #b95512) !important; color: #fff !important; box-shadow: 0 0 0 .18rem rgba(230,126,34,.14); } body.pro-ui-suite #filterForm, body.pro-ui-suite .user-clan-status-banner { border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius) !important; background: rgba(18,22,28,.80) !important; box-shadow: var(--pro-shadow-soft); } body.pro-ui-suite .alert { border-radius: 14px; border: 1px solid var(--pro-border); box-shadow: var(--pro-shadow-soft); } body.pro-ui-suite .pro-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } body.pro-ui-suite .pro-mini-card { border: 1px solid var(--pro-border); border-radius: 16px; padding: 1rem; background: rgba(255,255,255,.045); } @media (max-width: 992px) { .pro-page-hero { flex-direction: column; } .pro-hero-stats { grid-template-columns: repeat(3, 1fr); min-width: 0; } body.pro-ui-suite .pro-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 576px) { .pro-page-hero { padding: 1rem; } .pro-hero-stats { grid-template-columns: 1fr; } .pro-page-hero h1, .pro-page-hero h2 { font-size: 1.65rem; } body.pro-ui-suite .container, body.pro-ui-suite .container-fluid { padding-left: .85rem; padding-right: .85rem; } body.pro-ui-suite .friends-actions, body.pro-ui-suite .action-buttons, .pro-hero-actions { width: 100%; } body.pro-ui-suite .friends-actions .btn, body.pro-ui-suite .action-buttons .btn, .pro-hero-actions .btn { flex: 1 1 auto; } }