, també a * aquesta. Sense neutralitzar-ho, aquest blanc taparia els 300vh sencers * del carril (no només els 100vh visibles de l'anell). Per això es força * "background: none" aquí (selector amb ID, guanya per especificitat sense * dependre de l'ordre de càrrega dels fulls d'estil). * * IMPORTANT #2 (causa real del "sticky no fa efecte"): dues regles de * Legacy_new-child-theme.css apliquen "overflow-x: hidden" directament a * i a TOTA la web: * body { overflow-x: hidden; } (línia ~11813) * html:not(.wp-toolbar) { overflow-x: hidden; } (línia ~46788) * html:not(.wp-toolbar) body:not(#tinymce) { overflow-x: hidden; ... } * Quan qualsevol dels dos eixos d'overflow d'/ no és "visible", * l'especificació força l'altre eix a "auto": i queden * convertits en contenidors de scroll de ple dret, i aquest és exactament * el motiu (documentat i habitual) pel qual "position: sticky" deixa de * funcionar en els seus descendents arreu del document. #page/.site (els * wrappers reals d'aquest tema entre i les seccions) NO tenen cap * regla d'overflow pròpia - no calia "força bruta" sobre ells. Es neutralitza * només per a aquesta plantilla (".page-template-home-page" ja és la * classe que WordPress posa a via body_class(), i ":has()" permet * apuntar l' corresponent sense tocar-lo a la resta del lloc). * ATENCIÓ: si alguna altra part del hero/altres seccions d'aquesta pàgina * depengués d'aquest "overflow-x: hidden" global per amagar un overflow * horitzontal propi (no n'hem trobat cap - el gra del hero i la cinta de * clients ja s'amaguen amb el seu propi overflow:hidden local), reapareixeria * només a la home. Val la pena una ullada ràpida per si hi ha scroll * horitzontal after desplegar. * * ACTUALITZACIÓ (bug mòbil, scroll horitzontal real): "overflow-x: visible" * treu la xarxa de seguretat sencera, així que qualsevol element que * desbordi trenca l'amplada de la pàgina a mòbil - el cas real trobat eren * les etiquetes dels nodes 02/03 del donut (veure més avall), ja corregides * perquè mai s'allunyin del node més que la seva pròpia amplada. Es va provar * "overflow-x: clip" aquí com a xarxa de seguretat addicional (en teoria no * hauria de trencar "position: sticky", a diferència de "hidden", perquè no * força l'altre eix a "auto") però es descarta: provat amb scroll incremental * real en Firefox, "clip" SÍ fa que "detectBrokenSticky()" * (js/components/process-donut.js) detecti sticky com a trencat pocs passos * després d'entrar-hi (stickyTop arriba a valors negatius abans que el "pin" * manual ho corregeixi) - "visible" és l'únic valor provat net (sticky natiu * sense cap fallback) en aquest projecte. La protecció real contra * l'overflow horitzontal ha de venir de no deixar cap element desbordar-se, * no d'aquesta propietat. */ .page-template-home-page { overflow-x: visible; } /* .is-finished NO ha de tocar l'alçada del carril: col·lapsar 300vh -> auto a mitja pàgina obliga finish() a compensar amb un window.scrollBy(), i qualsevol scroll programàtic cancel·la l'scroll suau que hi hagi en curs. Resultat: el primer clic a una àncora que passi per sobre del donut (p.ex. el CTA "Entrem en matteria_?" -> #footer) es quedava aturat aquí. Es manté la classe només com a marcador d'estat, tal com diu la capçalera. */ html:has(body.page-template-home-page) { overflow-x: visible; } section#process-donut { position: relative; height: 300vh; background: none; } section#process-donut .process-donut-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 0; background: none; } /* Viewports curts (mòbil en horitzontal, portàtils petits): el carril de 300vh + sticky no hi cap bé (el contingut fixat podria no tenir prou alçada per respirar). Es desactiva del tot: la secció flueix normal (min-height en comptes de height fixa, sense sticky) i process-donut.js canvia a un simple "reveal" per IntersectionObserver en comptes de vincular-se al progrés fi a fi del scroll. El llindar (700px) es comparteix literalment amb el matchMedia del JS. */ @media screen and (max-height: 700px) { section#process-donut { height: auto; } section#process-donut .process-donut-sticky { position: relative; height: auto; min-height: 100vh; } } /* Mateix motiu amb "prefers-reduced-motion": el JS crida finish() de seguida i no lliga res al scroll, així que el carril de 300vh només seria buit per travessar. Abans això ho resolia el col·lapse de .is-finished; ara que aquell col·lapse ja no existeix (trencava les àncores, veure a dalt) es declara aquí, que a més evita el 300vh des del primer pintat en comptes d'esperar el JS. */ @media screen and (prefers-reduced-motion: reduce) { section#process-donut { height: auto; } section#process-donut .process-donut-sticky { position: relative; height: auto; min-height: 100vh; } } /* Etiqueta petita a sobre del títol (mock): mateixa família/pes que .donut-node-label (Raleway 700, no "Space Grotesk" - el mock ve amb tipografia Figma per defecte que aquest projecte no carrega enlloc, veure _variables.css). */ section#process-donut .process-donut-label { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #22a378; text-align: center; margin: 0 0 8px; } section#process-donut .process-donut-title { text-align: center; max-width: 720px; margin: 0 auto 24px; } @media screen and (min-width: 992px) { section#process-donut .process-donut-title { margin-bottom: 40px; } /* Etiqueta només per sota de "lg": el mock que la introdueix és mòbil, a desktop el títol es queda sol com abans. */ section#process-donut .process-donut-label { display: none; } } /* --- Escenari del donut --- El padding no és decoratiu: com que .donut-node es posiciona amb top/left en % respecte la "padding box" de .donut-stage (és un fill absolut d'un ancestre position:relative), afegir padding aquí separa els nodes/etiquetes de l'anell sense haver de recalcular els seus percentatges (12.5%, 68.75%... veure més avall). L'amplada base també puja una mica per compensar que l'anell (l'SVG, 100% de la content-box) es queda més petit dins seu. */ section#process-donut .donut-stage { position: relative; /* Mòbil: encongit respecte l'anterior min(84vw, 400px) - amb l'anell tan ample, el node 02 (left: 82.48%) empenyia la seva etiqueta lateral fora de la pantalla (veure el bloc de sota, on a més les etiquetes 02/03 es mouen de "al costat" a "a sota" del node pel mateix motiu). */ width: min(78vw, 280px); aspect-ratio: 1 / 1; margin: 0 auto; padding: 20px; } @media screen and (min-width: 768px) { section#process-donut .donut-stage { width: min(50vw, 480px); padding: 38px; } } section#process-donut .donut-svg { display: block; width: 100%; height: 100%; /* Per defecte un SVG comença a dibuixar-se a les 3 en punt; es rota -90deg (sobre el seu propi centre) perquè el dibuix comenci a les 12, on hi ha el node 01. Els nodes/etiquetes NO estan dins d'aquest SVG (són elements HTML germans posicionats en %), així que no giren. */ transform: rotate(-90deg); } section#process-donut .donut-track { fill: none; stroke: #ececec; stroke-width: 64; } section#process-donut .donut-progress { fill: none; stroke: url(#donut-gradient); stroke-width: 64; stroke-linecap: round; /* stroke-dasharray / stroke-dashoffset s'inicialitzen des de JS a partir del radi real del (evita duplicar la circumferència aquí). */ } /* --- Nodes (cercle numerat + etiqueta) --- Ocults per defecte (opacity: 0) i desplaçats lleugerament avall (--reveal-offset): apareixen amb un fade-in suau quan el JS afegeix .is-active en arribar l'anell a la seva posició (veure NODE_THRESHOLDS a process-donut.js). --reveal-offset es compon dins del translate perquè no trenqui el centrat (-50%, -50%) del node sobre el punt exacte de l'anell. */ section#process-donut .donut-node { position: absolute; --reveal-offset: 14px; opacity: 0; transform: translate(-50%, calc(-50% + var(--reveal-offset))); transition: opacity 0.6s ease, transform 0.6s ease; } section#process-donut .donut-node.is-active { --reveal-offset: 0px; opacity: 1; } section#process-donut .donut-node-circle { display: flex; align-items: center; justify-content: center; width: clamp(44px, 12vw, 60px); height: clamp(44px, 12vw, 60px); border-radius: 50%; background: var(--color-dark); color: #ffffff; font-family: var(--font-main); font-weight: 700; font-size: 20px; transition: background-color 0.4s ease, transform 0.4s ease; } section#process-donut .donut-node.is-active .donut-node-circle { background: var(--color-dark); transform: scale(1.1); } /* Mock: Raleway 700 (no 600), notablement més gran que el 17px anterior - les etiquetes són un titular curt, no una llegenda petita. */ section#process-donut .donut-node-label { position: absolute; width: max-content; /* "24vw" només actua per sota de ~834px: just a 768px, on l'escenari passa a min(50vw, 480px) i les etiquetes deixen de ser píndoles per situar-se al costat del node, l'etiqueta del node 03 (ancorada a la seva ESQUERRA amb "right: 100%") arribava a 200px d'amplada quan a l'esquerra de l'anell només hi havia 195px de marge: sortia 5px fora de la pantalla i, com que aquesta pàgina no té xarxa de seguretat d'overflow-x (veure la capçalera d'aquest fitxer), això ja generava scroll horitzontal. A partir de 834px el límit torna a ser els 200px del disseny. */ max-width: min(200px, 24vw); font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 120%; color: var(--color-dark); } /* Node 1 - a dalt (12h): etiqueta a sobre */ section#process-donut .donut-node-1 { top: 12.5%; left: 50%; } section#process-donut .donut-node-1 .donut-node-label { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 26px; text-align: center; } /* Node 2 - a baix a la dreta (~4h): etiqueta a la dreta */ section#process-donut .donut-node-2 { top: 68.75%; left: 82.48%; } section#process-donut .donut-node-2 .donut-node-label { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 28px; text-align: left; } /* Node 3 - a baix a l'esquerra (~8h): etiqueta a l'esquerra */ section#process-donut .donut-node-3 { top: 68.75%; left: 17.52%; } section#process-donut .donut-node-3 .donut-node-label { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 28px; text-align: right; } /* Mock actualitzat de mòbil (2026-07-27): cada node passa a ser UNA sola píndola flotant (badge numerat + etiqueta junts dins la mateixa forma blanca amb vora), en comptes del badge fix sobre l'anell + etiqueta separada d'abans (2026-07-24). Reemplaça per complet l'enfocament previ perquè el mock ho mostra explícitament així (badge+text units, situats al costat de l'anell, no ancorats al seu perímetre) - confirmat amb l'Andrea abans d'implementar, ja que trenca la decisió anterior de mantenir les etiquetes "a sota" per seguretat d'overflow (veure memòria [[overflow-x-clip-breaks-sticky-detection]] / [[mobile-redesign-2026-07-24]]). Les posicions (top/left en %) surten de traduir les coordenades en px del mock (canvas de referència 320x310) a fraccions del mateix .donut-stage ("left-mock / 320", "top-mock / 310"), igual que ja es fa amb les posicions dels nodes en desktop. L'amplada de cada etiqueta es limita individualment (no un valor únic) perquè cada píndola té una distància diferent fins a la vora de l'escenari: node 02 (píndola més a la dreta) és la més ajustada, per no repetir el bug d'overflow horitzontal a 375px que documenta process-donut.css més amunt. */ @media screen and (max-width: 767px) { /* Menys aire per sobre/sota dins el 100vh fixat: a mòbil el padding desktop (32px) es notava com a massa espai buit abans de l'etiqueta i després del peu. */ section#process-donut .process-donut-sticky { padding: 16px 0; } section#process-donut .donut-node { display: flex; align-items: center; gap: 9px; height: 37px; background: #ffffff; border: 1.2px solid var(--color-dark); border-radius: 18px; padding: 0 14px 0 3px; box-sizing: border-box; /* Anul·la el centrat (-50%, -50%) sobre un punt de l'anell: les % de left/top de sota ja són la cantonada superior-esquerra de la píndola, com al mock. Es manté només el lleuger desplaçament vertical de l'aparició (--reveal-offset). */ transform: translateY(var(--reveal-offset)); } section#process-donut .donut-node-circle { position: static; width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; } section#process-donut .donut-node-label { position: static; font-size: 13px; white-space: normal; } /* Els resets de position/transform/margin/text-align es repeteixen per node (en comptes d'un únic ".donut-node-label" genèric) perquè els selectors base per node (".donut-node-1/2/3 .donut-node-label", més amunt en aquest mateix fitxer) tenen més especificitat que un ".donut-node-label" sol - un override genèric no els guanyaria. */ section#process-donut .donut-node-1 { top: 5.2%; left: 41.4%; } section#process-donut .donut-node-1 .donut-node-label { bottom: auto; left: auto; transform: none; margin: 0; text-align: left; max-width: 100px; } section#process-donut .donut-node-2 { top: 65.8%; left: 56.4%; } section#process-donut .donut-node-2 .donut-node-label { left: auto; top: auto; transform: none; margin: 0; text-align: left; max-width: 70px; } section#process-donut .donut-node-3 { top: 41%; left: 3%; } section#process-donut .donut-node-3 .donut-node-label { right: auto; top: auto; transform: none; margin: 0; text-align: left; max-width: 90px; } } section#process-donut .process-donut-footer { /* inline-flex (i no flex) perquè el text-align: center del sticky pare segueixi centrant el bloc text + fletxa .scroll-hint-arrow */ display: inline-flex; align-items: center; gap: 8px; margin: 24px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-dark); opacity: 0.55; } @media (prefers-reduced-motion: reduce) { section#process-donut .donut-node, section#process-donut .donut-node-circle { transition: none; } }