/* bm-design-system:start * ============================================================================ * LeadBrew Design System · leadbrew-ds.css * ---------------------------------------------------------------------------- * Semantic design tokens + a re-skin of Bulma so existing markup inherits the * new look, plus a few `.lb-*` primitives Bulma doesn't ship. * * Brand colors are KEPT (crimson #9b111e, coral #d8534e, maroon #610404, * burnt orange #b44d12, cream #fffbea) and merely organised into roles. * * Live reference + every component preview: /admin/design-system * Load this AFTER bulma.css so the re-skin wins the cascade. * Dark mode: set [data-theme="dark"] on (persisted to localStorage * key "lb-ds-theme"; the reference page ships the toggle + boot script). * ============================================================================ */ /* ---------------------------------------------------------------------------- * 1. TOKENS — light (default) * -------------------------------------------------------------------------- */ :root { /* Brand (mode-invariant anchors) */ --lb-brand: #9b111e; /* crimson — primary brand */ --lb-brand-darker: #610404; /* deep maroon — pressed/links */ --lb-accent: #d8534e; /* coral — main interactive (110 uses) */ --lb-accent-darker: #b5392f; /* coral pressed */ --lb-accent-faded: #fdeceb; /* coral tint surface */ --lb-accent-contrast: #fffbea; /* cream — text on accent/brand */ --lb-ember: #b44d12; /* burnt orange — secondary action */ --lb-ember-contrast: #fffbea; /* Neutrals — surfaces & ink */ --lb-page: #ffffff; --lb-surface: #faf9f7; /* warm off-white panel */ --lb-surface-2: #f5f5f5; /* deeper panel / hover row */ --lb-hairline: #ece7df; /* warm border / divider */ --lb-hairline-strong: #ddd6ca; --lb-ink-display: #211b18; /* headings / high contrast */ --lb-ink-body: #4a4a4a; /* body text */ --lb-ink-muted: #8a8378; /* secondary / captions */ --lb-ink-faint: #b6afa3; /* disabled */ /* Status */ --lb-success: #27ae60; --lb-success-faded: #e7f7ee; --lb-success-darker: #1e8b4d; --lb-signal: #f39c12; /* warning / attention (amber) */ --lb-signal-faded: #fef6e7; --lb-signal-darker: #b44d12; --lb-danger: #9b111e; /* errors use brand crimson */ --lb-danger-faded: #fbe9ea; --lb-danger-darker: #610404; --lb-info: #3498db; --lb-info-faded: #eaf4fb; /* Typography */ --lb-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --lb-font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --lb-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Type scale (1.250 major-third on a 16px base) */ --lb-text-xs: 0.75rem; /* 12 */ --lb-text-sm: 0.875rem; /* 14 */ --lb-text-base: 1rem; /* 16 */ --lb-text-lg: 1.125rem; /* 18 */ --lb-text-xl: 1.375rem; /* 22 */ --lb-text-2xl: 1.75rem; /* 28 */ --lb-text-3xl: 2.25rem; /* 36 */ --lb-text-4xl: 3rem; /* 48 */ /* Spacing scale (4px base) */ --lb-space-1: 0.25rem; --lb-space-2: 0.5rem; --lb-space-3: 0.75rem; --lb-space-4: 1rem; --lb-space-5: 1.5rem; --lb-space-6: 2rem; --lb-space-7: 3rem; --lb-space-8: 4rem; /* Radius */ --lb-radius-sm: 6px; --lb-radius-md: 10px; --lb-radius-lg: 14px; --lb-radius-xl: 20px; --lb-radius-full: 9999px; /* Elevation (warm-tinted shadows) */ --lb-shadow-xs: 0 1px 2px rgba(33, 27, 24, 0.06); --lb-shadow-sm: 0 1px 3px rgba(33, 27, 24, 0.08), 0 1px 2px rgba(33, 27, 24, 0.04); --lb-shadow-md: 0 4px 12px rgba(33, 27, 24, 0.08), 0 2px 4px rgba(33, 27, 24, 0.05); --lb-shadow-lg: 0 12px 28px rgba(33, 27, 24, 0.12), 0 4px 10px rgba(33, 27, 24, 0.06); --lb-ring: 0 0 0 3px rgba(216, 83, 78, 0.28); /* coral focus ring */ /* Motion */ --lb-ease: cubic-bezier(0.4, 0, 0.2, 1); --lb-dur: 140ms; } /* ---------------------------------------------------------------------------- * 2. TOKENS — dark * -------------------------------------------------------------------------- */ [data-theme="dark"] { --lb-brand: #e0606c; --lb-brand-darker: #c0392b; --lb-accent: #e8675f; --lb-accent-darker: #d8534e; --lb-accent-faded: #2f1c1a; --lb-accent-contrast: #1a1310; --lb-ember: #d9772f; --lb-ember-contrast: #1a1310; --lb-page: #16110f; --lb-surface: #1f1815; --lb-surface-2: #2a201c; --lb-hairline: #392f2a; --lb-hairline-strong: #4a3d36; --lb-ink-display: #faf7f2; --lb-ink-body: #e3ddd4; --lb-ink-muted: #a89f93; --lb-ink-faint: #6f655c; --lb-success: #3ec77a; --lb-success-faded: #15281d; --lb-success-darker: #2fa863; --lb-signal: #f0a838; --lb-signal-faded: #2f2517; --lb-signal-darker: #d98a2b; --lb-danger: #e0606c; --lb-danger-faded: #2c1719; --lb-danger-darker: #c0392b; --lb-info: #4ea8e0; --lb-info-faded: #142733; --lb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --lb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --lb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --lb-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.45); --lb-ring: 0 0 0 3px rgba(232, 103, 95, 0.35); } /* ---------------------------------------------------------------------------- * 3. BASE — typography & page * -------------------------------------------------------------------------- */ .lb-scope, body.lb-skin { background-color: var(--lb-page); color: var(--lb-ink-body); font-family: var(--lb-font-body); font-size: var(--lb-text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .lb-skin h1, .lb-skin h2, .lb-skin h3, .lb-skin h4, .lb-skin h5, .lb-skin h6, .lb-scope h1, .lb-scope h2, .lb-scope h3, .lb-scope h4, .lb-scope h5, .lb-scope h6 { font-family: var(--lb-font-display); color: var(--lb-ink-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } /* Re-skin Bulma's title/subtitle to the new scale + fonts */ .lb-skin .title, .lb-scope .title { font-family: var(--lb-font-display); color: var(--lb-ink-display); font-weight: 700; letter-spacing: -0.015em; } .lb-skin .subtitle, .lb-scope .subtitle { font-family: var(--lb-font-display); color: var(--lb-ink-muted); font-weight: 500; } .lb-scope a, .lb-skin a { color: var(--lb-accent); transition: color var(--lb-dur) var(--lb-ease); } .lb-scope a:hover, .lb-skin a:hover { color: var(--lb-brand-darker); } .lb-scope hr, .lb-skin hr { background-color: var(--lb-hairline); height: 1px; border: 0; margin: var(--lb-space-5) 0; } .lb-scope strong, .lb-skin strong { color: inherit; font-weight: 600; } .lb-scope code, .lb-skin code { font-family: var(--lb-font-mono); font-size: 0.85em; background: var(--lb-surface-2); color: var(--lb-brand-darker); padding: 0.12em 0.4em; border-radius: var(--lb-radius-sm); border: 1px solid var(--lb-hairline); } /* ---------------------------------------------------------------------------- * 4. BUTTONS (re-skin Bulma .button + variants) * -------------------------------------------------------------------------- */ .lb-scope .button, .lb-skin .button, .lb-btn { font-family: var(--lb-font-body); font-weight: 600; font-size: var(--lb-text-sm); border-radius: var(--lb-radius-md); border: 1px solid var(--lb-hairline-strong); background-color: var(--lb-page); color: var(--lb-ink-display); height: auto; padding: 0.6em 1.1em; line-height: 1.2; box-shadow: var(--lb-shadow-xs); transition: background-color var(--lb-dur) var(--lb-ease), border-color var(--lb-dur) var(--lb-ease), color var(--lb-dur) var(--lb-ease), box-shadow var(--lb-dur) var(--lb-ease), transform var(--lb-dur) var(--lb-ease); cursor: pointer; } .lb-scope .button:hover, .lb-skin .button:hover, .lb-btn:hover { border-color: var(--lb-ink-muted); box-shadow: var(--lb-shadow-sm); } .lb-scope .button:active, .lb-skin .button:active, .lb-btn:active { transform: translateY(1px); } .lb-scope .button:focus, .lb-skin .button:focus, .lb-scope .button.is-focused, .lb-skin .button.is-focused, .lb-btn:focus { outline: none; border-color: var(--lb-accent); box-shadow: var(--lb-ring); color: var(--lb-ink-display); } /* Primary / warning (the app's main CTA color) */ .lb-scope .button.is-primary, .lb-skin .button.is-primary, .lb-scope .button.is-warning, .lb-skin .button.is-warning, .lb-btn--primary { background-color: var(--lb-accent); border-color: transparent; color: var(--lb-accent-contrast); } .lb-scope .button.is-primary:hover, .lb-skin .button.is-primary:hover, .lb-scope .button.is-warning:hover, .lb-skin .button.is-warning:hover, .lb-btn--primary:hover { background-color: var(--lb-accent-darker); color: var(--lb-accent-contrast); border-color: transparent; } /* Brand (crimson) */ .lb-scope .button.is-danger, .lb-skin .button.is-danger, .lb-btn--brand { background-color: var(--lb-brand); border-color: transparent; color: var(--lb-accent-contrast); } .lb-scope .button.is-danger:hover, .lb-skin .button.is-danger:hover, .lb-btn--brand:hover { background-color: var(--lb-brand-darker); color: var(--lb-accent-contrast); } /* Ember (secondary, burnt orange) */ .lb-btn--ember { background-color: var(--lb-ember); border-color: transparent; color: var(--lb-ember-contrast); } .lb-btn--ember:hover { background-color: var(--lb-signal-darker); color: var(--lb-ember-contrast); } /* Success */ .lb-scope .button.is-success, .lb-skin .button.is-success { background-color: var(--lb-success); border-color: transparent; color: #fff; } .lb-scope .button.is-success:hover, .lb-skin .button.is-success:hover { background-color: var(--lb-success-darker); } /* Light / subtle */ .lb-scope .button.is-light, .lb-skin .button.is-light, .lb-btn--subtle { background-color: var(--lb-surface-2); border-color: transparent; color: var(--lb-ink-display); } .lb-scope .button.is-light:hover, .lb-skin .button.is-light:hover, .lb-btn--subtle:hover { background-color: var(--lb-hairline); } /* Outlined / ghost */ .lb-scope .button.is-outlined, .lb-skin .button.is-outlined, .lb-btn--ghost { background-color: transparent; border-color: var(--lb-accent); color: var(--lb-accent); box-shadow: none; } .lb-scope .button.is-outlined:hover, .lb-skin .button.is-outlined:hover, .lb-btn--ghost:hover { background-color: var(--lb-accent-faded); color: var(--lb-brand-darker); } /* Sizes & modifiers */ .lb-scope .button.is-small, .lb-skin .button.is-small { font-size: var(--lb-text-xs); padding: 0.45em 0.8em; border-radius: var(--lb-radius-sm); } .lb-scope .button.is-large, .lb-skin .button.is-large { font-size: var(--lb-text-lg); padding: 0.7em 1.4em; } .lb-scope .button.is-fullwidth, .lb-skin .button.is-fullwidth { width: 100%; } .lb-scope .button[disabled], .lb-skin .button[disabled], .lb-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ---------------------------------------------------------------------------- * 5. FORMS (re-skin .input .textarea .select .label) * -------------------------------------------------------------------------- */ .lb-scope .input, .lb-skin .input, .lb-scope .textarea, .lb-skin .textarea, .lb-scope .select select, .lb-skin .select select, .lb-input { font-family: var(--lb-font-body); font-size: var(--lb-text-base); color: var(--lb-ink-display); background-color: var(--lb-page); border: 1px solid var(--lb-hairline-strong); border-radius: var(--lb-radius-md); box-shadow: var(--lb-shadow-xs) inset; padding: 0.6em 0.85em; height: auto; transition: border-color var(--lb-dur) var(--lb-ease), box-shadow var(--lb-dur) var(--lb-ease); } .lb-scope .input::placeholder, .lb-skin .input::placeholder, .lb-scope .textarea::placeholder, .lb-skin .textarea::placeholder { color: var(--lb-ink-faint); } .lb-scope .input:focus, .lb-skin .input:focus, .lb-scope .textarea:focus, .lb-skin .textarea:focus, .lb-scope .select select:focus, .lb-skin .select select:focus, .lb-scope .input.is-focused, .lb-skin .input.is-focused, .lb-input:focus { outline: none; border-color: var(--lb-accent); box-shadow: var(--lb-ring); } .lb-scope .input:hover, .lb-skin .input:hover, .lb-scope .textarea:hover, .lb-skin .textarea:hover { border-color: var(--lb-ink-muted); } .lb-scope .label, .lb-skin .label, .lb-label { font-family: var(--lb-font-display); font-size: var(--lb-text-sm); font-weight: 600; color: var(--lb-ink-display); margin-bottom: var(--lb-space-2); display: block; } .lb-scope .select::after, .lb-skin .select::after { border-color: var(--lb-accent); } .lb-scope .help, .lb-skin .help { color: var(--lb-ink-muted); font-size: var(--lb-text-xs); } .lb-scope .input.is-danger, .lb-skin .input.is-danger { border-color: var(--lb-danger); } /* ---------------------------------------------------------------------------- * 6. CARDS / BOX (re-skin .card .box) * -------------------------------------------------------------------------- */ .lb-scope .card, .lb-skin .card, .lb-scope .box, .lb-skin .box, .lb-card { background-color: var(--lb-page); border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius-lg); box-shadow: var(--lb-shadow-sm); color: var(--lb-ink-body); } .lb-scope .box, .lb-skin .box { padding: var(--lb-space-5); } .lb-scope .card-content, .lb-skin .card-content { padding: var(--lb-space-5); } .lb-scope .card:hover, .lb-skin .card:hover, .lb-card--hover:hover { box-shadow: var(--lb-shadow-md); border-color: var(--lb-hairline-strong); } /* ---------------------------------------------------------------------------- * 7. NAVBAR (re-skin .navbar) * -------------------------------------------------------------------------- */ .lb-skin .navbar, .lb-scope .navbar { background-color: var(--lb-page); border-bottom: 1px solid var(--lb-hairline); box-shadow: none; } .lb-skin .navbar.has-shadow, .lb-scope .navbar.has-shadow { box-shadow: var(--lb-shadow-sm); } .lb-skin .navbar-item, .lb-scope .navbar-item { font-family: var(--lb-font-body); font-weight: 500; color: var(--lb-ink-body); border-radius: var(--lb-radius-sm); } .lb-skin .navbar-item:hover, .lb-scope .navbar-item:hover, .lb-skin .navbar-item.is-active, .lb-scope .navbar-item.is-active { color: var(--lb-accent); background-color: var(--lb-accent-faded); } /* ---------------------------------------------------------------------------- * 8. TABLE / LISTINGS (re-skin .table) * -------------------------------------------------------------------------- */ .lb-scope .table, .lb-skin .table, .lb-table { width: 100%; background-color: var(--lb-page); color: var(--lb-ink-body); border-collapse: separate; border-spacing: 0; } .lb-scope .table th, .lb-skin .table th, .lb-table th { font-family: var(--lb-font-display); font-size: var(--lb-text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--lb-ink-muted); font-weight: 600; text-align: left; padding: var(--lb-space-3) var(--lb-space-4); border-bottom: 1px solid var(--lb-hairline-strong); } .lb-scope .table td, .lb-skin .table td, .lb-table td { padding: var(--lb-space-3) var(--lb-space-4); border-bottom: 1px solid var(--lb-hairline); color: var(--lb-ink-body); vertical-align: middle; } .lb-scope .table tbody tr:hover, .lb-skin .table tbody tr:hover, .lb-table tbody tr:hover { background-color: var(--lb-surface); } /* ---------------------------------------------------------------------------- * 9. TAGS / BADGES (re-skin .tag + add .lb-badge tones) * -------------------------------------------------------------------------- */ .lb-scope .tag, .lb-skin .tag, .lb-badge { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--lb-font-body); font-size: var(--lb-text-xs); font-weight: 600; line-height: 1; padding: 0.4em 0.7em; border-radius: var(--lb-radius-full); background-color: var(--lb-surface-2); color: var(--lb-ink-body); border: 1px solid transparent; } .lb-badge--accent { background: var(--lb-accent-faded); color: var(--lb-brand-darker); } .lb-badge--brand { background: var(--lb-danger-faded); color: var(--lb-brand); } .lb-badge--success { background: var(--lb-success-faded); color: var(--lb-success-darker); } .lb-badge--signal { background: var(--lb-signal-faded); color: var(--lb-signal-darker); } .lb-badge--info { background: var(--lb-info-faded); color: var(--lb-info); } .lb-badge--muted { background: var(--lb-surface-2); color: var(--lb-ink-muted); } .lb-badge--outline { background: transparent; border-color: var(--lb-hairline-strong); color: var(--lb-ink-body); } /* ---------------------------------------------------------------------------- * 10. NOTIFICATION / CALLOUT (re-skin .notification + .lb-callout) * -------------------------------------------------------------------------- */ .lb-scope .notification, .lb-skin .notification, .lb-callout { border-radius: var(--lb-radius-md); border: 1px solid var(--lb-hairline); border-left: 4px solid var(--lb-ink-muted); background-color: var(--lb-surface); color: var(--lb-ink-body); padding: var(--lb-space-4) var(--lb-space-5); } .lb-scope .notification.is-primary, .lb-skin .notification.is-primary, .lb-scope .notification.is-warning, .lb-skin .notification.is-warning, .lb-callout--accent { border-left-color: var(--lb-accent); background: var(--lb-accent-faded); color: var(--lb-brand-darker); } .lb-scope .notification.is-success, .lb-skin .notification.is-success, .lb-callout--success { border-left-color: var(--lb-success); background: var(--lb-success-faded); color: var(--lb-success-darker); } .lb-scope .notification.is-danger, .lb-skin .notification.is-danger, .lb-callout--danger { border-left-color: var(--lb-danger); background: var(--lb-danger-faded); color: var(--lb-danger-darker); } .lb-callout--signal { border-left-color: var(--lb-signal); background: var(--lb-signal-faded); color: var(--lb-signal-darker); } .lb-callout--info { border-left-color: var(--lb-info); background: var(--lb-info-faded); color: var(--lb-info); } /* ---------------------------------------------------------------------------- * 11. MODAL (re-skin Bulma .modal) * -------------------------------------------------------------------------- */ .lb-scope .modal-background, .lb-skin .modal-background { background-color: rgba(33, 27, 24, 0.55); backdrop-filter: blur(2px); } .lb-scope .modal-card, .lb-skin .modal-card, .lb-modal { border-radius: var(--lb-radius-lg); overflow: hidden; box-shadow: var(--lb-shadow-lg); background: var(--lb-page); } .lb-scope .modal-card-head, .lb-skin .modal-card-head, .lb-scope .modal-card-foot, .lb-skin .modal-card-foot { background-color: var(--lb-surface); border-color: var(--lb-hairline); } .lb-scope .modal-card-title, .lb-skin .modal-card-title { font-family: var(--lb-font-display); color: var(--lb-ink-display); font-weight: 700; } .lb-scope .modal-card-body, .lb-skin .modal-card-body { background: var(--lb-page); color: var(--lb-ink-body); } /* ---------------------------------------------------------------------------- * 12. PRIMITIVES Bulma lacks * -------------------------------------------------------------------------- */ /* Stat card */ .lb-stat { padding: var(--lb-space-5); border:1px solid var(--lb-hairline); border-radius: var(--lb-radius-lg); background: var(--lb-page); box-shadow: var(--lb-shadow-xs); } .lb-stat__label { font-size: var(--lb-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lb-ink-muted); font-weight: 600; } .lb-stat__value { font-family: var(--lb-font-display); font-size: var(--lb-text-3xl); font-weight: 700; color: var(--lb-ink-display); line-height: 1.1; } /* Keyboard key */ .lb-kbd { font-family: var(--lb-font-mono); font-size: var(--lb-text-xs); background: var(--lb-surface-2); border:1px solid var(--lb-hairline-strong); border-bottom-width:2px; border-radius: var(--lb-radius-sm); padding: 0.1em 0.45em; color: var(--lb-ink-body); } /* Theme toggle button */ .lb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--lb-radius-full); border: 1px solid var(--lb-hairline-strong); background: var(--lb-page); color: var(--lb-ink-body); cursor: pointer; transition: all var(--lb-dur) var(--lb-ease); } .lb-theme-toggle:hover { background: var(--lb-surface-2); color: var(--lb-accent); } /* Color swatch (used on the reference page) */ .lb-swatch { border-radius: var(--lb-radius-md); border:1px solid var(--lb-hairline); overflow:hidden; box-shadow: var(--lb-shadow-xs); } .lb-swatch__chip { height: 64px; } .lb-swatch__meta { padding: var(--lb-space-3); background: var(--lb-page); } .lb-swatch__name { font-weight: 600; color: var(--lb-ink-display); font-size: var(--lb-text-sm); } .lb-swatch__hex { font-family: var(--lb-font-mono); color: var(--lb-ink-muted); font-size: var(--lb-text-xs); } /* Generic surface helpers */ .lb-surface { background: var(--lb-surface); } .lb-surface-2 { background: var(--lb-surface-2); } .lb-muted { color: var(--lb-ink-muted); } /* ---------------------------------------------------------------------------- * 13. FILTERABLE DROPDOWN (country / industry pickers) * -------------------------------------------------------------------------- */ .lb-skin .dropdown-content, .lb-scope .dropdown-content { background: var(--lb-page); border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius-md); box-shadow: var(--lb-shadow-md); padding: var(--lb-space-2); } .lb-skin .dropdown-content .menu-list a, .lb-scope .dropdown-content .menu-list a { border-radius: var(--lb-radius-sm); color: var(--lb-ink-body); padding: 0.4em 0.6em; } .lb-skin .dropdown-content .menu-list a:hover, .lb-scope .dropdown-content .menu-list a:hover { background: var(--lb-accent-faded); color: var(--lb-accent); } .lb-skin .dropdown-content .menu-list a.is-active, .lb-scope .dropdown-content .menu-list a.is-active { background: var(--lb-accent); color: var(--lb-accent-contrast); } /* Search box injected into long pickers + scrollable list */ .lb-has-filter .dropdown-content { min-width: 248px; } .lb-has-filter .menu-list { max-height: 280px; overflow-y: auto; } .lb-filter-wrap { position: sticky; top: 0; z-index: 1; background: var(--lb-page); padding: 0 0 var(--lb-space-2); margin-bottom: var(--lb-space-1); border-bottom: 1px solid var(--lb-hairline); } .lb-filter-input { width: 100%; } /* ---------------------------------------------------------------------------- * 14. LEAD / COMPANY LIST ROW * -------------------------------------------------------------------------- */ .lb-lead-row { display: flex; align-items: center; gap: var(--lb-space-4); padding: var(--lb-space-4) var(--lb-space-5); background: var(--lb-page); border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius-lg); box-shadow: var(--lb-shadow-xs); transition: box-shadow var(--lb-dur) var(--lb-ease), border-color var(--lb-dur) var(--lb-ease), transform var(--lb-dur) var(--lb-ease); } .lb-lead-row:hover { box-shadow: var(--lb-shadow-md); border-color: var(--lb-hairline-strong); transform: translateY(-1px); } .lb-lead-row__avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--lb-radius-full); object-fit: cover; background: var(--lb-surface-2); border: 1px solid var(--lb-hairline); } .lb-lead-row__body { flex: 1 1 auto; min-width: 0; } .lb-lead-row__name { font-family: var(--lb-font-display); font-weight: 700; font-size: var(--lb-text-lg); line-height: 1.2; color: var(--lb-ink-display); display: inline-flex; align-items: center; gap: var(--lb-space-2); } .lb-lead-row__name a { color: var(--lb-ink-display); } .lb-lead-row__name a:hover { color: var(--lb-accent); } .lb-lead-row__role { color: var(--lb-ink-body); font-size: var(--lb-text-sm); margin-top: 2px; } .lb-lead-row__role a { color: var(--lb-accent); font-weight: 600; } .lb-lead-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-space-3); margin-top: var(--lb-space-2); color: var(--lb-ink-muted); font-size: var(--lb-text-xs); } .lb-lead-row__meta span, .lb-lead-row__meta a { display: inline-flex; align-items: center; gap: 0.35em; color: var(--lb-ink-muted); } .lb-lead-row__meta a:hover { color: var(--lb-accent); } .lb-lead-row__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--lb-space-2); align-items: stretch; min-width: 132px; } @media (max-width: 768px) { .lb-lead-row { flex-wrap: wrap; } .lb-lead-row__actions { flex-direction: row; width: 100%; min-width: 0; margin-top: var(--lb-space-3); } .lb-lead-row__actions .button { flex: 1 1 0; } } /* bm-design-system:end */