/* =================================================================== ASPASIA · Slide System — Avviso N°4 PAR GOL Lazio Palette, griglia, glow e tipografia derivati da style.css del sito. Tema gestito su (stesso meccanismo + localStorage 'theme' del sito, così la preferenza è condivisa). =================================================================== */ /* ── Variabili di tema (LIGHT default) ───────────────────────────── */ :root { --primary: #2563eb; /* blue-600 (action) */ --primary-700: #1d4ed8; /* hover */ --primary-500: #3b82f6; /* focus / active */ --neon: #00D4FF; /* glow speciale */ --warn: #e11d48; /* accento vincoli */ --bg: #ffffff; --panel: #ffffff; --panel-soft: #f6f8ff; --border: #e5e7eb; /* gray-200 */ --border-2: #d1d5db; /* gray-300 */ --text: #111827; /* gray-900 */ --text-2: #374151; /* gray-700 */ --muted: #9ca3af; /* gray-400 */ /* sfondo: griglia + glow (variante LIGHT) */ --grid-color: rgba(37,99,235,0.06); --grid-size: 44px; --glow: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(59,130,246,0.10) 0%, transparent 70%), radial-gradient(ellipse 50% 35% at 80% 70%, rgba(99,102,241,0.08) 0%, transparent 70%); } /* ── Variabili di tema (DARK) ────────────────────────────────────── */ html.dark { --bg: #0f172a; /* sfondo profondo */ --panel: #1f2937; /* gray-800 */ --panel-soft: #111827; --border: #374151; /* gray-700 */ --border-2: #4b5563; /* gray-600 */ --text: #f9fafb; /* gray-50 */ --text-2: #d1d5db; /* gray-300 */ --muted: #9ca3af; --grid-color: rgba(99,102,241,0.06); --grid-size: 40px; --glow: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(59,130,246,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 35% at 80% 70%, rgba(99,102,241,0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 60% 10%, rgba(139,92,246,0.05) 0%, transparent 70%); } /* ── Base ────────────────────────────────────────────────────────── */ html, body { background-color: var(--bg); } body { position: relative; overflow: hidden; font-family: 'Montserrat', sans-serif; transition: background-color .5s ease; } /* ── Sfondo a doppio strato fisso (griglia + glow) ───────────────── */ /* 1 · Griglia a linee con maschera sfumata in alto */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8rem); mask-image: linear-gradient(to bottom, transparent 0, #000 8rem); } /* 2 · Glow sfumati (ellissi radiali) */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--glow); } /* ── Reveal: trasparente per lasciar passare lo sfondo brand ─────── */ .reveal { font-family: 'Montserrat', sans-serif; color: var(--text); } .reveal .slides { text-align: left; } .reveal .slides section { background: transparent; } html.reveal-full-page, .reveal-viewport { background: transparent; } .reveal ::selection { background: var(--primary); color: #fff; } .reveal .progress { color: var(--primary); height: 3px; } .reveal .controls { color: var(--primary); } /* Safe-area costante dentro lo stage: spazio sotto il brand (alto) e sopra foot-label/dots (basso). Evita la sovrapposizione brand ↔ testo. */ .reveal .slides section { padding: 4.4rem 0.4rem 2.6rem; } /* ── Dots di navigazione (colonna destra, minimale, theme-aware) ──── */ .dots { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: .55rem; } .dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--border-2); cursor: pointer; display: block; transition: background .2s ease, transform .2s ease; } .dots button:hover { background: var(--primary-500); } .dots button.is-active { background: var(--primary); transform: scale(1.45); } html.dark .dots button.is-active { background: var(--primary-500); } @media (max-width: 768px) { .dots { display: none; } } .reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: 'Montserrat', sans-serif; color: var(--text); text-transform: none; margin: 0; } /* =================================================================== CHROME FISSO: brand (logo + wordmark), toggle tema, indici =================================================================== */ .brand { position: fixed; top: 2rem; left: 2.6rem; z-index: 60; display: inline-flex; align-items: center; gap: .6rem; pointer-events: none; } .brand img { height: 35px; width: auto; display: block; } html.dark .brand img { filter: brightness(0) invert(1); } .brand .wordmark { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: .04em; color: var(--text); line-height: 1; } .theme-toggle { position: fixed; top: 1.85rem; right: 2.6rem; z-index: 60; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s, background .3s; } .theme-toggle:hover { border-color: var(--primary-500); color: var(--primary); } html.dark .theme-toggle { background: rgba(31,41,55,0.6); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { display: none; } html.dark .theme-toggle .ic-sun { display: block; } html.dark .theme-toggle .ic-moon { display: none; } .slide-index { position: fixed; bottom: 1.9rem; right: 2.6rem; z-index: 60; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); } .slide-index .cur { color: var(--text); } .foot-label { position: fixed; bottom: 1.9rem; left: 2.6rem; z-index: 60; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } /* =================================================================== NAVIGAZIONE MOBILE — drawer destro + overlay + bottone menu (nascosti su desktop, attivati nella media query mobile) =================================================================== */ .nav-toggle { display: none; } .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .sidebar-overlay.open { opacity: 1; pointer-events: auto; } .sidebar-mobile { display: none; } /* lo stile reale è nella media query */ /* =================================================================== PRIMITIVE EDITORIALI =================================================================== */ .kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); margin: 0 0 1.3rem 0; } html.dark .kicker { color: var(--primary-500); } .s-title { font-size: 2.5rem; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .s-title.sm { font-size: 2rem; } .s-sub { font-size: 1.02rem; font-weight: 400; color: var(--text); line-height: 1.55; max-width: 52ch; margin-top: 1.3rem; } .accent { color: var(--primary); } html.dark .accent { color: var(--primary-500); } .neon { color: var(--neon); text-shadow: 0 0 10px rgba(0,212,255,.45); } .rule { width: 64px; height: 3px; background: var(--primary); border-radius: 2px; margin: 0 0 2rem 0; } /* ── Liste pulite ────────────────────────────────────────────────── */ .clean-list { list-style: none; margin: 1.8rem 0 0; padding: 0; } .clean-list li { position: relative; padding-left: 2rem; margin-bottom: 1.05rem; font-size: 1.0rem; font-weight: 400; line-height: 1.5; color: var(--text-2); } .clean-list li strong { color: var(--text); font-weight: 700; } .clean-list li::before { content: ''; position: absolute; left: 0; top: .44em; width: 9px; height: 9px; border: 2px solid var(--primary); border-radius: 50%; } html.dark .clean-list li::before { border-color: var(--primary-500); } /* ── Lista vincoli / divieti ─────────────────────────────────────── */ .warn-list li::before { border-color: var(--warn); background: var(--warn); } /* Concatenando le classi aumentiamo la specificità in modo sicuro */ .clean-list.warn-list li::before { border-color: var(--warn); background: var(--warn); } /* Override fondamentale per impedire al Dark Mode di rimettere il blu */ html.dark .clean-list.warn-list li::before { border-color: var(--warn); } .warn-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: .1rem .4rem; margin-right: .5rem; vertical-align: middle; } /* ── Chip / pill (percorsi, tag) ─────────────────────────────────── */ .chip-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; } .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--text-2); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .85rem; line-height: 1; text-decoration: none; /* Fondamentale se usi il tag */ cursor: pointer; /* * LA MAGIA DELLO SMOOTH: * Usiamo cubic-bezier per un'entrata rapida e una decrescita morbidissima. * Separiamo le transizioni per avere il massimo controllo. */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, color 0.3s ease; } /* Effetto Hover: la chip si solleva appena e proietta un'ombra diffusa */ .chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); /* Ombra molto morbida in light mode */ border-color: var(--primary); /* Opzionale: fa illuminare il bordo col tuo colore primario */ } /* Gestione Dark Mode */ html.dark .chip { background: rgba(31,41,55,0.55); } html.dark .chip:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); /* Ombra più marcata per il dark mode */ } /* Puntini */ .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } html.dark .chip .dot { background: var(--primary-500); } /* ── Stile Badge Tailwind per le Keyword nel testo ─────────────────────────────────── */ .keyword-tw { display: inline-block; padding: 0.1rem 0.4rem; /* Padding ridotto per non sformare l'interlinea del testo */ margin: 0 0.2rem; /* Leggero margine laterale per distanziarlo dalle parentesi */ font-size: 0.85em; /* Leggermente più piccolo del testo normale */ font-weight: 500; border-radius: 0.375rem; text-decoration: none; vertical-align: baseline; /* Lo allinea perfettamente al testo circostante */ border: 1px solid transparent; transition: all 0.15s ease-in-out; } /* Variante Blu dell'immagine */ .keyword-blue { color: var(--primary-700); background-color: #EFF6FF; border-color: #2563eb; } .keyword-blue:hover { transform: translateY(-1px); /* Sollevamento leggerissimo */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Piccola ombra al passaggio */ } /* ── Variante Blu - DARK MODE ─────────────────────────────────── */ html.dark .keyword-blue { color: #93c5fd; /* Il tuo colore originale (azzurro chiaro) */ background-color: rgba(30, 58, 138, 0.4); /* Sfondo blu scuro in trasparenza */ border-color: #2563eb; } html.dark .keyword-blue:hover { background-color: rgba(30, 58, 138, 0.6); border-color: #3b82f6; /* Il transform: translateY(-1px) viene già ereditato dalla regola base */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombra leggermente più scura per staccare dal fondo nero */ } /* Variante Rossa */ .keyword-red { color: var(--warn); background-color: #fce4ec; /* rosa chiarissimo */ border-color: var(--warn); } .keyword-red:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Dark mode */ html.dark .keyword-red { color: #fca5a5; /* rosso chiaro */ background-color: rgba(127,29,29,0.4); /* bordeaux trasparente */ border-color: var(--warn); } html.dark .keyword-red:hover { background-color: rgba(127,29,29,0.6); border-color: #f87171; /* rosso acceso */ box-shadow: 0 2px 4px rgba(0,0,0,0.2); } @media (max-width: 768px) { .keyword-tw { padding: 0.03rem 0.35rem; font-size: 0.8em; vertical-align: middle; } } /* ── Numero editoriale gigante ───────────────────────────────────── */ .big-num { font-size: 5rem; font-weight: 800; letter-spacing: -0.03em; line-height: .95; color: var(--text); } .big-num .unit { font-size: 2rem; color: var(--primary); vertical-align: top; } .big-num .suf { font-size: 2rem; font-weight: 600; } .num-label { font-size: .8rem; font-weight: 600; color:var(--text-2);letter-spacing: .14em; text-transform: uppercase; margin-top: .8rem; } /* ── Cards + griglie ─────────────────────────────────────────────── */ .box-grid { display: grid; gap: 1.05rem; margin-top: 2.1rem; } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-4 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem 1.35rem; display: flex; flex-direction: column; /* Assicura che la card-note vada in fondo anche se le card hanno altezze diverse */ /* L'animazione "smooth" applicata alle card */ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; } /* L'effetto Hover: sollevamento, ombra morbida e bordo accentato */ .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); border-color: var(--primary); } html.dark .card { background: rgba(31,41,55,0.55); } /* Hover per il Dark Mode */ html.dark .card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } .card .c-idx { font-size: .76rem; font-weight: 700; color: var(--primary); letter-spacing: .1em; } html.dark .card .c-idx { color: var(--primary-500); } .card h3 { font-size: 1.1rem; font-weight: 700; margin: .5rem 0 .45rem; } .card p { font-size: .88rem; color: var(--text-2); line-height: 1.5; margin: 0 0 1.5rem 0; /* Aggiunto il margine inferiore di 1.5rem (Top, Right, Bottom, Left) */ } /* ── Stile per i riferimenti normativi a fondo card ─────────────────────────────────────────────── */ .card .card-note { margin-top: auto; /* È questo il comando magico di Flexbox che spinge in basso */ padding-top: 0.8rem; margin-bottom: 0; font-size: 0.72rem; color: var(--text-2); opacity: 0.6; border-top: 1px solid var(--border); } /* Assicura che i link card mantengano i colori del testo originale */ a.card { text-decoration: none; } /* Evita che il testo diventi blu o sottolineato al passaggio del mouse */ a.card:hover { text-decoration: none; } /* ── Due colonne testo ───────────────────────────────────────────── */ .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.6rem; margin-top: 1.8rem; } .col-head { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: .85rem; } html.dark .col-head { color: var(--primary-500); } /* ── Flusso a step orizzontale ───────────────────────────────────── */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.3rem; } .step .s-n { font-size: 1.55rem; font-weight: 800; color: var(--primary); line-height: 1; } html.dark .step .s-n { color: var(--primary-500); } .step .s-bar { height: 2px; background: var(--border); margin: .8rem 0; position: relative; } .step .s-bar::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 22px; background: var(--primary); } .step h4 { font-size: .9rem; font-weight: 700; margin: 0 0 .3rem; color: var(--text); } .step p { font-size: .76rem; color: var(--text-2); line-height: 1.45; margin: 0; } .step.is-key h4 { color: var(--primary); } html.dark .step.is-key h4 { color: var(--primary-500); } /* ── Griglia settori (SEP) ───────────────────────────────────────── */ .sep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-top: 1.8rem; } .sep { border: 1px solid var(--border); border-radius: 12px; padding: .95rem .9rem; background: var(--panel); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; } html.dark .sep { background: rgba(31,41,55,0.45); } .sep .sep-top { display: flex; align-items: baseline; justify-content: space-between; } .sep .sep-code { font-size: 1.35rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; } html.dark .sep .sep-code { color: var(--primary-500); } .sep .sep-pe { font-size: .72rem; font-weight: 700; color: var(--text-2); background: var(--panel-soft); border: 1px solid var(--border); border-radius: 999px; padding: .12rem .5rem; } html.dark .sep .sep-pe { background: rgba(15,23,42,0.6); } .sep .sep-name { font-size: .8rem; color: var(--text-2); margin-top: .35rem; line-height: 1.3; } /* Entrata delle sole .sep: dissolvenza che NON tocca transform. Così l'hover può animare transform liberamente, fluido come sulle chip. */ @keyframes sep-fade { from { opacity: 0; } to { opacity: 1; } } .reveal .slides section.present .sep.anim { animation-name: sep-fade; } /* Hover: niente più !important su transform, l'animazione non lo reclama più */ .sep:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); border-color: var(--primary) !important; } html.dark .sep:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); border-color: var(--primary-500) !important; } /* ── Mini Gantt sotto il testo ───────────────────────────────────── */ .gantt { margin-top: 2.4rem; display: grid; gap: .7rem; } .gantt-head, .gantt-row { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem; } .gantt-head span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .gantt-head .scale { display: flex; justify-content: space-between; } .gantt-row .g-label { font-size: .82rem; font-weight: 700; color: var(--text); } .gantt-track { position: relative; height: 12px; border-radius: 999px; background: var(--border); } html.dark .gantt-track { background: rgba(255,255,255,.08); } .gantt-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-500)); transition: filter .3s ease; } html.dark .gantt-bar { background: linear-gradient(90deg, var(--primary-500), var(--primary)); } .gantt-row:hover .gantt-bar { filter: brightness(1.08); } .gantt-bar.dashed { background: none; border: 2px dashed var(--primary); } html.dark .gantt-bar.dashed { border-color: var(--primary-500); } @media (max-width: 768px) { .gantt-head, .gantt-row { grid-template-columns: 1fr; gap: .35rem; } .gantt-head .empty { display:none; } } .gantt-bar.segments { background: repeating-linear-gradient( 90deg, var(--primary) 0, var(--primary) 6.4%, transparent 6.4%, transparent 8.333% ); } html.dark .gantt-bar.segments { background: repeating-linear-gradient( 90deg, var(--primary-500) 0, var(--primary-500) 6.4%, transparent 6.4%, transparent 8.333% ); } /* ── Matrice attività × Percorsi ─────────────────────────────────── */ .base-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.6rem; padding: .7rem .9rem; border: 1px dashed var(--border-2); border-radius: 12px; background: var(--panel-soft); } html.dark .base-strip { background: rgba(15,23,42,0.5); } .base-strip .bs-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-right: .3rem; } html.dark .base-strip .bs-label { color: var(--text); } .matrix { width: 100%; border-collapse: collapse; margin-top: 1.3rem; } .matrix th, .matrix td { padding: .42rem .5rem; font-size: .82rem; border-bottom: 1px solid var(--border); } .matrix thead th { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; vertical-align: bottom; line-height: 1.2; } .matrix thead th.act { text-align: left; } .matrix tbody td { text-align: center; color: var(--text-2); } .matrix tbody td.act { text-align: left; font-weight: 600; color: var(--text); } .matrix tbody td.act .hrs { font-weight: 400; color: var(--muted); font-size: .76rem; } .matrix .colP5 { background: rgba(37,99,235,0.05); } html.dark .matrix .colP5 { background: rgba(59,130,246,0.10); } .matrix th.p5 { color: var(--primary); } html.dark .matrix th.p5 { color: var(--primary-500); } .m-yes { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); } html.dark .m-yes { background: var(--primary-500); } .m-no { display: inline-block; width: 12px; height: 2px; background: var(--border-2); border-radius: 2px; vertical-align: middle; } .matrix { touch-action: pan-x pan-y !important; } /* ── Cover con QR a destra ──────────────────────────────────────── */ .cover-row { display: flex; align-items: center; justify-content: space-between; gap: 2.6rem; width: 100%; } .cover-main { flex: 1 1 auto; min-width: 0; } .cover-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .9rem; } .qr-frame { display: block; width: 170px; height: 170px; padding: 0.5rem; background: #ffffff; /* sempre chiaro: il QR resta leggibile anche in dark */ border: 1px solid var(--border); border-radius: 10px; color: #111827; /* moduli scuri (il path usa currentColor) */ box-shadow: 0 12px 24px rgba(0,0,0,0.08); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); } .qr-frame:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,0.12); } html.dark .qr-frame { border-color: var(--border-2); box-shadow: 0 12px 24px rgba(0,0,0,0.4); } .qr-frame svg { width: 100%; height: 100%; display: block; } .qr-cap { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--muted); line-height: 1.4; } .qr-cap strong { color: var(--text); font-weight: 700; } @media (max-width: 768px) { .cover-row { flex-direction: column; align-items: flex-start; gap: 1.6rem; } .qr-frame { width: 140px; height: 140px; } } .qr-frame img { width: 100%; height: 100%; display: block; object-fit: contain; } /* ── Tipologie / "ladder" 4 livelli ──────────────────────────────── */ .ladder { display: grid; gap: .7rem; margin-top: 2rem; } .lad-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; padding: .9rem 1.1rem; background: var(--panel); } html.dark .lad-row { background: rgba(31,41,55,0.5); } .lad-row .lad-name { font-size: 1.0rem; font-weight: 700; color: var(--text); } .lad-row .lad-desc { font-size: .82rem; color: var(--text-2); margin-top: .15rem; } .lad-row .lad-hrs { font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; white-space: nowrap; } html.dark .lad-row .lad-hrs { color: var(--primary-500); } .lad-row .lad-hrs small { font-size: .85rem; color: var(--muted); font-weight: 600; } /* ── Mini tabella (anticipi / dati) ──────────────────────────────── */ .mini-table { margin-top: .9rem; width: 100%; border-collapse: collapse; } .mini-table td { padding: .52rem 0; font-size: .9rem; border-bottom: 1px solid var(--border); color: var(--text-2); } .mini-table td:last-child { text-align: right; font-weight: 700; color: var(--primary); } html.dark .mini-table td:last-child { color: var(--primary-500); } /* ── Data / scadenza in evidenza ─────────────────────────────────── */ .date-hero { display: inline-flex; flex-direction: column; border-left: 3px solid var(--primary); padding-left: 1.4rem; margin-top: 1.4rem; } .date-hero .d-when { font-size: 3.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--text); } .date-hero .d-time { font-size: 1.15rem; font-weight: 600; color: var(--primary); margin-top: .45rem; } html.dark .date-hero .d-time { color: var(--primary-500); } /* ── Layout split (testo + visual) ───────────────────────────────── */ .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: center; } .figure-slot { border: 1px dashed var(--border-2); border-radius: 18px; min-height: 300px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: relative; overflow: hidden; } .figure-slot .fig-num { font-size: 7rem; font-weight: 800; color: var(--primary); opacity: .12; letter-spacing: -.04em; } /* =================================================================== COVER & CLOSING =================================================================== */ .cover, .closing { display: flex; flex-direction: column; justify-content: center; height: 100%; } .cover .eyebrow { font-size: .8rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--primary); margin-bottom: 1.6rem; } html.dark .cover .eyebrow { color: var(--primary-500); } .cover h1 { font-size: 4.2rem; font-weight: 800; line-height: .98; letter-spacing: -.035em; } .cover h1 .thin { font-weight: 300; color: var(--text-2); display: block; font-size: 2.1rem; letter-spacing: -.02em; margin-bottom: .5rem; } .cover .lead { font-size: 1.12rem; color: var(--text-2); max-width: 52ch; margin-top: 1.9rem; line-height: 1.55; } .cover .meta { display: flex; gap: 1.4rem; margin-top: 2.4rem; flex-wrap: wrap; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cover .meta span { display: inline-flex; align-items: center; gap: .55rem; } .cover .meta span::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--primary); } .closing h2 { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .closing .c-lead { font-size: 1.08rem; color: var(--text-2); max-width: 50ch; margin-top: 1.5rem; line-height: 1.6; } .closing .contacts { display: flex; gap: 2.8rem; margin-top: 2.4rem; flex-wrap: wrap; } .closing .contacts .c-item .c-k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .closing .contacts .c-item .c-v { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: .35rem; } .closing .contacts .c-item .c-v a { color: var(--primary); text-decoration: none; } html.dark .closing .contacts .c-item .c-v a { color: var(--primary-500); } /* =================================================================== ANIMAZIONI D'INGRESSO (staggered, sobrie) =================================================================== */ .reveal .slides section.present .anim { opacity: 0; animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards; } .reveal .slides section.present .anim.d1 { animation-delay: .05s; } .reveal .slides section.present .anim.d2 { animation-delay: .15s; } .reveal .slides section.present .anim.d3 { animation-delay: .25s; } .reveal .slides section.present .anim.d4 { animation-delay: .35s; } .reveal .slides section.present .anim.d5 { animation-delay: .45s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal .slides section.present .anim { animation: none; opacity: 1; } body { transition: none; } } /* Forza trasparenza per il tema dark/light */ .reveal, .reveal-viewport { background: transparent !important; } /* =================================================================== FIX DARK/LIGHT MODE – garanzia che lo sfondo si veda sempre =================================================================== */ .reveal, .reveal-viewport, .reveal .slides, .reveal .slides section { background: transparent !important; } html.dark body { background-color: #0f172a !important; } html.dark .reveal, html.dark .reveal h1, html.dark .reveal h2, html.dark .reveal h3, html.dark .reveal h4, html.dark .reveal p, html.dark .reveal li, html.dark .reveal td, html.dark .reveal th, html.dark .reveal .wordmark, html.dark .reveal .kicker, html.dark .reveal .c-idx { color: #f9fafb !important; } html.dark .accent, html.dark .reveal .accent, html.dark .neon, html.dark .reveal .neon { color: var(--primary-500) !important; } html.dark .warn-tag, html.dark .reveal .warn-tag { color: #e11d48 !important; border-color: #e11d48 !important; } html.dark .card, html.dark .lad-row, html.dark .sep, html.dark .base-strip, html.dark .chip { background: rgba(31, 41, 55, 0.7) !important; border-color: #374151 !important; } html.dark .theme-toggle { background: rgba(31, 41, 55, 0.8) !important; border-color: #4b5563 !important; color: #d1d5db !important; } /* =================================================================== BOTTONE ASPASIA STYLE =================================================================== */ .cta-btn-deck { display: inline-block; background: var(--primary); color: #ffffff; font-size: 0.92rem; font-weight: 600; font-family: 'Montserrat', sans-serif; text-decoration: none; padding: 0.55rem 1.5rem; border-radius: 0.5rem; line-height: 1.25; border: none; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease; } .cta-btn-deck:hover { background: var(--primary-700); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28); } html.dark .cta-btn-deck { background: var(--primary-500); color: #ffffff; } html.dark .cta-btn-deck:hover { background: var(--primary); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); } /* ── Cause di esclusione (gate knock-out) ───────────────────────── */ .gates-head { font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--warn); margin:1.8rem 0 .9rem; } .gate-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.8rem; } .gate { display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; line-height:1.4rem; /* prima riga alta quanto il badge */ color:var(--text-2); } .gate .g-n { flex:0 0 auto; width:1.4rem; height:1.4rem; margin-top:0; /* via il fudge */ border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:var(--warn); background:rgba(225,29,72,.08); border:1px solid var(--warn); } .gate .g-sez { font-weight:700; color:var(--text-2); white-space:nowrap; } @media (max-width: 768px) { .gate-grid { grid-template-columns:1fr; } } .topbar-glass { display: none; } .swipe-hint { display: none; } /* =================================================================== RESPONSIVE — Mobile: slide Reveal + sidebar laterale =================================================================== */ @media (max-width: 768px) { html, body { overflow: visible !important; height: auto !important; position: static !important; } .reveal .progress { position: fixed !important; bottom: 0; left: 0; width: 100%; z-index: 65; } .topbar-glass { display: block; position: fixed; top: 0; left: 0; right: 0; height: 3.6rem; z-index: 55; /* sotto brand(60) e toggle(60), sopra le slide */ background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .topbar-glass { height: 4.2rem; } /* prima 3.6rem: più spessa */ html.dark .topbar-glass { background: rgba(15,23,42,.72); border-bottom-color: var(--border-2); } body.scrolled .topbar-glass { opacity: 1; } /* Brand: solo logo, niente wordmark, allineato al toggle */ .brand { top: 1.2rem !important; left: 1.3rem !important; /* più staccato dal bordo */ height: auto !important; display: inline-flex; align-items: center; gap: 0; } .brand img { height: 34px !important; /* logo un po’ più grande (prima 28px) */ width: auto; } .brand .wordmark { display: none !important; } /* Toggle tema: più staccato, trasparente */ .theme-toggle { top: 1.2rem !important; right: 4.4rem !important; /* più staccato dal bordo */ background: transparent; border: none; border-radius: 8px; padding: 0; width: 40px; height: 40px; color: var(--muted); } .theme-toggle:hover { background: rgba(0,0,0,.06); color: var(--text); border: none; } html.dark .theme-toggle { background: transparent; } html.dark .theme-toggle:hover { background: rgba(255,255,255,.08); } .theme-toggle svg { width: 20px; height: 20px; } .reveal, .reveal .slides, .reveal .slides > section.present { touch-action: pan-y !important; /* consenti lo scroll verticale a un dito */ } /* Chrome desktop nascosto */ .dots, .slide-index, .foot-label { display: none !important; } /* Tipografia ridotta */ .cover h1 { font-size: 2.4rem; } .cover h1 .thin { font-size: 1.3rem; } .s-title { font-size: 1.8rem; } .s-title.sm { font-size: 1.5rem; } .big-num { font-size: 3rem; } .closing h2 { font-size: 2rem; } .date-hero .d-when { font-size: 2rem; } /* Griglie a colonna singola */ .g-3, .g-2, .g-4, .flow, .cols-2, .split, .ladder .lad-row { grid-template-columns: 1fr !important; } .sep-grid { grid-template-columns: repeat(2, 1fr); } .lad-row { grid-template-columns: 1fr !important; gap: .4rem; } .lad-row .lad-hrs { font-size: 1.25rem; } .figure-slot { display: none; } /* Tabelle scrollabili */ .matrix { display: block; overflow-x: auto; white-space: nowrap; } .matrix th, .matrix td { font-size: 0.72rem; padding: 0.35rem 0.3rem; } /* ---- Layout slide: da scena scalata a blocchi scrollabili ---- */ .reveal, .reveal-viewport, .reveal .slides { position: static !important; width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; transform: none !important; overflow: visible !important; /* ← AGGIUNGI: Reveal forza overflow:hidden su .reveal-viewport */ } .reveal .slides > section { display: none !important; } .reveal .slides > section.present { display: block !important; position: relative !important; width: 100% !important; height: auto !important; /* prima era 100dvh: era questo a bloccare lo scroll */ min-height: 100dvh !important; /* riempie comunque lo schermo sulle slide corte */ transform: none !important; overflow: visible !important; /* niente più scroll interno */ box-sizing: border-box !important; padding: 6.4rem 1.2rem 6rem 1.2rem !important; } /* niente sforamenti orizzontali: i figli possono restringersi, il testo va a capo */ .reveal .slides > section.present * { min-width: 0; } .reveal .slides > section.present h1, .reveal .slides > section.present h2, .reveal .slides > section.present h3, .reveal .slides > section.present p, .reveal .slides > section.present li, .reveal .slides > section.present .big-num, .reveal .slides > section.present .d-when { overflow-wrap: break-word; word-break: break-word; } /* cover e closing in alto e ad altezza naturale, così lo scroll è affidabile */ .reveal .slides > section.present .cover, .reveal .slides > section.present .closing { height: auto !important; justify-content: flex-start !important; } /* annulla i margini d'allineamento pensati per il desktop a due colonne (es. slide 14) */ .split > div { margin-top: 0 !important; } /* ---- Bottone menu (apre il drawer) ---- */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 1.2rem; right: 1.3rem; /* al bordo, come prima il theme-toggle */ bottom: auto; left: auto; z-index: 62; /* sopra brand(60), sotto overlay(70) */ width: 40px; height: 40px; border-radius: 10px; background: transparent; border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s, background .3s; } .nav-toggle:hover { border-color: var(--primary-500); color: var(--primary); } html.dark .nav-toggle { background: rgba(31,41,55,0.6); border-color: #4b5563; color: #d1d5db; } .nav-toggle svg { width: 20px; height: 20px; } /* ---- Overlay ---- */ .sidebar-overlay { display: block; } /* ---- Drawer destro ---- */ .sidebar-mobile { display: flex !important; position: fixed; top: 0; right: 0; z-index: 75; width: min(80vw, 300px); height: 100dvh; flex-direction: column; gap: 0; padding: 1rem .8rem 1.5rem; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid var(--border); box-shadow: -10px 0 34px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1); overflow: hidden; /* il drawer NON scrolla */ } .sidebar-head { flex: 0 0 auto; } /* header fisso in alto, non si comprime */ .sidebar-list { flex: 1 1 auto; /* prende lo spazio rimanente */ min-height: 0; /* indispensabile perché overflow funzioni in un flex column */ overflow-y: auto; /* SOLO le voci scrollano */ display: flex; flex-direction: column; gap: .15rem; -webkit-overflow-scrolling: touch; } html.dark .sidebar-mobile { background: rgba(17,24,39,.94); border-left-color: var(--border-2); } .sidebar-mobile.open { transform: translateX(0); } .sidebar-mobile .sidebar-item { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 38px; padding: .5rem .65rem; border: none; border-radius: 10px; background: transparent; color: var(--text-2); font-family: 'Montserrat', sans-serif; font-size: .8rem; font-weight: 400; text-align: left; line-height: 1.25; cursor: pointer; transition: background .15s ease, color .15s ease; } .sidebar-mobile .sidebar-item .si-num { flex: 0 0 auto; width: 1.5rem; font-size: .68rem; font-weight: 700; color: var(--muted); } .sidebar-mobile .sidebar-item:hover { background: rgba(37,99,235,.08); color: var(--primary); } .sidebar-mobile .sidebar-item.is-active { background: var(--primary); color: #fff; } .sidebar-mobile .sidebar-item.is-active .si-num { color: rgba(255,255,255,.85); } html.dark .sidebar-mobile .sidebar-item.is-active { background: var(--primary-500); } .sidebar-head { display: flex; align-items: center; gap: .6rem; justify-content: space-between; /* logo a sinistra, X a destra */ padding: .4rem .5rem 1rem .65rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); } html.dark .sidebar-head { border-bottom-color: var(--border-2); } .sidebar-head img { height: 30px; width: auto; display: block; } html.dark .sidebar-head img { filter: brightness(0) invert(1); } .sidebar-head .wordmark { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .04em; color: var(--text); line-height: 1; margin-right: auto; /* tiene logo+nome a sinistra, X all'estremo */ } .sidebar-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .sidebar-close:hover { background: rgba(37,99,235,.08); color: var(--primary); } html.dark .sidebar-close:hover { background: rgba(59,130,246,.15); color: var(--primary-500); } .sidebar-close svg { width: 20px; height: 20px; } } /* =================================================================== SWIPE HINT — solo mobile, pillola grande con pallino pieno =================================================================== */ .swipe-hint { display: none; } @media (max-width: 768px) { .reveal .slides > section:first-child .swipe-hint { display: flex; position: absolute; bottom: 2.2rem; margin-top: 2rem; left: 50%; transform: translateX(-50%) translateY(10px); flex-direction: column; align-items: center; gap: 0.8rem; z-index: 10; pointer-events: none; opacity: 0; animation: hint-enter .6s cubic-bezier(.2,.7,.2,1) .5s forwards; } @keyframes hint-enter { to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Pillola orizzontale grande */ .swipe-pill { width: 56px; /* prima 72px */ height: 22px; /* prima 36px */ border: 2px solid var(--muted); /* prima 2.5px */ border-radius: 999px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } html.dark .swipe-pill { border-color: var(--text-2); } /* Pallino grande, ben contenuto */ .swipe-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); position: absolute; left: 50%; margin-left: -7px; animation: dot-slide 2.4s cubic-bezier(.45,0,.55,1) infinite; } html.dark .swipe-dot { background: var(--text-2); } @keyframes dot-slide { 0% { transform: translateX(20px); opacity: 0; } 20% { transform: translateX(10px); opacity: 1; } 80% { transform: translateX(-10px); opacity: 1; } 100% { transform: translateX(-20px); opacity: 0; } } .swipe-text { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } html.dark .swipe-text { color: var(--text-2); } }