/* * Find Name — shared design system * --------------------------------- * One token + component layer used across all three Find Name surfaces: * - findname.co.uk (WordPress — paste into Additional CSS / theme stylesheet) * - findname.co.uk/domains/ (this static site — linked directly) * - findname.co.uk/baby-names/ (Next.js app — copied into src/app/design-system.css) * * These three deploy independently, so this file has no build step and no * dependency on any framework. It is the single source of truth for the * palette and components in the brand brief; when it changes, copy the new * version into the other two locations by hand. * * Classes are prefixed `fn-` to avoid colliding with WordPress theme CSS. */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { /* Core palette — professional, UK, "quiet and expensive". */ --fn-ink: #14181f; --fn-ink-soft: #444d5c; --fn-paper: #f6f4ef; --fn-paper-raised: #fdfcfa; --fn-brass: #8a6a34; --fn-brass-soft: #b99a5c; --fn-slate: #5b6472; --fn-line: #ddd8cc; /* Semantic — domain availability only. Never used decoratively. */ --fn-available: #3f6c4c; --fn-available-bg: #e4ede6; --fn-unavailable: #9c4a3c; --fn-unavailable-bg: #f1e3e0; /* Type */ --fn-font-display: "Fraunces", Georgia, "Times New Roman", serif; --fn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale + rhythm */ --fn-radius: 4px; --fn-radius-pill: 999px; --fn-gutter: 24px; --fn-max-width: 1120px; } /* * Baby Names variant — same architecture and spacing, a warmer accent. * Apply by adding data-brand="baby-names" to or a wrapping element. * Keeps the sideline's established warmth without a second stylesheet. */ [data-brand="baby-names"] { --fn-paper: #fcf8f1; --fn-paper-raised: #fffaf5; --fn-brass: #923e53; --fn-brass-soft: #b15d6b; --fn-available-bg: #eaf1ea; --fn-unavailable-bg: #f3e6e6; } /* ---------- Base ---------- */ .fn-root { background: var(--fn-paper); color: var(--fn-ink); font-family: var(--fn-font-body); line-height: 1.6; } .fn-root a { color: var(--fn-brass); text-decoration: none; } .fn-root a:hover { text-decoration: underline; } .fn-root :focus-visible { outline: 2px solid var(--fn-brass); outline-offset: 3px; } .fn-container { width: min(100% - (var(--fn-gutter) * 2), var(--fn-max-width)); margin-inline: auto; } /* ---------- Typography ---------- */ .fn-eyebrow { font-family: var(--fn-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fn-brass); margin: 0 0 12px; } .fn-h1, .fn-h2, .fn-h3 { font-family: var(--fn-font-display); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--fn-ink); } .fn-h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.15; } .fn-h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; } .fn-h3 { font-size: 1.15rem; line-height: 1.35; } .fn-lede { font-size: 1.1rem; color: var(--fn-ink-soft); max-width: 62ch; } .fn-body { color: var(--fn-ink-soft); max-width: 65ch; } .fn-mono { font-family: var(--fn-font-mono); } /* ---------- Buttons ---------- */ .fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border-radius: var(--fn-radius); font-family: var(--fn-font-body); font-weight: 500; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease; } .fn-btn:hover { transform: translateY(-1px); } .fn-btn:active { transform: translateY(0); } .fn-btn:disabled { cursor: wait; opacity: 0.6; transform: none; } .fn-btn--primary { background: var(--fn-ink); color: var(--fn-paper-raised); } .fn-btn--primary:hover { background: var(--fn-brass); } .fn-btn--ghost { background: transparent; border-color: var(--fn-line); color: var(--fn-ink); } .fn-btn--ghost:hover { border-color: var(--fn-brass); color: var(--fn-brass); } /* ---------- Cards ---------- */ .fn-card { background: var(--fn-paper-raised); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 20px 22px; } /* ---------- Availability chip ---------- */ /* The honesty pledge, made visible. Never fabricate a status here. */ .fn-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fn-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--fn-radius-pill); white-space: nowrap; } .fn-chip--available { color: var(--fn-available); background: var(--fn-available-bg); } .fn-chip--unavailable { color: var(--fn-unavailable); background: var(--fn-unavailable-bg); } .fn-chip--unknown { color: var(--fn-slate); background: var(--fn-line); } /* ---------- Domain result row ---------- */ .fn-domain-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fn-domain-row .fn-domain-name { font-family: var(--fn-font-mono); font-size: 1.05rem; color: var(--fn-ink); } /* ---------- Nav ---------- */ .fn-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; flex-wrap: wrap; } .fn-nav__brand { font-family: var(--fn-font-display); font-size: 1.15rem; font-weight: 500; color: var(--fn-ink); } .fn-nav__brand span { color: var(--fn-slate); font-weight: 400; } .fn-nav__links { display: flex; gap: 22px; font-size: 0.9rem; color: var(--fn-ink-soft); flex-wrap: wrap; } .fn-nav__links a { color: inherit; } .fn-nav__links a:hover { color: var(--fn-brass); } /* ---------- Footer ---------- */ .fn-footer { border-top: 1px solid var(--fn-line); padding-block: 28px; font-size: 0.85rem; color: var(--fn-slate); } .fn-footer__meta { margin-top: 6px; font-size: 0.78rem; } /* ---------- Utility ---------- */ .fn-hairline { border-bottom: 1px solid var(--fn-line); } .fn-stack { display: flex; flex-direction: column; gap: 16px; } .fn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Emphasis inside a display heading picks up the brand accent (brass, or the warmer baby-names accent under data-brand="baby-names"). */ .fn-h1 em, .fn-h2 em, .fn-h3 em { font-style: normal; color: var(--fn-brass); } /* Toggleable pill, e.g. a vibe/style chip in a generator form. */ .fn-toggle { background: var(--fn-paper-raised); border: 1px solid var(--fn-line); border-radius: var(--fn-radius-pill); padding: 8px 16px; min-height: 40px; font-size: 0.8rem; color: var(--fn-ink-soft); cursor: pointer; } .fn-toggle[aria-pressed="true"] { background: var(--fn-ink); border-color: var(--fn-ink); color: var(--fn-paper-raised); } /* Text inputs, for forms outside /domains/ (which has its own field styles). */ .fn-input, .fn-textarea { width: 100%; padding: 16px 18px; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper-raised); color: var(--fn-ink); font-family: var(--fn-font-body); font-size: 1rem; line-height: 1.6; } .fn-textarea { resize: vertical; min-height: 88px; } .fn-input:focus, .fn-textarea:focus { outline: none; border-color: var(--fn-brass); } .fn-input::placeholder, .fn-textarea::placeholder { color: var(--fn-slate); } @media (max-width: 640px) { .fn-nav { padding-block: 16px; } .fn-container { --fn-gutter: 16px; } } @media (prefers-reduced-motion: reduce) { .fn-btn { transition: none; } }