/* ============================================================ GALLERIANGELINI — Variabili CSS · VARIANTE A "Bottega di Lusso" — toni scuri e sobri, oro antico opaco. Ispirata alle boutique di interior design di lusso (RH, Loro Piana). ┌─────────────────────────────────────────────────────┐ │ PER PASSARE ALLA VARIANTE B (naturale raffinata): │ │ In ogni file HTML, nella sezione , commenta │ │ la riga con variables.css e decommenta quella con │ │ variables-b.css. Tutte le istruzioni sono lì. │ └─────────────────────────────────────────────────────┘ ============================================================ */ /* --- Import font — Variante A --- Cormorant Garamond: serif ultra-elegante, alto contrasto (usato nei titoli) Raleway: geometrico editoriale, molto pulito (usato nel corpo testo) --------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600&display=swap'); :root { /* ── Palette Variante A — "Bottega di Lusso" ──────────── Toni: espresso quasi-nero · pietra calda · oro-bronzo opaco ─────────────────────────────────────────────────────── */ --color-cream: #EEE8DF; /* sfondo principale — pietra calda */ --color-cream-dark: #E3DBCF; /* sfondo sezioni alternate */ --color-beige: #C0B4A6; /* bordi, divisori — grigio-caldo */ --color-brass: #9E7840; /* accento principale — bronzo antico */ --color-brass-dark: #7A5C2C; /* hover bottoni — bronzo scuro */ --color-wood: #1A1310; /* testo principale — espresso quasi-nero */ --color-wood-light: #46352A; /* testo secondario — cioccolato scuro */ --color-white: #F6F1EB; /* "bianco" — avorio caldo per le card */ --color-gray-light: #E8E0D5; /* sfondo input, card leggere */ --color-gray-mid: #8A7C6E; /* placeholder, label — grigio-taupe */ --color-overlay: rgba(20, 14, 10, 0.60); /* overlay hero */ /* ── Tipografia — Variante A ───────────────────────────── Cormorant Garamond: alto contrasto, leggermente condensato, perfetto per marchi luxury (fashion, design, antiquariato). Raleway: geometrico, molto leggibile a piccole dimensioni. ─────────────────────────────────────────────────────── */ --font-serif: 'Cormorant Garamond', 'Garamond', Georgia, serif; --font-sans: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* --- Scale tipografica (identica in entrambe le varianti) --- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.25rem; /* 52px */ --text-5xl: 4rem; /* 64px */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-loose: 1.8; /* --- Spaziature (identiche in entrambe le varianti) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* --- Layout --- */ --container-max: 1200px; --container-wide: 1400px; --container-pad: clamp(1rem, 5vw, 2.5rem); /* --- Bordi e ombre — A: più marcate, più drammatiche --- */ --radius-sm: 2px; /* bordi quasi squadrati — più formale */ --radius-md: 6px; --radius-lg: 12px; --radius-xl: 20px; --shadow-sm: 0 1px 6px rgba(20,14,10,0.10); --shadow-md: 0 4px 20px rgba(20,14,10,0.15); --shadow-lg: 0 8px 36px rgba(20,14,10,0.20); --shadow-xl: 0 16px 56px rgba(20,14,10,0.25); /* --- Transizioni --- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* --- Header --- */ --header-height: 72px; } /* Breakpoint reference (usati in media queries): sm: 480px | md: 768px | lg: 1024px | xl: 1280px */