/* * Serveis "Com ho fem?" (global-templates/services-scroll-component.php). * Mateixa tècnica de "scroll hijacking" amigable que * css/components/process-donut.css (llegiu-lo primer per al detall complet * de per què funciona): #services-scroll és NOMÉS un carril de scroll alt * (N x 100vh, N = files del repeater ACF "servicios_scroll", alçada fixada * inline des de PHP), sense contingut visual propi - * .services-scroll-sticky (100vh, position: sticky, top: 0) és l'únic * element visual i es queda fixat en pantalla mentre es recorre el carril. * A diferència del donut, aquí NO hi ha estat final "bloquejat": el * progrés és reversible d'un cap a l'altre del carril (veure * js/components/services-scroll.js). * * Els mateixos dos "gotchas" documentats a process-donut.css apliquen * literalment aquí, perquè és el mateix .page-template-home-page: * 1) ".page-template-home-page section" força background-color blanc a * TOTES les
-> 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; } /* 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); } @media screen and (min-width: 992px) { section#services-scroll .services-scroll-title { margin-bottom: 12px; } section#services-scroll .services-scroll-subtitle { margin-bottom: 48px; } } /* --- 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 { 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; } }