/* ========================================================= case_study.css — stili specifici per le pagine di progetto Il colore d'accento viene scelto dal tema impostato su : body.theme-account → arancio (Account) body.theme-francesca → rosa (Francesca Pallozzi Lavorante) ========================================================= */ body.theme-account { --clr-accent: var(--clr-account); --clr-accent-2: var(--clr-account-2); --clr-accent-soft: var(--clr-account-soft); --clr-accent-glow: var(--clr-account-glow); } body.theme-francesca { --clr-accent: var(--clr-francesca); --clr-accent-2: var(--clr-francesca-2); --clr-accent-soft: var(--clr-francesca-soft); --clr-accent-glow: var(--clr-francesca-glow); } /* ---------- Hero case study ---------- */ .cs-hero { padding-block: clamp(3rem, 7vw, 5rem) var(--section-py); } .cs-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } .cs-hero .heading { text-align: left; margin: 0; max-width: none; } .cs-hero .section-lead { margin-top: 1.25rem; } .cs-hero .bottoni { margin-top: 2rem; justify-content: flex-start; } .cs-hero .browser-chrome .bc-body { min-height: 320px; } /* ---------- Blocchi narrativi alternati ---------- */ .cs-block { display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--clr-border); } .cs-block:first-of-type { border-top: none; padding-top: 0; } .cs-label { font-family: var(--ff-mono); font-size: var(--fs-300); color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 0.3rem; } .cs-block h2 { font-size: var(--fs-700); font-weight: var(--fw-extrabold); margin-bottom: 1rem; max-width: 26ch; } .cs-block .paragraph { max-width: 65ch; } /* ---------- Processo / risultati ---------- */ .cs-outcomes { padding-top: 0; } /* ---------- CTA finale ---------- */ .cs-cta { text-align: center; } .cs-cta .bottoni { justify-content: center; } @media (max-width: 900px) { .cs-hero-grid { grid-template-columns: 1fr; } .cs-hero .heading, .cs-hero .section-lead { text-align: center; margin-inline: auto; } .cs-hero .bottoni { justify-content: center; } } @media (max-width: 720px) { .cs-block { grid-template-columns: 1fr; gap: 0.75rem; } }