/* ============================================================================ VELLEMONT · MAISON — Design System (canonical stylesheet) v1.0 — single source of truth. Link this on every page and use the tokens and .vm-* component classes. Do not introduce off-system colours, fonts, spacing or radii — extend here instead. Fonts (load once in ): ============================================================================ */ :root{ /* — Surfaces (ivory) — */ --paper:#F4F0E6; /* page background */ --paper-2:#FAF7EF; /* raised cards / panels */ --paper-3:#F1ECDF; /* tints: card headers, active tabs */ --field:#FFFFFF; /* inputs */ /* — Ink (text) — */ --ink:#1A1815; /* primary text & solid buttons */ --soft:#5A554B; /* secondary text */ --faint:#7A7568; /* captions / fine print */ /* — Accent (the only accent: muted gold) — */ --gold:#A8853F; /* accent, eyebrows, marks */ --gold-deep:#8A6D2F; /* hover / links on light */ /* — Lines — */ --line:rgba(26,24,21,.15); --line-soft:rgba(26,24,21,.08); /* — Status (use sparingly) — */ --ok:#6F9C79; --limited:#B98A3A; --full:#B06A5D; /* — Type families — */ --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* — Type scale (fluid) — */ --fs-display:clamp(40px, 6.2vw, 76px); /* hero H1 */ --fs-h2:clamp(25px, 3.6vw, 40px); /* section titles */ --fs-h3:20px; /* card / step titles */ --fs-lead:clamp(15px, 1.5vw, 17.5px); /* intro paragraphs */ --fs-body:16px; --fs-small:13px; --fs-eyebrow:11px; --tracking-eyebrow:.26em; --tracking-label:.14em; /* — Spacing — */ --space-xs:6px; --space-sm:12px; --space-md:20px; --space-lg:32px; --space-xl:clamp(28px, 4vw, 44px); --section-y:clamp(48px, 7vw, 92px); /* vertical rhythm of sections */ --gutter:clamp(36px, 8vw, 104px); /* page side padding */ --gap:clamp(12px, 1.8vw, 16px); /* tight grid gap */ --gap-lg:clamp(16px, 2.4vw, 26px); /* roomy grid gap */ /* — Radii — */ --r-card:4px; /* couture squared corners */ --r-control:6px; --r-note:8px; --r-tag:30px; --r-pill:32px; /* — Elevation & motion — */ --shadow-card:0 30px 60px -40px rgba(26,24,21,.5); --maxw:1200px; --ease:cubic-bezier(.2,.7,.2,1); --dur:.6s; } /* ---------------------------------------------------------------------------- Base ---------------------------------------------------------------------------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } svg{ display:block; } h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.06; margin:0; letter-spacing:-.005em; color:var(--ink); } ::selection{ background:#E7D8B4; } :where(a,button,select,input):focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------- */ .vm-container{ width:min(var(--maxw), 100% - var(--gutter)); margin-inline:auto; } .vm-section{ padding-block:var(--section-y); border-top:1px solid var(--line); } .vm-section:first-of-type{ border-top:0; } /* ---------------------------------------------------------------------------- Text ---------------------------------------------------------------------------- */ .vm-eyebrow{ font-family:var(--font-mono); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold); } .vm-display{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-display); line-height:1.0; letter-spacing:-.01em; } .vm-display em,.vm-accent{ font-style:italic; color:var(--gold); } .vm-h2{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; } .vm-h3{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600; } .vm-lead{ font-size:var(--fs-lead); color:var(--soft); line-height:1.65; max-width:33ch; } .vm-muted{ color:var(--soft); } .vm-mono{ font-family:var(--font-mono); } /* Section header trio */ .vm-section__eyebrow{ font-family:var(--font-mono); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold); } .vm-section__title{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; margin:.32em 0 0; } .vm-section__sub{ color:var(--soft); margin-top:.7em; max-width:46ch; font-size:clamp(14px,1.4vw,16px); } /* ---------------------------------------------------------------------------- Buttons & links ---------------------------------------------------------------------------- */ .vm-btn{ font-family:var(--font-body); font-weight:500; font-size:15px; letter-spacing:.02em; border:0; border-radius:var(--r-pill); padding:15px 26px; cursor:pointer; transition:.18s ease; display:inline-block; } .vm-btn--solid{ background:var(--ink); color:var(--paper); } .vm-btn--solid:hover{ background:#000; transform:translateY(-1px); } .vm-btn--outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); } .vm-btn--outline:hover{ background:var(--ink); color:var(--paper); } .vm-btn--block{ width:100%; } .vm-link{ font-size:14px; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:3px; } .vm-link:hover{ color:#000; } /* ---------------------------------------------------------------------------- Card / panel ---------------------------------------------------------------------------- */ .vm-card{ background:var(--paper-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; } .vm-card__head{ display:flex; align-items:baseline; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line-soft); background:var(--paper-3); } .vm-card__title{ font-family:var(--font-display); font-size:var(--fs-h3); } .vm-card__tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); } .vm-card__body{ padding:20px 22px 22px; } /* ---------------------------------------------------------------------------- Form fields ---------------------------------------------------------------------------- */ .vm-field{ margin-bottom:13px; } .vm-field > label{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--soft); margin-bottom:6px; } .vm-input,.vm-select{ width:100%; font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:var(--r-control); padding:11px 12px; appearance:none; } .vm-select{ background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%); background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } .vm-row{ display:grid; gap:11px; } .vm-row--2{ grid-template-columns:1fr 1fr; } .vm-row--3{ grid-template-columns:1fr 1fr 1fr; } /* ---------------------------------------------------------------------------- Feedback: notice, badge, availability, price ---------------------------------------------------------------------------- */ .vm-notice{ border-radius:var(--r-note); padding:12px 13px; font-size:13px; line-height:1.5; } .vm-notice--warn{ background:#F4E9CF; border:1px solid #DCC089; color:#6B4E15; } .vm-notice--quote{ background:var(--paper-3); border:1px solid var(--line); color:#3A352A; } .vm-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-tag); border:1px solid var(--line); background:var(--field); } .vm-badge__dot{ width:8px; height:8px; border-radius:50%; } .vm-badge--ok .vm-badge__dot{ background:var(--ok); } .vm-badge--limited .vm-badge__dot{ background:var(--limited); } .vm-badge--full .vm-badge__dot{ background:var(--full); } .vm-price{ font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink); line-height:1; } .vm-price small{ font-family:var(--font-mono); font-size:11px; color:var(--soft); font-weight:400; letter-spacing:.04em; } /* ---------------------------------------------------------------------------- Grids ---------------------------------------------------------------------------- */ .vm-grid{ display:grid; gap:var(--gap-lg); } .vm-grid--3{ grid-template-columns:repeat(3,1fr); } .vm-grid--4{ grid-template-columns:repeat(4,1fr); gap:var(--gap); } /* ---------------------------------------------------------------------------- Content blocks: step, service, route, trust ---------------------------------------------------------------------------- */ .vm-step{ border:1px solid var(--line); border-radius:12px; padding:clamp(18px,2.4vw,26px); background:var(--paper-2); } .vm-step__n{ font-family:var(--font-mono); font-size:12px; color:var(--gold); letter-spacing:.1em; } .vm-step h3{ font-family:var(--font-display); font-size:20px; margin:12px 0 8px; } .vm-step p{ font-size:14px; color:var(--soft); margin:0; line-height:1.6; } .vm-svc{ border:1px solid var(--line); border-radius:11px; padding:clamp(16px,2vw,20px); background:var(--paper-2); transition:.18s; } .vm-svc:hover{ border-color:var(--gold); transform:translateY(-2px); } .vm-svc__k{ font-family:var(--font-mono); font-size:10px; color:var(--gold); letter-spacing:.12em; } .vm-svc h3{ font-family:var(--font-display); font-size:18px; margin:9px 0 5px; } .vm-svc p{ font-size:13px; color:var(--soft); margin:0; line-height:1.5; } .vm-route{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:11px; padding:15px 17px; background:var(--paper-2); cursor:pointer; transition:.18s; text-align:left; color:inherit; font-family:inherit; width:100%; } .vm-route:hover{ border-color:var(--gold); transform:translateY(-2px); } .vm-route b{ font-family:var(--font-display); font-size:17px; font-weight:600; } .vm-route__meta{ display:block; font-size:12px; color:var(--soft); margin-top:3px; } .vm-route__t{ font-family:var(--font-mono); font-size:11px; color:var(--gold); white-space:nowrap; } .vm-trust{ border-left:2px solid var(--gold); padding-left:16px; } .vm-trust b{ font-family:var(--font-display); font-size:18px; display:block; margin-bottom:6px; } .vm-trust p{ font-size:13px; color:var(--soft); margin:0; line-height:1.55; } /* ---------------------------------------------------------------------------- Footer ---------------------------------------------------------------------------- */ .vm-footer{ border-top:1px solid var(--line); padding-block:clamp(40px,5vw,54px); color:var(--soft); } .vm-footer h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; } .vm-footer a{ display:block; font-size:13.5px; color:var(--soft); margin-bottom:8px; } .vm-footer a:hover{ color:var(--ink); } /* ---------------------------------------------------------------------------- Landmark silhouette (engraved horizon) Canonical asset: the traced Paris skyline SVG, rendered in gold at .5 opacity. Never recolour to black or any non-accent tone. ---------------------------------------------------------------------------- */ .vm-skyline{ max-width:940px; margin-inline:auto; color:var(--gold); opacity:.5; } .vm-skyline__art{ display:block; width:100%; height:auto; } .vm-skyline__cap{ text-align:center; margin-top:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); } /* ---------------------------------------------------------------------------- Motion (scroll reveal — opt-in) ---------------------------------------------------------------------------- */ .vm-reveal{ opacity:0; transform:translateY(10px); animation:vm-rise var(--dur) var(--ease) forwards; } @keyframes vm-rise{ to{ opacity:1; transform:none; } } /* ---------------------------------------------------------------------------- Responsive ---------------------------------------------------------------------------- */ @media (max-width:980px){ .vm-grid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:920px){ .vm-grid--3{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .vm-grid--3,.vm-grid--4,.vm-row--2,.vm-row--3{ grid-template-columns:1fr; } }