Recensioni Mensili – Biblioteca San Carlo<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;700&display=swap');\n\n :root {\n --bordeaux: #8b1a25;\n --gold: #d4af37;\n --cream: #f2ede4;\n --white: #ffffff;\n --dark: #111111;\n --text: #2d2d2d;\n --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n\n .biblio-root {\n all: initial;\n display: block;\n background-color: var(--white);\n font-family: 'Montserrat', sans-serif;\n color: var(--text);\n line-height: 1.6;\n }\n\n .biblio-root * { box-sizing: border-box !important; margin: 0; padding: 0; }\n .biblio-serif { font-family: 'Cormorant Garamond', serif !important; }\n\n \/* HEADER *\/\n\n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 15px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 8px; font-family: Montserrat, sans-serif; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(139,26,37,0.3);\">SC<\/div>\n <div style=\"line-height: 1.2; font-family: Montserrat, sans-serif;\">\n <div style=\"font-weight: 700; font-size: 16px; text-transform: uppercase; color: #1a1a1a; letter-spacing: 1px;\">Biblioteca<\/div>\n <div style=\"font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600;\">San Carlo<\/div>\n <\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#tessere\">Tessere<\/a>\n <a href=\"#eventi\">Eventi<\/a>\n <a href=\"#notizie\">Notizie<\/a>\n <a href=\"#scacchi\">Scacchi<\/a>\n <a href=\"#calendari\">Calendari<\/a>\n <\/nav>\n <a href=\"#storia\" class=\"btn-main btn-gold\" style=\"padding: 10px 20px !important; font-size: 10px !important;\">Contatti<\/a>\n <\/header>\n\n\n \/* HERO *\/\n .review-hero {\n background: var(--dark);\n color: white;\n padding: 80px 5% 120px 5%;\n text-align: center;\n }\n\n \/* FILTRI *\/\n .filter-bar {\n max-width: 1200px;\n margin: -40px auto 40px auto;\n background: white;\n padding: 20px 40px;\n border-radius: 50px;\n box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n display: flex;\n justify-content: center;\n gap: 15px;\n position: relative;\n z-index: 20;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n padding: 10px 25px;\n border: 1px solid #eee;\n background: white;\n border-radius: 25px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .filter-btn.active, .filter-btn:hover {\n background: var(--bordeaux);\n color: white;\n border-color: var(--bordeaux);\n }\n\n \/* GRID ANIMATA *\/\n .reviews-container {\n max-width: 1200px;\n margin: 0 auto 100px auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 40px;\n }\n\n .review-card {\n background: white;\n border: 1px solid #f0f0f0;\n border-radius: 12px;\n overflow: hidden;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n animation: fadeIn 0.6s ease forwards;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .review-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n border-color: var(--gold);\n }\n\n .card-image {\n height: 220px;\n background-size: cover;\n background-position: center;\n position: relative;\n }\n\n .card-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: var(--bordeaux);\n color: white;\n padding: 4px 12px;\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 20px;\n }\n\n .card-body {\n padding: 30px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .card-meta {\n font-size: 10px;\n color: var(--gold);\n text-transform: uppercase;\n font-weight: 700;\n margin-bottom: 10px;\n letter-spacing: 1px;\n }\n\n .card-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: 1.8rem;\n line-height: 1.2;\n margin-bottom: 15px;\n color: var(--dark);\n }\n\n .card-excerpt {\n font-size: 14px;\n color: #666;\n margin-bottom: 25px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .btn-open {\n margin-top: auto;\n text-decoration: none;\n color: var(--bordeaux);\n font-weight: 700;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n \/* MODALE *\/\n .modal-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.8);\n backdrop-filter: blur(8px);\n z-index: 2000;\n display: none;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n\n .modal-content {\n background: white;\n max-width: 900px;\n width: 100%;\n max-height: 90vh;\n border-radius: 15px;\n overflow-y: auto;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .modal-header-img {\n width: 100%;\n height: 350px;\n background-size: cover;\n background-position: center;\n }\n\n .modal-body { padding: 50px; }\n\n .close-modal {\n position: absolute;\n top: 20px;\n right: 20px;\n background: white;\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n z-index: 10;\n }\n\n \/* FOOTER *\/\n .biblio-footer {\n background: var(--dark);\n padding: 60px 5%;\n text-align: center;\n color: white;\n }\n\n @media (max-width: 768px) {\n .modal-body { padding: 30px; }\n .modal-header-img { height: 250px; }\n .filter-bar { border-radius: 15px; padding: 15px; margin-top: -20px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"biblio-root\">\n \n \n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 15px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 8px; font-family: Montserrat, sans-serif; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(139,26,37,0.3);\">SC<\/div>\n <div style=\"line-height: 1.2; font-family: Montserrat, sans-serif;\">\n <div style=\"font-weight: 700; font-size: 16px; text-transform: uppercase; color: #1a1a1a; letter-spacing: 1px;\">Biblioteca<\/div>\n <div style=\"font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600;\">San Carlo<\/div>\n <\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#tessere\">Tessere<\/a>\n <a href=\"#eventi\">Eventi<\/a>\n <a href=\"#notizie\">Notizie<\/a>\n <a href=\"#scacchi\">Scacchi<\/a>\n <a href=\"#calendari\">Calendari<\/a>\n <\/nav>\n <a href=\"#storia\" class=\"btn-main btn-gold\" style=\"padding: 10px 20px !important; font-size: 10px !important;\">Contatti<\/a>\n <\/header>\n\n \n <section class=\"review-hero\">\n <span style=\"color: var(--gold); letter-spacing: 5px; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 15px;\">Il Piacere della Lettura<\/span>\n <h1 class=\"biblio-serif\" style=\"font-size: 3.5rem;\">Diario Critico<\/h1>\n <p style=\"color: rgba(255,255,255,0.6); max-width: 600px; margin: 20px auto 0 auto;\">Esplora l’archivio delle nostre analisi letterarie. Ogni mese un nuovo viaggio tra le pagine dei classici e delle novit\u00e0 contemporanee.<\/p>\n <\/section>\n\n \n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"filterReviews('all')\">Tutte<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2026')\">2026<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2025')\">2025<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('classici')\">Grandi Classici<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('contemporanei')\">Contemporanei<\/button>\n <\/div>\n\n \n <main class=\"reviews-container\" id=\"reviewsGrid\">\n \n <\/main>\n\n \n <div class=\"modal-overlay\" id=\"reviewModal\">\n <div class=\"modal-content\">\n <button class=\"close-modal\" onclick=\"closeModal()\">×<\/button>\n <div class=\"modal-header-img\" id=\"modalImg\"><\/div>\n <div class=\"modal-body\">\n <span id=\"modalDate\" style=\"color: var(--bordeaux); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;\"><\/span>\n <h2 id=\"modalTitle\" class=\"biblio-serif\" style=\"font-size: 3rem; margin: 15px 0; color: var(--dark);\"><\/h2>\n <p id=\"modalAuthor\" style=\"color: var(--gold); font-weight: 600; margin-bottom: 30px; font-size: 1.2rem;\"><\/p>\n <div id=\"modalFullText\" style=\"font-size: 1.1rem; line-height: 1.9; color: #444;\"><\/div>\n \n <div style=\"margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 20px;\">\n <div style=\"width: 50px; height: 50px; background: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;\">🖋️<\/div>\n <div>\n <p style=\"font-size: 13px; font-weight: 700;\">Circolo di Lettura San Carlo<\/p>\n <p style=\"font-size: 11px; color: #999;\">Analisi redatta collettivamente dai nostri soci.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <footer style=\"background:<!DOCTYPE html>\n<html lang=\"it\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Diario Critico – Biblioteca San Carlo<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;700&display=swap');\n\n :root {\n --bordeaux: #8b1a25;\n --gold: #d4af37;\n --cream: #f2ede4;\n --white: #ffffff;\n --dark: #111111;\n --text: #2d2d2d;\n --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n .biblio-root {\n all: initial;\n display: block;\n background-color: var(--white);\n font-family: 'Montserrat', sans-serif;\n color: var(--text);\n line-height: 1.6;\n }\n\n .biblio-root * { box-sizing: border-box !important; margin: 0; padding: 0; }\n .biblio-serif { font-family: 'Cormorant Garamond', serif !important; }\n\n \/* HEADER *\/\n .biblio-header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n padding: 15px 5%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n }\n\n .nav-links { display: flex; gap: 30px; }\n .nav-links a {\n text-decoration: none;\n color: var(--text);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n transition: 0.3s;\n }\n .nav-links a:hover { color: var(--bordeaux); }\n\n \/* HERO *\/\n .review-hero {\n background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https:\/\/images.unsplash.com\/photo-1507842217343-583bb7270b66?q=80&w=2000');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n color: white;\n padding: 120px 5% 160px 5%;\n text-align: center;\n }\n\n .hero-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: clamp(3rem, 8vw, 5rem);\n color: white !important; \/* Forza il bianco *\/\n text-shadow: 0 4px 10px rgba(0,0,0,0.3);\n margin-bottom: 10px;\n }\n\n \/* FILTRI *\/\n .filter-bar {\n max-width: 1000px;\n margin: -50px auto 60px auto;\n background: white;\n padding: 15px;\n border-radius: 12px;\n box-shadow: 0 20px 50px rgba(0,0,0,0.15);\n display: flex;\n justify-content: center;\n gap: 10px;\n position: relative;\n z-index: 20;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n padding: 12px 24px;\n border: 1px solid #eee;\n background: transparent;\n border-radius: 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .filter-btn.active {\n background: var(--bordeaux);\n color: white;\n border-color: var(--bordeaux);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(139,26,37,0.3);\n }\n\n \/* GRID *\/\n .reviews-container {\n max-width: 1200px;\n margin: 0 auto 80px auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 50px;\n }\n\n .review-card {\n background: white;\n border-radius: 4px;\n overflow: hidden;\n transition: var(--transition);\n opacity: 0;\n transform: translateY(30px);\n }\n\n .review-card.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .card-image-wrap {\n position: relative;\n height: 280px;\n overflow: hidden;\n background: var(--cream);\n }\n\n .card-image-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n .review-card:hover .card-image-wrap img {\n transform: scale(1.1);\n }\n\n .card-body {\n padding: 30px 0;\n }\n\n .card-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: 1.8rem;\n color: var(--dark);\n margin-bottom: 10px;\n }\n\n \/* BUTTON LEGGI ANALISI *\/\n .btn-fancy {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 28px;\n background: transparent;\n border: 1px solid var(--bordeaux);\n color: var(--bordeaux);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: var(--transition);\n z-index: 1;\n }\n\n .btn-fancy::before {\n content: '';\n position: absolute;\n top: 0; left: -100%; width: 100%; height: 100%;\n background: var(--bordeaux);\n transition: var(--transition);\n z-index: -1;\n }\n\n .btn-fancy:hover {\n color: white;\n }\n\n .btn-fancy:hover::before {\n left: 0;\n }\n\n .btn-fancy span.arrow {\n transition: transform 0.3s ease;\n }\n\n .btn-fancy:hover span.arrow {\n transform: translateX(5px);\n }\n\n \/* SEZIONE CONTATTI *\/\n .contact-section {\n background: var(--cream);\n padding: 100px 5%;\n text-align: center;\n }\n\n .contact-card {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n padding: 60px;\n border-radius: 2px;\n border: 1px solid rgba(139,26,37,0.1);\n position: relative;\n }\n\n .contact-card::after {\n content: '';\n position: absolute;\n top: 10px; left: 10px; right: 10px; bottom: 10px;\n border: 1px solid rgba(212,175,55,0.3);\n pointer-events: none;\n }\n\n \/* MODALE *\/\n .modal-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(17,17,17,0.95);\n backdrop-filter: blur(10px);\n z-index: 2000;\n display: none;\n justify-content: center;\n align-items: center;\n padding: 40px;\n }\n\n .modal-content {\n background: white;\n max-width: 1000px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n display: flex;\n }\n\n .modal-left { width: 40%; background: var(--dark); position: relative; min-height: 500px; }\n .modal-right { width: 60%; padding: 60px; }\n\n @media (max-width: 900px) {\n .modal-content { flex-direction: column; }\n .modal-left { width: 100%; height: 300px; min-height: auto; }\n .modal-right { width: 100%; padding: 40px 30px; }\n .filter-bar { width: 90%; }\n }\n\n .close-modal {\n position: fixed;\n top: 30px; right: 30px;\n background: transparent; border: none;\n color: white; font-size: 40px; cursor: pointer;\n z-index: 2100;\n }\n\n .biblio-footer {\n background: var(--dark);\n padding: 60px 5%;\n text-align: center;\n color: white;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"biblio-root\">\n \n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700;\">SC<\/div>\n <div style=\"font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;\">Biblioteca <span style=\"color: var(--gold);\">San Carlo<\/span><\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#\">Home<\/a>\n <a href=\"#\">Archivio<\/a>\n <a href=\"#\">Contatti<\/a>\n <\/nav>\n <\/header>\n\n <section class=\"review-hero\">\n <h1 class=\"hero-title\">Diario Critico<\/h1>\n <p style=\"color: rgba(255,255,255,0.8); font-size: 14px; text-transform: uppercase; letter-spacing: 3px;\">Riflessioni, Analisi, Scoperte Letterarie<\/p>\n <\/section>\n\n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"filterReviews('all')\">Tutte<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2026')\">2026<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2025')\">2025<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('classici')\">Grandi Classici<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('contemporanei')\">Contemporanei<\/button>\n <\/div>\n\n <main class=\"reviews-container\" id=\"reviewsGrid\">\n \n <\/main>\n\n <section class=\"contact-section\">\n <div class=\"contact-card\">\n <h3 class=\"biblio-serif\" style=\"font-size: 2.5rem; margin-bottom: 20px;\">Hai una recensione da proporre?<\/h3>\n <p style=\"color: #666; max-width: 500px; margin: 0 auto 30px auto;\">Il nostro Diario Critico vive grazie ai contributi della comunit\u00e0. Se desideri condividere la tua analisi di un libro, saremo lieti di leggerla.<\/p>\n <a href=\"mailto:info@bibliotecasancarlo.it\" class=\"btn-fancy\">\n Contattaci via Email <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <div style=\"margin-top: 40px; font-size: 11px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 2px;\">\n Ispirare attraverso le parole\n <\/div>\n <\/div>\n <\/section>\n\n <footer style=\"background: var(--dark); padding: 60px 5%; text-align: center;\">\n <div style=\"margin-bottom: 30px;\">\n <div style=\"font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold);\">Biblioteca Parrocchiale “San Carlo Borromeo”<\/div>\n <p style=\"color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-top: 5px !important;\">Biblioteca & Cultura<\/p>\n <\/div>\n <div style=\"height: 1px; background: rgba(255,255,255,0.1); max-width: 200px; margin: 0 auto 30px auto !important;\"><\/div>\n <p style=\"color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;\">\n \u00a9 2026 Biblioteca San Carlo Borromeo \u2014 In memoria di Don Franco Venneri\n <\/p>\n <\/footer>\n<\/div>\n\n\n \n <div class=\"modal-overlay\" id=\"reviewModal\">\n <button class=\"close-modal\" onclick=\"closeModal()\">×<\/button>\n <div class=\"modal-content\">\n <div class=\"modal-left\" id=\"modalImg\" style=\"background-size: cover; background-position: center;\"><\/div>\n <div class=\"modal-right\">\n <span id=\"modalDate\" style=\"color: var(--gold); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px;\"><\/span>\n <h2 id=\"modalTitle\" class=\"biblio-serif\" style=\"font-size: 2.8rem; margin: 10px 0; line-height: 1.1;\"><\/h2>\n <p id=\"modalAuthor\" style=\"font-weight: 500; font-style: italic; color: #888; margin-bottom: 30px;\"><\/p>\n <div id=\"modalFullText\" style=\"color: #444; font-size: 1.1rem; line-height: 1.8;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n const reviewsData = [\n {\n id: 1,\n year: '2026',\n category: 'classici',\n date: 'Maggio 2026',\n title: 'Il Gattopardo',\n author: 'Giuseppe Tomasi di Lampedusa',\n excerpt: 'Il crepuscolo dell\u2019aristocrazia siciliana in un capolavoro di stile e malinconia.',\n fullText: 'Il Gattopardo non \u00e8 solo un romanzo storico, \u00e8 un trattato sulla natura umana e sulla sua resistenza al cambiamento. Il Principe di Salina osserva il tramonto della sua classe sociale con una dignit\u00e0 intrisa di cinismo e saggezza.',\n image: 'https:\/\/images.unsplash.com\/photo-1544947950-fa07a98d237f?q=80&w=800'\n },\n {\n id: 2,\n year: '2026',\n category: 'contemporanei',\n date: 'Aprile 2026',\n title: 'Lessico Famigliare',\n author: 'Natalia Ginzburg',\n excerpt: 'La storia di una famiglia che diventa la storia di una nazione attraverso le parole.',\n fullText: 'Attraverso le espressioni ripetute e i tic verbali della famiglia Levi, Natalia Ginzburg ci restituisce il calore di una casa che resiste alla tempesta della storia e del fascismo.',\n image: 'https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?q=80&w=800'\n },\n {\n id: 3,\n year: '2026',\n category: 'classici',\n date: 'Marzo 2026',\n title: 'Il deserto dei Tartari',\n author: 'Dino Buzzati',\n excerpt: 'L\u2019eterna attesa del destino alla Fortezza Bastiani. Un\u2019opera metafisica senza tempo.',\n fullText: 'Giovanni Drogo aspetta un nemico che non arriva mai, mentre la vita gli scivola tra le dita. Un capolavoro che ci interroga sul senso profondo del tempo e della vocazione.',\n image: 'https:\/\/images.unsplash.com\/photo-1476275466078-4007374efbee?q=80&w=800'\n },\n {\n id: 4,\n year: '2025',\n category: 'classici',\n date: 'Dicembre 2025',\n title: 'La Divina Commedia',\n author: 'Dante Alighieri',\n excerpt: 'Rilettura speciale dell\u2019Inferno: la sete di conoscenza tra Ulisse e il Conte Ugolino.',\n fullText: 'Un viaggio oltre i confini del mondo conosciuto. Abbiamo riletto alcuni canti dell\u2019Inferno focalizzandoci sulla figura di Ulisse e sul desiderio di conoscenza che lo porta alla rovina.',\n image: 'https:\/\/images.unsplash.com\/photo-1577401239170-897942555fb3?q=80&w=800'\n },\n {\n id: 5,\n year: '2025',\n category: 'contemporanei',\n date: 'Novembre 2025',\n title: 'Sostiene Pereira',\n author: 'Antonio Tabucchi',\n excerpt: 'La nascita di una resistenza civile nel Portogallo degli anni Trenta.',\n fullText: 'Pereira \u00e8 un uomo stanco, dedito alla letteratura. L\u2019incontro con il giovane Rossi lo scuote dal suo torpore. Una trasformazione morale che diventa testimonianza civile.',\n image: 'https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800'\n }\n ];\n\n const grid = document.getElementById('reviewsGrid');\n const modal = document.getElementById('reviewModal');\n\n function displayReviews(filter = 'all') {\n \/\/ Nasconde prima tutte le card esistenti per pulizia\n const oldCards = grid.querySelectorAll('.review-card');\n oldCards.forEach(c => c.classList.remove('show'));\n\n setTimeout(() => {\n grid.innerHTML = '';\n const filtered = reviewsData.filter(item => {\n if (filter === 'all') return true;\n if (filter === 'classici' || filter === 'contemporanei') return item.category === filter;\n return item.year === filter;\n });\n\n filtered.forEach((rev, index) => {\n const card = document.createElement('article');\n card.className = 'review-card';\n card.innerHTML = `\n <div class=\"card-image-wrap\">\n <img decoding=\"async\" src=\"${rev.image}\" alt=\"${rev.title}\">\n <\/div>\n <div class=\"card-body\">\n <span style=\"font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 2px;\">${rev.date}<\/span>\n <h4 class=\"card-title\">${rev.title}<\/h4>\n <p style=\"font-size: 12px; color: #888; font-style: italic; margin-bottom: 20px;\">di ${rev.author}<\/p>\n <p style=\"font-size: 14px; color: #666; margin-bottom: 30px; line-height: 1.8;\">${rev.excerpt}<\/p>\n <button class=\"btn-fancy\" onclick=\"openReview(${rev.id})\">\n Leggi Analisi <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n `;\n grid.appendChild(card);\n \n \/\/ Animazione a cascata\n setTimeout(() => card.classList.add('show'), index * 100 + 50);\n });\n }, oldCards.length > 0 ? 300 : 0);\n }\n\n function filterReviews(category) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n if(btn.innerText.toLowerCase().includes(category.toLowerCase()) || (category === 'all' && btn.innerText === 'Tutte')) {\n btn.classList.add('active');\n }\n });\n displayReviews(category);\n }\n\n function openReview(id) {\n const rev = reviewsData.find(r => r.id === id);\n document.getElementById('modalImg').style.backgroundImage = `url('${rev.image}')`;\n document.getElementById('modalDate').innerText = rev.date;\n document.getElementById('modalTitle').innerText = rev.title;\n document.getElementById('modalAuthor').innerText = `Autore: ${rev.author}`;\n document.getElementById('modalFullText').innerHTML = rev.fullText;\n \n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }\n\n window.onclick = (e) => { if (e.target == modal) closeModal(); }\n\n window.onload = () => displayReviews();\n<\/script>\n\n<\/body>\n<\/html> var(–dark); padding: 60px 5%; text-align: center;”>\n <div style=\"margin-bottom: 30px;\">\n <div style=\"font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold);\">Biblioteca Parrocchiale “San Carlo Borromeo”<\/div>\n <p style=\"color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-top: 5px !important;\">Biblioteca & Cultura<\/p>\n <\/div>\n <div style=\"height: 1px; background: rgba(255,255,255,0.1); max-width: 200px; margin: 0 auto 30px auto !important;\"><\/div>\n <p style=\"color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;\">\n \u00a9 2026 Biblioteca San Carlo Borromeo \u2014 In memoria di Don Franco Venneri\n <\/p>\n <\/footer>\n<\/div>\n\n\n<script>\n \/\/ DATABASE RECENSIONI (Mock Data)\n const reviewsData = [\n {\n id: 1,\n year: '2026',\n category: 'classici',\n date: 'Maggio 2026',\n title: 'Il Gattopardo',\n author: 'Giuseppe Tomasi di Lampedusa',\n excerpt: 'Un\u2019opera che cattura il crepuscolo di un\u2019era. La nostra analisi esplora il concetto di tempo e la malinconia del cambiamento nella Sicilia del Risorgimento.',\n fullText: 'Il Gattopardo non \u00e8 solo un romanzo storico, \u00e8 un trattato sulla natura umana e sulla sua resistenza al cambiamento. Il Principe di Salina osserva il tramonto della sua classe sociale con una dignit\u00e0 intrisa di cinismo e saggezza. Abbiamo discusso lungamente sul significato della frase di Tancredi: \"Se vogliamo che tutto rimanga come \u00e8, bisogna che tutto cambi\", vedendovi non solo opportunismo politico, ma una tragica verit\u00e0 esistenziale.',\n image: 'https:\/\/images.unsplash.com\/photo-1544947950-fa07a98d237f?q=80&w=800',\n badge: 'Libro del Mese'\n },\n {\n id: 2,\n year: '2026',\n category: 'contemporanei',\n date: 'Aprile 2026',\n title: 'Lessico Famigliare',\n author: 'Natalia Ginzburg',\n excerpt: 'Una cronaca intima che diventa storia universale. Come i riti linguistici di una famiglia possono ricostruire il tessuto di un\u2019intera epoca.',\n fullText: 'Attraverso le espressioni ripetute e i tic verbali della famiglia Levi, Natalia Ginzburg ci restituisce il calore di una casa che resiste alla tempesta della storia. Il circolo ha apprezzato la capacit\u00e0 dell\u2019autrice di parlare di tragedie immani con una leggerezza apparente, quasi domestica, che rende l\u2019orrore del fascismo ancora pi\u00f9 tangibile per contrasto.',\n image: 'https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?q=80&w=800'\n },\n {\n id: 3,\n year: '2026',\n category: 'classici',\n date: 'Marzo 2026',\n title: 'Il deserto dei Tartari',\n author: 'Dino Buzzati',\n excerpt: 'L\u2019attesa come condizione dell\u2019anima. La vita di Giovanni Drogo alla Fortezza Bastiani ci interroga sul valore del tempo e della giovinezza.',\n fullText: 'Drogo aspetta un nemico che non arriva mai, mentre la vita gli scivola tra le dita. Durante il nostro incontro abbiamo riflettuto su quante \"Fortezze Bastiani\" costruiamo nelle nostre vite, sacrificando il presente per un futuro eroico che spesso \u00e8 solo un\u2019illusione. Un capolavoro di atmosfera e tensione metafisica.',\n image: 'https:\/\/images.unsplash.com\/photo-1476275466078-4007374efbee?q=80&w=800'\n },\n {\n id: 4,\n year: '2025',\n category: 'classici',\n date: 'Dicembre 2025',\n title: 'La Divina Commedia',\n author: 'Dante Alighieri',\n excerpt: 'Un viaggio oltre i confini del mondo conosciuto. Analisi speciale sulla simbologia dell\u2019Inferno nel settimo centenario.',\n fullText: 'Abbiamo riletto alcuni canti dell\u2019Inferno focalizzandoci sulla figura di Ulisse e sul desiderio di conoscenza che lo porta alla rovina. Una discussione accesa sul confine tra coraggio e \"folle volo\", ancora oggi attualissima nell\u2019era della tecnologia estrema.',\n image: 'https:\/\/images.unsplash.com\/photo-1577401239170-897942555fb3?q=80&w=800'\n },\n {\n id: 5,\n year: '2025',\n category: 'contemporanei',\n date: 'Novembre 2025',\n title: 'Sostiene Pereira',\n author: 'Antonio Tabucchi',\n excerpt: 'Il risveglio di una coscienza civile nel Portogallo di Salazar. Un omaggio al giornalismo libero e alla dignit\u00e0.',\n fullText: 'Pereira \u00e8 un uomo stanco, dedito alla letteratura e al ricordo della moglie defunta. L\u2019incontro con il giovane Rossi lo scuote dal suo torpore. Il circolo ha evidenziato come la trasformazione di Pereira avvenga quasi involontariamente, spinta da una necessit\u00e0 morale che non pu\u00f2 pi\u00f9 essere ignorata.',\n image: 'https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800'\n }\n ];\n\n const grid = document.getElementById('reviewsGrid');\n const modal = document.getElementById('reviewModal');\n\n \/\/ FUNZIONE PER MOSTRARE LE RECENSIONI\n function displayReviews(filter = 'all') {\n grid.innerHTML = '';\n \n const filtered = reviewsData.filter(item => {\n if (filter === 'all') return true;\n if (filter === 'classici' || filter === 'contemporanei') return item.category === filter;\n return item.year === filter;\n });\n\n filtered.forEach((rev, index) => {\n const card = document.createElement('article');\n card.className = 'review-card';\n card.style.animationDelay = `${index * 0.1}s`;\n \n card.innerHTML = `\n <div class=\"card-image\" style=\"background-image: url('${rev.image}')\">\n ${rev.badge ? `<span class=\"card-badge\">${rev.badge}<\/span>` : ''}\n <\/div>\n <div class=\"card-body\">\n <span class=\"card-meta\">${rev.date}<\/span>\n <h4 class=\"card-title\">${rev.title}<\/h4>\n <p style=\"font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 15px;\">${rev.author}<\/p>\n <p class=\"card-excerpt\">${rev.excerpt}<\/p>\n <button class=\"btn-open\" onclick=\"openReview(${rev.id})\">Leggi Analisi \u2192<\/button>\n <\/div>\n `;\n grid.appendChild(card);\n });\n }\n\n \/\/ GESTIONE FILTRI\n function filterReviews(category) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n if(btn.innerText.toLowerCase().includes(category.toLowerCase()) || (category === 'all' && btn.innerText === 'Tutte')) {\n btn.classList.add('active');\n }\n });\n displayReviews(category);\n }\n\n \/\/ GESTIONE MODALE\n function openReview(id) {\n const rev = reviewsData.find(r => r.id === id);\n document.getElementById('modalImg').style.backgroundImage = `url('${rev.image}')`;\n document.getElementById('modalDate').innerText = rev.date;\n document.getElementById('modalTitle').innerText = rev.title;\n document.getElementById('modalAuthor').innerText = rev.author;\n document.getElementById('modalFullText').innerHTML = rev.fullText;\n \n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden'; \/\/ Blocca scroll\n }\n\n function closeModal() {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }\n\n \/\/ Chiudi modale cliccando fuori\n window.onclick = function(event) {\n if (event.target == modal) closeModal();\n }\n\n \/\/ Inizializzazione\n window.onload = () => displayReviews();\n\n<\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Recensioni Mensili – Biblioteca San Carlo SC Biblioteca San Carlo Tessere Eventi Notizie Scacchi Calendari Contatti Il Piacere della Lettura Diario Critico Esplora l’archivio delle nostre analisi letterarie. Ogni mese <a class=\"mh-excerpt-more\" href=\"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/recensioni-mensili\/\" title=\"Recensioni Mensili\">[…]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/comments?post=3731"}],"version-history":[{"count":3,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731\/revisions"}],"predecessor-version":[{"id":3735,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731\/revisions\/3735"}],"wp:attachment":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/media?parent=3731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3731,"date":"2026-05-05T19:16:24","date_gmt":"2026-05-05T17:16:24","guid":{"rendered":"http:\/\/www.biblioteca-sancarloborromeo.it\/?page_id=3731"},"modified":"2026-05-05T19:33:41","modified_gmt":"2026-05-05T17:33:41","slug":"recensioni-mensili","status":"publish","type":"page","link":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/recensioni-mensili\/","title":{"rendered":"Recensioni Mensili"},"content":{"rendered":"\n\n\n\n \n \n Recensioni Mensili – Biblioteca San Carlo<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;700&display=swap');\n\n :root {\n --bordeaux: #8b1a25;\n --gold: #d4af37;\n --cream: #f2ede4;\n --white: #ffffff;\n --dark: #111111;\n --text: #2d2d2d;\n --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n\n .biblio-root {\n all: initial;\n display: block;\n background-color: var(--white);\n font-family: 'Montserrat', sans-serif;\n color: var(--text);\n line-height: 1.6;\n }\n\n .biblio-root * { box-sizing: border-box !important; margin: 0; padding: 0; }\n .biblio-serif { font-family: 'Cormorant Garamond', serif !important; }\n\n \/* HEADER *\/\n\n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 15px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 8px; font-family: Montserrat, sans-serif; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(139,26,37,0.3);\">SC<\/div>\n <div style=\"line-height: 1.2; font-family: Montserrat, sans-serif;\">\n <div style=\"font-weight: 700; font-size: 16px; text-transform: uppercase; color: #1a1a1a; letter-spacing: 1px;\">Biblioteca<\/div>\n <div style=\"font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600;\">San Carlo<\/div>\n <\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#tessere\">Tessere<\/a>\n <a href=\"#eventi\">Eventi<\/a>\n <a href=\"#notizie\">Notizie<\/a>\n <a href=\"#scacchi\">Scacchi<\/a>\n <a href=\"#calendari\">Calendari<\/a>\n <\/nav>\n <a href=\"#storia\" class=\"btn-main btn-gold\" style=\"padding: 10px 20px !important; font-size: 10px !important;\">Contatti<\/a>\n <\/header>\n\n\n \/* HERO *\/\n .review-hero {\n background: var(--dark);\n color: white;\n padding: 80px 5% 120px 5%;\n text-align: center;\n }\n\n \/* FILTRI *\/\n .filter-bar {\n max-width: 1200px;\n margin: -40px auto 40px auto;\n background: white;\n padding: 20px 40px;\n border-radius: 50px;\n box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n display: flex;\n justify-content: center;\n gap: 15px;\n position: relative;\n z-index: 20;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n padding: 10px 25px;\n border: 1px solid #eee;\n background: white;\n border-radius: 25px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .filter-btn.active, .filter-btn:hover {\n background: var(--bordeaux);\n color: white;\n border-color: var(--bordeaux);\n }\n\n \/* GRID ANIMATA *\/\n .reviews-container {\n max-width: 1200px;\n margin: 0 auto 100px auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 40px;\n }\n\n .review-card {\n background: white;\n border: 1px solid #f0f0f0;\n border-radius: 12px;\n overflow: hidden;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n animation: fadeIn 0.6s ease forwards;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .review-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n border-color: var(--gold);\n }\n\n .card-image {\n height: 220px;\n background-size: cover;\n background-position: center;\n position: relative;\n }\n\n .card-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: var(--bordeaux);\n color: white;\n padding: 4px 12px;\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 20px;\n }\n\n .card-body {\n padding: 30px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .card-meta {\n font-size: 10px;\n color: var(--gold);\n text-transform: uppercase;\n font-weight: 700;\n margin-bottom: 10px;\n letter-spacing: 1px;\n }\n\n .card-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: 1.8rem;\n line-height: 1.2;\n margin-bottom: 15px;\n color: var(--dark);\n }\n\n .card-excerpt {\n font-size: 14px;\n color: #666;\n margin-bottom: 25px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .btn-open {\n margin-top: auto;\n text-decoration: none;\n color: var(--bordeaux);\n font-weight: 700;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n \/* MODALE *\/\n .modal-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.8);\n backdrop-filter: blur(8px);\n z-index: 2000;\n display: none;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n\n .modal-content {\n background: white;\n max-width: 900px;\n width: 100%;\n max-height: 90vh;\n border-radius: 15px;\n overflow-y: auto;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .modal-header-img {\n width: 100%;\n height: 350px;\n background-size: cover;\n background-position: center;\n }\n\n .modal-body { padding: 50px; }\n\n .close-modal {\n position: absolute;\n top: 20px;\n right: 20px;\n background: white;\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n z-index: 10;\n }\n\n \/* FOOTER *\/\n .biblio-footer {\n background: var(--dark);\n padding: 60px 5%;\n text-align: center;\n color: white;\n }\n\n @media (max-width: 768px) {\n .modal-body { padding: 30px; }\n .modal-header-img { height: 250px; }\n .filter-bar { border-radius: 15px; padding: 15px; margin-top: -20px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"biblio-root\">\n \n \n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 15px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 8px; font-family: Montserrat, sans-serif; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(139,26,37,0.3);\">SC<\/div>\n <div style=\"line-height: 1.2; font-family: Montserrat, sans-serif;\">\n <div style=\"font-weight: 700; font-size: 16px; text-transform: uppercase; color: #1a1a1a; letter-spacing: 1px;\">Biblioteca<\/div>\n <div style=\"font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600;\">San Carlo<\/div>\n <\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#tessere\">Tessere<\/a>\n <a href=\"#eventi\">Eventi<\/a>\n <a href=\"#notizie\">Notizie<\/a>\n <a href=\"#scacchi\">Scacchi<\/a>\n <a href=\"#calendari\">Calendari<\/a>\n <\/nav>\n <a href=\"#storia\" class=\"btn-main btn-gold\" style=\"padding: 10px 20px !important; font-size: 10px !important;\">Contatti<\/a>\n <\/header>\n\n \n <section class=\"review-hero\">\n <span style=\"color: var(--gold); letter-spacing: 5px; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 15px;\">Il Piacere della Lettura<\/span>\n <h1 class=\"biblio-serif\" style=\"font-size: 3.5rem;\">Diario Critico<\/h1>\n <p style=\"color: rgba(255,255,255,0.6); max-width: 600px; margin: 20px auto 0 auto;\">Esplora l’archivio delle nostre analisi letterarie. Ogni mese un nuovo viaggio tra le pagine dei classici e delle novit\u00e0 contemporanee.<\/p>\n <\/section>\n\n \n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"filterReviews('all')\">Tutte<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2026')\">2026<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2025')\">2025<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('classici')\">Grandi Classici<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('contemporanei')\">Contemporanei<\/button>\n <\/div>\n\n \n <main class=\"reviews-container\" id=\"reviewsGrid\">\n \n <\/main>\n\n \n <div class=\"modal-overlay\" id=\"reviewModal\">\n <div class=\"modal-content\">\n <button class=\"close-modal\" onclick=\"closeModal()\">×<\/button>\n <div class=\"modal-header-img\" id=\"modalImg\"><\/div>\n <div class=\"modal-body\">\n <span id=\"modalDate\" style=\"color: var(--bordeaux); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;\"><\/span>\n <h2 id=\"modalTitle\" class=\"biblio-serif\" style=\"font-size: 3rem; margin: 15px 0; color: var(--dark);\"><\/h2>\n <p id=\"modalAuthor\" style=\"color: var(--gold); font-weight: 600; margin-bottom: 30px; font-size: 1.2rem;\"><\/p>\n <div id=\"modalFullText\" style=\"font-size: 1.1rem; line-height: 1.9; color: #444;\"><\/div>\n \n <div style=\"margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 20px;\">\n <div style=\"width: 50px; height: 50px; background: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;\">🖋️<\/div>\n <div>\n <p style=\"font-size: 13px; font-weight: 700;\">Circolo di Lettura San Carlo<\/p>\n <p style=\"font-size: 11px; color: #999;\">Analisi redatta collettivamente dai nostri soci.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <footer style=\"background:<!DOCTYPE html>\n<html lang=\"it\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Diario Critico – Biblioteca San Carlo<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;700&display=swap');\n\n :root {\n --bordeaux: #8b1a25;\n --gold: #d4af37;\n --cream: #f2ede4;\n --white: #ffffff;\n --dark: #111111;\n --text: #2d2d2d;\n --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n .biblio-root {\n all: initial;\n display: block;\n background-color: var(--white);\n font-family: 'Montserrat', sans-serif;\n color: var(--text);\n line-height: 1.6;\n }\n\n .biblio-root * { box-sizing: border-box !important; margin: 0; padding: 0; }\n .biblio-serif { font-family: 'Cormorant Garamond', serif !important; }\n\n \/* HEADER *\/\n .biblio-header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n padding: 15px 5%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n }\n\n .nav-links { display: flex; gap: 30px; }\n .nav-links a {\n text-decoration: none;\n color: var(--text);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n transition: 0.3s;\n }\n .nav-links a:hover { color: var(--bordeaux); }\n\n \/* HERO *\/\n .review-hero {\n background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https:\/\/images.unsplash.com\/photo-1507842217343-583bb7270b66?q=80&w=2000');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n color: white;\n padding: 120px 5% 160px 5%;\n text-align: center;\n }\n\n .hero-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: clamp(3rem, 8vw, 5rem);\n color: white !important; \/* Forza il bianco *\/\n text-shadow: 0 4px 10px rgba(0,0,0,0.3);\n margin-bottom: 10px;\n }\n\n \/* FILTRI *\/\n .filter-bar {\n max-width: 1000px;\n margin: -50px auto 60px auto;\n background: white;\n padding: 15px;\n border-radius: 12px;\n box-shadow: 0 20px 50px rgba(0,0,0,0.15);\n display: flex;\n justify-content: center;\n gap: 10px;\n position: relative;\n z-index: 20;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n padding: 12px 24px;\n border: 1px solid #eee;\n background: transparent;\n border-radius: 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .filter-btn.active {\n background: var(--bordeaux);\n color: white;\n border-color: var(--bordeaux);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(139,26,37,0.3);\n }\n\n \/* GRID *\/\n .reviews-container {\n max-width: 1200px;\n margin: 0 auto 80px auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 50px;\n }\n\n .review-card {\n background: white;\n border-radius: 4px;\n overflow: hidden;\n transition: var(--transition);\n opacity: 0;\n transform: translateY(30px);\n }\n\n .review-card.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .card-image-wrap {\n position: relative;\n height: 280px;\n overflow: hidden;\n background: var(--cream);\n }\n\n .card-image-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n .review-card:hover .card-image-wrap img {\n transform: scale(1.1);\n }\n\n .card-body {\n padding: 30px 0;\n }\n\n .card-title {\n font-family: 'Cormorant Garamond', serif !important;\n font-size: 1.8rem;\n color: var(--dark);\n margin-bottom: 10px;\n }\n\n \/* BUTTON LEGGI ANALISI *\/\n .btn-fancy {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 28px;\n background: transparent;\n border: 1px solid var(--bordeaux);\n color: var(--bordeaux);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: var(--transition);\n z-index: 1;\n }\n\n .btn-fancy::before {\n content: '';\n position: absolute;\n top: 0; left: -100%; width: 100%; height: 100%;\n background: var(--bordeaux);\n transition: var(--transition);\n z-index: -1;\n }\n\n .btn-fancy:hover {\n color: white;\n }\n\n .btn-fancy:hover::before {\n left: 0;\n }\n\n .btn-fancy span.arrow {\n transition: transform 0.3s ease;\n }\n\n .btn-fancy:hover span.arrow {\n transform: translateX(5px);\n }\n\n \/* SEZIONE CONTATTI *\/\n .contact-section {\n background: var(--cream);\n padding: 100px 5%;\n text-align: center;\n }\n\n .contact-card {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n padding: 60px;\n border-radius: 2px;\n border: 1px solid rgba(139,26,37,0.1);\n position: relative;\n }\n\n .contact-card::after {\n content: '';\n position: absolute;\n top: 10px; left: 10px; right: 10px; bottom: 10px;\n border: 1px solid rgba(212,175,55,0.3);\n pointer-events: none;\n }\n\n \/* MODALE *\/\n .modal-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(17,17,17,0.95);\n backdrop-filter: blur(10px);\n z-index: 2000;\n display: none;\n justify-content: center;\n align-items: center;\n padding: 40px;\n }\n\n .modal-content {\n background: white;\n max-width: 1000px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n display: flex;\n }\n\n .modal-left { width: 40%; background: var(--dark); position: relative; min-height: 500px; }\n .modal-right { width: 60%; padding: 60px; }\n\n @media (max-width: 900px) {\n .modal-content { flex-direction: column; }\n .modal-left { width: 100%; height: 300px; min-height: auto; }\n .modal-right { width: 100%; padding: 40px 30px; }\n .filter-bar { width: 90%; }\n }\n\n .close-modal {\n position: fixed;\n top: 30px; right: 30px;\n background: transparent; border: none;\n color: white; font-size: 40px; cursor: pointer;\n z-index: 2100;\n }\n\n .biblio-footer {\n background: var(--dark);\n padding: 60px 5%;\n text-align: center;\n color: white;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"biblio-root\">\n \n <header class=\"biblio-header\">\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"background: var(--bordeaux); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700;\">SC<\/div>\n <div style=\"font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;\">Biblioteca <span style=\"color: var(--gold);\">San Carlo<\/span><\/div>\n <\/div>\n <nav class=\"nav-links\">\n <a href=\"#\">Home<\/a>\n <a href=\"#\">Archivio<\/a>\n <a href=\"#\">Contatti<\/a>\n <\/nav>\n <\/header>\n\n <section class=\"review-hero\">\n <h1 class=\"hero-title\">Diario Critico<\/h1>\n <p style=\"color: rgba(255,255,255,0.8); font-size: 14px; text-transform: uppercase; letter-spacing: 3px;\">Riflessioni, Analisi, Scoperte Letterarie<\/p>\n <\/section>\n\n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"filterReviews('all')\">Tutte<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2026')\">2026<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('2025')\">2025<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('classici')\">Grandi Classici<\/button>\n <button class=\"filter-btn\" onclick=\"filterReviews('contemporanei')\">Contemporanei<\/button>\n <\/div>\n\n <main class=\"reviews-container\" id=\"reviewsGrid\">\n \n <\/main>\n\n <section class=\"contact-section\">\n <div class=\"contact-card\">\n <h3 class=\"biblio-serif\" style=\"font-size: 2.5rem; margin-bottom: 20px;\">Hai una recensione da proporre?<\/h3>\n <p style=\"color: #666; max-width: 500px; margin: 0 auto 30px auto;\">Il nostro Diario Critico vive grazie ai contributi della comunit\u00e0. Se desideri condividere la tua analisi di un libro, saremo lieti di leggerla.<\/p>\n <a href=\"mailto:info@bibliotecasancarlo.it\" class=\"btn-fancy\">\n Contattaci via Email <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <div style=\"margin-top: 40px; font-size: 11px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 2px;\">\n Ispirare attraverso le parole\n <\/div>\n <\/div>\n <\/section>\n\n <footer style=\"background: var(--dark); padding: 60px 5%; text-align: center;\">\n <div style=\"margin-bottom: 30px;\">\n <div style=\"font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold);\">Biblioteca Parrocchiale “San Carlo Borromeo”<\/div>\n <p style=\"color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-top: 5px !important;\">Biblioteca & Cultura<\/p>\n <\/div>\n <div style=\"height: 1px; background: rgba(255,255,255,0.1); max-width: 200px; margin: 0 auto 30px auto !important;\"><\/div>\n <p style=\"color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;\">\n \u00a9 2026 Biblioteca San Carlo Borromeo \u2014 In memoria di Don Franco Venneri\n <\/p>\n <\/footer>\n<\/div>\n\n\n \n <div class=\"modal-overlay\" id=\"reviewModal\">\n <button class=\"close-modal\" onclick=\"closeModal()\">×<\/button>\n <div class=\"modal-content\">\n <div class=\"modal-left\" id=\"modalImg\" style=\"background-size: cover; background-position: center;\"><\/div>\n <div class=\"modal-right\">\n <span id=\"modalDate\" style=\"color: var(--gold); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px;\"><\/span>\n <h2 id=\"modalTitle\" class=\"biblio-serif\" style=\"font-size: 2.8rem; margin: 10px 0; line-height: 1.1;\"><\/h2>\n <p id=\"modalAuthor\" style=\"font-weight: 500; font-style: italic; color: #888; margin-bottom: 30px;\"><\/p>\n <div id=\"modalFullText\" style=\"color: #444; font-size: 1.1rem; line-height: 1.8;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n const reviewsData = [\n {\n id: 1,\n year: '2026',\n category: 'classici',\n date: 'Maggio 2026',\n title: 'Il Gattopardo',\n author: 'Giuseppe Tomasi di Lampedusa',\n excerpt: 'Il crepuscolo dell\u2019aristocrazia siciliana in un capolavoro di stile e malinconia.',\n fullText: 'Il Gattopardo non \u00e8 solo un romanzo storico, \u00e8 un trattato sulla natura umana e sulla sua resistenza al cambiamento. Il Principe di Salina osserva il tramonto della sua classe sociale con una dignit\u00e0 intrisa di cinismo e saggezza.',\n image: 'https:\/\/images.unsplash.com\/photo-1544947950-fa07a98d237f?q=80&w=800'\n },\n {\n id: 2,\n year: '2026',\n category: 'contemporanei',\n date: 'Aprile 2026',\n title: 'Lessico Famigliare',\n author: 'Natalia Ginzburg',\n excerpt: 'La storia di una famiglia che diventa la storia di una nazione attraverso le parole.',\n fullText: 'Attraverso le espressioni ripetute e i tic verbali della famiglia Levi, Natalia Ginzburg ci restituisce il calore di una casa che resiste alla tempesta della storia e del fascismo.',\n image: 'https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?q=80&w=800'\n },\n {\n id: 3,\n year: '2026',\n category: 'classici',\n date: 'Marzo 2026',\n title: 'Il deserto dei Tartari',\n author: 'Dino Buzzati',\n excerpt: 'L\u2019eterna attesa del destino alla Fortezza Bastiani. Un\u2019opera metafisica senza tempo.',\n fullText: 'Giovanni Drogo aspetta un nemico che non arriva mai, mentre la vita gli scivola tra le dita. Un capolavoro che ci interroga sul senso profondo del tempo e della vocazione.',\n image: 'https:\/\/images.unsplash.com\/photo-1476275466078-4007374efbee?q=80&w=800'\n },\n {\n id: 4,\n year: '2025',\n category: 'classici',\n date: 'Dicembre 2025',\n title: 'La Divina Commedia',\n author: 'Dante Alighieri',\n excerpt: 'Rilettura speciale dell\u2019Inferno: la sete di conoscenza tra Ulisse e il Conte Ugolino.',\n fullText: 'Un viaggio oltre i confini del mondo conosciuto. Abbiamo riletto alcuni canti dell\u2019Inferno focalizzandoci sulla figura di Ulisse e sul desiderio di conoscenza che lo porta alla rovina.',\n image: 'https:\/\/images.unsplash.com\/photo-1577401239170-897942555fb3?q=80&w=800'\n },\n {\n id: 5,\n year: '2025',\n category: 'contemporanei',\n date: 'Novembre 2025',\n title: 'Sostiene Pereira',\n author: 'Antonio Tabucchi',\n excerpt: 'La nascita di una resistenza civile nel Portogallo degli anni Trenta.',\n fullText: 'Pereira \u00e8 un uomo stanco, dedito alla letteratura. L\u2019incontro con il giovane Rossi lo scuote dal suo torpore. Una trasformazione morale che diventa testimonianza civile.',\n image: 'https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800'\n }\n ];\n\n const grid = document.getElementById('reviewsGrid');\n const modal = document.getElementById('reviewModal');\n\n function displayReviews(filter = 'all') {\n \/\/ Nasconde prima tutte le card esistenti per pulizia\n const oldCards = grid.querySelectorAll('.review-card');\n oldCards.forEach(c => c.classList.remove('show'));\n\n setTimeout(() => {\n grid.innerHTML = '';\n const filtered = reviewsData.filter(item => {\n if (filter === 'all') return true;\n if (filter === 'classici' || filter === 'contemporanei') return item.category === filter;\n return item.year === filter;\n });\n\n filtered.forEach((rev, index) => {\n const card = document.createElement('article');\n card.className = 'review-card';\n card.innerHTML = `\n <div class=\"card-image-wrap\">\n <img decoding=\"async\" src=\"${rev.image}\" alt=\"${rev.title}\">\n <\/div>\n <div class=\"card-body\">\n <span style=\"font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 2px;\">${rev.date}<\/span>\n <h4 class=\"card-title\">${rev.title}<\/h4>\n <p style=\"font-size: 12px; color: #888; font-style: italic; margin-bottom: 20px;\">di ${rev.author}<\/p>\n <p style=\"font-size: 14px; color: #666; margin-bottom: 30px; line-height: 1.8;\">${rev.excerpt}<\/p>\n <button class=\"btn-fancy\" onclick=\"openReview(${rev.id})\">\n Leggi Analisi <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n `;\n grid.appendChild(card);\n \n \/\/ Animazione a cascata\n setTimeout(() => card.classList.add('show'), index * 100 + 50);\n });\n }, oldCards.length > 0 ? 300 : 0);\n }\n\n function filterReviews(category) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n if(btn.innerText.toLowerCase().includes(category.toLowerCase()) || (category === 'all' && btn.innerText === 'Tutte')) {\n btn.classList.add('active');\n }\n });\n displayReviews(category);\n }\n\n function openReview(id) {\n const rev = reviewsData.find(r => r.id === id);\n document.getElementById('modalImg').style.backgroundImage = `url('${rev.image}')`;\n document.getElementById('modalDate').innerText = rev.date;\n document.getElementById('modalTitle').innerText = rev.title;\n document.getElementById('modalAuthor').innerText = `Autore: ${rev.author}`;\n document.getElementById('modalFullText').innerHTML = rev.fullText;\n \n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }\n\n window.onclick = (e) => { if (e.target == modal) closeModal(); }\n\n window.onload = () => displayReviews();\n<\/script>\n\n<\/body>\n<\/html> var(–dark); padding: 60px 5%; text-align: center;”>\n <div style=\"margin-bottom: 30px;\">\n <div style=\"font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold);\">Biblioteca Parrocchiale “San Carlo Borromeo”<\/div>\n <p style=\"color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-top: 5px !important;\">Biblioteca & Cultura<\/p>\n <\/div>\n <div style=\"height: 1px; background: rgba(255,255,255,0.1); max-width: 200px; margin: 0 auto 30px auto !important;\"><\/div>\n <p style=\"color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px;\">\n \u00a9 2026 Biblioteca San Carlo Borromeo \u2014 In memoria di Don Franco Venneri\n <\/p>\n <\/footer>\n<\/div>\n\n\n<script>\n \/\/ DATABASE RECENSIONI (Mock Data)\n const reviewsData = [\n {\n id: 1,\n year: '2026',\n category: 'classici',\n date: 'Maggio 2026',\n title: 'Il Gattopardo',\n author: 'Giuseppe Tomasi di Lampedusa',\n excerpt: 'Un\u2019opera che cattura il crepuscolo di un\u2019era. La nostra analisi esplora il concetto di tempo e la malinconia del cambiamento nella Sicilia del Risorgimento.',\n fullText: 'Il Gattopardo non \u00e8 solo un romanzo storico, \u00e8 un trattato sulla natura umana e sulla sua resistenza al cambiamento. Il Principe di Salina osserva il tramonto della sua classe sociale con una dignit\u00e0 intrisa di cinismo e saggezza. Abbiamo discusso lungamente sul significato della frase di Tancredi: \"Se vogliamo che tutto rimanga come \u00e8, bisogna che tutto cambi\", vedendovi non solo opportunismo politico, ma una tragica verit\u00e0 esistenziale.',\n image: 'https:\/\/images.unsplash.com\/photo-1544947950-fa07a98d237f?q=80&w=800',\n badge: 'Libro del Mese'\n },\n {\n id: 2,\n year: '2026',\n category: 'contemporanei',\n date: 'Aprile 2026',\n title: 'Lessico Famigliare',\n author: 'Natalia Ginzburg',\n excerpt: 'Una cronaca intima che diventa storia universale. Come i riti linguistici di una famiglia possono ricostruire il tessuto di un\u2019intera epoca.',\n fullText: 'Attraverso le espressioni ripetute e i tic verbali della famiglia Levi, Natalia Ginzburg ci restituisce il calore di una casa che resiste alla tempesta della storia. Il circolo ha apprezzato la capacit\u00e0 dell\u2019autrice di parlare di tragedie immani con una leggerezza apparente, quasi domestica, che rende l\u2019orrore del fascismo ancora pi\u00f9 tangibile per contrasto.',\n image: 'https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?q=80&w=800'\n },\n {\n id: 3,\n year: '2026',\n category: 'classici',\n date: 'Marzo 2026',\n title: 'Il deserto dei Tartari',\n author: 'Dino Buzzati',\n excerpt: 'L\u2019attesa come condizione dell\u2019anima. La vita di Giovanni Drogo alla Fortezza Bastiani ci interroga sul valore del tempo e della giovinezza.',\n fullText: 'Drogo aspetta un nemico che non arriva mai, mentre la vita gli scivola tra le dita. Durante il nostro incontro abbiamo riflettuto su quante \"Fortezze Bastiani\" costruiamo nelle nostre vite, sacrificando il presente per un futuro eroico che spesso \u00e8 solo un\u2019illusione. Un capolavoro di atmosfera e tensione metafisica.',\n image: 'https:\/\/images.unsplash.com\/photo-1476275466078-4007374efbee?q=80&w=800'\n },\n {\n id: 4,\n year: '2025',\n category: 'classici',\n date: 'Dicembre 2025',\n title: 'La Divina Commedia',\n author: 'Dante Alighieri',\n excerpt: 'Un viaggio oltre i confini del mondo conosciuto. Analisi speciale sulla simbologia dell\u2019Inferno nel settimo centenario.',\n fullText: 'Abbiamo riletto alcuni canti dell\u2019Inferno focalizzandoci sulla figura di Ulisse e sul desiderio di conoscenza che lo porta alla rovina. Una discussione accesa sul confine tra coraggio e \"folle volo\", ancora oggi attualissima nell\u2019era della tecnologia estrema.',\n image: 'https:\/\/images.unsplash.com\/photo-1577401239170-897942555fb3?q=80&w=800'\n },\n {\n id: 5,\n year: '2025',\n category: 'contemporanei',\n date: 'Novembre 2025',\n title: 'Sostiene Pereira',\n author: 'Antonio Tabucchi',\n excerpt: 'Il risveglio di una coscienza civile nel Portogallo di Salazar. Un omaggio al giornalismo libero e alla dignit\u00e0.',\n fullText: 'Pereira \u00e8 un uomo stanco, dedito alla letteratura e al ricordo della moglie defunta. L\u2019incontro con il giovane Rossi lo scuote dal suo torpore. Il circolo ha evidenziato come la trasformazione di Pereira avvenga quasi involontariamente, spinta da una necessit\u00e0 morale che non pu\u00f2 pi\u00f9 essere ignorata.',\n image: 'https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800'\n }\n ];\n\n const grid = document.getElementById('reviewsGrid');\n const modal = document.getElementById('reviewModal');\n\n \/\/ FUNZIONE PER MOSTRARE LE RECENSIONI\n function displayReviews(filter = 'all') {\n grid.innerHTML = '';\n \n const filtered = reviewsData.filter(item => {\n if (filter === 'all') return true;\n if (filter === 'classici' || filter === 'contemporanei') return item.category === filter;\n return item.year === filter;\n });\n\n filtered.forEach((rev, index) => {\n const card = document.createElement('article');\n card.className = 'review-card';\n card.style.animationDelay = `${index * 0.1}s`;\n \n card.innerHTML = `\n <div class=\"card-image\" style=\"background-image: url('${rev.image}')\">\n ${rev.badge ? `<span class=\"card-badge\">${rev.badge}<\/span>` : ''}\n <\/div>\n <div class=\"card-body\">\n <span class=\"card-meta\">${rev.date}<\/span>\n <h4 class=\"card-title\">${rev.title}<\/h4>\n <p style=\"font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 15px;\">${rev.author}<\/p>\n <p class=\"card-excerpt\">${rev.excerpt}<\/p>\n <button class=\"btn-open\" onclick=\"openReview(${rev.id})\">Leggi Analisi \u2192<\/button>\n <\/div>\n `;\n grid.appendChild(card);\n });\n }\n\n \/\/ GESTIONE FILTRI\n function filterReviews(category) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n if(btn.innerText.toLowerCase().includes(category.toLowerCase()) || (category === 'all' && btn.innerText === 'Tutte')) {\n btn.classList.add('active');\n }\n });\n displayReviews(category);\n }\n\n \/\/ GESTIONE MODALE\n function openReview(id) {\n const rev = reviewsData.find(r => r.id === id);\n document.getElementById('modalImg').style.backgroundImage = `url('${rev.image}')`;\n document.getElementById('modalDate').innerText = rev.date;\n document.getElementById('modalTitle').innerText = rev.title;\n document.getElementById('modalAuthor').innerText = rev.author;\n document.getElementById('modalFullText').innerHTML = rev.fullText;\n \n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden'; \/\/ Blocca scroll\n }\n\n function closeModal() {\n modal.style.display = 'none';\n document.body.style.overflow = 'auto';\n }\n\n \/\/ Chiudi modale cliccando fuori\n window.onclick = function(event) {\n if (event.target == modal) closeModal();\n }\n\n \/\/ Inizializzazione\n window.onload = () => displayReviews();\n\n<\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Recensioni Mensili – Biblioteca San Carlo SC Biblioteca San Carlo Tessere Eventi Notizie Scacchi Calendari Contatti Il Piacere della Lettura Diario Critico Esplora l’archivio delle nostre analisi letterarie. Ogni mese <a class=\"mh-excerpt-more\" href=\"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/recensioni-mensili\/\" title=\"Recensioni Mensili\">[…]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/comments?post=3731"}],"version-history":[{"count":3,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731\/revisions"}],"predecessor-version":[{"id":3735,"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/pages\/3731\/revisions\/3735"}],"wp:attachment":[{"href":"http:\/\/www.biblioteca-sancarloborromeo.it\/index.php\/wp-json\/wp\/v2\/media?parent=3731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}