/* * X115 — Pattern condiviso per l'intestazione delle pagine prodotto. * * Il pattern è applicato al blocco .x115-product-copy, ma il livello grafico * viene esteso a tutta la larghezza del viewport tramite ::before. */ .x115-product-copy.x115-product-pattern { --x115-product-pattern-size:88px; --x115-product-pattern-offset-y:18px; --x115-product-pattern-halo-x:26%; --x115-product-pattern-halo-y:72%; position:relative; isolation:isolate; overflow:visible!important; background:#fffefb!important; } .x115-product-copy.x115-product-pattern::before { content:""; position:absolute; top:-18px; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:0; pointer-events:none; background-color:#fffefb; background-image: radial-gradient( ellipse var(--x115-product-pattern-halo-x) var(--x115-product-pattern-halo-y) at center, rgba(255,254,251,1) 0%, rgba(255,254,251,.995) 55%, rgba(255,254,251,.94) 70%, rgba(255,254,251,.58) 86%, rgba(255,254,251,0) 100% ), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%0A%20width=%22112%22%20height=%22112%22%20viewBox=%220%200%20112%20112%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpath%20id=%22x115-glyph%22%0A%20%20%20%20%20%20d=%22M%201%200%20L%200%201%20L%202%202%20L%2010%203%20L%2016%2011%20L%2018%2016%20L%2020%2018%20L%2024%2027%20L%2026%2029%20L%2038%2053%20L%2038%2056%20L%2030%2072%20L%2028%2074%20L%2024%2083%20L%2022%2085%20L%2020%2090%20L%2018%2092%20L%2017%2095%20L%2015%2097%20L%2012%20103%20L%209%20105%20L%205%20105%20L%204%20106%20L%201%20106%20L%200%20107%20L%201%20108%20L%2031%20108%20L%2032%20107%20L%2031%20106%20L%2020%20105%20L%2018%20103%20L%2018%20102%20L%2028%2082%20L%2030%2080%20L%2033%2073%20L%2035%2071%20L%2036%2068%20L%2041%2061%20L%2044%2064%20L%2052%2080%20L%2054%2082%20L%2058%2090%20L%2058%2092%20L%2062%2099%20L%2062%20101%20L%2063%20102%20L%2063%20103%20L%2061%20105%20L%2050%20106%20L%2049%20108%20L%2087%20108%20L%2088%20107%20L%2087%20106%20L%2080%20105%20L%2075%2099%20L%2074%2096%20L%2069%2089%20L%2066%2082%20L%2064%2080%20L%2050%2051%20L%2061%2029%20L%2063%2027%20L%2066%2020%20L%2068%2018%20L%2070%2013%20L%2072%2011%20L%2077%203%20L%2080%203%20L%2081%202%20L%2085%202%20L%2086%201%20L%2088%201%20L%2088%200%20L%2056%200%20L%2056%201%20L%2058%202%20L%2063%202%20L%2064%203%20L%2069%203%20L%2070%204%20L%2061%2023%20L%2059%2025%20L%2057%2030%20L%2055%2032%20L%2053%2037%20L%2051%2039%20L%2050%2042%20L%2047%2046%20L%2045%2042%20L%2043%2040%20L%2040%2033%20L%2038%2031%20L%2029%2013%20L%2029%2011%20L%2026%206%20L%2026%204%20L%2027%203%20L%2031%203%20L%2032%202%20L%2038%202%20L%2040%201%20L%2040%200%20Z%20M%2015%203%20L%2017%203%20L%2019%205%20L%2026%2020%20L%2028%2022%20L%2035%2037%20L%2037%2039%20L%2045%2056%20L%2047%2058%20L%2054%2073%20L%2056%2075%20L%2063%2090%20L%2065%2092%20L%2071%20104%20L%2070%20105%20L%2068%20105%20L%2067%20104%20L%2053%2076%20L%2051%2074%20L%2044%2059%20L%2042%2057%20L%2035%2042%20L%2033%2040%20L%2026%2025%20L%2024%2023%20L%2016%206%20L%2014%204%20Z%22%0A%20%20%20%20%20%20fill-rule=%22evenodd%22%0A%20%20%20%20%20%20clip-rule=%22evenodd%22/%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3C%21--%20Quattro%20X%20principali:%20stessa%20forma%20estratta%20dal%20logo%20--%3E%0A%20%20%3Cg%20fill=%22%23b5ab9f%22%20opacity=%22.70%22%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(-9.122%20-11.172)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(102.877%20-11.172)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(-9.122%20100.828)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(102.877%20100.828)%20scale(0.205)%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20Luce%20superiore%20per%20simulare%20l'incasso%20--%3E%0A%20%20%3Cg%20fill=%22%23ffffff%22%20opacity=%22.20%22%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(-9.772%20-11.822)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(102.227%20-11.822)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(-9.772%20100.177)%20scale(0.205)%22/%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(102.227%20100.177)%20scale(0.205)%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20X%20centrale:%20identica,%20soltanto%20pi%C3%B9%20piccola,%20fine%20e%20chiara%20--%3E%0A%20%20%3Cg%20fill=%22%23bbb0a4%22%20opacity=%22.56%22%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(51.016%2049.896)%20scale(0.112)%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill=%22%23ffffff%22%20opacity=%22.16%22%3E%0A%20%20%20%20%3Cuse%20href=%22%23x115-glyph%22%20xlink:href=%22%23x115-glyph%22%0A%20%20%20%20%20%20transform=%22translate(50.566%2049.446)%20scale(0.112)%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"); background-size: auto, var(--x115-product-pattern-size) var(--x115-product-pattern-size); background-position: center center, 0 var(--x115-product-pattern-offset-y); background-repeat: no-repeat, repeat; /* Leggermente più chiaro rispetto alla prova precedente. */ opacity:.84; } .x115-product-copy.x115-product-pattern > * { position:relative; z-index:1; } @media (max-width:720px) { .x115-product-copy.x115-product-pattern { --x115-product-pattern-size:82px; --x115-product-pattern-offset-y:14px; --x115-product-pattern-halo-x:56%; --x115-product-pattern-halo-y:76%; } } /* * Le intestazioni cosmetiche sono circa 18px più basse di quelle degli * integratori. Manteniamo top:-18px per l'allineamento superiore e * aggiungiamo lo stesso spazio in basso, evitando il taglio dell'ultima fila. */ @media (min-width:721px) { .x115-product-copy.x115-product-pattern.x115-product-pattern-cosmetic { margin-bottom:18px; } .x115-product-copy.x115-product-pattern.x115-product-pattern-cosmetic::before { bottom:-18px; } }