/* ========================================================= KRAFEX CLUB SIDEBAR NEON PREMIUM ========================================================= Archivo: css/sidebarneon.css Diseñado específicamente para: club.html IMPORTANTE: Este archivo sobrescribe el sidebar original solamente cuando club.html lo carga. PALETA BASE KRAFEX ───────────────────────────────────────────────────────── Negro #0A0A0B Gris #2A2A2E Marfil #F5F1E8 Dorado #D6C3A3 Verde #0F3D2E Rosa #CFA6A1 NEÓN COMPLEMENTARIO ───────────────────────────────────────────────────────── Cyan #00E5FF Purple #9B5CFF Pink #FF3CAC Green #39FF88 ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ :root{ /* KRAFEX ORIGINAL */ --kf-black:#0A0A0B; --kf-gray:#2A2A2E; --kf-ivory:#F5F1E8; --kf-gold:#D6C3A3; --kf-green:#0F3D2E; --kf-pink:#CFA6A1; /* NEÓN */ --kf-neon-cyan:#00E5FF; --kf-neon-purple:#9B5CFF; --kf-neon-pink:#FF3CAC; --kf-neon-green:#39FF88; /* DIMENSIONES */ --kf-sidebar-closed:60px; --kf-sidebar-open:245px; --kf-topbar:70px; /* VELOCIDAD */ --kf-sidebar-speed:.28s; } /* ========================================================= RESET DEL SIDEBAR ========================================================= */ .sidebar, .sidebar *, .sidebar *::before, .sidebar *::after{ box-sizing:border-box; } /* ========================================================= SIDEBAR PRINCIPAL ========================================================= */ .sidebar{ position:fixed !important; top:0 !important; left:0 !important; width:var(--kf-sidebar-closed) !important; height:100vh !important; z-index:9000 !important; padding-top:var(--kf-topbar) !important; margin:0 !important; background: linear-gradient( 180deg, rgba(10,10,11,.99) 0%, rgba(10,10,11,.97) 45%, rgba(8,8,10,.99) 100% ) !important; border-right: 1px solid rgba(0,229,255,.32) !important; box-shadow: 4px 0 18px rgba(0,229,255,.07), 8px 0 35px rgba(0,0,0,.45) !important; overflow-x:hidden !important; overflow-y:auto !important; transition: width var(--kf-sidebar-speed) cubic-bezier(.2,.8,.2,1), box-shadow var(--kf-sidebar-speed) ease !important; scrollbar-width:thin; scrollbar-color: var(--kf-neon-cyan) var(--kf-black); } /* ========================================================= LÍNEA NEÓN LATERAL ========================================================= */ .sidebar::after{ content:""; position:absolute; top:var(--kf-topbar); right:0; width:1px; height:calc(100% - var(--kf-topbar)); background: linear-gradient( 180deg, transparent 0%, var(--kf-neon-cyan) 20%, var(--kf-neon-purple) 50%, var(--kf-neon-pink) 75%, transparent 100% ); box-shadow: 0 0 5px rgba(0,229,255,.8), 0 0 12px rgba(155,92,255,.35); opacity:.7; pointer-events:none; } /* ========================================================= PEQUEÑA LUZ DE FONDO ========================================================= */ .sidebar::before{ content:""; position:absolute; top:70px; left:-70px; width:170px; height:300px; background: radial-gradient( circle, rgba(0,229,255,.07), transparent 68% ); pointer-events:none; opacity:.8; } /* ========================================================= SIDEBAR ABIERTO ========================================================= */ .sidebar:hover{ width:var(--kf-sidebar-open) !important; box-shadow: 5px 0 25px rgba(0,229,255,.13), 12px 0 50px rgba(155,92,255,.07), 20px 0 70px rgba(255,60,172,.035) !important; } /* ========================================================= EXPANDER ========================================================= */ .sidebar .expander{ position:relative; width:100% !important; height:58px !important; min-height:58px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; background: linear-gradient( 90deg, transparent, rgba(0,229,255,.025), transparent ); border-bottom: 1px solid rgba(214,195,163,.15) !important; } /* línea inferior */ .sidebar .expander::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:1px; background: linear-gradient( 90deg, transparent, var(--kf-neon-cyan), transparent ); opacity:.65; box-shadow: 0 0 7px rgba(0,229,255,.6); } /* ========================================================= BOTÓN MENU ========================================================= */ .sidebar .expander #btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--kf-neon-cyan) !important; font-size:27px !important; cursor:pointer; text-shadow: 0 0 5px var(--kf-neon-cyan), 0 0 12px rgba(0,229,255,.8); transition: transform .25s ease, text-shadow .25s ease; } .sidebar .expander #btn:hover{ transform: scale(1.08) rotate(90deg); text-shadow: 0 0 7px var(--kf-neon-cyan), 0 0 18px var(--kf-neon-cyan), 0 0 30px rgba(0,229,255,.6); } /* ========================================================= INICIO ========================================================= */ .sidebar > a{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; } .sidebar > a .category{ position:relative; width:100% !important; height:50px !important; min-height:50px !important; display:flex !important; align-items:center !important; padding: 0 15px !important; margin:0 !important; color:var(--kf-gold) !important; background:transparent; font-size:10px !important; font-weight:800 !important; letter-spacing:2px; text-transform:uppercase; white-space:nowrap; border-bottom: 1px solid rgba(214,195,163,.10) !important; transition: color .2s ease, background .2s ease, text-shadow .2s ease; } /* indicador */ .sidebar > a .category::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; background:var(--kf-neon-cyan); box-shadow: 0 0 7px var(--kf-neon-cyan), 0 0 14px rgba(0,229,255,.7); opacity:0; transition:.2s ease; } .sidebar > a:hover .category{ color:var(--kf-neon-cyan) !important; background: linear-gradient( 90deg, rgba(0,229,255,.07), transparent ); text-shadow: 0 0 8px rgba(0,229,255,.8); } .sidebar > a:hover .category::before{ opacity:1; } /* ========================================================= GRUPOS PRINCIPALES ========================================================= */ .sidebar .has-submenu{ position:relative !important; display:block !important; width:100% !important; height:auto !important; min-height:52px !important; margin:0 !important; padding:0 !important; list-style:none !important; border:0 !important; background:transparent; } /* ========================================================= ENLACE PRINCIPAL ========================================================= */ .sidebar .has-submenu > a{ position:relative; width:100% !important; height:52px !important; min-height:52px !important; display:flex !important; align-items:center !important; gap:13px !important; padding: 0 15px !important; margin:0 !important; color:var(--kf-gold) !important; background:transparent !important; white-space:nowrap; border-bottom: 1px solid rgba(255,255,255,.035) !important; transition: color .2s ease, background .2s ease, text-shadow .2s ease; } /* indicador lateral */ .sidebar .has-submenu > a::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; background: linear-gradient( 180deg, var(--kf-neon-cyan), var(--kf-neon-purple) ); box-shadow: 0 0 7px var(--kf-neon-cyan), 0 0 14px rgba(155,92,255,.7); opacity:0; transition:.2s ease; } /* hover */ .sidebar .has-submenu > a:hover{ color:var(--kf-ivory) !important; background: linear-gradient( 90deg, rgba(0,229,255,.075), rgba(155,92,255,.025), transparent ) !important; text-shadow: 0 0 7px rgba(0,229,255,.7); } .sidebar .has-submenu > a:hover::before{ opacity:1; } /* ========================================================= ICONOS PRINCIPALES ========================================================= */ .sidebar .has-submenu > a > .material-symbols-rounded{ flex:0 0 29px !important; width:29px !important; min-width:29px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:22px !important; color:var(--kf-gold) !important; text-shadow: 0 0 5px rgba(214,195,163,.35); transition: color .2s ease, transform .2s ease, text-shadow .2s ease; } .sidebar .has-submenu > a:hover > .material-symbols-rounded{ color:var(--kf-neon-cyan) !important; transform:scale(1.08); text-shadow: 0 0 6px var(--kf-neon-cyan), 0 0 14px rgba(0,229,255,.7); } /* ========================================================= DESCRIPTORES ========================================================= */ .sidebar .descriptor{ display:block; opacity:0; visibility:hidden; transform:translateX(-8px); pointer-events:none; color:inherit; font-size:12px !important; font-weight:700 !important; letter-spacing:.5px; white-space:nowrap; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .sidebar:hover .descriptor{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; } /* ========================================================= TOOLTIP CUANDO ESTÁ CERRADO ========================================================= */ .sidebar .tooltip{ position:absolute !important; left:70px !important; top:50% !important; transform: translateY(-50%) translateX(-7px) !important; padding: 7px 10px !important; border: 1px solid rgba(0,229,255,.45) !important; border-radius:7px !important; background: #111116 !important; color: var(--kf-neon-cyan) !important; font-size:11px !important; font-weight:700 !important; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; box-shadow: 0 0 10px rgba(0,229,255,.12), inset 0 0 10px rgba(0,229,255,.03); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .sidebar:not(:hover) .has-submenu:hover .tooltip{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0) !important; } /* ========================================================= ★ SUBMENÚ CORRECCIÓN DEL ESTIRAMIENTO ========================================================= */ .sidebar .submenu{ position:relative !important; display:none !important; width:calc(100% - 16px) !important; max-width:229px !important; height:auto !important; min-height:0 !important; margin: 5px 8px 8px !important; padding: 4px 0 !important; list-style:none !important; background: linear-gradient( 145deg, rgba(42,42,46,.88), rgba(10,10,11,.96) ) !important; border: 1px solid rgba(0,229,255,.22) !important; border-radius:10px !important; box-shadow: 0 0 10px rgba(0,229,255,.07), inset 0 0 12px rgba(0,229,255,.025) !important; overflow:hidden !important; } /* ========================================================= SUBMENÚ ABIERTO ========================================================= */ .sidebar .has-submenu.open > .submenu{ display:block !important; } .sidebar .has-submenu.active > .submenu{ display:block !important; } /* ========================================================= SUBMENÚ: LÍNEA SUPERIOR ========================================================= */ .sidebar .submenu::before{ content:""; display:block; height:1px; margin: 0 10px 3px; background: linear-gradient( 90deg, transparent, var(--kf-neon-cyan), var(--kf-neon-purple), transparent ); opacity:.55; box-shadow: 0 0 6px rgba(0,229,255,.5); } /* ========================================================= ITEMS SUBMENÚ ========================================================= */ .sidebar .submenu li{ display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; list-style:none !important; } /* ========================================================= LINKS SUBMENÚ ========================================================= */ .sidebar .submenu li a{ position:relative; width:100% !important; height:42px !important; min-height:42px !important; display:flex !important; align-items:center !important; gap:9px !important; padding: 0 10px 0 14px !important; margin:0 !important; color:#aaaeb8 !important; background:transparent !important; font-size:11px !important; font-weight:600 !important; white-space:nowrap; border-bottom: 1px solid rgba(255,255,255,.035) !important; transition: color .18s ease, background .18s ease, padding-left .18s ease, box-shadow .18s ease; } .sidebar .submenu li:last-child a{ border-bottom:0 !important; } /* ========================================================= PUNTO DEL SUBMENÚ ========================================================= */ .sidebar .submenu li a::before{ content:""; width:4px !important; height:4px !important; min-width:4px !important; min-height:4px !important; flex:0 0 4px !important; border-radius:50%; background: #5d5d65; box-shadow:none; transition:.18s ease; } /* ========================================================= HOVER SUBMENÚ ========================================================= */ .sidebar .submenu li a:hover{ color:var(--kf-ivory) !important; padding-left:18px !important; background: linear-gradient( 90deg, rgba(57,255,136,.09), rgba(0,229,255,.025), transparent ) !important; text-shadow: 0 0 7px rgba(57,255,136,.65); box-shadow: inset 2px 0 0 var(--kf-neon-green); } .sidebar .submenu li a:hover::before{ background: var(--kf-neon-green); box-shadow: 0 0 5px var(--kf-neon-green), 0 0 11px rgba(57,255,136,.7); } /* ========================================================= ICONOS SUBMENÚ ========================================================= */ .sidebar .submenu .material-symbols-rounded{ flex:0 0 19px !important; width:19px !important; min-width:19px !important; display:flex !important; align-items:center; justify-content:center; font-size:18px !important; color:var(--kf-gold) !important; text-shadow: 0 0 5px rgba(214,195,163,.25); transition: color .18s ease, transform .18s ease, text-shadow .18s ease; } .sidebar .submenu li a:hover .material-symbols-rounded{ color:var(--kf-neon-green) !important; transform:scale(1.06); text-shadow: 0 0 6px var(--kf-neon-green), 0 0 12px rgba(57,255,136,.55); } /* ========================================================= SUBMENÚ CERRADO CUANDO SIDEBAR ESTÁ CERRADO ========================================================= */ .sidebar:not(:hover) .has-submenu .submenu{ display:none !important; } /* ========================================================= EVITAR QUE ELEMENTOS DEL SUBMENÚ SE ESTIREN ========================================================= */ .sidebar .submenu, .sidebar .submenu li, .sidebar .submenu li a{ flex:none !important; flex-grow:0 !important; flex-shrink:0 !important; } /* ========================================================= CUANDO EL SIDEBAR ESTÁ CERRADO ========================================================= */ .sidebar:not(:hover) .descriptor{ opacity:0 !important; visibility:hidden !important; } /* ========================================================= EFECTO DE SECCIÓN ABIERTA ========================================================= */ .sidebar .has-submenu.open > a{ color:var(--kf-neon-cyan) !important; background: linear-gradient( 90deg, rgba(0,229,255,.055), transparent ) !important; text-shadow: 0 0 7px rgba(0,229,255,.6); } .sidebar .has-submenu.open > a::before{ opacity:1; } .sidebar .has-submenu.open > a > .material-symbols-rounded{ color:var(--kf-neon-cyan) !important; text-shadow: 0 0 7px var(--kf-neon-cyan); } /* ========================================================= ANIMACIÓN DE APERTURA ========================================================= */ .sidebar .has-submenu.open > .submenu{ animation: krafexSubmenuIn .22s ease-out; } @keyframes krafexSubmenuIn{ from{ opacity:0; transform: translateY(-5px) scale(.985); } to{ opacity:1; transform: translateY(0) scale(1); } } /* ========================================================= BRILLO DISCRETO EN ITEMS ========================================================= */ .sidebar .has-submenu:nth-of-type(2) > a:hover .material-symbols-rounded{ color:var(--kf-neon-cyan) !important; } .sidebar .has-submenu:nth-of-type(3) > a:hover .material-symbols-rounded{ color:var(--kf-neon-purple) !important; } .sidebar .has-submenu:nth-of-type(4) > a:hover .material-symbols-rounded{ color:var(--kf-neon-pink) !important; } .sidebar .has-submenu:nth-of-type(5) > a:hover .material-symbols-rounded{ color:var(--kf-neon-green) !important; } /* ========================================================= SCROLLBAR DEL SIDEBAR ========================================================= */ .sidebar::-webkit-scrollbar{ width:5px; } .sidebar::-webkit-scrollbar-track{ background: #0A0A0B; } .sidebar::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, var(--kf-neon-cyan), var(--kf-neon-purple) ); border-radius:20px; box-shadow: 0 0 6px rgba(0,229,255,.7); } .sidebar::-webkit-scrollbar-thumb:hover{ background: linear-gradient( 180deg, var(--kf-neon-pink), var(--kf-neon-cyan) ); } /* ========================================================= SELECCIÓN ========================================================= */ .sidebar ::selection{ background: rgba(0,229,255,.25); color: #fff; } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ :root{ --kf-sidebar-open:225px; } } /* ========================================================= MÓVIL ========================================================= */ @media(max-width:650px){ :root{ --kf-sidebar-closed:52px; --kf-sidebar-open:225px; --kf-topbar:62px; } .sidebar{ width: var(--kf-sidebar-closed) !important; } .sidebar:hover{ width: var(--kf-sidebar-open) !important; } .sidebar .expander{ height:54px !important; min-height:54px !important; } .sidebar > a .category{ height:46px !important; min-height:46px !important; padding-left:13px !important; } .sidebar .has-submenu > a{ height:49px !important; min-height:49px !important; padding-left:12px !important; } .sidebar .submenu{ width: calc(100% - 12px) !important; margin-left: 6px !important; margin-right: 6px !important; } .sidebar .submenu li a{ height:40px !important; min-height:40px !important; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media(max-width:400px){ :root{ --kf-sidebar-closed:50px; --kf-sidebar-open:215px; } .sidebar .has-submenu > a{ gap:10px !important; padding-left:10px !important; } .sidebar .has-submenu > a > .material-symbols-rounded{ flex-basis:26px !important; width:26px !important; min-width:26px !important; font-size:20px !important; } .sidebar .submenu li a{ font-size:10px !important; } } /* ========================================================= PROTECCIÓN CONTRA ESTIRAMIENTO ========================================================= Estas reglas son intencionales. El HTML tiene
  • directamente dentro de .sidebar. Algunos estilos globales pueden convertir esos elementos en flex/grid y deformar los submenús. ========================================================= */ .sidebar > .has-submenu{ display:block !important; position:relative !important; float:none !important; clear:both !important; } .sidebar > .has-submenu > .submenu{ position:relative !important; float:none !important; clear:both !important; } .sidebar .submenu li{ float:none !important; position:relative !important; } /* ========================================================= FIN SIDEBAR NEON ========================================================= */