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>