/* emailed.chat design tokens. Single source of truth. Full guide: docs/DESIGN.md. Every page links this file first. */ :root { /* palette: monochrome + one accent. Never add colors casually. */ --ink: #111111; /* text, primary buttons */ --paper: #fdfdfb; /* page background */ --gray: #6d6d68; /* secondary text */ --line: #e9e9e4; /* borders, dividers */ --blue: #0a84ff; /* THE accent: focus, own bubbles. Use sparingly. */ --btn: #1e2a3a; /* every CTA: dark navy pill */ --btn-hover: #28374b; /* hover: one step lighter, nothing dramatic */ --ok-bg: #e7f6ec; --ok-fg: #1c7c3c; /* success pill */ --warn-bg: #fff3d6; --warn-fg: #8a6400; /* pending pill */ --bad-bg: #fde2e2; --bad-fg: #a33333; /* removed/error pill */ /* type */ --font-display: "Instrument Serif", Georgia, serif; /* headlines + wordmark only */ --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; /* shape */ --radius-bubble: 18px; --radius-pill: 999px; --radius-card: 20px; --shadow-card: 0 16px 48px rgba(17, 17, 17, 0.08); --shadow-bubble: 0 2px 10px rgba(17, 17, 17, 0.04); } * { margin: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); min-height: 100svh; } h1, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; } /* buttons: navy pill, slightly lighter on hover. One primary action per view. */ .btn { background: var(--btn); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 14px 26px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .btn:hover { background: var(--btn-hover); } .btn:active { transform: scale(0.98); } /* inputs: white pill, blue focus */ .input { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 14px 20px; font-size: 16px; color: var(--ink); outline: none; font-family: var(--font-body); } .input:focus { border-color: var(--blue); } /* cards */ .card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 40px; } /* iMessage bubbles: white bordered for them, blue for us */ .bubble { padding: 11px 15px; border-radius: var(--radius-bubble); font-size: 14.5px; line-height: 1.4; width: fit-content; max-width: 88%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-bubble); position: relative; } .bubble.me { background: var(--blue); border-color: var(--blue); color: #fff; align-self: flex-end; } /* status pills */ .pill { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; } .pill.approved { background: var(--ok-bg); color: var(--ok-fg); } .pill.pending { background: var(--warn-bg); color: var(--warn-fg); } .pill.removed { background: var(--bad-bg); color: var(--bad-fg); } .muted { color: var(--gray); } /* Full-bleed background image for any page: . Text sitting directly on the image goes white; content lives on white cards. */ body.on-image::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("/images/background-2.webp") center / cover no-repeat; } body.on-image > h1, body.on-image .over-image { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); } /* Wordmark for the standalone card pages (login, join, waiting, invite links). Those pages centre one card and offered no way back to the product they were advertising, which made every one of them a dead end. Fixed rather than in flow so the card stays optically centred and no page layout has to change. Full nav pages (index, leaderboard, referrals) keep their own .mark. */ .site-mark { position: fixed; top: 24px; left: clamp(20px, 5vw, 48px); z-index: 5; font-family: var(--font-display); font-size: 22px; color: var(--ink); text-decoration: none; } .site-mark:hover { opacity: 0.75; } body.on-image .site-mark { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); } @media (max-width: 520px) { .site-mark { top: 18px; } }