/* ============================================================ * MAISON FLORELLE — Soft & Pastell Editorial Beauty Atelier * ============================================================ * Brand: Maison Florelle · Musterort · seit 2019 * Style: warm cream, rose powder, deep moss; editorial serif + clean sans */ /* -------------------- Tokens -------------------- */ :root { /* Palette */ --cream: #f7eee5; --cream-deep: #f0e3d3; --rose: #e9c5b4; --rose-deep: #d8a691; --rose-soft: #f5dfd2; --moss: #2c3a2c; --moss-soft: #3e5040; --sand: #d9c9b3; --brass: #b08454; --ink: #1f1a16; --muted: #6b605a; --line: #e3d6c4; /* Typo */ --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --sans: 'Inter', 'Helvetica Neue', system-ui, -apple-system, Segoe UI, sans-serif; /* Layout */ --nav-h: 80px; --container: 1200px; --radius-soft: 28px; --radius-pill: 999px; --demo-banner-bg: #2c3a2c; --demo-banner-fg: #f7eee5; --demo-banner-accent: #e9c5b4; } /* -------------------- Reset / Base -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; } /* Selection */ ::selection { background: var(--rose-deep); color: var(--cream); } /* -------------------- Typography -------------------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; color: var(--moss); letter-spacing: -0.005em; line-height: 1.08; } h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); } h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); } h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); } h4 { font-size: 1.1rem; } em { font-style: italic; color: var(--rose-deep); font-feature-settings: "swsh" 1; } p { margin: 0 0 1em; } .kicker { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; } .kicker--moss { color: var(--moss); } .kicker--cream { color: var(--cream); } /* -------------------- Layout primitives -------------------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } .section { padding: clamp(72px, 10vw, 140px) 0; } .section--cream { background: var(--cream); } .section--sand { background: var(--cream-deep); } .section--moss { background: var(--moss); color: var(--cream); } .section--moss h1, .section--moss h2, .section--moss h3 { color: var(--cream); } .section--moss em { color: var(--rose); } .section--moss .kicker { color: var(--rose); } .section__head { max-width: 760px; margin: 0 auto 64px; text-align: center; } .section__head p { color: var(--muted); font-size: 1.05rem; max-width: 560px; margin: 16px auto 0; } .section--moss .section__head p { color: rgba(247, 238, 229, 0.78); } /* -------------------- Demo Banner (will be sticky) -------------------- */ /* Real CSS in inline