/* ==================================================================== VIA LIBERA ALL'IMMAGINAZIONE — Foglio di stile unico Generato dal consolidamento delle 6 pagine del mockup. Struttura: BASE condivisa · COMPONENTI · RESPONSIVE. Scoping per-pagina via classe sul : page-home, page-cap1..page-cap5. ==================================================================== */ /* =================================================================== 1. FONT FACES =================================================================== */ @font-face { font-family: 'Teenage Dreams'; src: url('../fonts/TeenageDreamsFont-Regular.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Teenage Dreams'; src: url('../fonts/TeenageDreamsFont-Bold.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Teenage Dreams Scribbles'; src: url('../fonts/TeenageDreamsFont-Scribbles.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Teenage Dreams Alt'; src: url('../fonts/TeenageDreamsFont-Alternative1.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'GT Planar'; src: url('../fonts/GT-Planar-Italic-15-Bold.woff2') format('woff2'), url('../fonts/GT-Planar-Italic-15-Bold.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; } /* =================================================================== 2. DESIGN TOKENS =================================================================== */ :root { --mint: #37E5A9; --cyan: #3CCEF2; --ink: #0A0A0A; --paper: #FFFFFF; --display: 'GT Planar', 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif; --brush: 'Teenage Dreams', cursive; --scribbles: 'Teenage Dreams Scribbles', cursive; --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --fs-mega: clamp(80px, 16vw, 280px); --fs-display: clamp(48px, 9vw, 140px); --fs-h2: clamp(40px, 7vw, 110px); --fs-h3: clamp(28px, 4vw, 56px); --fs-lead: clamp(20px, 1.6vw, 28px); --fs-body: clamp(16px, 1.1vw, 19px); --fs-small: clamp(13px, 0.9vw, 15px); --fs-tag: clamp(11px, 0.85vw, 13px); --pad-x: clamp(24px, 6vw, 96px); } /* =================================================================== 3. RESET + BASE =================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 70px; } body { font-family: var(--body); font-size: var(--fs-body); line-height: 1.55; color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; user-select: none; pointer-events: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* =================================================================== 4. SCROLL PROGRESS =================================================================== */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 100; background: transparent; pointer-events: none; } .scroll-progress::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--progress, 0%); background: var(--ink); transition: width 0.05s linear; } /* =================================================================== 5. SITE HEADER =================================================================== */ .site-header { position: sticky; top: 0; z-index: 90; height: 70px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); border-bottom: 2px solid var(--ink); } .site-header-logo { display: block; line-height: 0; } .site-header-logo img { height: 35px; width: auto; display: block; } .site-header-menu { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(13px, 1.15vw, 17px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); background: transparent; border: 2px solid var(--ink); padding: 10px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .18s, color .18s; } .site-header-menu:hover { background: var(--ink); color: var(--paper); } .site-header-menu::after { content: '\2630'; font-size: 1.15em; font-style: normal; } @media (max-width: 600px) { html { scroll-padding-top: 58px; } .site-header { height: 58px; } .site-header-logo img { height: 28px; } .site-header-menu { padding: 8px 14px; } } /* =================================================================== 6. TOC OVERLAY — sidebar / menu =================================================================== */ .toc-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 0.25s ease; } .toc-overlay.is-open { opacity: 1; pointer-events: auto; } .toc-overlay-inner { position: absolute; top: 0; right: 0; height: 100%; width: clamp(320px, 32vw, 460px); background: var(--paper); color: var(--ink); border-left: 4px solid var(--ink); padding: clamp(56px, 8vh, 88px) clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4, 0, .2, 1); } .toc-overlay.is-open .toc-overlay-inner { transform: translateX(0); } .toc-overlay-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.65; margin-bottom: clamp(20px, 3vh, 32px); } .toc-overlay-list { list-style: none; padding: 0; } .toc-overlay-list > li { border-top: 2px solid var(--ink); } .toc-overlay-list > li:last-child { border-bottom: 2px solid var(--ink); } .toc-overlay-list > li > a { display: flex; align-items: baseline; gap: 14px; padding: 14px 8px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 19px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; transition: padding 0.18s, background 0.18s; } .toc-overlay-list > li > a:hover { padding-left: 16px; background: var(--mint); } .toc-overlay-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; font-family: var(--display); font-weight: 900; font-size: 18px; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center; line-height: 1; } /* =================================================================== 7. TOC CHAPTER — accordion sezioni annidato =================================================================== */ .toc-chapter-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 8px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 19px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; transition: background 0.18s; } .toc-chapter-head:hover { background: var(--mint); } .toc-chapter-caret { transition: transform 0.2s ease; } .toc-chapter-head[aria-expanded="false"] .toc-chapter-caret { transform: rotate(-90deg); } .toc-chapter-list { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 420px; transition: max-height 0.28s ease; } .toc-chapter-head[aria-expanded="false"] + .toc-chapter-list { max-height: 0; } .toc-chapter-list li + li { border-top: 1px solid rgba(10, 10, 10, 0.12); } .toc-chapter-list a { display: block; position: relative; padding: 9px 14px 9px 32px; font-family: var(--body); font-weight: 600; font-size: clamp(13px, 1vw, 15px); color: var(--ink); text-decoration: none; } .toc-chapter-list a:hover { text-decoration: underline; } .toc-chapter-list a.active { font-weight: 800; } .toc-chapter-list a.active::before { content: ''; position: absolute; left: 11px; top: 50%; width: 15px; height: 9px; transform: translateY(-50%) rotate(180deg); background: url('../stickers/Arrow_001.png') center / contain no-repeat; } /* =================================================================== 8. SECTION — common =================================================================== */ .section { position: relative; min-height: 100vh; padding: clamp(80px, 14vh, 160px) var(--pad-x); display: flex; flex-direction: column; overflow: hidden; } .section--full { justify-content: center; } .section--mint { background: var(--mint); color: var(--ink); } .section--cyan { background: var(--cyan); color: var(--ink); } .section--ink { background: var(--ink); color: var(--paper); } .section--paper { background: var(--paper); color: var(--ink); } .section--paper-bordered { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 12px var(--ink); } /* =================================================================== 9. STICKER OVERLAY UTILITY =================================================================== */ .sticker { position: absolute; pointer-events: none; user-select: none; z-index: 5; transform: rotate(var(--rot, 0deg)); transform-origin: center; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .sticker[src*="Heart"] { animation: stk-pulse 2.4s ease-in-out infinite; } .sticker[src*="Star"] { animation: stk-twinkle 4.5s ease-in-out infinite; } .sticker[src*="Burst"] { animation: stk-spin 6s ease-in-out infinite; } .sticker[src*="Scribble"] { animation: stk-wobble 7s ease-in-out infinite; } .sticker:nth-of-type(odd) { animation-delay: -0.7s; } .sticker:nth-of-type(even) { animation-delay: -2.1s; } .sticker[src*="Scribble"] { -webkit-mask-image: linear-gradient(120deg, black 0%, black 45%, transparent 60%, transparent 100%); mask-image: linear-gradient(120deg, black 0%, black 45%, transparent 60%, transparent 100%); -webkit-mask-size: 240% 240%; mask-size: 240% 240%; -webkit-mask-position: 100% 100%; mask-position: 100% 100%; transition: -webkit-mask-position 1.8s cubic-bezier(0.4, 0, 0.2, 1), mask-position 1.8s cubic-bezier(0.4, 0, 0.2, 1); } .sticker[src*="Scribble"].is-drawn { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } } @keyframes stk-pulse { 0%, 50%, 100% { transform: rotate(var(--rot, 0deg)) scale(1); } 12% { transform: rotate(var(--rot, 0deg)) scale(1.12); } 24% { transform: rotate(var(--rot, 0deg)) scale(1); } 36% { transform: rotate(var(--rot, 0deg)) scale(1.06); } } @keyframes stk-twinkle { 0%, 100% { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; } 20% { transform: rotate(calc(var(--rot, 0deg) - 12deg)) scale(0.82); opacity: 0.45; } 40% { transform: rotate(var(--rot, 0deg)) scale(1.06); opacity: 1; } 60% { transform: rotate(calc(var(--rot, 0deg) + 12deg)) scale(0.88); opacity: 0.7; } 80% { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; } } @keyframes stk-spin { 0%, 100% { transform: rotate(calc(var(--rot, 0deg) - 8deg)); } 50% { transform: rotate(calc(var(--rot, 0deg) + 8deg)); } } @keyframes stk-wobble { 0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0); } 25% { transform: rotate(calc(var(--rot, 0deg) + 2deg)) translate(5px, -3px); } 50% { transform: rotate(var(--rot, 0deg)) translate(0, 0); } 75% { transform: rotate(calc(var(--rot, 0deg) - 2deg)) translate(-5px, 3px); } } /* =================================================================== 10. HERO — copertina di capitolo (default: cap. I/III/IV/V) =================================================================== */ .hero { background: var(--cyan); text-align: left; justify-content: center; } .hero-inner { max-width: 1400px; margin: 0 auto; width: 100%; position: relative; } .hero-roman { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-mega); line-height: 0.9; letter-spacing: 0.04em; color: var(--ink); opacity: 0.95; margin-bottom: clamp(16px, 2vh, 32px); } .hero-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(16px, 1.6vw, 22px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); margin-bottom: clamp(8px, 1.5vh, 16px); } .hero-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(48px, 8vw, 124px); line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: clamp(20px, 3vh, 40px); } .hero-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.7em; text-transform: none; letter-spacing: 0.01em; display: block; margin-top: 0.05em; line-height: 0.95; } .hero-sub { font-family: var(--body); font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; max-width: 620px; color: var(--ink); margin-bottom: clamp(28px, 4vh, 44px); } /* Takeaway di capitolo — riquadro ad alto contrasto */ .hero-take { background: var(--ink); color: var(--paper); padding: clamp(22px, 3vw, 38px) clamp(24px, 3.4vw, 44px); max-width: 740px; transform: rotate(-0.6deg); } .hero-take-label { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.18em; color: var(--mint); margin-bottom: 10px; } .hero-take-text { font-family: var(--body); font-size: clamp(16px, 1.35vw, 21px); font-weight: 600; line-height: 1.45; } .hero-take-text em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 1.2em; color: var(--mint); } .hero-meta { position: absolute; bottom: -8vh; left: 0; font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; } .hero-scroll-cue { position: absolute; bottom: -8vh; right: 0; font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; display: flex; align-items: center; gap: 8px; } .hero-scroll-cue::after { content: '↓'; font-size: 1.6em; animation: bob 1.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* =================================================================== 11. HERO — override capitolo II =================================================================== */ body.page-cap2 .hero-roman { line-height: 0.8; letter-spacing: -0.04em; margin-bottom: clamp(8px, 1.4vh, 20px); margin-left: -0.04em; } body.page-cap2 .hero-sub { max-width: 560px; } /* =================================================================== 12. HERO — home (logo lockup + manifesto) =================================================================== */ body.page-home .hero { background: var(--mint); text-align: center; align-items: center; isolation: isolate; /* l'header sticky occupa 72px: la hero sta in un solo schermo */ min-height: calc(100vh - 72px); } /* illustrazione di sfondo (burst) con un "respiro" lentissimo */ body.page-home .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../img/Burst_004_white.webp') center / cover no-repeat; transform-origin: center; will-change: transform; animation: hero-burst-breathe 13s ease-in-out infinite; } @keyframes hero-burst-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.085); } } body.page-home .hero-manifesto { max-width: min(720px, 92%); margin: 0 auto; text-align: center; position: relative; } body.page-home .hero-manifesto .lead { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(34px, 5vw, 76px); line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); } body.page-home .hero-manifesto .lead em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.85em; text-transform: none; letter-spacing: 0.01em; } body.page-home .hero-manifesto .body { font-family: var(--body); font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; margin: clamp(20px, 3vh, 36px) auto 0; color: var(--ink); max-width: 560px; } body.page-home .hero-manifesto .body em { font-family: var(--brush); font-style: italic; font-size: 1.1em; font-weight: 700; } body.page-home .hero-meta { position: absolute; bottom: 32px; left: var(--pad-x); font-family: var(--display); font-weight: 700; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.12em; } body.page-home .hero-scroll-cue { position: absolute; bottom: 32px; right: var(--pad-x); font-family: var(--display); font-weight: 700; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: center; gap: 8px; } body.page-home .hero-scroll-cue::after { content: '↓'; font-size: 1.6em; animation: bob 1.4s ease-in-out infinite; } /* pulsante tondo "scorri giù" centrato in basso */ body.page-home .hero-scroll-btn { position: absolute; left: 50%; bottom: clamp(20px, 3.5vh, 38px); transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 6; transition: background 0.2s ease, color 0.2s ease; } body.page-home .hero-scroll-btn:hover { background: var(--paper); color: var(--ink); } body.page-home .hero-scroll-btn-arrow { font-size: 24px; line-height: 1; animation: bob 1.4s ease-in-out infinite; } /* =================================================================== 13. MANIFESTO BLOCK =================================================================== */ .mblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(40px, 8vw, 120px); align-items: center; width: 100%; margin: auto 0; } .mblock-graphic { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .mblock-content { position: relative; } .mblock-tag { font-family: var(--display); font-weight: 700; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: clamp(16px, 2vh, 24px); opacity: 0.7; } .mblock-headline { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(38px, 7vw, 104px); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vh, 36px); } .mblock-headline em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.7em; text-transform: none; letter-spacing: 0.01em; display: block; margin-top: 0.05em; line-height: 0.95; } .mblock-headline .nums { font-family: var(--display); font-feature-settings: 'tnum' on; } .mblock-body { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; max-width: 38ch; margin-bottom: clamp(24px, 4vh, 48px); } .mblock-cta { display: inline-flex; align-items: center; gap: 16px; font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(20px, 2vw, 28px); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; position: relative; } .mblock-cta::before { content: ''; position: absolute; left: -10px; right: -10px; bottom: -2px; height: 14px; background: var(--ink); z-index: -1; opacity: 0; transform: skewX(-8deg); transition: opacity 0.2s; } .mblock-cta:hover::before { opacity: 0.12; } .mblock-cta-arrow { width: clamp(48px, 6vw, 88px); height: auto; transform: rotate(-12deg); transition: transform 0.3s ease; } .mblock-cta:hover .mblock-cta-arrow { transform: rotate(0deg) translateX(8px); } /* arrow inversion per dark bg */ .section--ink .mblock-cta-arrow, .section--mint .mblock-cta-arrow, .section--cyan .mblock-cta-arrow { /* on color: use white or black depending on contrast */ } /* =================================================================== 14. MANIFESTO BLOCK — estensioni + override capitolo II =================================================================== */ /* nuovi modificatori (usati nel capitolo II, innocui altrove) */ .mblock--reverse { direction: rtl; } .mblock--reverse > * { direction: ltr; } .mblock--narrow { grid-template-columns: 1fr; max-width: 900px; } .mblock-body em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 1.1em; } /* override del capitolo II */ body.page-cap2 .mblock { max-width: 1400px; margin-left: auto; margin-right: auto; } body.page-cap2 .mblock-tag { font-weight: 900; } body.page-cap2 .mblock-headline { font-size: var(--fs-display); } body.page-cap2 .mblock-body { line-height: 1.5; } body.page-cap2 .mblock-cta { font-weight: 900; } body.page-cap2 .mblock-cta::before { display: none; } /* =================================================================== 14b. SINTESI + INDICE — home =================================================================== */ #sintesi { border-bottom: 4px solid var(--ink); } .summary { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; width: 100%; max-width: 1400px; margin: 0 auto; } .summary-index-label { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.7; margin-bottom: clamp(14px, 1.8vh, 20px); } .summary-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 6vw, 88px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vh, 36px); } .summary-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.72em; text-transform: none; letter-spacing: 0.01em; display: block; margin-top: 0.04em; } .summary-text { font-family: var(--body); font-size: var(--fs-body); line-height: 1.6; font-weight: 500; max-width: 42ch; } .summary-text + .summary-text { margin-top: clamp(14px, 2vh, 20px); } .summary-points { list-style: none; margin: clamp(12px, 1.6vh, 18px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(9px, 1.3vh, 13px); } .summary-points li { position: relative; padding-left: 28px; font-family: var(--body); font-size: var(--fs-body); line-height: 1.5; font-weight: 500; max-width: 42ch; } .summary-points li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--mint); border: 2px solid var(--ink); transform: rotate(-8deg); } .summary-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 18px); } .summary-ch { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 2vw, 26px) clamp(18px, 2.2vw, 30px); border: 3px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s; } .summary-ch:hover { background: var(--ink); color: var(--paper); transform: translateX(6px); } .summary-ch-num { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(34px, 4.6vw, 64px); line-height: 0.8; flex: 0 0 auto; } .summary-ch:hover .summary-ch-num { color: var(--mint); } .summary-ch-text { display: flex; flex-direction: column; gap: 5px; } .summary-ch-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(18px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .summary-ch-desc { font-family: var(--body); font-size: clamp(13px, 1vw, 15px); line-height: 1.4; opacity: 0.8; } @media (max-width: 1000px) { .summary { grid-template-columns: 1fr; gap: clamp(32px, 6vh, 56px); } } /* =================================================================== 15. GRAPHIC PRIMITIVES — home (isole/ponti/barche) =================================================================== */ /* Graphic 1: 4 islands (Block II) — same system as cap. II */ .islands-svg { width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; } @media (prefers-reduced-motion: no-preference) { /* Bridges: draw themselves when the Temi section enters viewport */ .islands-svg .bridges-strong path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1); } .islands-svg .bridges-strong path:nth-of-type(2) { transition-delay: 0.25s; } .islands-svg .bridges-strong path:nth-of-type(3) { transition-delay: 0.5s; } .ccnmap-animated .islands-svg .bridges-strong path { stroke-dashoffset: 0; } /* Ferries: marching ants */ .islands-svg .ferries path { animation: ferry-march 4s linear infinite; } /* Boats: gentle bobbing on water */ .islands-svg .boats > g .boat-bob { animation: boat-bob 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .islands-svg .boats > g:nth-child(2) .boat-bob { animation-delay: -1.4s; animation-duration: 3.8s; } } @keyframes ferry-march { to { stroke-dashoffset: -28; } } @keyframes boat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Graphic 2: 6 profile stamps (Block III) */ .g-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 16px); width: 100%; max-width: 720px; margin: 0 auto; } .g-profiles .pstamp { aspect-ratio: 3/4; background: var(--ink); color: var(--paper); padding: clamp(8px, 1vw, 14px); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; transform: rotate(var(--r, 0deg)); transition: transform 0.3s; } .g-profiles .pstamp:hover { transform: rotate(0deg) scale(1.04); } /* figurina del profilo su carta bianca, leggibile anche sui francobolli ink */ .g-profiles .pfig { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 30%; background: var(--paper); padding: 4px; margin: 6px 0; } .g-profiles .pstamp:nth-child(1) { --r: -2deg; background: var(--mint); color: var(--ink); } .g-profiles .pstamp:nth-child(2) { --r: 1.5deg; background: var(--cyan); color: var(--ink); } .g-profiles .pstamp:nth-child(3) { --r: -1deg; background: var(--ink); color: var(--paper); } .g-profiles .pstamp:nth-child(4) { --r: 2deg; background: var(--ink); color: var(--mint); } .g-profiles .pstamp:nth-child(5) { --r: -1.5deg; background: var(--mint); color: var(--ink); } .g-profiles .pstamp:nth-child(6) { --r: 1deg; background: var(--cyan); color: var(--ink); } .g-profiles .pname { font-size: clamp(11px, 1vw, 14px); line-height: 1.05; overflow-wrap: anywhere; word-break: break-word; } .g-profiles .ppct { font-size: clamp(18px, 2.2vw, 28px); line-height: 1; } /* Graphic 2b: 4 methodology stamps (Block I — Metodologia) */ .g-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); width: 100%; max-width: 560px; margin: 0 auto; } .g-method .mstep { /* niente aspect-ratio: così le card di una riga si pareggiano da sole anche quando il testo di un passo è più lungo degli altri */ min-height: clamp(120px, 13vw, 180px); padding: clamp(12px, 1.3vw, 18px); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; transform: rotate(var(--r, 0deg)); transition: transform 0.3s; } .g-method .mstep:hover { transform: rotate(0deg) scale(1.04); } .g-method .mstep-1 { --r: -2deg; background: var(--mint); color: var(--ink); } .g-method .mstep-2 { --r: 1.5deg; background: var(--cyan); color: var(--ink); } .g-method .mstep-3 { --r: -1deg; background: var(--ink); color: var(--mint); } .g-method .mstep-4 { --r: 2deg; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); } .g-method .mstep-num { font-size: clamp(36px, 4.5vw, 62px); line-height: 0.85; } .g-method .mstep-foot { display: flex; flex-direction: column; gap: 4px; } .g-method .mstep-name { font-size: clamp(13px, 1.4vw, 20px); line-height: 1.05; overflow-wrap: anywhere; } .g-method .mstep-detail { font-family: var(--body); font-weight: 500; font-size: clamp(10px, 0.85vw, 13px); text-transform: none; letter-spacing: 0; font-style: normal; line-height: 1.25; opacity: 0.85; } /* Graphic 3: numbers stack (Block IV) */ .g-numbers { width: 100%; height: 100%; min-height: 320px; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 5vh, 56px); } .g-numbers .n-item { display: flex; flex-direction: column; } .g-numbers .n-big { font-family: var(--display); font-weight: 900; font-style: italic; font-feature-settings: 'tnum' on; font-size: clamp(84px, 14vw, 184px); line-height: 0.82; color: var(--ink); } .g-numbers .n-label { font-family: var(--display); font-weight: 700; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-top: 10px; } /* Graphic 5: scribble for CTA section */ .g-scribble { width: 80%; height: auto; max-width: 360px; transform: rotate(-6deg); } /* =================================================================== 16. HERO PHOTOS — home =================================================================== */ .hero-photo { position: absolute; width: clamp(120px, 12vw, 170px); padding: 8px 8px 24px; background: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,0.18); transform: rotate(var(--rot, 0deg)); z-index: 4; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; cursor: pointer; } .hero-photo:hover { transform: rotate(0deg) scale(1.06); box-shadow: 0 14px 36px rgba(0,0,0,0.3); z-index: 6; } .hero-photo-img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .hero-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; } .hero-photo-img::after { content: ''; position: absolute; inset: 0; background: var(--mint); mix-blend-mode: multiply; pointer-events: none; transition: opacity 0.35s ease; opacity: 0.85; } .hero-photo--cyan .hero-photo-img::after { background: var(--cyan); } .hero-photo--ink .hero-photo-img::after { background: var(--ink); opacity: 0.55; } .hero-photo--small { width: clamp(78px, 7.5vw, 100px); padding: 5px 5px 16px; } .hero-photo--large { width: clamp(150px, 14vw, 200px); padding: 9px 9px 28px; } /* Entrance: quiet collective fade-in, no movement (non-distracting) */ @media (prefers-reduced-motion: no-preference) { .hero-photo { animation: hero-photo-fade 0.5s ease-out backwards; } } @keyframes hero-photo-fade { from { opacity: 0; } } .hero-photo:hover .hero-photo-img::after { opacity: 0; } .hero-photo:hover .hero-photo-img img { filter: none; } @media (max-width: 800px) { .hero-photo { display: none; } } /* =================================================================== 17. FOOTER — home =================================================================== */ .footer { background: var(--ink); color: var(--paper); padding: clamp(64px, 10vh, 120px) var(--pad-x) clamp(32px, 5vh, 64px); position: relative; overflow: hidden; /* stacco necessario dove il footer segue una sezione ink (es. Cap. I) */ border-top: 3px solid var(--mint); } .footer-about { font-size: var(--fs-small); line-height: 1.55; opacity: 0.7; max-width: 30ch; } .footer-org { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.12em; margin-top: clamp(20px, 2.8vh, 30px); opacity: 0.7; } .footer-org-logo { display: inline-block; margin-top: 10px; } .footer-org-logo img { display: block; height: clamp(38px, 4vw, 52px); width: auto; transition: opacity 0.2s ease; } .footer-org-logo:hover img { opacity: 0.7; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(48px, 8vh, 96px); } .footer h3 { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(28px, 3vw, 44px); text-transform: uppercase; line-height: 0.95; margin-bottom: 24px; } .footer-lockup { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(32px, 3.4vw, 52px); text-transform: uppercase; line-height: 0.95; margin-bottom: 16px; letter-spacing: -0.02em; } .footer-lockup em { font-family: var(--brush); font-style: italic; font-weight: 700; text-transform: none; font-size: 0.5em; display: block; margin-top: 2px; } .footer-tag { font-family: var(--display); font-weight: 700; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; opacity: 0.6; } .footer ul { list-style: none; } .footer li { margin-bottom: 10px; font-size: var(--fs-body); } .footer a:hover { color: var(--mint); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-small); opacity: 0.6; } /* =================================================================== 18. DATA SECTION — capitoli I/III/IV/V =================================================================== */ .datasec { justify-content: center; } .datasec-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 6vw, 100px); align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; } .datasec--reverse .datasec-inner { direction: rtl; } .datasec--reverse .datasec-inner > * { direction: ltr; } .datasec-chart { position: relative; min-width: 0; } .datasec-content { position: relative; min-width: 0; } .datasec-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.7; margin-bottom: clamp(14px, 2vh, 22px); } .datasec-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(34px, 5vw, 80px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: clamp(18px, 2.6vh, 30px); } .datasec-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.62em; text-transform: none; letter-spacing: 0.01em; display: block; margin-top: 0.06em; line-height: 0.95; } .datasec-body { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; max-width: 46ch; margin-bottom: clamp(22px, 3.4vh, 36px); } .datasec-body em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 1.12em; } .datasec-take { border-left: 6px solid currentColor; padding: 4px 0 4px 20px; max-width: 48ch; } .datasec-take-label { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.65; margin-bottom: 6px; } .datasec-take-text { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.12; text-transform: uppercase; letter-spacing: -0.01em; } /* =================================================================== 19. VLCHART — sistema grafici =================================================================== */ .vlchart { position: relative; width: 100%; } .vlchart-tagrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 2.4vh, 26px); font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; } .vlchart-tagrow .rule { flex: 1; height: 2px; background: currentColor; opacity: 0.35; } .vlchart-tagrow .meta { opacity: 0.6; } .vlchart-cap { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.1; margin-top: clamp(16px, 2.4vh, 26px); opacity: 0.92; } /* --- barre orizzontali --- */ .vlbars { display: flex; flex-direction: column; gap: clamp(9px, 1.5vh, 16px); } .vlbar-row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: clamp(10px, 1.4vw, 18px); } .vlbar-name { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(13px, 1.05vw, 17px); text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; } .vlbar-track { position: relative; height: clamp(18px, 2.5vh, 30px); } .vlbar-track::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; opacity: 0.18; } .vlbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--c, currentColor); transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); filter: url(#vlbrush); opacity: 0.5; } .vlbar-row.is-top .vlbar-fill { opacity: 1; } .is-shown .vlbar-fill { transform: scaleX(1); } .vlbar-val { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.55vw, 23px); white-space: nowrap; opacity: 0; transition: opacity 0.5s ease; } .is-shown .vlbar-val { opacity: 1; transition-delay: 0.55s; } .vlbar-row.is-top .vlbar-val { font-size: clamp(17px, 1.9vw, 28px); } .vlbar-flag { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.62em; margin-left: 8px; opacity: 0; transition: opacity 0.4s ease; } .is-shown .vlbar-row.is-top .vlbar-flag { opacity: 0.9; transition-delay: 0.9s; } /* stagger d'ingresso */ .vlbars .vlbar-row:nth-child(2) .vlbar-fill { transition-delay: 0.08s; } .vlbars .vlbar-row:nth-child(3) .vlbar-fill { transition-delay: 0.16s; } .vlbars .vlbar-row:nth-child(4) .vlbar-fill { transition-delay: 0.24s; } .vlbars .vlbar-row:nth-child(5) .vlbar-fill { transition-delay: 0.32s; } .vlbars .vlbar-row:nth-child(6) .vlbar-fill { transition-delay: 0.40s; } .vlbars .vlbar-row:nth-child(7) .vlbar-fill { transition-delay: 0.48s; } /* --- grouped: campione vs benchmark --- */ .vlgrp { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 14px); } .vlgrp-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: clamp(10px, 1.4vw, 16px); } .vlgrp-name { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(13px, 1vw, 16px); text-transform: uppercase; } .vlgrp-pair { display: flex; flex-direction: column; gap: 4px; } .vlgrp-line { position: relative; height: clamp(11px, 1.5vh, 16px); } .vlgrp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); transform: scaleX(0); transform-origin: left center; transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1); filter: url(#vlbrush); } .vlgrp-fill.camp { background: var(--ink); } .vlgrp-fill.bench { background: currentColor; opacity: 0.32; } .is-shown .vlgrp-fill { transform: scaleX(1); } .vlgrp-row.is-skew .vlgrp-fill.camp { background: var(--ink); } .vlgrp-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(12px, 1.1vw, 17px); white-space: nowrap; opacity: 0; transition: opacity 0.5s ease 0.5s; } .is-shown .vlgrp-tag { opacity: 1; } .vlgrp-row.is-skew .vlgrp-tag { font-family: var(--brush); font-weight: 700; font-size: clamp(15px, 1.5vw, 22px); } .vlgrp-legend { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--body); font-size: var(--fs-small); margin: 6px 0 clamp(14px, 2vh, 22px); } .vlgrp-legend span { display: inline-flex; align-items: center; gap: 8px; } .vlgrp-legend i { width: 18px; height: 10px; display: inline-block; } .vlgrp-legend i.camp { background: var(--ink); } .vlgrp-legend i.bench { background: currentColor; opacity: 0.32; } .vlgrp-sub { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.6; margin: 4px 0 14px; } /* --- diverging (batteria) --- */ .vldiv { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 15px); } .vldiv-scale { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.55; margin-bottom: 4px; } .vldiv-row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; align-items: center; gap: clamp(10px, 1.4vw, 18px); } .vldiv-name { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(12px, 1vw, 16px); text-transform: uppercase; line-height: 1.05; } .vldiv-plot { position: relative; height: clamp(18px, 2.5vh, 28px); } .vldiv-plot::before { content: ''; position: absolute; left: 50%; top: -7px; bottom: -7px; width: 2px; background: currentColor; opacity: 0.4; transform: translateX(-1px); } .vldiv-bar { position: absolute; top: 0; bottom: 0; width: var(--w, 0%); transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); filter: url(#vlbrush); } .vldiv-bar.pos { left: 50%; transform-origin: left center; background: var(--mint); } .vldiv-bar.neg { right: 50%; transform-origin: right center; background: var(--ink); } .is-shown .vldiv-bar { transform: scaleX(1); } .vldiv-val { position: absolute; top: 50%; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(13px, 1.25vw, 19px); opacity: 0; transition: opacity 0.45s ease 0.55s; transform: translateY(-50%); } .is-shown .vldiv-val { opacity: 1; } .vldiv-val.pos { left: calc(50% + var(--w) + 8px); } .vldiv-val.neg { right: calc(50% + var(--w) + 8px); } .vldiv-row.is-mark .vldiv-val { font-family: var(--brush); font-size: clamp(16px, 1.7vw, 24px); } /* --- segmented 100% (limitazione) --- */ .vlseg-wrap { position: relative; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .is-shown .vlseg-wrap { clip-path: inset(0 0 0 0); } .vlseg { display: flex; height: clamp(70px, 12vh, 120px); border: 3px solid var(--ink); filter: url(#vlbrush); } .vlseg > div { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(10px, 1.4vw, 20px); overflow: hidden; border-right: 3px solid var(--ink); } .vlseg > div:last-child { border-right: 0; } .vlseg-pct { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(22px, 3.4vw, 52px); line-height: 0.85; } .vlseg-lab { font-family: var(--body); font-weight: 600; font-size: clamp(11px, 0.95vw, 14px); line-height: 1.15; margin-top: 6px; } .seg-pieno { background: var(--mint); color: var(--ink); } .seg-cond { background: var(--cyan); color: var(--ink); } .seg-contro{ background: var(--paper); color: var(--ink); } /* Il blocco «contrario» vale 11,8%: numero rimpicciolito per stare in scala. */ .seg-contro { padding-inline: clamp(6px, 0.8vw, 12px); } .seg-contro .vlseg-pct { font-size: clamp(15px, 1.8vw, 26px); } /* «Nessuna opinione precisa» è il 2,8%: troppo stretto per contenere del testo sul desktop. Resta in scala, a righe, e lo spiega la didascalia sotto. */ .seg-neutro { color: var(--ink); background: repeating-linear-gradient( -45deg, var(--paper) 0 5px, rgba(10, 10, 10, 0.16) 5px 8px); } .seg-neutro .vlseg-pct, .seg-neutro .vlseg-lab { display: none; } @media (max-width: 600px) { .seg-neutro .vlseg-pct { display: block; font-size: clamp(22px, 3.4vw, 52px); } .seg-neutro .vlseg-lab { display: block; } .seg-contro .vlseg-pct { font-size: clamp(22px, 3.4vw, 52px); } } .vlseg-total { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(16px, 2.4vh, 26px); } .vlseg-total .big { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(56px, 9vw, 130px); line-height: 0.8; letter-spacing: -0.03em; } .vlseg-total .note { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: clamp(20px, 2.4vw, 36px); line-height: 1; } /* --- mappa raccolta (scatter su sagoma Milano) --- */ .vlmap-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; } .vlmap { width: 100%; height: auto; display: block; } .vlmap .blob { fill: rgba(55, 229, 169, 0.16); stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 5 7; filter: url(#vlbrushHard); } .vlmap .dot { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); } .is-shown .vlmap .dot { opacity: 0.6; transform: scale(1); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .vlmap-stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin-top: clamp(20px, 3vh, 34px); } .vlstat { flex: 1 1 120px; } .vlstat .n { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 6vw, 84px); line-height: 0.82; letter-spacing: -0.03em; display: block; } .vlstat .l { font-family: var(--body); font-weight: 600; font-size: clamp(12px, 1vw, 15px); line-height: 1.25; margin-top: 6px; opacity: 0.82; } .vlstat .l em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 1.15em; opacity: 1; } /* =================================================================== 20. OUTRO / CHIUSURA — capitoli I/III/IV/V =================================================================== */ body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro { background: var(--mint); color: var(--ink); min-height: 80vh; padding: clamp(80px, 14vh, 160px) var(--pad-x); display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro-inner { max-width: 940px; margin: 0 auto; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 16px; opacity: 0.7; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 6vw, 88px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vh, 36px); } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.7em; text-transform: none; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .outro-body { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; margin-bottom: clamp(32px, 5vh, 56px); max-width: 620px; margin-left: auto; margin-right: auto; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin: clamp(8px, 2vh, 24px) auto 0; max-width: 940px; text-align: left; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-path { border: 3px solid currentColor; padding: clamp(24px, 3vw, 40px); background: transparent; transition: background 0.18s ease, transform 0.2s ease; display: block; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-path:hover { background: rgba(0,0,0,0.07); transform: translateY(-3px); } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-path-label { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.5vw, 21px); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-path-body { font-family: var(--body); font-size: clamp(14px, 1.05vw, 17px); font-weight: 500; line-height: 1.5; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-path-body em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 1.15em; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-next { text-align: center; margin-top: clamp(32px, 5vh, 56px); font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.9; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-next a { display: inline-flex; align-items: center; gap: 10px; border-bottom: 2px solid currentColor; padding-bottom: 4px; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-next a::after { content: '→'; font-size: 1.3em; transition: transform 0.3s; } body:is(.page-cap1, .page-cap3, .page-cap4, .page-cap5) .closure-next a:hover::after { transform: translateX(6px); } /* =================================================================== 21. CCN MAP — isole e ponti — capitolo II =================================================================== */ .ccnmap-section { background: var(--paper); min-height: 100vh; padding: clamp(80px, 12vh, 140px) var(--pad-x); position: relative; } .ccnmap-header { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 80px); } .ccnmap-header .tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 16px; } .ccnmap-header .title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; } .ccnmap-header .title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.75em; text-transform: none; letter-spacing: 0.01em; } .ccnmap-frame { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 10/8; margin: 0 auto; } .ccnmap-frame svg.islands-svg { width: 100%; height: 100%; max-width: none; display: block; } .ccnmap-frame.is-illustrated { aspect-ratio: auto; } .ccnmap-frame.is-illustrated img { width: 100%; height: auto; display: block; } .ccnmap-legend { display: flex; gap: 20px 28px; flex-wrap: wrap; justify-content: center; margin-top: clamp(32px, 4vh, 56px); font-family: var(--body); font-size: var(--fs-small); max-width: 1000px; margin-left: auto; margin-right: auto; } .ccnmap-legend > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ccnmap-legend .swatch { width: 18px; height: 14px; border-radius: 50% 50% 40% 60% / 60% 50% 50% 50%; } .ccnmap-legend .swatch--bordered { box-shadow: inset 0 0 0 2px var(--ink); } .ccnmap-legend .swatch-line { width: 32px; height: 6px; background: var(--ink); border-radius: 3px; } .ccnmap-legend .swatch-line--ferry { height: 0; background: transparent; border-top: 3px dashed var(--ink); border-radius: 0; width: 32px; } /* =================================================================== 22. CONTINENT COVER — capitolo II =================================================================== */ .ccover { position: relative; min-height: 100vh; padding: clamp(80px, 12vh, 140px) var(--pad-x); overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .ccover--mint { background: var(--mint); color: var(--ink); } .ccover--cyan { background: var(--cyan); color: var(--ink); } .ccover--ink { background: var(--ink); color: var(--paper); } .ccover--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 14px var(--ink); } .ccover-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 1400px; margin: 0 auto; width: 100%; } .ccover-roman { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(140px, 22vw, 380px); line-height: 0.78; letter-spacing: -0.06em; margin-left: -0.06em; } .ccover-content {} .ccover-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px; opacity: 0.75; } .ccover-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 6vw, 90px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 12px; } .ccover-sub { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: clamp(20px, 2.4vw, 36px); line-height: 1.05; margin-bottom: clamp(24px, 4vh, 48px); } .ccover-stat { border-top: 2px solid currentColor; padding-top: 16px; margin-bottom: clamp(24px, 4vh, 48px); max-width: 460px; } .ccover-stat .num { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(56px, 8vw, 124px); line-height: 0.85; letter-spacing: -0.04em; } .ccover-stat .num small { font-size: 0.45em; font-weight: 900; opacity: 0.6; letter-spacing: 0; } .ccover-stat .label { font-family: var(--body); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; margin-top: 4px; opacity: 0.85; } .ccover-hubs { display: flex; flex-wrap: wrap; gap: 8px; } .ccover-hubs .htag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(12px, 1vw, 15px); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 12px; background: var(--ink); color: var(--paper); transform: rotate(var(--r, 0deg)); } .ccover--ink .ccover-hubs .htag { background: var(--mint); color: var(--ink); } .ccover--paper .ccover-hubs .htag { background: var(--ink); color: var(--paper); } .ccover-hubs .htag:nth-child(odd) { --r: -2deg; } .ccover-hubs .htag:nth-child(even) { --r: 1.5deg; } /* Su mobile la copertina non riempie lo schermo: si adatta al contenuto, così non resta un vuoto tra intro del continente e tavola */ @media (max-width: 700px) { .ccover { min-height: 0; padding-top: clamp(56px, 9vh, 80px); padding-bottom: clamp(56px, 9vh, 80px); } } /* =================================================================== 23. PROSE — corpo lungo del continente — capitolo II =================================================================== */ body.page-cap2 .prose { background: var(--paper); padding: clamp(64px, 10vh, 120px) var(--pad-x); color: var(--ink); } body.page-cap2 .prose-inner { max-width: 760px; margin: 0 auto; } body.page-cap2 .prose p { font-family: var(--body); font-size: clamp(17px, 1.2vw, 20px); line-height: 1.65; margin-bottom: 1.2em; color: var(--ink); } body.page-cap2 .prose p em { font-family: var(--brush); font-style: italic; font-size: 1.15em; font-weight: 700; } body.page-cap2 .prose-lead { font-family: var(--body); font-size: clamp(22px, 1.8vw, 30px) !important; font-weight: 500; line-height: 1.4 !important; margin-bottom: 1.6em !important; } /* =================================================================== 24. CITATION BLOCK — capitolo II =================================================================== */ .citation { position: relative; margin: clamp(40px, 6vh, 72px) auto; max-width: 720px; padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px); transform: rotate(var(--rot, -1.5deg)); } .citation::before { content: ''; position: absolute; inset: 0; background: var(--mint); border-radius: 50% 50% 50% 8% / 60% 50% 50% 10%; z-index: 0; opacity: 0.95; } .citation--cyan::before { background: var(--cyan); } .citation--paper::before { background: var(--paper); border: 3px solid var(--ink); } .citation--ink::before { background: var(--ink); } .citation-quote { position: relative; z-index: 1; font-family: var(--brush); font-style: italic; font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.2; color: var(--ink); text-align: center; } .citation--ink .citation-quote { color: var(--paper); } .citation-quote::before { content: '«'; margin-right: 2px; } .citation-quote::after { content: '»'; margin-left: 2px; } .citation-attr { position: relative; z-index: 1; font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; text-align: center; margin-top: 16px; color: var(--ink); opacity: 0.6; } .citation--ink .citation-attr { color: var(--paper); } /* =================================================================== 25. SUB-TOPIC MARKER — capitolo II =================================================================== */ .subtopic { display: flex; align-items: flex-end; gap: 16px; margin: clamp(48px, 7vh, 80px) 0 clamp(16px, 2vh, 24px); border-top: 4px solid var(--ink); padding-top: 24px; } .subtopic-num { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(28px, 3vw, 48px); line-height: 0.85; color: var(--ink); opacity: 0.4; flex-shrink: 0; } .subtopic-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(26px, 3vw, 44px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); } /* =================================================================== 26. TENSIONS BLOCK — capitolo II =================================================================== */ .tensions { background: var(--paper); padding: clamp(64px, 10vh, 120px) var(--pad-x); color: var(--ink); text-align: center; position: relative; } .tensions-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.7; margin-bottom: 16px; } .tensions-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(32px, 4.5vw, 64px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 80px); } .tensions-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.7em; text-transform: none; } .tensions-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1100px; margin: 0 auto; } .tensions-vs { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(48px, 6vw, 96px); line-height: 1; color: var(--ink); opacity: 0.6; } .tensions-pair .citation { margin: 0; max-width: 100%; } /* =================================================================== 27. BRIDGE MARKER — capitolo II =================================================================== */ .bridge { background: var(--paper); padding: clamp(48px, 7vh, 96px) var(--pad-x); color: var(--ink); text-align: center; position: relative; border-top: 2px dashed var(--ink); border-bottom: 2px dashed var(--ink); } .bridge-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 48px); } .bridge-from, .bridge-to { flex: 0 1 auto; } .bridge-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.6; margin-bottom: 4px; } .bridge-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(18px, 2vw, 28px); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; } .bridge-codes { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .bridge-codes-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .bridge-codes-list span { font-family: var(--body); font-size: var(--fs-small); padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 100px; white-space: nowrap; } .bridge-arrow { width: clamp(80px, 12vw, 180px); height: auto; flex-shrink: 0; } /* =================================================================== 28. OUTRO — transizione al capitolo seguente — capitolo II =================================================================== */ body.page-cap2 .outro { background: var(--mint); color: var(--ink); min-height: 70vh; padding: clamp(80px, 14vh, 160px) var(--pad-x); display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; } body.page-cap2 .outro-inner { max-width: 900px; margin: 0 auto; } body.page-cap2 .outro-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 16px; opacity: 0.7; } body.page-cap2 .outro-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 6vw, 88px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vh, 36px); } body.page-cap2 .outro-title em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.7em; text-transform: none; } body.page-cap2 .outro-body { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; margin-bottom: clamp(32px, 5vh, 56px); max-width: 560px; margin-left: auto; margin-right: auto; } body.page-cap2 .outro-cta { display: inline-flex; align-items: center; gap: 16px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(20px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: 0.06em; } body.page-cap2 .outro-cta img { width: clamp(64px, 8vw, 110px); height: auto; transform: rotate(-12deg); transition: transform 0.3s ease; } body.page-cap2 .outro-cta:hover img { transform: rotate(0deg) translateX(8px); } /* =================================================================== 29. CTAVOLA — tavola illustrata — capitolo II =================================================================== */ .ctavola { padding: clamp(40px, 7vh, 100px) var(--pad-x); position: relative; } .ctavola--mint { background: var(--mint); color: var(--ink); } .ctavola--cyan { background: var(--cyan); color: var(--ink); } .ctavola--ink { background: var(--ink); color: var(--paper); } .ctavola--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 14px var(--ink); } .ctavola-tag-row { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto clamp(16px, 2vh, 28px); font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; } .ctavola-tag-row .ctavola-divider { flex: 1; height: 1px; background: currentColor; opacity: 0.4; } .ctavola-tag-row .ctavola-meta { opacity: 0.65; } .ctavola-frame { max-width: 1200px; margin: 0 auto; aspect-ratio: 3/2; border: 4px dashed currentColor; position: relative; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); } .ctavola--ink .ctavola-frame { background: rgba(255, 255, 255, 0.04); } .ctavola--paper .ctavola-frame { background: rgba(0, 0, 0, 0.03); } .ctavola-placeholder { text-align: center; padding: 24px; } .ctavola-ph-label { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(32px, 5vw, 72px); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; } .ctavola-ph-meta { display: block; font-family: var(--brush); font-style: italic; font-weight: 700; font-size: clamp(20px, 2vw, 32px); margin-top: 14px; opacity: 0.85; } @media (max-width: 700px) { .ctavola-frame { aspect-ratio: 4/5; } } /* --- Tavola di apertura tema: mappa delle 4 isole focalizzata su quella di riferimento (bozza) --- */ .ctavola-frame.is-filled { aspect-ratio: auto; border: none; background: transparent; display: block; } .ctavola-frame .focus-map { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; } /* --- Mappa isole illustrata (consegna luglio 2026): etichette GT Planar posizionate sugli sfondini lasciati liberi dalle illustratrici. Coordinate in % dell'immagine (2112x1188), identiche nelle 5 tavole. --- */ .isole-map { position: relative; container-type: inline-size; /* container-type azzera la larghezza intrinseca: senza width esplicita il div collassa a 0 dentro un genitore flex */ width: 100%; } .isole-map img { display: block; width: 100%; height: auto; } .isole-map--panel { max-width: 900px; margin: 0 auto; } .isola-label { position: absolute; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; letter-spacing: 0; color: var(--paper); pointer-events: none; font-size: clamp(10px, 2.4vw, 26px); font-size: 2.9cqw; } .isola-label--verde { left: 25.28%; top: 30.13%; width: 15.96%; height: 7.41%; } .isola-label--mobilita { left: 60.32%; top: 27.78%; width: 18.23%; height: 6.73%; } .isola-label--auto { left: 29.31%; top: 70.88%; width: 19.08%; height: 6.82%; color: var(--ink); } .isola-label--sicurezza { left: 72.16%; top: 72.90%; width: 17.38%; height: 5.81%; } .isola-label.is-dim { color: rgba(10, 10, 10, 0.55); } /* Home: mappa ritagliata sui margini trasparenti (meno aria attorno al blob), quindi le etichette vanno riposizionate sul frame più stretto. */ #temi .isola-label--verde { left: 21.70%; top: 25.50%; width: 17.59%; height: 8.77%; } #temi .isola-label--mobilita { left: 60.32%; top: 22.72%; width: 20.09%; height: 7.97%; } #temi .isola-label--auto { left: 26.15%; top: 73.76%; width: 21.02%; height: 8.08%; } #temi .isola-label--sicurezza { left: 73.36%; top: 76.15%; width: 19.15%; height: 6.88%; } /* Home: isole cliccabili → capitolo Temi. Hotspot rettangolari sopra ogni isola; l'etichetta (che segue nel DOM) reagisce al passaggio del mouse. */ .isole-map .isola-hot { position: absolute; border-radius: 18px; cursor: pointer; background: transparent; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .isole-map .isola-hot:hover, .isole-map .isola-hot:focus-visible { background-color: rgba(255, 255, 255, 0.16); outline: none; } .isole-map .isola-label { transition: transform 0.2s ease; } .isola-hot--verde:hover ~ .isola-label--verde, .isola-hot--verde:focus-visible ~ .isola-label--verde, .isola-hot--mobilita:hover ~ .isola-label--mobilita, .isola-hot--mobilita:focus-visible ~ .isola-label--mobilita, .isola-hot--auto:hover ~ .isola-label--auto, .isola-hot--auto:focus-visible ~ .isola-label--auto, .isola-hot--sicurezza:hover ~ .isola-label--sicurezza, .isola-hot--sicurezza:focus-visible ~ .isola-label--sicurezza { transform: scale(1.12); } .isola-hot--verde { left: 2.5%; top: 9%; width: 47.5%; height: 39%; } .isola-hot--mobilita { left: 58.5%; top: 5%; width: 33%; height: 46%; } .isola-hot--auto { left: 18%; top: 66.5%; width: 35%; height: 26.5%; } .isola-hot--sicurezza { left: 67.5%; top: 66%; width: 18%; height: 29.5%; } /* Home: francobolli profilo cliccabili → capitolo Profili */ .g-profiles .pstamp { text-decoration: none; cursor: pointer; color: inherit; } .g-profiles .pstamp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* --- Citazione illustrata: prima la citazione, poi la scena che la illustra (cap.2) --- */ .tema-cit { display: flex; flex-direction: column; margin: clamp(28px, 4vh, 48px) 0; } .tema-cit-img { order: 2; display: block; width: 100%; max-width: 440px; height: auto; margin: clamp(16px, 2.4vh, 26px) auto 0; border-radius: 4px; } .tema-cit .citation { margin-top: 0; } .tema-cit .citation + .citation { margin-top: clamp(12px, 1.6vh, 18px); } /* =================================================================== 30. PUNCHLINE — capitolo II =================================================================== */ .punchline { padding: clamp(56px, 9vh, 110px) var(--pad-x); text-align: center; position: relative; min-height: 42vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .punchline--mint { background: var(--mint); color: var(--ink); } .punchline--cyan { background: var(--cyan); color: var(--ink); } .punchline--ink { background: var(--ink); color: var(--paper); } .punchline--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 12px var(--ink); } .punchline-inner { max-width: 900px; margin: 0 auto; } .punchline-tag { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 18px; opacity: 0.75; } .punchline-text { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(30px, 4.5vw, 64px); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 22px; } .punchline-text em { font-family: var(--brush); font-style: italic; font-weight: 700; font-size: 0.65em; text-transform: none; letter-spacing: 0.01em; } .punchline-body { font-family: var(--body); font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; line-height: 1.5; max-width: 620px; margin: 0 auto; } /* =================================================================== 31. CLOSURE — chiusura di capitolo — capitolo II =================================================================== */ body.page-cap2 .closure-paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin: clamp(40px, 6vh, 72px) auto 0; max-width: 900px; text-align: left; } body.page-cap2 .closure-path { border: 3px solid currentColor; padding: clamp(22px, 2.8vw, 36px); background: transparent; transition: background 0.18s ease, transform 0.2s ease; display: block; position: relative; } body.page-cap2 .closure-path:hover { background: rgba(0,0,0,0.08); transform: translateY(-3px); } body.page-cap2 .closure-path-label { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; opacity: 0.7; } body.page-cap2 .closure-path-title { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 16px; } body.page-cap2 .closure-path-cta { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(14px, 1.2vw, 18px); text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 8px; } body.page-cap2 .closure-path-cta::after { content: '→'; font-size: 1.2em; transition: transform 0.3s; } body.page-cap2 .closure-path:hover .closure-path-cta::after { transform: translateX(6px); } body.page-cap2 .closure-next { text-align: center; margin-top: clamp(32px, 5vh, 56px); font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; } body.page-cap2 .closure-next a { display: inline-flex; align-items: center; gap: 10px; border-bottom: 2px solid currentColor; padding-bottom: 4px; } body.page-cap2 .closure-next a::after { content: '↓'; font-size: 1.3em; } @media (max-width: 700px) { body.page-cap2 .closure-paths { grid-template-columns: 1fr; } } /* =================================================================== 32. HOWTO — capitolo II (intro 4 passi) =================================================================== */ .howto { max-width: 1000px; margin: 0 auto clamp(40px,6vh,76px); } .howto-kick { font-family: var(--body); font-weight: 500; font-size: var(--fs-lead); line-height: 1.5; text-align: center; max-width: 56ch; margin: 0 auto clamp(26px,4vh,42px); } .howto-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,1.6vw,20px); } .howto-step { border: 3px solid var(--ink); background: var(--paper); padding: clamp(16px,1.8vw,26px); } .howto-step .hn { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(34px,4vw,58px); line-height: .8; color: var(--mint); -webkit-text-stroke: 1.5px var(--ink); } .howto-step .ht { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(16px,1.4vw,21px); text-transform: uppercase; line-height: 1; margin: 12px 0 8px; } .howto-step .hd { font-family: var(--body); font-weight: 500; font-size: clamp(13px,1vw,15px); line-height: 1.45; } .howto-foot { font-family: var(--body); font-size: var(--fs-small); opacity: .6; text-align: center; margin-top: clamp(16px,2.4vh,26px); } /* =================================================================== 33. CAP. I — apertura / metodo =================================================================== */ body.page-cap1 .cwrap { max-width: 1180px; margin: 0 auto; width: 100%; } body.page-cap1 .cnarrow { max-width: 800px; margin: 0 auto; width: 100%; } body.page-cap1 .bigtitle { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(36px,6vw,92px); line-height:.9; text-transform:uppercase; letter-spacing:-.02em; } body.page-cap1 .bigtitle em { font-family:var(--brush); font-style:italic; text-transform:none; font-size:.62em; display:block; margin-top:.08em; } body.page-cap1 .prose-lead { font-family:var(--body); font-weight:500; font-size:var(--fs-lead); line-height:1.5; max-width:64ch; } body.page-cap1 .prose-lead + .prose-lead { margin-top:16px; } body.page-cap1 .steps { display:grid; grid-template-columns:1fr; gap:clamp(10px,1.4vw,16px); } body.page-cap1 .step { border:3px solid currentColor; padding:clamp(16px,2vw,24px); display:flex; gap:18px; align-items:flex-start; } body.page-cap1 .step .sn { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(28px,3.4vw,48px); line-height:.8; flex:0 0 auto; } body.page-cap1 .step .st { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(15px,1.4vw,21px); text-transform:uppercase; } body.page-cap1 .step .sd { font-family:var(--body); font-weight:500; font-size:clamp(13px,1vw,15px); line-height:1.4; margin-top:4px; opacity:.85; } body.page-cap1 .honesty { max-width:820px; margin:0 auto; } body.page-cap1 .honesty p { font-family:var(--body); font-size:clamp(15px,1.15vw,18px); line-height:1.6; margin-bottom:16px; } body.page-cap1 .honesty p.kicker { font-family:var(--brush); font-style:italic; font-weight:700; font-size:clamp(19px,1.9vw,28px); margin-bottom:0; } body.page-cap1 .ctake { margin-top:clamp(28px,4vh,46px); background:var(--ink); color:var(--paper); padding:clamp(22px,3vw,40px); transform:rotate(-.5deg); max-width:820px; } body.page-cap1 .ctake-label { font-family:var(--display); font-weight:900; font-style:italic; font-size:var(--fs-tag); text-transform:uppercase; letter-spacing:.18em; color:var(--mint); margin-bottom:10px; } body.page-cap1 .ctake-text { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(20px,2.4vw,34px); line-height:1.1; text-transform:uppercase; } body.page-cap1 .ctake-text em { font-family:var(--brush); font-style:italic; text-transform:none; font-size:.9em; color:var(--mint); } body.page-cap1 .section--ink .ctake { background:var(--paper); color:var(--ink); } body.page-cap1 .section--ink .ctake-label, body.page-cap1 .section--ink .ctake-text em { color:var(--ink); } @media (max-width:1000px) { body.page-cap1 .ctake { transform:none; } } /* =================================================================== 34. PROFILE STAMP (.pillu) — capitolo III =================================================================== */ /* --- Cap III: profile stamp --- */ /* --- placeholder illustrazione profilo --- */ .pillu{aspect-ratio:3/4;max-width:480px;margin:0 auto;border:3px solid currentColor;background:rgba(0,0,0,.045);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(10px,1.4vh,16px);padding:clamp(22px,3vw,40px);position:relative;} .section--ink .pillu{background:rgba(255,255,255,.06);} .pillu .frame{width:clamp(52px,7vw,84px);height:auto;opacity:.5;} .pillu .lbl{font-family:var(--display);font-weight:900;font-style:italic;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.2em;opacity:.55;} .pillu .pn{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(18px,1.9vw,26px);text-transform:uppercase;line-height:1.05;} .pillu .psub{font-family:var(--brush);font-style:italic;font-weight:700;font-size:clamp(16px,1.6vw,23px);opacity:.75;} .pillu .corner{display:none;} /* --- Cap III: bozzetto personaggio montato (line-art su card bianca, leggibile su ogni colore di sezione) --- */ .pillu.is-filled{ aspect-ratio:auto; background:var(--paper); color:var(--ink); border-color:var(--ink); justify-content:flex-start; gap:clamp(4px,0.8vh,10px); padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px) clamp(14px,1.6vw,20px); } .section--ink .pillu.is-filled{background:var(--paper);} .pillu.is-filled .character{ width:100%; max-width:420px; height:auto; display:block; margin-bottom:clamp(8px,1.2vh,16px); } .pillu.is-filled .corner{opacity:.45;} /* --- variante "nuda": line-art direttamente sul colore di sezione, senza cornice né card --- */ .pillu.is-bare{ aspect-ratio:auto; border:none; background:transparent; justify-content:flex-start; gap:clamp(4px,0.8vh,10px); padding:clamp(8px,1.4vw,18px) 0 0; } .pillu.is-bare .character{ width:100%; max-width:480px; height:auto; display:block; margin:0 auto clamp(8px,1.2vh,16px); } /* Quota di popolazione del profilo: numero grande + didascalia + barra proporzionale, sotto il testo descrittivo. Eredita il colore-testo della sezione (contrasto garantito su fondi chiari e scuri). */ .datasec-content .pshare{ margin-top:clamp(8px,2vh,20px); max-width:320px; display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5px,0.8vh,9px); } .datasec-content .pshare-num{ font-family:var(--display);font-weight:900;font-style:italic; font-size:clamp(34px,4.6vw,60px);line-height:0.82;letter-spacing:-0.02em; } .datasec-content .pshare-cap{ font-family:var(--body);font-weight:600; text-transform:uppercase;letter-spacing:0.14em; font-size:clamp(10px,0.85vw,12px);opacity:0.7; } .datasec-content .pshare-bar{ width:100%;max-width:280px;height:9px; border:2px solid currentColor;border-radius:99px;overflow:hidden; } .datasec-content .pshare-bar > span{ display:block;height:100%;width:var(--w,0%); background:currentColor;border-radius:99px; } /* =================================================================== 35. CAP. V — conclusione =================================================================== */ body.page-cap5 .cwrap { max-width: 1180px; margin: 0 auto; width: 100%; } body.page-cap5 .cnarrow { max-width: 820px; margin: 0 auto; width: 100%; } body.page-cap5 .bigtitle { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(36px,6vw,92px); line-height:.9; text-transform:uppercase; letter-spacing:-.02em; } body.page-cap5 .bigtitle em { font-family:var(--brush); font-style:italic; text-transform:none; font-size:.62em; display:block; margin-top:.08em; } body.page-cap5 .prose-lead { font-family:var(--body); font-weight:500; font-size:var(--fs-lead); line-height:1.5; max-width:64ch; } body.page-cap5 .prose-lead + .prose-lead { margin-top:16px; } body.page-cap5 .steps { display:grid; grid-template-columns:1fr; gap:clamp(10px,1.4vw,16px); } body.page-cap5 .step { border:3px solid currentColor; padding:clamp(16px,2vw,24px); display:flex; gap:18px; align-items:flex-start; } body.page-cap5 .step .sn { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(26px,3.2vw,44px); line-height:.8; flex:0 0 auto; } body.page-cap5 .step .st { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(15px,1.4vw,21px); text-transform:uppercase; } body.page-cap5 .step .sd { font-family:var(--body); font-weight:500; font-size:clamp(13px,1vw,15px); line-height:1.4; margin-top:4px; opacity:.85; } body.page-cap5 .ctake { margin-top:clamp(28px,4vh,46px); background:var(--ink); color:var(--paper); padding:clamp(22px,3vw,40px); transform:rotate(-.5deg); max-width:840px; } body.page-cap5 .ctake-label { font-family:var(--display); font-weight:900; font-style:italic; font-size:var(--fs-tag); text-transform:uppercase; letter-spacing:.18em; color:var(--mint); margin-bottom:10px; } body.page-cap5 .ctake-text { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(20px,2.4vw,34px); line-height:1.1; text-transform:uppercase; } body.page-cap5 .ctake-text em { font-family:var(--brush); font-style:italic; text-transform:none; font-size:.9em; color:var(--mint); } body.page-cap5 .section--ink .ctake { background:var(--paper); color:var(--ink); } body.page-cap5 .section--ink .ctake-label, body.page-cap5 .section--ink .ctake-text em { color:var(--ink); } body.page-cap5 .draftnote { border:2px dashed currentColor; padding:clamp(12px,1.6vw,18px) clamp(14px,2vw,22px); font-family:var(--body); font-weight:600; font-size:clamp(13px,1.05vw,16px); line-height:1.45; margin-bottom:clamp(24px,3.4vh,38px); opacity:.92; } body.page-cap5 .asks { display:flex; flex-direction:column; gap:clamp(12px,1.6vh,18px); counter-reset:ask; } body.page-cap5 .ask { counter-increment:ask; border:3px solid currentColor; padding:clamp(18px,2.4vw,30px); display:flex; gap:18px; align-items:flex-start; } body.page-cap5 .ask::before { content:counter(ask,decimal-leading-zero); font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(28px,3.6vw,52px); line-height:.8; flex:0 0 auto; opacity:.5; } body.page-cap5 .ask .ah { font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(16px,1.5vw,22px); text-transform:uppercase; } body.page-cap5 .ask .ap { font-family:var(--brush); font-style:italic; font-weight:700; font-size:clamp(16px,1.6vw,23px); margin-top:6px; opacity:.7; } body.page-cap5 .ctas { display:flex; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap; margin-top:clamp(26px,4vh,44px); } body.page-cap5 .cta-btn { display:inline-flex; align-items:center; gap:12px; border:3px solid currentColor; padding:clamp(12px,1.6vw,18px) clamp(20px,2.6vw,32px); font-family:var(--display); font-weight:900; font-style:italic; font-size:clamp(16px,1.6vw,22px); text-transform:uppercase; letter-spacing:.04em; transition:transform .2s ease, background .2s ease; } body.page-cap5 .cta-btn::after { content:'→'; font-size:1.2em; } body.page-cap5 .cta-btn:hover { transform:translateX(4px); } body.page-cap5 .cta-btn.solid { background:var(--ink); color:var(--paper); border-color:var(--ink); } body.page-cap5 .prose-lead strong { font-weight:700; } body.page-cap5 .prose-lead.kicker { font-family:var(--brush); font-style:italic; font-weight:700; font-size:clamp(21px,2.2vw,32px); line-height:1.3; margin-top:clamp(26px,3.6vh,42px); max-width:56ch; } body.page-cap5 .prose-lead.kicker em { font-style:italic; } /* Form raccolta contatti (Cap. V — «Cosa puoi fare tu») */ .vlform { margin-top:clamp(24px,3.4vh,38px); max-width:660px; display:flex; flex-direction:column; gap:clamp(14px,1.8vh,20px); } .vlform-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,20px); } .vlfield { display:flex; flex-direction:column; gap:6px; } .vlfield-label { font-family:var(--display); font-weight:900; font-style:italic; font-size:var(--fs-tag); text-transform:uppercase; letter-spacing:.16em; } .vlfield input { font-family:var(--body); font-size:clamp(15px,1.15vw,18px); padding:clamp(11px,1.4vw,15px) clamp(12px,1.4vw,16px); border:3px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:0; width:100%; } .vlfield input:focus-visible { outline:3px solid var(--ink); outline-offset:3px; } .vlform-hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .vlcheck { display:flex; gap:12px; align-items:flex-start; font-family:var(--body); font-size:clamp(13px,1vw,15px); line-height:1.45; cursor:pointer; } .vlcheck input { flex:0 0 auto; width:20px; height:20px; margin-top:2px; accent-color:var(--ink); } .vlcheck a { border-bottom:2px solid currentColor; } .vlform-submit { align-self:flex-start; cursor:pointer; } .vlform-submit[disabled] { opacity:.5; cursor:progress; } .vlform-msg { font-family:var(--body); font-weight:600; font-size:clamp(14px,1.05vw,16px); line-height:1.45; min-height:1.4em; } .vlform-msg.is-error { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; } .vlform.is-done .vlform-row, .vlform.is-done .vlfield, .vlform.is-done .vlcheck, .vlform.is-done .vlform-submit { display:none; } @media (max-width:620px) { .vlform-row { grid-template-columns:1fr; } } @media (max-width:1000px) { body.page-cap5 .ctake { transform:none; } } /* =================================================================== 36. RESPONSIVE — capitoli I/III/IV/V + reduced-motion globale =================================================================== */ @media (max-width: 1000px) { .datasec-inner { grid-template-columns: 1fr; gap: clamp(32px, 6vh, 56px); } .datasec--reverse .datasec-inner { direction: ltr; } .datasec-chart { order: 2; } .datasec-content { order: 1; } .hero-take { transform: none; } } @media (max-width: 600px) { .vlbar-row { grid-template-columns: minmax(80px, 40%) 1fr auto; } .closure-paths { grid-template-columns: 1fr; } .vlseg { height: auto; flex-direction: column; } .vlseg > div { border-right: 0; border-bottom: 3px solid var(--ink); padding: 14px 16px; } .vlseg > div:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .vlbar-fill, .vlgrp-fill, .vldiv-bar { transform: scaleX(1) !important; } .vlseg-wrap { clip-path: inset(0 0 0 0) !important; } .vlbar-val, .vldiv-val, .vlgrp-tag, .vlmap .dot { opacity: 1 !important; } .vlmap .dot { transform: scale(1) !important; } } /* =================================================================== 37. RESPONSIVE — home =================================================================== */ /* Desktop: alla grafica va la colonna più larga così mappa, profili e metodo occupano molto più spazio. Il lato grafico dipende dall'ordine nel markup (mappa e metodo a sinistra, profili a destra); su ≤900px si impila (sotto). */ @media (min-width: 901px) { body.page-home .mblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Mappa e profili: alla grafica la colonna più larga (grande occupazione). */ body.page-home #temi .mblock { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } body.page-home #profili .mblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } /* Apertura: il titolo "ASCOLTARE" è una parola lunga non spezzabile, quindi al testo serve più respiro; i 3 francobolli metodo restano di misura media. */ body.page-home #apertura .mblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } @media (max-width: 900px) { body.page-home .mblock { grid-template-columns: 1fr; gap: clamp(24px, 5vh, 48px); } /* aspect-ratio:1 (quadrato) su desktop; su mobile il contenitore aderisce al contenuto, altrimenti attorno a mappa e figurine resta aria verticale */ body.page-home .mblock-graphic { width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: auto; } /* Sui blocchi impilati niente 100vh forzato: si adattano al contenuto, eliminando lo spazio morto sopra e sotto grafica e testo. L'hero resta a schermo pieno. */ body.page-home .section--full:not(.hero) { min-height: 0; padding-top: clamp(52px, 9vh, 96px); padding-bottom: clamp(52px, 9vh, 96px); } body.page-home .g-profiles { max-width: 480px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .toc-label { display: none; } /* stickers che su mobile finiscono sopra un titolo e ne rovinano la lettura */ .sticker--hide-mobile { display: none; } .footer-grid { grid-template-columns: 1fr; } body.page-home .hero-manifesto { text-align: center; } body.page-home .hero-manifesto .body { margin-left: auto; margin-right: auto; } /* Profili: su telefono 2 colonne invece di 3 → francobolli più grandi, figurine leggibili, griglia a piena larghezza fin quasi ai bordi */ body.page-home .g-profiles { grid-template-columns: repeat(2, 1fr); max-width: none; gap: 12px; } body.page-home .g-profiles .pname { font-size: 14px; } body.page-home .g-profiles .ppct { font-size: clamp(20px, 6vw, 30px); } } /* =================================================================== 38. RESPONSIVE — capitolo II =================================================================== */ @media (max-width: 1000px) { .ccover-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; } .ccover-roman { font-size: clamp(120px, 30vw, 220px); text-align: center; margin-left: 0; } .ccover-stat { margin-left: auto; margin-right: auto; } .ccover-hubs { justify-content: center; } body.page-cap2 .mblock { grid-template-columns: 1fr; gap: 40px; } body.page-cap2 .mblock-graphic { max-width: 360px; margin: 0 auto; } .tensions-pair { grid-template-columns: 1fr; gap: 24px; } .tensions-vs { font-size: 48px; } .bridge-inner { flex-direction: column; } .bridge-arrow { transform: rotate(90deg); } } @media (max-width: 820px) { .howto-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .howto-grid { grid-template-columns: 1fr; } } /* =================================================================== PAGINA CREDITI - griglia esercizi commerciali =================================================================== */ body.page-crediti .credits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(20px, 3vh, 30px); } body.page-crediti .credit-card { border: 3px solid currentColor; padding: clamp(14px, 1.8vw, 22px); } body.page-crediti .credit-card .cn { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 21px); text-transform: uppercase; } body.page-crediti .credit-card .cq { font-family: var(--body); font-weight: 500; font-size: clamp(12px, 0.95vw, 14px); margin-top: 4px; opacity: 0.75; } @media (max-width: 820px) { body.page-crediti .credits-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { body.page-crediti .credits-grid { grid-template-columns: 1fr; } } body:is(.page-crediti, .page-dati) .step .sd a, body:is(.page-crediti, .page-dati) .prose-lead a { border-bottom: 2px solid currentColor; opacity: 1; } body:is(.page-crediti, .page-dati) .step .sd a:hover, body:is(.page-crediti, .page-dati) .prose-lead a:hover { opacity: 0.65; } /* =================================================================== PAGINA DATI APERTI - schede dei file scaricabili =================================================================== */ body.page-dati .datafiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(28px, 4vh, 46px); } body.page-dati .datafile { display: flex; flex-direction: column; gap: 6px; border: 3px solid currentColor; padding: clamp(16px, 2vw, 24px); transition: transform 0.2s ease, background 0.2s ease; } body.page-dati .datafile:hover { transform: translateY(-3px); background: var(--mint); } body.page-dati .df-name { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; } body.page-dati .df-name::after { content: ' ↓'; } body.page-dati .df-meta { font-family: var(--display); font-weight: 900; font-style: italic; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: .14em; opacity: .6; } body.page-dati .df-desc { font-family: var(--body); font-weight: 500; font-size: clamp(13px, 1vw, 15px); line-height: 1.45; margin-top: 4px; } body.page-dati .df-alt { font-family: var(--body); font-size: clamp(12px, 0.9vw, 14px); opacity: .7; } body.page-dati .step .sn { font-size: clamp(15px, 1.5vw, 22px); line-height: 1.1; } @media (max-width: 720px) { body.page-dati .datafiles { grid-template-columns: 1fr; } } /* =================================================================== PAGINE LEGALI - informativa privacy: colonna di testo lungo =================================================================== */ body.page-legale .legale { max-width: 720px; } body.page-legale .legale h3 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(19px, 1.9vw, 27px); text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; margin: clamp(30px, 4.2vh, 48px) 0 10px; } body.page-legale .legale h3:first-of-type { margin-top: clamp(26px, 3.6vh, 40px); } body.page-legale .legale p { font-family: var(--body); font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; } body.page-legale .legale p + p { margin-top: 12px; } body.page-legale .legale strong { font-weight: 700; } body.page-legale .legale a { border-bottom: 2px solid currentColor; } body.page-legale .legale a:hover { opacity: 0.65; }