/* ========================================================================== Freebuff · Hoja de estilos personalizada del sitio Diseño: "simple · rounded · acentos violeta pastel · dark" -------------------------------------------------------------------------- Se carga desde resources/views/custom/head.blade.php en el de todas las páginas públicas, después de Bootstrap y del tema activo (pear). ========================================================================== */ :root, [data-bs-theme=light], [data-bs-theme=dark] { --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25); /* --- Esquinas redondeadas (design "rounded") --- */ --bs-border-radius: 0.85rem; --bs-border-radius-sm: 0.6rem; --bs-border-radius-lg: 1.1rem; --bs-border-radius-xl: 1.35rem; --bs-border-radius-2xl: 1.75rem; --bs-card-border-radius: 1.1rem; --bs-card-inner-border-radius: calc(1.1rem - 1px); --bs-modal-border-radius: 1.25rem; --bs-list-group-border-radius: 1rem; } img { max-width: 100%; height: auto; } ::selection { background: rgba(177, 151, 252, 0.35); } /* ========================================================================== MODO OSCURO · violeta pastel sobre fondo oscuro ========================================================================== */ body[data-bs-theme=dark] { --bs-body-bg: #0f0a1f; --bs-body-bg-rgb: 15, 10, 31; --bs-body-color: #ede7fb; --bs-body-color-rgb: 237, 231, 251; --bs-body-secondary-bg: #141029; --bs-tertiary-bg: #1a1230; --bs-emphasis-color: #ede7fb; --bs-emphasis-color-rgb: 237, 231, 251; --bs-secondary-color: rgba(237, 231, 251, 0.72); --bs-secondary-color-rgb: 237, 231, 251; --bs-card-bg: #171129; --bs-card-cap-bg: rgba(177, 151, 252, 0.06); --bs-card-border-color: rgba(177, 151, 252, 0.16); --bs-border-color: rgba(177, 151, 252, 0.16); --bs-border-color-translucent: rgba(177, 151, 252, 0.16); --bs-dropdown-bg: #171129; --bs-dropdown-border-color: rgba(177, 151, 252, 0.16); --bs-dropdown-link-active-color: #221537; --bs-list-group-bg: transparent; --bs-list-group-active-color: #221537; --bs-list-group-action-hover-bg: rgba(177, 151, 252, 0.1); --bs-pagination-active-color: #221537; /* Fondo con un tenue resplandor violeta arriba */ background: radial-gradient(1100px 480px at 50% -120px, rgba(177, 151, 252, 0.1), transparent 60%), var(--bs-body-bg); } body:not([data-bs-theme=dark]) { --bs-body-bg: #f8f6fd; --bs-body-bg-rgb: 248, 246, 253; --bs-body-color: #2a2242; --bs-body-color-rgb: 42, 34, 66; --bs-body-secondary-bg: #efeafb; --bs-tertiary-bg: #ffffff; --bs-card-bg: #ffffff; --bs-card-border-color: rgba(124, 92, 224, 0.18); --bs-border-color: rgba(124, 92, 224, 0.2); --bs-border-color-translucent: rgba(124, 92, 224, 0.2); --bs-dropdown-link-active-color: #ffffff; --bs-list-group-active-color: #ffffff; --bs-pagination-active-color: #ffffff; background: radial-gradient(1100px 480px at 50% -120px, rgba(124, 92, 224, 0.08), transparent 60%), var(--bs-body-bg); } /* ========================================================================== Tipografía ========================================================================== */ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; } h1 { font-weight: 800; } /* --- Cabecera de página (tienda) --- */ .page-header { position: relative; } .page-title { display: inline-block; position: relative; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; padding-bottom: 0.55rem; margin-bottom: 0.5rem; } .page-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 4px; border-radius: 50rem; background: linear-gradient(90deg, #8b6fe8, #b197fc); opacity: 0.9; } .page-title i { color: var(--bs-primary); margin-right: 0.4rem; } .page-subtitle { color: var(--bs-secondary-color); font-size: 1.05rem; max-width: 65ch; } /* ========================================================================== Hero de la home · resplandor y título degradado ========================================================================== */ .hero-section { position: relative; background: radial-gradient(900px 420px at 50% 0%, rgba(177, 151, 252, 0.18), transparent 65%), radial-gradient(600px 320px at 85% 100%, rgba(139, 111, 232, 0.12), transparent 60%); } .hero-title { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(120deg, #ede7fb 0%, #b197fc 55%, #8b6fe8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .server-pill { box-shadow: 0 0 26px rgba(177, 151, 252, 0.3); } .pulse-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #5ce07c; box-shadow: 0 0 0 0 rgba(92, 224, 124, 0.55); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(92, 224, 124, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(92, 224, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 224, 124, 0); } } /* ========================================================================== Componentes · esquinas redondeadas y detalles violeta ========================================================================== */ /* --- Tarjetas --- */ .card { border-color: var(--bs-card-border-color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); } .card-header, .card-footer { background-color: var(--bs-card-cap-bg); } /* --- Botones: píldora + degradado sutil --- */ .btn { --bs-btn-border-radius: 50rem; font-weight: 600; letter-spacing: 0.01em; } .btn-primary { --bs-btn-color: var(--bs-primary-color-contrast); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary-color-contrast); --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb); --bs-btn-active-color: var(--bs-primary-color-contrast); --bs-btn-active-bg: var(--bs-btn-primary-active-bg); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-disabled-color: var(--bs-primary-color-contrast); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); box-shadow: 0 6px 18px rgba(139, 111, 232, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(139, 111, 232, 0.42); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary-color-contrast); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-primary-color-contrast); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-link { --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb); } /* --- Formularios --- */ .form-control, .form-select, .input-group-text { border-radius: 0.8rem; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary-border-subtle); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* --- Navbar: cristal esmerilado + enlaces píldora --- */ .navbar { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(15, 10, 31, 0.5); border-bottom: 1px solid rgba(177, 151, 252, 0.12); } body:not([data-bs-theme=dark]) .navbar { background: rgba(248, 246, 253, 0.72); } .navbar .nav-link { border-radius: 50rem; padding-inline: 1rem; transition: background-color 0.15s ease, color 0.15s ease; } .navbar .nav-link:hover { background: rgba(177, 151, 252, 0.16); } .navbar .btn { border-radius: 50rem; } /* --- Menús desplegables --- */ .dropdown-menu { border-radius: 1rem; padding: 0.5rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); } .dropdown-item { border-radius: 0.65rem; } .dropdown-menu, .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--bs-primary); } /* --- Enlaces de navegación activos --- */ .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); --bs-nav-pills-link-active-color: var(--bs-primary-color-contrast); } /* --- Acordeón --- */ .accordion { --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-border-color: var(--bs-primary-border-subtle); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } [data-bs-theme=dark] .accordion { --bs-accordion-active-color: #fff; } [data-bs-theme=dark] .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* --- Paginación --- */ .pagination { --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); } .page-link { border-radius: 0.65rem; } /* --- Barras de progreso con degradado violeta --- */ .progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); border-radius: 50rem; background-color: rgba(177, 151, 252, 0.12); } .progress-bar { background: linear-gradient(90deg, #8b6fe8, #b197fc); } /* --- Listas de grupo --- */ .list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); border-radius: var(--bs-list-group-border-radius); } .list-group-item { border: 0; margin-bottom: 0.25rem; border-radius: 0.75rem; transition: background-color 0.15s ease, color 0.15s ease; } .list-group-item:hover { background: rgba(177, 151, 252, 0.1); } .list-group-item + .list-group-item { border-top: 0; } /* --- Modales --- */ .modal-content { border-radius: var(--bs-modal-border-radius); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } /* --- Alertas --- */ .alert { border-radius: var(--bs-border-radius-lg); } /* --- Botón de cerrar --- */ .btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* --- Texto sobre fondo primary --- */ .text-bg-primary { color: var(--bs-primary-color-contrast) !important; } .link-primary:hover, .link-primary:focus { color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } /* ========================================================================== TIENDA · tarjetas de paquetes ========================================================================== */ .package-card { border-radius: 1.25rem; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .package-card:hover { transform: translateY(-4px); border-color: rgba(177, 151, 252, 0.5); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(177, 151, 252, 0.25); } .package-card-image { position: relative; } .package-card-image img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.35s ease; } .package-card:hover .package-card-image img { transform: scale(1.06); } .discount-badge { position: absolute; top: 0.75rem; right: 0.75rem; background: linear-gradient(135deg, #8b6fe8, #b197fc); color: #221537; font-weight: 700; font-size: 0.8rem; border-radius: 50rem; padding: 0.45em 0.85em; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .package-category { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-primary); background: rgba(177, 151, 252, 0.12); padding: 0.3em 0.75em; border-radius: 50rem; margin-bottom: 0.65rem; } .package-desc { color: var(--bs-secondary-color); font-size: 0.9rem; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bs-primary); } .price-old { color: var(--bs-secondary-color); font-size: 0.9rem; } /* ========================================================================== TIENDA · ofertas de crédito ========================================================================== */ .offer-card { border-radius: 1.25rem; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .offer-card:hover { transform: translateY(-4px); border-color: rgba(177, 151, 252, 0.5); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(177, 151, 252, 0.25); } .offer-image { max-height: 72px; object-fit: contain; } .offer-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #221537; background: linear-gradient(135deg, #b197fc, #8b6fe8); box-shadow: 0 8px 20px rgba(139, 111, 232, 0.35); } .offer-name { font-size: 1.1rem; font-weight: 700; color: var(--bs-body-color); } .offer-price { font-size: 1.3rem; font-weight: 800; color: var(--bs-primary); } /* ========================================================================== TIENDA · sidebar ========================================================================== */ .shop-user-card { background: var(--bs-card-bg); border: 1px solid var(--bs-card-border-color); border-radius: 1.25rem; padding: 0.25rem; } .avatar-ring { width: 60px; height: 60px; border-radius: 50%; padding: 3px; flex-shrink: 0; background: linear-gradient(135deg, #8b6fe8, #b197fc); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(139, 111, 232, 0.35); } .avatar-ring img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bs-card-bg); } .money-badge { background: linear-gradient(135deg, rgba(177, 151, 252, 0.2), rgba(139, 111, 232, 0.25)); color: var(--bs-primary); border: 1px solid rgba(177, 151, 252, 0.3); font-weight: 700; border-radius: 50rem; } .widget-card .card-header { font-weight: 700; } .shop-categories .list-group-item i { margin-right: 0.55rem; width: 1.1em; text-align: center; } /* --- Tarjeta de bienvenida (home de la tienda) --- */ .welcome-card { position: relative; overflow: hidden; border-radius: 1.25rem; } .welcome-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #8b6fe8, #b197fc, #8b6fe8); } /* ========================================================================== TIENDA · carrito ========================================================================== */ .cart-items { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--bs-border-radius-lg); } .cart-items thead th { background-image: linear-gradient(90deg, rgba(139, 111, 232, 0.35), rgba(177, 151, 252, 0.2)); border: 0; font-weight: 700; letter-spacing: 0.02em; } .cart-items thead th:first-child { border-start-start-radius: var(--bs-border-radius-lg); } .cart-items thead th:last-child { border-start-end-radius: var(--bs-border-radius-lg); } .cart-items tbody tr { transition: background-color 0.15s ease; } .cart-items tbody tr:hover { background: rgba(177, 151, 252, 0.05); } .cart-items input[type="number"] { width: 84px; border-radius: 0.6rem; } /* ========================================================================== CARRITO · botón flotante y toast (compra por AJAX) ========================================================================== */ .shop-cart-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1050; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #221537; background: linear-gradient(135deg, #b197fc, #8b6fe8); box-shadow: 0 10px 26px rgba(139, 111, 232, 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease; } .shop-cart-float:hover { transform: translateY(-2px) scale(1.04); color: #221537; box-shadow: 0 14px 32px rgba(139, 111, 232, 0.55); } .shop-cart-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 50rem; background: #221537; color: #b197fc; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bs-body-bg); } .shop-cart-count.bump { animation: cartBump 0.4s ease; } @keyframes cartBump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* Toast de confirmación */ .shop-toast-container { z-index: 1060; bottom: 5.5rem !important; } #cartToast { background: var(--bs-card-bg); border: 1px solid rgba(177, 151, 252, 0.25); border-radius: 1rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); color: var(--bs-body-color); } /* --- Respeta la preferencia de menos movimiento --- */ @media (prefers-reduced-motion: reduce) { .package-card, .offer-card, .btn-primary, .navbar .nav-link, .pulse-dot, .shop-cart-float, .shop-cart-count { transition: none; animation: none; } }