/* ============================================================== BESPOKE BRAND SYSTEM The single source of truth for the rebrand. Drop this into the app (e.g. static/css/bespoke-brand-system.css) and have the demo, CRM/admin, public pages, and email templates read from it. Look: white luxe, espresso ink, one red, thin-to-bold Fraunces display + Inter body, hairlines, fine grain, New York editorial. No em dashes anywhere by rule. ============================================================== */ :root { /* Palette */ --paper: #F9F9F6; /* page background */ --ivory: #EFEFEA; /* contrast band / surfaces */ --ink: #14110E; /* primary text, dark sections */ --soft: #2E2A24; /* body / secondary text (high contrast) */ --faint: #5F594F; /* captions, labels, meta */ --champ: #6E6456; /* eyebrow accent */ --red: #C41E2B; /* the one accent: period, rules, CTAs */ --red-dn: #9E1822; /* red hover */ --line: #E5E3DB; /* hairlines, borders */ /* Type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Rhythm */ --wrap: 1160px; --radius: 0; /* editorial uses rectangles */ } /* Google Fonts (load in ): */ /* ---------- Base ---------- */ body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .b-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 44px; } a { color: var(--red); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; } /* ---------- Typography ---------- */ .b-display { font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.015em; line-height: 1.06; color: var(--ink); } .b-display em { font-style: italic; } .b-display em.r { color: var(--red); } .b-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; } .b-h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; } .b-body { font-family: var(--font-body); font-weight: 400; color: var(--soft); } .b-label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.30em; text-transform: uppercase; color: var(--champ); display: inline-flex; align-items: center; gap: 14px; } .b-label::before { content: ""; width: 40px; height: 1px; background: var(--red); } .b-slug { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); } .b-slug b { color: var(--red); font-weight: 500; } .b-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; color: var(--faint); } /* ---------- Wordmark ---------- */ .b-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: var(--ink); } .b-wordmark .dot { color: var(--red); } /* ---------- Buttons ---------- */ .b-btn { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; padding: 18px 44px; border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .b-btn:hover { background: var(--red); border-color: var(--red); color: #fff; text-decoration: none; } .b-btn--red { background: var(--red); border-color: var(--red); color: #fff; } .b-btn--red:hover { background: var(--ink); border-color: var(--ink); } .b-btn--ghost { background: transparent; color: var(--ink); } .b-btn--ghost:hover { background: var(--ink); color: var(--paper); } .b-textlink { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 3px; text-decoration: none; } /* ---------- Surfaces ---------- */ .b-band { background: var(--ivory); } .b-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; } .b-hairline { border: none; border-top: 1px solid var(--line); } .b-redrule { height: 1px; background: var(--red); width: 200px; } /* ---------- Masthead nav ---------- */ .b-masthead { background: rgba(249,249,246,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .b-masthead .bar { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; } .b-nav { display: flex; gap: 34px; align-items: baseline; } .b-nav a { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .b-nav a.apply { color: var(--red); } /* ---------- Media windows (grayscale, editorial) ---------- */ .b-window { overflow: hidden; border: 1px solid var(--line); background: var(--ivory); position: relative; } .b-window img, .b-window video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.0); display: block; } /* ---------- Data / dashboard (for CRM + demo) ---------- */ .b-metric { border: 1px solid var(--line); padding: 16px; } .b-metric .lab { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .b-metric .val { font-family: var(--font-display); font-weight: 600; font-size: 32px; margin-top: 8px; color: var(--ink); } .b-table { width: 100%; border-collapse: collapse; font-size: 14px; } .b-table th { text-align: left; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 12px 10px; border-bottom: 1px solid var(--line); } .b-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); color: var(--soft); } .b-tag { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--line); color: var(--faint); } .b-tag--red { color: var(--red); border-color: var(--red); } /* ---------- Email-safe tokens (inline these in email templates) ---------- bg #F9F9F6 . ink #14110E . body #2E2A24 . red #C41E2B . line #E5E3DB Header wordmark: Fraunces 700 with red period. Body: Inter/Helvetica. Buttons: ink background, paper text, 18px x 44px, no border radius. No em dashes. One red accent per email. */