/* --- ProductCard V3 estilos para cards y lista --- */
.product-card-v3 {
border: 1px solid var(--color-muted, #d6d6d6);
border-radius: 1rem;
background: linear-gradient(180deg, var(--main-bg, #fff) 80%, var(--color-terciario, #FFEFB4) 100%);
transition: box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 2px 12px var(--shadow-color, rgba(0, 0, 0, 0.08));
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* --- Estilos para el ajuste de precios en el carrito --- */
.price-container {
transition: all 0.2s ease;
padding: 8px;
border-radius: 8px;
border: 1px solid transparent;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.price-container:hover {
background: linear-gradient(135deg, var(--color-terciario, #FFEFB4) 0%, #ffffff 100%);
border-color: var(--color-secundario, #20C2D7);
transform: scale(1.02);
box-shadow: 0 2px 8px rgba(32, 194, 215, 0.2);
}
.price-container:active {
transform: scale(0.98);
}
/* Modal de ajuste de precios */
#modalAjustePrecio .modal-content {
border-radius: 1rem;
border: 2px solid var(--color-muted, #d6d6d6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
#modalAjustePrecio .modal-header {
background: linear-gradient(135deg, var(--color-primario, #E3057A) 0%, var(--color-secundario, #20C2D7) 100%);
color: white;
border-radius: 1rem 1rem 0 0;
border-bottom: none;
padding: 1.2rem;
}
#modalAjustePrecio .modal-title {
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
#modalAjustePrecio .btn-close {
filter: brightness(0) invert(1);
opacity: 0.8;
}
#modalAjustePrecio .btn-close:hover {
opacity: 1;
}
/* Información de precios */
.price-info-section {
background: linear-gradient(135deg, var(--color-terciario, #FFEFB4) 0%, #ffffff 100%);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(32, 194, 215, 0.2);
}
.price-info-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.price-info-item:last-child {
margin-bottom: 0;
}
.price-info-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.8rem;
}
.price-info-icon.original {
background-color: var(--color-muted, #d6d6d6);
color: var(--color-letra, #222);
}
.price-info-icon.current {
background-color: var(--color-secundario, #20C2D7);
color: white;
}
/* Pestañas personalizadas */
#modalAjustePrecio .nav-tabs {
border-bottom: 2px solid var(--color-muted, #d6d6d6);
margin-bottom: 0;
}
#modalAjustePrecio .nav-tabs .nav-link {
border-radius: 0.5rem 0.5rem 0 0;
margin-right: 4px;
border: 2px solid transparent;
padding: 0.75rem 1rem;
font-weight: 500;
color: var(--color-letra, #222);
background-color: #f8f9fa;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
#modalAjustePrecio .nav-tabs .nav-link:hover {
background-color: var(--color-terciario, #FFEFB4);
border-color: var(--color-secundario, #20C2D7);
transform: translateY(-2px);
}
#modalAjustePrecio .nav-tabs .nav-link.active {
background: linear-gradient(135deg, var(--color-primario, #E3057A) 0%, var(--color-secundario, #20C2D7) 100%);
color: white;
border-color: var(--color-primario, #E3057A);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(227, 5, 122, 0.3);
}
#modalAjustePrecio .nav-tabs .nav-link i {
font-size: 1.1rem;
}
/* Contenido de pestañas */
#modalAjustePrecio .tab-content {
background-color: #fff;
border-radius: 0 0.5rem 0.5rem 0.5rem;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tab-section {
border-radius: 0.5rem;
padding: 1rem;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 1px solid var(--color-muted, #d6d6d6);
}
/* Controles de entrada */
.price-input-group {
position: relative;
}
.price-input-group .form-control {
padding-left: 2.5rem;
border-radius: 0.5rem;
border: 2px solid var(--color-muted, #d6d6d6);
font-size: 1.1rem;
font-weight: 500;
transition: all 0.2s ease;
}
.price-input-group .form-control:focus {
border-color: var(--color-secundario, #20C2D7);
box-shadow: 0 0 0 0.2rem rgba(32, 194, 215, 0.25);
}
.price-input-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-primario, #E3057A);
font-size: 1rem;
z-index: 3;
}
/* Botones del modal */
#modalAjustePrecio .modal-footer {
border-top: 2px solid var(--color-muted, #d6d6d6);
padding: 1.2rem;
background-color: #f8f9fa;
border-radius: 0 0 1rem 1rem;
}
#modalAjustePrecio .btn {
border-radius: 0.5rem;
font-weight: 500;
padding: 0.6rem 1.2rem;
transition: all 0.2s ease;
}
#modalAjustePrecio .btn-primary {
background: linear-gradient(135deg, var(--color-primario, #E3057A) 0%, var(--color-secundario, #20C2D7) 100%);
border: none;
color: white;
}
#modalAjustePrecio .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(227, 5, 122, 0.3);
}
#modalAjustePrecio .btn-secondary {
background-color: var(--color-terciario, #FFEFB4);
border: 2px solid var(--color-muted, #d6d6d6);
color: var(--color-letra, #222);
}
#modalAjustePrecio .btn-secondary:hover {
background-color: var(--color-primario, #E3057A);
border-color: var(--color-primario, #E3057A);
color: white;
transform: translateY(-2px);
}
/* Botones de descuento rápido */
.quick-discount-btn {
background: linear-gradient(135deg, var(--color-terciario, #FFEFB4) 0%, #ffffff 100%);
border: 2px solid var(--color-secundario, #20C2D7);
color: var(--color-secundario, #20C2D7);
font-weight: 600;
transition: all 0.2s ease;
}
.quick-discount-btn:hover {
background: var(--color-secundario, #20C2D7);
color: white;
transform: scale(1.05);
}
/* Indicadores de cálculo en tiempo real */
.real-time-calc {
background: linear-gradient(135deg, rgba(32, 194, 215, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%);
border-radius: 0.3rem;
padding: 0.5rem;
margin-top: 0.5rem;
border-left: 3px solid var(--color-secundario, #20C2D7);
font-weight: 500;
color: var(--color-letra, #222);
}
/* Indicadores de precio modificado */
.price-indicator {
animation: pulseGlow 2s ease-in-out infinite;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.price-indicator.warning {
color: var(--color-primario, #E3057A) !important;
}
.price-indicator.success {
color: var(--color-secundario, #20C2D7) !important;
}
@keyframes pulseGlow {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
/* Tooltips personalizados */
.price-container[title]:hover::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-letra, #222);
color: white;
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.8rem;
white-space: nowrap;
z-index: 1000;
margin-bottom: 0.25rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.price-container[title]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--color-letra, #222);
z-index: 1000;
}
/* Efectos de entrada para elementos del modal */
.modal.fade .modal-dialog {
transform: scale(0.8) translateY(-50px);
transition: all 0.3s ease;
}
.modal.show .modal-dialog {
transform: scale(1) translateY(0);
}
/* Efectos de hover mejorados para pestañas */
#modalAjustePrecio .nav-tabs .nav-link {
position: relative;
overflow: hidden;
}
#modalAjustePrecio .nav-tabs .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
#modalAjustePrecio .nav-tabs .nav-link:hover::before {
left: 100%;
}
/* Animaciones para botones de descuento rápido */
.quick-discount-btn {
position: relative;
overflow: hidden;
}
.quick-discount-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.quick-discount-btn:hover::after {
width: 300px;
height: 300px;
}
/* Mejoras visuales para inputs con iconos */
.price-input-group .form-control:focus + .price-input-icon,
.price-input-group .form-control:focus ~ .price-input-icon {
color: var(--color-secundario, #20C2D7);
transform: scale(1.1);
}
/* Efectos de carga */
.loading-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid rgba(0, 0, 0, 0.1);
border-left-color: var(--color-primario, #E3057A);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Modal responsivo */
#modalAjustePrecio .modal-body {
max-height: 70vh;
overflow-y: auto;
}
@media (max-width: 768px) {
#modalAjustePrecio .modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
#modalAjustePrecio .nav-tabs .nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
#modalAjustePrecio .tab-content {
padding: 1rem;
}
}
.product-card-v3:hover {
border-color: var(--color-secundario, #20C2D7);
box-shadow: 0 4px 24px var(--shadow-color, rgba(0, 0, 0, 0.13));
}
.product-card-v3 .card-top {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0.5rem 0.5rem 0 0.5rem;
}
.product-card-v3 .img-div {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-color, #e0e0e0);
width: 100%;
height: 125px;
overflow: hidden;
}
.product-card-v3 .img-div img {
width: 100%;
height: 125px;
object-fit: cover;
object-position: center top;
border-radius: 10px;
transition: filter 0.2s;
}
.product-card-v3 .img-div img:hover {
filter: brightness(1.08) saturate(1.1);
}
.product-card-v3 .info-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
.product-card-v3 .product-name {
color: var(--color-primario, #E3057A);
font-family: 'Fredoka';
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.25rem;
}
.product-card-v3 .product-desc {
color: var(--color-letra, #222);
font-size: 0.95rem;
margin-bottom: 0.25rem;
min-height: 1.2em;
}
.product-card-v3 .qty-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.product-card-v3 .qty-row input[type="number"] {
background: var(--color-terciario, #FFEFB4);
border: none;
border-radius: 8px;
width: 60px;
text-align: center;
}
.product-card-v3 .qty-row .btn {
border-color: var(--color-primario, #E3057A);
color: var(--color-primario, #E3057A);
border-radius: 50%;
padding: 0.25rem 0.5rem;
}
.product-card-v3 .card-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background: var(--glass-color, #fff8);
border-bottom: 1px solid var(--border-color, #e0e0e0);
flex-wrap: wrap;
}
.product-card-v3 .venta-div,
.product-card-v3 .prod-div {
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-card-v3 .venta-div input,
.product-card-v3 .prod-div input {
background: var(--color-terciario, #FFEFB4);
border: none;
border-radius: 8px;
width: 70px;
text-align: center;
}
.product-card-v3 .toggle-extra-btn {
color: var(--color-primario, #E3057A);
background: none;
border: none;
font-weight: 600;
font-size: 1rem;
width: 100%;
padding: 0.5rem 0;
border-radius: 0 0 1rem 1rem;
transition: background 0.2s;
}
.product-card-v3 .toggle-extra-btn:hover {
background: var(--highlight-bg, #f0f7fa);
}
.product-card-v3 .product-extra-info {
background: var(--glass-color, #fff8);
border-radius: 0 0 1rem 1rem;
transition: max-height 0.3s ease;
overflow: hidden;
max-height: 0px;
}
.product-card-v3 .product-extra-info.show {
max-height: 400px;
}
.product-card-v3 .badge {
font-size: 0.85em;
padding: 0.3em 0.7em;
border-radius: 8px;
}
.product-card-v3 .form-select {
background: var(--color-terciario, #FFEFB4);
color: var(--color-letra, #222);
border: none;
border-radius: 8px;
font-size: 0.95em;
}
.product-card-v3 .btn-danger {
background: var(--color-primario, #E3057A);
border: none;
border-radius: 20px;
font-size: 0.95em;
font-weight: 600;
}
.product-card-v3 .btn-danger:hover {
background: #b80a5c;
}
@media (max-width: 600px) {
.product-card-v3 {
min-height: 180px;
padding: 0.5rem;
}
.product-card-v3 .img-div {
width: 70px;
height: 70px;
min-width: 70px;
min-height: 70px;
flex: 0 0 70px;
}
.product-card-v3 .img-div img {
width: 70px;
height: 70px;
}
.product-card-v3 .info-div {
padding: 0 0.5rem;
align-items: flex-start;
}
.product-card-v3 .card-bottom {
flex-direction: column;
align-items: flex-start;
padding: 0.5rem 0.5rem;
}
}
/* --- Estilos para ProductCreateContainer --- */
#ProductCreateContainer {
background: var(--card-bg, #fff);
border-radius: 18px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
padding: 32px 24px 24px 24px;
margin: 0 auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
gap: 18px 0;
}
#ProductCreateContainer label.form-label {
font-weight: 600;
color: var(--color-primario, #E3057A);
margin-bottom: 6px;
}
#ProductCreateContainer input[type="text"],
#ProductCreateContainer input[type="file"],
#ProductCreateContainer select,
#ProductCreateContainer textarea {
border-radius: 10px;
border: 1px solid var(--border-color, #e0e0e0);
background: var(--input-bg, #f8f8fa);
color: var(--color-letra, #222);
font-size: 1rem;
padding: 8px 12px;
margin-bottom: 8px;
box-shadow: none;
transition: border-color 0.2s;
}
#ProductCreateContainer input[type="text"]:focus,
#ProductCreateContainer textarea:focus,
#ProductCreateContainer select:focus {
border-color: var(--color-secundario, #20C2D7);
outline: none;
}
#ProductCreateContainer .form-check-label {
font-weight: 500;
color: var(--color-letra, #222);
}
#ProductCreateContainer .btn {
border-radius: 10px;
font-weight: 600;
font-size: 1.08rem;
padding: 10px 0;
}
#ProductCreateContainer hr {
border-top: 1.5px solid var(--border-color, #e0e0e0);
margin: 18px 0 10px 0;
}
#ProductCreateContainer #ProductImagePreview {
gap: 10px;
}
#ProductCreateContainer .PreviewBeforeUpload {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
max-width: 90px;
max-height: 90px;
object-fit: cover;
margin: 0 6px 6px 0;
}
#ProductCreateContainer .d-grid .btn {
margin-top: 8px;
}
@media (max-width: 600px) {
#ProductCreateContainer {
padding: 16px 4px;
max-width: 98vw;
}
}
/* ===================== PARALLAX HEADER ===================== */
.ParallaxHeader {
position: relative;
width: 100%;
height: 260px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--color-primario) 0%, var(--color-secundario) 100%);
box-shadow: 0 8px 32px 0 var(--shadow-color);
z-index: 1;
}
.ParallaxHeader img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
will-change: transform;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
opacity: 0.85;
filter: brightness(0.95) saturate(1.1);
}
/* Efecto Parallax JS opcional:
Puedes usar este snippet para animar el parallax en scroll:
*/
@media (max-width: 700px) {
.ParallaxHeader {
height: 140px;
}
}
/* Parallax effect for .ParallaxHeader */
.ParallaxHeader {
position: relative;
width: 100%;
height: 260px;
min-height: 180px;
max-height: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primario);
z-index: 1;
}
.ParallaxHeader img {
position: absolute;
top: 0;
/* left: 50%; */
/* transform: translateX(-50%); */
width: 100vw;
min-width: 100%;
height: 120%;
object-fit: cover;
object-position: center;
z-index: 0;
will-change: transform;
transition: filter 0.3s;
filter: brightness(0.85) blur(0.5px) saturate(1.1);
}
.ParallaxHeader::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(32, 194, 215, 0.15) 0%, rgba(227, 5, 122, 0.10) 100%);
z-index: 1;
pointer-events: none;
}
@media (max-width: 700px) {
.ParallaxHeader {
height: 120px;
min-height: 80px;
}
.ParallaxHeader img {
height: 150%;
}
}
/* Parallax JS effect (to be used in JS):
window.addEventListener('scroll', function() {
const parallax = document.querySelector('.ParallaxHeader img');
if (parallax) {
let offset = window.scrollY * 0.3;
parallax.style.transform = `translateX(-50%) translateY(${offset}px)`;
}
});
*/
/* Color Primario var(--color-primario) */
/* hsla(328, 96%, 45%, 1) */
/* Color secundario var(--color-secundario)*/
/* hsla(187, 74%, 48%, 1) */
/* Color detalles var(--color-terciario) */
/* Color letra var(--color-letra) */
:root {
/* Colores principales */
--color-primario: #E3057A;
--color-primario-dark: #BA176E;
--color-secundario: #20C2D7;
--color-terciario: #FFEFB4;
--color-letra: #333333;
--color-muted: #d6d6d6;
--higlight-terciario: #fffcf1;
/* Variables de tema claro (por defecto) */
--main-bg: #ffffff;
--card-bg: #f8f8f8;
--main-text: #333333;
--secondary-text: #666666;
--border-color: #dddddd;
--input-bg: #ffffff;
--input-text-color: #333333;
--input-border-color: #cccccc;
--input-focus-border-color: #E3057A;
--input-focus-shadow: rgba(227, 5, 122, 0.25);
--header-text-color: #222222;
--modal-bg: #ffffff;
--modal-text: #333333;
--footer-bg: #f8f8f8;
--footer-text: #555555;
--code-bg: #f5f5f5;
--code-text-color: #333333;
--code-border-color: #e0e0e0;
--table-border-color: #dddddd;
--table-header-bg: #f0f0f0;
--table-row-even-bg: #f9f9f9;
--table-row-hover-bg: #f2f2f2;
--highlight-bg: #f0f7fa;
--quote-bg: #f8f8f8;
--quote-text-color: #666666;
--scrollbar-thumb: #d1d1d1;
--scrollbar-track: #f1f1f1;
--link-color: #E3057A;
--link-hover-color: #BA176E;
--link-visited-color: #9e1b5c;
--btn-text: #ffffff;
--btn-hover-bg: #ffffff;
--btn-hover-text: #E3057A;
--btn-hover-border: #E3057A;
--glass-color: rgba(255, 255, 255, 0.65);
--glass-border: rgba(255, 255, 255, 0.18);
--glass-dark-bg: rgba(0, 0, 0, 0.459);
--shadow-color: rgba(0, 0, 0, 0.1);
}
/* Tema oscuro */
body.dark-theme {
/* Variables de tema oscuro */
--main-bg: #121212;
--card-bg: #222222;
--main-text: #e0e0e0;
--secondary-text: #b0b0b0;
--border-color: #444444;
--input-bg: #2a2a2a;
--input-text-color: #e0e0e0;
--input-border-color: #555555;
--input-focus-border-color: #E3057A;
--input-focus-shadow: rgba(227, 5, 122, 0.25);
--header-text-color: #f0f0f0;
--modal-bg: #2a2a2a;
--modal-text: #e0e0e0;
--footer-bg: #1a1a1a;
--footer-text: #b0b0b0;
--code-bg: #2d2d2d;
--code-text-color: #e0e0e0;
--code-border-color: #555555;
--table-border-color: #444444;
--table-header-bg: #2a2a2a;
--table-row-even-bg: #333333;
--table-row-hover-bg: #3a3a3a;
--highlight-bg: #2a3b47;
--quote-bg: #2a2a2a;
--quote-text-color: #b0b0b0;
--scrollbar-thumb: #555555;
--scrollbar-track: #333333;
--link-color: #ff60b5;
--link-hover-color: #ff80c3;
--link-visited-color: #e54a98;
--btn-text: #ffffff;
--btn-hover-bg: #2a2a2a;
--btn-hover-text: #ff60b5;
--btn-hover-border: #ff60b5;
--glass-color: rgba(30, 30, 30, 0.65);
--glass-border: rgba(70, 70, 70, 0.18);
--glass-dark-bg: rgba(15, 15, 15, 0.8);
--shadow-color: rgba(0, 0, 0, 0.4);
}
html {
scrollbar-width: thin;
scrollbar-color: var(--color-letra) #f0f0f0;
scroll-behavior: smooth;
}
/* make InterFont the main font, the font is in resorces/InterFont*/
@font-face {
font-family: 'Inter';
src: url('../resorces/Fonts/InterFont/Inter-VariableFont_slnt,wght.ttf');
}
@font-face {
font-family: 'QuickSand';
src: url('../resorces/Fonts/Quicksand/static/Quicksand-Regular.ttf');
}
@font-face {
font-family: "Beaufort";
src: url('../resorces/Fonts/BeaufortForLoL/BeaufortforLOL-Regular.ttf');
}
@font-face {
font-family: "Beaufort Bold";
src: url('../resorces/Fonts/BeaufortForLoL/BeaufortforLOL-Bold.ttf');
}
@font-face {
font-family: "Spiegel";
src: url('../resorces/Fonts/Spiegel/Spiegel_TT_Regular.ttf');
}
@font-face {
font-family: "Fredoka";
src: url('../resorces/Fonts/Fredoka/Fredoka-VariableFont_wdth\,wght.ttf');
}
body {
font-family: 'Inter';
color: var(--main-text);
overflow-x: hidden;
position: relative;
min-height: 100vh;
/* Asegura que el contenedor sea al menos tan alto como la ventana del navegador */
margin: 0;
/* Elimina los márgenes por defecto */
padding-bottom: 50px;
background-color: var(--main-bg);
transition: background-color 0.3s ease, color 0.3s ease;
transition: background-color 0.3s ease, color 0.3s ease;
}
h1 {
font-family: "Fredoka";
font-size: 30px;
}
a {
text-decoration: none;
color: var(--link-color);
transition: color 0.3s ease;
}
a:hover {
color: var(--link-hover-color);
}
a:visited {
color: var(--link-visited-color);
}
.nav-link:active {
color: var(--color-secundario);
background-color: var(--color-primario);
}
.nav-link:hover {
color: var(--color-primario-dark);
}
.logoFont {
font-family: "Fredoka";
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.InterFont {
font-family: 'Inter';
}
@keyframes BaAnimation {
0% {
color: var(--color-primario);
}
33.33% {
color: white;
}
66.66% {
color: white;
}
100% {
color: var(--color-primario);
}
}
@keyframes buAnimation {
0% {
color: white;
}
33.33% {
color: var(--color-secundario);
}
66.66% {
color: white;
}
100% {
color: white;
}
}
@keyframes ruAnimation {
0% {
color: white;
}
33.33% {
color: white;
}
66.66% {
color: var(--color-terciario);
}
100% {
color: white;
}
}
#Ba {
animation: BaAnimation 6s infinite ease-in-out;
}
#bu {
animation: buAnimation 6s infinite ease-in-out;
}
#ru {
animation: ruAnimation 6s infinite ease-in-out;
}
.dotted-background {
background: radial-gradient(circle at center, black 0.25rem, transparent 0);
}
.dotted-background2 {
background-image: radial-gradient(circle at center,
rgba(44, 44, 44, 0.453) 0.25rem,
transparent 0);
background-size: 1rem 1rem;
background-repeat: round;
}
.GridContainer {
display: flex;
flex-wrap: wrap;
/* espaciados y los elementos hijos redondeados */
justify-content: space-around;
align-items: center;
/* border-radius: 10px; */
gap: 10px;
background-color: #ffffff;
padding: 20px;
max-height: 400px;
overflow-y: auto;
/* scroll thin */
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
/* scroll smooth */
scroll-behavior: smooth;
}
/* Contenedor Tipo tarjeta para la imagen y el texto */
.gridElement {
border-radius: 10px;
/* background-color: #a1b1ca; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
height: 130px;
cursor: pointer;
}
/* Texto de la tarjeta */
.spanItem {
font-size: 10px;
font-weight: bold;
margin-top: 5px;
/* background-color: #5f5f5f; */
border-radius: 5px;
padding: 5px;
max-width: 80px;
text-align: center;
/* color: white; */
/* when the text is too long, bulk it */
overflow: hidden;
text-overflow: ellipsis;
}
/* Efecto hover para el contenedor de la tarjeta */
.gridElement:hover {
transform: translateY(-10px);
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
/* Efecto hover para el contenedor de la tarjeta */
.gridElement {
transition: all 0.3s ease;
}
.gridElement:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.gridElement:active {
/* make it bigger to take all the space */
transform: scale(1.1);
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
/* when this element is active */
}
/* when gridElement is active make spanItem the background white */
.gridElement.selected .spanItem {
transition: all 0.3s ease;
max-width: none;
font-size: 15px;
}
/* Imagen de la tarjeta */
.imageItem {
width: 75px;
height: 75px;
border-radius: 50%;
object-fit: cover;
}
.imageItem:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.imageItem {
transition: all 0.3s ease;
}
.imageItem:hover {
transform: scale(1.1);
}
/* Efecto hover para el texto de la tarjeta */
.spanItem {
/* text responsive */
font-size: .5rem;
transition: all 0.3s ease;
}
/* Efecto hover para el texto de la tarjeta */
.spanItem:hover {
color: #dcdcdc;
/* Cambia el color del texto al pasar el mouse */
transition: all 0.3s ease;
}
.loadingElement {
/* this element is when a image is loading */
width: 75px;
height: 75px;
max-width: 75px;
max-height: 75px;
min-width: 75px;
min-height: 75px;
border-radius: 50%;
background-color: var(--color-primario);
}
.pointer {
cursor: pointer;
}
.PaginationContainer {
/* haz un degradado si aun hay mas elementos abajo */
background: linear-gradient(transparent, #f0f0f0);
border-radius: 10px;
/* wherever it is, reduce his top by 42 pixels */
margin-top: -42px;
}
.pagination {
display: flex;
justify-content: space-around;
padding: 10px;
}
.championsContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 10px;
max-height: 50vh;
min-height: 50vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
scroll-behavior: smooth;
}
.championSelectContainer {
max-height: 80vh;
overflow: hidden;
}
.CardYGOSelector {
max-height: 80vh;
overflow: hidden;
}
.championElement {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
height: 130px;
cursor: pointer;
}
.championImage {
width: 75px;
height: 75px;
object-fit: cover;
transition: all 0.3s ease;
}
.championImage:hover {
filter: brightness(1.3);
transition: all 0.3s ease;
}
.championName {
/* max width 75 px when is longer wrap it */
max-width: 75px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-weight: bold;
margin-top: 5px;
/* set font spiegel */
font-family: "Spiegel";
font-size: 12px;
}
.roleImage {
width: 30px;
height: 30px;
object-fit: cover;
cursor: pointer;
margin-right: 5px;
/* grayscale to 100 */
filter: grayscale(100%);
}
.roleImage:hover {
transform: scale(1.1);
transition: all 0.2s ease;
/* grayscale 0 */
filter: grayscale(0%);
}
.roleImage {
transition: all 0.2s ease;
}
.roleImage:active {
transform: scale(1.1);
transition: all 0.2s ease;
}
.roleImage.selected {
transform: scale(1.1);
transition: all 0.2s ease;
/* grayscale 0 */
filter: grayscale(0%);
}
.championSkinElement {
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
cursor: pointer;
}
.arrow {
cursor: pointer;
font-size: 1rem;
position: absolute;
z-index: 2;
top: 31%;
background-color: #5f5f5f5f;
border-radius: 15px;
padding: 10px;
margin: 10px;
/* translucent */
color: #ffffff;
/* when the arrow is active */
}
.arrow:hover {
transform: scale(1.1);
transition: all 0.1s ease;
/* translucent */
background-color: #e45aa4;
}
.arrow:active {
transform: scale(0.9);
transition: all 0.1s ease;
/* translucent */
background-color: var(--color-primario);
}
.leftArrow {
left: 0;
}
.rightArrow {
right: 0;
}
/* when the mouse is out, make a transition to desapear */
.arrow:hover {
transition: all 0.1s ease;
}
.backButton {
cursor: pointer;
font-size: 1rem;
position: absolute;
z-index: 2;
background-color: #5f5f5f5f;
border-radius: 15px;
padding: 10px;
margin: 7px;
color: #ffffff;
}
.backButton:hover {
transform: scale(1.1);
transition: all 0.1s ease;
/* translucent */
background-color: #e45aa4;
}
.backButton:active {
transform: scale(0.9);
transition: all 0.1s ease;
/* translucent */
background-color: var(--color-primario);
}
.skinSelector {
width: 100%;
max-height: 80vh;
overflow: hidden;
}
.championSkinImage {
width: 100%;
object-fit: cover;
border-radius: 5px;
transition: all 0.3s ease;
}
.MainFrame {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.leftFrame {
flex: 0.6;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.rightFrame {
flex: 0.4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80vh;
margin: 10px;
}
.imageDummy {
width: 250px;
height: 445px;
transition: all 0.3s ease;
position: absolute;
pointer-events: none;
user-select: none;
}
.valorantDummy {
width: 200px;
height: 454px;
transition: all 0.3s ease;
position: absolute;
pointer-events: none;
user-select: none;
}
.DummyImageYGO {
width: 100%;
max-width: 300px;
position: absolute;
user-select: none;
z-index: 10;
cursor: pointer;
padding: 10px;
pointer-events: all;
transition: all .3s ease-in-out;
box-shadow: 0 16px 48px 0 rgba(107, 107, 107, 0.27);
}
.DummyImageYGO.animated {
animation: levitateYGO 5s ease-in-out infinite alternate, tiltYGO 7s ease-in-out infinite alternate;
box-shadow: 0 8px 32px 0 rgba(107, 107, 107, 0.17);
}
.DummyImageYGO.still {
animation-play-state: paused !important;
transform: translateY(0px) rotate(0) scale(1);
margin: 10px;
}
.DummyImageYGO:hover.still {
transform: translateY(5px) rotate(0) scale(1.04);
}
@keyframes levitateYGO {
0% {
transform: translateY(0px) rotate(-1deg) scale(1);
}
50% {
transform: translateY(-4px) rotate(0deg) scale(1.02);
}
100% {
transform: translateY(0px) rotate(1deg) scale(1);
}
}
.borderRank {
transform: scale3d(1.25, 1.10, 1);
translate: 0px -4px;
pointer-events: none;
user-select: none;
z-index: 2;
}
.leagueRank {
width: 310px;
height: 500px;
position: absolute;
pointer-events: none;
user-select: none;
transition: all 0.3s ease;
z-index: 99;
}
.txt-sm {
font-size: 0.5rem;
}
.skinNameContainer {
font-family: "Beaufort";
text-align: center;
font-size: 15px;
font-weight: bold;
/* add a gradient background from black to transparent */
background: linear-gradient(transparent, #000000);
position: absolute;
color: white;
bottom: 0px;
padding-bottom: 17px;
border-radius: 5px;
width: 100%;
}
.exampleCardDisplay {
position: relative;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
width: 175px;
height: 317px;
transform: scale(.6);
}
.LeagueCard {
position: relative;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
width: 300px;
height: 600px;
}
.LeagueCard-small {
position: relative;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
width: 168px;
height: 288px;
transform: scale(.6);
}
.LeagueCard-xsmall {
position: relative;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
width: 70px;
height: 120px;
transform: scale(.25);
}
.glass-shine-effect {
background-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(107, 107, 107, 0.37);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
transition: transform 200ms ease;
overflow: hidden;
}
.glass-shine-effect:before {
content: "";
position: absolute;
height: 150%;
width: 50px;
transform: rotate(30deg);
background-color: rgba(255, 255, 255, 0.2);
left: -100px;
transition: left 500ms ease;
}
.glass-shine-effect:hover {
transform: scale(1.1);
}
.glass-shine-effect:hover:before {
z-index: 2;
transition: left 500ms ease;
left: 300px;
}
.ValorantMask {
mask-image: url("../resorces/Valorant/ValorantMask.svg");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
position: absolute;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: auto;
}
.exampleCard {
position: relative;
filter: blur(0);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 490px;
}
.exampleYGOCard {
position: relative;
filter: blur(0);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 212px;
width: 175px;
margin: 10px;
}
.exampleYGOCardLarge {
position: relative;
filter: blur(0);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 212px;
width: 175px;
margin: 10px;
}
.YGOCardDisplay {
position: absolute;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 212px;
width: 260px;
margin: 10px;
}
.exampleCard.loading {
transition: all 0.3s ease;
filter: blur(5px);
transform: scale(0.8);
}
.imagePreview {
filter: blur(0);
transition: all 0.3s ease;
}
.imagePreview.loading {
transition: all 0.3s ease;
filter: blur(5px);
}
.nameContainer {
transform: scaleX(1);
transition: all 0.3s ease;
}
.nameContainer.loading {
transform: scaleX(0);
transition: all 0.3s ease;
}
.miniSkinCarousel {
display: flex;
justify-content: center;
}
.carouselItems {
display: flex;
align-items: center;
gap: 10px;
overflow-x: scroll;
white-space: nowrap;
scroll-snap-align: start;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
scroll-behavior: smooth;
padding: 10px;
/* scroll horizontal */
flex-direction: row;
/* when the mouse is out, make a transition to desapear */
transition: all 0.3s ease;
width: 50vw;
}
.miniSkinImage {
width: 7vw;
object-fit: cover;
border-radius: 5px;
transition: all 0.3s ease;
}
#cardexample {
width: 290px;
height: 490px;
}
.iconDummy {
width: 40px;
border-radius: 50%;
background-color: black;
border: 1px solid #a49548;
}
.summonerDummy {
width: 22px;
border: 1px solid rgb(108, 108, 108);
}
.Container-bottom {
position: relative;
width: 250px;
top: 184px;
display: flex;
align-items: center;
transition: all 0.3s ease;
z-index: 2;
}
.PrimaryRunes {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.runeImage {
cursor: pointer;
width: 40px;
height: 40px;
object-fit: cover;
transition: all 0.3s ease;
}
.runeImage:hover {
transform: scale(1.2);
transition: all 0.3s ease;
}
.runeName {
font-family: "Spiegel";
font-size: 11px;
margin-top: 5px;
}
#cardexample {
/* opacity: 60%; */
width: 282px;
height: 475px;
top: 10px;
left: -136px;
}
.PrimaryRune {
width: 24px;
margin-left: 17px;
border-radius: 50%;
background-color: black;
border: 1px solid #a49548;
transition: all 0.3s ease;
cursor: pointer;
}
.PrimaryRune:hover {
transform: scale(1.2);
transition: all 0.3s ease;
}
.SecondaryRune {
width: 15px;
margin-left: 9px;
border-radius: 50%;
background-color: black;
border: 1px solid #8a8a8a;
transition: all 0.3s ease;
cursor: pointer;
}
.SecondaryRune:hover {
transform: scale(1.2);
transition: all 0.3s ease;
}
.iconDummyContainer {
margin-left: 40px;
}
.iconDummy {
cursor: pointer;
transition: all 0.3s ease;
}
.iconDummy:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.spell1Dummy {
margin-left: 39px;
transition: all 0.3s ease;
cursor: pointer;
}
.spell1Dummy:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.spell2Dummy {
margin-left: 5px;
transition: all 0.3s ease;
cursor: pointer;
}
.spell2Dummy:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.background-example {
width: 250px;
z-index: 1;
margin-top: 290px;
position: absolute;
pointer-events: none;
user-select: none;
}
.DivNamesContainer {
width: 250px;
font-family: "Spiegel";
font-weight: bold;
color: #e8e5d8;
text-align: center;
font-family: "Spiegel";
letter-spacing: 1px;
transition: all 0.3s ease;
z-index: 2;
}
.championCardName {
position: absolute;
font-size: 14px;
bottom: -168px;
width: 100%;
transition: all 0.3s ease;
}
.championCardName:hover {
color: #dcdcdc;
scale: 1.1;
transition: all 0.3s ease;
}
.championCardName:focus {
color: #dcdcdc;
scale: 1.1;
transition: all 0.3s ease;
}
.summonerName {
position: absolute;
font-size: 12px;
width: 100%;
color: #a49d92;
bottom: -237px;
transition: all 0.3s ease;
/* truncate after 18 letters */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.summonerName:hover {
color: #dcdcdc;
scale: 1.1;
transition: all 0.3s ease;
}
.summonerName:focus {
color: #dcdcdc;
scale: 1.1;
transition: all 0.3s ease;
}
.championHandler {
position: absolute;
width: 230px;
height: 60%;
margin-bottom: 35px;
transition: all 0.3s ease;
cursor: pointer;
}
.championHandler:hover #DivNamesContainer #Container-bottom #borderDummy {
filter: blur(2px);
}
.BorderHandler {
position: absolute;
width: 262px;
height: 74%;
margin-bottom: 5%;
transition: all 0.3s ease;
cursor: pointer;
transform: translate(0px, -40px);
}
.BorderHandlerVal {
position: absolute;
width: 200px;
height: 84%;
transition: all 0.3s ease;
cursor: pointer;
transform: translate(0px, -40px);
}
.SummonerSpells {
/* set a max heigth and scroll y */
pointer-events: all;
max-height: 150px;
max-width: 150px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 6px;
}
.spellImage {
border-radius: 6px;
width: 30px;
/* saturation of 70% */
filter: saturate(20%);
transition: all 0.3s ease;
}
.runeImage {
width: 30px;
filter: saturate(20%);
transition: all 0.3s ease;
}
.runeImageSecondary {
width: 20px;
/* cover image */
object-fit: cover;
filter: saturate(20%);
transition: all 0.3s ease;
}
.runeImageSecondary:hover {
filter: saturate(100%);
transition: all 0.3s ease;
}
.spellImage:hover {
filter: saturate(100%);
transition: all 0.3s ease;
transform: scale(1.1);
}
.carta {
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--main-text);
transition: all 0.3s ease;
}
.carta-dark {
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--main-text);
transition: all 0.3s ease;
}
.championsContainer {
mask-image: linear-gradient(rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0));
gap: 20px;
}
.borderDummy {
transition: all 0.3s ease;
}
.rankImage {
width: 40px;
}
.spanRank {
margin-left: 10px;
}
.listRank {
/* eliminar los puntos */
pointer-events: all;
list-style-type: none;
padding: 7px;
cursor: pointer;
max-height: 250px;
overflow-y: scroll;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #a1b1ca #f0f0f0;
display: flex;
flex-direction: column;
margin: 3px;
}
.liRank:hover {
background-color: #f0f0f03a;
border-radius: 10px;
transition: all 0.3s ease;
}
.decorationHandler {
width: 262px;
height: 26%;
top: 50%;
position: absolute;
cursor: pointer;
}
.borderElement {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* background-color: #f0f0f0; */
padding: 5px;
padding-top: 20px;
cursor: pointer;
height: 300px;
width: 300px;
transition: all 0.3s ease;
}
@keyframes blinking {
0% {
filter: brightness(1);
}
100% {
filter: brightness(1.5);
}
}
.borderDescription {
position: relative;
top: -31px;
max-width: 104px;
text-wrap: wrap;
word-wrap: break-word;
text-align: center;
font-size: 12px;
font-family: "Spiegel";
pointer-events: none;
}
.borderCatalog {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-height: 60vh;
min-height: 60vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
scroll-behavior: smooth;
overflow-x: hidden;
}
.borderDecorationDummy {
z-index: 0;
width: 370px;
pointer-events: none;
position: absolute;
margin-bottom: 50px;
transition: all 0.3s ease;
}
.blinking {
animation: blinking 1s infinite alternate;
}
.fan-container {
position: relative;
}
.borderImage {
width: 250px;
position: absolute;
}
.fanDescription {
position: absolute;
top: -165px;
max-width: 104px;
text-wrap: wrap;
word-wrap: break-word;
text-align: center;
font-size: 12px;
font-family: "Spiegel";
pointer-events: none;
left: 101px;
top: -49px;
}
.fan-item {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
text-align: center;
position: relative;
left: -125px;
transition: all 0.3s ease;
opacity: 0;
}
.fan-item .front {
opacity: 1;
transition: all 0.3s ease;
}
.borderElement:hover .fan-item {
transition: all 0.3s ease;
}
.borderElement:hover .fan-item:nth-child(1) {
transform: translate(0px, 0px);
opacity: 30%;
transition: all 0.3s ease;
z-index: 8;
}
.borderElement:hover .fan-item:nth-child(2) {
transform: translate(20px, -20px);
opacity: 25%;
transition: all 0.3s ease;
z-index: 7;
}
.borderElement:hover .fan-item:nth-child(3) {
transform: translate(40px, -40px);
opacity: 20%;
transition: all 0.3s ease;
z-index: 6;
}
.borderElement:hover .fan-item:nth-child(4) {
transform: translate(60px, -60px);
opacity: 15%;
transition: all 0.3s ease;
z-index: 5;
}
.borderElement:hover .fan-item:nth-child(5) {
transform: translate(80px, -80px);
opacity: 10%;
transition: all 0.3s ease;
z-index: 4;
}
.borderElement:hover .fan-item:nth-child(6) {
transform: translate(100px, -100px);
opacity: 5%;
transition: all 0.3s ease;
z-index: 3;
}
.borderCatalogSelect {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 60vw;
overflow-y: scroll;
flex-wrap: wrap;
max-height: 70vh;
}
.catalog-image {
width: 200px;
transition: all 0.3s ease;
}
.catalog-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
padding: 10px;
flex-wrap: wrap;
}
.catalog-descrip {
font-family: "Spiegel";
font-size: 12px;
max-width: 200px;
text-align: center;
margin-top: 5px;
}
/* nav bar */
/*----------bootstrap-navbar-css------------*/
.navbar-logo {
padding: 15px;
color: #fff;
}
.navbar-mainbg {
background-color: var(--color-letra);
padding: 0px;
}
#navbarSupportedContent {
overflow: hidden;
position: relative;
}
#navbarSupportedContent ul {
padding: 0px;
margin: 0px;
}
#navbarSupportedContent ul li a i {
margin-right: 10px;
}
#navbarSupportedContent li {
list-style-type: none;
float: left;
}
#navbarSupportedContent ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 15px;
display: block;
padding: 20px 20px;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
}
#navbarSupportedContent>ul>li.active>a {
color: var(--color-letra);
background-color: transparent;
transition: all 0.7s;
}
#navbarSupportedContent a:not(:only-child):after {
content: "\f105";
position: absolute;
right: 20px;
top: 10px;
font-size: 14px;
font-family: "Font Awesome 5 Free";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
transition: 0.5s;
}
#navbarSupportedContent .active>a:not(:only-child):after {
transform: rotate(90deg);
}
.hori-selector {
display: inline-block;
position: absolute;
height: 100%;
top: 0px;
left: 0px;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background-color: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-top: 10px;
}
.hori-selector .right,
.hori-selector .left {
position: absolute;
width: 25px;
height: 25px;
background-color: #fff;
bottom: 10px;
}
.hori-selector .right {
right: -25px;
}
.hori-selector .left {
left: -25px;
}
.hori-selector .right:before,
.hori-selector .left:before {
content: '';
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--color-letra);
}
.hori-selector .right:before {
bottom: 0;
right: -25px;
}
.hori-selector .left:before {
bottom: 0;
left: -25px;
}
#ListMenu {
display: flex;
justify-content: center;
width: 100%;
/* max-height: 70px; */
/* overflow-y: hidden */
}
.nav-separation {
pointer-events: none;
width: 200px;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.btn-primario {
background-color: var(--color-primario);
border: var(--color-primario) 2px solid;
color: var(--btn-text);
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: "Fredoka";
font-size: 15px;
transition: all 0.3s ease;
}
.btn-circle {
border-radius: 50%;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.btn-circle-mini {
border-radius: 50%;
padding: 5px;
cursor: pointer;
transition: all 0.3s ease;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.btn-primario:hover {
background-color: var(--btn-hover-bg);
color: var(--btn-hover-text);
border: 2px solid var(--btn-hover-border);
transition: all 0.3s ease;
}
.btn-primario:active {
background-color: var(--color-primario);
color: var(--btn-text);
transition: all 0.3s ease;
}
.btn-outline-primario {
background-color: transparent;
border: var(--color-primario) 2px solid;
color: var(--link-color);
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: "Fredoka";
font-size: 15px;
transition: all 0.3s ease;
}
.btn-outline-primario:hover {
background-color: var(--color-primario);
color: var(--btn-text);
transition: all 0.3s ease;
}
.btn-outline-primario:active {
background-color: var(--btn-hover-bg);
color: var(--btn-hover-text);
transition: all 0.3s ease;
}
.btn-secundario {
background-color: var(--color-secundario);
border: var(--color-secundario) 2px solid;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: "Fredoka";
font-size: 15px;
transition: all 0.3s ease;
}
.btn-secundario:hover {
background-color: #ffffff;
color: var(--color-secundario);
border: 2px solid var(--color-secundario);
transition: all 0.3s ease;
}
.btn-secundario:active {
background-color: var(--color-secundario);
color: white;
transition: all 0.3s ease;
}
.btn-outline-secundario {
background-color: transparent;
border: var(--color-secundario) 2px solid;
color: var(--color-secundario);
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: "Fredoka";
font-size: 15px;
transition: all 0.3s ease;
}
.btn-outline-secundario:hover {
background-color: var(--color-secundario);
color: white;
transition: all 0.3s ease;
}
.btn-outline-secundario:active {
background-color: #ffffff;
color: var(--color-secundario);
transition: all 0.3s ease;
}
.MenuCatalog {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
transition: all 0.3s ease-in-out;
padding: 10px;
flex-wrap: wrap;
flex-direction: column;
}
.btn-round {
border-radius: 50%;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.btn-round-sm {
border-radius: 50%;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.btn-chico {
padding: 7px 25px;
font-size: 13px;
}
.car-button {
position: fixed;
right: 5%;
bottom: 5%;
z-index: 999;
}
.lateral-menu {
display: flex;
justify-content: space-around;
align-items: center;
width: 50px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.flex-around {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.img-round {
border-radius: 50%;
}
.menuPicture {
width: 36px;
max-width: 36px;
min-width: 36px;
min-height: 36px;
max-height: 36px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.3s ease;
transform: scale(.9);
margin: 5px;
cursor: pointer;
}
.menuPicture:hover {
/*Color secundario*/
transform: scale(1);
border: 2px solid var(--color-secundario);
transition: all 0.3s ease;
}
.cursor-pointer {
cursor: pointer;
}
#NoLoged {
font-size: 30px;
min-height: 36px;
cursor: pointer;
transition: all 0.3s ease;
}
#NoLoged:hover {
color: var(--color-secundario);
transition: all 0.3s ease;
}
.card-info {
width: 80vw;
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.image-icon {
max-width: 96px;
min-width: 96px;
border: 3px solid #d3d3d3;
}
.cardContainerElement {
width: 300px;
}
.cartElement {
width: 180px;
height: 300px;
margin: 20px;
}
.backgroundCard {
position: relative;
width: 100%;
height: 100%;
filter: blur(6px);
z-index: 0;
transition: all 0.3s ease;
border-radius: 10px;
}
.txt-sm {
font-size: 0.7rem;
}
.formElement {
color: var(--color-letra);
min-width: 250px;
max-width: 40%;
transition: all .3s ease-in-out;
}
.carSection {
/* flex 65 30 the two sections, when is in 700px wrap it */
display: flex;
flex: 75 20;
justify-content: space-around;
}
option {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
}
.CardContainer {
max-height: 85vh;
max-width: 75vw;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
scroll-behavior: smooth;
border-radius: 10px;
margin: 10px;
width: 100%;
}
.CheckoutContainer {
max-width: 20vw;
min-width: 340px;
background-color: var(--color-letra);
color: white;
padding: 10px;
margin: 5px;
width: 100%;
/* height: 85vh; */
height: auto;
}
.CheckoutContainer.extend {
height: auto;
max-width: 40vw;
}
.BaburuFont {
font-family: "Fredoka";
}
.QuickSandFont {
font-family: "QuickSand";
}
.text-muted {
color: #a1a1a1;
}
.text-gray {
color: #a1a1a1;
}
.ToastContainer {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.toast-icon {
width: 20px;
height: 20px;
object-fit: cover;
}
.bg-primario {
background-color: var(--color-primario);
color: white;
}
.bg-secundario {
background-color: var(--color-secundario) !important;
color: white;
}
.bg-terciario {
background-color: var(--color-terciario);
color: var(--color-letra);
}
.bg-negro {
background-color: var(--color-letra);
color: white;
}
#PayPalButtons {
background-color: white;
padding: 10px;
border-radius: 10px;
}
.blinkingText {
animation: fontBlinking 2s infinite;
}
.googleImage {
width: 96px;
}
.Direcciones {
display: flex;
padding: 10px;
margin: 5px;
border-radius: 6px;
border: 2px solid rgb(216, 216, 216);
cursor: pointer;
transition: all .3s ease-in-out;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.Direcciones:hover {
background: var(--color-terciario);
transition: all .3s ease-in-out;
}
.acordion {
border-radius: 10px;
/* min-width: 300px */
}
.accordion-button:not(.collapsed) {
background-color: #fff;
/* Reemplaza #yourColor con el color que desees */
}
.lateral-menu-view-left {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
/* flex: 0 0 30%; */
}
.lateral-menu-view-right {
width: 100%;
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
}
#Menu-Selector2 {
width: 100%;
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none;
justify-content: center;
padding: 5px;
}
.menuCard {
width: 90%;
padding: 10px;
}
.nav-item {
text-align: center;
}
.border-bottom {
border-bottom: 2px solid #e8e8e8;
padding-bottom: 5px;
border-radius: 7px;
}
.border-top {
border-top: 2px solid #e8e8e8;
padding-top: 5px;
border-radius: 7px;
}
.head-directions {
padding: 10px;
}
.body-direction-details {
/* text-align: center; */
}
.direction-details {
max-width: 60%;
min-width: 60%;
}
dialog {
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
/* transform: scale(0.7); */
border: none;
border-radius: 9px;
padding: 0px;
width: 60vw;
scrollbar-width: none;
-ms-overflow-style: none;
transition: all 0.5s ease;
}
dialog::-webkit-scrollbar {
display: none;
}
dialog::backdrop {
background-color: rgba(0, 14, 40, 0.529);
/* backdrop-filter: blur(3px); */
}
dialog[open] {
-webkit-animation: show .5s ease normal;
}
dialog.open {
opacity: 1;
transform: scale(1);
}
dialog.hide {
/* opacity: 0;
transform: scale(0.7); */
-webkit-animation: hide .9s ease normal;
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.title-modal {
margin: 10px;
font-weight: bold;
text-align: center;
width: 90%;
}
.close-button {}
.modal-SM {
width: 50vw;
}
.modal-MD {
width: 70vw;
}
.modal-LG {
width: 90vw;
}
.modal-XL {
width: 95vw;
}
.modal-auto {
height: auto;
}
.directionsList {
width: 90%;
position: absolute;
max-height: 250px;
z-index: 99;
overflow-y: scroll;
overflow-x: hidden;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.directionsList.hide {
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
}
.form-data-location {
align-items: baseline;
}
.box-shadow {
-webkit-box-shadow: 8px 14px 62px 9px rgba(130, 130, 130, 0.58);
-moz-box-shadow: 8px 14px 62px 9px rgba(130, 130, 130, 0.58);
box-shadow: 8px 14px 62px 9px rgba(130, 130, 130, 0.58);
}
.accordion-dark {
--bs-accordion-btn-bg: #333;
--bs-accordion-btn-color: white;
--bs-accordion-active-bg: #333;
--bs-accordion-active-color: #333;
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-bg: #333;
--bs-accordion-color: white;
}
.pattern-bg-1 {
/* background-image: url(../imagenes/Patrones/pattern.svg); */
background: radial-gradient(circle, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%), url(../imagenes/Patrones/pattern.svg);
background-size: 80px;
animation: pan 120s infinite ease-in-out alternate;
will-change: background-position;
/* en los bordes la opacidad sea 0% y en el centro 100% de forma radial */
}
.pattern-bg-2 {
background: radial-gradient(circle, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 100%), url(../imagenes/Patrones/pattern2.svg);
background-size: 80px;
animation: pan 60s infinite ease-in-out alternate;
will-change: background-position;
}
.pattern-bg-3 {
background: radial-gradient(circle, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 100%), url(../imagenes/Patrones/pattern3.svg);
background-size: 80px;
animation: pan 60s infinite ease-in-out alternate;
will-change: background-position;
}
.pattern-Sbg {
background:
radial-gradient(circle, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 100%),
url(../imagenes/Patrones/pattern3.svg);
/* Aplica la máscara solo al fondo, no al patrón */
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
background-blend-mode: normal;
}
.pattern-Stars {
/* background-image: url("data:image/svg+xml,"); */
background-image: url("../imagenes/Patrones/stars.svg");
background-size: 25vh;
animation: fondo 6s infinite ease-in-out;
will-change: background-position;
}
.pattern-B1 {
/* background-image: url("data:image/svg+xml,"); */
background-image: url("../imagenes/Patrones/PatternBaburu.svg");
background-size: 25vh;
animation: fondo 6s infinite linear;
will-change: background-position;
}
.pattern-B2 {
/* background-image: url("data:image/svg+xml,"); */
background-image: url("../imagenes/Patrones/BaburuPatternText.svg");
background-size: 25vh;
animation: fondo 6s infinite linear;
will-change: background-position;
}
.pattern-DiaDeMuertos {
/* background-image: url("data:image/svg+xml,"); */
background-image: url("../imagenes/Patrones/DiaDeMuertos.svg");
background-size: 25vh;
animation: fondo 6s infinite linear;
will-change: background-position;
}
.pattern-Navidad {
background-image: url("../imagenes/Patrones/NavidadPattern2.svg");
background-size: 25vh;
animation: fondo 6s infinite linear;
will-change: background-position;
}
.pattern-B3 {
/* background-image: url("data:image/svg+xml,"); */
background-color: #333333;
background-image: url("../imagenes/Patrones/BaburuPatternText.svg");
background-size: 25vh;
will-change: background-position;
}
.pattern-BG1 {
background-image: url("../imagenes/Patrones/linePattern.svg");
background-size: 25vh;
animation: right-to-left 6s infinite linear;
will-change: background-position;
}
.pedidosContainer {
width: 80%;
height: auto;
}
.glass {
background: var(--glass-color);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
border-radius: 10px;
border: 1px solid var(--glass-border);
color: var(--main-text);
}
.glass-traslucent {
background: var(--glass-color);
opacity: 0.5;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
border-radius: 10px;
border: 1px solid var(--glass-border);
color: var(--main-text);
}
.glass-dark {
background-color: var(--glass-dark-bg) !important;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.103);
color: #ffffff;
}
.offcanvas {
background-color: var(--color-letra);
color: white;
}
.navbar-toggler {
background-color: var(--color-primario);
}
.Pedidos-Container {
width: 100%;
height: auto;
}
.progress-step {
border-radius: 50%;
width: 35px;
height: 35px;
background-color: white;
border: 2px solid #bbe75f;
color: #bbe75f;
transition: all 0.3s ease;
}
.progress-step .active {
background-color: #bbe75f;
color: white;
transition: all 0.3s ease;
}
.progress-step:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.btn-outline-success .active {
color: white;
}
.container-progress-bar {
position: relative;
top: 20px;
z-index: -5;
}
.w-90 {
width: 90%;
}
.w-80 {
width: 80%;
}
.w-70 {
width: 70%;
}
.collapseContent {
display: none;
}
.collapseContent.show {
display: block;
height: auto;
}
.addedToCarrito {
background-color: #bbe75f;
color: white;
border: 2px solid #bbe75f;
transition: all 0.3s ease;
}
.toast-head {
height: 50px;
padding: 10px;
}
@-webkit-keyframes pan {
0% {
background-position: 0% 0%;
}
25% {
background-position: 100% 0%;
}
50% {
background-position: 100% 100%;
}
75% {
background-position: 0% 100%;
}
100% {
background-position: 0% 0%;
}
}
@-webkit-keyframes pan2 {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
@-webkit-keyframes show {
0% {
transform: translateY(15%) scale(0.9);
opacity: 0;
}
30% {
filter: blur(5px);
}
100% {
transform: translateY(0%) scale(1);
opacity: 1;
filter: blur(0px);
}
}
@-webkit-keyframes hide {
0% {
transform: scale(1);
opacity: 1;
filter: blur(0px);
}
100% {
transform: scale(0.9);
opacity: 0;
filter: blur(5px);
}
}
@keyframes fontBlinking {
0% {
color: white;
}
50% {
color: var(--color-secundario);
}
100% {
color: white;
}
}
.flex-end {
display: flex;
justify-content: end !important;
}
#closeOffCanvas {
display: none;
}
.offcanvas.show #closeOffCanvas {
display: flex;
}
.offcanvas.show #offcanvasNavbar2 {}
@media (max-width: 420px) {
#Menu-Selector2 {
/* flex-direction: column; */
justify-content: center;
/* add a gradient to the right */
background: linear-gradient(to left, #ededed, transparent);
border-radius: 8px;
}
}
@media (max-height: 500px) {
.exampleCard {
transform: scale(.6);
}
}
@media (max-height: 620px) {
.exampleCard {
transform: scale(.8);
}
}
@media (max-width: 700px) {
.modal-SM {
width: 100vw;
}
.lateral-menu {
width: 100%;
}
.leftFrame {
flex-direction: column;
}
.MenuCatalog {
display: flex;
flex-direction: row;
}
.navbar-expand-custom {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
.navbar-expand-custom .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-Container {
width: 100%;
}
#navbarSupportedContent ul li a {
padding: 12px 30px;
}
.hori-selector {
margin-top: 0px;
margin-left: 10px;
border-radius: 0;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.hori-selector .left,
.hori-selector .right {
right: 10px;
}
.hori-selector .left {
top: -25px;
left: auto;
}
.hori-selector .right {
bottom: -25px;
}
.hori-selector .left:before {
left: -25px;
top: -25px;
}
.hori-selector .right:before {
bottom: -25px;
left: -25px;
}
.cardContainerElement {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-around;
}
.carSection {
flex-direction: column-reverse;
align-items: center;
}
.CheckoutContainer {
height: auto;
width: 90%;
max-width: none;
}
.leftFrame, .rightFrame {
flex: 1;
}
.MainFrame {
gap: 15px;
/* reverse */
flex-direction: column-reverse;
}
.carouselItems {
max-width: 80vw;
min-width: 80vw;
}
.miniSkinImage {
width: 19vw;
}
.nav-separation {
width: 100%;
}
.Direcciones {
text-align: center;
justify-content: center;
flex-direction: column;
}
.menuCard {
padding: 0px;
}
.card-info {
padding: 0px;
width: 100%;
}
.accordion-body {
padding: 0px;
}
dialog:modal {
width: 100vw !important;
height: 100vh !important;
}
.pedidosContainer {
width: 100%;
}
.formElement {
border: none;
}
.form-divider {
display: block;
}
.form-divider-left {
width: 100% !important;
height: 50% !important;
}
.form-divider-right {
width: 100% !important;
}
.swiper {
width: 80vw !important;
}
}
.headerCatalog {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: var(--color-primario);
height: auto;
}
.headerText {
max-width: 400px;
margin: 20px;
}
.imageContainer {
display: flex;
align-items: baseline;
height: 100%;
position: relative;
}
.imgHeight {
height: 250px;
}
.productCart {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: white;
}
.imageProduct {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
transition: transform 0.3s ease;
}
.productCart:hover .imageProduct {
transform: translate(0px, -10px);
transition: transform 0.3s ease;
}
.bg-blue {
background-color: var(--color-secundario);
}
.fondoEstrellas {
background-image: url("../imagenes/blobs/pattern-min.webp");
background-repeat: repeat;
background-size: 25vh;
height: 180px;
/* make a svg start, do not load */
mask-image: url("../imagenes/blobs/patterx.png");
mask-size: 100vh;
}
.animateFondo {
animation: fondo 10s infinite linear;
}
.left-to-right {
animation: left-to-right 10s infinite linear;
}
.right-to-left {
animation: right-to-left 10s infinite linear;
}
.up-to-down {
animation: up-to-down 10s infinite linear;
}
.down-to-up {
animation: down-to-up 10s infinite linear;
}
.fading-animation {
animation: fading 10s infinite linear;
}
.focus-animation {
animation: focusIn 10s infinite linear;
}
.productCartV2 {
margin-top: 25px;
}
.patternBackground {
width: 350px;
display: flex;
justify-content: center;
/* aplica un filtro para cambiar el color del svg importado a otro que yo quiera (por ejemplo verde) */
background-image: url("../imagenes/Patrones/waves.svg");
background-size: 80px;
gap: 25px;
}
.imgProductV2 {
height: 200px;
position: relative;
top: -25px;
border-radius: 18px;
}
.imgProductList {
max-height: 135px;
border-radius: 18px;
object-fit: cover;
object-position: top center;
}
.card-text {
max-width: 350px;
}
.card-title {
max-width: 350px;
}
@keyframes fondo {
0% {
background-position: 0 0;
}
100% {
background-position: 25vh 25vh;
}
}
@keyframes left-to-right {
0% {
background-position: 0 0;
}
100% {
background-position: 25vh 0;
}
}
@keyframes right-to-left {
0% {
background-position: 0 0;
}
100% {
background-position: -25vh 0;
}
}
@keyframes fading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes up-to-down {
0% {
background-position: 0 0;
}
100% {
background-position: 0 25vh;
}
}
@keyframes down-to-up {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -25vh;
}
}
@keyframes focusIn {
0% {
filter: blur(12px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
}
}
/* ----------------------------------------------------------------------------- Particulas */
.bg-animated {
height: 100vh;
position: absolute;
z-index: 10;
&:before {
z-index: 1000;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60vh;
background-image: linear-gradient(-180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.00) 100%)
}
&:after {
z-index: 1000;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20vh;
background-image: linear-gradient(0deg, #EBEBEB 0%, rgba(235, 235, 235, 0.00) 100%)
}
}
.squares {
height: 100%;
display: flex;
justify-content: space-around;
overflow: hidden
}
.square {
animation: squares 9.5s linear infinite;
align-self: flex-end;
width: 1em;
height: 1em;
transform: translateY(100%);
background: #ebebeb52;
&:nth-child(2) {
height: 1.5em;
width: 3em;
animation-delay: 1s;
animation-duration: 17s;
-webkit-filter: blur(5px)
}
&:nth-child(3) {
height: 2em;
width: 1em;
animation-delay: 1.5s;
animation-duration: 8s;
-webkit-filter: blur()
}
&:nth-child(4) {
height: 1em;
width: 1.5em;
animation-delay: 0.5s;
-webkit-filter: blur(3px);
animation-duration: 13s
}
&:nth-child(5) {
height: 1.25em;
width: 2em;
animation-delay: 4s;
-webkit-filter: blur(2px);
animation-duration: 11s
}
&:nth-child(6) {
height: 2.5em;
width: 2em;
animation-delay: 2s;
-webkit-filter: blur(1px);
animation-duration: 9s
}
&:nth-child(7) {
height: 5em;
width: 2em;
-webkit-filter: blur(2.5px);
animation-duration: 12s
}
&:nth-child(8) {
height: 1em;
width: 3em;
animation-delay: 5s;
-webkit-filter: blur(6px);
animation-duration: 18s
}
&:nth-child(9) {
height: 1.5em;
width: 2em;
-webkit-filter: blur(0.5px);
animation-duration: 9s
}
&:nth-child(9) {
height: 3em;
width: 2.4em;
animation-delay: 6s;
-webkit-filter: blur(0.5px);
animation-duration: 12s
}
}
@keyframes squares {
from {
transform: translateY(100%) rotate(-50deg)
}
to {
transform: translateY(calc(-100vh + -100%)) rotate(20deg)
}
}
.FooterElement {
position: absolute;
/* bottom: -10%; */
width: 100%;
background-color: var(--color-primario);
color: white;
padding: 10px;
/* margin-top: 50px; */
}
.directionSearcher {
background-color: var(--color-terciario);
}
.scroll-md {
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
max-height: 500px;
overflow-y: auto;
}
.MSG {
position: fixed;
top: 70%;
width: 100%;
}
.MSG-body {
background-color: #333333ab;
color: white;
text-align: center;
padding: 10px;
}
.addCar-image {
max-height: 90vh;
opacity: 40%;
/* que cubra todo el contenido disponible y este centrada verticalmente */
object-fit: cover;
margin: auto;
width: 100%;
/* add a mask to blend the bottom with white */
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
/* center the image */
position: relative;
z-index: -1;
}
.form-over {
position: absolute;
top: 0px;
height: 100%;
}
.image-slide {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 20px;
border: solid 6px white;
}
.form-divider {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
flex: 1;
/* overflow: hidden; */
}
.form-divider-left {
width: 50%;
height: 100%;
/* min-width: 350px; */
z-index: 0;
}
.w-50 {
width: 50%;
}
.form-divider-right {
width: 50%;
padding: 10px;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
}
.swiper {
width: 28vw;
height: 100%;
}
#Modal_addToCar {
height: 80vh;
}
.form-add-to-car {
width: 100%;
padding: 20px;
}
.header-add-to-car {
color: white;
text-align: center;
font-weight: bold;
font-size: 1.5em;
filter: drop-shadow(2px 2px 2px black);
}
.close-button {
/* no button decoration */
background: none;
border: none;
background-color: rgb(233, 62, 62);
/* btn btn-danger btn-round position-absolute top-0 right-0 p-3 */
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
cursor: pointer;
border-radius: 50%;
padding: 10px;
color: white;
width: 35px;
height: 35px;
border: solid 4px white;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.close-button:hover {
transform: scale(1.2);
font-size: 10px;
transition: all 0.3s ease;
}
.square-btn-sm {
width: 50px;
height: 50px;
border-radius: 10px;
background-color: var(--color-primario);
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.img-sm {
width: 80px;
height: 80px;
border-radius: 10px;
object-fit: cover;
border: solid 2px rgb(197, 197, 197);
}
.scrollable-sm {
max-height: 400px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
}
.scrollable-xm {
max-height: 300px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
}
.scrollable-md {
max-height: 60vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
}
.scrollable-lg {
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) #f0f0f0;
}
.btn-xm {
width: 20px;
height: 20px;
}
.input-small {
width: 80px;
}
.border-dashed {
border: 2px dashed var(--color-primario);
border-radius: 10px;
}
.border-dot-top {
border-top: 2px dotted var(--color-muted);
}
.scrollable-sm .list-group-item {
padding: 5px;
}
.scrollable-sm li:nth-of-type(odd) {
background: var(--higlight-terciario);
}
.scrollable-sm li:nth-of-type(even) {
background: white;
}
.noNumberDeco {
list-style-type: none;
/* on input number, dont show the arrows up and down */
-moz-appearance: textfield;
appearance: textfield;
}
.pointer {
cursor: pointer;
}
.agentText {
max-width: 100px;
overflow: hidden;
font-size: 10px;
padding: 10px;
text-align: center;
}
.agendCard {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 5px;
padding: 4px;
align-content: center;
align-items: center;
height: 234px;
border: #fd4556 1px solid;
width: 125px;
transition: all 0.3s ease;
cursor: pointer;
}
.agendCard:hover {
transform: scale(1.1);
transition: all 0.3s ease;
background-color: #fd4556;
color: white;
transition: all 0.3s ease;
}
.CardNameVal {
z-index: 3;
top: 62.5%;
position: absolute;
list-style: url('../resorces/Valorant/dot.svg');
padding: 0px;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.valBullet {
font-size: 40px;
}
.rankVal {
position: absolute;
top: 83.2%;
z-index: 3;
transition: all 0.3s ease;
cursor: pointer;
}
.rankVal:hover {
transition: all 0.3s ease;
transform: scale(1.1);
}
.valRankMedal {
width: 30px;
height: 30px;
}
.ListRankVal {
list-style: none;
white-space: nowrap;
padding: 5px;
}
.ListRankVal li {
display: flex;
justify-content: left;
align-items: center;
gap: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.ListRankVal li:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}
.backgroundMain {
pointer-events: none;
position: absolute;
top: 0px;
object-fit: cover;
width: 100%;
object-position: top;
height: 80vh;
/* add a mask transition in the bottom in the last 90%*/
mask-image: linear-gradient(to Top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
transition: all 0.3s ease;
}
.mainBlankSpace {
height: 60vh;
}
.mainMenu {
background-color: var(--color-letra);
border-radius: 30px;
}
.JumboImage {
object-fit: contain;
max-height: 300px;
max-width: 100%;
filter: saturate(1);
transition: all 0.3s ease;
cursor: pointer;
}
.JumboImage:hover {
transform: scale(1.1);
filter: saturate(1.4);
transition: all 0.3s ease;
}
/* make an animation of a beat */
.JumboText {
width: 100%;
font-size: 2em;
font-weight: bold;
color: white;
text-align: center;
word-break: break-word;
/* make a outline outside of the text */
text-shadow: 2px 2px 2px black;
}
.JumboCard {
width: 80%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-secundario);
background-position: center;
background-size: cover;
border-radius: 30px;
/* drop shadow */
box-shadow: 0 20px 32px 0 rgba(31, 38, 135, 0.60);
transition: all 0.3s ease;
}
.NavidadBackground {
background-image: url("../imagenes/pageImages/NavidadBackground.webp");
}
.HalloweenBackground {
background-image: url("../imagenes/pageImages/Halloween.webp");
}
.NavidadBorder {
border-image: url("../imagenes/Patrones/NavidadBorder.svg") 33.3% / 30px / 10px round;
}
.HalloweenBorder {
border-image: url("../imagenes/pageImages/HalloweenBorder.svg") 33.3% / 30px / 10px round;
}
.HalloweenBorder-mini {
border-image: url("../imagenes/pageImages/HalloweenBorder-2.svg") 33.3% / 20px / 15px round;
}
.HalloweenBorder-colors {
border-image: url("../imagenes/pageImages/HalloweenBorder-3.svg") 25% / 10px / 10px round;
}
.HalloweenBorder-colors-2 {
border-image: url("../imagenes/pageImages/HalloweenBorder-4.svg") 25% / 10px / 10px round;
}
.Decorations {
/* display: none; */
}
.HoverDecorations {
transition: all 0.3s ease;
width: 200px;
position: absolute;
left: 41%;
/* display: none; */
}
@media (max-width: 800px) {
.backgroundMain {
height: 50vh;
}
.JumboCard {
width: 100%;
border-radius: 0px;
}
.mainBlankSpace {
height: 30vh;
}
}
@media (min-width: 800px) {
.backgroundMain {
height: 100vh;
object-position: center;
}
.mainBlankSpace {
height: 70vh;
}
}
.cartaHazEsto {
border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: solid 10px white;
background: url(../imagenes/Patrones/RomboPattern-White.svg);
background-size: 200px;
background-color: var(--color-secundario);
}
.ImageHazEsto {
position: relative;
height: 200px;
top: 0%;
left: 0%;
transition: all 0.3s ease;
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
/* make a border */
border: 2px solid white;
pointer-events: none;
}
.headerHazEsto {
color: white;
font-size: 3em;
font-weight: bold;
text-align: center;
padding: 10px;
}
.pe-none {
pointer-events: none;
user-select: none;
}
#drop-zone {
width: 400px;
height: 200px;
border: 2px dashed #ccc;
border-radius: 10px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: background-color 0.3s, border-color 0.3s;
cursor: pointer;
text-align: center;
}
#drop-zone.dragover {
background-color: #e0f7fa;
border-color: #26c6da;
}
#file-input {
display: none;
}
#screenSaver {
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
}
.containerBackground {
width: 100vw;
height: 100vh;
}
.backgroundFiller {
background-color: white;
height: 10vh;
width: 100vw;
}
.LoadingText {
font-size: 2em;
font-weight: bold;
color: rgb(141, 141, 141);
text-align: center;
padding: 10px;
position: absolute;
pointer-events: none;
text-align: center;
width: 100%;
top: 90%;
z-index: 1000;
}
.shapes-container {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
}
.floating-shape {
position: absolute;
width: 50px;
height: 50px;
opacity: 0;
}
.circle {
border-radius: 50%;
}
.square {
border-radius: 4px;
}
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.OutlineTextSticker {
text-shadow:
/* Borde blanco */
-3px -3px 0 #fff,
3px -3px 0 #fff,
-3px 3px 0 #fff,
3px 3px 0 #fff,
/* Sombra para efecto flotante */
0px 4px 4px rgba(0, 0, 0, 0.3),
0px 8px 12px rgba(0, 0, 0, 0.2),
0px 16px 24px rgba(0, 0, 0, 0.1);
}
.MenuCategory {
background-color: var(--color-letra);
}
.MenuCategory h3 {
color: white;
padding: 10px;
}
.Catalog {
margin-left: 20px;
margin-right: 20px;
}
.CategorysContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 60px;
}
.CategoryItem-Content {
width: 80%;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
/* background-image: url("https://upload-os-bbs.hoyolab.com/upload/2024/11/06/76360577/c14e1946fe51e83b7ac96aea11781322_5331951890877757439.jpg?x-oss-process=image%2Fresize%2Cs_1000%2Fauto-orient%2C0%2Finterlace%2C1%2Fformat%2Cwebp%2Fquality%2Cq_70");
background-size: cover; */
pointer-events: none;
}
.CBackgroundImage {
width: 80%;
height: 100px;
position: absolute;
background-size: cover;
filter: grayscale(.8) brightness(0.3);
background-position: center;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: all;
}
.CText {
z-index: 3;
width: 100%;
text-align: center;
color: white;
}
.CLogoImage {
width: 60px;
z-index: 3;
margin: 5px;
}
.CBackgroundImage:hover {
filter: grayscale(0) brightness(1);
transition: all 0.3s ease;
height: 150px;
}
.CategoryItem-Content:hover .CLogoImage {
transform: scale(1.2);
transition: all 0.3s ease;
}
.CategoryItem-Content:hover .CText {
color: black;
font-weight: bold;
text-shadow: 2px 2px 2px white;
transition: all 0.3s ease;
}
.CategoryItem-Content:hover .CBackgroundImage {
height: 150px;
transition: all 0.3s ease;
}
.CategoryItem-Content.active>.CLogoImage {
transform: scale(1.2);
transition: all 0.3s ease;
}
.CategoryItem-Content.active>.CBackgroundImage {
filter: grayscale(0) brightness(1);
transition: all 0.3s ease;
height: 150px;
}
.CategoryItem-Content.active>.CText {
color: black;
font-weight: bold;
text-shadow: 2px 2px 2px white;
transition: all 0.3s ease;
}
.CategorysContainer> :first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
overflow: hidden;
}
.CategorysContainer> :first-child .CBackgroundImage {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.CategorysContainer> :last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.CategorysContainer> :last-child .CBackgroundImage {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.PreviewBeforeUpload {
max-height: 250px;
object-fit: contain;
max-width: 75%;
}
.image-responsive {
object-fit: contain;
}
.bubbles {
pointer-events: none;
position: absolute;
display: flex;
gap: 35px;
justify-content: center;
align-items: center;
z-index: 1000;
width: 100%;
height: 100%;
padding: 20px;
border-radius: 20px;
/* En lugar de que sea un gradiente linear, que sea cirular empezando desde el centro y que se haga pequeño y grande como pulso*/
background: radial-gradient(circle, #ffffff49 0%, #ffffffee 50%, #ffffffff 100%);
background-size: 150% 150%;
background-position: center;
}
.bubble {
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
animation: explode 1.8s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.bubble::before {
content: '✨';
position: absolute;
opacity: 0;
font-size: 18px;
animation: sparkle 1.8s infinite;
}
.bubble:nth-child(1) {
background: #E3057A;
animation-delay: 0s;
}
.bubble:nth-child(2) {
background: #20C2D7;
animation-delay: 0.2s;
}
.bubble:nth-child(3) {
background: #FFEFB4;
animation-delay: 0.4s;
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes sparkle {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.5) rotate(180deg);
}
100% {
opacity: 0;
transform: scale(2) rotate(360deg);
}
}
.bubble::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
}
100% {
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
}
}
.loading {
pointer-events: none;
position: relative;
padding: 0px !important;
transition: all 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card-container {
width: 100%;
min-height: 100%;
}
.PVOptionsView {
padding: 10px;
margin: 10px;
}
.CardSizeValue {
font-family: 'Beaufort Bold';
font-weight: 400;
text-align: center;
color: rgb(49, 49, 49);
}
#CardSizeValue {
font-size: 40px;
}
#CardSizeValueYGO {
font-size: 30px;
}
#CardPriceValueYGO {
font-size: 20px;
}
.CardSizeValueVal {
font-family: 'Impact';
font-weight: 400;
text-align: center;
color: rgb(49, 49, 49);
}
#CardSizeValueVal {
font-size: 40px;
}
/* Estilos para la sección de productos destacados */
.featured-products-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.featured-products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../imagenes/blobs/patternStars.png') repeat;
opacity: 0.1;
animation: starsMove 20s linear infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes starsMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-100px);
}
}
.featured-title {
color: white;
font-size: 2.5rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 0.5rem;
position: relative;
z-index: 2;
}
.featured-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.featured-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 3rem 0;
position: relative;
z-index: 2;
}
.product-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
cursor: pointer;
position: relative;
overflow: hidden;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.product-card:hover::before {
left: 100%;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.product-image-container {
position: relative;
overflow: hidden;
border-radius: 15px;
margin-bottom: 1rem;
height: 250px;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image {
transform: scale(1.1);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card:hover .product-overlay {
opacity: 1;
}
.btn-view-product {
background: var(--color-primario);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-view-product:hover {
background: var(--color-primario-dark);
transform: scale(1.1);
}
.product-info {
text-align: center;
}
.product-name {
font-size: 1.3rem;
font-weight: bold;
color: var(--color-letra);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.product-price {
font-size: 1.1rem;
color: var(--color-primario);
font-weight: bold;
margin: 0;
}
.btn-primario {
background: var(--color-primario);
border: none;
color: white;
padding: 12px 30px;
border-radius: 25px;
font-weight: bold;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.btn-primario:hover {
background: var(--color-primario-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(227, 5, 122, 0.3);
}
/* Responsive design */
@media (max-width: 768px) {
.featured-products-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1rem 0;
}
.featured-title {
font-size: 2rem;
}
.featured-subtitle {
font-size: 1rem;
}
.product-card {
padding: 1rem;
}
.product-image-container {
height: 200px;
}
}
/* === Mejoras adicionales para los productos destacados === */
/* Suavizar transiciones en las tarjetas de productos */
.product-card {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
}
/* Efecto de enfoque para productos resaltados en el catálogo */
.productCartV2 {
transition: box-shadow 0.3s ease;
}
/* Mejorar la responsividad del botón principal */
.btn-primario.btn-lg {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primario.btn-lg::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
}
.btn-primario.btn-lg:hover::before {
width: 300px;
height: 300px;
}
.dropzone {
width: 350px;
height: 220px;
border: 2px dashed var(--color-primario);
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: border-color 0.2s;
margin-bottom: 24px;
transition: background-color 0.3s, border-color 0.3s;
}
.dropzone.active {
background-color: #e3057b3b;
transition: background-color 0.3s, border-color 0.3s;
}
.svgIcon {
fill: var(--color-primario)
}
/* Ajustes adicionales para móviles */
@media (max-width: 768px) {
.product-card:hover {
transform: translateY(-5px) scale(1.01) !important;
}
.featured-products-section {
padding: 3rem 0;
}
.featured-products-grid {
padding: 2rem 1rem;
}
.product-card {
padding: 1.5rem;
}
}
/* === Bootstrap: Adaptación tema oscuro === */
body.dark-theme {
.dropzone {
color: var(--main-text) !important;
}
.accordion-button {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
.accordion-item {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
dialog {
background-color: var(--modal-bg) !important;
color: var(--modal-text) !important;
border-color: var(--border-color) !important;
}
.GridContainer {
background: transparent !important;
}
.PaginationContainer {
background: linear-gradient(transparent, #aaaaaa5c);
}
.directionExample {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-radius: 10px;
}
.infoElement {
color: var(--main-text) !important;
}
.CardSizeValue {
color: var(--main-text) !important;
}
.text-muted {
color: var(--secondary-text) !important;
}
/* Formularios */
input.form-control,
textarea.form-control,
select.form-select,
.form-control {
background-color: var(--input-bg) !important;
color: var(--input-text-color) !important;
border-color: var(--input-border-color) !important;
}
input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus,
.form-control:focus {
background-color: var(--input-bg) !important;
color: var(--input-text-color) !important;
border-color: var(--input-focus-border-color) !important;
box-shadow: 0 0 0 0.2rem var(--input-focus-shadow) !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
color: var(--secondary-text) !important;
opacity: 1;
}
/* Selects */
select.form-select,
.form-select {
background-color: var(--input-bg) !important;
color: var(--input-text-color) !important;
border-color: var(--input-border-color) !important;
}
/* Botones */
.btn,
.btn-primary,
.btn-secondary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-light,
.btn-dark {
/* background-color: var(--card-bg) !important; */
/* color: var(--main-text) !important; */
/* border-color: var(--border-color) !important; */
}
.btn-primary {
/* background-color: var(--color-primario) !important; */
/* color: var(--btn-text) !important; */
/* border-color: var(--color-primario) !important; */
}
.btn-primary:hover {
background-color: var(--color-primario-dark) !important;
color: var(--btn-text) !important;
}
.btn-secondary {
background-color: var(--color-letra) !important;
color: var(--btn-text) !important;
border-color: var(--color-letra) !important;
}
.btn-secondary:hover {
background-color: var(--main-bg) !important;
color: var(--color-letra) !important;
}
.btn-light {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
.btn-dark {
background-color: var(--main-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
/* Navbars */
.navbar,
.navbar-dark,
.navbar-nav,
.navbar-brand,
.navbar-toggler {
/* background-color: var(--card-bg) !important; */
/* color: var(--main-text) !important; */
/* border-color: var(--border-color) !important; */
}
.navbar .nav-link,
.navbar-dark .nav-link {
color: var(--main-text) !important;
}
.navbar .nav-link.active,
.navbar .nav-link:active {
color: var(--color-primario) !important;
background-color: transparent !important;
}
/* Dropdowns */
.dropdown-menu {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
.dropdown-item {
color: var(--main-text) !important;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--color-primario) !important;
color: var(--btn-text) !important;
}
/* Modals */
.modal-content {
background-color: var(--modal-bg) !important;
color: var(--modal-text) !important;
border-color: var(--border-color) !important;
}
.modal-header,
.modal-footer {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
/* Alerts */
.alert {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
.alert-primary {
background-color: var(--color-primario-dark) !important;
color: var(--btn-text) !important;
}
.alert-secondary {
background-color: var(--color-letra) !important;
color: var(--btn-text) !important;
}
/* Tablas */
.table,
.table-bordered,
.table-striped,
.table-hover {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--table-border-color) !important;
}
.table thead,
.table thead th {
background-color: var(--table-header-bg) !important;
color: var(--main-text) !important;
}
.table tbody tr:nth-child(even) {
background-color: var(--table-row-even-bg) !important;
}
.table-hover tbody tr:hover {
background-color: var(--table-row-hover-bg) !important;
}
/* Paginación */
.pagination .page-link {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
.pagination .page-item.active .page-link {
background-color: var(--color-primario) !important;
color: var(--btn-text) !important;
border-color: var(--color-primario) !important;
}
/* Toasts */
.toast {
background-color: var(--card-bg) !important;
color: var(--main-text) !important;
border-color: var(--border-color) !important;
}
}
.cr-boundary {
border-radius: 10px;
}
.customChampion {
width: 95px;
border: 2px solid var(--color-primario);
border-radius: 10px;
}
.swiper-slide-shadow {
background: transparent !important;
}