-> cal "background: none" aquí també. * 2) "overflow-x: hidden" a / trenca "position: sticky" -> ja * neutralitzat globalment per a aquesta plantilla a process-donut.css * (".page-template-home-page" i "html:has(body.page-template-home-page)"), * no cal repetir-ho aquí perquè els dos fitxers es carreguen sempre * junts (matteria_custom_components_assets a functions.php). Si mai * es retira process-donut.css de la pàgina sense retirar aquest * component, cal moure aquella neutralització aquí (o a un fitxer * compartit). */ section#services-scroll { position: relative; background: none; } section#services-scroll .services-scroll-sticky { position: sticky; top: 0; height: 100vh; /* "100dvh" accounts for mobile browsers' collapsing address bar (the large/initial "100vh" is measured against the shortest possible viewport, i.e. address bar hidden) - without it, the footer (progress bar + "Continua fent scroll") sits below the fold on load and gets cut off. Declared after "100vh" as a progressive-enhancement fallback for browsers without dvh support. */ height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; background: none; } /* Viewports curts: mateix llindar (700px) que process-donut.css. El carril de N x 100vh + sticky no hi cap bé, així que es desactiva del tot i la secció flueix normal - el component es converteix en un simple "tabs" accionat només pels clics de la columna esquerra (services-scroll.js detecta aquest mateix matchMedia i no vincula el progrés al scroll). "!important" és necessari perquè l'alçada del carril ve d'un estil inline (height en vh calculat a PHP), amb més especificitat que aquesta regla de classe. */ @media screen and (max-height: 700px) { section#services-scroll { height: auto !important; } section#services-scroll .services-scroll-sticky { position: relative; height: auto; min-height: 100vh; } } section#services-scroll .services-scroll-title { text-align: center; max-width: 720px; margin: 0 auto 8px; } section#services-scroll .services-scroll-section-subtitle { text-align: center; max-width: 720px; font-family: var(--font-main); font-weight: 700; padding-bottom: 32px; color: var(--color-dark); } /* Mock: Raleway 600 30px (no Montserrat 500) - és un subtítol de marca, fa servir el tipus de titular, no el de cos. */ section#services-scroll .services-scroll-subtitle { text-align: left; margin: 0 0 32px; font-family: var(--font-heading); font-weight: 600; font-size: clamp(18px, 2vw, 24px); line-height: 130%; color: var(--color-dark); } /* --- Columnes (navegació / contingut) --- */ section#services-scroll .services-scroll-columns { display: grid; grid-template-columns: 1fr; gap: 32px; } @media screen and (min-width: 992px) { section#services-scroll .services-scroll-columns { grid-template-columns: minmax(240px, 380px) 1fr; gap: 64px; align-items: start; } } /* --- Columna esquerra: navegació --- El número (01/02/03) es queda sempre a la mateixa mida (amplada fixa de 30px, perquè tots els títols quedin tabulats al mateix punt). El TÍTOL (.services-scroll-nav-label), en canvi, sí que creix a l'estat actiu - és la mida, no només el color, el que marca quin servei està seleccionat. */ section#services-scroll .services-scroll-nav { display: flex; flex-direction: column; gap: 48px; } section#services-scroll .services-scroll-nav-item { display: flex; align-items: center; gap: 18px; width: 100%; background: none; border: none; margin: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-heading); color: #A7ACC4; transition: color 0.4s ease; } section#services-scroll .services-scroll-nav-item:hover, section#services-scroll .services-scroll-nav-item:focus-visible { color: #7D84A8; } section#services-scroll .services-scroll-nav-item.is-active { color: var(--color-dark); } section#services-scroll .services-scroll-nav-index { flex: 0 0 30px; width: 30px; font-size: 20px; font-weight: 700; text-align: left; } /* Mock: totes les etiquetes (actives i inactives) comparteixen la mateixa mida i pes (Raleway 700, ~38px) - el que distingeix l'activa NOMÉS és el color (ja gestionat per .services-scroll-nav-item.is-active, més amunt) i un lleuger desplaçament cap a la dreta, no un creixement de mida. */ section#services-scroll .services-scroll-nav-label { font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; display: inline-block; transform: translateX(0); transition: transform 0.25s ease; } section#services-scroll .services-scroll-nav-item.is-active .services-scroll-nav-label { transform: translateX(18px); } /* --- Columna dreta: contingut (crossfade) --- Totes les .services-scroll-panel comparteixen la mateixa cel·la de grid (grid-area: 1/1): és el truco CSS-only per fer crossfade sense JS de mesura d'alçades - el contenidor s'ajusta automàticament al panell més alt i els panells se superposen mentre s'esvaeixen. */ section#services-scroll .services-scroll-content { display: grid; } section#services-scroll .services-scroll-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease; } section#services-scroll .services-scroll-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; } section#services-scroll .services-scroll-description { font-size: 16px; line-height: 150%; color: var(--color-dark); margin: 0 0 24px; } section#services-scroll .services-scroll-cta { display: inline-flex; font-size: 14px; padding: 12px 28px; margin-bottom: 24px; } section#services-scroll .services-scroll-subservices { list-style: none; margin: 0; padding: 0; border-top: 1px solid #EAEAEA; } section#services-scroll .services-scroll-subservice { border-bottom: 1px solid #EAEAEA; } section#services-scroll .services-scroll-subservice a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4px; color: var(--color-dark); font-weight: 600; text-decoration: none; transition: opacity 0.3s ease; } section#services-scroll .services-scroll-subservice a:hover { opacity: 0.6; } section#services-scroll .services-scroll-subservice-arrow { flex-shrink: 0; font-weight: 300; font-size: 18px; line-height: 1; } /* --- Footer: barra de progrés + "continua fent scroll" --- */ section#services-scroll .services-scroll-footer { display: flex; align-items: center; gap: 24px; margin-top: 40px; } section#services-scroll .services-scroll-progress-track { position: relative; flex: 1 1 auto; height: 2px; background: #EFEFEF; } section#services-scroll .services-scroll-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #000000; } section#services-scroll .services-scroll-footer-text { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-dark); opacity: 0.55; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { section#services-scroll .services-scroll-nav-item, section#services-scroll .services-scroll-nav-label, section#services-scroll .services-scroll-panel, section#services-scroll .services-scroll-progress-fill { transition: none; } } /* --- Mòbil/tablet (<992px, mock actualitzat 2026-07-24): acordió, sense sticky-scroll --- Decisió confirmada amb l'Andrea: per sota de "lg" el component deixa de fer scroll-hijacking (el carril N x 100vh no es tradueix bé a touch) i es converteix en un acordió normal (marcat "d-lg-none" a services-scroll-component.php; js/components/services-scroll.js es desactiva del tot en aquest mateix breakpoint). ".services-scroll-columns" i ".services-scroll-footer" ja queden amagats amb "d-none d-lg-grid" / "d-none d-lg-flex" (utilitats de Bootstrap, guanyen per !important) - aquí només cal desactivar el carril alt i el sticky de ".services-scroll-sticky". */ @media screen and (max-width: 991.98px) { section#services-scroll .services-scroll-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; background-color: #EEFBF5 !important; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; } section#services-scroll .services-scroll-title { font-size: 13px; font-family: space-grotesk, sans-serif; color: #22a378; margin-bottom: 8px; } } /* --- Acordió: item/capçalera --- La ratlla de color darrere el títol (mock) es fa amb un "highlighter" de background-image sobre el text (no una amplada fixa en px): el títol ve d'ACF (longitud variable segons el contingut editat), així que una amplada fixa quedaria descentrada si algú l'edita. */ .services-scroll-accordion-item { border: none; border-top: 1px solid #e2e2e6; background-color: #EEFBF5 !important; } .services-scroll-accordion-item:last-child { border-bottom: 1px solid #e2e2e6; } .services-scroll-accordion-button { display: flex; align-items: center; width: 100%; padding: 20px 0; background: none; border: none; box-shadow: none; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-dark); text-align: left; background-color: #EEFBF5 !important; } .services-scroll-accordion-button:not(.collapsed) { background: none; color: var(--color-dark); box-shadow: none; } .services-scroll-accordion-title-text { background-image: linear-gradient(var(--color-primary), var(--color-primary)); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 70%; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* El botó "Veure servei complet" ara és l'últim element del cos de l'acordió (per sota dels subserveis): necessita aire a sobre per separar-lo de l'última fila de la llista, i ja no li cal el "margin-bottom: 24px" pensat per quan anava seguit de la llista (l'"accordion-body" ja aporta el seu propi padding-bottom). El selector repeteix "section#services-scroll" perquè la regla base (".services-scroll-cta", més amunt) porta ID: sense ell, el "margin-bottom: 0" perd per especificitat i el botó es quedava amb els 24px de sota + el padding de l'"accordion-body". */ section#services-scroll .services-scroll-accordion .services-scroll-cta { margin-top: 28px; margin-bottom: 0; } /* Fade en comptes de "pop": Bootstrap només anima l'alçada del collapse, així que el contingut apareixia de cop en obrir-se (brusc). El contingut s'amaga SENSE transició mentre ".collapsing" anima l'alçada, i s'esvaeix cap a dins amb una animació quan s'obre del tot (".show"). Es fa servir una animació i no una transició a propòsit: en acabar, l'element torna al seu estat natural (opacity: 1), així que no pot quedar-se invisible per sempre si l'estat de la classe falla - que és exactament el que passava amb la primera versió, que partia d'"opacity: 0" i depenia de ".show" per fer-se visible. */ .services-scroll-accordion .accordion-body { padding: 0 0 24px; } .services-scroll-accordion .accordion-collapse.collapsing .accordion-body { opacity: 0; } .services-scroll-accordion .accordion-collapse.show .accordion-body { animation: services-scroll-accordion-fade 0.35s ease-out both; } @keyframes services-scroll-accordion-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Ha d'anar DESPRÉS de les dues regles de sobre (no dins del bloc "prefers-reduced-motion" del principi del fitxer): mateixa especificitat, així que només guanya la que ve més tard. Amb moviment reduït el contingut simplement apareix, sempre visible. */ @media (prefers-reduced-motion: reduce) { .services-scroll-accordion .accordion-collapse.show .accordion-body { animation: none; } .services-scroll-accordion .accordion-collapse.collapsing .accordion-body { opacity: 1; } } .services-scroll-accordion .services-scroll-description { font-size: 14.5px; } /* --- Mòbil pur (<768px, mock 2026-07-24): retalls sobre l'acordió --- Per sota del breakpoint "mobile" real (767.98px, el mateix llindar que hero.css/actualitat.css fan servir per distingir mòbil de tablet dins del rang "no-desktop" ja cobert per l'@media de 991.98px més amunt): el highlighter del títol de cada servei es retalla a la meitat (en comptes del 40% que es veu en tablet) i el botó "Veure servei complet" passa a ocupar tot l'ample, amb la tipografia de mock (Space Grotesk 13px / #22a378) aplicada a totes dues peces. */ @media screen and (max-width: 767.98px) { .services-scroll-accordion-title-text { background-size: 100% 50%; background-position: bottom; } section#services-scroll .services-scroll-cta { display: flex; width: 100%; justify-content: center; } }