, 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; } section#process-donut.is-finished { height: auto; } 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; } } 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; } } /* --- 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; max-width: 200px; 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; } @media screen and (max-width: 767px) { section#process-donut .donut-node-circle { width: clamp(36px, 11vw, 48px); height: clamp(36px, 11vw, 48px); font-size: 14px; } section#process-donut .donut-node-label { max-width: 110px; font-size: 15px; } section#process-donut .donut-node-1 .donut-node-label { margin-bottom: 14px; } /* Node 02/03: a mòbil l'anell és prou estret perquè una etiqueta "al costat" (left: 100% / right: 100%, com a desktop) arribi més enllà de la vora de la pantalla. Es mou a "a sota" del node, centrada sobre el mateix eix X que el node - mai s'allunya més que l'amplada pròpia de l'etiqueta (110px), independentment de com d'estret sigui l'anell. */ section#process-donut .donut-node-2 .donut-node-label, section#process-donut .donut-node-3 .donut-node-label { left: 50%; right: auto; top: 100%; bottom: auto; transform: translateX(-50%); margin: 12px 0 0; text-align: center; } } section#process-donut .process-donut-footer { 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; } }