/* ========================================================= LANDING PAGE SYSTEM – AGATTI --------------------------------------------------------- Scopo: - Landing page isolate dal tema - Pensate per ADV (Meta / Ads) - Mobile-first - Cross-browser (Chrome / Firefox / Safari / Mobile) - Scalabili per più serie artistiche Attivazione: NON toccare questo file a pezzi: va letto come un sistema unico. ========================================================= */ /* ========================================================= 1. PALETTE COLORI – STRUTTURA --------------------------------------------------------- I nomi NON descrivono il colore, ma la FUNZIONE del colore. Il significato emotivo lo dà la palette di serie. ========================================================= */ /* ---------- Palette neutra (fallback) ---------- */ body.landing-page { /* Background principali */ --bg-main: #0f0f0f; /* sfondo principale pagina */ --bg-soft: #181818; /* sfondo sezioni secondarie */ /* Testi */ --text-main: #f2f2f2; /* testo primario */ --text-muted: #b5b5b5; /* testo descrittivo / didascalie */ /* Accenti */ --accent-main: #888888; /* CTA / link */ --accent-hover: #aaaaaa; /* hover CTA */ } /* ---------- Torino Sommersa – palette fredda ---------- */ body.landing-page.torino { /* Blu profondi, acqua, città sommersa */ --bg-main: #0e1620; /* blu notte */ --bg-soft: #141f2c; /* blu-grigio architettura */ --text-main: #e6ecf2; /* bianco freddo */ --text-muted: #a8b4c2; /* grigio-azzurro */ --accent-main: #4fa3c7; /* azzurro acqua */ --accent-hover: #6bb7d8; /* azzurro più chiaro */ } /* ---------- Crossover – palette calda ---------- */ body.landing-page.crossover { /* Toni caldi, pelle, materia, contrasto */ --bg-main: #1a120d; /* marrone scuro */ --bg-soft: #241810; /* terra calda */ --text-main: #f2e8dc; /* avorio */ --text-muted: #c9b8a6; /* sabbia */ --accent-main: #c07a3a; /* rame */ --accent-hover: #d89152; /* rame chiaro */ } /* ========================================================= 2. RESET E BASE --------------------------------------------------------- Reset minimo, NON distruttivo. Il tema non deve interferire. ========================================================= */ body.landing-page { margin: 0; background-color: var(--bg-main); color: var(--text-main); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; } body.landing-page * { box-sizing: border-box; } body.landing-page img { display: block; max-width: 100%; height: auto; } /* ========================================================= OVERRIDE TEMA – ISOLAMENTO LANDING ========================================================= */ body.landing-page { display: block !important; /*overflow-x: hidden;*/ } /* ========================================================= 3. WRAPPER CENTRALE --------------------------------------------------------- REGOLA D’ORO: - UNA sola entità gestisce la larghezza - Tutto il contenuto vive qui dentro ========================================================= */ .landing-wrapper { width: 100%; margin-inline: auto; } /* Larghezza reale desktop */ @media (min-width: 1024px) { .landing-wrapper { max-width: 1040px; } } /* ========================================================= 4. SEZIONI --------------------------------------------------------- Padding verticale = ritmo editoriale Padding orizzontale = comfort mobile ========================================================= */ body.landing-page section { padding: 4rem 1.25rem; } @media (min-width: 768px) { body.landing-page section { padding: 6rem 2rem; } } /* ========================================================= 5. HERO --------------------------------------------------------- - Immagine fullscreen - Testo sovrapposto - Pensata per mobile first ========================================================= */ .landing-hero { position: relative; min-height: 100vh; } /* L’immagine occupa la hero ma resta nel flusso */ .hero-image { width: 100%; min-height: 100vh; } .hero-image img { width: 100%; height: 100vh; object-fit: cover; } .hero-text { position: absolute; bottom: 8.2%; left: 1.25rem; right: 1.25rem; /* Gradient scuro per leggibilità testo su immagine --> ok su desktop, mobile no background: linear-gradient(transparent, rgba(0,0,0,0.7)); */ } .hero-text h1 { margin: 0 0 0.5rem; font-size: 2.2rem; letter-spacing: 0.06em; text-transform: uppercase; } .hero-subtitle { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } @media (min-width: 768px) { .hero-text { max-width: 480px; left: 3rem; } } /* ========================================================= 6. INTRO TESTUALE ========================================================= */ .landing-intro { background-color: var(--bg-soft); } .landing-intro p { max-width: 680px; margin: 0 auto 1.5rem; color: var(--text-muted); } /* ========================================================= 7. OPERE --------------------------------------------------------- - Verticali e orizzontali - Una per riga - Ritmo ampio, contemplativo ========================================================= */ .landing-works h2 { text-align: center; margin-bottom: 3rem; letter-spacing: 0.08em; text-transform: uppercase; } .works-gallery { display: flex; flex-direction: column; gap: 4rem; } .work-item { margin: 0; } /* Centratura robusta cross-browser */ .work-item img { margin-inline: auto; } /* Dimensioni per orientamento (solo desktop) */ @media (min-width: 1024px) { .work-item.vertical img { max-width: 720px; } .work-item.horizontal img { max-width: 900px; } } .work-item figcaption { margin-top: 0.75rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); } /* ========================================================= 8. MOCKUP – SCROLL “DA SCOPRIRE” --------------------------------------------------------- NON è un carousel classico. È uno scroll orizzontale naturale. - Nessuna freccia - Nessun loop - Nessun autoplay ========================================================= */ .landing-mockup-scroll { background-color: var(--bg-soft); overflow: hidden; } .landing-mockup-scroll h2, .landing-mockup-scroll h3 { text-align: center; margin-bottom: 2rem; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; } .mockup-track { display: flex; flex-direction: row; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; min-height: 70vh; } .mockup-track::-webkit-scrollbar { display: none; } .mockup-item { flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; align-items: center; } .mockup-item img { width: 85vw; max-width: 520px; height: auto; } /* ========================================================= 9. CTA FINALE --------------------------------------------------------- Punto di conversione. Deve essere chiaro ma non aggressivo. ========================================================= */ .landing-cta { text-align: center; overflow: visible; } .landing-cta h2 { letter-spacing: 0.08em; text-transform: uppercase; } .landing-cta p { max-width: 520px; margin: 0 auto 2rem; color: var(--text-muted); } .cta-button { display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 0 2.5rem; box-sizing: border-box; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; white-space: nowrap; background-color: var(--accent-main); color: #fff; border-radius: 999px; text-decoration: none; } .cta-button:hover { background-color: var(--accent-hover); } /* ========================================================= 10. MOBILE – COMFORT LETTURA --------------------------------------------------------- Evita testi “attaccati ai bordi”. ========================================================= */ @media (max-width: 768px) { body.landing-page p, body.landing-page h1, body.landing-page h2, body.landing-page h3 { padding-inline: 0; } } /* ========================================================= 11. FIX CSS --------------------------------------------------------- Questo **elimina: spazi fantasma, scroll orizzontale inatteso e differenze tra browser** ========================================================= */ .landing-page br { display: none; }