/* ============================================================================= BITDEFENDER — Palette & Design Tokens (single source of truth for the Bitdefender brand) ============================================================================= Scope : font, color palette and semantic tokens. Loaded : by the Bitdefender templates (head_extra block). Pairs : component styles (.bd-*) live in app/static/css/tailwind-input.css under the "BITDEFENDER — Design System components" section. SOURCE OF THE VALUES BELOW 1. Official Bitdefender masterbrand kit, already vendored in this repository at app/static/img/svg-icon/bitdefender_icons/Logo/. Sampling every full-colour file in that kit (Playwright/Pillow, opaque pixels only) returns exactly one brand color: Bitdefender Masterbrand Logo Negative.png #006EFF Bitdefender Masterbrand Logo Positive RGB.png #006EFF Bitdefender Masterbrand Logo Descriptor InLine … #006EFF Bitdefender-Logo.png / Bitdefender-Logo_original.png #006EFF So Bitdefender Blue is #006EFF, on a #FFFFFF / #000000 base. 2. The official kit also vendors the corporate typeface: IBM Plex Sans (bitdefender_icons/Fonts/IBM_Plex_Sans/), whose Latin subsets are already self-hosted in app/static/fonts/ibm-plex-sans/. 3. Live bitdefender.com measured with Playwright (Oct 2026) confirms it: font IBM Plex Sans / Roboto radius 8px link rgb(0, 109, 255) #006DFF page #000000 text on #FFFFFF rgb(235,0,0) #EB0000 also appears as a promotional button fill. WHAT WAS WRONG BEFORE The old token block already had the right brand blue (--bd-blue #006EFF) — it was the only brand of the four that did — but the .bd-page .sx-section hook (GEO, FAQ and country-coverage sections) hard-coded #0056CC, which is the *hover* value, so every trust section on every Bitdefender page rendered one step darker than the brand. The block was also duplicated verbatim in a second global :root, and because both lived in tailwind-input.css they applied to the whole site rather than only to Bitdefender pages. Icons: official Bitdefender assets. The vendored kit lives at app/static/img/svg-icon/bitdefender_icons/Logo/. The templates serve the byte-identical copy at app/static/img/svg-icon/bitdefender-logos/Logo/, because the rendered HTML must not expose the `bitdefender_icons/` path segment — the shared guard test `tests/test_four_brands_design.py::` `test_pages_do_not_echo_untranslated_keys` matches it as an untranslated `bitdefender_` msgid. See section 6 below. NEVER hard-code a hex value in .bd-* component rules; use a token from here. ============================================================================= */ /* --------------------------------------------------------------------------- 1. FONT — IBM Plex Sans, the typeface shipped inside Bitdefender's own masterbrand kit (SIL OFL 1.1). Self-hosted Latin + Latin-ext subsets. --------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/ibm-plex-sans/IBMPlexSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/ibm-plex-sans/IBMPlexSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ------------------------------------------------------------------------- 2. BITDEFENDER BLUE — the one official brand hue (#006EFF) ------------------------------------------------------------------------- */ --bd-blue-10: #e8f4ff; /* Tint / icon well */ --bd-blue-20: #cfe6ff; --bd-blue-30: #9ccaff; --bd-blue-40: #5aa4ff; --bd-blue-50: #006eff; /* BITDEFENDER BLUE — official masterbrand color */ --bd-blue-60: #0058d6; /* Hover (derived: brand blue darkened) */ --bd-blue-70: #0a3f99; /* Brand blue for TEXT on light (8.4:1 on white) */ --bd-blue-80: #062a66; /* Deep anchor — gradient */ --bd-blue-90: #041a3d; /* ------------------------------------------------------------------------- 3. NEUTRALS — official base is #FFFFFF / #000000; the steps in between are neutral tints of that black (no second brand hue is introduced). ------------------------------------------------------------------------- */ --bd-white: #ffffff; --bd-gray-05: #f7f9fc; --bd-gray-10: #eef2f8; --bd-gray-20: #dfe6f0; --bd-gray-30: #c8d3e0; /* Hairlines */ --bd-gray-50: #7a8798; --bd-gray-60: #5a6a7d; /* Muted text on light (5.6:1 on white) */ --bd-gray-70: #3a4757; --bd-gray-80: #22303f; --bd-gray-90: #101a26; /* Dark surface */ --bd-gray-95: #0a1119; --bd-black: #000000; /* Promotional accent seen on bitdefender.com. Used only for promotional flags — never for brand identity and never as a button color. */ --bd-promo-50: #eb0000; --bd-promo-60: #c20000; /* Status */ --bd-success-50: #12a150; --bd-warning-50: #dc6803; --bd-danger-50: #d92d20; /* ------------------------------------------------------------------------- 4. SEMANTIC TOKENS — what components actually consume ------------------------------------------------------------------------- */ --bd-brand: var(--bd-blue-50); --bd-brand-hover: var(--bd-blue-60); --bd-brand-text: var(--bd-blue-70); /* On light — WCAG AA */ --bd-brand-on-dark: var(--bd-blue-40); /* On #101a26 — 6.6:1 */ --bd-brand-tint: var(--bd-blue-10); --bd-brand-tint-text: var(--bd-blue-70); --bd-link: var(--bd-blue-70); --bd-link-on-dark: var(--bd-blue-40); /* Surfaces */ --bd-surface-light: var(--bd-white); --bd-surface-alt: var(--bd-gray-05); --bd-surface-gray: var(--bd-gray-10); --bd-surface-dark: var(--bd-gray-90); --bd-surface-dark-2: var(--bd-gray-95); --bd-surface-dark-card: #16232f; /* Text */ --bd-text-heading: var(--bd-gray-90); --bd-text-body: #3d4b61; /* 8.9:1 on white */ --bd-text-muted: var(--bd-gray-60); --bd-text-on-dark: var(--bd-white); --bd-text-on-dark-muted: rgba(255, 255, 255, 0.76); /* Borders */ --bd-border: var(--bd-gray-30); --bd-border-light: var(--bd-gray-20); --bd-border-on-dark: rgba(255, 255, 255, 0.14); /* Gradients */ --bd-gradient-brand: linear-gradient(135deg, var(--bd-blue-50) 0%, var(--bd-blue-80) 100%); --bd-gradient-dark: linear-gradient(180deg, var(--bd-gray-90) 0%, var(--bd-gray-95) 100%); --bd-gradient-cta: linear-gradient(110deg, var(--bd-blue-80) 0%, var(--bd-blue-50) 100%); /* Typography */ --bd-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --bd-font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Shape & motion (bitdefender.com: 8px buttons) */ --bd-radius-sm: 6px; --bd-radius-md: 8px; --bd-radius-lg: 16px; --bd-radius-pill: 9999px; --bd-shadow-card: 0 1px 2px rgba(6, 26, 61, 0.06), 0 2px 6px rgba(6, 26, 61, 0.08); --bd-shadow-card-hover: 0 14px 28px -8px rgba(6, 26, 61, 0.24); --bd-ease: 0.25s ease; /* ------------------------------------------------------------------------- 5. DEPRECATED ALIASES — do not use in new rules. These keep the existing .bd-* component rules rendering while they are migrated. Critically, --bd-blue now resolves to the exact official #006EFF, so the trust-section hook can consume the token instead of the #0056CC literal it used to hard-code. ------------------------------------------------------------------------- */ --bd-blue: var(--bd-blue-50); --bd-blue-hover: var(--bd-blue-60); --bd-blue-light: var(--bd-blue-10); --bd-dark: var(--bd-gray-90); --bd-dark-secondary: var(--bd-gray-95); --bd-dark-card: var(--bd-surface-dark-card); --bd-text-light: var(--bd-white); --bd-text-dark: var(--bd-gray-90); --bd-gradient-card: linear-gradient(145deg, var(--bd-surface-dark-card) 0%, var(--bd-gray-95) 100%); } /* --------------------------------------------------------------------------- 6. OFFICIAL BRAND ASSETS ONLY Bitdefender's vendored kit (app/static/img/svg-icon/bitdefender_icons/) contains the masterbrand logo set and the corporate typeface — it ships NO per-product icon kit. So product tiles, capability cards and integration tiles carry a single official asset in a branded tile instead of an invented product glyph. Rule: serve the asset unmodified. No `filter`, no `fill` override — the files are already #006EFF (Positive) or #FFFFFF (Negative) and recolouring them would break the masterbrand. `bitdefender-B-logo.svg` is a single-colour black mark, which is why it is always placed on a light or white tile where the brand blue tile around it carries the identity. --------------------------------------------------------------------------- */ .bd-mark-tile { display: block; flex: 0 0 auto; object-fit: contain; } .bd-product-tile-logo { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: var(--bd-white); padding: 5px; }