From 86d608a929f1a3f667e967f1e1adabebd8f112bf Mon Sep 17 00:00:00 2001 From: AdrianoDev Date: Sun, 12 Jul 2026 14:54:50 +0200 Subject: [PATCH] fix(hero): titolo su 3 righe (PERFORMANCE./BALANCE./LONGEVITY.) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lo span .hero__line è reso dal componente e non riceve il data-astro-cid di HeroSlider, quindi le regole scoped .hero__line (display:block e animazioni) non lo colpivano e le righe restavano inline. Ancorato a .hero__text/h1 (che il cid ce l'hanno) con :global(.hero__line), come già fatto per .prog__desc. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/home/HeroSlider.astro | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/home/HeroSlider.astro b/src/components/home/HeroSlider.astro index 1add285..869d980 100644 --- a/src/components/home/HeroSlider.astro +++ b/src/components/home/HeroSlider.astro @@ -35,7 +35,9 @@ const slides = [ /* Come nel Figma: figure a piena altezza ancorate in basso a destra, testo sovrapposto sulla sinistra. */ .hero__in { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); } - .hero__line { display: block; } + /* Lo span .hero__line è reso dal componente e non riceve il data-astro-cid + di questo componente: si ancora a .hero__text (che il cid ce l'ha) + :global. */ + .hero__text h1 :global(.hero__line) { display: block; } .hero__text { position: relative; z-index: 1; max-width: 46%; } .hero__text h1 { font-weight: 500; } .hero__img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 80%; object-fit: contain; object-position: right bottom; } @@ -50,14 +52,14 @@ const slides = [ /* Ingresso al load stile Slider Revolution del template */ @keyframes hero-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } } @keyframes hero-side { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } } - :global(html.js) .hero__line { opacity: 0; animation: hero-up .8s ease forwards; } - :global(html.js) .hero__line:nth-child(1) { animation-delay: .15s; } - :global(html.js) .hero__line:nth-child(2) { animation-delay: .3s; } - :global(html.js) .hero__line:nth-child(3) { animation-delay: .45s; } + :global(html.js) .hero__text h1 :global(.hero__line) { opacity: 0; animation: hero-up .8s ease forwards; } + :global(html.js) .hero__text h1 :global(.hero__line:nth-child(1)) { animation-delay: .15s; } + :global(html.js) .hero__text h1 :global(.hero__line:nth-child(2)) { animation-delay: .3s; } + :global(html.js) .hero__text h1 :global(.hero__line:nth-child(3)) { animation-delay: .45s; } :global(html.js) .hero__text .btn { opacity: 0; animation: hero-up .8s ease .7s forwards; } :global(html.js) .hero__img { opacity: 0; animation: hero-side 1s ease .2s forwards; } @media (prefers-reduced-motion: reduce) { - :global(html.js) .hero__line, :global(html.js) .hero__text .btn, :global(html.js) .hero__img { opacity: 1; animation: none; } + :global(html.js) .hero__text h1 :global(.hero__line), :global(html.js) .hero__text .btn, :global(html.js) .hero__img { opacity: 1; animation: none; } }