/* ===================================================================== LAVANDERIA MARY — Design Foundations Colors & Typography tokens Atelier del tessuto · Lugano–Paradiso, Svizzera --------------------------------------------------------------------- Fonts load from Google Fonts (see in each HTML file): Cormorant Garamond (display serif) · Mulish (body sans) ===================================================================== */ /* Fonts are self-hosted (see fonts.css, linked in each HTML ) — GDPR: no calls to Google. */ :root { /* --------------------------------------------------------------- BRAND COLOR — Vinaccia (aubergine wine, drawn from the logo plum) --------------------------------------------------------------- */ --vinaccia-900: #2E1428; /* deepest, near-black plum */ --vinaccia-800: #3E1C38; --vinaccia-700: #4E2347; --vinaccia-600: #5A2A4F; /* PRIMARY brand plum */ --vinaccia-500: #6E3A62; --vinaccia-300: #A07E97; /* muted plum for secondary text on dark */ --vinaccia-100: #EBDFE8; /* tint wash / hover surface */ --vinaccia-050: #F6EEF4; /* --------------------------------------------------------------- METAL — Ottone (champagne brass), the single luxe accent --------------------------------------------------------------- */ --ottone-700: #8C6A38; /* text-safe brass on ivory */ --ottone-600: #A8814A; --ottone-500: #B08D57; /* ACCENT brass */ --ottone-400: #C9AE82; /* light brass / hairline gilt */ --ottone-200: #E7D9BF; --ottone-050: #F7F0E2; /* --------------------------------------------------------------- NEUTRALS — warm ink → ivory (the canvas) --------------------------------------------------------------- */ --ink-900: #221B20; /* primary text — warm near-black */ --ink-700: #43383F; --ink-500: #6E6168; /* secondary text */ --ink-400: #8C8087; /* tertiary / captions */ --line-300: #D8CDBB; /* default hairline border */ --line-200: #E4DCCF; /* faint divider */ --avorio-100: #F6F1E9; /* PAGE background — ivory */ --avorio-050: #FBF8F2; /* raised surface / card cream */ --bianco: #FFFFFF; /* a rare cool note kept from the original mark — used sparingly */ --acqua-500: #5E8FB0; /* lake-blue, decorative only */ /* --------------------------------------------------------------- ACQUA — water-blue (from the logo). Secondary accent: signals cleanliness / freshness / water. Used for "clean" cues, small marks, icon accents, link hovers — never large saturated fills. --------------------------------------------------------------- */ --acqua-800: #1F4F66; /* deepest, text on light */ --acqua-700: #2C6B88; /* text-safe on ivory */ --acqua-600: #3E89AE; --acqua-500: #4E9DC4; /* ACCENT-COOL — the logo blue, refined */ --acqua-400: #7CBBD8; --acqua-200: #C2E0EC; --acqua-100: #E3F0F6; --acqua-050: #F3F9FC; /* faintest wash for gradients */ /* --------------------------------------------------------------- SEMANTIC COLOR ROLES --------------------------------------------------------------- */ --bg: var(--avorio-100); --surface: var(--avorio-050); --surface-raised: var(--bianco); --fg1: var(--ink-900); /* primary text */ --fg2: var(--ink-500); /* secondary text */ --fg3: var(--ink-400); /* tertiary text */ --fg-on-dark: #F3EAEF; --fg2-on-dark: var(--vinaccia-300); --brand: var(--vinaccia-600); --brand-strong: var(--vinaccia-800); --accent: var(--ottone-500); --accent-ink: var(--ottone-700); --accent-cool: var(--acqua-500); /* water-blue secondary accent */ --accent-cool-ink: var(--acqua-700); /* text-safe water-blue */ --border: var(--line-300); --border-faint: var(--line-200); --focus-ring: var(--ottone-500); --success: #4F6F52; --danger: #8C3B3B; /* --------------------------------------------------------------- TYPE FAMILIES --------------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Script echoing the logo wordmark. Parisienne = NEAREST-MATCH substitute for the brand's hand-lettered logo script (pending the original font file). */ --font-script: 'Parisienne', 'Brush Script MT', cursive; /* --------------------------------------------------------------- TYPE SCALE (display = serif, generous; body = sans, calm) line-heights tuned for luxury whitespace --------------------------------------------------------------- */ --fs-display: clamp(3rem, 6vw, 5.5rem); /* hero */ --fs-h1: clamp(2.5rem, 4.5vw, 4rem); --fs-h2: clamp(2rem, 3.2vw, 3rem); --fs-h3: 1.75rem; --fs-h4: 1.3rem; --fs-lead: 1.25rem; /* intro paragraph */ --fs-body: 1.0625rem; /* 17px base body */ --fs-small: 0.9375rem; --fs-eyebrow: 0.78rem; /* tracked uppercase label */ --fs-caption: 0.8125rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.65; --tracking-eyebrow: 0.22em; --tracking-caps: 0.08em; /* --------------------------------------------------------------- SPACING (8px base rhythm) --------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --section-pad: clamp(64px, 9vw, 128px); --gutter: clamp(20px, 5vw, 64px); --maxw: 1200px; /* --------------------------------------------------------------- RADII (restrained — luxury is mostly square with soft eases) --------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* --------------------------------------------------------------- SHADOWS / ELEVATION (soft, warm, low-contrast — never harsh) --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(34, 27, 32, 0.04); --shadow-sm: 0 2px 8px rgba(34, 27, 32, 0.05); --shadow-md: 0 10px 30px rgba(46, 20, 40, 0.08); --shadow-lg: 0 24px 60px rgba(46, 20, 40, 0.12); --shadow-inset-line: inset 0 0 0 1px var(--border); /* --------------------------------------------------------------- MOTION --------------------------------------------------------------- */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms; } /* ===================================================================== SEMANTIC ELEMENT STYLES (apply to .ds- scope or plain elements) ===================================================================== */ .ds-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); } .ds-display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg1); } h1, .ds-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg1); } h2, .ds-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg1); } h3, .ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg1); } h4, .ds-h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg1); } .ds-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: 1.55; color: var(--fg2); } p, .ds-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); } .ds-small { font-size: var(--fs-small); line-height: 1.55; } .ds-caption { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg3); } /* Decorative gilt rule used under eyebrows / section intros */ .ds-rule { width: 48px; height: 1px; background: var(--accent); border: 0; }