/* ------------------------------------------------------------------ V-KORP — styles communs à toutes les pages : tokens, fond, sidebar, layout, verrou, badges, boutons, tooltips, modale de confirmation. Les styles propres à une page vivent dans style/.css. ------------------------------------------------------------------ */ /* Polices (Bebas Neue) et Font Awesome : chargés en dans le de chaque page (en parallèle, avec preconnect) — un @import ici les chargerait en série après ce fichier, d'où un flash à chaque page. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; cursor: url('/img/vkorp_mouse.png'), auto; } :root { --purple: #8028FF; --purple-light: #A768FF; --purple-glow: rgba(128, 40, 255, 0.35); --gold: #FFBA00; --gold-glow: rgba(255, 186, 0, 0.25); --green: #22c55e; --red: #ef4444; --dark: #0d0d0d; --card-bg: rgba(0, 0, 0, 0.55); --border: rgba(128, 40, 255, 0.2); --text-muted: rgba(255, 255, 255, 0.35); --sidebar-w: 280px; /* Couleur signature de chaque jeu (menu, page Players…). */ --gmod: #0081FF; --rust: #FF8A3C; --7days: #ef4444; } html, body { min-height: 100vh; background: var(--dark); color: #fff; font-family: 'Bebas Neue', sans-serif; overflow-x: hidden; } /* Sélection de texte aux couleurs V-KORP. */ ::selection { background: rgba(128, 40, 255, 0.55); color: #fff; } /* -- BACKGROUND -- */ .bg { position: fixed; inset: -30px; background: url('/img/vkorp_background.jpg') center center / cover no-repeat; z-index: 0; } .bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); } .grid-overlay { position: fixed; inset: 0; z-index: 1; background-image: linear-gradient(rgba(128, 40, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 40, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } /* -- SIDEBAR -- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 1.4rem 1rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid rgba(255, 255, 255, 0.08); } .side-logo img { width: 100px; object-fit: contain; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.9)); } .side-divider { width: calc(100% - 1.2rem); height: 1px; margin: 1.1rem 0; background: rgba(255, 255, 255, 0.1); } .side-gmod { width: 150px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8)); } .side-nav { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; flex: 1; width: 100%; } .nav-link { display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; padding: 0.65rem 0.9rem; color: rgba(255,255,255,0.65); font-size: 1.25rem; letter-spacing: 0.1em; text-decoration: none; border-radius: 8px; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .nav-link i { width: 22px; text-align: center; font-size: 1.15rem; } .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .nav-link.active i { color: var(--gold); } /* Icônes du menu aux couleurs de chaque jeu (priment sur l'or du .active). */ .side-nav .gi-gmod { color: var(--gmod); } .side-nav .gi-rust { color: var(--rust); } .side-nav .gi-7days { color: var(--7days); } /* Icônes de jeu en image : redimensionnées automatiquement, quelle que soit la taille du fichier source. */ .nav-link .game-ico { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .side-bottom { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; } .side-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; font-size: 1.05rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); overflow: hidden; white-space: nowrap; } .side-user img { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); } .side-user span { flex: 1; overflow: hidden; text-overflow: ellipsis; } .logout-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: rgba(239,68,68,0.75); font-size: 1.05rem; text-decoration: none; transition: background 0.15s, color 0.15s; } .logout-icon:hover { color: #fff; background: rgba(239,68,68,0.2); } .steam-login { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.65rem 0.9rem; background: #171a21; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #fff; font-size: 1.2rem; letter-spacing: 0.08em; text-decoration: none; transition: background 0.15s, box-shadow 0.15s; } .steam-login i { font-size: 1.2rem; } .steam-login:hover { background: #2a475e; box-shadow: 0 0 16px rgba(102, 192, 244, 0.25); } /* -- CONTENU -- */ .content { position: relative; z-index: 3; margin-left: var(--sidebar-w); min-height: 100vh; padding: 2.2rem 2.4rem; /* Apparition douce du contenu : le
est remplacé à chaque navigation fluide, l'animation rejoue à chaque changement de page. */ animation: contentIn 0.18s ease; } @keyframes contentIn { from { opacity: 0; } to { opacity: 1; } } .page-head { margin-bottom: 1.6rem; } .page-head h1 { font-size: 2.2rem; letter-spacing: 0.12em; } .page-head h1 span { color: var(--gold); } .page-head h1 i { font-size: 1.7rem; color: var(--gold); margin-right: 0.45rem; vertical-align: 2px; } .page-sub { font-size: 1.2rem; letter-spacing: 0.08em; line-height: 1.45; color: #fff; } .page-sub span { color: var(--purple); } .muted { color: var(--text-muted); font-size: 1.15rem; letter-spacing: 0.06em; } /* -- VERROU (non connecte) -- */ .locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; min-height: calc(100vh - 4.4rem); text-align: center; } .locked > i { font-size: 2.6rem; color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); } .locked h2 { font-size: 1.8rem; letter-spacing: 0.14em; } .locked p { color: var(--text-muted); font-size: 1.15rem; letter-spacing: 0.08em; } .steam-login.inline { padding: 0.6rem 1.6rem; } /* -- BADGES (statut serveur : cartes + tableau admin) -- */ .badge { display: inline-block; padding: 0.15em 0.7em; border-radius: 6px; font-size: 0.95rem; letter-spacing: 0.12em; } .badge.on { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .badge.off { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.3); } .badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.45em; vertical-align: 1px; } .badge.on::before { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s ease-in-out infinite; } .badge.off::before { background: var(--red); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* -- BOUTONS (la modale de confirmation en a besoin sur toutes les pages) -- */ .btn-mini { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.35em 0.9em; background: var(--purple); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; } .btn-mini:hover { background: #6d1fd6; box-shadow: 0 0 14px var(--purple-glow); } .btn-mini.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255,255,255,0.7); } .btn-mini.ghost:hover { background: rgba(255,255,255,0.08); box-shadow: none; color: #fff; } .btn-mini.danger.solid { background: var(--red); border: none; color: #fff; } .btn-mini.danger.solid:hover { background: #dc2626; box-shadow: 0 0 14px rgba(239,68,68,0.4); } /* -- TOOLTIPS V-KORP -- */ .has-tip { position: relative; } .has-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.35em 0.8em; background: rgba(10, 10, 12, 0.95); border: 1px solid rgba(128, 40, 255, 0.4); border-radius: 6px; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 10px var(--purple-glow); opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 50; } .has-tip::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(128, 40, 255, 0.4); opacity: 0; transition: opacity 0.12s ease; z-index: 50; } .has-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .has-tip:hover::before { opacity: 1; } /* -- MODALE CONFIRMATION -- */ .vk-modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vk-modal-overlay.open { display: flex; } .vk-modal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 380px; max-width: calc(100vw - 2rem); padding: 2rem 1.6rem 1.6rem; background: rgba(10, 10, 12, 0.95); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); text-align: center; animation: fadeUp 0.25s ease both; } .vk-modal .card-corner { position: absolute; width: 12px; height: 12px; border-color: var(--red); border-style: solid; border-width: 0; } .vk-modal .card-corner.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; } .vk-modal .card-corner.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; } .vk-modal .card-corner.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; } .vk-modal .card-corner.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; } .vk-modal i.fa-triangle-exclamation { font-size: 2.2rem; color: var(--red); text-shadow: 0 0 16px rgba(239, 68, 68, 0.4); } .vk-modal h3 { font-size: 1.5rem; letter-spacing: 0.14em; } .vk-modal p { font-size: 1.15rem; letter-spacing: 0.06em; color: var(--text-muted); line-height: 1.4; } .vk-modal-actions { display: flex; gap: 0.7rem; margin-top: 0.3rem; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* -- RESPONSIVE -- */ @media (max-width: 720px) { .sidebar { width: 68px; padding: 1rem 0.5rem; } .side-logo img { width: 44px; } .side-gmod { width: 44px; } .nav-link { justify-content: center; } .nav-link span { display: none; } .steam-login span { display: none; } .content { margin-left: 68px; padding: 1.4rem 1rem; } }