719 lines
31 KiB
HTML
719 lines
31 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">
|
||
<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 & 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>
|