albertuan
8002773186
- Logo ufficiale Crystal in favicon e sistemazione SVG (#8, #13) - Numerazione elevator panel da 03/02/01 a P3/P2/P1 (#9) - Aggiornati testi: amministrazione, adempimenti e ristrutturazioni (#10) - Nuove card: Reperibilità H24, Consulenze tecniche, catastali, locazione (#11) - Ridisegnate icone SVG: patrimoni, legale, pulizie, climatizzazione, interventi, ristrutturazioni (#12) Reviewed-on: #14
736 lines
38 KiB
HTML
736 lines
38 KiB
HTML
<!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">
|
||
<meta name="version" content="0.0.2">
|
||
<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/">
|
||
<meta property="og:image" content="https://crystalsrl-com.web.app/og-image.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<title>Crystal Alto Vicentino s.r.l. | Gestioni Immobiliari</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%2260%2055%20890%20720%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath%20clipPathUnits%3D%22userSpaceOnUse%22%20id%3D%22c%22%3E%3Crect%20width%3D%22826.8%22%20height%3D%22703.4%22%20x%3D%2271.7%22%20y%3D%2265%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%3Cpath%20fill%3D%22%23bbfc02%22%20d%3D%22m391.79%20662.16.03-75.77%20123.49.86-1.11%2087.13c-9.08%202.67-19.24%206.41-27.5%209.88-42.85-13.05-50.55-14.38-94.9-22.1zm153.78-74.98%20105.82.47.09%2055.28c-38.37%204.87-67.67%2010.95-105.22%2021.02zm230.25%202-.17%2043.64s-48.33%201.29-92.4%206.59c.05-.04-.13-51.72-.13-51.72zM681.7%20563.09l-.27-61.23%2094.33%2017.08v49.52zm-136.86-6.78-.81-77.38%20107.48%2018.9.1%2064.27zm-153.1-7.55-.02-94.04%20123.22%2022.57-.56%2077.08zm290.04-71.94-.09-58.13%2094.06%2030.62v48.56zm-136.15-27.5-.5-75.19%20107.5%2035.37.27%2063.13zM391.76%20418l-.04-94.36%20122.78%2040.77.38%2079.46zm290.51-24.13-.22-60.39%2093.7%2045.78-.34%2049.48zm-137.16-50.47-.8-76.53s109.35%2053.34%20109.33%2053.29l-1.5%2062.52zm137.77-33.79.27-60.56%2092.62%2060.43.14%2049.02zM391.98%20287.53s-.21-94.84-.19-94.84l122.88%2059.73s.06%2079.43.06%2079.43zm153.58-49.3.24-76.61s105.7%2069.22%20105.77%2069.07l-.06%2062.05zM391.82%20157.33c.01-.32.11-92.36.11-92.36l122.86%2076.21s-.07%2079.27-.17%2079.42c0%200-122.97-63.93-122.8-63.27z%22%2F%3E%3Cpath%20fill%3D%22%23376f00%22%20d%3D%22M70.89%20691.05c176.07-42.57%20319.44-11.41%20414.36%209.41%20144.6-46.48%20272.75-57.15%20414.08-37.21-168.96-2.96-334.26%2025.95-497.85%2096.5-10.7-5.64-125.5-91.09-330.59-68.7zM514.68%20174.71c10.41-4.28%2020.73-8.24%2031.12-13.1.36.85-.67%20498.56.67%20502.3-1.4.43-26.31%208.69-32.3%2010.47-.03-166.16-.1-333.45.51-499.67zm-256.41%20475.1c-55.22.36-66.57%203.25-100.33%206.46L157.47%20221.64s164.32-106.33%20234.54-156.58c.34%2026.55-.26%2088.66-.15%2092.31-62.87%2033.12-192.22%20105.49-192.22%20105.49l.32%2028.45s191.85-98.62%20191.84-98.62l.21%2094.84-76.25%2028.19-.01%2033.97%2075.97-26.05.04%2094.11L219.25%20455.76l.13%2029.23%20172.35-30.28.02%2094.04-119.79%206.2.55%2032.55%20119.32-1.11.03%2075.58c-44.09-8.2-61.22-9.88-133.59-12.17zm393.26-389.92%2031.63-10.83.17%20390.41c-10.28.9-21.01%201.78-31.94%203.48z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E" 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: 280px; 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: 180px; }
|
||
|
||
/* 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">P3</span>
|
||
</div>
|
||
<div class="elevator-buttons">
|
||
<a href="#home" class="elevator-btn active" data-floor="P3">
|
||
<span class="elevator-btn-circle">P3</span>
|
||
<span>Home</span>
|
||
</a>
|
||
<a href="#amministrazione" class="elevator-btn" data-floor="P2">
|
||
<span class="elevator-btn-circle">P2</span>
|
||
<span>Gestione</span>
|
||
</a>
|
||
<a href="#manutenzione" class="elevator-btn" data-floor="P1">
|
||
<span class="elevator-btn-circle">P1</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 & 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="60 55 890 720" xmlns="http://www.w3.org/2000/svg"><defs><clipPath clipPathUnits="userSpaceOnUse" id="logoClip"><rect width="826.8" height="703.4" x="71.7" y="65"/></clipPath></defs><g clip-path="url(#logoClip)"><path fill="#bbfc02" d="m391.79 662.16.03-75.77 123.49.86-1.11 87.13c-9.08 2.67-19.24 6.41-27.5 9.88-42.85-13.05-50.55-14.38-94.9-22.1zm153.78-74.98 105.82.47.09 55.28c-38.37 4.87-67.67 10.95-105.22 21.02zm230.25 2 -.17 43.64s-48.33 1.29-92.4 6.59c.05-.04-.13-51.72-.13-51.72zM681.7 563.09l-.27-61.23 94.33 17.08v49.52zm-136.86-6.78-.81-77.38 107.48 18.9.1 64.27zm-153.1-7.55-.02-94.04 123.22 22.57-.56 77.08zm290.04-71.94-.09-58.13 94.06 30.62v48.56zm-136.15-27.5-.5-75.19 107.5 35.37.27 63.13zM391.76 418l-.04-94.36 122.78 40.77.38 79.46zm290.51-24.13-.22-60.39 93.7 45.78-.34 49.48zm-137.16-50.47-.8-76.53s109.35 53.34 109.33 53.29l-1.5 62.52zm137.77-33.79.27-60.56 92.62 60.43.14 49.02zM391.98 287.53s-.21-94.84-.19-94.84l122.88 59.73s.06 79.43.06 79.43zm153.58-49.3.24-76.61s105.7 69.22 105.77 69.07l-.06 62.05zM391.82 157.33c.01-.32.11-92.36.11-92.36l122.86 76.21s-.07 79.27-.17 79.42c0 0-122.97-63.93-122.8-63.27z"/><path fill="#376f00" d="M70.89 691.05c176.07-42.57 319.44-11.41 414.36 9.41 144.6-46.48 272.75-57.15 414.08-37.21-168.96-2.96-334.26 25.95-497.85 96.5-10.7-5.64-125.5-91.09-330.59-68.7zM514.68 174.71c10.41-4.28 20.73-8.24 31.12-13.1.36.85-.67 498.56.67 502.3-1.4.43-26.31 8.69-32.3 10.47-.03-166.16-.1-333.45.51-499.67zm-256.41 475.1c-55.22.36-66.57 3.25-100.33 6.46L157.47 221.64s164.32-106.33 234.54-156.58c.34 26.55-.26 88.66-.15 92.31-62.87 33.12-192.22 105.49-192.22 105.49l.32 28.45s191.85-98.62 191.84-98.62l.21 94.84-76.25 28.19-.01 33.97 75.97-26.05.04 94.11L219.25 455.76l.13 29.23 172.35-30.28.02 94.04-119.79 6.2.55 32.55 119.32-1.11.03 75.58c-44.09-8.2-61.22-9.88-133.59-12.17zm393.26-389.92 31.63-10.83.17 390.41c-10.28.9-21.01 1.78-31.94 3.48z"/></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>Il nostro Team, di consolidata esperienza, offre una gestione professionale di condomini e super condomini, 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.4" stroke-linecap="round" stroke-linejoin="round"><path d="M1 20.5l1.5-5h4l1.5 5z"/><path d="M8.5 20.5l1.5-5h4l1.5 5z"/><path d="M16 20.5l1.5-5h4l1.5 5z"/><path d="M4.5 14.5l1.5-5h4l1.5 5z"/><path d="M12 14.5l1.5-5h4l1.5 5z"/><path d="M8 8.5l1.5-5h5l1.5 5z"/></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, dalle dichiarazioni alle certificazioni con relative 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"><line x1="12" y1="3" x2="12" y2="21"/><line x1="4" y1="7" x2="20" y2="7"/><path d="M4 7l-1 6h6L8 7"/><path d="M16 7l-1 6h6l-1-6"/><path d="M10 21h4"/><polygon points="12,3 11,5 13,5" fill="#2d6a30" stroke="none"/></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>
|
||
|
||
<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 16h20"/><path d="M4 16v-2a8 8 0 0116 0v2"/><path d="M12 4v2"/><path d="M12 4a3 3 0 00-3 3v1h6V7a3 3 0 00-3-3z"/><line x1="9" y1="8" x2="9" y2="14"/><line x1="15" y1="8" x2="15" y2="14"/></svg>
|
||
</div>
|
||
<h3>Consulenze tecniche</h3>
|
||
<p>Consulenza e assistenza ai condomini e ai condomini su questioni tecniche, edili e urbanistiche in ambito condominiale, in collaborazione con studi professionali 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"><rect x="2" y="8" width="20" height="8" rx="1"/><line x1="6" y1="8" x2="6" y2="12"/><line x1="10" y1="8" x2="10" y2="14"/><line x1="14" y1="8" x2="14" y2="12"/><line x1="18" y1="8" x2="18" y2="14"/></svg>
|
||
</div>
|
||
<h3>Consulenze catastali</h3>
|
||
<p>Consulenza e assistenza ai condomini e ai condomini su questioni catastali e ipotecarie, in collaborazione con studi professionali 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="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"/><path d="M8 17c1 0 1.5-.5 2.5-.5s1.5.5 2.5.5 1.5-.5 2.5-.5"/><path d="M16 20l2-2-1.5-1.5"/></svg>
|
||
</div>
|
||
<h3>Consulenze sulla locazione</h3>
|
||
<p>Consulenza e assistenza ai condomini in merito alla stesura, alla gestione e alla registrazione di contratti di locazione residenziale e/o commerciale.</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"><rect x="2" y="9" width="12" height="6" rx="1"/><path d="M14 9l4-2v10l-4-2z"/><line x1="20" y1="8" x2="23" y2="6"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="20" y1="16" x2="23" y2="18"/></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.6" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="22"/><line x1="3.34" y1="7" x2="20.66" y2="17"/><line x1="20.66" y1="7" x2="3.34" y2="17"/><g><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g><g transform="rotate(60,12,12)"><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g><g transform="rotate(120,12,12)"><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g><g transform="rotate(180,12,12)"><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g><g transform="rotate(240,12,12)"><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g><g transform="rotate(300,12,12)"><line x1="12" y1="8" x2="9.5" y2="5.5"/><line x1="12" y1="8" x2="14.5" y2="5.5"/><line x1="12" y1="5" x2="9.5" y2="2.5"/><line x1="12" y1="5" x2="14.5" y2="2.5"/></g></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.6" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(-45,12,12)"><rect x="5.5" y="2" width="13" height="4" rx="1.5"/><path d="M12 14L12 8L3.5 8L3.5 4L5.5 4"/><rect x="10.5" y="14" width="3" height="7" rx="0.8"/></g></svg>
|
||
</div>
|
||
<h3>Piccoli interventi</h3>
|
||
<p>Tinteggiature, riparazioni urgenti e manutenzione ordinaria delle parti comuni dell'edificio.</p>
|
||
</div>
|
||
|
||
<div class="card grande">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#2d6a30" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="4" rx="0.8"/><rect x="13" y="4" width="7" height="4" rx="0.8"/><rect x="1" y="10" width="6.5" height="4" rx="0.8"/><rect x="9" y="10" width="6" height="4" rx="0.8"/><rect x="16.5" y="10" width="6.5" height="4" rx="0.8"/><rect x="4" y="16" width="7" height="4" rx="0.8"/><rect x="13" y="16" width="7" height="4" rx="0.8"/></svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Ristrutturazioni e manutenzioni</h3>
|
||
<p>Gestione degli interventi ordinari e straordinari: rifacimento facciate, coperture, e ristrutturazioni condominiali con coordinamento completo del cantiere in collaborazione con studi professionali specializzati in materia.</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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><path d="M22 12h-2M4 12H2M12 2v2M12 20v2"/></svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Reperibilità H24</h3>
|
||
<p>Messa a disposizione di tutti i condomini di un servizio di reperibilità H24 per attività di manutenzione e di gestione di interventi urgenti con incarico diretto ai manutentori del condominio.</p>
|
||
</div>
|
||
</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) · <span id="versionDisplay"></span></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="P3"]').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': 'P3', 'amministrazione': 'P2', 'manutenzione': 'P1', '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 });
|
||
|
||
// Inizializzazione
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const version = document.querySelector('meta[name="version"]')?.content;
|
||
if (version) document.getElementById('versionDisplay').textContent = `v${version}`;
|
||
updateFloor();
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|