/* ═══════════════════════════════════════════════════════════════════════ * bildfie · modern minimal design tokens * Shared between the company profile, professional profile and every * marketplace list page. Values match the palette on GoJobs/ShareFlow — * subtle, editorial, minimal chrome. * ═══════════════════════════════════════════════════════════════════════ */ /* Site-wide typography — Noto Sans is the default typeface everywhere. `!important` is deliberate: app.css declared 'Inter' on and Bootstrap sprinkles font-family across many components. This makes Noto the single source of truth for body text on the site. Exemptions: `.bf-hero-headline` keeps DM Serif Display (its block-serif voice is central to the brand hero) and any element with the utility class `.font-serif` opts out. */ html, body, input, textarea, select, button, h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, label { font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .co-id-name, .bf-m-page-title, .co-card-h2, .bf-m-card-h2 { font-family: 'Noto Sans Display', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-optical-sizing: auto; } /* Brand-serif exemption — the hero and any explicit `.display-serif` block must keep DM Serif Display. Uses a wider selector list to beat the `h1, h2,…` override above. */ .bf-hero-headline, .bf-hero-headline *, .display-serif, .display-serif *, .font-serif, .font-serif * { font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif !important; } .bf-hero-headline em, .display-serif em { font-style: italic !important; } /* Bootstrap Icons + our other icon fonts must not get overridden — keep them. */ [class^="bi-"]:before, [class*=" bi-"]:before, .bi { font-family: 'bootstrap-icons' !important; } /* When the site-wide announcement bar is visible, the fixed dashboard sidebar sits behind it (`.bf-sidebar { top: 58px }` is now 58 + announcement height). Same for the backdrop mask on mobile. */ body.has-announcement .bf-sidebar, body.has-announcement .bf-side-backdrop { top: calc(var(--topbar-h, 58px) + 34px) !important; height: calc(100vh - var(--topbar-h, 58px) - 34px) !important; } body.has-announcement .bf-main { min-height: calc(100vh - var(--topbar-h, 58px) - 34px); } :root { --bf-page: #f7f7f5; --bf-white: #ffffff; --bf-ink: #0d0d0d; --bf-body: #3a3a3a; --bf-sub: #6b6b6b; --bf-muted: #9a9a9a; --bf-line: #eaeaea; --bf-line-soft: #f2f2f0; --bf-accent: #c0392b; --bf-accent-2: #0d1f36; --bf-success: #16a34a; --bf-warm-bg: #fff8f6; } /* ── Page background ── */ .bf-modern { background: var(--bf-page); } /* ── Cards ── */ .bf-m-card { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 12px; padding: 26px 28px; margin-bottom: 16px; } @media (max-width: 640px) { .bf-m-card { padding: 20px; } } .bf-m-card + .bf-m-card { margin-top: 0; } .bf-m-card-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--bf-muted); margin-bottom: 14px; } .bf-m-card-h2 { font-size: 16px; font-weight: 700; color: var(--bf-ink); letter-spacing: -.01em; margin: 0 0 12px; } .bf-m-card-lead { font-size: 15.5px; font-weight: 600; color: var(--bf-ink); line-height: 1.6; letter-spacing: -.005em; } .bf-m-prose { font-size: 14px; color: var(--bf-body); line-height: 1.75; } .bf-m-prose p, .bf-m-prose ul, .bf-m-prose ol { margin: 0 0 12px; } .bf-m-prose h2, .bf-m-prose h3 { font-size: 15px; font-weight: 700; color: var(--bf-ink); margin: 16px 0 8px; letter-spacing: -.01em; } .bf-m-prose a { color: var(--bf-accent); text-decoration: none; } .bf-m-prose a:hover { text-decoration: underline; } /* ── Chips ── */ .bf-m-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 99px; background: var(--bf-page); color: var(--bf-body); border: 1px solid var(--bf-line); } .bf-m-chip.accent { background: var(--bf-warm-bg); color: var(--bf-accent); border-color: #f0d5cf; } /* ── Tiny data pairs (key/value) ── */ .bf-m-fact-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-muted); margin-bottom: 3px; } .bf-m-fact-val { font-size: 13px; font-weight: 600; color: var(--bf-ink); word-break: break-word; line-height: 1.4; } .bf-m-fact-val a { color: var(--bf-accent); text-decoration: none; } .bf-m-fact-val a:hover { text-decoration: underline; } /* ── Buttons — quiet CTAs, no shadow soup ── */ .bf-m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; font-size: 13px; font-weight: 700; border-radius: 8px; border: 1px solid var(--bf-line); background: var(--bf-white); color: var(--bf-ink); text-decoration: none; cursor: pointer; transition: border-color .12s, color .12s; } .bf-m-btn:hover { border-color: var(--bf-accent-2); color: var(--bf-accent-2); } .bf-m-btn.primary { background: var(--bf-success); color: #fff; border-color: var(--bf-success); } .bf-m-btn.primary:hover { background: #15803d; border-color: #15803d; color: #fff; } .bf-m-btn.accent { background: var(--bf-accent); color: #fff; border-color: var(--bf-accent); } .bf-m-btn.accent:hover { background: #a93023; border-color: #a93023; color: #fff; } /* ── Small icon-only round buttons (used in social bars, actions) ── */ .bf-m-icon-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bf-white); border: 1px solid var(--bf-line); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; color: var(--bf-body); cursor: pointer; transition: border-color .12s, transform .12s; } .bf-m-icon-btn:hover { transform: translateY(-1px); border-color: var(--bf-accent-2); } /* ── Full-bleed cover pattern (used on profile pages) ── */ .bf-m-cover { position: relative; height: 300px; background: #eaeaea center/cover no-repeat; border-bottom: 1px solid rgba(0,0,0,.03); } .bf-m-cover.default { background: linear-gradient(120deg,#0d1f36,#1e3a5f); } @media (max-width: 640px) { .bf-m-cover { height: 200px; } } /* ── List-page grid card (used for professionals + companies lists) ── */ .bf-m-listgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .bf-m-listcard { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 12px; padding: 22px; transition: border-color .12s, transform .12s; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .bf-m-listcard:hover { border-color: var(--bf-accent-2); transform: translateY(-2px); color: inherit; text-decoration: none; } .bf-m-listcard-head { display: flex; gap: 14px; align-items: center; } .bf-m-listcard-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--bf-page); border: 1px solid var(--bf-line); flex-shrink: 0; } .bf-m-listcard-avatar.round { border-radius: 50%; } .bf-m-listcard-name { font-size: 15px; font-weight: 700; color: var(--bf-ink); line-height: 1.3; letter-spacing: -.01em; margin: 0 0 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .bf-m-listcard-sub { font-size: 12.5px; color: var(--bf-sub); line-height: 1.4; } .bf-m-listcard-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 11.5px; color: var(--bf-muted); } .bf-m-listcard-meta span { display: inline-flex; align-items: center; gap: 4px; } .bf-m-listcard-meta i { color: var(--bf-accent-2); font-size: 12px; } /* ── Section heading (page-level, above list) ── */ .bf-m-page-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--bf-ink); letter-spacing: -.02em; margin: 0 0 6px; } .bf-m-page-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bf-accent-2); margin-bottom: 6px; } .bf-m-page-sub { font-size: 13.5px; color: var(--bf-sub); line-height: 1.6; margin: 0; }