Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

promo-eventi2: raffinamento estetico

Browse Source 
Claim su due righe pulite (niente più spezzatura del corsivo), titolo FAQ reso
visibile e uppercase come lo stile del sito, card con prezzi più prominenti,
separatore feature, ombra/hover e featured evidenziata, spaziature bilanciate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
AdrianoDev
2026-07-13 17:26:52 +02:00
parent ae5eef037b
commit 27fdf1fc30
1 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/promo-eventi2.astro
+40 -30
View File
@@ -25,10 +25,11 @@ const wa = t('global.whatsapp');
<div class="promo2"> <div class="promo2">
<!-- Claim principale --> <!-- Claim principale -->
<section class="section"> <section class="section claim-section">
<div class="section-heading"> <div class="claim-wrap">
<h2 class="claim"> <h2 class="claim">
<T tag="promo.hero.title1" as="span" /> <em><T tag="promo.hero.accent" as="span" /></em> <T tag="promo.hero.title2" as="span" /> <span class="l1"><T tag="promo.hero.title1" as="span" /></span>
<span class="l2"><em><T tag="promo.hero.accent" as="span" /></em> <T tag="promo.hero.title2" as="span" /></span>
</h2> </h2>
<T tag="promo.hero.desc" as="p" class="claim-desc" /> <T tag="promo.hero.desc" as="p" class="claim-desc" />
<a class="btn" href="#proposte"><T tag="promo.hero.cta" as="span" /></a> <a class="btn" href="#proposte"><T tag="promo.hero.cta" as="span" /></a>
@@ -76,7 +77,7 @@ const wa = t('global.whatsapp');
<!-- FAQ --> <!-- FAQ -->
<section class="section section--alt"> <section class="section section--alt">
<div class="container faq-wrap"> <div class="container faq-wrap">
<div class="section-heading"><T tag="promo.faq.title" as="h2" /></div> <T tag="promo.faq.title" as="h2" class="faq-title" />
{faqs.map((n) => { {faqs.map((n) => {
const a = resolveContent(`promo.faq.${n}.a`); const a = resolveContent(`promo.faq.${n}.a`);
return ( return (
@@ -120,51 +121,60 @@ const wa = t('global.whatsapp');
.promo2 .btn::after { content: none; } .promo2 .btn::after { content: none; }
/* Claim principale */ /* Claim principale */
.promo2 .claim { text-transform: none; letter-spacing: .01em; } .promo2 .claim-section { padding-block: 72px; text-align: center; }
.promo2 .claim-wrap { max-width: 820px; margin: 0 auto; padding-inline: 20px; }
.promo2 .claim { font-family: var(--font-heading); font-weight: 500; letter-spacing: .02em;
color: var(--c-heading); line-height: 1.18; font-size: clamp(2.1rem, 4.5vw, 3.1rem); margin: 0 0 22px; }
.promo2 .claim .l1, .promo2 .claim .l2 { display: block; }
.promo2 .claim em { font-style: italic; color: var(--c-accent-dark); } .promo2 .claim em { font-style: italic; color: var(--c-accent-dark); }
.promo2 .claim-desc { max-width: 520px; margin: 0 auto 28px; color: var(--c-text); } .promo2 .claim-desc { max-width: 500px; margin: 0 auto 30px; font-size: 1.05rem; color: var(--c-text); }
/* Lancio */ /* Lancio — banda evidenziata */
.promo2 .launch { max-width: 720px; } .promo2 .launch { max-width: 760px; text-align: center; }
.promo2 .launch h2 { margin-top: 8px; } .promo2 .launch .eyebrow { display: block; margin: 0 0 14px; }
.promo2 .launch-accent { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; color: var(--c-accent-dark); margin: 0 0 20px; } .promo2 .launch h2 { margin: 0 0 6px; }
.promo2 .why5 { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; line-height: 1.7; color: var(--c-heading); margin-top: 28px; padding-top: 24px; border-top: 1px solid #e4ded6; } .promo2 .launch-accent { font-family: var(--font-heading); font-style: italic; font-size: 1.2rem; color: var(--c-accent-dark); margin: 0 0 22px; }
.promo2 .launch > p { color: var(--c-text); margin-inline: auto; max-width: 620px; }
.promo2 .why5 { font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.65;
color: var(--c-heading); margin: 32px auto 0; max-width: 600px; padding-top: 28px; border-top: 2px solid var(--c-accent); }
/* Pacchetti */ /* Pacchetti */
.promo2 .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .promo2 .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.promo2 .card { background: var(--c-bg); border: 1px solid #e4ded6; border-radius: 4px; padding: 30px; position: relative; display: flex; flex-direction: column; } .promo2 .card { background: var(--c-bg); border: 1px solid #e7e0d6; border-radius: 6px; padding: 34px 30px; position: relative; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.promo2 .card.featured { border: 2px solid var(--c-accent); } .promo2 .card:hover { box-shadow: 0 14px 40px rgba(58,41,41,.10); transform: translateY(-3px); }
.promo2 .card.featured { border: 1px solid var(--c-accent); box-shadow: 0 10px 34px rgba(58,41,41,.08); }
.promo2 .featured-badge { .promo2 .featured-badge {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-accent); position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--c-accent);
color: #fff; font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #fff; font-family: var(--font-heading); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; padding: 5px 16px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
} }
.promo2 .card .eyebrow { margin: 0 0 6px; } .promo2 .card .eyebrow { margin: 0 0 8px; font-size: .68rem; }
.promo2 .card .ptitle { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--c-heading); letter-spacing: .03em; margin: 0 0 16px; } .promo2 .card .ptitle { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; color: var(--c-heading); letter-spacing: .03em; margin: 0 0 18px; }
.promo2 .card .price-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; } .promo2 .card .price-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 3px; }
.promo2 .card .price { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--c-heading); } .promo2 .card .price { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 600; color: var(--c-heading); line-height: 1; }
.promo2 .card .price-old { font-size: 1rem; color: var(--c-text-light); text-decoration: line-through; } .promo2 .card .price-old { font-size: 1.05rem; color: var(--c-text-light); text-decoration: line-through; }
.promo2 .card .unit { font-size: .8rem; color: var(--c-text-light); margin: 0 0 20px; } .promo2 .card .unit { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-light); margin: 0 0 22px; }
.promo2 .card ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .promo2 .card ul { list-style: none; padding: 22px 0 0; margin: 0 0 26px; border-top: 1px solid #f0eae1; display: flex; flex-direction: column; gap: 11px; }
.promo2 .card li { font-size: .92rem; line-height: 1.5; color: var(--c-text); display: flex; gap: 10px; } .promo2 .card li { font-size: .9rem; line-height: 1.5; color: var(--c-text); display: flex; gap: 10px; }
.promo2 .card li::before { content: "—"; color: var(--c-accent); font-weight: 700; flex-shrink: 0; } .promo2 .card li::before { content: "—"; color: var(--c-accent); font-weight: 700; flex-shrink: 0; }
.promo2 .card .buy { margin-top: auto; justify-content: center; } .promo2 .card .buy { margin-top: auto; justify-content: center; }
.promo2 .validity-note { text-align: center; font-size: .8rem; color: var(--c-text-light); margin: 32px 0 0; } .promo2 .validity-note { text-align: center; font-size: .82rem; color: var(--c-text-light); margin: 34px auto 0; max-width: 560px; }
/* FAQ */ /* FAQ */
.promo2 .faq-wrap { max-width: 760px; } .promo2 .faq-wrap { max-width: 760px; }
.promo2 .faq-block { border-top: 1px solid #e4ded6; padding: 22px 0; } .promo2 .faq-title { text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 44px; }
.promo2 .faq-block { border-top: 1px solid #e4ded6; padding: 20px 4px; transition: padding .2s; }
.promo2 .faq-block:last-child { border-bottom: 1px solid #e4ded6; } .promo2 .faq-block:last-child { border-bottom: 1px solid #e4ded6; }
.promo2 .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; } .promo2 .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; }
.promo2 .faq-q p { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 500; color: var(--c-heading); letter-spacing: .02em; } .promo2 .faq-q p { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 500; color: var(--c-heading); letter-spacing: .02em; }
.promo2 .faq-q:focus-visible { outline: 2px solid var(--c-accent-dark); outline-offset: 4px; } .promo2 .faq-q:focus-visible { outline: 2px solid var(--c-accent-dark); outline-offset: 4px; }
.promo2 .faq-toggle { .promo2 .faq-toggle {
width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d8cfc2; display: flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d8cfc2; display: flex;
align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: var(--c-heading); align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; color: var(--c-heading);
transition: background .2s ease, color .2s ease, border-color .2s ease; transition: background .2s ease, color .2s ease, border-color .2s ease;
} }
.promo2 .faq-block.is-open .faq-toggle { background: var(--c-accent); color: #fff; border-color: var(--c-accent); } .promo2 .faq-block.is-open .faq-toggle { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.promo2 .faq-a { display: none; margin: 14px 0 0; font-size: .92rem; line-height: 1.7; color: var(--c-text-light); max-width: 640px; } .promo2 .faq-a { display: none; margin: 14px 0 0; font-size: .94rem; line-height: 1.75; color: var(--c-text); max-width: 640px; }
.promo2 .faq-block.is-open .faq-a { display: block; } .promo2 .faq-block.is-open .faq-a { display: block; }
.promo2 .faq-a .hl { color: var(--c-accent-dark); font-weight: 600; } .promo2 .faq-a .hl { color: var(--c-accent-dark); font-weight: 600; }