/* ========================================================= AdessoMarketing - Caso Studio (singolo) Path nel child theme: /wp-content/themes/{tuo-child}/assets/casi-studio.css Caricato solo nelle pagine del CPT "caso_studio" ========================================================= */ /* --------------------------------------------------------- 1. VARIABILI - Palette + Tipografia --------------------------------------------------------- */ :root { /* Palette (da affinare guardando il PDF reale - sono valori indicativi) */ --am-blu-scuro: #0a1d3d; --am-blu-medio: #16305e; --am-arancione: #ff7a1a; --am-arancione-h: #ff8a3a; --am-bianco: #ffffff; --am-grigio-1: #f5f5f7; /* sfondo sezioni chiare */ --am-grigio-2: #e5e5ea; /* bordi soft */ --am-grigio-3: #8e8e93; /* testo secondario */ --am-nero: #1c1c1e; /* Font: il sito usa probabilmente font scelti via Astra/Kadence/GP. Lascio le variabili pronte: se hai un font specifico del brand, sostituisci qui sotto e il resto del CSS lo eredita ovunque. */ --am-font-base: inherit; /* eredita dal tema attivo */ --am-font-display: inherit; /* Spaziature standard */ --am-section-py: clamp(60px, 8vw, 120px); --am-container: 1140px; --am-radius: 12px; } /* --------------------------------------------------------- GENERATEPRESS - Override wrapper a max-width + flex Su questa installazione .site-content e' un flex container con .content-area come figlio: il flex impedisce alla colonna di espandersi oltre il proprio asse, quindi NON basta dare width: 100% al figlio. Soluzione: togliere il flex. (Sicuro perche' su .no-sidebar non ci sono widget-area) --------------------------------------------------------- */ body.single-caso_studio .site-content { display: block !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.single-caso_studio .site-content > .container, body.single-caso_studio .site-content > .grid-container, body.single-caso_studio #primary, body.single-caso_studio .content-area { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; flex: 1 1 100% !important; /* fallback se per qualche regola il flex resta attivo */ } /* Rimuovo padding/bordi/box decorativi dell'articolo */ body.single-caso_studio .inside-article { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Nascondo l'eventuale titolo automatico del post (entry-header): il titolo del caso studio lo gestiamo dentro l'HERO con il campo ACF. */ body.single-caso_studio .entry-header { display: none !important; } /* --------------------------------------------------------- 2. LAYOUT - Container + Reset locale --------------------------------------------------------- */ .cs-main { font-family: var(--am-font-base); color: var(--am-nero); background: var(--am-bianco); } .cs-container { max-width: var(--am-container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } /* Tutte le sezioni hanno padding verticale uniforme. La larghezza piena la fornisce GP grazie alla classe .full-width-content sul : niente piu' hack tipo "100vw + margin -50vw". */ .cs-hero, .cs-intro, .cs-processo, .cs-risultati, .cs-perche, .cs-testimonianze, .cs-correlati, .cs-cta { padding-block: var(--am-section-py); } /* Sezioni con sfondo scuro */ .cs-risultati, .cs-cta { background: var(--am-blu-scuro); color: var(--am-bianco); } /* Sezioni con sfondo grigio chiaro */ .cs-intro, .cs-correlati { background: var(--am-grigio-1); } /* --------------------------------------------------------- 3. PLACEHOLDER (solo durante sviluppo - li toglieremo sostituendoli con i blocchi reali, uno alla volta) --------------------------------------------------------- */ .cs-placeholder, .cs-hero__placeholder { font-family: monospace; font-size: 14px; color: var(--am-grigio-3); border: 1px dashed var(--am-grigio-2); padding: 40px 20px; text-align: center; border-radius: var(--am-radius); margin: 0; } .cs-placeholder--light { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); } /* --------------------------------------------------------- 4. UTILITY (le useremo nei blocchi successivi) --------------------------------------------------------- */ .cs-accent { color: var(--am-arancione); } .cs-italic { font-style: italic; } /* ========================================================= BLOCCO 1 - HERO La sovrapposizione dell'header e' gestita lato tema/Elementor: qui l'hero ha solo il background full-width e un padding verticale generoso (per stare comodo anche se l'header trasparente si sovrappone). ========================================================= */ .single-caso_studio .cs-hero { position: relative; background-image: url('http://demo.adessomarketing.it/am-nuovo/wp-content/uploads/2026/05/AM_Sito_Home_Hero_BG.webp'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: var(--am-blu-scuro); /* fallback */ color: var(--am-bianco); padding-top: clamp(120px, 14vw, 200px); padding-bottom: clamp(80px, 10vw, 140px); overflow: hidden; } .cs-hero__inner { position: relative; z-index: 2; } /* --- TAGS in alto (CASO STUDIO · SETTORE) --- */ .cs-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .cs-hero__tag { display: inline-block; padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: var(--am-bianco); background: transparent; line-height: 1.4; } .cs-hero__tag--primary { background: var(--am-arancione); border-color: var(--am-arancione); color: var(--am-bianco); } /* --- Headline --- */ .cs-hero__headline { font-size: clamp(44px, 7vw, 96px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--am-bianco); margin: 0 0 28px; max-width: 18ch; } /* --- Sottotitolo / sintesi --- */ .cs-hero__subtitle { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 0 0 24px; } /* --- Nome cliente --- */ .cs-hero__cliente { display: inline-block; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--am-arancione); } /* --- Responsive tweaks --- */ @media (max-width: 640px) { .cs-hero__headline { max-width: none; } .cs-hero__subtitle { max-width: none; } } /* ========================================================= TIPOGRAFIA RIUSABILE (eyebrow, h2, h3) ========================================================= */ .cs-eyebrow { display: inline-block; margin: 0 0 16px; padding: 6px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--am-arancione); color: var(--am-bianco); border-radius: 999px; } .cs-eyebrow--light { background: rgba(255,255,255,0.12); color: var(--am-bianco); } .cs-h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--am-nero); margin: 0 0 48px; } .cs-h2--light { color: var(--am-bianco); } .cs-h3 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--am-nero); margin: 0 0 16px; } .cs-h3--light { color: var(--am-bianco); } /* ========================================================= BLOCCO 2 - INTRO (3 box) ========================================================= */ .cs-intro__grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); } .cs-intro__grid--3 .cs-intro__box:last-child { grid-column: 1 / -1; } .cs-intro__grid--1 { grid-template-columns: 1fr; } .cs-intro__box { position: relative; background: var(--am-bianco); border: 1px solid var(--am-grigio-2); border-radius: var(--am-radius); padding: 36px 32px; overflow: hidden; } .cs-intro__box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--am-arancione); } .cs-intro__num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--am-arancione); margin-bottom: 16px; } .cs-intro__headline { font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--am-nero); line-height: 1.25; margin: 0 0 12px; } .cs-intro__body { font-size: 16px; line-height: 1.55; color: var(--am-grigio-3); margin: 0; } @media (max-width: 768px) { .cs-intro__grid { grid-template-columns: 1fr; } .cs-intro__grid--3 .cs-intro__box:last-child { grid-column: auto; } } /* ========================================================= BLOCCO 3 - PROCESSO ========================================================= */ .cs-processo__header { margin-bottom: 56px; max-width: 720px; } .cs-processo__sez { margin-top: 48px; } .cs-processo__sez--with-img { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cs-processo__img img { width: 100%; height: auto; border-radius: var(--am-radius); display: block; } /* Lista punti 01-04 */ .cs-punti-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cs-punto { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--am-bianco); border: 1px solid var(--am-grigio-2); border-radius: 10px; transition: border-color .2s ease; } .cs-punto:hover { border-color: var(--am-arancione); } .cs-punto__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; background: var(--am-arancione); color: var(--am-bianco); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; } .cs-punto__txt { font-size: 16px; color: var(--am-nero); line-height: 1.4; } /* 4 box 2 chiari + 2 scuri */ .cs-box-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cs-box { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 10px; min-height: 88px; } .cs-box--light { background: var(--am-grigio-1); color: var(--am-nero); border: 1px solid var(--am-grigio-2); } .cs-box--dark { background: var(--am-blu-scuro); color: var(--am-bianco); } .cs-box__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; background: var(--am-arancione); color: var(--am-bianco); font-weight: 700; font-size: 14px; } .cs-box__txt { font-size: 15px; line-height: 1.4; } @media (max-width: 900px) { .cs-processo__sez--with-img { grid-template-columns: 1fr; } .cs-box-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cs-box-grid { grid-template-columns: 1fr; } } /* ========================================================= BLOCCO 4 - RISULTATI (sfondo blu) ========================================================= */ .cs-risultati { background: var(--am-blu-scuro); color: var(--am-bianco); } .cs-risultati__header { margin-bottom: 48px; max-width: 720px; } .cs-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); } .cs-kpi__valore { font-size: clamp(40px, 5.5vw, 72px); font-weight: 700; line-height: 1; color: var(--am-arancione); letter-spacing: -0.02em; margin-bottom: 12px; } .cs-kpi__desc { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; } .cs-risultati__chiusura { margin-top: 48px; max-width: 760px; } .cs-risultati__body { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.85); } .cs-risultati__body p:first-child { margin-top: 0; } .cs-risultati__body p:last-child { margin-bottom: 0; } @media (max-width: 780px) { .cs-kpi-grid { grid-template-columns: 1fr; gap: 32px; } } /* ========================================================= BLOCCO 5 - PERCHE' CONTA ========================================================= */ .cs-perche__inner { max-width: 760px; } .cs-perche__body { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--am-grigio-3); } /* ========================================================= BLOCCO 6 - TESTIMONIANZE ========================================================= */ .cs-testimonianze { background: var(--am-bianco); } .cs-testimonianze__header { margin-bottom: 40px; } .cs-testi-video { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 40px; } .cs-testi-video__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--am-blu-scuro); border-radius: var(--am-radius); overflow: hidden; text-decoration: none; } .cs-testi-video__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs-testi-video__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--am-blu-medio), var(--am-blu-scuro)); } .cs-testi-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--am-arancione); color: var(--am-bianco); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; } .cs-testi-video__media:hover .cs-testi-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--am-arancione-h); } .cs-testi-video__testo { font-size: 16px; line-height: 1.6; color: var(--am-nero); } .cs-testi-testo { background: var(--am-grigio-1); border-radius: var(--am-radius); padding: 40px; max-width: 820px; } .cs-testi-testo__quote { margin: 0 0 24px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; font-style: italic; color: var(--am-nero); } .cs-testi-testo__autore { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .cs-testi-testo__nome { font-weight: 700; color: var(--am-nero); } .cs-testi-testo__ruolo { color: var(--am-grigio-3); } @media (max-width: 820px) { .cs-testi-video { grid-template-columns: 1fr; gap: 24px; } } /* ========================================================= BLOCCO 7 - NON E' UN CASO ISOLATO (correlati) ========================================================= */ .cs-correlati { background: var(--am-grigio-1); } .cs-correlati__header { margin-bottom: 48px; } .cs-correlati__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cs-card { background: var(--am-bianco); border-radius: var(--am-radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .cs-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(10, 29, 61, 0.12); } .cs-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .cs-card__media { aspect-ratio: 16 / 10; background: var(--am-blu-scuro); overflow: hidden; } .cs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; } .cs-card__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-arancione); } .cs-card__titolo { font-size: 18px; font-weight: 700; color: var(--am-nero); line-height: 1.3; margin: 0; } .cs-card__txt { font-size: 14px; color: var(--am-grigio-3); line-height: 1.5; margin: 0; flex-grow: 1; } .cs-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--am-arancione); transition: gap .2s ease; } .cs-card:hover .cs-card__cta { gap: 12px; } @media (max-width: 900px) { .cs-correlati__grid { grid-template-columns: 1fr; } } /* ========================================================= BLOCCO 8 - CTA FINALE ========================================================= */ .cs-cta { background: var(--am-blu-scuro); color: var(--am-bianco); } .cs-cta__inner { max-width: 720px; text-align: center; } .cs-cta__headline { font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--am-bianco); margin: 0 0 20px; } .cs-cta__body { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0 0 32px; } .cs-cta__btn { display: inline-block; padding: 16px 36px; background: var(--am-arancione); color: var(--am-bianco); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; text-decoration: none; transition: background .2s ease, transform .2s ease; } .cs-cta__btn:hover { background: var(--am-arancione-h); transform: translateY(-2px); }