{"id":914,"date":"2025-10-12T11:54:26","date_gmt":"2025-10-12T09:54:26","guid":{"rendered":"https:\/\/www.finanzaintasca.it\/?page_id=914"},"modified":"2026-02-16T18:28:04","modified_gmt":"2026-02-16T17:28:04","slug":"formazione","status":"publish","type":"page","link":"https:\/\/www.finanzaintasca.it\/en\/formazione\/","title":{"rendered":"Education"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull fit-solid-threshold has-custom-color-1-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<section id=\"fit-formation-static\" aria-labelledby=\"fit-formation-title\">\n  <style>\n    \/* Font Akshar *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Akshar:wght@400;700&display=swap');\n\n    \/* ====== SEZIONE FORMATION (STATICA) ====== *\/\n    #fit-formation-static{\n      --yellow: #fed700;\n      --maxw: 1100px;\n      --pad-x: clamp(16px, 4vw, 32px);\n      --gap-y: clamp(10px, 3.5vw, 24px);\n      color:#fff;\n      background:transparent;\n      text-align:center;\n      padding: 0;\n      margin: 0;\n    }\n\n    #fit-formation-static .fit-title{\n      font-family:'Akshar', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n      font-weight:700;                 \/* grassetto 700 *\/\n      text-transform:uppercase;        \/* maiuscolo *\/\n      letter-spacing:.06em;\n      line-height:1;\n      color: var(--yellow);            \/* sempre giallo *\/\n      margin:0;\n      font-size: clamp(40px, 9vw, 120px);\n    }\n\n    \/* >1100px: rendi il titolo pi\u00f9 piccolo *\/\n    @media (min-width:1100px){\n      #fit-formation-static .fit-title{\n        font-size: 72px;               \/* pi\u00f9 piccolo rispetto al valore calcolato *\/\n      }\n    }\n\n    #fit-formation-static .fit-desc{\n      font-family:'Akshar', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n      font-weight:400;                 \/* testo normale *\/\n      color:#fff;\n      opacity:.95;\n      line-height:1.45;\n      margin: var(--gap-y) auto 0;\n      font-size: clamp(14px, 2.1vw, 21px);\n      max-width: var(--maxw);\n      padding-inline: var(--pad-x);\n    }\n  <\/style>\n\n  <h2 id=\"fit-formation-title\" class=\"fit-title\">FORMAZIONE<\/h2>\n\n  <p class=\"fit-desc\">\n    Una libreria in continuo aggiornamento dedicata all\u2019educazione finanziaria:\n    <strong>guide brevi, spiegazioni semplici e focus tematici<\/strong>.\n    La sezione \u00e8 strutturata in <strong>Base, Intermedio, Avanzato<\/strong>, per imparare con gradualit\u00e0 e al proprio ritmo.\n  <\/p>\n<\/section>\n\n\n\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<!-- =========================================================\n  FIT | Slider Livelli (Base \/ Intermedio \/ Avanzato) + Grid Cards (WordPress REST)\n  - TUTTI i post per categoria (paginated)\n  - Ordine: pi\u00f9 vecchio \u2192 pi\u00f9 recente (ASC)\n  - Selezione iniziale dalla URL: ?level=base|intermedio|avanzato oppure #base|#intermedio|#avanzato\n  - FIX: excerpt max 2 righe (senza \u201cmezzo terzo rigo\u201d) + excerpt NON sottolineato\n========================================================= -->\n\n<section id=\"fit-levels\"\n  aria-label=\"Livelli Formazione\"\n  data-cat-base=\"base\"\n  data-cat-intermedio=\"intermedio\"\n  data-cat-avanzato=\"avanzato\">\n  <div class=\"fitl-container\">\n    <!-- Segmented Switch -->\n    <div class=\"fitl-switch\" role=\"tablist\" aria-label=\"Seleziona livello\" style=\"--i:0\">\n      <button class=\"fitl-tab is-active\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel-base\" id=\"tab-base\" data-index=\"0\">Base<\/button>\n      <button class=\"fitl-tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel-intermedio\" id=\"tab-intermedio\" data-index=\"1\">Intermedio<\/button>\n      <button class=\"fitl-tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel-avanzato\" id=\"tab-avanzato\" data-index=\"2\">Avanzato<\/button>\n      <span class=\"fitl-indicator\" aria-hidden=\"true\"><\/span>\n    <\/div>\n\n    <!-- PANELS -->\n    <div class=\"fitl-panels\">\n      <section class=\"fitl-panel\" role=\"tabpanel\" id=\"panel-base\" aria-labelledby=\"tab-base\">\n        <ul class=\"fitl-grid\" data-target=\"base\">\n          <li class=\"fitl-loading\">Caricamento articoli\u2026<\/li>\n        <\/ul>\n      <\/section>\n\n      <section class=\"fitl-panel\" role=\"tabpanel\" id=\"panel-intermedio\" aria-labelledby=\"tab-intermedio\" hidden>\n        <ul class=\"fitl-grid\" data-target=\"intermedio\">\n          <li class=\"fitl-loading\">Caricamento articoli\u2026<\/li>\n        <\/ul>\n      <\/section>\n\n      <section class=\"fitl-panel\" role=\"tabpanel\" id=\"panel-avanzato\" aria-labelledby=\"tab-avanzato\" hidden>\n        <ul class=\"fitl-grid\" data-target=\"avanzato\">\n          <li class=\"fitl-loading\">Caricamento articoli\u2026<\/li>\n        <\/ul>\n      <\/section>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Akshar:wght@400;700;800&display=swap');\n\n#fit-levels{\n  --yellow:#fed700;\n  --fg:#fff;\n  --bg:#0b0b0b;\n  --switch-height: 46px;\n  --switch-pad: 6px;\n  --switch-radius: 999px;\n  --card-radius: 18px;\n  --card-gap: clamp(14px, 2.8vw, 24px);\n  --container-pad: clamp(16px, 4vw, 28px);\n  color: var(--fg);\n  font-family:'Akshar', system-ui, sans-serif;\n}\n#fit-levels .fitl-container{\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 var(--container-pad) clamp(20px, 5vw, 40px);\n}\n\n\/* SWITCH tipo PayPal *\/\n.fitl-switch{\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  height: var(--switch-height);\n  background: #141414;\n  border-radius: var(--switch-radius);\n  padding: var(--switch-pad);\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);\n  margin: 0 auto clamp(18px, 4vw, 28px);\n}\n.fitl-tab{\n  position: relative;\n  z-index: 1;\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: #dcdcdc;\n  font: 700 15px\/1 'Akshar', system-ui, sans-serif;\n  border-radius: calc(var(--switch-radius) - var(--switch-pad));\n  cursor: pointer;\n  transition: color .15s ease;\n  outline: none;\n}\n.fitl-tab.is-active{ color: #141414; }\n.fitl-tab:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 2px; }\n.fitl-indicator{\n  position: absolute;\n  inset: var(--switch-pad);\n  width: calc((100% - var(--switch-pad)*2) \/ 3);\n  border-radius: calc(var(--switch-radius) - var(--switch-pad));\n  background: var(--yellow);\n  transform: translateX(calc(var(--i) * 100%));\n  transition: transform .25s ease;\n  z-index: 0;\n}\n\n\/* PANELS *\/\n.fitl-panels{ width: 100%; }\n.fitl-panel[hidden]{ display: none !important; }\n\n\/* GRID CARDS *\/\n.fitl-grid{\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--card-gap);\n}\n@media (max-width: 1100px){ .fitl-grid{ grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 640px){ .fitl-grid{ grid-template-columns: 1fr; } }\n\n.fitl-card{\n  background: #111;\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: var(--card-radius);\n  overflow: clip;\n  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;\n}\n.fitl-card:hover{\n  transform: translateY(-3px);\n  border-color: rgba(254,215,0,.55);\n  box-shadow: 0 10px 22px rgba(0,0,0,.35);\n}\n\n\/* Link che avvolge tutta la card: NO underline (tema-proof) *\/\n.fitl-card__link{\n  color: inherit;\n  text-decoration: none !important;\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n}\n.fitl-card__link:hover,\n.fitl-card__link:focus,\n.fitl-card__link:active{\n  text-decoration: none !important;\n}\n\n\/* Media \u2013 16:9 *\/\n.fitl-card__media{ aspect-ratio: 16\/9; background: #0f0f0f; margin:0; }\n.fitl-card__media img{ width:100%; height:100%; object-fit: cover; display:block; }\n\n\/* Body *\/\n.fitl-card__body{ padding: clamp(12px, 2.2vw, 18px); display:grid; gap: 6px; }\n\n\/* Titolo: sottolineato *\/\n.fitl-card__title{\n  font: 700 clamp(16px, 2.1vw, 20px)\/1.15 'Akshar', system-ui, sans-serif;\n  margin: 0;\n  color: #fff;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n\/* \u2705 Excerpt: max 2 righe, taglio pulito (niente mezzo terzo rigo) *\/\n.fitl-card__excerpt{\n  margin: 0;\n  color: #f0f0f0;\n  opacity: .9;\n\n  \/* metto line-height esplicito per coerenza con max-height *\/\n  font-family: 'Akshar', system-ui, sans-serif;\n  font-weight: 400;\n  font-size: clamp(14px, 1.8vw, 16px);\n  line-height: 1.35;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  max-height: calc(1.35em * 2);\n  overflow: hidden;\n\n  text-decoration: none !important;\n  text-decoration-line: none !important;\n}\n\/* sicurezza extra: niente underline sui discendenti *\/\n.fitl-card__excerpt *,\n.fitl-card__excerpt a{\n  text-decoration: none !important;\n  text-decoration-line: none !important;\n}\n\n\/* stati *\/\n.fitl-loading,\n.fitl-empty{\n  grid-column: 1\/-1;\n  text-align: center;\n  padding: clamp(14px, 2.2vw, 18px);\n  border: 1px dashed rgba(255,255,255,.18);\n  border-radius: 14px;\n  color: #dcdcdc;\n  background: #0e0e0e;\n}\n<\/style>\n\n<script>\n(() => {\n  const root = document.getElementById('fit-levels');\n  if(!root) return;\n\n  \/* ----------- CONFIG ----------- *\/\n  const SLUGS = {\n    base: root.dataset.catBase || 'base',\n    intermedio: root.dataset.catIntermedio || 'intermedio',\n    avanzato: root.dataset.catAvanzato || 'avanzato'\n  };\n\n  \/\/ Base API (stesso dominio del sito)\n  const API_BASE = `${window.location.origin}\/wp-json\/wp\/v2`;\n\n  \/* ----------- UI: switch\/tabpanel ----------- *\/\n  const switcher = root.querySelector('.fitl-switch');\n  const tabs = [...root.querySelectorAll('.fitl-tab')];\n\n  function activate(index){\n    switcher.style.setProperty('--i', index);\n    tabs.forEach((t,i)=>{\n      const on = i===index;\n      t.classList.toggle('is-active', on);\n      t.setAttribute('aria-selected', on ? 'true':'false');\n      t.tabIndex = on ? 0 : -1;\n    });\n    const ids = ['panel-base','panel-intermedio','panel-avanzato'];\n    ids.forEach((id,i)=>{\n      const p = root.querySelector('#'+id);\n      if(!p) return;\n      p.hidden = (i!==index);\n    });\n  }\n\n  tabs.forEach(btn=>{\n    btn.addEventListener('click', () => activate(parseInt(btn.dataset.index,10)||0));\n  });\n\n  switcher.addEventListener('keydown', e=>{\n    const cur = tabs.findIndex(t=>t.classList.contains('is-active'));\n    let nxt = cur;\n    if(e.key==='ArrowRight') nxt = (cur+1)%tabs.length;\n    else if(e.key==='ArrowLeft') nxt = (cur-1+tabs.length)%tabs.length;\n    else if(e.key==='Home') nxt = 0;\n    else if(e.key==='End') nxt = tabs.length-1;\n    else return;\n    e.preventDefault(); activate(nxt); tabs[nxt].focus();\n  });\n\n  \/* ----------- Helpers REST ----------- *\/\n  const qs = (o)=>Object.entries(o).map(([k,v])=>`${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');\n\n  async function fetchWithHeaders(url){\n    const r = await fetch(url, { credentials:'same-origin' });\n    if(!r.ok) throw new Error(`HTTP ${r.status}`);\n    const json = await r.json();\n    return { json, headers: r.headers };\n  }\n\n  async function getCategoryIdsBySlugs(slugsArr){\n    const url = `${API_BASE}\/categories?${qs({ slug: slugsArr.join(','), per_page: 100 })}`;\n    const { json } = await fetchWithHeaders(url);\n    const map = {};\n    json.forEach(c => { map[c.slug] = c.id; });\n    return map;\n  }\n\n  function featuredFromEmbedded(p){\n    const em = p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0];\n    if(!em) return null;\n    const sizes = em.media_details && em.media_details.sizes;\n    const best = (sizes && (sizes.medium_large || sizes.large || sizes.medium))\n      ? (sizes.medium_large || sizes.large || sizes.medium).source_url\n      : em.source_url;\n    const alt = em.alt_text || p.title?.rendered || 'Immagine articolo';\n    return { src: best, alt };\n  }\n\n  function cleanExcerpt(html){\n    const tmp = document.createElement('div');\n    tmp.innerHTML = html || '';\n    return tmp.textContent.trim().replace(\/\\s+\/g,' ');\n  }\n\n  function cardHTML(p){\n    const f = featuredFromEmbedded(p);\n    const img = f ? `<img decoding=\"async\" src=\"${f.src}\" alt=\"${f.alt}\">` : '';\n    const title = p.title?.rendered || 'Senza titolo';\n    const excerpt = cleanExcerpt(p.excerpt?.rendered || '');\n    return `\n      <li class=\"fitl-card\">\n        <a class=\"fitl-card__link\" href=\"${p.link}\">\n          <figure class=\"fitl-card__media\">${img}<\/figure>\n          <div class=\"fitl-card__body\">\n            <h3 class=\"fitl-card__title\">${title}<\/h3>\n            <p class=\"fitl-card__excerpt\">${excerpt}<\/p>\n          <\/div>\n        <\/a>\n      <\/li>`;\n  }\n\n  \/\/ Scarica TUTTE le pagine di una categoria (per_page=100, page=1..N), ordine ASC (pi\u00f9 vecchio \u2192 pi\u00f9 nuovo)\n  async function fetchAllPostsByCategoryId(catId){\n    const all = [];\n    let page = 1;\n    const perPage = 100; \/\/ massimo consentito da WP\n    while(true){\n      const url = `${API_BASE}\/posts?${qs({\n        categories: catId,\n        per_page: perPage,\n        page,\n        orderby: 'date',\n        order: 'asc',     \/\/ <-- pi\u00f9 vecchio per primo\n        _embed: '1'\n      })}`;\n      const { json, headers } = await fetchWithHeaders(url);\n      all.push(...json);\n      const totalPages = parseInt(headers.get('X-WP-TotalPages') || '1', 10);\n      if(page >= totalPages) break;\n      page++;\n    }\n    return all;\n  }\n\n  async function loadAll(){\n    \/\/ 1) risolvi ID categorie\n    const catMap = await getCategoryIdsBySlugs(Object.values(SLUGS));\n\n    \/\/ 2) per ciascun livello, scarica TUTTI i post (ordinati ASC) e render\n    const lists = [...root.querySelectorAll('.fitl-grid')];\n\n    await Promise.all(lists.map(async (ul)=>{\n      const key = ul.dataset.target;           \/\/ 'base' | 'intermedio' | 'avanzato'\n      const slug = SLUGS[key];\n      const catId = catMap[slug];\n\n      if(!catId){\n        ul.innerHTML = `<li class=\"fitl-empty\">Categoria \u201c${slug}\u201d non trovata.<\/li>`;\n        return;\n      }\n      try{\n        const posts = await fetchAllPostsByCategoryId(catId);\n        if(!posts.length){\n          ul.innerHTML = `<li class=\"fitl-empty\">Nessun articolo disponibile per il livello ${key}.<\/li>`;\n          return;\n        }\n        ul.innerHTML = posts.map(cardHTML).join('');\n      }catch(err){\n        ul.innerHTML = `<li class=\"fitl-empty\">Impossibile caricare gli articoli (${err.message}).<\/li>`;\n      }\n    }));\n  }\n\n  \/* ----------- Deep-link: PATH (\/formazione\/base), QUERY (?level=base), HASH (#base) ----------- *\/\n  function getInitialIndexFromURL(){\n    const { pathname, search, hash } = window.location;\n    const map = { base:0, intermedio:1, avanzato:2 };\n\n    \/\/ 1) ?level=...\n    const q = (new URLSearchParams(search).get('level') || '').toLowerCase();\n    if (q in map) return map[q];\n\n    \/\/ 2) #base | #intermedio | #avanzato\n    const h = (hash.replace('#','') || '').toLowerCase();\n    if (h in map) return map[h];\n\n    \/\/ 3) \/formazione\/base \u2192 ultimo segmento del path\n    const segs = pathname.toLowerCase().split('\/').filter(Boolean);\n    const last = segs[segs.length - 1] || '';\n    if (last in map) return map[last];\n\n    return 0; \/\/ default: Base\n  }\n\n  \/\/ Avvio\n  loadAll().then(()=>{\n    const idx = getInitialIndexFromURL();\n    activate(idx);\n  });\n\n  \/\/ Se cambia solo l\u2019hash (#base \/ #intermedio \/ #avanzato)\n  window.addEventListener('hashchange', () => {\n    activate( getInitialIndexFromURL() );\n  });\n})();\n<\/script>\n\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:87px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>FORMAZIONE Una libreria in continuo aggiornamento dedicata all\u2019educazione finanziaria: guide brevi, spiegazioni semplici e focus tematici. La sezione \u00e8 strutturata in Base, Intermedio, Avanzato, per imparare con gradualit\u00e0 e al proprio ritmo. Base Intermedio Avanzato Caricamento articoli\u2026 Caricamento articoli\u2026 Caricamento articoli\u2026<\/p>","protected":false},"author":1,"featured_media":1032,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-914","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/pages\/914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/comments?post=914"}],"version-history":[{"count":45,"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/pages\/914\/revisions"}],"predecessor-version":[{"id":1388,"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/pages\/914\/revisions\/1388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/media\/1032"}],"wp:attachment":[{"href":"https:\/\/www.finanzaintasca.it\/en\/wp-json\/wp\/v2\/media?parent=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}