/** * @file * Estils per al component Activitats. * Dropdowns de filtre, buscador i animacions de targetes. */ /* Ocultar scrollbar horitzontal en filtres mòbil */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ============================================================ * BASE COMPARTIDA: buscador i botons dropdown * ============================================================ */ .activitats-search-input, .activitats-dropdown-btn { box-sizing: border-box; height: 44px; background-color: white !important; border: 2px solid #e2e8f0 !important; border-radius: 9999px !important; color: rgb(var(--brand-primary)); font-size: 0.875rem; transition: all 0.2s ease; outline: none !important; } .activitats-search-input:focus, .activitats-dropdown.open .activitats-dropdown-btn { border-color: rgb(var(--brand-accent)) !important; box-shadow: 0 0 0 4px rgba(var(--brand-accent), 0.1); } /* ============================================================ * BUSCADOR * ============================================================ */ .activitats-search-input { width: 100%; padding: 0 1rem 0 3.25rem !important; font-weight: 500; } .activitats-search-input::placeholder { color: #9ca3af; } .activitats-search-icon { color: rgb(var(--brand-primary)); opacity: 0.5; position: relative; z-index: 1; } /* ============================================================ * CONTENEDOR DE FILTRES — forçar ample contra Canvas 85% * ============================================================ */ [data-activitats-filters] { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================ * BARRA FIXED — quan es mou al * ============================================================ */ .activitats-bar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--neutral-border)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .activitats-bar-fixed [data-activitats-filters] { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================ * BOTÓ DROPDOWN * ============================================================ */ .activitats-dropdown-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .activitats-dropdown-btn:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .activitats-dropdown-icon { color: rgb(var(--brand-accent)); } .activitats-dropdown-chevron { transition: transform 0.3s ease; margin-left: 0.5rem; flex-shrink: 0; } /* ============================================================ * DROPDOWN MENÚ DESPLEGABLE * ============================================================ */ .activitats-dropdown { position: relative; } .activitats-dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; min-width: 220px; margin-top: 0.5rem; background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #f3f4f6; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 280px; overflow-y: auto; z-index: 600; } .activitats-dropdown.open .activitats-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .activitats-dropdown.open .activitats-dropdown-btn { border-color: rgb(var(--brand-accent)); box-shadow: 0 0 0 4px rgba(var(--brand-accent), 0.1); } .activitats-dropdown.open .activitats-dropdown-chevron { transform: rotate(180deg); } /* Scrollbar del dropdown */ .activitats-dropdown-menu::-webkit-scrollbar { width: 6px; } .activitats-dropdown-menu::-webkit-scrollbar-track { background: transparent; } .activitats-dropdown-menu::-webkit-scrollbar-thumb { background-color: #e2e8f0; border-radius: 10px; } .activitats-dropdown-menu::-webkit-scrollbar-thumb:hover { background-color: #cbd5e1; } /* Items del dropdown */ .activitats-dropdown-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; font-weight: 600; color: #4b5563; } .activitats-dropdown-item:hover { background-color: #f8fafc; color: rgb(var(--brand-primary)); padding-left: 1.5rem; } .activitats-dropdown-item.selected { background-color: rgba(var(--brand-accent), 0.1); color: rgb(var(--on-accent, var(--brand-primary))); font-weight: 700; } /* Badge de comptador — ocult (no mostrem el nombre d'activitats) */ .activitats-count-badge { display: none; } .activitats-dropdown-item:hover .activitats-count-badge, .activitats-dropdown-item.selected .activitats-count-badge { background-color: rgb(var(--brand-primary)); color: white; } /* ============================================================ * INDICADOR INTEL·LIGENT DE SCROLL * Inicialment dins del contenidor del títol (absolute right). * Quan es fa scroll, JS el mou al amb position:fixed. * ============================================================ */ /* Ocultar en mòbil i tablet */ [data-activitats-indicator] { display: none; } @media (min-width: 1024px) { [data-activitats-indicator] { display: flex; flex-direction: column; align-items: center; z-index: 50; overflow: visible !important; position: relative; will-change: opacity; } /* Quan està fixat al body */ [data-activitats-indicator].is-fixed { position: fixed; } [data-activitats-indicator]:hover { opacity: 1 !important; } } /* Contenidors — han de permetre overflow pels textos absoluts */ [data-activitats-title-row], [data-activitats-indicator], [data-activitats-indicator] > div { overflow: visible !important; } [data-activitats-indicator] > div { position: relative; } /* Icona de ratolí */ .activitats-indicator-mouse { width: 20px; height: 32px; border: 1.5px solid rgb(var(--brand-primary)); border-radius: 9999px; display: flex; justify-content: center; padding-top: 3px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); } .activitats-indicator-dot { width: 4px; height: 6px; background: rgb(var(--brand-primary)); border-radius: 9999px; animation: activitats-bounce 1.5s infinite; } @keyframes activitats-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* Text "Llisca i descobreix" — HORITZONTAL, a l'esquerra del ratolí */ .activitats-indicator-text-left { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 12px; white-space: nowrap; opacity: 1; will-change: opacity; } .activitats-indicator-text-left span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--brand-primary)); } /* Text "Llisca per veure més" — VERTICAL, a sota del ratolí */ .activitats-indicator-text-bottom { position: absolute; top: 100%; margin-top: 12px; opacity: 0; will-change: opacity, transform; } .activitats-indicator-text-bottom span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--brand-primary)); writing-mode: vertical-rl; transform: rotate(180deg); } /* ============================================================ * ANIMACIÓ ENTRADA TARGETES * ============================================================ */ .activitats-card { transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; } /* ============================================================ * BOTÓ LIKE (FAVORITS) * ============================================================ */ .activitat-like-btn:hover { color: #ef4444; } .activitat-like-btn.is-liked { background-color: #ef4444; color: white; } .activitat-like-btn.is-liked:hover { background-color: #dc2626; color: white; } /* Placeholder per a targetes d'activitat sense imatge. */ .activitat-card-placeholder { background: linear-gradient(135deg, rgb(var(--brand-primary)) 0%, rgb(var(--brand-primary) / 0.8) 60%, rgb(var(--brand-secondary, var(--brand-primary))) 100%); position: relative; } .activitat-card-placeholder::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgb(var(--brand-accent) / 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgb(var(--brand-accent) / 0.10) 0%, transparent 35%); pointer-events: none; } .activitat-card-placeholder > * { position: relative; z-index: 1; } /* Mode compacte (subcategories): totes les fitxes visibles, cel·les menors */ .activitats-grid--compact .activitats-card > div:last-child { padding: 1rem; } .activitats-grid--compact .activitats-card h3 { font-size: 1rem; margin-bottom: 0.4rem; } .activitats-grid--compact .activitats-card p { font-size: 0.82rem; line-height: 1.5; -webkit-line-clamp: 2; } .activitats-grid--compact .activitats-card .flex.flex-wrap.gap-2 { margin-bottom: 0.6rem; } .activitats-grid--compact .activitats-card .flex.flex-wrap.gap-2 span { padding: 0.25rem 0.5rem; font-size: 0.62rem; }