{"id":9,"date":"2026-06-26T18:22:12","date_gmt":"2026-06-26T18:22:12","guid":{"rendered":"https:\/\/blackboltcharcoal.com\/?page_id=9"},"modified":"2026-06-26T18:31:11","modified_gmt":"2026-06-26T18:31:11","slug":"home","status":"publish","type":"page","link":"https:\/\/blackboltcharcoal.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- \n  wp:html \n  --\n  Block Name: Blackbolt Premium Hero Section\n  Description: Custom HTML\/CSS Hero Section for Blackbolt Charcoal & Briquette\n-->\n<div class=\"bb-hero-wrapper bb-embers-bg\">\n    <!-- Inline styles specifically to handle CSS-only micro-animations for embers and glassmorphism -->\n    <style>\n        .bb-hero-wrapper {\n            position: relative;\n            background-color: var(--charcoal-dark, #121212);\n            padding: clamp(4rem, 6vw, 8rem) clamp(1rem, 3vw, 2.5rem);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            min-height: 80vh;\n            border-bottom: 1px solid var(--border-color, #333333);\n            overflow: hidden;\n            box-sizing: border-box;\n            width: 100%;\n        }\n        \n        .bb-hero-content {\n            position: relative;\n            z-index: 5;\n            max-width: 960px;\n            text-align: center;\n            width: 100%;\n        }\n\n        .bb-hero-badge {\n            display: inline-flex;\n            align-items: center;\n            background-color: rgba(255, 107, 0, 0.1);\n            border: 1px solid var(--ember-orange, #FF6B00);\n            color: var(--ember-orange, #FF6B00);\n            padding: 6px 16px;\n            font-size: var(--font-size-xs, 12px);\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.15em;\n            border-radius: var(--radius-full, 9999px);\n            margin-bottom: var(--space-lg, 2rem);\n            animation: pulse-glow 2s infinite ease-in-out;\n        }\n\n        .bb-hero-title {\n            font-size: var(--font-size-5xl, 3rem);\n            line-height: 1.2;\n            font-weight: 800;\n            letter-spacing: -0.03em;\n            margin-bottom: var(--space-md, 1.25rem);\n            color: var(--text-primary, #F5F5F5);\n        }\n\n        .bb-hero-title span {\n            background: linear-gradient(135deg, var(--text-primary, #F5F5F5) 30%, var(--ember-orange, #FF6B00) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        .bb-hero-description {\n            font-size: var(--font-size-lg, 1.125rem);\n            line-height: 1.6;\n            color: var(--text-secondary, #B3B3B3);\n            max-width: 720px;\n            margin: 0 auto var(--space-xl, 2.5rem) auto;\n        }\n\n        .bb-hero-actions {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            gap: var(--space-md, 1.25rem);\n            margin-bottom: var(--space-2xl, 4rem);\n        }\n\n        .bb-hero-metrics {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: var(--space-md, 1.25rem);\n            border-top: 1px solid var(--border-color, #333333);\n            padding-top: var(--space-xl, 2.5rem);\n            width: 100%;\n        }\n\n        .bb-hero-metric-card {\n            background-color: rgba(30, 30, 30, 0.6);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(255, 255, 255, 0.05);\n            border-radius: var(--radius-md, 8px);\n            padding: var(--space-md, 1.25rem);\n            transition: var(--transition-smooth, all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1));\n            text-align: center;\n        }\n\n        .bb-hero-metric-card:hover {\n            border-color: rgba(255, 107, 0, 0.3);\n            box-shadow: 0 8px 24px rgba(255, 107, 0, 0.06);\n            transform: translateY(-2px);\n        }\n\n        .bb-hero-metric-val {\n            font-size: var(--font-size-3xl, 2rem);\n            font-weight: 800;\n            color: var(--minimalist-gold, #D4AF37);\n            margin-bottom: 4px;\n        }\n\n        .bb-hero-metric-lbl {\n            font-size: var(--font-size-xs, 12px);\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            color: var(--text-muted, #7F7F7F);\n        }\n\n        \/* Ambient glowing background embers *\/\n        .bb-ember-particle {\n            position: absolute;\n            background-color: var(--ember-orange, #FF6B00);\n            border-radius: 50%;\n            pointer-events: none;\n            opacity: 0;\n            z-index: 2;\n        }\n\n        \/* Keyframes *\/\n        @keyframes pulse-glow {\n            0%, 100% {\n                box-shadow: 0 0 4px rgba(255, 107, 0, 0.2);\n                border-color: rgba(255, 107, 0, 0.5);\n            }\n            50% {\n                box-shadow: 0 0 16px rgba(255, 107, 0, 0.6);\n                border-color: rgba(255, 107, 0, 1);\n            }\n        }\n    <\/style>\n\n    <!-- Visual Ambient Embers particles -->\n    <div class=\"bb-ember-particle\" style=\"width: 4px; height: 4px; left: 15%; bottom: 10%; animation: float-ember 12s infinite linear; animation-delay: 0s;\"><\/div>\n    <div class=\"bb-ember-particle\" style=\"width: 6px; height: 6px; left: 45%; bottom: 5%; animation: float-ember 15s infinite linear; animation-delay: 2s;\"><\/div>\n    <div class=\"bb-ember-particle\" style=\"width: 3px; height: 3px; left: 75%; bottom: 15%; animation: float-ember 9s infinite linear; animation-delay: 5s;\"><\/div>\n    <div class=\"bb-ember-particle\" style=\"width: 5px; height: 5px; left: 85%; bottom: 8%; animation: float-ember 18s infinite linear; animation-delay: 1s;\"><\/div>\n    \n    <style>\n        @keyframes float-ember {\n            0% {\n                transform: translateY(0) translateX(0) rotate(0deg);\n                opacity: 0;\n            }\n            10% {\n                opacity: 0.6;\n            }\n            90% {\n                opacity: 0.4;\n            }\n            100% {\n                transform: translateY(-80vh) translateX(30px) rotate(360deg);\n                opacity: 0;\n            }\n        }\n    <\/style>\n\n    <div class=\"bb-hero-content\">\n        <div class=\"bb-hero-badge\">\n            B2B Culinary Grade Supply\n        <\/div>\n        \n        <h1 class=\"bb-hero-title\">\n            <span>Engineered for Maximum Burn.<\/span><br>\n            Crafted for Premium Kitchens.\n        <\/h1>\n        \n        <p class=\"bb-hero-description\">\n            Proudly manufactured in Bangladesh using advanced machinery. We supply restaurants, hotels, and commercial grills with high-density, low-smoke charcoal solutions built to sustain long kitchen shifts.\n        <\/p>\n        \n        <div class=\"bb-hero-actions\">\n            <a href=\"#rfq\" class=\"bb-btn bb-btn-primary\">\n                Request B2B Quotation\n            <\/a>\n            <a href=\"#products\" class=\"bb-btn bb-btn-secondary\">\n                View Product Specs\n            <\/a>\n        <\/div>\n        \n        <div class=\"bb-hero-metrics\">\n            <div class=\"bb-hero-metric-card\">\n                <div class=\"bb-hero-metric-val\">&gt; 85%<\/div>\n                <div class=\"bb-hero-metric-lbl\">Fixed Carbon<\/div>\n            <\/div>\n            <div class=\"bb-hero-metric-card\">\n                <div class=\"bb-hero-metric-val\">&gt; 4 Hours<\/div>\n                <div class=\"bb-hero-metric-lbl\">Burn Duration<\/div>\n            <\/div>\n            <div class=\"bb-hero-metric-card\">\n                <div class=\"bb-hero-metric-val\">&lt; 3%<\/div>\n                <div class=\"bb-hero-metric-lbl\">Ash Residue<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- \/wp:post-content -->\n\n<p><!-- \/wp:post-content --><\/p>","protected":false},"excerpt":{"rendered":"<p>B2B Culinary Grade Supply Engineered for Maximum Burn. Crafted for Premium Kitchens. Proudly manufactured in Bangladesh using advanced machinery. We supply restaurants, hotels, and commercial grills with high-density, low-smoke charcoal solutions built to sustain long kitchen shifts. Request B2B Quotation View Product Specs &gt; 85% Fixed Carbon &gt; 4 Hours Burn Duration &lt; 3% Ash [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":3,"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/blackboltcharcoal.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}