{"id":619,"date":"2026-06-06T10:50:58","date_gmt":"2026-06-06T10:50:58","guid":{"rendered":"https:\/\/test.okite.com\/?page_id=619"},"modified":"2026-06-12T10:11:55","modified_gmt":"2026-06-12T10:11:55","slug":"architetture","status":"publish","type":"page","link":"https:\/\/test.okite.com\/?page_id=619","title":{"rendered":"Architetture"},"content":{"rendered":"<style>.kb-row-layout-id619_ecd1f5-99 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id619_ecd1f5-99 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id619_ecd1f5-99 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id619_ecd1f5-99 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id619_ecd1f5-99 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id619_ecd1f5-99 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id619_ecd1f5-99 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column619_d3c084-9e > .kt-inside-inner-col,.kadence-column619_d3c084-9e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column619_d3c084-9e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column619_d3c084-9e > .kt-inside-inner-col{flex-direction:column;}.kadence-column619_d3c084-9e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column619_d3c084-9e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column619_d3c084-9e{position:relative;}@media all and (max-width: 1024px){.kadence-column619_d3c084-9e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column619_d3c084-9e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column619_d3c084-9e\"><div class=\"kt-inside-inner-col\">\n<style>\n\/* --- Reset e full-width break-out dal container WordPress --- *\/\n.sp-section-wrap {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n\/* --- Layout principale --- *\/\n.sp-hero {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 100vh;\n  padding: 100px 8vw 80px;\n  background: #ffffff;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* --- Colonna sinistra --- *\/\n.sp-left {\n  flex: 0 0 50%;\n  z-index: 2;\n}\n\n.sp-tag {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: #d71920;\n  margin-bottom: 22px;\n  font-family: sans-serif;\n  display: block;\n}\n\n.sp-title {\n  font-size: clamp(40px, 5.5vw, 82px);\n  line-height: 1.0;\n  font-weight: 900;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  font-family: sans-serif;\n  margin: 0 0 0 0;\n}\n\n.sp-title .sp-red {\n  color: #C8281E;\n}\n\n.sp-divider {\n  width: 52px;\n  height: 3px;\n  background: #C8281E;\n  margin: 30px 0 28px;\n  border-radius: 2px;\n  border: none;\n}\n\n.sp-subtitle {\n  font-size: 16.5px;\n  line-height: 1.8;\n  color: #555555;\n  max-width: 440px;\n  font-family: sans-serif;\n  margin: 0;\n}\n\n.sp-cta {\n  margin-top: 44px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: 0.14em;\n  text-decoration: none;\n  border-bottom: 2px solid #C8281E;\n  padding-bottom: 5px;\n  cursor: pointer;\n  font-family: sans-serif;\n  background: none;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  transition: color 0.2s, border-color 0.2s;\n}\n\n.sp-cta:hover {\n  color: #C8281E;\n}\n\n.sp-cta-arrow {\n  display: inline-block;\n  transition: transform 0.22s;\n}\n\n.sp-cta:hover .sp-cta-arrow {\n  transform: translateX(5px);\n}\n\n\/* --- Colonna destra (canvas) --- *\/\n.sp-right {\n  flex: 0 0 46%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 500px;\n  position: relative;\n}\n\n#sp-canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\/* --- Responsive --- *\/\n@media (max-width: 900px) {\n  .sp-hero {\n    flex-direction: column;\n    padding: 80px 6vw 60px;\n    min-height: auto;\n  }\n  .sp-left {\n    flex: none;\n    width: 100%;\n    margin-bottom: 40px;\n  }\n  .sp-right {\n    flex: none;\n    width: 100%;\n    height: 380px;\n  }\n  .sp-title {\n    font-size: clamp(36px, 10vw, 60px);\n  }\n  .sp-subtitle {\n    max-width: 100%;\n  }\n}\n<\/style>\n\n<div class=\"sp-section-wrap\">\n  <section class=\"sp-hero\" id=\"sp-hero\">\n\n    <div class=\"sp-left\">\n      <span class=\"sp-tag\">Edilizia Industrializzata<\/span>\n      <h1 class=\"sp-title\">\n        LE ARCHITETTURE<br>\n        <span class=\"sp-red\">PREFABBRICATE<\/span>\n      <\/h1>\n      <hr class=\"sp-divider\">\n      <p class=\"sp-subtitle\">\n        Eccellenza costruttiva e precisione industriale al servizio del tuo progetto. Dal pannello prefabbricato pieno o alleggerito a quello a taglio termico, a sviluppo verticale od orizzontale, questi sono gli elementi di tamponamento di una struttura prefabbricata.\n      <\/p>\n      <a href=\"#contatti\" class=\"sp-cta\">\n        Scopri di pi\u00f9 <span class=\"sp-cta-arrow\">\u2192<\/span>\n      <\/a>\n    <\/div>\n\n    <div class=\"sp-right\">\n      <canvas id=\"sp-canvas\" width=\"550\" height=\"520\"><\/canvas>\n    <\/div>\n\n  <\/section>\n<\/div>\n\n<script>\n(function () {\n  var canvas = document.getElementById('sp-canvas');\n  if (!canvas) return;\n  var ctx = canvas.getContext('2d');\n  var hero = document.getElementById('sp-hero');\n\n  \/\/ Angoli di visualizzazione e gestione rotazione automatica\n  var baseRotX = -0.22; \/\/ Inclinazione verticale fissa dell'espositore\n  var autoRotY = 0;     \/\/ Angolo di rotazione automatica che cresce nel tempo\n  var mouseOffsetX = 0; \/\/ Spostamento generato dal movimento del mouse X\n  var mouseOffsetY = 0; \/\/ Spostamento generato dal movimento del mouse Y\n\n  hero.addEventListener('mousemove', function (e) {\n    var r = hero.getBoundingClientRect();\n    var nx = (e.clientX - r.left) \/ r.width - 0.5;\n    var ny = (e.clientY - r.top) \/ r.height - 0.5;\n    \n    \/\/ Il mouse va ad influenzare delicatamente l'angolo visivo corrente\n    mouseOffsetX = nx * 0.6;\n    mouseOffsetY = ny * 0.4;\n  });\n\n  hero.addEventListener('mouseleave', function () {\n    \/\/ Quando il mouse esce, la visualizzazione torna gradualmente a quella standard\n    mouseOffsetX = 0;\n    mouseOffsetY = 0;\n  });\n\n  \/\/ Funzione di proiezione 3D\n  function project(x, y, z, rx, ry, cx, cy, fov) {\n    var cY = Math.cos(ry), sY = Math.sin(ry);\n    var cX = Math.cos(rx), sX = Math.sin(rx);\n    var x1 = x * cY - z * sY;\n    var z1 = x * sY + z * cY;\n    var y1 = y * cX - z1 * sX;\n    var z2 = y * sX + z1 * cX;\n    var sc = fov \/ (fov + z2 + 400);\n    return { x: cx + x1 * sc, y: cy + y1 * sc, z: z2, s: sc };\n  }\n\n  function face3d(pts3, rx, ry, cx, cy, fov) {\n    return pts3.map(function (p) {\n      return project(p[0], p[1], p[2], rx, ry, cx, cy, fov);\n    });\n  }\n\n  function avgZ(pts2) {\n    return pts2.reduce(function (s, p) { return s + p.z; }, 0) \/ pts2.length;\n  }\n\n  function drawFace(pts2, fill, strokeC, lw) {\n    ctx.beginPath();\n    ctx.moveTo(pts2[0].x, pts2[0].y);\n    for (var i = 1; i < pts2.length; i++) ctx.lineTo(pts2[i].x, pts2[i].y);\n    ctx.closePath();\n    ctx.fillStyle = fill;\n    ctx.fill();\n    if (strokeC) {\n      ctx.strokeStyle = strokeC;\n      ctx.lineWidth = lw || 1;\n      ctx.stroke();\n    }\n  }\n\n  \/\/ Costruttore dei moduli geometrici dei pannelli e pilastri\n  function buildCubeFaces(ox, oy, oz, W, D, H, type) {\n    var hw = W \/ 2, hd = D \/ 2, hh = H \/ 2;\n    var faces = [];\n    var o = function (v) { return [v[0] + ox, v[1] + oy, v[2] + oz]; };\n\n    faces.push({ id: 'top',   type: type, pts: [[-hw,-hh,-hd],[hw,-hh,-hd],[hw,-hh,hd],[-hw,-hh,hd]].map(o) });\n    faces.push({ id: 'front', type: type, pts: [[-hw,-hh,hd],[hw,-hh,hd],[hw,hh,hd],[-hw,hh,hd]].map(o) });\n    faces.push({ id: 'right', type: type, pts: [[hw,-hh,-hd],[hw,-hh,hd],[hw,hh,hd],[hw,hh,-hd]].map(o) });\n    faces.push({ id: 'left',  type: type, pts: [[-hw,-hh,-hd],[-hw,-hh,hd],[-hw,hh,hd],[-hw,hh,-hd]].map(o) });\n    faces.push({ id: 'bot',   type: type, pts: [[-hw,hh,-hd],[hw,hh,-hd],[hw,hh,hd],[-hw,hh,hd]].map(o) });\n    faces.push({ id: 'back',  type: type, pts: [[-hw,-hh,-hd],[hw,-hh,-hd],[hw,hh,-hd],[-hw,hh,-hd]].map(o) });\n\n    return faces;\n  }\n\n  \/\/ Variabili di interpolazione per rendere i movimenti fluidi (smoothing)\n  var currentRotX = baseRotX;\n  var currentRotY = 0;\n\n  function render() {\n    var CW = canvas.width, CH = canvas.height;\n    ctx.clearRect(0, 0, CW, CH);\n\n    \/\/ Incremento costante della rotazione espositiva (velocit\u00e0 controllata)\n    autoRotY += 0.007;\n\n    \/\/ Fluidit\u00e0 di movimento sui target calcolati\n    var targetX = baseRotX + mouseOffsetY;\n    var targetY = autoRotY + mouseOffsetX;\n\n    currentRotX += (targetX - currentRotX) * 0.1;\n    currentRotY += (targetY - currentRotY) * 0.1;\n\n    var fov = 800;\n    var cx = CW * 0.5, cy = CH * 0.5 + 30;\n\n    var allFaces = [];\n\n    \/\/ 1. Basamento strutturale\n    allFaces = allFaces.concat(buildCubeFaces(0, 50, 0, 240, 180, 10, 'base'));\n\n    \/\/ 2. I 4 Pilastri portanti\n    var pH = 110, pW = 16;\n    allFaces = allFaces.concat(buildCubeFaces(-95,  50 - pH\/2, -65, pW, pW, pH, 'pillar'));\n    allFaces = allFaces.concat(buildCubeFaces( 95,  50 - pH\/2, -65, pW, pW, pH, 'pillar'));\n    allFaces = allFaces.concat(buildCubeFaces(-95,  50 - pH\/2,  65, pW, pW, pH, 'pillar'));\n    allFaces = allFaces.concat(buildCubeFaces( 95,  50 - pH\/2,  65, pW, pW, pH, 'pillar'));\n\n    \/\/ 3. Solaio e pannellatura di copertura superiore\n    allFaces = allFaces.concat(buildCubeFaces(0, 50 - pH - 8, 0, 230, 170, 16, 'roof'));\n\n    \/\/ Ordinamento di profondit\u00e0 (Z-sorting) per un rendering corretto delle facce durante la rotazione\n    var projected = allFaces.map(function (f) {\n      var p2 = face3d(f.pts, currentRotX, currentRotY, cx, cy, fov);\n      return { id: f.id, type: f.type, p2: p2, az: avgZ(p2) };\n    });\n    projected.sort(function (a, b) { return b.az - a.az; });\n\n    \/\/ Palette cromatica tecnica stile Cemento\/Finitura Architettonica Chiara\n    var colorPalette = {\n      base:   { top: '#dcdcdc', front: '#b0b0b0', right: '#999999', rest: '#888' },\n      pillar: { top: '#f5f5f5', front: '#cccccc', right: '#ababab', rest: '#999' },\n      roof:   { top: '#ffffff', front: '#d8d8d8', right: '#bcbcbc', rest: '#aaa' }\n    };\n\n    \/\/ Disegno effettivo delle superfici geometriche ordinate\n    projected.forEach(function (f) {\n      var pClass = colorPalette[f.type] || colorPalette['pillar'];\n      var fill = pClass[f.id] || pClass.rest;\n      var stroke = '#222222';\n      var lw = f.type === 'roof' ? 1.2 : 0.8;\n      drawFace(f.p2, fill, stroke, lw);\n    });\n\n    \/\/ Ombra d'appoggio ellittica a terra, coerente con la rotazione\n    var sc = project(0, 55, 0, currentRotX, currentRotY, cx, cy, fov);\n    var grad = ctx.createRadialGradient(sc.x, sc.y, 10, sc.x, sc.y, 150);\n    grad.addColorStop(0, 'rgba(0,0,0,0.15)');\n    grad.addColorStop(1, 'rgba(0,0,0,0)');\n    ctx.beginPath();\n    ctx.ellipse(sc.x, sc.y, 150, 42, 0, 0, Math.PI * 2);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    requestAnimationFrame(render);\n  }\n\n  render();\n})();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id619_444ed3-d4 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id619_444ed3-d4 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id619_444ed3-d4 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id619_444ed3-d4 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id619_444ed3-d4 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id619_444ed3-d4 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id619_444ed3-d4 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column619_6dc8d1-97 > .kt-inside-inner-col,.kadence-column619_6dc8d1-97 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column619_6dc8d1-97 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column619_6dc8d1-97 > .kt-inside-inner-col{flex-direction:column;}.kadence-column619_6dc8d1-97 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column619_6dc8d1-97 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column619_6dc8d1-97{position:relative;}@media all and (max-width: 1024px){.kadence-column619_6dc8d1-97 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column619_6dc8d1-97 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column619_6dc8d1-97\"><div class=\"kt-inside-inner-col\">\n\n<!-- ============================================================\n     CATALOGO INTERATTIVO MATERICO CON FOTO REALI \u2014 SEIEFFE SPA\n     Incolla questo codice in un blocco \"HTML Personalizzato\"\n     ============================================================ -->\n\n<style>\n.sp-section-wrap {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  overflow: hidden;\n  background: #fdfdfd;\n}\n\n.sp-hero {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 100vh;\n  padding: 80px 8vw;\n  background: #fdfdfd;\n  position: relative;\n  gap: 50px;\n}\n\n\/* --- Colonna sinistra (Testi Dinamici) --- *\/\n.sp-left {\n  flex: 0 0 45%;\n  z-index: 2;\n}\n\n.sp-tag {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: #d71920;\n  margin-bottom: 15px;\n  font-family: sans-serif;\n  display: block;\n}\n\n.sp-title {\n  font-size: clamp(32px, 4.2vw, 58px);\n  line-height: 1.1;\n  font-weight: 900;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  font-family: sans-serif;\n  margin: 0;\n}\n\n.sp-title .sp-red {\n  color: #C8281E;\n}\n\n.sp-panel-name {\n  font-size: 22px;\n  font-weight: 700;\n  color: #333;\n  margin-top: 20px;\n  font-family: sans-serif;\n  transition: opacity 0.15s ease-in-out;\n}\n\n.sp-divider {\n  width: 52px;\n  height: 3px;\n  background: #C8281E;\n  margin: 20px 0;\n  border-radius: 2px;\n  border: none;\n}\n\n.sp-subtitle {\n  font-size: 16px;\n  line-height: 1.7;\n  color: #555555;\n  min-height: 140px; \/* Evita saltellamenti di layout *\/\n  font-family: sans-serif;\n  margin: 0 0 30px 0;\n  transition: opacity 0.15s ease-in-out;\n}\n\n.sp-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: 0.14em;\n  text-decoration: none;\n  border-bottom: 2px solid #C8281E;\n  padding-bottom: 5px;\n  font-family: sans-serif;\n}\n\n\/* --- Colonna destra (Foto Full View + Griglia) --- *\/\n.sp-right {\n  flex: 0 0 50%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* Contenitore Foto Principale che sostituisce il 3D *\/\n.sp-photo-fullframe {\n  width: 100%;\n  height: 420px; \/* Copre completamente la schermata sopra i bottoni *\/\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n  background: #eaeaea;\n  margin-bottom: 20px;\n  position: relative;\n  border: 1px solid #eef0f2;\n}\n\n.sp-photo-fullframe img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover; \/* Riempie totalmente lo spazio del riquadro *\/\n  transition: opacity 0.25s ease-in-out;\n}\n\n\/* Griglia pulsanti inferiore *\/\n.sp-selector-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n  width: 100%;\n}\n\n.sp-btn-panel {\n  background: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  padding: 12px 4px;\n  font-family: sans-serif;\n  font-size: 10.5px;\n  font-weight: 600;\n  color: #444;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: center;\n  line-height: 1.2;\n}\n\n.sp-btn-panel:hover {\n  border-color: #C8281E;\n  color: #C8281E;\n  transform: translateY(-2px);\n}\n\n.sp-btn-panel.active {\n  background: #C8281E;\n  border-color: #C8281E;\n  color: #ffffff;\n  box-shadow: 0 4px 12px rgba(200, 40, 30, 0.25);\n}\n\n@media (max-width: 991px) {\n  .sp-selector-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 850px) {\n  .sp-hero {\n    flex-direction: column;\n    padding: 60px 6vw;\n  }\n  .sp-left, .sp-right {\n    flex: none;\n    width: 100%;\n  }\n  .sp-photo-fullframe {\n    height: 300px;\n  }\n  .sp-subtitle {\n    min-height: auto;\n  }\n}\n<\/style>\n\n<div class=\"sp-section-wrap\">\n  <section class=\"sp-hero\" id=\"sp-hero\">\n\n    <!-- TESTI DINAMICI -->\n    <div class=\"sp-left\">\n      <span class=\"sp-tag\">Finiture Architettoniche<\/span>\n      <h1 class=\"sp-title\">\n        Sistemi di Facciata<br>\n        <span class=\"sp-red\">ed Evoluzione Materica<\/span>\n      <\/h1>\n      \n      <div class=\"sp-panel-name\" id=\"panel-render-name\">Botticino e Rosso Verona<\/div>\n      <hr class=\"sp-divider\">\n      \n      <p class=\"sp-subtitle\" id=\"panel-render-desc\">\n        Questo pannello presenta una finitura granigliata a rilievo marcato, realizzata con una miscela combinata di ciottoli di marmo pregiato: Bianco Botticino e Rosso Verona. \u00c8 ideale per facciate che richiedono un contrasto cromatico caldo, una texture rustica ma geometricamente controllata e un'elevata resistenza al degrado atmosferico.\n      <\/p>\n      \n      <a href=\"#preventivo\" class=\"sp-cta\">Richiedi Campionatura Materica \u2192<\/a>\n    <\/div>\n\n    <!-- VISUAL DX: FOTO FULLFRAME COPRANTE + PULSANTI -->\n    <div class=\"sp-right\">\n      \n      <!-- Schermata fotografica completa a schermo intero sopra il cambio colore -->\n      <div class=\"sp-photo-fullframe\">\n        <img decoding=\"async\" id=\"sp-real-photo\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_1.jpg\" alt=\"Finitura Pannello Prefabbricato Seieffe\">\n      <\/div>\n      \n      <!-- Selettori ad 8 canali -->\n      <div class=\"sp-selector-grid\">\n        <button class=\"sp-btn-panel active\" onclick=\"changePanel(0)\">Botticino & Rosso<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(1)\">Verde Alpi & Bianco<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(2)\">Pietra Spaccata<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(3)\">Onde Bicromatiche<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(4)\">Bugnato Diamante<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(5)\">Giallo Mori<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(6)\">Bugnato Quadro<\/button>\n        <button class=\"sp-btn-panel\" onclick=\"changePanel(7)\">Roccia & Canneto<\/button>\n      <\/div>\n    <\/div>\n\n  <\/section>\n<\/div>\n\n<script>\n\/\/ Database a 8 canali con i tuoi link esatti per la visualizzazione a pieno schermo\nconst panelData = [\n  {\n    name: \"Botticino e Rosso Verona\",\n    desc: \"Questo pannello presenta una finitura granigliata a rilievo marcato, realizzata con una miscela combinata di ciottoli di marmo pregiato: Bianco Botticino e Rosso Verona. \u00c8 ideale per facciate che richiedono un contrasto cromatico caldo, una texture rustica ma geometricamente controllata e un'elevata resistenza al degrado atmosferico.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_1.jpg\"\n  },\n  {\n    name: \"Verde Alpi e Bianco Carrara\",\n    desc: \"Pannello prefabbricato caratterizzato da una micro-graniglia lavata a densit\u00e0 fine ed omogenea. Il contrasto cromatico \u00e8 ottenuto dall'accostamento minuzioso di marmo Verde Alpi e Bianco Carrara. La finitura offre una superficie opaca, elegante e leggermente ruvida, ottima per l'inserimento in complessi commerciali e direzionali d'avanguardia.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_2.jpg\"\n  },\n  {\n    name: \"Pietra Spaccata \/ Spaccato di Cava\",\n    desc: \"Questa soluzione riproduce fedelmente la texture irregolare e la forza materica della pietra naturale spaccata, qui affiancata da una sezione perimetrale lisce da fondo cassero per creare uno stacco architettonico netto. Perfetto per conferire un aspetto solido, scultoreo e monumentale alle pareti di tamponamento esterno.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_3.jpg\"\n  },\n  {\n    name: \"Onde Bicromatiche\",\n    desc: \"Pannello architettonico decorativo di grande impatto visivo. Sfrutta il lavaggio selettivo del calcestruzzo unito a matrici grafiche a onde sinusoidali. La bicromia tra le zone sabbiate ambrate e quelle chiare crea un effetto ottico di movimento continuo, trasformando le facciate industriali in vere e proprie opere di design strutturale.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_4.jpg\"\n  },\n  {\n    name: \"Bugnato a Diamante\",\n    desc: \"Pannello prefabbricato stampato con una texture geometrica regolare a rilievo romboidale (a punta di diamante). La superficie laccata o a finitura liscia grigio cemento sfrutta i rilievi per frammentare la luce solare, riducendo l'abbagliamento e donando una texture tecnica pulita, minimale e tipicamente contemporanea.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_5.jpg\"\n  },\n  {\n    name: \"Giallo Mori\",\n    desc: \"Realizzato con una base cementizia chiara e un'esposizione superficiale di graniglia di marmo Giallo Mori (o occhialino dorato). Il lavaggio controllato regala una facciata luminosa, dalle tonalit\u00e0 calde e sabbiose, ampiamente utilizzata per l'edilizia commerciale integrata in contesti paesaggistici o rurali.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_6.jpg\"\n  },\n  {\n    name: \"Bugnato Quadro Tridimensionale\",\n    desc: \"Pannello caratterizzato da moduli quadrati sfalsati e posizionati su piani di profondit\u00e0 differenti, stampati con una texture grezza tipo intonaco o pietra rustica. Questo gioco di alti e bassi rilievi genera ombre profonde e geometriche sulla facciata, spezzando la monotonia tipica dei grandi capannoni industriali.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_7.jpg\"\n  },\n  {\n    name: \"Combinata Roccia e Canneto \/ Bamb\u00f9\",\n    desc: \"Soluzione di altissimo pregio artistico e architettonico in cui coesistono due texture distinte sullo stesso pannello. A sinistra \u00e8 presente una finitura a roccia spaccata naturale, mentre a destra una matrice termoformata riproduce un canneto stilizzato in bassorilievo. \u00c8 la massima espressione dell'evoluzione materica Seieffe, pensata per facciate di sedi corporate e uffici.\",\n    imgUrl: \"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_8.jpg\"\n  }\n];\n\nfunction changePanel(index) {\n  \/\/ Cambia stato attivo sui bottoni\n  const buttons = document.querySelectorAll('.sp-btn-panel');\n  buttons.forEach((btn, i) => {\n    if(i === index) btn.classList.add('active');\n    else btn.classList.remove('active');\n  });\n\n  \/\/ Elementi della pagina da aggiornare\n  const nameEl = document.getElementById('panel-render-name');\n  const descEl = document.getElementById('panel-render-desc');\n  const imgEl = document.getElementById('sp-real-photo');\n  \n  \/\/ Avvia l'effetto dissolvenza\n  nameEl.style.opacity = 0;\n  descEl.style.opacity = 0;\n  imgEl.style.opacity = 0.1;\n  \n  setTimeout(() => {\n    \/\/ Aggiorna testi e sorgente dell'immagine a schermo intero\n    nameEl.innerText = panelData[index].name;\n    descEl.innerText = panelData[index].desc;\n    imgEl.src = panelData[index].imgUrl;\n    \n    \/\/ Ripristina opacit\u00e0 con la nuova immagine caricata\n    nameEl.style.opacity = 1;\n    descEl.style.opacity = 1;\n    imgEl.style.opacity = 1;\n  }, 120);\n}\n<\/script>\n\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id619_7deb51-3d > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id619_7deb51-3d > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id619_7deb51-3d > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id619_7deb51-3d > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id619_7deb51-3d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id619_7deb51-3d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id619_7deb51-3d alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column619_011566-47 > .kt-inside-inner-col,.kadence-column619_011566-47 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column619_011566-47 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column619_011566-47 > .kt-inside-inner-col{flex-direction:column;}.kadence-column619_011566-47 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column619_011566-47 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column619_011566-47{position:relative;}@media all and (max-width: 1024px){.kadence-column619_011566-47 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column619_011566-47 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column619_011566-47\"><div class=\"kt-inside-inner-col\">\n<!-- ============================================================\r\n     SEZIONE DETTAGLI TECNICI E CORONAMENTI \u2014 SEIEFFE SPA\r\n     Incolla questo codice in un blocco \"HTML Personalizzato\"\r\n     ============================================================ -->\r\n\r\n<style>\r\n.seieffe-details-container {\r\n  font-family: sans-serif;\r\n  color: #111111;\r\n  background-color: #fdfdfd;\r\n  padding: 40px 4vw;\r\n  max-width: 1300px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.sf-section-details {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 30px;\r\n  padding-top: 20px;\r\n}\r\n\r\n.sf-card {\r\n  background: #ffffff;\r\n  border-left: 4px solid #C8281E;\r\n  padding: 35px;\r\n  border-radius: 0 8px 8px 0;\r\n  box-shadow: 0 5px 25px rgba(0,0,0,0.03);\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n  border-top: 1px solid #f5f5f5;\r\n  border-right: 1px solid #f5f5f5;\r\n  border-bottom: 1px solid #f5f5f5;\r\n}\r\n\r\n.sf-card:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 10px 30px rgba(0,0,0,0.06);\r\n}\r\n\r\n.sf-card-title {\r\n  font-size: 18px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  margin-bottom: 18px;\r\n  letter-spacing: 0.03em;\r\n  color: #111111;\r\n}\r\n\r\n.sf-card p {\r\n  font-size: 15.5px;\r\n  line-height: 1.7;\r\n  color: #555555;\r\n  margin: 0;\r\n}\r\n\r\n.sf-list-coronamento {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 15px 0 0 0;\r\n}\r\n\r\n.sf-list-coronamento li {\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: #222222;\r\n  padding: 10px 0;\r\n  border-bottom: 1px dashed #eaeaea;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n.sf-list-coronamento li::before {\r\n  content: \"\u2192\";\r\n  color: #C8281E;\r\n  font-weight: 900;\r\n}\r\n\r\n.sf-list-coronamento li:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media (max-width: 850px) {\r\n  .sf-section-details {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n  .sf-card {\r\n    padding: 25px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"seieffe-details-container\">\r\n  <section class=\"sf-section-details\">\r\n    \r\n    <!-- CARD 1: APERTURE E PROTEZIONE INFISSI -->\r\n    <div class=\"sf-card\">\r\n      <div class=\"sf-card-title\">Sistemi di Apertura Integrati<\/div>\r\n      <p>\r\n        Ogni pannello pu\u00f2 contenere all\u2019interno un\u2019apertura come <strong>finestre e\/o passi d\u2019uomo<\/strong> con <strong>finitura bombata<\/strong> e con <strong>rompi goccia<\/strong> per la migliore protezione degli infissi.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- CARD 2: ELEMENTI DI CORONAMENTO -->\r\n    <div class=\"sf-card\">\r\n      <div class=\"sf-card-title\">Elementi di Coronamento<\/div>\r\n      <p>\r\n        Soluzioni strutturali e finiture complementari per l'ottimizzazione estetica e funzionale dell'edificio:\r\n      <\/p>\r\n      <ul class=\"sf-list-coronamento\">\r\n        <li>Portale scanalato<\/li>\r\n        <li>Pensiline<\/li>\r\n        <li>Cornicioni e velette di coronamento<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n  <\/section>\r\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id619_13944a-68 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id619_13944a-68 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id619_13944a-68 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id619_13944a-68 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id619_13944a-68 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id619_13944a-68 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id619_13944a-68 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column619_122126-c8 > .kt-inside-inner-col,.kadence-column619_122126-c8 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column619_122126-c8 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column619_122126-c8 > .kt-inside-inner-col{flex-direction:column;}.kadence-column619_122126-c8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column619_122126-c8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column619_122126-c8{position:relative;}@media all and (max-width: 1024px){.kadence-column619_122126-c8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column619_122126-c8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column619_122126-c8\"><div class=\"kt-inside-inner-col\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"923\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_14-1024x819.jpg\" alt=\"\" class=\"wp-image-923\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_14-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_14-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_14-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_14.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"925\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_16-1024x819.jpg\" alt=\"\" class=\"wp-image-925\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_16-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_16-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_16-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_16.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"928\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_9-1024x819.jpg\" alt=\"\" class=\"wp-image-928\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_9-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_9-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_9-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_9.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"920\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_10-1024x819.jpg\" alt=\"\" class=\"wp-image-920\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_10-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_10-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_10-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_10.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"924\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_15-1024x819.jpg\" alt=\"\" class=\"wp-image-924\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_15-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_15-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_15-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_15.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"926\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_17-1024x819.jpg\" alt=\"\" class=\"wp-image-926\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_17-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_17-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_17-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_17.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"921\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_12-1024x819.jpg\" alt=\"\" class=\"wp-image-921\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_12-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_12-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_12-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_12.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"927\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_18-1024x819.jpg\" alt=\"\" class=\"wp-image-927\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_18-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_18-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_18-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_18.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" data-id=\"922\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_13-1024x819.jpg\" alt=\"\" class=\"wp-image-922\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_13-1024x819.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_13-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_13-768x614.jpg 768w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/architetture_13.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id619_7cfb90-c5 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id619_7cfb90-c5 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id619_7cfb90-c5 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id619_7cfb90-c5 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id619_7cfb90-c5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id619_7cfb90-c5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id619_7cfb90-c5 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column619_5ba25b-62 > .kt-inside-inner-col,.kadence-column619_5ba25b-62 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column619_5ba25b-62 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column619_5ba25b-62 > .kt-inside-inner-col{flex-direction:column;}.kadence-column619_5ba25b-62 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column619_5ba25b-62 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column619_5ba25b-62{position:relative;}@media all and (max-width: 1024px){.kadence-column619_5ba25b-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column619_5ba25b-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column619_5ba25b-62\"><div class=\"kt-inside-inner-col\">\n\n<style data-wp-block-html=\"css\">\n\/* \u2500\u2500 CONFIGURAZIONE CHIARA E COMPLETA SU TUTTA LA LARGHEZZA \u2500\u2500 *\/\n.sf-full-width-preventivo-wrapper {\n    --seieffe-red: #C8102E;\n    --seieffe-red-hover: #9A0B21;\n    --bg-sezione-chiaro: #F9FAFB; \/* Sfondo generale chiaro *\/\n    --bg-scheda-bianco: #FFFFFF;  \/* Sfondo scheda interno bianco *\/\n    --border-neutral: #D1D5DB;    \/* Bordo caselle di base neutro *\/\n    --text-dark: #111827;         \/* Nero\/Grigio scuro per testi *\/\n    --text-muted: #4B5563;        \/* Grigio per sottotitoli *\/\n    --text-label: #374151;        \/* Colore etichette campi *\/\n    \n    width: 100vw !important;\n    position: relative;\n    left: 50% !important;\n    right: 50% !important;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n    overflow-x: hidden;\n    padding: 120px 48px;\n    background-color: var(--bg-sezione-chiaro) !important; \/* Sfondo chiaro *\/\n    font-family: 'Inter', -apple-system, sans-serif;\n}\n\n.sf-full-width-preventivo-wrapper * { \n    box-sizing: border-box; \n    margin: 0; \n    padding: 0; \n}\n\n.sf-full-width-preventivo-wrapper .sf-display { \n    font-family: 'Barlow Condensed', sans-serif; \n    font-weight: 900; \n    text-transform: uppercase; \n    letter-spacing: -0.01em; \n}\n\n\/* CONTENITORE FLUIDO ACCENTRATO *\/\n.sf-preventivo-container-fluid {\n    max-width: 1200px;\n    margin: 0 auto;\n    width: 100%;\n}\n\n\/* LA SCHEDA BIANCA *\/\n.sf-clean-preventivo-card {\n    background-color: var(--bg-scheda-bianco) !important; \/* Scheda bianca *\/\n    border: 1px solid #E5E7EB;\n    border-radius: 16px;\n    padding: 60px 50px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); \/* Ombra morbida e pulita *\/\n}\n\n\/* INTESTAZIONE SCHEDA E COLORAZIONE TITOLI *\/\n.sf-clean-card-header {\n    margin-bottom: 50px;\n    text-align: left;\n}\n.sf-form-tagline {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .25em;\n    color: #6B7280;\n    display: block;\n    margin-bottom: 12px;\n}\n.sf-form-main-title {\n    font-size: clamp(34px, 5vw, 54px);\n    line-height: 1.05;\n    margin-bottom: 15px !important;\n}\n\/* Richiedi Nera *\/\n.sf-form-main-title .text-black {\n    color: var(--text-dark) !important;\n}\n\/* Preventivo Rossa *\/\n.sf-form-main-title .text-red {\n    color: var(--seieffe-red) !important;\n}\n.sf-form-red-line {\n    width: 60px;\n    height: 4px;\n    background-color: var(--seieffe-red);\n    margin: 15px 0 20px 0;\n    border-radius: 2px;\n}\n.sf-form-lead-text {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.65;\n    color: var(--text-muted);\n    max-width: 850px;\n}\n\n\/* DIVISIONI DEL FORM *\/\n.sf-clean-form-layout {\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n}\n.sf-form-section-block {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n.sf-section-subtitle {\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-dark);\n    border-bottom: 1px solid #E5E7EB;\n    padding-bottom: 10px;\n    text-align: left;\n}\n\n\/* GRIGLIA CAMPI *\/\n.sf-form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n}\n\n.sf-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    text-align: left;\n}\n.sf-form-group.full-width-field {\n    width: 100%;\n}\n\n.sf-form-group label {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-label);\n}\n\n\/* CASELLE DI TESTO DI BASE (SOLO BORDO) E COMPORTAMENTO HOVER\/FOCUS IN ROSSO *\/\n.sf-clean-form-layout input[type=\"text\"],\n.sf-clean-form-layout input[type=\"email\"],\n.sf-clean-form-layout input[type=\"tel\"],\n.sf-clean-form-layout textarea {\n    background-color: #FFFFFF !important; \/* Sfondo caselle bianco di base *\/\n    border: 1px solid var(--border-neutral); \/* Solo il bordo visibile neutro *\/\n    border-radius: 6px;\n    padding: 16px 20px;\n    color: var(--text-dark);\n    font-family: 'Inter', sans-serif;\n    font-size: 14.5px;\n    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n    width: 100%;\n}\n\n\/* Quando l'utente va sopra o seleziona le caselle, diventano rosse (bordo e ombra) *\/\n.sf-clean-form-layout input:hover,\n.sf-clean-form-layout textarea:hover,\n.sf-clean-form-layout input:focus,\n.sf-clean-form-layout textarea:focus {\n    outline: none;\n    border-color: var(--seieffe-red) !important; \/* Il bordo diventa rosso *\/\n    box-shadow: 0 0 10px rgba(200, 16, 46, 0.12); \/* Sfumatura rossa di contorno *\/\n}\n\n\/* INFORMATIVA PRIVACY E BOTTONE *\/\n.sf-form-action-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 40px;\n    margin-top: 10px;\n    padding-top: 30px;\n    border-top: 1px solid #E5E7EB;\n}\n\n.sf-form-privacy-consent {\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    max-width: 65%;\n    text-align: left;\n}\n.sf-form-privacy-consent input[type=\"checkbox\"] {\n    margin-top: 3px;\n    accent-color: var(--seieffe-red);\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n.sf-form-privacy-consent label {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--text-muted);\n    cursor: pointer;\n}\n\n\/* PULSANTE ROSSO DI INVIO *\/\n.sf-btn-form-submit {\n    background-color: var(--seieffe-red);\n    color: #ffffff;\n    border: none;\n    padding: 18px 40px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .12em;\n    border-radius: 6px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n    white-space: nowrap;\n    transition: background-color 0.25s, transform 0.2s;\n    box-shadow: 0 8px 20px rgba(200, 16, 46, 0.15);\n}\n\n.sf-btn-form-submit:hover {\n    background-color: var(--seieffe-red-hover);\n    transform: translateY(-2px);\n}\n\n.sf-btn-arrow-icon {\n    font-size: 16px;\n    font-weight: 900;\n    transition: transform 0.2s;\n}\n.sf-btn-form-submit:hover .sf-btn-arrow-icon {\n    transform: translateX(5px);\n}\n\n\/* RESPONSIVE PER APPARATI MOBILE *\/\n@media (max-width: 900px) {\n    .sf-full-width-preventivo-wrapper { padding: 80px 20px; }\n    .sf-clean-preventivo-card { padding: 40px 24px; }\n    .sf-form-fields-grid { grid-template-columns: 1fr; gap: 20px; }\n    .sf-form-action-footer { flex-direction: column; align-items: flex-start; gap: 30px; }\n    .sf-form-privacy-consent { max-width: 100%; }\n    .sf-btn-form-submit { width: 100%; justify-content: center; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function() {\n    function caricaMotoreGsap(url, callback) {\n        if (typeof gsap !== \"undefined\") { callback(); return; }\n        let script = document.createElement(\"script\");\n        script.type = \"text\/javascript\";\n        script.src = url;\n        script.onload = callback;\n        document.head.appendChild(script);\n    }\n\n    caricaMotoreGsap(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\", function() {\n        let scriptST = document.createElement(\"script\");\n        scriptST.src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\";\n        scriptST.onload = function() {\n            gsap.registerPlugin(ScrollTrigger);\n            \n            \/\/ Apparizione controllata fluida quando l'utente raggiunge il modulo nello scorrimento della pagina\n            gsap.from('.sf-clean-preventivo-card', {\n                opacity: 0,\n                y: 40,\n                duration: 0.8,\n                ease: 'power2.out',\n                scrollTrigger: {\n                    trigger: '.sf-clean-preventivo-card',\n                    start: 'top 88%',\n                    once: true\n                }\n            });\n        };\n        document.head.appendChild(scriptST);\n    });\n})();\n<\/script>\n\n<div class=\"sf-full-width-preventivo-wrapper\">\n    <div class=\"sf-preventivo-container-fluid\">\n        \n        <div class=\"sf-clean-preventivo-card\">\n            \n            <!-- INTESTAZIONE CHIARA -->\n            <div class=\"sf-clean-card-header\">\n                <span class=\"sf-form-tagline\">UFFICIO TECNICO & COMMERCIALE<\/span>\n                <!-- Titolo con \"Richiedi\" in nero e \"Preventivo\" in rosso -->\n                <h2 class=\"sf-form-main-title sf-display\">\n                    <span class=\"text-black\">Richiedi<\/span> <span class=\"text-red\">Preventivo<\/span>\n                <\/h2>\n                <div class=\"sf-form-red-line\"><\/div>\n                <p class=\"sf-form-lead-text\">\n                    Compila i campi sottostanti per sottoporre il tuo progetto ai nostri ingegneri. Riceverai un'analisi preliminare e un piano di spesa preciso e definitivo per la tua struttura.\n                <\/p>\n            <\/div>\n\n            <!-- BLOCCO FORM -->\n            <form class=\"sf-clean-form-layout\" onsubmit=\"event.preventDefault(); alert('Richiesta inviata con successo all\\'Ufficio Tecnico Seieffe.');\">\n                \n                <!-- SEZIONE 1: DATI CONTATTO -->\n                <div class=\"sf-form-section-block\">\n                    <h4 class=\"sf-section-subtitle\">1. Informazioni di Contatto<\/h4>\n                    <div class=\"sf-form-fields-grid\">\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-nome\">Nome e Cognome *<\/label>\n                            <input type=\"text\" id=\"sf-nome\" placeholder=\"Es. Mario Rossi\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-azienda\">Azienda \/ Societ\u00e0 *<\/label>\n                            <input type=\"text\" id=\"sf-azienda\" placeholder=\"Es. Seieffe Costruzioni S.r.l.\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-email\">Email Aziendale *<\/label>\n                            <input type=\"email\" id=\"sf-email\" placeholder=\"Es. nome@azienda.it\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-tel\">Telefono \/ Contatto Diretto *<\/label>\n                            <input type=\"tel\" id=\"sf-tel\" placeholder=\"Es. +39 0824 XXXXXX\" required>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- SEZIONE 2: DETTAGLI OPERA -->\n                <div class=\"sf-form-section-block\">\n                    <h4 class=\"sf-section-subtitle\">2. Specifiche del Progetto<\/h4>\n                    <div class=\"sf-form-group full-width-field\">\n                        <label for=\"sf-messaggio\">Descrizione dei lavori e Localit\u00e0 del Cantiere *<\/label>\n                        <textarea id=\"sf-messaggio\" rows=\"5\" placeholder=\"Indica le dimensioni di massima del fabbricato, la destinazione d'uso, l'area dello scavo o le specifiche classi di carico richieste se gi\u00e0 definite...\" required><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <!-- SEZIONE 3: CONFERMA E INVIO -->\n                <div class=\"sf-form-action-footer\">\n                    <div class=\"sf-form-privacy-consent\">\n                        <input type=\"checkbox\" id=\"sf-privacy-check\" required>\n                        <label for=\"sf-privacy-check\">Acconsento al trattamento dei dati personali secondo la Privacy Policy di Seieffe Prefabbricati S.p.A.<\/label>\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"sf-btn-form-submit\">\n                        <span>Invia Richiesta Progetto<\/span>\n                        <span class=\"sf-btn-arrow-icon\">\u2192<\/span>\n                    <\/button>\n                <\/div>\n\n            <\/form>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Edilizia Industrializzata LE ARCHITETTURE PREFABBRICATE Eccellenza costruttiva e precisione industriale al servizio del tuo progetto. Dal pannello prefabbricato pieno o alleggerito a quello a taglio termico, a sviluppo verticale od orizzontale, questi sono gli elementi di tamponamento di una struttura prefabbricata. Scopri di pi\u00f9 \u2192 Finiture Architettoniche Sistemi di Facciata ed Evoluzione Materica Botticino e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":64,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/align-wide-fix-trasparent.php","meta":{"footnotes":""},"class_list":["post-619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=619"}],"version-history":[{"count":25,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions"}],"predecessor-version":[{"id":943,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions\/943"}],"up":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/64"}],"wp:attachment":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}