Prototype for customer approval

Content is not defined Hero logo is a placeholder Icons have to be approved
2026-05-27 07:49:41 +02:00
parent 7af19c14c1
commit ec1627cf86
6 changed files with 813 additions and 0 deletions
@@ -0,0 +1,30 @@
+# ==========================================
+# FILE DI SISTEMA / IDE (Google Cloud Shell & VS Code)
+# ==========================================
+# Ignora le impostazioni locali dell'editor nella Cloud Shell
+.vscode/
+.theia/
+
+# Ignora la cronologia locale e i file temporanei della Cloud Shell
+.cloudshell/
+.cloudshell_history
+.bash_history
+
+# File di sistema generali Mac/Windows
+.DS_Store
+Thumbs.db
+
+# ==========================================
+# FIREBASE
+# ==========================================
+# Ignora la cache locale della CLI di Firebase e i token di deploy
+.firebase/
+firebase-debug.log
+ui-debug.log
+
+# ==========================================
+# EXTRA (Just in case)
+# ==========================================
+#  Ignora le variabili d'ambiente per script di build o simili
+.env
+.env.local
@@ -0,0 +1,35 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "headers": [
+      {
+        "source": "/index.html",
+        "headers": [
+          { "key": "Cache-Control", "value": "no-cache" }
+        ]
+      },
+      {
+        "source": "**/*.svg",
+        "headers": [
+          { "key": "Cache-Control", "value": "public, max-age=2592000" }
+        ]
+      },
+      {
+        "source": "**",
+        "headers": [
+          { "key": "X-Content-Type-Options", "value": "nosniff" },
+          { "key": "X-Frame-Options", "value": "DENY" },
+          { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
+          { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" }
+        ]
+      }
+    ],
+    "cleanUrls": true,
+    "trailingSlash": false
+  }
+}
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect x="4" y="12" width="7" height="18" rx="1" fill="#4a8c3f"/>
+  <rect x="13" y="4" width="8" height="26" rx="1" fill="#8db83a"/>
+  <rect x="23" y="8" width="7" height="22" rx="1" fill="#6ba03a"/>
+  <rect x="6" y="15" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="6" y="19" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="6" y="23" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="15" y="7" width="4" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="15" y="11" width="4" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="15" y="15" width="4" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="15" y="19" width="4" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="15" y="23" width="4" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="25" y="11" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="25" y="15" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="25" y="19" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+  <rect x="25" y="23" width="3" height="1.5" rx="0.5" fill="#fff" opacity="0.7"/>
+</svg>
@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="it">
+ <!-- ════ SIDEBAR / ELEVATOR ════ -->
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Crystal Alto Vicentino s.r.l. - Gestioni Immobiliari. Amministrazione condominiale e gestione patrimoni immobiliari nell'Alto Vicentino.">
+<meta name="copyright" content="cod3.it">
+<meta name="author" content="Alberto Strazzabosco">
+<link rel="canonical" href="https://crystalsrl.com/">
+<meta property="og:title" content="Crystal Alto Vicentino s.r.l. | Gestioni Immobiliari">
+<meta property="og:description" content="Amministrazione condominiale e gestione patrimoni immobiliari nell'Alto Vicentino.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://crystalsrl.com/">
+<title>Crystal Alto Vicentino s.r.l. | Gestioni Immobiliari</title>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap" rel="stylesheet">
+<style>
+:root {
+  --green-dark: #2d6a30;
+  --green-mid: #4a8c3f;
+  --green-lime: #8db83a;
+  --green-pale: #e8f2da;
+  --green-surface: #f4f8ef;
+  --bg: #fafbf8;
+  --surface: #ffffff;
+  --text: #2c2c2c;
+  --text-light: #5a5a5a;
+  --text-muted: #8a8a8a;
+  --border: #dde5d4;
+  --border-light: #eef2e8;
+  --red-led: #cc2200;
+  --red-led-glow: #ff3300;
+  --elevator-bg: #3a3a3a;
+  --elevator-panel: #4a4a4a;
+  --elevator-btn: #c0bdb5;
+  --elevator-btn-active: #8db83a;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
+  --shadow-md: 0 3px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
+  --radius: 10px;
+  --radius-sm: 6px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+body {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+  overflow-x: hidden;
+}
+h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; }
+a { color: var(--green-dark); text-decoration: none; }
+a:hover { color: var(--green-mid); }
+
+/* ── Hamburger ── */
+.hamburger {
+  position: fixed; top: 12px; left: 12px; z-index: 300;
+  width: 48px; height: 48px; border: none; border-radius: 50%;
+  background: var(--elevator-bg); color: #fff; font-size: 22px;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--shadow-md); transition: background 0.2s;
+}
+.hamburger:hover { background: var(--elevator-panel); }
+
+/* ── Backdrop ── */
+.backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 150;
+  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
+}
+body.menu-open .backdrop { opacity: 1; visibility: visible; }
+
+/* ── Sidebar / Elevator ── */
+.sidebar {
+  position: fixed; top: 0; left: 0;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: min(260px, 75vw); height: 100dvh; z-index: 200;
+  background: var(--elevator-bg);
+  display: flex; flex-direction: column; align-items: center;
+  padding: 24px 20px; overflow-y: auto;
+}
+body.menu-open .sidebar { transform: translateX(0); }
+
+.elevator-panel {
+  width: 100%; max-width: 180px;
+  display: flex; flex-direction: column; align-items: center;
+  gap: 20px; margin-top: 40px;
+}
+
+.elevator-display {
+  width: 120px; height: 56px; background: #1a0000;
+  border-radius: 6px; border: 3px solid #555;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.3);
+  position: relative; overflow: hidden;
+}
+.elevator-display::before {
+  content: ''; position: absolute; inset: 0;
+  background: radial-gradient(ellipse at center, rgba(204,34,0,0.08) 0%, transparent 70%);
+}
+.elevator-display .floor-number {
+  font-family: 'DM Sans', monospace; font-size: 26px; font-weight: 700;
+  color: var(--red-led);
+  text-shadow: 0 0 8px var(--red-led-glow), 0 0 20px rgba(255,51,0,0.3);
+  letter-spacing: 2px; z-index: 1;
+}
+
+.elevator-buttons {
+  display: flex; flex-direction: column; gap: 12px;
+  width: 100%; align-items: center;
+}
+
+.elevator-btn {
+  width: 100%; max-width: 160px;
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  background: var(--elevator-panel); border: 2px solid #5a5a5a; border-radius: 8px;
+  color: #ccc; font-family: 'DM Sans', sans-serif;
+  font-size: 13px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.5px;
+  cursor: pointer; text-decoration: none; transition: all 0.2s;
+}
+.elevator-btn:hover { background: #555; color: #fff; border-color: #777; }
+.elevator-btn.active { border-color: var(--green-lime); color: var(--green-lime); }
+
+.elevator-btn-circle {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--elevator-btn);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 13px; color: #333; flex-shrink: 0;
+  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.elevator-btn.active .elevator-btn-circle {
+  background: var(--elevator-btn-active);
+  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2), 0 0 8px rgba(141,184,58,0.4);
+}
+
+.elevator-brand {
+  margin-top: auto; padding-top: 24px; text-align: center;
+  font-size: 10px; color: #666; letter-spacing: 1px; text-transform: lowercase;
+}
+
+/* ── Hero ── */
+.hero {
+  grid-column: 1 / -1; text-align: center; padding: 3rem 1rem 2rem;
+  scroll-margin-top: 0;
+}
+.hero-logo-container { display: flex; justify-content: center; margin-bottom: 1.5rem; }
+.hero-logo svg { width: 140px; height: auto; }
+.hero-title {
+  font-family: 'DM Serif Display', serif; font-weight: 400;
+  font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--green-dark);
+  letter-spacing: 1px; margin-bottom: 0.3rem;
+}
+.hero-subtitle {
+  font-family: 'DM Sans', sans-serif;
+  font-size: clamp(0.95rem, 2vw, 1.05rem); font-weight: 400;
+  color: var(--green-mid); text-transform: uppercase; letter-spacing: 3px;
+}
+
+/* ── Grid ── */
+.grid {
+  display: grid; grid-template-columns: 1fr 1fr;
+  padding: 0 6vw 4vw; gap: 4vw 6vw;
+}
+
+/* ── Separators ── */
+.separatore {
+  grid-column: 1 / -1; scroll-margin-top: 1.5rem;
+  padding: 2rem 0 0.5rem; border-bottom: 2px solid var(--green-dark);
+}
+.separatore h2 { font-size: clamp(1.5rem, 3vw, 1.8rem); color: var(--green-dark); text-align: center; }
+
+.sotto-separatore {
+  grid-column: 1 / -1; padding: 1rem 0 0.3rem;
+  border-bottom: 1px solid var(--border);
+}
+.sotto-separatore h3 {
+  font-size: clamp(1.05rem, 2vw, 1.15rem); color: var(--green-mid);
+  font-family: 'DM Sans', sans-serif; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 1px;
+}
+
+/* ── Section Intro ── */
+.section-intro {
+  grid-column: 1 / -1; font-size: 1rem;
+  color: var(--text-light); line-height: 1.7; max-width: 700px;
+}
+
+/* ── Cards ── */
+.card {
+  background: var(--surface); border: 1px solid var(--border-light);
+  border-radius: var(--radius); overflow: hidden;
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+
+/* ── Clickable card ── */
+.card.clickable {
+  border-left: 4px solid var(--green-lime);
+  cursor: pointer;
+}
+a.card.clickable {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+}
+a.card.clickable:hover { color: inherit; }
+
+/* Action indicator on grande clickable cards */
+.card.grande.clickable .card-action {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 0.6rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--green-mid);
+  font-family: 'DM Sans', sans-serif;
+}
+.card.grande.clickable .card-action svg {
+  width: 16px; height: 16px;
+}
+
+/* Card Grande */
+.card.grande {
+  grid-column: 1 / -1;
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  padding: 1.5rem;
+}
+.card.grande .card-icon {
+  width: 64px; height: 64px; border-radius: 50%;
+  background: var(--green-pale);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px; margin-bottom: 1rem; flex-shrink: 0;
+}
+.card.grande .card-body h3 {
+  font-size: 1.25rem; color: var(--green-dark); margin-bottom: 0.4rem;
+}
+.card.grande .card-body p {
+  font-size: 1rem; color: var(--text-light); line-height: 1.6;
+}
+
+/* Card Piccolo */
+.card.piccolo {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  padding: 1.4rem 1rem;
+}
+.card.piccolo .card-icon {
+  width: 56px; height: 56px; border-radius: 50%;
+  background: var(--green-pale);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px; margin-bottom: 0.7rem;
+}
+.card.piccolo h3 { font-size: 1.05rem; color: var(--green-dark); margin-bottom: 0.3rem; }
+.card.piccolo p {
+  font-size: 0.9rem; color: var(--text-light); line-height: 1.5; display: none;
+}
+
+/* Social coming soon */
+.card.piccolo.social { opacity: 0.55; }
+.card.piccolo.social .card-icon { background: #e8e8e8; filter: grayscale(100%); }
+
+/* ── Footer ── */
+.footer {
+  grid-column: 1 / -1; text-align: center; padding: 2rem 0; margin-top: 1rem;
+  border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted);
+}
+
+/* ── SVG icon helpers ── */
+.card-icon svg { width: 30px; height: 30px; }
+.card.piccolo .card-icon svg { width: 26px; height: 26px; }
+
+
+/* ═══ LANDSCAPE MOBILE (touch devices only) ═══ */
+@media (orientation: landscape) and (pointer: coarse) {
+  .grid { grid-template-columns: 1fr 1fr 1fr; padding: 0 7vw 3vw; gap: 3vw 7vw; }
+  .card.grande {
+    grid-column: 1 / -1; flex-direction: row;
+    text-align: left; align-items: flex-start; gap: 1rem;
+  }
+  .card.grande .card-icon { margin-bottom: 0; }
+  .hero { padding: 2rem 1rem 1.5rem; }
+  .hero-logo svg { width: 90px; }
+
+  /* Sidebar landscape: wider, 2-column internal grid */
+  .sidebar {
+    width: min(420px, 85vw);
+    padding: 16px 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 10px 16px;
+    align-items: center;
+    align-content: start;
+  }
+  .elevator-panel {
+    display: contents;
+    margin-top: 0; max-width: none;
+  }
+  .elevator-display {
+    grid-column: 1 / -1; grid-row: 1;
+    width: 100px; height: 46px;
+    justify-self: center;
+    margin-top: 48px;
+  }
+  .elevator-display .floor-number { font-size: 22px; }
+  .elevator-buttons {
+    grid-column: 1 / -1; grid-row: 2;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .elevator-btn {
+    max-width: none;
+    padding: 8px 12px;
+  }
+  .elevator-brand {
+    grid-column: 1 / -1; grid-row: 3;
+    margin-top: 0; padding-top: 4px;
+  }
+}
+
+/* ═══ DESKTOP (pointer devices with hover) ═══ */
+@media (pointer: fine) and (hover: hover) {
+  .hamburger { display: none; }
+  .backdrop { display: none; }
+  .sidebar {
+    position: sticky; top: 0; left: auto; transform: none;
+    width: auto; height: 100vh; align-self: start;
+    padding: 2rem 1.2rem; border-radius: 0; grid-column: 1;
+  }
+  .page {
+    display: grid; grid-template-columns: minmax(200px, 1fr) 1fr 1fr 1fr;
+    padding: 0 4vw; gap: 0 4vw;
+  }
+  .grid {
+    grid-column: 2 / -1; grid-template-columns: 1fr 1fr 1fr;
+    padding: 0 0 2rem; gap: 1.25rem 4vw;
+  }
+  .card.grande {
+    grid-column: 1 / -1; flex-direction: row;
+    text-align: left; align-items: flex-start; gap: 1.2rem;
+  }
+  .card.grande .card-icon { margin-bottom: 0; }
+  .card.piccolo p { display: block; }
+  .hero { padding: 2.5rem 0 2rem; }
+  .card:not(.social):hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
+}
+
+/* ── Touch targets ── */
+@media (pointer: coarse) {
+  .sidebar a, .elevator-btn { min-height: 44px; }
+  .card-icon { width: 48px; height: 48px; }
+}
+</style>
+</head>
+<body>
+
+<button class="hamburger" aria-label="Apri menu">☰</button>
+<div class="backdrop"></div>
+
+<div class="page">
+  <!-- ════ SIDEBAR / ELEVATOR ════ -->
+  <nav class="sidebar" aria-label="Navigazione principale">
+    <div class="elevator-panel">
+      <div class="elevator-display">
+        <span class="floor-number" id="floorDisplay">03</span>
+      </div>
+      <div class="elevator-buttons">
+        <a href="#home" class="elevator-btn active" data-floor="03">
+          <span class="elevator-btn-circle">03</span>
+          <span>Home</span>
+        </a>
+        <a href="#amministrazione" class="elevator-btn" data-floor="02">
+          <span class="elevator-btn-circle">02</span>
+          <span>Gestione</span>
+        </a>
+        <a href="#manutenzione" class="elevator-btn" data-floor="01">
+          <span class="elevator-btn-circle">01</span>
+          <span>Lavori</span>
+        </a>
+        <a href="#contatti" class="elevator-btn" data-floor="PT">
+          <span class="elevator-btn-circle">PT</span>
+          <span>Contatti</span>
+        </a>
+      </div>
+    </div>
+    <div class="elevator-brand">Code &amp; Design by<br>https://cod3.it</div>
+  </nav>
+
+  <!-- ════ GRID ════ -->
+  <div class="grid">
+
+    <!-- HERO -->
+    <div class="hero" id="home">
+      <div class="hero-logo-container">
+        <div class="hero-logo">
+          <svg viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
+            <g transform="translate(30,10)">
+              <rect x="0" y="70" width="35" height="110" rx="2" fill="#4a8c3f"/>
+              <rect x="5" y="82" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="5" y="96" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="5" y="110" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="5" y="124" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="5" y="138" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="5" y="152" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="42" y="30" width="40" height="150" rx="2" fill="#8db83a"/>
+              <rect x="48" y="42" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="58" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="74" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="90" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="106" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="122" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="138" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="48" y="154" width="28" height="7" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="90" y="55" width="35" height="125" rx="2" fill="#6ba03a"/>
+              <rect x="95" y="67" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="81" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="95" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="109" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="123" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="137" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <rect x="95" y="151" width="25" height="6" rx="1" fill="#fff" opacity="0.7"/>
+              <path d="M -5 180 Q 62 165 130 180" stroke="#2d6a30" stroke-width="3" fill="none"/>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <div class="hero-title">CRYSTAL Alto Vicentino s.r.l.</div>
+      <div class="hero-subtitle">Gestioni Immobiliari</div>
+    </div>
+
+    <!-- ════ AMMINISTRAZIONE ════ -->
+    <div class="separatore" id="amministrazione"><h2>Gestione dell'immobile</h2></div>
+
+    <div class="card grande">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M9 9h.01M15 9h.01M9 13h.01M15 13h.01"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Amministrazione condominiale</h3>
+        <p>Gestione professionale di condomini e supercondomini, residenziali e commerciali. Dalla contabilità alle assemblee, dagli adempimenti normativi alla cura quotidiana dell'immobile, con attenzione alle esigenze di ogni singolo condomino.</p>
+      </div>
+    </div>
+
+    <div class="card grande">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M12 2L2 7v10l10 5 10-5V7L12 2z"/><path d="M12 22V12M2 7l10 5 10-5"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Gestione patrimoni immobiliari</h3>
+        <p>Amministrazione di immobili per conto di proprietari terzi e gestione di inquilinati, garantendo la valorizzazione del patrimonio e la cura dei rapporti con gli occupanti nel rispetto delle normative vigenti.</p>
+      </div>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>
+      </div>
+      <h3>Documenti condominiali</h3>
+      <p>Redazione di regolamenti condominiali e tabelle millesimali, personalizzati sulle caratteristiche specifiche di ogni immobile.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+      </div>
+      <h3>Contrattualistica</h3>
+      <p>Stesura di contratti d'appalto con fornitori e collaboratori, con la consulenza di professionisti del settore per tutelare il condominio.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 9h20M8 15h4"/></svg>
+      </div>
+      <h3>Adempimenti fiscali</h3>
+      <p>Gestione completa dei rapporti fiscali del condominio, dalla dichiarazione dei redditi alle comunicazioni all'Agenzia delle Entrate.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+      </div>
+      <h3>Efficienza energetica</h3>
+      <p>Supporto per certificazioni energetiche, fonti rinnovabili e adeguamento degli impianti alle normative vigenti.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+      </div>
+      <h3>Consulenza legale</h3>
+      <p>Assistenza sulle questioni giuridiche della vita condominiale, in collaborazione con studi legali specializzati in materia.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
+      </div>
+      <h3>Assemblee e comunicazioni</h3>
+      <p>Organizzazione delle assemblee condominiali, verbalizzazione e gestione delle comunicazioni verso i condomini.</p>
+    </div>
+
+    <!-- ════ MANUTENZIONE ════ -->
+    <div class="separatore" id="manutenzione"><h2>Lavori di manutenzione</h2></div>
+
+    <div class="section-intro">
+      Crystal Alto Vicentino si avvale di una rete di collaboratori qualificati per rispondere a ogni esigenza manutentiva del condominio, dalla gestione ordinaria agli interventi straordinari.
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M3 22l1.5-4.5M22 2L11 13M16.5 2H22v5.5M12 18h6l2.5-2.5M2 12l2.5 2.5L7 12"/><circle cx="4.5" cy="19.5" r="2"/></svg>
+      </div>
+      <h3>Pulizie e vigilanza</h3>
+      <p>Servizi di pulizia scale e parti comuni, sorveglianza e controllo accessi per garantire decoro e sicurezza.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M12 2v20M2 12h20M12 2a5 5 0 015 5M12 2a5 5 0 00-5 5M12 22a5 5 0 005-5M12 22a5 5 0 01-5-5"/></svg>
+      </div>
+      <h3>Impianti e climatizzazione</h3>
+      <p>Manutenzione programmata degli impianti di riscaldamento, raffrescamento e delle reti fognarie condominiali.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
+      </div>
+      <h3>Piccoli interventi</h3>
+      <p>Tinteggiature, riparazioni urgenti e manutenzione ordinaria delle parti comuni dell'edificio.</p>
+    </div>
+
+    <div class="card piccolo">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M2 20h20M4 20V8l4-4h8l4 4v12M9 20v-4h6v4M10 8h4"/></svg>
+      </div>
+      <h3>Ristrutturazioni e coperture</h3>
+      <p>Interventi straordinari: rifacimento facciate, coperture, e ristrutturazioni condominiali con coordinamento completo del cantiere.</p>
+    </div>
+
+    <!-- ════ CONTATTI ════ -->
+    <div class="separatore" id="contatti"><h2>Contatti</h2></div>
+
+    <!-- Generali -->
+
+    <a class="card grande clickable" href="tel:0445652217">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>0445 652217</h3>
+        <p>Centralino unico per tutte le richieste. Il sistema di risposta automatica indirizza le chiamate sia verso il reparto interventi e manutenzione, sia verso la gestione amministrativa.</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+          Chiama
+        </span>
+      </div>
+    </a>
+
+    <a class="card grande clickable" href="https://www.google.com/maps/search/?api=1&query=Via+del+Costo+10+Zan%C3%A8+VI+36010" target="_blank" rel="noopener">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Sede operativa</h3>
+        <p>Via del Costo 10, 36010 Zanè (VI)</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
+          Apri in Google Maps
+        </span>
+      </div>
+    </a>
+
+    <div class="card piccolo social">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="1.8"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
+      </div>
+      <h3>Facebook</h3>
+      <p>Coming soon</p>
+    </div>
+
+    <div class="card piccolo social">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="1.8"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
+      </div>
+      <h3>LinkedIn</h3>
+      <p>Coming soon</p>
+    </div>
+
+    <div class="card piccolo social">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="1.8"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 2.24 3 5s-1.34 5-3 5-3-2.24-3-5 1.34-5 3-5zm-6.5 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/></svg>
+      </div>
+      <h3>Nextdoor</h3>
+      <p>Coming soon</p>
+    </div>
+
+    <!-- Clienti -->
+    <div class="sotto-separatore"><h3>Canali di contatto clienti</h3></div>
+
+    <a class="card grande clickable" href="tel:0445652217;1">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Urgenze e manutenzione</h3>
+        <p>0445 652217, tasto 1<br>Attivo 7 giorni su 7, 24 ore su 24. Per segnalare guasti e richiedere interventi urgenti sulle parti comuni.</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+          Chiama
+        </span>
+      </div>
+    </a>
+
+    <a class="card grande clickable" href="tel:0445652217;2">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Gestione amministrativa</h3>
+        <p>0445 652217, tasto 2<br>Raggiungibile dal lunedì al venerdì, 10:00–13:00 e 16:00–18:00. Incontri in sede solo su appuntamento.</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+          Chiama
+        </span>
+      </div>
+    </a>
+
+    <a class="card grande clickable" href="mailto:condomini@crystalsrl.com?subject=Email%20dal%20sito%3A%20contatto%20da%20parte%20di%20un%20condomino">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Email condomini</h3>
+        <p>condomini@crystalsrl.com<br>Per comunicazioni amministrative, richieste documentali e corrispondenza.</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+          Scrivi
+        </span>
+      </div>
+    </a>
+
+    <!-- Fornitori -->
+    <div class="sotto-separatore"><h3>Canali di contatto fornitori</h3></div>
+
+    <a class="card grande clickable" href="mailto:fornitori@crystalsrl.com?subject=Email%20dal%20sito%3A%20contatto%20da%20parte%20di%20un%20fornitore">
+      <div class="card-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.8"><rect x="1" y="3" width="15" height="13" rx="2"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
+      </div>
+      <div class="card-body">
+        <h3>Collaborazioni e forniture</h3>
+        <p>Proposte commerciali, preventivi e comunicazioni relative a forniture e servizi vanno indirizzate a <strong>fornitori@crystalsrl.com</strong>. Ogni proposta viene valutata e archiviata per le necessità dei condomini gestiti.</p>
+        <span class="card-action">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+          Scrivi
+        </span>
+      </div>
+    </a>
+
+    <!-- Footer -->
+    <div class="footer">
+      <p>© 2026 Crystal Alto Vicentino s.r.l. · P.IVA: 04615870245 · Via del Costo 10, 36010 Zanè (VI)</p>
+    </div>
+
+  </div>
+</div>
+
+<script>
+const hamburger = document.querySelector('.hamburger');
+const backdrop = document.querySelector('.backdrop');
+const sidebar = document.querySelector('.sidebar');
+const menuLinks = sidebar.querySelectorAll('.elevator-btn');
+
+function toggleMenu() { document.body.classList.toggle('menu-open'); }
+function closeMenu() { document.body.classList.remove('menu-open'); }
+hamburger.addEventListener('click', toggleMenu);
+backdrop.addEventListener('click', closeMenu);
+menuLinks.forEach(link => link.addEventListener('click', closeMenu));
+
+// Home button scrolls to absolute top
+document.querySelector('.elevator-btn[data-floor="03"]').addEventListener('click', function(e) {
+  e.preventDefault();
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+const sections = document.querySelectorAll('.separatore, .hero');
+const buttons = document.querySelectorAll('.elevator-btn');
+const floorDisplay = document.getElementById('floorDisplay');
+const floorMap = { 'home': '03', 'amministrazione': '02', 'manutenzione': '01', 'contatti': 'PT' };
+
+function updateFloor() {
+  let currentId = 'home';
+  if (window.scrollY > 50) {
+    sections.forEach(section => {
+      const id = section.id;
+      if (!id) return;
+      if (section.getBoundingClientRect().top <= window.innerHeight * 0.3) currentId = id;
+    });
+  }
+  const floor = floorMap[currentId] || '03';
+  floorDisplay.textContent = floor;
+  buttons.forEach(btn => btn.classList.toggle('active', btn.dataset.floor === floor));
+}
+window.addEventListener('scroll', updateFloor, { passive: true });
+updateFloor();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://crystalsrl.com/sitemap.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://crystalsrl.com/</loc>
+    <lastmod>2026-05-25</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>