{"product_id":"esx-qbcore-qbox-blv-hud-system-customizable-hud-and-vehicle-hud","title":"[ESX\/QBCore\/Qbox] BLV HUD System | Customizable HUD \u0026 Vehicle HUD","description":"\u003cstyle\u003e\n  \/* =========================================================\n     FIVEM-LAB — BLV HUD SYSTEM\n     PLAYER HUD \/ VEHICLE HUD \/ CONTROL CENTER\n     ========================================================= *\/\n\n  .fml-blv-hud {\n    --gold:#ffd700;\n    --white:#ffffff;\n    --black:#050505;\n    --text:rgba(255,255,255,.92);\n    --muted:rgba(255,255,255,.66);\n    --dim:rgba(255,255,255,.42);\n    --line:rgba(255,255,255,.10);\n    --line-soft:rgba(255,255,255,.055);\n    --gold-line:rgba(255,215,0,.34);\n    --panel:rgba(255,255,255,.022);\n    --green:#6ce6a8;\n\n    width:100%;\n    max-width:1180px;\n    margin:0 auto;\n    padding:18px 0 88px;\n\n    color:var(--text);\n    background:transparent;\n    font-family:inherit;\n    font-size:16px;\n    line-height:1.7;\n  }\n\n  .fml-blv-hud,\n  .fml-blv-hud *,\n  .fml-blv-hud *::before,\n  .fml-blv-hud *::after {\n    box-sizing:border-box;\n  }\n\n  .fml-blv-hud h2,\n  .fml-blv-hud h3,\n  .fml-blv-hud p,\n  .fml-blv-hud dl,\n  .fml-blv-hud dt,\n  .fml-blv-hud dd {\n    margin:0;\n  }\n\n  .fml-blv-hud a {\n    color:inherit;\n  }\n\n  .fml-blv-hud ::selection {\n    color:#000;\n    background:var(--gold);\n  }\n\n  .fml-blv-hud code {\n    padding:2px 6px;\n    color:var(--gold);\n    background:rgba(255,215,0,.055);\n    border:1px solid rgba(255,215,0,.18);\n    border-radius:3px;\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n  }\n\n\n  \/* =========================================================\n     HERO\n     ========================================================= *\/\n\n  .fml-blv-hud__hero {\n    position:relative;\n    isolation:isolate;\n    overflow:hidden;\n\n    display:grid;\n    grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr);\n    gap:clamp(28px,5vw,64px);\n    align-items:center;\n\n    padding:clamp(36px,5.5vw,72px);\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:7px;\n\n    background:\n      radial-gradient(\n        circle at 90% 7%,\n        rgba(255,215,0,.15),\n        transparent 29%\n      ),\n      linear-gradient(\n        135deg,\n        rgba(255,215,0,.035),\n        transparent 48%\n      ),\n      rgba(0,0,0,.18);\n  }\n\n  .fml-blv-hud__hero::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:min(440px,72%);\n    height:2px;\n\n    background:var(--gold);\n    box-shadow:0 0 24px rgba(255,215,0,.36);\n  }\n\n  .fml-blv-hud__eyebrow {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px 16px;\n\n    margin-bottom:24px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__eyebrow span + span {\n    color:var(--dim);\n  }\n\n  .fml-blv-hud__eyebrow span + span::before {\n    content:\"\/\";\n    margin-right:16px;\n    color:var(--gold);\n  }\n\n  .fml-blv-hud__title {\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(43px,6vw,76px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.052em;\n    line-height:.95 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-blv-hud__lead {\n    max-width:780px;\n    margin-top:26px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(18px,1.9vw,23px);\n    font-weight:600;\n    line-height:1.57;\n  }\n\n  .fml-blv-hud__lead strong {\n    color:var(--white);\n  }\n\n  .fml-blv-hud__badges {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n\n    margin-top:31px;\n  }\n\n  .fml-blv-hud__badge {\n    display:inline-flex;\n    align-items:center;\n\n    min-height:37px;\n    padding:0 13px;\n\n    color:var(--white);\n    background:rgba(255,255,255,.025);\n\n    border:1px solid var(--line);\n    border-radius:3px;\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__badge--gold {\n    color:#050505;\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-blv-hud__meta {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px 25px;\n\n    margin-top:28px;\n    padding-top:22px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-blv-hud__meta span {\n    position:relative;\n    padding-left:17px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__meta span::before {\n    content:\"\";\n    position:absolute;\n    top:.7em;\n    left:0;\n\n    width:7px;\n    height:1px;\n\n    background:var(--gold);\n  }\n\n\n  \/* HERO MEDIA *\/\n\n  .fml-blv-hud__hero-media {\n    position:relative;\n    overflow:hidden;\n\n    min-height:390px;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:#050505;\n  }\n\n  .fml-blv-hud__hero-media img {\n    display:block;\n\n    width:100%;\n    height:100%;\n    min-height:390px;\n\n    object-fit:cover;\n  }\n\n  .fml-blv-hud__hero-media::after {\n    content:\"\";\n    position:absolute;\n    inset:0;\n\n    pointer-events:none;\n\n    background:\n      linear-gradient(\n        180deg,\n        transparent 58%,\n        rgba(0,0,0,.78)\n      );\n  }\n\n  .fml-blv-hud__media-tag {\n    position:absolute;\n    z-index:2;\n    right:14px;\n    bottom:14px;\n    left:14px;\n\n    color:rgba(255,255,255,.70);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n\n  \/* =========================================================\n     SECTION BASE\n     ========================================================= *\/\n\n  .fml-blv-hud__section {\n    padding:clamp(54px,7vw,88px) 0;\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-blv-hud__head {\n    display:grid;\n    grid-template-columns:minmax(125px,.24fr) minmax(0,1fr);\n    gap:clamp(26px,5vw,68px);\n    align-items:start;\n  }\n\n  .fml-blv-hud__index {\n    padding-top:7px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__kicker {\n    margin-bottom:13px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__section-title {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(29px,3.9vw,47px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.04em;\n    line-height:1.05 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-blv-hud__intro {\n    max-width:900px;\n    margin-top:20px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(16px,1.45vw,19px);\n    line-height:1.74;\n  }\n\n  .fml-blv-hud__statement {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    gap:30px;\n    align-items:end;\n\n    margin-top:42px;\n    padding-top:27px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-blv-hud__statement p {\n    max-width:850px;\n\n    color:var(--text) !important;\n\n    font-size:clamp(18px,2vw,23px);\n    font-weight:650;\n    line-height:1.5;\n  }\n\n  .fml-blv-hud__code-label {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    white-space:nowrap;\n  }\n\n\n  \/* =========================================================\n     STATS\n     ========================================================= *\/\n\n  .fml-blv-hud__stats {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:12px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__stat {\n    min-width:0;\n    padding:23px;\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:4px;\n\n    background:var(--panel);\n  }\n\n  .fml-blv-hud__stat small {\n    display:block;\n    margin-bottom:17px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__stat strong {\n    display:block;\n\n    color:var(--gold);\n\n    font-size:clamp(23px,2.8vw,36px);\n    font-weight:950;\n    letter-spacing:-.045em;\n    line-height:1;\n  }\n\n  .fml-blv-hud__stat span {\n    display:block;\n    margin-top:10px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.5;\n  }\n\n\n  \/* =========================================================\n     CARDS\n     ========================================================= *\/\n\n  .fml-blv-hud__grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__card {\n    position:relative;\n    overflow:hidden;\n\n    min-width:0;\n    padding:clamp(24px,3vw,31px);\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    background:var(--panel);\n\n    transition:\n      transform .18s ease,\n      border-color .18s ease,\n      background .18s ease;\n  }\n\n  .fml-blv-hud__card::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:0;\n    height:1px;\n\n    background:var(--gold);\n\n    transition:width .22s ease;\n  }\n\n  .fml-blv-hud__card:hover {\n    transform:translateY(-2px);\n    border-color:var(--gold-line);\n    background:rgba(255,255,255,.038);\n  }\n\n  .fml-blv-hud__card:hover::before {\n    width:100%;\n  }\n\n  .fml-blv-hud__card-top {\n    display:flex;\n    justify-content:space-between;\n    gap:14px;\n\n    margin-bottom:26px;\n  }\n\n  .fml-blv-hud__number {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:950;\n  }\n\n  .fml-blv-hud__label {\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:800;\n    letter-spacing:.09em;\n    text-align:right;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__card h3 {\n    margin:0 0 11px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(20px,2vw,25px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.03em;\n    line-height:1.15 !important;\n  }\n\n  .fml-blv-hud__card p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.7;\n  }\n\n\n  \/* =========================================================\n     HUD DATA GRID\n     ========================================================= *\/\n\n  .fml-blv-hud__modules {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:9px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__module {\n    padding:17px;\n\n    border:1px solid var(--line-soft);\n    border-radius:4px;\n\n    background:rgba(255,255,255,.014);\n  }\n\n  .fml-blv-hud__module strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:13px;\n    font-weight:900;\n  }\n\n  .fml-blv-hud__module span {\n    display:block;\n    margin-top:5px;\n\n    color:var(--dim);\n\n    font-size:10px;\n    line-height:1.45;\n  }\n\n\n  \/* =========================================================\n     PRESETS\n     ========================================================= *\/\n\n  .fml-blv-hud__presets {\n    display:grid;\n    grid-template-columns:repeat(5,minmax(0,1fr));\n    gap:10px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__preset {\n    min-width:0;\n    padding:21px 16px;\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:4px;\n\n    background:var(--panel);\n  }\n\n  .fml-blv-hud__preset small {\n    display:block;\n    margin-bottom:24px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n  }\n\n  .fml-blv-hud__preset strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:17px;\n    font-weight:950;\n  }\n\n  .fml-blv-hud__preset span {\n    display:block;\n    margin-top:7px;\n\n    color:var(--muted);\n\n    font-size:11px;\n    line-height:1.5;\n  }\n\n\n  \/* =========================================================\n     CONTROL CENTER\n     ========================================================= *\/\n\n  .fml-blv-hud__control {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) 260px;\n    gap:16px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__control-main,\n  .fml-blv-hud__control-side {\n    padding:clamp(26px,4vw,38px);\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:var(--panel);\n  }\n\n  .fml-blv-hud__control-main {\n    border-color:var(--gold-line);\n\n    background:\n      linear-gradient(\n        130deg,\n        rgba(255,215,0,.055),\n        transparent 54%\n      ),\n      var(--panel);\n  }\n\n  .fml-blv-hud__control small {\n    display:block;\n    margin-bottom:11px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__control h3 {\n    margin:0 0 13px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(22px,3vw,32px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.035em;\n    line-height:1.1 !important;\n  }\n\n  .fml-blv-hud__control p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.72;\n  }\n\n  .fml-blv-hud__control-side {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n\n    min-height:230px;\n  }\n\n  .fml-blv-hud__control-side strong {\n    color:var(--gold);\n\n    font-size:clamp(28px,4vw,43px);\n    font-weight:950;\n    letter-spacing:-.045em;\n    line-height:1;\n  }\n\n\n  \/* =========================================================\n     TECH\n     ========================================================= *\/\n\n  .fml-blv-hud__terminal {\n    margin-top:42px;\n    overflow:hidden;\n\n    border:1px solid var(--gold-line);\n    border-radius:4px;\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(255,215,0,.026),\n        transparent 30%\n      ),\n      rgba(0,0,0,.20);\n  }\n\n  .fml-blv-hud__terminal-head {\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:space-between;\n    gap:10px 24px;\n\n    padding:14px 18px;\n\n    border-bottom:1px solid var(--line);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__terminal-head strong {\n    color:var(--gold);\n  }\n\n  .fml-blv-hud__terminal-head span {\n    color:var(--dim);\n  }\n\n  .fml-blv-hud__spec-grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n\n  .fml-blv-hud__spec {\n    min-width:0;\n    padding:clamp(23px,3.5vw,32px);\n\n    border-right:1px solid var(--line);\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-blv-hud__spec:nth-child(2n) {\n    border-right:0;\n  }\n\n  .fml-blv-hud__spec:nth-last-child(-n + 2) {\n    border-bottom:0;\n  }\n\n  .fml-blv-hud__spec dt {\n    margin-bottom:11px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__spec-value {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(19px,2.3vw,28px);\n    font-weight:950;\n    letter-spacing:-.035em;\n    line-height:1.1;\n  }\n\n  .fml-blv-hud__spec:first-child\n  .fml-blv-hud__spec-value {\n    color:var(--gold);\n  }\n\n  .fml-blv-hud__spec-copy {\n    display:block;\n    margin-top:9px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.58;\n  }\n\n\n  \/* =========================================================\n     GALLERY\n     ========================================================= *\/\n\n  .fml-blv-hud__gallery {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:42px;\n  }\n\n  .fml-blv-hud__image {\n    overflow:hidden;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:#050505;\n  }\n\n  .fml-blv-hud__image img {\n    display:block;\n\n    width:100%;\n    height:100%;\n    min-height:300px;\n\n    object-fit:cover;\n\n    transition:transform .3s ease;\n  }\n\n  .fml-blv-hud__image:hover img {\n    transform:scale(1.015);\n  }\n\n\n  \/* =========================================================\n     LINKS\n     ========================================================= *\/\n\n  .fml-blv-hud__links {\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:30px;\n  }\n\n  .fml-blv-hud__link {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:10px;\n\n    min-height:46px;\n    padding:0 18px;\n\n    color:var(--white) !important;\n    background:rgba(255,255,255,.025);\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    font-size:11px;\n    font-weight:900;\n    letter-spacing:.04em;\n    text-decoration:none !important;\n    text-transform:uppercase;\n\n    transition:\n      transform .18s ease,\n      border-color .18s ease,\n      color .18s ease;\n  }\n\n  .fml-blv-hud__link:hover {\n    transform:translateY(-2px);\n    color:var(--gold) !important;\n    border-color:var(--gold-line);\n  }\n\n  .fml-blv-hud__link--gold {\n    color:#050505 !important;\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-blv-hud__link--gold:hover {\n    color:#050505 !important;\n    border-color:var(--gold);\n  }\n\n\n  \/* =========================================================\n     CLOSING\n     ========================================================= *\/\n\n  .fml-blv-hud__closing {\n    position:relative;\n    overflow:hidden;\n\n    margin-top:clamp(62px,8vw,100px);\n    padding:clamp(38px,6vw,72px);\n\n    border-top:1px solid var(--gold-line);\n    border-bottom:1px solid var(--line);\n\n    background:\n      radial-gradient(\n        circle at 100% 0,\n        rgba(255,215,0,.12),\n        transparent 34%\n      ),\n      rgba(255,255,255,.012);\n  }\n\n  .fml-blv-hud__closing-label {\n    margin-bottom:19px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.13em;\n    text-transform:uppercase;\n  }\n\n  .fml-blv-hud__closing h2 {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(31px,4.4vw,52px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.045em;\n    line-height:1.03 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-blv-hud__closing p {\n    max-width:890px;\n    margin-top:20px !important;\n\n    color:var(--muted) !important;\n\n    font-size:16px;\n    line-height:1.74;\n  }\n\n  .fml-blv-hud__final {\n    margin-top:clamp(44px,7vw,72px);\n\n    color:var(--white);\n\n    font-size:clamp(25px,3.7vw,44px);\n    font-weight:950;\n    letter-spacing:-.043em;\n    line-height:1.08;\n    text-align:center;\n\n    text-wrap:balance;\n  }\n\n  .fml-blv-hud__final em {\n    color:var(--gold);\n    font-style:normal;\n  }\n\n\n  \/* =========================================================\n     RESPONSIVE\n     ========================================================= *\/\n\n  @media (max-width:1000px) {\n    .fml-blv-hud__hero {\n      grid-template-columns:1fr;\n    }\n\n    .fml-blv-hud__hero-media,\n    .fml-blv-hud__hero-media img {\n      min-height:430px;\n    }\n\n    .fml-blv-hud__stats,\n    .fml-blv-hud__modules {\n      grid-template-columns:repeat(2,minmax(0,1fr));\n    }\n\n    .fml-blv-hud__presets {\n      grid-template-columns:repeat(3,minmax(0,1fr));\n    }\n  }\n\n  @media (max-width:900px) {\n    .fml-blv-hud__head {\n      grid-template-columns:1fr;\n      gap:15px;\n    }\n\n    .fml-blv-hud__control {\n      grid-template-columns:1fr;\n    }\n  }\n\n  @media (max-width:680px) {\n    .fml-blv-hud {\n      padding-top:8px;\n    }\n\n    .fml-blv-hud__hero {\n      padding:29px 20px;\n    }\n\n    .fml-blv-hud__eyebrow {\n      display:grid;\n      gap:5px;\n    }\n\n    .fml-blv-hud__eyebrow span + span::before {\n      display:none;\n    }\n\n    .fml-blv-hud__hero-media,\n    .fml-blv-hud__hero-media img {\n      min-height:270px;\n    }\n\n    .fml-blv-hud__statement,\n    .fml-blv-hud__stats,\n    .fml-blv-hud__grid,\n    .fml-blv-hud__modules,\n    .fml-blv-hud__presets,\n    .fml-blv-hud__spec-grid,\n    .fml-blv-hud__gallery {\n      grid-template-columns:1fr;\n    }\n\n    .fml-blv-hud__code-label {\n      white-space:normal;\n    }\n\n    .fml-blv-hud__spec {\n      border-right:0;\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-blv-hud__spec:nth-last-child(-n + 2) {\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-blv-hud__spec:last-child {\n      border-bottom:0;\n    }\n\n    .fml-blv-hud__links {\n      flex-direction:column;\n    }\n\n    .fml-blv-hud__link {\n      width:100%;\n    }\n\n    .fml-blv-hud__closing {\n      padding:36px 21px;\n    }\n  }\n\n  @media (prefers-reduced-motion:reduce) {\n    .fml-blv-hud *,\n    .fml-blv-hud *::before,\n    .fml-blv-hud *::after {\n      transition-duration:.01ms !important;\n      animation-duration:.01ms !important;\n    }\n  }\n\u003c\/style\u003e\n\n\n\u003carticle class=\"fml-blv-hud\"\u003e\n\n  \u003c!-- =======================================================\n       HERO\n       ======================================================= --\u003e\n\n  \u003cheader class=\"fml-blv-hud__hero\"\u003e\n\n    \u003cdiv\u003e\n\n      \u003cdiv class=\"fml-blv-hud__eyebrow\"\u003e\n        \u003cspan\u003eFiveM HUD System\u003c\/span\u003e\n        \u003cspan\u003eESX \/ QBCore \/ QBox\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003ch2 class=\"fml-blv-hud__title\"\u003e\n        BLV HUD System\n      \u003c\/h2\u003e\n\n      \u003cp class=\"fml-blv-hud__lead\"\u003e\n        Players stare at your HUD for hours.\n        If it looks cheap, \u003cstrong\u003ethe whole server starts feeling cheap.\u003c\/strong\u003e\n        BLV HUD fixes that with one polished interface for player stats,\n        vehicles, voice, radio, navigation, notifications and all those tiny\n        details that quietly decide whether a server feels finished or still\n        “in development”.\n      \u003c\/p\u003e\n\n\n      \u003cdiv class=\"fml-blv-hud__badges\"\u003e\n\n        \u003cspan class=\"fml-blv-hud__badge fml-blv-hud__badge--gold\"\u003e\n          €29.99\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-blv-hud__badge\"\u003e\n          ESX Legacy\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-blv-hud__badge\"\u003e\n          QBCore\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-blv-hud__badge\"\u003e\n          QBox\n        \u003c\/span\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-blv-hud__meta\"\u003e\n        \u003cspan\u003ePlayer + Vehicle HUD\u003c\/span\u003e\n        \u003cspan\u003eCustom Layout Editor\u003c\/span\u003e\n        \u003cspan\u003ePersistent Profiles\u003c\/span\u003e\n        \u003cspan\u003eResponsive \/ Ultrawide\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__hero-media\"\u003e\n\n      \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/f\/d\/1\/1\/fd11aca92f38eb23f5e6e2e6653dc23887bf3be5.jpeg\" alt=\"BLV HUD System for FiveM\" loading=\"lazy\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__media-tag\"\u003e\n        One HUD · One Visual Language · Your Server\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/header\u003e\n\n\n  \u003c!-- =======================================================\n       WHY\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        00 \/ The Point\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          Nobody joins a server because of a health bar\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          But players absolutely notice when every piece of the interface feels like it belongs together.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-blv-hud__intro\"\u003e\n          A good HUD should not fight for attention every second. It should sit\n          there, quietly doing its job, then show the right information exactly\n          when the player needs it. BLV HUD is built around that idea:\n          a cleaner screen during normal gameplay, detailed information when it\n          matters and enough customization that players do not have to live\n          with somebody else's perfect layout.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__statement\"\u003e\n\n      \u003cp\u003e\n        Oxygen does not need to scream at you while standing on a sidewalk.\n        Vehicle data does not need to hang around after you leave the car.\n        BLV can hide contextual information until it actually has a reason to\n        exist on screen.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-blv-hud__code-label\"\u003e\n        \/\/ LESS CLUTTER · MORE SIGNAL\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__stats\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eFrameworks\u003c\/small\u003e\n        \u003cstrong\u003e3\u003c\/strong\u003e\n        \u003cspan\u003eESX Legacy, QBCore and QBox.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eHUD Presets\u003c\/small\u003e\n        \u003cstrong\u003e5\u003c\/strong\u003e\n        \u003cspan\u003eBLV, Minimal, Compact, Streamer and Custom.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eInterface\u003c\/small\u003e\n        \u003cstrong\u003e2-in-1\u003c\/strong\u003e\n        \u003cspan\u003ePlayer HUD and dedicated vehicle cockpit.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eSubscription\u003c\/small\u003e\n        \u003cstrong\u003eNo\u003c\/strong\u003e\n        \u003cspan\u003eNo recurring subscription listed.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       PLAYER HUD\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        01 \/ Player\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          Everything important. Not everything all the time.\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Your player HUD should answer questions, not create visual noise.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-blv-hud__intro\"\u003e\n          Health, armor, money, job, voice, radio, weapon information, location\n          and character status can all live inside the same visual system.\n          Components can also use dynamic visibility so the screen stays\n          cleaner when certain data simply is not relevant.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__modules\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eHealth\u003c\/strong\u003e\n        \u003cspan\u003eCurrent player health.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eArmor\u003c\/strong\u003e\n        \u003cspan\u003eCurrent armor level.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eHunger\u003c\/strong\u003e\n        \u003cspan\u003eFramework status information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eThirst\u003c\/strong\u003e\n        \u003cspan\u003eFramework status information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eStress\u003c\/strong\u003e\n        \u003cspan\u003eOptional stress system display.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eOxygen\u003c\/strong\u003e\n        \u003cspan\u003eCan stay hidden until needed.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eStamina\u003c\/strong\u003e\n        \u003cspan\u003ePlayer stamina information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eVoice\u003c\/strong\u003e\n        \u003cspan\u003eActivity, mode and range.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eRadio\u003c\/strong\u003e\n        \u003cspan\u003eStatus and current frequency.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eLocation\u003c\/strong\u003e\n        \u003cspan\u003eStreet and area information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eCompass\u003c\/strong\u003e\n        \u003cspan\u003eCurrent heading.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eCash \/ Bank\u003c\/strong\u003e\n        \u003cspan\u003ePlayer finances.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eJob\u003c\/strong\u003e\n        \u003cspan\u003eJob and grade information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eServer ID\u003c\/strong\u003e\n        \u003cspan\u003eCurrent player identifier.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eWeapon\u003c\/strong\u003e\n        \u003cspan\u003eCurrent weapon.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__module\"\u003e\n        \u003cstrong\u003eAmmo\u003c\/strong\u003e\n        \u003cspan\u003eCurrent ammunition information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       VEHICLE\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        02 \/ Vehicle\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          The moment you enter the car, the interface should change with you\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          A proper digital cockpit instead of a lonely speed number in the corner.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__grid\"\u003e\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eSpeed · RPM · Gear\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eActual Driving Information\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Speed, current gear and RPM sit together where they make sense.\n          KM\/H and MPH are both supported, so the HUD can match the style of\n          your server instead of forcing one unit system on everybody.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eFuel · Engine · Lights\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eThe Car Can Tell You What Is Wrong\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Fuel, engine condition, lights and vehicle status indicators give\n          players useful feedback without needing another separate UI resource\n          for every basic vehicle state.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eSeatbelt · Warning\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eSeatbelt That Is More Than an Icon\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Custom keybinds, warning speeds, warning sounds, volume control,\n          vehicle blacklists and optional exit restrictions let you shape the\n          seatbelt behavior around your own driving rules.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eProfiles · Vehicle Classes\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eNot Every Vehicle Needs the Same HUD\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Specific models and vehicle classes can be excluded, while\n          vehicle-dependent profiles make it possible to tailor the experience\n          around different kinds of driving.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       CONTROL CENTER\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        03 \/ Control\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          This is where BLV stops feeling like “just a HUD”\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Give players a control center instead of making them edit config files in their imagination.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__control\"\u003e\n\n      \u003carticle class=\"fml-blv-hud__control-main\"\u003e\n\n        \u003csmall\u003e\n          \/\/ HUD CONTROL CENTER\n        \u003c\/small\u003e\n\n        \u003ch3\u003e\n          Scale it. Move it. Hide it. Save it.\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Players can manage HUD presets, scale, opacity, component visibility,\n          compact spacing, minimap behavior, voice settings, themes, layout,\n          HUD audio and both player and vehicle profiles from the integrated\n          control interface.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003caside class=\"fml-blv-hud__control-side\"\u003e\n\n        \u003csmall\u003e\n          Player profile\n        \u003c\/small\u003e\n\n        \u003cstrong\u003eSAVED\u003c\/strong\u003e\n\n        \u003csmall\u003e\n          Settings persist for the player\n        \u003c\/small\u003e\n\n      \u003c\/aside\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__statement\"\u003e\n\n      \u003cp\u003e\n        And yes — supported HUD components can actually be repositioned.\n        Players are not stuck with one “designer-approved” layout forever.\n        Move things where they feel right, save the setup, or reset everything\n        back to the default BLV layout.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-blv-hud__code-label\"\u003e\n        \/\/ YOUR SCREEN · YOUR LAYOUT\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       PRESETS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        04 \/ Presets\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          Sometimes you want to customize everything\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Sometimes you just want to click one preset and get back to playing.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__presets\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__preset\"\u003e\n        \u003csmall\u003e01\u003c\/small\u003e\n        \u003cstrong\u003eBLV\u003c\/strong\u003e\n        \u003cspan\u003eThe original Blacklist V HUD experience.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__preset\"\u003e\n        \u003csmall\u003e02\u003c\/small\u003e\n        \u003cstrong\u003eMinimal\u003c\/strong\u003e\n        \u003cspan\u003eKeep the essentials and clear the rest.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__preset\"\u003e\n        \u003csmall\u003e03\u003c\/small\u003e\n        \u003cstrong\u003eCompact\u003c\/strong\u003e\n        \u003cspan\u003eTighter spacing for a smaller visual footprint.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__preset\"\u003e\n        \u003csmall\u003e04\u003c\/small\u003e\n        \u003cstrong\u003eStreamer\u003c\/strong\u003e\n        \u003cspan\u003eCleaner presentation for recording and streaming.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__preset\"\u003e\n        \u003csmall\u003e05\u003c\/small\u003e\n        \u003cstrong\u003eCustom\u003c\/strong\u003e\n        \u003cspan\u003eThe player's own saved layout and settings.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       SYSTEMS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        05 \/ More\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          It keeps going\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Voice, radio, stress, minimap, notifications — the stuff people usually glue together from four different resources.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__grid\"\u003e\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eVoice · Radio\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eVoice That Actually Feels Alive\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Voice activity, range, mode, radio activity and frequency can all be\n          represented inside the HUD. When the player speaks, the interface can\n          react without exploding into unnecessary animation.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eStress · Optional\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eUse the Stress System — or Don't\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Shooting, high-speed driving and configured gameplay conditions can\n          influence stress and trigger configurable effects. Already running\n          your own stress resource? The complete BLV system can be disabled.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eMap · Compass · Street\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eMinimap on Your Terms\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Keep it permanently visible, hide it completely or show it only\n          inside vehicles. Street information and compass direction can sit\n          alongside it when the server needs navigation data.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eInfo · Success · Error\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eBuilt-In Notifications\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Info, success, warning and error notifications support configurable\n          duration and stacking, with exports and events available for other\n          resources to use the same notification style.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e05\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eProgress · Interaction\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eProgress UI Included\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Timed interactions can use the included progress interface, helping\n          other scripts stay visually consistent with the rest of BLV.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-blv-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__card-top\"\u003e\n          \u003cspan class=\"fml-blv-hud__number\"\u003e06\u003c\/span\u003e\n          \u003cspan class=\"fml-blv-hud__label\"\u003eJobs · Vehicles · Profiles\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eProfiles Can Follow the Gameplay\u003c\/h3\u003e\n\n        \u003cp\u003e\n          BLV includes support for vehicle-dependent and job-dependent profiles,\n          giving different gameplay situations room to use different HUD\n          behavior instead of forcing one universal setup.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       SCREENSHOTS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        06 \/ Preview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          The interface should look good when you're playing, not only in the product banner\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Clean information, strong contrast and enough breathing room to keep the game visible.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__gallery\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__image\"\u003e\n\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/1\/b\/0\/c\/1b0ca63799435eace349ebf9abc44de72bfb6350.jpeg\" alt=\"BLV HUD FiveM player interface\" loading=\"lazy\"\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-blv-hud__image\"\u003e\n\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/b\/1\/9\/d\/b19d8c92746bcab04e6001cec59d052928244337.jpeg\" alt=\"BLV HUD FiveM vehicle HUD preview\" loading=\"lazy\"\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       RESPONSIVE\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        07 \/ Displays\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          Because not everybody plays at 1920×1080 anymore\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          From regular Full HD to ultrawide and 4K — the HUD is designed to adapt.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__stats\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eFull HD\u003c\/small\u003e\n        \u003cstrong\u003e1920×1080\u003c\/strong\u003e\n        \u003cspan\u003eStandard target layout.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eQHD\u003c\/small\u003e\n        \u003cstrong\u003e2560×1440\u003c\/strong\u003e\n        \u003cspan\u003eHigher-resolution target layout.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003eUltrawide\u003c\/small\u003e\n        \u003cstrong\u003e3440×1440\u003c\/strong\u003e\n        \u003cspan\u003eWide-format target layout.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-blv-hud__stat\"\u003e\n        \u003csmall\u003e4K\u003c\/small\u003e\n        \u003cstrong\u003e3840×2160\u003c\/strong\u003e\n        \u003cspan\u003eUltra-high-resolution target layout.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       TECHNICAL\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        08 \/ Technical\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          The boring details that suddenly matter when you're about to install it\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          Framework support, accessible configuration and no recurring subscription.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__terminal\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__terminal-head\"\u003e\n\n        \u003cstrong\u003e\n          \/\/ BLV_HUD_SYSTEM\n        \u003c\/strong\u003e\n\n        \u003cspan\u003e\n          FiveM \/ Player UI \/ Vehicle UI\n        \u003c\/span\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdl class=\"fml-blv-hud__spec-grid\"\u003e\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eFrameworks\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              ESX \/ QBCore \/ QBox\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Compatible with ESX Legacy, QBCore and QBox configurations.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eResource Type\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              Complete HUD\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Player HUD, vehicle HUD and surrounding interface systems.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003ePrice Listed\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              €29.99\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Price listed in the supplied release information.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eCode Access\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              Config + Locales\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Configuration and locale files are listed as accessible.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eApprox. Lines\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              ~5,800\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Approximate line count supplied with the release.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eSubscription\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              No\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              No recurring subscription is listed.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eCustomization\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              Extensive\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Components, profiles, colors, scale, voice, minimap, seatbelt,\n              stress, vehicles, audio and more can be configured.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-blv-hud__spec\"\u003e\n\n          \u003cdt\u003eSupport\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-blv-hud__spec-value\"\u003e\n              Yes\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-blv-hud__spec-copy\"\u003e\n              Developer support is listed as available.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n      \u003c\/dl\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       PURCHASE\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-blv-hud__index\"\u003e\n        09 \/ Get It\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-blv-hud__kicker\"\u003e\n          One UI system instead of stitching together a dashboard from leftovers\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-blv-hud__section-title\"\u003e\n          If players are going to look at it every minute they play, it might as well look like you cared.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-blv-hud__links\"\u003e\n\n      \u003ca class=\"fml-blv-hud__link fml-blv-hud__link--gold\" href=\"https:\/\/blacklistv-scripts.tebex.io\/package\/7650632\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        View on Tebex\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n      \u003ca class=\"fml-blv-hud__link\" href=\"https:\/\/forum.cfx.re\/t\/paid-esx-qbcore-qbox-blv-hud-system-customizable-hud-vehicle-hud\/5424215\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        Cfx.re Release\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       CLOSING\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-blv-hud__closing\"\u003e\n\n    \u003cdiv class=\"fml-blv-hud__closing-label\"\u003e\n      BLV HUD \/ FiveM Interface System\n    \u003c\/div\u003e\n\n    \u003ch2\u003e\n      A HUD is not decoration. It is the part of your server players live with every single session.\n    \u003c\/h2\u003e\n\n    \u003cp\u003e\n      BLV HUD pulls player information, vehicle data, voice and radio,\n      seatbelt behavior, stress, navigation, notifications, progress UI,\n      presets and layout customization into one consistent interface for ESX,\n      QBCore and QBox. Less patchwork. Less random UI. More of that\n      “yeah, this server actually feels finished” feeling.\n    \u003c\/p\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003cdiv class=\"fml-blv-hud__final\"\u003e\n    Players may not compliment your HUD every day.\n    \u003cem\u003eThey will absolutely notice when it feels bad.\u003c\/em\u003e\n  \u003c\/div\u003e\n\n\u003c\/article\u003e","brand":"Blacklistv Scripts","offers":[{"title":"Default Title","offer_id":45771227922541,"sku":null,"price":34.83,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2072\/3053\/files\/fd11aca92f38eb23f5e6e2e6653dc23887bf3be5.jpg?v=1788461715","url":"https:\/\/fivem-lab.com\/products\/esx-qbcore-qbox-blv-hud-system-customizable-hud-and-vehicle-hud","provider":"Fivem-Lab","version":"1.0","type":"link"}