{"product_id":"esx-qbcore-hexa-hud-customizable-modern-hud","title":"Hexa HUD – Customizable Modern HUD","description":"\u003cstyle\u003e\n  \/* =========================================================\n     FIVEM-LAB — HEXA HUD\n     FREE CUSTOMIZABLE HUD \/ ESX LEGACY \/ QBCORE\n     ========================================================= *\/\n\n  .fml-hexa-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:#68e3a5;\n\n    width:100%;\n    max-width:1180px;\n    margin:0 auto;\n    padding:18px 0 88px;\n    color:var(--text);\n    background:transparent;\n    font-family:inherit;\n    font-size:16px;\n    line-height:1.7;\n  }\n\n  .fml-hexa-hud,\n  .fml-hexa-hud *,\n  .fml-hexa-hud *::before,\n  .fml-hexa-hud *::after {\n    box-sizing:border-box;\n  }\n\n  .fml-hexa-hud h2,\n  .fml-hexa-hud h3,\n  .fml-hexa-hud p,\n  .fml-hexa-hud dl,\n  .fml-hexa-hud dt,\n  .fml-hexa-hud dd {\n    margin:0;\n  }\n\n  .fml-hexa-hud a {\n    color:inherit;\n  }\n\n  .fml-hexa-hud ::selection {\n    color:#000;\n    background:var(--gold);\n  }\n\n  .fml-hexa-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    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n  }\n\n  \/* =========================================================\n     HERO\n     ========================================================= *\/\n\n  .fml-hexa-hud__hero {\n    position:relative;\n    isolation:isolate;\n    overflow:hidden;\n    padding:clamp(38px,6vw,80px);\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 92% 5%,\n        rgba(255,215,0,.15),\n        transparent 31%\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-hexa-hud__hero::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n    width:min(430px,70%);\n    height:2px;\n    background:var(--gold);\n    box-shadow:0 0 24px rgba(255,215,0,.36);\n  }\n\n  .fml-hexa-hud__hero::after {\n    content:\"HEXA STUDIO \/ HUD \/ ESX \/ QBCORE\";\n    position:absolute;\n    top:20px;\n    right:22px;\n    color:rgba(255,255,255,.14);\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:.15em;\n    text-transform:uppercase;\n  }\n\n  .fml-hexa-hud__eyebrow {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px 16px;\n    align-items:center;\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-hexa-hud__eyebrow span + span {\n    color:var(--dim);\n  }\n\n  .fml-hexa-hud__eyebrow span + span::before {\n    content:\"\/\";\n    margin-right:16px;\n    color:var(--gold);\n  }\n\n  .fml-hexa-hud__title {\n    max-width:1000px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(42px,6vw,76px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.052em;\n    line-height:.95 !important;\n    text-wrap:balance;\n  }\n\n  .fml-hexa-hud__hero-copy {\n    max-width:920px;\n    margin-top:28px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(18px,1.9vw,23px);\n    font-weight:600;\n    line-height:1.56;\n  }\n\n  .fml-hexa-hud__hero-copy strong {\n    color:var(--white);\n  }\n\n  .fml-hexa-hud__badges {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n    margin-top:34px;\n  }\n\n  .fml-hexa-hud__badge {\n    display:inline-flex;\n    align-items:center;\n    min-height:38px;\n    padding:0 14px;\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-hexa-hud__badge--gold {\n    color:var(--black);\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-hexa-hud__meta {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px 26px;\n\n    margin-top:30px;\n    padding-top:22px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-hexa-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:.10em;\n    text-transform:uppercase;\n  }\n\n  .fml-hexa-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     SECTIONS\n     ========================================================= *\/\n\n  .fml-hexa-hud__section {\n    padding:clamp(56px,8vw,94px) 0;\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-hexa-hud__head {\n    display:grid;\n    grid-template-columns:minmax(126px,.26fr) minmax(0,1fr);\n    gap:clamp(28px,5vw,72px);\n    align-items:start;\n  }\n\n  .fml-hexa-hud__index {\n    padding-top:8px;\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-hexa-hud__kicker {\n    margin-bottom:14px;\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-hexa-hud__section-title {\n    max-width:960px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(30px,4vw,48px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.04em;\n    line-height:1.04 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-hexa-hud__intro {\n    max-width:910px;\n    margin-top:22px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(16px,1.5vw,19px);\n    line-height:1.75;\n  }\n\n  .fml-hexa-hud__statement {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    gap:clamp(28px,5vw,72px);\n    align-items:end;\n\n    margin-top:clamp(34px,5vw,58px);\n    padding-top:30px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-hexa-hud__statement p {\n    max-width:870px;\n\n    color:var(--text) !important;\n\n    font-size:clamp(18px,2vw,24px);\n    font-weight:650;\n    line-height:1.5;\n  }\n\n  .fml-hexa-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     GALLERY\n     ========================================================= *\/\n\n  .fml-hexa-hud__gallery {\n    display:grid;\n    grid-template-columns:1.3fr .7fr;\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__gallery-side {\n    display:grid;\n    grid-template-rows:repeat(2,1fr);\n    gap:14px;\n  }\n\n  .fml-hexa-hud__image {\n    position:relative;\n    overflow:hidden;\n    min-height:240px;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:#050505;\n  }\n\n  .fml-hexa-hud__gallery \u003e .fml-hexa-hud__image {\n    min-height:510px;\n  }\n\n  .fml-hexa-hud__image img {\n    display:block;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n\n    transition:transform .35s ease;\n  }\n\n  .fml-hexa-hud__image:hover img {\n    transform:scale(1.018);\n  }\n\n  .fml-hexa-hud__image::after {\n    content:\"\";\n    position:absolute;\n    inset:0;\n\n    pointer-events:none;\n\n    background:\n      linear-gradient(\n        180deg,\n        transparent 70%,\n        rgba(0,0,0,.45)\n      );\n  }\n\n  \/* =========================================================\n     CARDS\n     ========================================================= *\/\n\n  .fml-hexa-hud__grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__card {\n    position:relative;\n    overflow:hidden;\n\n    min-width:0;\n    padding:clamp(24px,3vw,32px);\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-hexa-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-hexa-hud__card:hover {\n    transform:translateY(-2px);\n    border-color:var(--gold-line);\n    background:rgba(255,255,255,.038);\n  }\n\n  .fml-hexa-hud__card:hover::before {\n    width:100%;\n  }\n\n  .fml-hexa-hud__card-top {\n    display:flex;\n    justify-content:space-between;\n    gap:14px;\n\n    margin-bottom:28px;\n  }\n\n  .fml-hexa-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-hexa-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-hexa-hud__card h3 {\n    margin:0 0 12px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(20px,2vw,26px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.03em;\n    line-height:1.15 !important;\n  }\n\n  .fml-hexa-hud__card p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.7;\n  }\n\n  \/* =========================================================\n     PRESETS\n     ========================================================= *\/\n\n  .fml-hexa-hud__presets {\n    display:grid;\n    grid-template-columns:repeat(5,minmax(0,1fr));\n    gap:10px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__preset {\n    min-width:0;\n    padding:22px 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-hexa-hud__preset small {\n    display:block;\n    margin-bottom:25px;\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-hexa-hud__preset strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:17px;\n    font-weight:950;\n    letter-spacing:-.02em;\n  }\n\n  .fml-hexa-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     MODULES\n     ========================================================= *\/\n\n  .fml-hexa-hud__modules {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:10px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__module {\n    padding:18px;\n\n    border:1px solid var(--line-soft);\n    border-radius:4px;\n\n    background:rgba(255,255,255,.015);\n  }\n\n  .fml-hexa-hud__module strong {\n    display:block;\n\n    color:var(--white);\n\n    font-size:13px;\n    font-weight:900;\n  }\n\n  .fml-hexa-hud__module span {\n    display:block;\n    margin-top:5px;\n\n    color:var(--dim);\n\n    font-size:10px;\n    line-height:1.5;\n  }\n\n  \/* =========================================================\n     PERFORMANCE\n     ========================================================= *\/\n\n  .fml-hexa-hud__stats {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__stat {\n    padding:24px;\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-hexa-hud__stat small {\n    display:block;\n    margin-bottom:19px;\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:.11em;\n    text-transform:uppercase;\n  }\n\n  .fml-hexa-hud__stat strong {\n    display:block;\n\n    color:var(--gold);\n\n    font-size:clamp(25px,3vw,38px);\n    font-weight:950;\n    letter-spacing:-.045em;\n    line-height:1;\n  }\n\n  .fml-hexa-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     TECH\n     ========================================================= *\/\n\n  .fml-hexa-hud__terminal {\n    margin-top:clamp(40px,6vw,66px);\n\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-hexa-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-hexa-hud__terminal-head strong {\n    color:var(--gold);\n  }\n\n  .fml-hexa-hud__terminal-head span {\n    color:var(--dim);\n  }\n\n  .fml-hexa-hud__spec-grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n\n  .fml-hexa-hud__spec {\n    min-width:0;\n    padding:clamp(24px,4vw,34px);\n\n    border-right:1px solid var(--line);\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-hexa-hud__spec:nth-child(2n) {\n    border-right:0;\n  }\n\n  .fml-hexa-hud__spec:nth-last-child(-n + 2) {\n    border-bottom:0;\n  }\n\n  .fml-hexa-hud__spec dt {\n    margin-bottom:12px;\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-hexa-hud__spec-value {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(19px,2.4vw,29px);\n    font-weight:950;\n    letter-spacing:-.035em;\n    line-height:1.1;\n  }\n\n  .fml-hexa-hud__spec:first-child\n  .fml-hexa-hud__spec-value {\n    color:var(--gold);\n  }\n\n  .fml-hexa-hud__spec-copy {\n    display:block;\n    margin-top:10px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.58;\n  }\n\n  \/* =========================================================\n     COMMANDS\n     ========================================================= *\/\n\n  .fml-hexa-hud__commands {\n    display:grid;\n    gap:10px;\n\n    margin-top:clamp(40px,6vw,64px);\n  }\n\n  .fml-hexa-hud__command {\n    display:grid;\n    grid-template-columns:minmax(150px,.35fr) minmax(0,.65fr);\n    gap:22px;\n    align-items:center;\n\n    padding:18px 20px;\n\n    border:1px solid var(--line-soft);\n    border-radius:4px;\n\n    background:var(--panel);\n  }\n\n  .fml-hexa-hud__command code {\n    width:max-content;\n  }\n\n  .fml-hexa-hud__command span {\n    color:var(--muted);\n    font-size:13px;\n  }\n\n  \/* =========================================================\n     LINKS\n     ========================================================= *\/\n\n  .fml-hexa-hud__links {\n    display:flex;\n    flex-wrap:wrap;\n    gap:14px;\n\n    margin-top:32px;\n  }\n\n  .fml-hexa-hud__link {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:12px;\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:850;\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-hexa-hud__link:hover {\n    transform:translateY(-2px);\n    color:var(--gold) !important;\n    border-color:var(--gold-line);\n  }\n\n  .fml-hexa-hud__link--gold {\n    color:var(--black) !important;\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-hexa-hud__link--gold:hover {\n    color:var(--black) !important;\n    border-color:var(--gold);\n  }\n\n  \/* =========================================================\n     CLOSING\n     ========================================================= *\/\n\n  .fml-hexa-hud__closing {\n    position:relative;\n    overflow:hidden;\n\n    margin-top:clamp(64px,9vw,110px);\n    padding:clamp(40px,7vw,80px);\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-hexa-hud__closing-label {\n    margin-bottom:20px;\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-hexa-hud__closing h2 {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(31px,4.5vw,53px) !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-hexa-hud__closing p {\n    max-width:900px;\n    margin-top:22px !important;\n\n    color:var(--muted) !important;\n\n    font-size:16px;\n    line-height:1.75;\n  }\n\n  .fml-hexa-hud__final {\n    margin-top:clamp(46px,7vw,76px);\n\n    color:var(--white);\n\n    font-size:clamp(26px,3.8vw,45px);\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-hexa-hud__final em {\n    color:var(--gold);\n    font-style:normal;\n  }\n\n  \/* =========================================================\n     RESPONSIVE\n     ========================================================= *\/\n\n  @media (max-width:1000px) {\n    .fml-hexa-hud__presets {\n      grid-template-columns:repeat(3,minmax(0,1fr));\n    }\n\n    .fml-hexa-hud__modules,\n    .fml-hexa-hud__stats {\n      grid-template-columns:repeat(2,minmax(0,1fr));\n    }\n  }\n\n  @media (max-width:900px) {\n    .fml-hexa-hud__head {\n      grid-template-columns:1fr;\n      gap:16px;\n    }\n\n    .fml-hexa-hud__gallery {\n      grid-template-columns:1fr;\n    }\n\n    .fml-hexa-hud__gallery \u003e .fml-hexa-hud__image {\n      min-height:360px;\n    }\n\n    .fml-hexa-hud__gallery-side {\n      grid-template-columns:repeat(2,minmax(0,1fr));\n      grid-template-rows:none;\n    }\n  }\n\n  @media (max-width:680px) {\n    .fml-hexa-hud {\n      padding-top:8px;\n    }\n\n    .fml-hexa-hud__hero {\n      padding:31px 21px 34px;\n    }\n\n    .fml-hexa-hud__hero::after {\n      display:none;\n    }\n\n    .fml-hexa-hud__eyebrow {\n      display:grid;\n      gap:6px;\n    }\n\n    .fml-hexa-hud__eyebrow span + span::before {\n      display:none;\n    }\n\n    .fml-hexa-hud__statement,\n    .fml-hexa-hud__grid,\n    .fml-hexa-hud__presets,\n    .fml-hexa-hud__modules,\n    .fml-hexa-hud__stats,\n    .fml-hexa-hud__spec-grid,\n    .fml-hexa-hud__gallery-side {\n      grid-template-columns:1fr;\n    }\n\n    .fml-hexa-hud__code-label {\n      white-space:normal;\n    }\n\n    .fml-hexa-hud__command {\n      grid-template-columns:1fr;\n      gap:8px;\n    }\n\n    .fml-hexa-hud__spec {\n      border-right:0;\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-hexa-hud__spec:nth-last-child(-n + 2) {\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-hexa-hud__spec:last-child {\n      border-bottom:0;\n    }\n\n    .fml-hexa-hud__links {\n      flex-direction:column;\n    }\n\n    .fml-hexa-hud__link {\n      width:100%;\n    }\n\n    .fml-hexa-hud__closing {\n      padding:38px 22px;\n    }\n  }\n\n  @media (prefers-reduced-motion:reduce) {\n    .fml-hexa-hud *,\n    .fml-hexa-hud *::before,\n    .fml-hexa-hud *::after {\n      transition-duration:.01ms !important;\n      animation-duration:.01ms !important;\n    }\n  }\n\u003c\/style\u003e\n\n\n\u003carticle class=\"fml-hexa-hud\"\u003e\n\n  \u003c!-- HERO --\u003e\n  \u003cheader class=\"fml-hexa-hud__hero\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__eyebrow\"\u003e\n      \u003cspan\u003eFree FiveM HUD\u003c\/span\u003e\n      \u003cspan\u003eESX Legacy \/ QBCore\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2 class=\"fml-hexa-hud__title\"\u003e\n      Hexa HUD\n    \u003c\/h2\u003e\n\n    \u003cp class=\"fml-hexa-hud__hero-copy\"\u003e\n      Give players control over how they see your server.\n      \u003cstrong\u003eHexa HUD is a free modern FiveM interface with automatic ESX\n      Legacy and QBCore detection, drag-and-drop module positioning,\n      configurable colors, five presets and four speedometer styles.\u003c\/strong\u003e\n      Player preferences are saved without requiring an SQL database.\n    \u003c\/p\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__badges\"\u003e\n\n      \u003cspan class=\"fml-hexa-hud__badge fml-hexa-hud__badge--gold\"\u003e\n        Free\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-hexa-hud__badge\"\u003e\n        ESX Legacy\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-hexa-hud__badge\"\u003e\n        QBCore\n      \u003c\/span\u003e\n\n      \u003cspan class=\"fml-hexa-hud__badge\"\u003e\n        No SQL Required\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__meta\"\u003e\n      \u003cspan\u003e5 presets\u003c\/span\u003e\n      \u003cspan\u003e4 speedometers\u003c\/span\u003e\n      \u003cspan\u003eKM\/H + MPH\u003c\/span\u003e\n      \u003cspan\u003eDrag \u0026amp; drop editor\u003c\/span\u003e\n    \u003c\/div\u003e\n\n  \u003c\/header\u003e\n\n\n  \u003c!-- OVERVIEW --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        00 \/ Overview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          One HUD does not need to look the same for every player\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Let the server define the available modules — then let players build the interface they prefer.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-hexa-hud__intro\"\u003e\n          Hexa HUD combines server-side configuration control with player-side\n          personalization. Server owners decide which modules and features are\n          available, while players can adjust authorized elements directly\n          through the in-game HUD settings interface.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__statement\"\u003e\n\n      \u003cp\u003e\n        Colors, opacity, scale and module placement can all be personalized\n        without forcing every player into the exact same interface layout.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-hexa-hud__code-label\"\u003e\n        \/\/ HUD_PROFILE_READY\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- PREVIEW --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        01 \/ Preview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Modern interface with visual customization\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Build a clean HUD around the way your players actually use the screen.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__gallery\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__image\"\u003e\n\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/f\/2\/4\/2\/f242d01fe65557b525508b4b4d6042b6a4a4d54f.jpeg\" alt=\"Hexa HUD FiveM interface preview\" loading=\"lazy\"\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-hexa-hud__gallery-side\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__image\"\u003e\n\n          \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/5\/e\/2\/0\/5e20acbf95de5480341be370747667b3cbdb4f63.jpeg\" alt=\"Hexa HUD drag and drop editor\" loading=\"lazy\"\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__image\"\u003e\n\n          \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/9\/9\/d\/7\/99d76e6f8f51310d6fb14016fb20a78d6a07d5af.jpeg\" alt=\"Hexa HUD customization menu\" loading=\"lazy\"\u003e\n\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- CUSTOMIZATION --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        02 \/ Customize\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Player-controlled layout\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Drag it, scale it, recolor it or remove what you do not need.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__grid\"\u003e\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eDrag · Drop · Grid\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eDrag-and-Drop Editor\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Players can reposition authorized HUD modules directly in game using\n          drag-and-drop controls with a snapping grid for cleaner alignment.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eColor · Opacity · Scale\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eVisual Personalization\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Interface colors, opacity and scale can be adjusted so players can\n          build a HUD around their own screen and visual preferences.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eServer · Permissions\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eServer-Controlled Modules\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Server owners can enable or disable individual modules and features.\n          Players can only customize the elements authorized by that\n          configuration.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eLocal Preferences\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eNo SQL for Player Settings\u003c\/h3\u003e\n\n        \u003cp\u003e\n          HUD preferences are saved without requiring an additional SQL database\n          just for interface customization.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- PRESETS --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        03 \/ Presets\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Five ready-made interface profiles\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Start from a preset instead of rebuilding the HUD every time.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__presets\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__preset\"\u003e\n        \u003csmall\u003e01\u003c\/small\u003e\n        \u003cstrong\u003eImmersion\u003c\/strong\u003e\n        \u003cspan\u003eDesigned for a more gameplay-focused presentation.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__preset\"\u003e\n        \u003csmall\u003e02\u003c\/small\u003e\n        \u003cstrong\u003eRacing\u003c\/strong\u003e\n        \u003cspan\u003eA layout aimed at vehicle-focused gameplay.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__preset\"\u003e\n        \u003csmall\u003e03\u003c\/small\u003e\n        \u003cstrong\u003eMinimal\u003c\/strong\u003e\n        \u003cspan\u003eReduce visual clutter and keep essential data visible.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__preset\"\u003e\n        \u003csmall\u003e04\u003c\/small\u003e\n        \u003cstrong\u003ePolice\u003c\/strong\u003e\n        \u003cspan\u003eA preset intended for law-enforcement gameplay.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__preset\"\u003e\n        \u003csmall\u003e05\u003c\/small\u003e\n        \u003cstrong\u003eDiscreet\u003c\/strong\u003e\n        \u003cspan\u003eA lower-profile interface configuration.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- PLAYER DATA --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        04 \/ Modules\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Player and vehicle information\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Keep important status information visible without filling the entire screen.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__modules\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eHealth\u003c\/strong\u003e\n        \u003cspan\u003ePlayer health status.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eArmor\u003c\/strong\u003e\n        \u003cspan\u003eCurrent armor value.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eHunger\u003c\/strong\u003e\n        \u003cspan\u003eFramework-supported status.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eThirst\u003c\/strong\u003e\n        \u003cspan\u003eFramework-supported status.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eStamina\u003c\/strong\u003e\n        \u003cspan\u003eCurrent stamina level.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eOxygen\u003c\/strong\u003e\n        \u003cspan\u003eUseful during underwater gameplay.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eSpeed\u003c\/strong\u003e\n        \u003cspan\u003eKM\/H and MPH support.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eRPM\u003c\/strong\u003e\n        \u003cspan\u003eVehicle engine RPM information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eGear\u003c\/strong\u003e\n        \u003cspan\u003eCurrent vehicle gear.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eFuel\u003c\/strong\u003e\n        \u003cspan\u003eNative or supported fuel resource.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eSeatbelt\u003c\/strong\u003e\n        \u003cspan\u003eSeatbelt state and alerts.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eEngine\u003c\/strong\u003e\n        \u003cspan\u003eVehicle engine state.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eLights\u003c\/strong\u003e\n        \u003cspan\u003eVehicle lighting state.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eIndicators\u003c\/strong\u003e\n        \u003cspan\u003eTurn signal information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eHandbrake\u003c\/strong\u003e\n        \u003cspan\u003eParking brake indicator.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eDoors\u003c\/strong\u003e\n        \u003cspan\u003eVehicle door status.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- VEHICLE HUD --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        05 \/ Driving\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          More than a basic speed number\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Four speedometer styles plus driving data for different types of servers.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__grid\"\u003e\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003e4 Styles · Vehicle HUD\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eFour Speedometer Styles\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Choose from four visual speedometer styles rather than locking every\n          server or player into one vehicle display.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eKM\/H · MPH\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eMetric \u0026amp; Imperial Units\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Vehicle speed can be displayed in either kilometers per hour or miles\n          per hour.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eTrip · Time · Distance\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eTrip Information\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Track trip distance and travel time for a more informative driving\n          interface.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003e0–100 · Timer\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eAcceleration Timer\u003c\/h3\u003e\n\n        \u003cp\u003e\n          A 0–100 km\/h timer adds an extra data point for racing and\n          performance-oriented gameplay.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e05\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003ePolice · Vehicle Mode\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003ePolice Mode\u003c\/h3\u003e\n\n        \u003cp\u003e\n          A dedicated police vehicle mode is included for servers with\n          law-enforcement gameplay.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-hexa-hud__card\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__card-top\"\u003e\n          \u003cspan class=\"fml-hexa-hud__number\"\u003e06\u003c\/span\u003e\n          \u003cspan class=\"fml-hexa-hud__label\"\u003eEV · Electric\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eElectric Vehicle Mode\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Electric vehicle support gives compatible servers a HUD mode suited\n          to non-combustion vehicles.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- ALERTS --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        06 \/ Alerts\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Context-aware information\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Show warnings when they matter — hide unnecessary indicators when they do not.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-hexa-hud__intro\"\u003e\n          Hexa HUD includes contextual alerts covering player and vehicle\n          conditions, while unused indicators can automatically disappear to\n          keep the interface cleaner.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__modules\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eHealth Alerts\u003c\/strong\u003e\n        \u003cspan\u003eRespond to critical player health states.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eOxygen Alerts\u003c\/strong\u003e\n        \u003cspan\u003eWarn when oxygen becomes important.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eFuel Alerts\u003c\/strong\u003e\n        \u003cspan\u003eNotify players when fuel is low.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eSeatbelt Alerts\u003c\/strong\u003e\n        \u003cspan\u003eContextual seatbelt information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eEngine Alerts\u003c\/strong\u003e\n        \u003cspan\u003eVehicle engine condition feedback.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eTemperature\u003c\/strong\u003e\n        \u003cspan\u003eContextual vehicle temperature information.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eTyre Alerts\u003c\/strong\u003e\n        \u003cspan\u003eVehicle tyre-related notifications.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__module\"\u003e\n        \u003cstrong\u003eAuto Hide\u003c\/strong\u003e\n        \u003cspan\u003eUnused indicators can disappear automatically.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- COMPATIBILITY --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        07 \/ Compatibility\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Automatic framework detection\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          ESX Legacy or QBCore — Hexa HUD detects the supported framework automatically.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__terminal\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__terminal-head\"\u003e\n        \u003cstrong\u003e\/\/ HEXA_HUD_COMPATIBILITY\u003c\/strong\u003e\n        \u003cspan\u003eFramework \/ Fuel \/ Status \/ Storage\u003c\/span\u003e\n      \u003c\/div\u003e\n\n\n      \u003cdl class=\"fml-hexa-hud__spec-grid\"\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eFrameworks\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              ESX \/ QBCore\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              Automatic detection for ESX Legacy and QBCore.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eESX Status\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              esx_status\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              Supported for status values in ESX environments.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eFuel Resources\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              Multi Support\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              Supports ox_fuel, LegacyFuel and GTA's native fuel system.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eFuel Fallback\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              Native GTA\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              When a dedicated fuel resource is not detected, the HUD can use\n              GTA's native fuel level.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eLanguages\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              EN \/ FR\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              English and French language support is included.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eDatabase\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              No SQL\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              Player HUD preferences do not require an SQL database.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eCode Access\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              Partial\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              Configuration and NUI files are listed as accessible.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-hexa-hud__spec\"\u003e\n\n          \u003cdt\u003eSubscription\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-hexa-hud__spec-value\"\u003e\n              No\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-hexa-hud__spec-copy\"\u003e\n              The resource is not subscription-based.\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!-- PERFORMANCE --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        08 \/ Performance\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Resource monitor figures supplied by the developer\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Designed to stay lightweight whether the player is walking or driving.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__stats\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__stat\"\u003e\n        \u003csmall\u003eOn Foot\u003c\/small\u003e\n        \u003cstrong\u003e~0.09 ms\u003c\/strong\u003e\n        \u003cspan\u003eReported client resource monitor usage while on foot.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__stat\"\u003e\n        \u003csmall\u003eDriving\u003c\/small\u003e\n        \u003cstrong\u003e~0.11 ms\u003c\/strong\u003e\n        \u003cspan\u003eReported client resource monitor usage while driving.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__stat\"\u003e\n        \u003csmall\u003eDatabase\u003c\/small\u003e\n        \u003cstrong\u003eNone\u003c\/strong\u003e\n        \u003cspan\u003eNo SQL database required for HUD preferences.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__stat\"\u003e\n        \u003csmall\u003eStatus Refresh\u003c\/small\u003e\n        \u003cstrong\u003eConfig\u003c\/strong\u003e\n        \u003cspan\u003eStatus refresh interval can be configured.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- COMMANDS --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        09 \/ Controls\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Player controls\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Everything important is accessible directly in game.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__commands\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__command\"\u003e\n        \u003ccode\u003e\/hudsettings\u003c\/code\u003e\n        \u003cspan\u003eOpen the Hexa HUD customization menu.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__command\"\u003e\n        \u003ccode\u003e\/togglehud\u003c\/code\u003e\n        \u003cspan\u003eShow or hide the complete HUD.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__command\"\u003e\n        \u003ccode\u003eF10\u003c\/code\u003e\n        \u003cspan\u003eKeyboard shortcut to toggle HUD visibility.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__command\"\u003e\n        \u003ccode\u003eB\u003c\/code\u003e\n        \u003cspan\u003eToggle the vehicle seatbelt.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- DOWNLOAD --\u003e\n  \u003csection class=\"fml-hexa-hud__section\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__head\"\u003e\n\n      \u003cdiv class=\"fml-hexa-hud__index\"\u003e\n        10 \/ Download\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-hexa-hud__kicker\"\u003e\n          Free FiveM resource\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-hexa-hud__section-title\"\u003e\n          Download Hexa HUD without a subscription or mandatory Discord join.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-hexa-hud__intro\"\u003e\n          Hexa HUD is distributed free through the Hexa Studio Tebex store.\n          Joining the developer's Discord is not required to download or use\n          the resource.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-hexa-hud__links\"\u003e\n\n      \u003ca class=\"fml-hexa-hud__link fml-hexa-hud__link--gold\" href=\"https:\/\/hexastudio.tebex.io\/package\/7647452\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        Download Free\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n      \u003ca class=\"fml-hexa-hud__link\" href=\"https:\/\/forum.cfx.re\/t\/free-esx-qbcore-hexa-hud-customizable-modern-hud\/5424218\" 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!-- CLOSING --\u003e\n  \u003csection class=\"fml-hexa-hud__closing\"\u003e\n\n    \u003cdiv class=\"fml-hexa-hud__closing-label\"\u003e\n      Hexa HUD \/ Free FiveM Resource\n    \u003c\/div\u003e\n\n    \u003ch2\u003e\n      Give players the information they need without deciding exactly where every pixel must stay.\n    \u003c\/h2\u003e\n\n    \u003cp\u003e\n      Hexa HUD combines automatic ESX Legacy and QBCore detection, five\n      interface presets, four speedometer styles, drag-and-drop positioning,\n      player and vehicle status modules, contextual alerts, police and EV\n      modes, optional fuel integrations and database-free preference storage\n      into one free customizable FiveM HUD.\n    \u003c\/p\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003cdiv class=\"fml-hexa-hud__final\"\u003e\n    Your server controls the features.\n    \u003cem\u003eYour players control the view.\u003c\/em\u003e\n  \u003c\/div\u003e\n\n\u003c\/article\u003e","brand":"Hexastudio","offers":[{"title":"Default Title","offer_id":45771215143021,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2072\/3053\/files\/f242d01fe65557b525508b4b4d6042b6a4a4d54f.jpg?v=1788461180","url":"https:\/\/fivem-lab.com\/products\/esx-qbcore-hexa-hud-customizable-modern-hud","provider":"Fivem-Lab","version":"1.0","type":"link"}