/* * Villa Verbena — Design Tokens * Estratti da Mockup.html (linea guida grafica canonica del progetto). * * Concept: monografia architettonica di lusso — palette calda materica * (crema → sabbia → terracotta con contrappunto teal profondo), * tipografia editoriale (Italiana + Cormorant Garamond + IBM Plex Mono). * * Font Google richiesti (importare in o main.css): * family=Italiana * family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700 * family=IBM+Plex+Mono:wght@300;400;500 */ :root { /* ──────────────────────────────────────────────── PALETTE — SFONDI (tri-cromia Terra · Cielo · Mare) Concept: il paesaggio ligure di Sanremo — il verde-oliva della terra coltivata, l'azzurro del cielo mediterraneo, il blu profondo del mare. Le sezioni si alternano su questi tre toni per raccontare il luogo. L'accento terracotta (la villa stessa) è complementare del verde e stacca sia sul cielo che sul mare. ──────────────────────────────────────────────── */ --color-bg-cream: #e6e6c8; /* TERRA — oliva pallido caldo (sfondo base pagina) */ --color-bg-sand: #cad9dd; /* CIELO — azzurro mediterraneo pallido (sezione territorio) */ --color-bg-teal: #1e4265; /* MARE — blu marino profondo (hero, citazione) */ --color-bg-night: #0f1e2b; /* NOTTE — blu-nero crepuscolare (footer) */ /* Alias semantici — usare questi nei componenti nuovi per esplicitare il concept */ --color-bg-earth: var(--color-bg-cream); --color-bg-sky: var(--color-bg-sand); --color-bg-sea: var(--color-bg-teal); --color-bg-dusk: var(--color-bg-night); /* ──────────────────────────────────────────────── PALETTE — ACCENTO (Terracotta) ──────────────────────────────────────────────── */ --color-accent: #a4502f; /* Terracotta principale (eyebrow numeri, link, sezione contatti) */ --color-accent-hover: #7d3a20; /* Hover terracotta */ /* ──────────────────────────────────────────────── PALETTE — TESTO SU FONDO CHIARO ──────────────────────────────────────────────── */ --color-text-primary: #2b2620; /* Titoli, testo principale */ --color-text-secondary: #4a4237; /* Body paragrafi */ --color-text-muted: #5b5142; /* Body secondario */ --color-text-meta: #6c6a43; /* Etichette mono, meta, coordinate — oliva profondo caldo */ --color-text-placeholder: #8d8b6a; /* ──────────────────────────────────────────────── PALETTE — TESTO SU FONDO SCURO / TERRACOTTA ──────────────────────────────────────────────── */ --color-text-on-dark: #f6f1e7; /* Testo principale su teal */ --color-text-on-dark-soft: #e8ddc8; /* Testo attenuato su teal */ --color-text-on-dark-warm: #ece4d2; /* Testo caldo su teal */ --color-text-quote-by: #b7a988; /* By-line citazione */ --color-text-on-accent: #fdf7ec; /* Testo su terracotta */ --color-text-on-accent-soft: #f6e5d2; --color-text-on-accent-mute: #f0cdb2; /* ──────────────────────────────────────────────── PALETTE — BORDI, DIVIDER, OVERLAY ──────────────────────────────────────────────── */ --color-divider: #a6a37c; /* Hairline su TERRA — oliva scuro */ --color-divider-soft: #bcba93; /* Hairline strip coordinate — oliva tenue */ --color-divider-sky: #8ba8b3; /* Hairline su CIELO — azzurro scuro polveroso */ --color-divider-on-dark: rgba(246, 241, 231, 0.12); /* Overlay hero — sfumatura blu marino coerente con il MARE profondo */ --overlay-hero-top: rgba(15, 30, 50, 0.42); --overlay-hero-mid: rgba(15, 30, 50, 0.06); --overlay-hero-bottom: rgba(10, 20, 34, 0.58); --overlay-nav-top: rgba(15, 30, 50, 0.82); --overlay-nav-bottom: rgba(15, 30, 50, 0.68); /* Selezione testo */ --selection-bg: var(--color-accent); --selection-fg: var(--color-text-on-dark); /* ──────────────────────────────────────────────── TIPOGRAFIA — FONT FAMILIES ──────────────────────────────────────────────── */ --font-display: 'Italiana', 'Cormorant Garamond', Georgia, serif; /* Titoli e display */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* Body */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Etichette, meta, nav */ /* ──────────────────────────────────────────────── TIPOGRAFIA — SCALE FLUIDA (clamp) ──────────────────────────────────────────────── */ --fs-hero: clamp(64px, 11vw, 148px); /* H1 hero */ --fs-section: clamp(40px, 4.6vw, 62px); /* H2 sezione */ --fs-quote: clamp(28px, 3.4vw, 44px); /* Blockquote */ --fs-thanks: 36px; /* Titolo ringraziamento form */ --fs-card-title: 30px; /* Titoli card territorio */ --fs-fact: 26px; /* Valori griglia facts */ --fs-faq: 25px; /* Domande FAQ */ --fs-hero-sub: 24px; /* Sottotitolo hero */ --fs-body-lg: 21px; /* Body principale sezioni */ --fs-body: 19px; /* Body form / neutro */ --fs-body-sm: 18px; /* Body card e FAQ */ /* Etichette monospace (nav, eyebrow, meta) */ --fs-mono-lg: 13px; /* Contatti mono */ --fs-mono-md: 12px; /* Bottone CTA / hero eyebrow */ --fs-mono-sm: 11px; /* Nav, eyebrow sezioni, strip */ --fs-mono-xs: 10px; /* Facts label, footer */ /* ──────────────────────────────────────────────── TIPOGRAFIA — LINE HEIGHT, LETTER SPACING ──────────────────────────────────────────────── */ --lh-display: 0.95; /* H1 hero */ --lh-section: 1.06; /* H2 sezione */ --lh-quote: 1.35; --lh-body: 1.6; --lh-body-tight: 1.55; --lh-body-pretty: 1.45; --ls-mono-hero: 0.34em; /* Hero eyebrow */ --ls-mono-strong: 0.30em; /* Eyebrow sezioni numerate */ --ls-mono: 0.28em; /* CTA hero */ --ls-mono-nav: 0.24em; /* Strip, facts */ --ls-mono-key: 0.22em; /* Nav voci, facts key */ --ls-mono-btn: 0.26em; /* Bottone form */ --ls-mono-soft: 0.18em; /* Caption, lang toggle */ --ls-mono-tag: 0.14em; /* Privacy note */ --ls-brand: 0.14em; /* Logo nav */ --ls-brand-footer: 0.12em; /* Logo footer */ /* ──────────────────────────────────────────────── LAYOUT — SPAZIATURE E CONTENITORI ──────────────────────────────────────────────── */ --container-max: 1180px; /* Larghezza max contenuto sezioni */ --hero-min-height: 640px; --pad-section-y-lg: 110px; /* Padding verticale sezioni principali */ --pad-section-y-md: 88px; /* Padding sezione citazione */ --pad-section-y-sm: 26px; /* Strip coordinate */ --pad-section-x: 40px; /* Padding orizzontale sezioni */ --pad-nav-y: 18px; --pad-footer-y: 34px; --gap-grid-main: 70px; /* Gap griglia progetto */ --gap-grid-cards: 26px; /* Gap griglia territorio */ --gap-grid-inner: 18px; /* Gap interno mosaico immagini */ --gap-form: 18px; /* ──────────────────────────────────────────────── DETTAGLI VISIVI ──────────────────────────────────────────────── */ --radius-pill: 999px; /* Bottone lingua nav — unico elemento pill */ --border-hairline: 1px solid var(--color-divider); --border-on-dark: 1px solid var(--color-divider-on-dark); --border-input-on-accent: 1px solid rgba(253, 247, 236, 0.45); --border-input-on-accent-focus: 1px solid #fdf7ec; --backdrop-blur-nav: blur(10px); --backdrop-blur-btn: blur(6px); /* ──────────────────────────────────────────────── ANIMAZIONI ──────────────────────────────────────────────── */ --easing-editorial: cubic-bezier(0.22, 1, 0.36, 1); --duration-rise: 1.2s; --duration-fade: 0.6s; --duration-fadein-slow: 1.4s; /* ──────────────────────────────────────────────── GRIGLIE RICORRENTI ──────────────────────────────────────────────── */ --grid-project: minmax(300px, 5fr) minmax(320px, 6fr); /* Sezione progetto (testo | immagini) */ --grid-contact: minmax(300px, 1fr) minmax(320px, 1fr); /* Sezione contatti (testo | form) */ --grid-territory: repeat(3, 1fr); /* Card territorio */ --grid-facts: 1fr 1fr; /* Griglia facts e FAQ */ --card-territory-image-h: 380px; } /* ──────────────────────────────────────────────── ANIMAZIONI GLOBALI (keyframes riutilizzabili) ──────────────────────────────────────────────── */ @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ──────────────────────────────────────────────── COMPAT — Alias legacy → nuovi token del mockup. I file CSS storici (components.css, sections.css, interactive.css, main.css) usano nomi variabile della vecchia palette navy/sage/sand. Questi alias rimappano tutto ai token del mockup, così la palette si allinea automaticamente. Rimuovere quando i file legacy saranno rifattorizzati sui nomi nuovi. ──────────────────────────────────────────────── */ :root { /* Colori — alias */ --color-bg-warm: var(--color-bg-cream); --color-text-main: var(--color-text-primary); --color-navy: var(--color-bg-teal); --color-navy-light: #2a4a5c; /* teal più chiaro per accenti */ --color-navy-dark: var(--color-bg-night); --color-sand: var(--color-bg-sand); --color-sand-light: #f0e6d3; --color-sage: var(--color-text-meta); /* niente verde nel mockup → bruno tenue */ --color-sage-light: var(--color-divider-soft); --color-sage-dark: var(--color-text-secondary); --color-tech-gray: var(--color-divider-soft); --color-white-warm: var(--color-text-on-dark); --color-overlay: var(--overlay-hero-top); --color-overlay-dark: var(--overlay-hero-bottom); /* Font — alias. Il mockup non usa un sans: le etichette sono mono, il body è serif. Mappiamo --font-sans su --font-serif per non spaccare i vecchi layout testuali; per etichette/nav/meta usare direttamente --font-mono. */ --font-sans: var(--font-serif); /* Radius — il mockup è editoriale/flat: solo pill sopravvive */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: var(--radius-pill); /* Shadow — flat design, ombre neutralizzate ma non nulle per evitare glitch di layout su elementi che le usano come spaziatura */ --shadow-soft: 0 1px 2px rgba(43, 38, 32, 0.04); --shadow-medium: 0 2px 6px rgba(43, 38, 32, 0.06); --shadow-premium: 0 4px 14px rgba(43, 38, 32, 0.08); --shadow-header: 0 1px 0 var(--color-divider-on-dark); /* Transizioni — allineate all'easing editoriale del mockup */ --transition-fast: all 0.2s var(--easing-editorial); --transition-smooth: all 0.4s var(--easing-editorial); --transition-slow: all 0.8s var(--easing-editorial); /* Spacing — mantenuto per compatibilità (il mockup usa pad-section-* diretti) */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 3rem; /* 48px */ --spacing-xl: 5rem; /* 80px */ --spacing-xxl: 8rem; /* 128px */ /* Container — allineato al mockup (1180px, il vecchio era 1280px) */ --container-width: var(--container-max); --container-width-narrow: 900px; } /* ──────────────────────────────────────────────── BASE (opzionale — se questo file è l'unico caricato) ──────────────────────────────────────────────── */ html { scroll-behavior: smooth; } ::selection { background: var(--selection-bg); color: var(--selection-fg); }