/* * BHF B2B – Logo styles * Lokalizacja: src/main/resources/static/css/logo.css * * Dodaj do w layout.html / base.html: * */ /* ─── Font ─────────────────────────────────────────────── */ @font-face { font-family: 'Outfit'; src: url('/css/fonts/outfit-latin-900-normal-678e1d03942dc0c7b29fe10b53375442.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/css/fonts/outfit-latin-400-normal-23191c444b9e40528bdfc989d29560ea.woff2') format('woff2'); font-weight: 400; font-display: swap; } /* ─── Zmienne ───────────────────────────────────────────── */ :root { --bhf-dark: #0A0F1E; --bhf-light-bg: #F5F7FF; --bhf-white: #ffffff; --bhf-grad: linear-gradient(90deg, #2552D9 0%, #5B6B8A 50%, #D4830F 100%); --bhf-grad-line: linear-gradient(90deg, #2552D9, #D4830F); --bhf-sub-dark: #334155; --bhf-sub-light: #64748B; --bhf-font: 'Outfit', 'Arial Black', Arial, sans-serif; } /* ─── Gradient helper ───────────────────────────────────── */ .bhf-b2b, .bhf-icon-b2b, .bhf-logo-compact .bhf-b2b { background: var(--bhf-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } /* ─── Logo pełne ────────────────────────────────────────── */ .bhf-logo { display: inline-flex; flex-direction: column; border-radius: 16px; padding: 40px 48px 36px; } .bhf-logo--dark { background: var(--bhf-dark); } .bhf-logo--light { background: var(--bhf-light-bg); } .bhf-wordmark { line-height: 0.88; } .bhf-bhf, .bhf-b2b { font-family: var(--bhf-font); font-weight: 900; font-size: 88px; letter-spacing: -3px; } .bhf-logo--dark .bhf-bhf { color: var(--bhf-white); } .bhf-logo--light .bhf-bhf { color: var(--bhf-dark); } /* Linia + tagline */ .bhf-sub { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .bhf-line { display: block; width: 120px; height: 3px; border-radius: 2px; background: var(--bhf-grad-line); flex-shrink: 0; } .bhf-tagline { font-family: var(--bhf-font); font-weight: 400; font-size: 11px; letter-spacing: 5px; } .bhf-logo--dark .bhf-tagline { color: var(--bhf-sub-dark); } .bhf-logo--light .bhf-tagline { color: var(--bhf-sub-light); } /* ─── Logo compact (navbar) ─────────────────────────────── */ .bhf-logo-compact { display: inline-flex; align-items: baseline; line-height: 1; } .bhf-logo-compact .bhf-bhf { font-family: var(--bhf-font); font-weight: 900; font-size: 32px; letter-spacing: -1px; color: var(--bhf-white); } .bhf-logo-compact .bhf-b2b { font-family: var(--bhf-font); font-weight: 900; font-size: 32px; letter-spacing: -1px; } /* Wersja jasna compact */ .bhf-logo-compact--light .bhf-bhf { color: var(--bhf-dark); } /* ─── Logo icon (48×48) ─────────────────────────────────── */ .bhf-logo-icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--bhf-dark); gap: 1px; flex-shrink: 0; } .bhf-icon-bhf { font-family: var(--bhf-font); font-weight: 900; font-size: 13px; letter-spacing: -0.5px; line-height: 1.1; color: var(--bhf-white); } .bhf-icon-b2b { font-family: var(--bhf-font); font-weight: 900; font-size: 13px; letter-spacing: -0.5px; line-height: 1.1; } /* ─── Rozmiary responsywne ──────────────────────────────── */ @media (max-width: 768px) { .bhf-bhf, .bhf-b2b { font-size: 60px; letter-spacing: -2px; } .bhf-logo { padding: 28px 32px 24px; } }