/* ===================================================================== MIDNIGHT CLUB GARAGE — Override de tema (se carga al FINAL del ) ===================================================================== Objetivo: darle el estilo "Midnight Club" (negro absoluto, azules eléctricos, platas, alto contraste) al HOME público y al DASHBOARD del usuario (NO afecta al admin). Este archivo SOLO se sobrepone a los estilos existentes: no cambia la estructura del HTML y mantiene todas las reglas del template. Se basa en redefinir las variables del tema y agregar toques premium. ▸ Cómo REVERTIR: elimina la etiqueta de css/midnight-club.css en resources/views/templates/basic/layouts/app.blade.php (o borra este archivo). Todo vuelve al estilo original. ▸ Cómo EDITAR: modifica únicamente este archivo. ▸ Fuentes: Eurostile local en assets/font (EuroStyle Normal.ttf y eurostile.TTF). ===================================================================== */ /* --------------------------------------------------------------------- 1) FUENTES — Eurostile (copias locales) --------------------------------------------------------------------- */ @font-face { font-family: "Eurostile"; src: url("../../../font/eurostile.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Eurostile"; src: url("../../../font/eurostile.TTF") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- 2) VARIABLES DEL TEMA → paleta Midnight Club --------------------------------------------------------------------- */ :root { /* Azules eléctricos */ --mc-blue-100: #8ed9ff; --mc-blue-200: #66c7ff; --mc-blue-300: #3aa7ff; --mc-blue-400: #2e8cff; --mc-blue-500: #1e6fff; --mc-blue-600: #005bff; --mc-blue-700: #0044c7; /* Plateados */ --mc-silver-100: #ffffff; --mc-silver-200: #f2f4f7; --mc-silver-300: #d8dde2; --mc-silver-400: #c8cdd3; --mc-silver-500: #a7b0ba; --mc-silver-600: #838c98; /* Fondos */ --mc-black: #000000; --mc-bg: #050608; --mc-panel: #101318; --mc-panel-2: #161b21; --mc-border: rgba(102, 199, 255, 0.18); /* Sobreescribir variables del tema (main.css / color.php) */ --base-h: 214; --base-s: 100%; --base-l: 56%; --base: var(--base-h) var(--base-s) var(--base-l); --color: #1e6fff; --base-h-2: 205; --base-s-2: 100%; --base-l-2: 71%; --base-2: var(--base-h-2) var(--base-s-2) var(--base-l-2); --secondColor: #66c7ff; --primary-h: 214; --primary-s: 100%; --primary-l: 56%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); --section-bg: 214 60% 4%; /* Tipografías */ --body-font: "Eurostile", "Exo 2", "Sora", sans-serif; --heading-font: "Eurostile", "Exo 2", "Chakra Petch", sans-serif; } /* --------------------------------------------------------------------- 3) BASE — fondo negro/azul oscuro y tipografía --------------------------------------------------------------------- */ html { background-color: var(--mc-black); } body { font-family: var(--body-font); color: rgba(255, 255, 255, 0.88); background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(30, 111, 255, 0.22) 0%, rgba(5, 6, 8, 0) 55%), radial-gradient(ellipse 90% 50% at 100% 110%, rgba(0, 91, 255, 0.16) 0%, rgba(5, 6, 8, 0) 60%), linear-gradient(180deg, #050608 0%, #000000 100%) fixed; } h1, h2, h3, h4, h5, h6, .navbar, .nav-link, .dropdown-item, .btn, .cmn--btn, .form-control, .form--control, input, textarea, select, .table, .card-title, .modal-title, .dashboard-widget__number, .footer-item__title, .breadcrumb__title, .pagination, .odometer { font-family: var(--heading-font); } ::selection { background: rgba(30, 111, 255, 0.55); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #050608; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1e6fff, #0044c7); border-radius: 10px; border: 2px solid #050608; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #66c7ff, #1e6fff); } /* Enlaces */ a { color: var(--mc-blue-200); -webkit-transition: color 0.25s ease, text-shadow 0.25s ease; transition: color 0.25s ease, text-shadow 0.25s ease; } a:hover { color: var(--mc-blue-100); text-shadow: 0 0 12px rgba(102, 199, 255, 0.55); } /* --------------------------------------------------------------------- 4) HEADER / NAVEGACIÓN --------------------------------------------------------------------- */ .header { border-bottom: 1px solid transparent; } .header.fixed-header { background: rgba(5, 6, 8, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mc-border); } @media (max-width: 1199px) { .header { background: rgba(5, 6, 8, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mc-border); } } .header .nav-menu .nav-item .nav-link, .header .nav-item .nav-link { color: var(--mc-silver-300) !important; letter-spacing: 0.4px; text-transform: uppercase; } .header .nav-menu .nav-item.active .nav-link, .header .nav-menu .nav-item:hover .nav-link, .header .nav-item.active .nav-link, .header .nav-item .nav-link:hover { color: var(--mc-blue-200) !important; text-shadow: 0 0 14px rgba(102, 199, 255, 0.6); } .header .nav-menu .nav-item .nav-link::before, .header .nav-item .nav-link::before { border-color: var(--mc-blue-300) !important; } .header .dropdown-menu { background: var(--mc-panel); border: 1px solid var(--mc-border); border-radius: 12px; -webkit-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); } .header .dropdown-menu .dropdown-item, .header .dropdown-menu .dropdown-menu__link { color: var(--mc-silver-300); } .header .dropdown-menu .dropdown-item:hover, .header .dropdown-menu .dropdown-menu__link:hover, .header .dropdown-menu .dropdown-menu__link.active { background: rgba(30, 111, 255, 0.14); color: var(--mc-blue-100); } .header .navbar-brand img { -webkit-filter: drop-shadow(0 0 10px rgba(102, 199, 255, 0.35)); filter: drop-shadow(0 0 10px rgba(102, 199, 255, 0.35)); } .header-cart .link { color: var(--mc-blue-200); } .header-cart .cart-number { background: linear-gradient(180deg, #66c7ff, #1e6fff); color: #000; font-weight: 700; } /* --------------------------------------------------------------------- 5) BOTONES — azul degradado + glow (Midnight Club) --------------------------------------------------------------------- */ .cmn--btn { border-radius: 10px; text-transform: uppercase; letter-spacing: 1px; border: 1px solid rgba(142, 217, 255, 0.6) !important; background: linear-gradient(180deg, #66c7ff 0%, #2e8cff 40%, #1e6fff 72%, #005bff 100%) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 18px rgba(30, 111, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45); box-shadow: 0 0 18px rgba(30, 111, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cmn--btn:hover, .cmn--btn.active { color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-filter: brightness(1.12); filter: brightness(1.12); -webkit-box-shadow: 0 0 28px rgba(102, 199, 255, 0.6), 0 8px 22px rgba(0, 0, 0, 0.55); box-shadow: 0 0 28px rgba(102, 199, 255, 0.6), 0 8px 22px rgba(0, 0, 0, 0.55); } .cmn--btn::before, .cmn--btn::after { display: none; } .btn-outline--base { background: rgba(30, 111, 255, 0.06) !important; border: 1px solid rgba(102, 199, 255, 0.55) !important; color: var(--mc-blue-100) !important; text-transform: uppercase; letter-spacing: 1px; -webkit-box-shadow: inset 0 0 14px rgba(30, 111, 255, 0.15), 0 0 10px rgba(30, 111, 255, 0.2); box-shadow: inset 0 0 14px rgba(30, 111, 255, 0.15), 0 0 10px rgba(30, 111, 255, 0.2); } .btn-outline--base:hover { background: rgba(30, 111, 255, 0.18) !important; border-color: var(--mc-blue-100) !important; color: #fff !important; -webkit-box-shadow: 0 0 22px rgba(102, 199, 255, 0.5); box-shadow: 0 0 22px rgba(102, 199, 255, 0.5); } /* --------------------------------------------------------------------- 6) BANNER (hero) --------------------------------------------------------------------- */ .banner-section::before { background: linear-gradient(115deg, rgba(0, 15, 40, 0.9) 0%, rgba(0, 43, 112, 0.72) 45%, rgba(5, 6, 8, 0.55) 100%); opacity: 0.9; } .banner-content__title { text-transform: uppercase; letter-spacing: 2px; background: linear-gradient(180deg, #ffffff 0%, #f2f4f7 30%, #d5dae0 60%, #a7b0ba 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-filter: drop-shadow(0 0 18px rgba(102, 199, 255, 0.35)); filter: drop-shadow(0 0 18px rgba(102, 199, 255, 0.35)); } .banner-content__title span { background: linear-gradient(180deg, #8ed9ff 0%, #59c2ff 30%, #2e8cff 60%, #1e6fff 85%, #005bff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; -webkit-filter: drop-shadow(0 0 16px rgba(46, 140, 255, 0.5)); filter: drop-shadow(0 0 16px rgba(46, 140, 255, 0.5)); } .banner-content__subtitle { color: var(--mc-silver-300); } /* --------------------------------------------------------------------- 7) TÍTULOS DE SECCIÓN --------------------------------------------------------------------- */ .section-heading__title, .section-title { text-transform: uppercase; letter-spacing: 1px; position: relative; } .section-heading__title { color: #fff; } .section-heading__title::after, .section-title::after { content: ""; display: block; width: 70px; height: 3px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, #66c7ff, #1e6fff, transparent); -webkit-box-shadow: 0 0 10px rgba(30, 111, 255, 0.6); box-shadow: 0 0 10px rgba(30, 111, 255, 0.6); } .section-heading.style-center .section-heading__title::after { margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------- 8) TARJETAS / PANELES --------------------------------------------------------------------- */ .custom--card, .card, .panel { background: var(--mc-panel) !important; border: 1px solid var(--mc-border); border-radius: 18px !important; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .custom--card .card--header, .custom--card .card--footer, .card-header, .card-footer { background: rgba(22, 27, 33, 0.9) !important; border-color: rgba(102, 199, 255, 0.12) !important; } .custom--card .card-title, .card-title { color: #fff; } /* --------------------------------------------------------------------- 9) DASHBOARD DEL USUARIO --------------------------------------------------------------------- */ .dashboard__right { background: radial-gradient(ellipse 90% 60% at 50% -20%, rgba(30, 111, 255, 0.14) 0%, rgba(5, 6, 8, 0) 55%), linear-gradient(180deg, #050608 0%, #000000 100%) !important; } .dashboard .dashboard-header { background-color: var(--mc-panel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mc-border); } /* Fondo azul (igual que el banner) en el cuerpo del dashboard */ .dashboard .dashboard-body { background: linear-gradient(115deg, rgba(0, 15, 40, 0.9) 0%, rgba(0, 43, 112, 0.72) 45%, rgba(5, 6, 8, 0.55) 100%); } /* Widgets del dashboard: más juntos (menos gutter) y 2 por fila en móvil */ .dashboard-widget-wrapper { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; } @media (max-width: 575.98px) { .dashboard-widget-wrapper .col-xsm-6 { flex: 0 0 auto; width: 50%; } } .dashboard .sidebar-menu { background-color: var(--mc-panel); border-right: 1px solid var(--mc-border); } .dashboard .sidebar-menu-list__link { color: var(--mc-silver-400); border-left: 2px solid transparent; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .dashboard .sidebar-menu-list__link:hover { color: var(--mc-blue-100); background: rgba(30, 111, 255, 0.1); } .dashboard .sidebar-menu-list__link.active { color: var(--mc-blue-100); background: rgba(30, 111, 255, 0.14); border-left-color: var(--mc-blue-300); text-shadow: 0 0 10px rgba(102, 199, 255, 0.5); } .dashboard .sidebar-menu-list__item.has-dropdown .sidebar-submenu { background: rgba(0, 0, 0, 0.25); } .dashboard .dashboard-widget { background-color: var(--mc-panel) !important; border: 1px solid var(--mc-border); border-radius: 18px; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .dashboard .dashboard-widget:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: rgba(102, 199, 255, 0.5); -webkit-box-shadow: 0 0 26px rgba(30, 111, 255, 0.35), 0 14px 30px rgba(0, 0, 0, 0.55); box-shadow: 0 0 26px rgba(30, 111, 255, 0.35), 0 14px 30px rgba(0, 0, 0, 0.55); } .dashboard .dashboard-widget__icon { background: rgba(30, 111, 255, 0.14); border: 1px solid rgba(102, 199, 255, 0.3); color: var(--mc-blue-200); } .dashboard .dashboard-widget__text { color: var(--mc-silver-500); text-transform: uppercase; letter-spacing: 1px; } .dashboard .dashboard-widget__number { color: #fff; text-shadow: 0 0 14px rgba(102, 199, 255, 0.4); } /* --------------------------------------------------------------------- 10) TABLAS --------------------------------------------------------------------- */ .table { color: rgba(255, 255, 255, 0.85); } .table thead th { color: var(--mc-blue-200); text-transform: uppercase; letter-spacing: 0.6px; border-color: rgba(102, 199, 255, 0.15) !important; } .table td, .table th { border-color: rgba(255, 255, 255, 0.08) !important; } .table-striped tbody tr:nth-of-type(odd), .table--responsive tbody tr:hover { background-color: rgba(30, 111, 255, 0.05); } /* --------------------------------------------------------------------- 11) FORMULARIOS --------------------------------------------------------------------- */ .form-control, .form--control, .form-select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], textarea, select { background-color: var(--mc-panel) !important; border: 1px solid rgba(102, 199, 255, 0.22) !important; color: #fff !important; border-radius: 10px !important; } .form-control:focus, .form--control:focus { background-color: var(--mc-panel) !important; border-color: var(--mc-blue-300) !important; -webkit-box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.2) !important; box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.2) !important; color: #fff !important; } .form-control::placeholder { color: var(--mc-silver-600); } /* --------------------------------------------------------------------- 12) BADGES / ETIQUETAS --------------------------------------------------------------------- */ .badge--base { background-color: rgba(30, 111, 255, 0.18) !important; color: var(--mc-blue-100) !important; } .badge--success { background-color: rgba(46, 204, 113, 0.16) !important; color: #2ecc71 !important; } .badge--danger { background-color: rgba(231, 76, 60, 0.16) !important; color: #e74c3c !important; } .badge--warning { background-color: rgba(241, 196, 15, 0.16) !important; color: #f1c40f !important; } /* --------------------------------------------------------------------- 13) BREADCRUMB --------------------------------------------------------------------- */ .breadcrumb, .breadcrumbs { background: rgba(16, 19, 24, 0.6) !important; border: 1px solid var(--mc-border); border-radius: 12px; } .breadcrumb__title { color: #fff; } .breadcrumb__link, .breadcrumbs li a { color: var(--mc-blue-200); } .breadcrumb__item-text { color: var(--mc-silver-500); } /* --------------------------------------------------------------------- 14) PAGINACIÓN --------------------------------------------------------------------- */ .pagination .page-link { background: var(--mc-panel); border: 1px solid var(--mc-border); color: var(--mc-silver-300); } .pagination .page-item.active .page-link, .pagination .page-link:hover { background: linear-gradient(180deg, #1e6fff, #005bff); border-color: var(--mc-blue-300); color: #fff; -webkit-box-shadow: 0 0 14px rgba(30, 111, 255, 0.5); box-shadow: 0 0 14px rgba(30, 111, 255, 0.5); } /* --------------------------------------------------------------------- 15) FOOTER --------------------------------------------------------------------- */ .footer-area { background: #000 !important; border-top: 1px solid var(--mc-border); } .footer-item__title { color: #fff; } .footer-item__title::after { background: linear-gradient(90deg, #66c7ff, #1e6fff); } .footer-menu__link, .footer-item__desc, .footer-item .social-list a { color: var(--mc-silver-500); } .footer-menu__link:hover, .footer-item .social-list a:hover { color: var(--mc-blue-100); } /* --------------------------------------------------------------------- 16) PRELOADER --------------------------------------------------------------------- */ .preloader { background: #000 !important; } .preloader__wrapper .item { background: linear-gradient(180deg, #66c7ff, #1e6fff) !important; -webkit-box-shadow: 0 0 14px rgba(30, 111, 255, 0.7); box-shadow: 0 0 14px rgba(30, 111, 255, 0.7); } /* --------------------------------------------------------------------- 17) MODALES --------------------------------------------------------------------- */ .modal-content { background: var(--mc-panel) !important; border: 1px solid var(--mc-border); border-radius: 18px; } .modal-header, .modal-footer { border-color: rgba(102, 199, 255, 0.12) !important; } /* --------------------------------------------------------------------- 18) UTILIDADES DE TEMA (aplican el azul del nuevo --base) --------------------------------------------------------------------- */ .text--base { color: hsl(var(--base)) !important; } .bg--base { background: linear-gradient(180deg, #1e6fff, #005bff) !important; } .btn--base { background: linear-gradient(180deg, #1e6fff, #005bff) !important; border-color: var(--mc-blue-300) !important; color: #fff !important; } /* --------------------------------------------------------------------- 19) RESPONSIVE / AJUSTES FINOS --------------------------------------------------------------------- */ @media (max-width: 991px) { .header .nav-menu { background: rgba(5, 6, 8, 0.97); border-radius: 14px; border: 1px solid var(--mc-border); padding: 16px !important; } }