/* ═══════════════════════════════════════════════════════════════════════
ValoreCasa Design System · valorecasa.css · v1.1.0
───────────────────────────────────────────────────────────────────────
Estetica mediterranea sobria — AVORIO caldo, VERDE petrolio, TERRACOTTA.
Light + dark di prima classe. Firma visiva: il "quaderno a quadretti".
Pensata per prodotti orientati ai numeri (dashboard, tool professionali)
dove la fiducia si MOSTRA e il dato è il protagonista.
┌─ COS'È ──────────────────────────────────────────────────────────────┐
│ Un singolo file CSS, puro, SENZA dipendenze. Funziona con React/Next, │
│ Vue, Svelte o HTML statico. Tutto è costruito su custom properties │
│ (--color-*) così puoi consumarle ovunque, anche dentro Tailwind con │
│ valori arbitrari: class="bg-[var(--color-surface)]". │
└────────────────────────────────────────────────────────────────────────┘
┌─ INSTALLA (3 passi) ──────────────────────────────────────────────────┐
│ 1. Copia questo file nel progetto. │
│ 2. Importalo UNA volta, il più in alto possibile: │
│ • CSS / Tailwind v4 : @import 'valorecasa.css'; │
│ • HTML :
│ 3. (Consigliato) carica il font Inter. In assenza usa system-ui. │
└────────────────────────────────────────────────────────────────────────┘
┌─ DARK MODE ───────────────────────────────────────────────────────────┐
│ Aggiungi/togli la classe `.dark` su (o ): │
│ document.documentElement.classList.toggle('dark'); │
│ Per il dark AUTOMATICO da OS, vedi lo snippet a fondo file. │
└────────────────────────────────────────────────────────────────────────┘
┌─ QUICK START (l'aspetto "ValoreCasa" in 30 secondi) ──────────────────┐
│ ← banda testata │
│ │
│
│
│
Annunci raccolti
│
│
Esplora i dati, città per città.
│
│
│
│ │
│ │
│
← card su superficie│
│ Vertici 12 │
│ │
│ │
│
│
└────────────────────────────────────────────────────────────────────────┘
┌─ INDICE ──────────────────────────────────────────────────────────────┐
│ 1. Token colore (light) 5. Pattern firma (band/card/btn/pill) │
│ 2. Token colore (dark) 6. Layer flottanti (modal/sheet/...) │
│ 3. Base (body, selezione) 7. Controlli (input/select/button) │
│ 4. Grid paper (quadretti) 8. Animazioni + reduced-motion │
└────────────────────────────────────────────────────────────────────────┘
═══════════════════════════════════════════════════════════════════════ */
/* ┌───────────────────────────────────────────────────────────────────────┐
│ 1 · TOKEN COLORE — TEMA CHIARO (default) │
│ │
│ Regola d'oro: NON scrivere mai colori hardcoded nei componenti. │
│ Usa sempre questi token, così cambiando palette qui cambia tutta l'app.│
│ │
│ Come consumarli: │
│ CSS → color: var(--color-text); background: var(--color-surface);│
│ Tailwind → text-[var(--color-text)] bg-[var(--color-surface)] │
│ │
│ Per una tinta del brand: color-mix(in srgb, var(--color-brand) 12%, transparent)
└───────────────────────────────────────────────────────────────────────┘ */
:root {
/* Sfondi, dal più chiaro (pagina) al più carico */
--color-bg: #f6f2ea; /* sfondo pagina (avorio caldo) */
--color-bg-secondary: #ebe3d6; /* fondo del gradiente, zone alternate */
--color-surface: #fffaf2; /* card, pannelli, modali (sopra il bg) */
--color-surface-muted: #f0e8dc; /* hover, righe attenuate, stati soft */
/* Testo */
--color-text: #1d211c; /* testo primario, numeri protagonisti */
--color-text-secondary: #626954;/* label, metadati, testo di servizio */
/* Strutture */
--color-border: #ddd3c4; /* bordi, divisori, linee della griglia */
/* Brand & accento — usa con parsimonia, sono i "sharp accents" */
--color-brand: #195d55; /* verde petrolio: CTA primarie, link */
--color-brand-strong: #0f3f3a; /* hover/pressed del brand, enfasi forte */
--color-accent: #bd6130; /* terracotta: stato attivo, evidenziazioni */
/* Token di sistema (raramente toccati a mano) */
--vc-scrim: rgba(17, 23, 20, 0.48); /* velo dietro overlay/modali */
--vc-shadow-color: rgba(19, 24, 19, 0.22); /* colore ombre dei layer */
--vc-grid-size: 48px; /* passo della griglia a quadretti */
--vc-radius: 12px; /* raggio standard di card/modali */
--vc-radius-sm: 8px; /* raggio di input/bottoni */
--vc-ring: 0 0 0 4px color-mix(in srgb, var(--color-brand) 16%, transparent); /* focus ring */
--vc-select-chevron: var(--color-brand-strong);
--vc-select-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent),
0 1px 2px color-mix(in srgb, var(--vc-shadow-color) 22%, transparent);
}
/* ┌───────────────────────────────────────────────────────────────────────┐
│ 2 · TOKEN COLORE — TEMA SCURO │
│ Stessi nomi, valori ribaltati. Si attiva con la classe `.dark`. │
│ In dark il brand/accent SCHIARISCONO (contrasto su fondo scuro). │
└───────────────────────────────────────────────────────────────────────┘ */
.dark {
--color-bg: #111714;
--color-bg-secondary: #1a221d;
--color-surface: #18211c;
--color-surface-muted: #202920;
--color-text: #f2eadf;
--color-text-secondary: #b8b0a3;
--color-border: #334039;
--color-brand: #7fc7b8;
--color-brand-strong: #a7ded0;
--color-accent: #f0ad73;
--vc-scrim: rgba(6, 10, 8, 0.62);
--vc-shadow-color: rgba(0, 0, 0, 0.5);
--vc-select-chevron: var(--color-brand-strong);
--vc-select-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
0 1px 2px color-mix(in srgb, var(--vc-shadow-color) 34%, transparent);
}
/* ┌───────────────────────────────────────────────────────────────────────┐
│ 3 · BASE │
│ Il riceve lo sfondo a doppio alone (accento + brand) sopra un │
│ gradiente verticale: è la "firma" calda della palette. Il font usa │
│ --font-sans se il progetto lo definisce, altrimenti Inter/system. │
└───────────────────────────────────────────────────────────────────────┘ */
body {
font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
background:
radial-gradient(circle at 14% -8%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 30rem),
radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--color-brand) 13%, transparent), transparent 34rem),
linear-gradient(180deg, var(--color-bg), var(--color-bg-secondary));
color: var(--color-text);
transition: background-color 0.2s, color 0.2s;
}
::selection {
background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}
button,
a,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent;
}
/* Numeri in colonna allineati (i numeri sono il protagonista). */
.vc-tnum {
font-variant-numeric: tabular-nums;
}
/* ┌───────────────────────────────────────────────────────────────────────┐
│ 4 · GRID PAPER — la firma "quaderno a quadretti" │
│ │
│ È un LAYER DECORATIVO: mettilo dentro un genitore `position: relative` │
│ con `overflow: hidden`. Non intercetta i click (pointer-events: none). │
│ │
│ (oppure un tuo div relative+overflow) │
│ │
│ ...contenuto sopra la griglia... │
│ │
│ │
│ Personalizza il passo: style="--vc-grid-size: 32px" │
└───────────────────────────────────────────────────────────────────────┘ */
.vc-grid-paper {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.7;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px);
background-size: var(--vc-grid-size) var(--vc-grid-size);
}
/* Transizione morbida durante il cambio tema (aggiungi/togli .theme-transition su ). */
html.theme-transition * {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* ┌───────────────────────────────────────────────────────────────────────┐
│ 5 · PATTERN FIRMA — i "mattoni" che rendono ogni app riconoscibile │
│ Sono classi pronte: usale e le tue app appariranno coerenti tra loro. │
└───────────────────────────────────────────────────────────────────────┘ */
/* — 5a. Banda testata col quaderno a quadretti —————————————————————————
La testata-tipo di ValoreCasa: eyebrow + titolo grande su griglia.
Sezione
Titolo della pagina.
Sottotitolo o descrizione…
*/
.vc-band {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.vc-band__inner {
position: relative; /* sopra il .vc-grid-paper */
max-width: 80rem;
margin-inline: auto;
padding: 2.5rem 1.5rem;
}
/* — 5b. Eyebrow + Titolo ————————————————————————————————————————————————
L'eyebrow è la piccola label uppercase del brand; il titolo è "font-black".
Il titolo è fluido (clamp): cresce coi viewport grandi senza media query. */
.vc-eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-brand-strong);
}
.vc-title {
margin: 0;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--color-text);
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
/* — 5c. Card su superficie ——————————————————————————————————————————————
Il contenitore base. NON annidare card dentro card (rumore visivo).
… (senza padding, lo gestisci tu) */
.vc-card {
border: 1px solid var(--color-border);
border-radius: var(--vc-radius);
background: var(--color-surface);
color: var(--color-text);
padding: 1.25rem;
}
.vc-card--flush {
padding: 0;
}
/* — 5d. Bottoni ————————————————————————————————————————————————————————
Base `.vc-btn` + UN modificatore. Gerarchia chiara, non rendere tutto primario.
Disabilitato: aggiungi l'attributo `disabled`. Hanno già focus-visible. */
.vc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: 2.5rem; /* compatto; per touch puro porta a 2.75rem */
padding-inline: 0.875rem;
border: 1px solid transparent;
border-radius: var(--vc-radius-sm);
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.vc-btn:focus-visible {
outline: none;
box-shadow: var(--vc-ring);
}
.vc-btn:disabled,
.vc-btn[aria-disabled='true'] {
opacity: 0.4;
cursor: not-allowed;
}
/* Primario: pieno brand. La CTA che vuoi far premere. */
.vc-btn--primary {
background: var(--color-brand);
color: #fff;
}
.vc-btn--primary:hover:not(:disabled) {
background: var(--color-brand-strong);
}
/* Outline: bordo neutro, si "accende" sul brand all'hover. */
.vc-btn--outline {
border-color: var(--color-border);
background: var(--color-bg);
color: var(--color-text);
}
.vc-btn--outline:hover:not(:disabled) {
border-color: var(--color-brand);
color: var(--color-brand-strong);
}
/* Ghost: solo testo, fondo all'hover. Per azioni minori (annulla, reset). */
.vc-btn--ghost {
color: var(--color-text-secondary);
font-weight: 500;
}
.vc-btn--ghost:hover:not(:disabled) {
background: var(--color-surface-muted);
color: var(--color-text);
}
/* Accent: terracotta pieno. Per lo stato ATTIVO di un toggle (es. "in disegno"). */
.vc-btn--accent {
background: var(--color-accent);
color: #fff;
box-shadow: 0 1px 2px var(--vc-shadow-color);
}
.vc-btn--accent:hover:not(:disabled) {
opacity: 0.9;
}
/* — 5e. Pill / Badge ————————————————————————————————————————————————————
Pill: contenitore di un piccolo dato (es. conteggio). Numero in tabular.
Vertici 12
Badge: etichetta di stato semantica.
Verificato */
.vc-pill {
display: inline-flex;
align-items: center;
gap: 0.375rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg);
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.vc-pill b,
.vc-pill strong {
font-weight: 700;
color: var(--color-text);
}
.vc-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border-radius: 999px;
padding: 0.125rem 0.5rem;
font-size: 0.6875rem;
font-weight: 700;
}
.vc-badge--brand {
background: color-mix(in srgb, var(--color-brand) 16%, transparent);
color: var(--color-brand-strong);
}
.vc-badge--accent {
background: color-mix(in srgb, var(--color-accent) 18%, transparent);
color: var(--color-accent);
}
.vc-badge--neutral {
background: var(--color-surface-muted);
color: var(--color-text-secondary);
}
/* — 5f. Status dot ——————————————————————————————————————————————————————
Pallino-semaforo per righe di stato. Default neutro; modificatori colore.