{"id":233,"date":"2026-04-22T08:35:37","date_gmt":"2026-04-22T06:35:37","guid":{"rendered":"https:\/\/www.tfsoleodinamica.it\/?page_id=233"},"modified":"2026-04-22T08:35:41","modified_gmt":"2026-04-22T06:35:41","slug":"design-system","status":"publish","type":"page","link":"https:\/\/www.tfsoleodinamica.it\/design-system\/","title":{"rendered":"Design System"},"content":{"rendered":"\n\t<style>\n\t\t\/* Stili specifici della styleguide \u2014 isolati qui, non vanno nel CSS globale *\/\n\t\t.tfs-sg-wrap { max-width: 1280px; margin: 0 auto; padding: var(--tfs-space-8) var(--tfs-space-4); }\n\t\t.tfs-sg-section { margin-bottom: var(--tfs-space-16); padding-bottom: var(--tfs-space-12); border-bottom: 1px solid var(--tfs-color-border); }\n\t\t.tfs-sg-section:last-child { border-bottom: none; }\n\t\t.tfs-sg-section-title { font-size: var(--tfs-fs-3xl); font-weight: var(--tfs-fw-bold); color: var(--tfs-color-primary); margin-bottom: var(--tfs-space-2); }\n\t\t.tfs-sg-section-desc { color: var(--tfs-color-text-muted); margin-bottom: var(--tfs-space-8); font-size: var(--tfs-fs-lg); }\n\t\t.tfs-sg-label { font-family: var(--tfs-font-mono); font-size: var(--tfs-fs-xs); color: var(--tfs-color-gray-600); margin-top: var(--tfs-space-2); display: block; }\n\t\t.tfs-sg-grid { display: grid; gap: var(--tfs-space-4); }\n\t\t.tfs-sg-grid-colors { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }\n\t\t.tfs-sg-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }\n\t\t.tfs-sg-grid-6 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n\t\t.tfs-sg-color-swatch { border-radius: var(--tfs-radius-md); overflow: hidden; border: 1px solid var(--tfs-color-border); box-shadow: var(--tfs-shadow-sm); }\n\t\t.tfs-sg-color-preview { height: 100px; width: 100%; }\n\t\t.tfs-sg-color-info { padding: var(--tfs-space-3); background: var(--tfs-color-white); }\n\t\t.tfs-sg-color-name { font-weight: var(--tfs-fw-semibold); font-size: var(--tfs-fs-sm); color: var(--tfs-color-gray-900); margin-bottom: 2px; }\n\t\t.tfs-sg-color-hex { font-family: var(--tfs-font-mono); font-size: var(--tfs-fs-xs); color: var(--tfs-color-gray-600); }\n\t\t.tfs-sg-example { padding: var(--tfs-space-6); background: var(--tfs-color-gray-50); border: 1px solid var(--tfs-color-border); border-radius: var(--tfs-radius-md); margin-bottom: var(--tfs-space-4); }\n\t\t.tfs-sg-example-dark { background: var(--tfs-color-primary); }\n\t\t.tfs-sg-row { display: flex; flex-wrap: wrap; gap: var(--tfs-space-3); align-items: center; }\n\t\t.tfs-sg-nav { position: sticky; top: 0; background: var(--tfs-color-white); border-bottom: 2px solid var(--tfs-color-primary); padding: var(--tfs-space-3) var(--tfs-space-4); z-index: var(--tfs-z-sticky); margin-bottom: var(--tfs-space-8); }\n\t\t.tfs-sg-nav ul { display: flex; flex-wrap: wrap; gap: var(--tfs-space-4); list-style: none; padding: 0; margin: 0; }\n\t\t.tfs-sg-nav a { color: var(--tfs-color-primary); font-weight: var(--tfs-fw-semibold); text-decoration: none; font-size: var(--tfs-fs-sm); padding: var(--tfs-space-1) var(--tfs-space-2); border-radius: var(--tfs-radius-sm); }\n\t\t.tfs-sg-nav a:hover { background: var(--tfs-color-primary-tint); text-decoration: none; }\n\t\t.tfs-sg-header { text-align: center; padding: var(--tfs-space-12) var(--tfs-space-4); background: linear-gradient(135deg, var(--tfs-color-primary) 0%, var(--tfs-color-primary-dark) 100%); color: var(--tfs-color-white); border-radius: var(--tfs-radius-lg); margin-bottom: var(--tfs-space-12); }\n\t\t.tfs-sg-header h1 { color: var(--tfs-color-white) !important; font-size: var(--tfs-fs-5xl); margin-bottom: var(--tfs-space-3); }\n\t\t.tfs-sg-header p { font-size: var(--tfs-fs-xl); color: rgba(255,255,255,0.9); margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; }\n\t\t.tfs-sg-code { font-family: var(--tfs-font-mono); font-size: var(--tfs-fs-xs); background: var(--tfs-color-gray-900); color: var(--tfs-color-gray-100); padding: var(--tfs-space-2) var(--tfs-space-3); border-radius: var(--tfs-radius-sm); display: inline-block; margin-top: var(--tfs-space-2); }\n\t\t.tfs-sg-spacing-box { background: var(--tfs-color-primary-tint); border: 2px dashed var(--tfs-color-primary); display: inline-block; }\n\t<\/style>\n\n\t<div class=\"tfs-sg-wrap\">\n\n\t\t<!-- HEADER -->\n\t\t<div class=\"tfs-sg-header\">\n\t\t\t<h1>TFS Design System<\/h1>\n\t\t\t<p>Styleguide visiva del child theme. Contiene tutti gli elementi UI riutilizzabili per la costruzione del sito TFS Oleodinamica.<\/p>\n\t\t<\/div>\n\n\t\t<!-- NAV STICKY -->\n\t\t<nav class=\"tfs-sg-nav\">\n\t\t\t<ul>\n\t\t\t\t<li><a href=\"#colori\">Colori<\/a><\/li>\n\t\t\t\t<li><a href=\"#tipografia\">Tipografia<\/a><\/li>\n\t\t\t\t<li><a href=\"#bottoni\">Bottoni<\/a><\/li>\n\t\t\t\t<li><a href=\"#badge\">Badge<\/a><\/li>\n\t\t\t\t<li><a href=\"#card\">Card<\/a><\/li>\n\t\t\t\t<li><a href=\"#hero\">Hero<\/a><\/li>\n\t\t\t\t<li><a href=\"#sezioni\">Sezioni<\/a><\/li>\n\t\t\t\t<li><a href=\"#trust\">Trust Badge<\/a><\/li>\n\t\t\t\t<li><a href=\"#partner\">Partner<\/a><\/li>\n\t\t\t\t<li><a href=\"#utility\">Utility<\/a><\/li>\n\t\t\t<\/ul>\n\t\t<\/nav>\n\n\t\t<!-- ============================================\n\t\t     1. COLORI\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"colori\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">1. Palette colori<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Tutti i colori del sistema. Modificabili in <code>\/assets\/css\/variables.css<\/code>.<\/p>\n\n\t\t\t<h3 style=\"margin-top: var(--tfs-space-6); margin-bottom: var(--tfs-space-4);\">Brand<\/h3>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-colors\">\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-primary);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Primary<\/div><div class=\"tfs-sg-color-hex\">#1F4E79<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-primary-dark);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Primary Dark<\/div><div class=\"tfs-sg-color-hex\">#163A5A<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-primary-light);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Primary Light<\/div><div class=\"tfs-sg-color-hex\">#3A6FA0<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-primary-tint);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Primary Tint<\/div><div class=\"tfs-sg-color-hex\">#E8EFF6<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-accent);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Accent (\u26a0 placeholder)<\/div><div class=\"tfs-sg-color-hex\">#E87722<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-accent-dark);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Accent Dark<\/div><div class=\"tfs-sg-color-hex\">#C45F15<\/div><\/div><\/div>\n\t\t\t<\/div>\n\n\t\t\t<h3 style=\"margin-top: var(--tfs-space-8); margin-bottom: var(--tfs-space-4);\">Grigi<\/h3>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-colors\">\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-900);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 900<\/div><div class=\"tfs-sg-color-hex\">#1A1A1A<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-700);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 700<\/div><div class=\"tfs-sg-color-hex\">#4A4A4A<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-500);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 500<\/div><div class=\"tfs-sg-color-hex\">#8C8C8C<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-300);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 300<\/div><div class=\"tfs-sg-color-hex\">#D4D4D4<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-100);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 100<\/div><div class=\"tfs-sg-color-hex\">#F4F4F4<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-gray-50); border-bottom: 1px solid var(--tfs-color-border);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Gray 50<\/div><div class=\"tfs-sg-color-hex\">#FAFAFA<\/div><\/div><\/div>\n\t\t\t<\/div>\n\n\t\t\t<h3 style=\"margin-top: var(--tfs-space-8); margin-bottom: var(--tfs-space-4);\">Semantici<\/h3>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-colors\">\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-success);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Success<\/div><div class=\"tfs-sg-color-hex\">#2D7A3E<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-warning);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Warning<\/div><div class=\"tfs-sg-color-hex\">#D4A017<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-error);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Error<\/div><div class=\"tfs-sg-color-hex\">#C0392B<\/div><\/div><\/div>\n\t\t\t\t<div class=\"tfs-sg-color-swatch\"><div class=\"tfs-sg-color-preview\" style=\"background: var(--tfs-color-info);\"><\/div><div class=\"tfs-sg-color-info\"><div class=\"tfs-sg-color-name\">Info<\/div><div class=\"tfs-sg-color-hex\">#2874A6<\/div><\/div><\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     2. TIPOGRAFIA\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"tipografia\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">2. Tipografia<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Gerarchia tipografica. Scala \"Major Third\" (1.25x). Responsive: su mobile i headings si riducono automaticamente.<\/p>\n\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h1>Heading 1 \u2014 Titolo principale<\/h1>\n\t\t\t\t<span class=\"tfs-sg-label\">h1 \u00b7 48px \u00b7 extrabold \u00b7 primary color<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h2>Heading 2 \u2014 Titolo di sezione<\/h2>\n\t\t\t\t<span class=\"tfs-sg-label\">h2 \u00b7 36px \u00b7 bold \u00b7 primary color<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h3>Heading 3 \u2014 Sottotitolo<\/h3>\n\t\t\t\t<span class=\"tfs-sg-label\">h3 \u00b7 30px \u00b7 semibold<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h4>Heading 4 \u2014 Titolo componente<\/h4>\n\t\t\t\t<span class=\"tfs-sg-label\">h4 \u00b7 24px \u00b7 semibold<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h5>Heading 5 \u2014 Sottotitolo componente<\/h5>\n\t\t\t\t<span class=\"tfs-sg-label\">h5 \u00b7 20px \u00b7 semibold \u00b7 gray<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<h6>Heading 6 \u2014 Etichetta sezione<\/h6>\n\t\t\t\t<span class=\"tfs-sg-label\">h6 \u00b7 18px \u00b7 medium \u00b7 uppercase<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<p class=\"tfs-lead\">Testo lead \u2014 paragrafo di apertura, usato subito dopo un H1 o H2 per introdurre una sezione in modo visibile ma non invadente.<\/p>\n\t\t\t\t<span class=\"tfs-sg-label\">.tfs-lead \u00b7 18px \u00b7 muted<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<p>Testo paragrafo base. TFS Oleodinamica \u00e8 Certified Excellence Service Partner Bosch Rexroth e Kawasaki Main Partner, in certificazione come H\u00e4gglunds Service Partner \u2014 primi in Italia \u2014 e in attivazione come Moog Distributore Autorizzato. Un <a href=\"#\">link di esempio<\/a> per mostrare lo stile del link, con <strong>testo enfatizzato<\/strong> e <em>corsivo<\/em>, pi\u00f9 una porzione <mark>evidenziata<\/mark>.<\/p>\n\t\t\t\t<span class=\"tfs-sg-label\">p \u00b7 16px \u00b7 regular<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<p class=\"tfs-small\">Testo piccolo \u2014 utile per disclaimer, note a pi\u00e8 di pagina, metadati.<\/p>\n\t\t\t\t<span class=\"tfs-sg-label\">.tfs-small \u00b7 14px<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<blockquote>\n\t\t\t\t\tL'eccellenza nell'oleodinamica non \u00e8 un traguardo, \u00e8 un percorso quotidiano fatto di precisione, competenza e partnership strategiche.\n\t\t\t\t\t<cite>Filosofia TFS<\/cite>\n\t\t\t\t<\/blockquote>\n\t\t\t\t<span class=\"tfs-sg-label\">blockquote<\/span>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     3. BOTTONI\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"bottoni\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">3. Bottoni<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Varianti per CTA. Usare <code>.tfs-btn-primary<\/code> per azioni principali, <code>.tfs-btn-accent<\/code> per CTA di rilievo (contatti, preventivi).<\/p>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3);\">Varianti<\/h4>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-row\">\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-primary\">Primary<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-accent\">Accent<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-outline\">Outline<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-ghost\">Ghost<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t<span class=\"tfs-sg-code\">&lt;a class=\"tfs-btn tfs-btn-primary\"&gt;Primary&lt;\/a&gt;<\/span>\n\t\t\t<\/div>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3); margin-top: var(--tfs-space-6);\">Su sfondo scuro<\/h4>\n\t\t\t<div class=\"tfs-sg-example tfs-sg-example-dark\">\n\t\t\t\t<div class=\"tfs-sg-row\">\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-white\">White<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-accent\">Accent<\/a>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3); margin-top: var(--tfs-space-6);\">Dimensioni<\/h4>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-row\">\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-primary tfs-btn-sm\">Small<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-primary\">Default<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-primary tfs-btn-lg\">Large<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-primary tfs-btn-xl\">Extra Large<\/a>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     4. BADGE\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"badge\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">4. Badge<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Etichette colorate per status, tag, categorie.<\/p>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-row\">\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-primary\">Primary<\/span>\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-accent\">Accent<\/span>\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-success\">Attivo<\/span>\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-warning\">In attivazione<\/span>\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-error\">Errore<\/span>\n\t\t\t\t\t<span class=\"tfs-badge tfs-badge-neutral\">Neutro<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     5. CARD\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"card\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">5. Card<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Componente card per prodotti, settori, case study.<\/p>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-3\">\n\t\t\t\t<div class=\"tfs-card\">\n\t\t\t\t\t<div style=\"aspect-ratio: 16\/9; background: linear-gradient(135deg, var(--tfs-color-primary) 0%, var(--tfs-color-primary-light) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;\">Immagine 16:9<\/div>\n\t\t\t\t\t<div class=\"tfs-card-body\">\n\t\t\t\t\t\t<h4 class=\"tfs-card-title\">Bosch Rexroth<\/h4>\n\t\t\t\t\t\t<p class=\"tfs-card-text\">Certified Excellence Service Partner. Assistenza specializzata su componenti idraulici industriali.<\/p>\n\t\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-outline tfs-btn-sm\">Scopri di pi\u00f9<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"tfs-card\">\n\t\t\t\t\t<div style=\"aspect-ratio: 16\/9; background: linear-gradient(135deg, var(--tfs-color-accent) 0%, var(--tfs-color-accent-dark) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;\">Immagine 16:9<\/div>\n\t\t\t\t\t<div class=\"tfs-card-body\">\n\t\t\t\t\t\t<h4 class=\"tfs-card-title\">Kawasaki<\/h4>\n\t\t\t\t\t\t<p class=\"tfs-card-text\">Main Partner ufficiale. Pompe e motori idraulici per applicazioni heavy-duty.<\/p>\n\t\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-outline tfs-btn-sm\">Scopri di pi\u00f9<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"tfs-card\">\n\t\t\t\t\t<div style=\"aspect-ratio: 16\/9; background: linear-gradient(135deg, var(--tfs-color-gray-700) 0%, var(--tfs-color-gray-900) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;\">Immagine 16:9<\/div>\n\t\t\t\t\t<div class=\"tfs-card-body\">\n\t\t\t\t\t\t<span class=\"tfs-badge tfs-badge-warning\" style=\"margin-bottom: var(--tfs-space-3);\">In certificazione<\/span>\n\t\t\t\t\t\t<h4 class=\"tfs-card-title\">H\u00e4gglunds<\/h4>\n\t\t\t\t\t\t<p class=\"tfs-card-text\">Service Partner in certificazione. Primi in Italia nell'offerta di motori radiali pistoni H\u00e4gglunds.<\/p>\n\t\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-outline tfs-btn-sm\">Scopri di pi\u00f9<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     6. HERO\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"hero\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">6. Hero section<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Sezione di apertura per pagine pilastro.<\/p>\n\t\t\t<div style=\"border-radius: var(--tfs-radius-lg); overflow: hidden;\">\n\t\t\t\t<div class=\"tfs-hero\">\n\t\t\t\t\t<div class=\"tfs-container\">\n\t\t\t\t\t\t<div class=\"tfs-hero-content\">\n\t\t\t\t\t\t\t<h1 class=\"tfs-hero-title\">Eccellenza nell'oleodinamica industriale<\/h1>\n\t\t\t\t\t\t\t<p class=\"tfs-hero-subtitle\">TFS Oleodinamica \u00e8 partner certificato Bosch Rexroth e Kawasaki. Progettazione, riparazione e assistenza per applicazioni Oil&amp;Gas, navale, siderurgia e movimento terra.<\/p>\n\t\t\t\t\t\t\t<div class=\"tfs-hero-cta-group\">\n\t\t\t\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-accent tfs-btn-lg\">Richiedi preventivo<\/a>\n\t\t\t\t\t\t\t\t<a href=\"#\" class=\"tfs-btn tfs-btn-white tfs-btn-lg\">Esplora i servizi<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     7. SECTION HEADER\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"sezioni\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">7. Section header<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Intestazione per sezioni interne (eyebrow + titolo + descrizione + divider).<\/p>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-section-header\">\n\t\t\t\t\t<span class=\"tfs-section-eyebrow\">I nostri partner<\/span>\n\t\t\t\t\t<h2 class=\"tfs-section-title\">Alleanze strategiche di valore<\/h2>\n\t\t\t\t\t<div class=\"tfs-divider tfs-divider-center\"><\/div>\n\t\t\t\t\t<p class=\"tfs-section-description\">Collaboriamo con i leader mondiali dell'oleodinamica per offrire soluzioni certificate e tecnologicamente all'avanguardia.<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     8. TRUST BADGE\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"trust\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">8. Trust badge<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Badge per certificazioni e garanzie di qualit\u00e0.<\/p>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-row\">\n\t\t\t\t\t<a href=\"#\" class=\"tfs-trust-badge\">\n\t\t\t\t\t\t<span class=\"tfs-trust-badge-icon\">\u2713<\/span>\n\t\t\t\t\t\t<span>ISO 9001 \u00b7 Bureau Veritas dal 1999<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-trust-badge\">\n\t\t\t\t\t\t<span class=\"tfs-trust-badge-icon\">\u2605<\/span>\n\t\t\t\t\t\t<span>Certified Excellence Bosch Rexroth<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t<a href=\"#\" class=\"tfs-trust-badge\">\n\t\t\t\t\t\t<span class=\"tfs-trust-badge-icon\">\u25c6<\/span>\n\t\t\t\t\t\t<span>Kawasaki Main Partner<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     9. PARTNER LOGO\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"partner\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">9. Partner logo grid<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Griglia loghi con hover effect (grayscale \u2192 color). Placeholder testuali qui \u2014 al posto dei veri loghi si metteranno i file SVG\/PNG dei partner.<\/p>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-6\">\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">BOSCH<\/div><\/div>\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">KAWASAKI<\/div><\/div>\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">H\u00c4GGLUNDS<\/div><\/div>\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">MOOG<\/div><\/div>\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">PARKER<\/div><\/div>\n\t\t\t\t\t<div class=\"tfs-partner-logo\"><div style=\"font-family: var(--tfs-font-mono); font-weight: bold; color: var(--tfs-color-gray-700);\">DANFOSS<\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- ============================================\n\t\t     10. UTILITY\n\t\t     ============================================ -->\n\t\t<section class=\"tfs-sg-section\" id=\"utility\">\n\t\t\t<h2 class=\"tfs-sg-section-title\">10. Classi utility<\/h2>\n\t\t\t<p class=\"tfs-sg-section-desc\">Classi helper applicabili direttamente in Kadence Blocks tramite <strong>Avanzate \u2192 Classe CSS aggiuntiva<\/strong>.<\/p>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3);\">Sfondi<\/h4>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-3\" style=\"margin-bottom: var(--tfs-space-6);\">\n\t\t\t\t<div class=\"tfs-bg-primary\" style=\"padding: var(--tfs-space-6); border-radius: var(--tfs-radius-md);\">\n\t\t\t\t\t<strong>.tfs-bg-primary<\/strong>\n\t\t\t\t\t<div class=\"tfs-sg-label\" style=\"color: rgba(255,255,255,0.7);\">sfondo blu + testo bianco<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"tfs-bg-section\" style=\"padding: var(--tfs-space-6); border-radius: var(--tfs-radius-md);\">\n\t\t\t\t\t<strong>.tfs-bg-section<\/strong>\n\t\t\t\t\t<div class=\"tfs-sg-label\">sfondo grigio chiaro<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"tfs-bg-dark\" style=\"padding: var(--tfs-space-6); border-radius: var(--tfs-radius-md);\">\n\t\t\t\t\t<strong>.tfs-bg-dark<\/strong>\n\t\t\t\t\t<div class=\"tfs-sg-label\" style=\"color: rgba(255,255,255,0.7);\">sfondo quasi nero<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3);\">Spacing (scala 4px)<\/h4>\n\t\t\t<div class=\"tfs-sg-example\">\n\t\t\t\t<div class=\"tfs-sg-row\" style=\"align-items: flex-end;\">\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 8px; height: 8px;\"><\/div><div class=\"tfs-sg-label\">space-2 \u00b7 8px<\/div><\/div>\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 16px; height: 16px;\"><\/div><div class=\"tfs-sg-label\">space-4 \u00b7 16px<\/div><\/div>\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 24px; height: 24px;\"><\/div><div class=\"tfs-sg-label\">space-6 \u00b7 24px<\/div><\/div>\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 32px; height: 32px;\"><\/div><div class=\"tfs-sg-label\">space-8 \u00b7 32px<\/div><\/div>\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 48px; height: 48px;\"><\/div><div class=\"tfs-sg-label\">space-12 \u00b7 48px<\/div><\/div>\n\t\t\t\t\t<div><div class=\"tfs-sg-spacing-box\" style=\"width: 64px; height: 64px;\"><\/div><div class=\"tfs-sg-label\">space-16 \u00b7 64px<\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<h4 style=\"margin-bottom: var(--tfs-space-3); margin-top: var(--tfs-space-6);\">Shadow<\/h4>\n\t\t\t<div class=\"tfs-sg-grid tfs-sg-grid-3\">\n\t\t\t\t<div class=\"tfs-shadow-sm\" style=\"padding: var(--tfs-space-6); background: white; border-radius: var(--tfs-radius-md);\"><strong>.tfs-shadow-sm<\/strong><\/div>\n\t\t\t\t<div class=\"tfs-shadow\" style=\"padding: var(--tfs-space-6); background: white; border-radius: var(--tfs-radius-md);\"><strong>.tfs-shadow<\/strong><\/div>\n\t\t\t\t<div class=\"tfs-shadow-lg\" style=\"padding: var(--tfs-space-6); background: white; border-radius: var(--tfs-radius-md);\"><strong>.tfs-shadow-lg<\/strong><\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<!-- FOOTER INFO -->\n\t\t<div style=\"text-align: center; padding: var(--tfs-space-8); background: var(--tfs-color-gray-100); border-radius: var(--tfs-radius-lg); margin-top: var(--tfs-space-8);\">\n\t\t\t<p style=\"margin: 0; color: var(--tfs-color-text-muted);\">\n\t\t\t\t<strong>TFS Child Theme<\/strong> v1.0.0 \u00b7 Design system generato dinamicamente dallo shortcode <code>[tfs_styleguide]<\/code>\n\t\t\t<\/p>\n\t\t<\/div>\n\n\t<\/div>\n\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-233","page","type-page","status-publish","hentry"],"acf":[],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"admin","author_link":"https:\/\/www.tfsoleodinamica.it\/fr\/author\/admin\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/pages\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":1,"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/pages\/233\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/www.tfsoleodinamica.it\/fr\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}