/* ──────────────────────────────────────────────────────────────────── Bastide du Clos Bonnet — Design Tokens Drop this file at the root of your site and load it before any component CSS. Every visual choice on the site should pull from these variables. ──────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Italiana&family=Marcellus&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ─── Color ─────────────────────────────────────────────────────── Palette is derived from the property itself: stone facade, sage shutters, butter kitchen walls, terracotta tile floors, deep Provence greens. Use --paper / --ink as the default page foundation. ───────────────────────────────────────────────────────────────── */ /* Paper / cream surfaces */ --color-cream: #faf6ec; /* lightest — modal / panel surfaces */ --color-paper: #f1ead8; /* primary page background */ --color-paper-warm: #ebe0c4; /* warmer paper — section variation */ --color-bone: #ebe5d4; /* slightly darker cream */ --color-stone: #cdbfa8; /* limestone / gravel — dividers, tabs */ /* Ink (text) */ --color-ink: #2a241c; /* deep brown-black — body, headings */ --color-ink-muted: #6a6253; /* secondary text, captions, eyebrow */ --color-ink-faint: #a39a8a; /* tertiary text, disabled, hairlines */ /* Greens — sage shutters & garden */ --color-sage: #9aa896; /* shutter sage */ --color-sage-deep: #6e7e6c; /* kitchen-cabinet sage */ --color-olive: #4a5640; /* deep tree green — dark mode surface */ --color-olive-shade: #2d3a26; /* deepest green for layered dark UI */ /* Accents — use sparingly */ --color-butter: #d9b876; /* warm butter yellow (kitchen walls) */ --color-terracotta: #b46a48; /* roof tile / floor — strongest accent */ /* Semantic aliases — components should reference these, not the palette directly, so the palette can shift later. */ --bg: var(--color-paper); --bg-elev: var(--color-cream); --bg-alt: var(--color-paper-warm); --bg-dark: #1c1814; --text: var(--color-ink); --text-muted: var(--color-ink-muted); --text-faint: var(--color-ink-faint); --text-on-dark: #e8dec7; --accent: var(--color-sage-deep); --accent-warm: var(--color-terracotta); --hairline: rgba(42, 36, 28, 0.18); --hairline-strong: rgba(42, 36, 28, 0.45); /* ─── Typography ────────────────────────────────────────────────── Four families, each with a clear role. ───────────────────────────────────────────────────────────────── */ --font-display: 'Italiana', 'Cormorant Garamond', Garamond, serif; --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; --font-caps: 'Marcellus', 'EB Garamond', serif; --font-body: 'EB Garamond', Garamond, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Type scale — modular, ~1.333 step. */ --text-xs: 0.6875rem; /* 11px — tracked-caps eyebrow */ --text-sm: 0.8125rem; /* 13px — captions, labels */ --text-base: 1.0625rem; /* 17px — body */ --text-lg: 1.25rem; /* 20px — lead paragraph */ --text-xl: 1.625rem; /* 26px — subhead */ --text-2xl: 2.25rem; /* 36px — h2 */ --text-3xl: 3.25rem; /* 52px — h1 */ --text-display: 5rem; /* 80px — hero display */ /* Leading */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-loose: 1.65; /* Tracking */ --track-tight: -0.01em; --track-normal: 0; --track-wide: 0.08em; --track-caps: 0.18em; --track-caps-lg: 0.32em; /* ─── Spacing ───────────────────────────────────────────────────── 8-pt scale. Small steps for tight UI, large steps for editorial generosity (the brand reads better with air). ───────────────────────────────────────────────────────────────── */ --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; --space-11: 192px; /* ─── Layout ────────────────────────────────────────────────────── */ --width-prose: 65ch; /* readable column */ --width-narrow: 720px; --width-default: 1080px; --width-wide: 1320px; --width-bleed: 1680px; /* ─── Radii & borders ───────────────────────────────────────────── This brand is classical — corners are mostly sharp. Radii only on tiny pills (tags, dots). ───────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; --border-hair: 1px solid var(--hairline); --border-rule: 1px solid var(--text); /* ─── Motion ────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; } /* ─────────────────────────────────────────────────────────────────── Base styles — opt-in. Add `class="bcb-base"` to to apply. ─────────────────────────────────────────────────────────────────── */ body.bcb-base { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-feature-settings: 'liga', 'dlig', 'kern'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ────────────────────────────────────────────────────────────────── Utility classes you can reach for in markup. ────────────────────────────────────────────────────────────────── */ .bcb-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-tight); } .bcb-h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); } .bcb-h2 { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: var(--leading-snug); font-weight: 500; } .bcb-h3 { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 500; } .bcb-lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--text-muted); } .bcb-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); } .bcb-caps { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); } .bcb-caps-lg { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--track-caps-lg); text-transform: uppercase; color: var(--text-muted); } .bcb-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); } .bcb-rule { display: block; width: 100%; height: 1px; background: var(--hairline-strong); border: 0; } .bcb-rule-soft { display: block; width: 100%; height: 1px; background: var(--hairline); border: 0; } /* Buttons — sharp-cornered, classical */ .bcb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--track-caps); text-transform: uppercase; background: var(--text); color: var(--bg); border: 1px solid var(--text); text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .bcb-btn:hover { background: transparent; color: var(--text); } .bcb-btn-ghost { background: transparent; color: var(--text); } .bcb-btn-ghost:hover { background: var(--text); color: var(--bg); } /* Tags / chips */ .bcb-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); }