// Genesis chrome: EXACT takegenesis.com header + nav + footer + mobile menu. // Ported from the compare/guide pages (which already mirror the live Shopify theme). // Variant-scoped: A = navy + standard gold #D4AF37 (matches the live site). // B/C/D = warm gold #C4A265 + variant-specific background, for the proposed rebrand. // Logo PNG is identical across all four variants — only bg and accent colors shift. const { useState, useEffect, useLayoutEffect, useRef } = React; function chromePalette(variant){ if (variant === "B") return { headerBg:"#0f0f11", footerBg:"#0c0c0e", gold:"#C4A265", colTitle:"#C4A265" }; if (variant === "C") return { headerBg:"#0f172a", footerBg:"#1a1a2e", gold:"#C4A265", colTitle:"#C4A265" }; if (variant === "D") return { headerBg:"#0f172a", footerBg:"#1a1a26", gold:"#C4A265", colTitle:"#C4A265" }; return { headerBg:"#0f172a", footerBg:"#1a1a2e", gold:"#D4AF37", colTitle:"#d4af37" }; } function buildChromeCss(p){ return ` .announcement-bar{background:${p.gold};overflow:hidden;height:41px;display:flex;align-items:center;padding:6px 0} .announcement-bar__track{display:inline-block;white-space:nowrap;animation:announcementScroll 40s linear infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden} .announcement-bar__item{display:inline-block;font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#0a0a0a;padding:0 36px;white-space:nowrap} .announcement-bar__item::before{content:'\\2726';margin-right:8px} @keyframes announcementScroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}} .site-header-wrap{position:fixed;top:0;left:0;right:0;z-index:250;background:${p.headerBg};font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:16px;letter-spacing:0.6px;line-height:1.8;color:rgba(245,245,245,0.75)} .site-header{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;max-width:1440px;margin:0 auto} .site-header__logo{display:block;text-decoration:none} .site-header__logo img{height:60px;width:auto;object-fit:contain} .site-header__nav{display:none;align-items:center;gap:32px;margin-right:auto;padding-left:32px} .site-header__nav a{font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;text-decoration:none;color:#ededeb;transition:opacity 0.2s ease;padding:10px 0} .site-header__nav a:hover{opacity:0.7} .site-header__nav a.nav-active{color:${p.gold}} .site-header__controls{display:flex;align-items:center;gap:16px;flex-shrink:0} .site-header__cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:#ededeb;color:${p.headerBg};font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;text-decoration:none;border-radius:0;white-space:nowrap;transition:background 0.2s ease,color 0.2s ease;box-shadow:0 0 4px rgba(0,0,0,0.25)} .site-header__cta:hover{background:#fff;color:${p.headerBg}} .site-header__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#ededeb;text-decoration:none;transition:opacity 0.2s ease;position:relative} .site-header__icon:hover{opacity:0.7} .site-header__hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;background:none;border:1px solid rgba(237,237,235,0.3);cursor:pointer;color:#ededeb;transition:opacity 0.2s ease} .site-header__hamburger:hover{opacity:0.7} .site-mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:350;opacity:0;pointer-events:none;transition:opacity 0.3s ease} .site-mobile-overlay.open{opacity:1;pointer-events:auto} .site-mobile-menu{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;overflow-y:auto;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,0.15);transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);z-index:400;padding:24px;display:flex;flex-direction:column;gap:0} .site-mobile-menu.open{transform:translateX(0)} .site-mobile-menu__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .site-mobile-menu__title{font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#949494;margin:0} .site-mobile-menu__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:0;background:none;border:none;cursor:pointer;color:#0f172a;transition:opacity 0.2s ease} .site-mobile-menu__close:hover{opacity:0.6} .site-mobile-menu__products{display:flex;flex-direction:column;gap:0;margin-bottom:16px} .site-mobile-menu__product{display:flex;align-items:center;gap:12px;padding:12px 0;text-decoration:none;color:#0f172a;border-bottom:1px solid #ccc;transition:opacity 0.2s ease} .site-mobile-menu__product:first-child{border-top:1px solid #ccc} .site-mobile-menu__product:hover{opacity:0.7} .site-mobile-menu__product-name{flex:1;font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;line-height:1.3;color:#0f172a} .site-mobile-menu__product-arrow{flex-shrink:0;color:#0f172a} .site-mobile-menu__shop-btn{display:block;width:100%;padding:18px 0;background:#0f172a;color:#fff;font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;text-align:center;text-decoration:none;border-radius:0;border:none;cursor:pointer;transition:background 0.2s ease;margin-bottom:20px} .site-mobile-menu__shop-btn:hover{background:#1a3063} .site-mobile-menu__links{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:0} .site-mobile-menu__links a{font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:15px;font-weight:500;color:#0f172a;text-decoration:none;padding:14px 0;display:block;transition:opacity 0.2s ease;letter-spacing:0.6px} .site-mobile-menu__links a:hover{opacity:0.6} .site-mobile-menu__account{display:flex;align-items:center;gap:10px;padding:18px 0;border-top:1px solid #ccc;margin-bottom:16px;text-decoration:none;color:#0f172a;font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:14px;font-weight:600;transition:opacity 0.2s ease} .site-mobile-menu__account:hover{opacity:0.6} .site-mobile-menu__social{display:flex;align-items:center;gap:20px;padding:12px 0} .site-mobile-menu__social a{color:#949494;transition:opacity 0.2s ease} .site-mobile-menu__social a:hover{opacity:0.6} @media(min-width:1200px){.site-header__nav{display:flex}.site-header__logo img{height:50px}} @media(max-width:749px){.site-header__cta{display:none}.site-header__nav{display:none}.site-header{padding:16px 20px}} .site-footer{background:${p.footerBg};padding:0 0 100px;margin-top:48px} .site-footer-inner{max-width:1200px;margin:0 auto;padding:0 30px} .site-footer__fda{text-align:center;font-size:11px;color:rgba(255,255,255,0.65);line-height:1.6;letter-spacing:0.6px;padding:20px 20px;border-top:1px solid rgba(255,255,255,0.1);border-bottom:none} .site-footer__tagline{text-align:center;font-size:13px;color:rgba(255,255,255,0.55);font-style:italic;font-weight:400;letter-spacing:0.6px;line-height:1.8;padding:24px 0 0;max-width:900px;margin:0 auto} .site-footer__social-centered{display:flex;gap:0;justify-content:center;padding:36px 0;border-top:1px solid rgba(237,237,235,0.15);margin-top:32px} .site-footer__social-centered a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:11px;color:#ededeb;transition:opacity 0.2s} .site-footer__social-centered a:hover{opacity:0.7} .site-footer__bottom{border-top:1px solid rgba(237,237,235,0.15);padding:30px 0 0;margin-top:0} .site-footer__bottom-inner{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .site-footer__copyright{font-size:11px;color:#ededeb;display:flex;gap:12px;flex-wrap:wrap;align-items:center;line-height:24px} .site-footer__copyright a{color:#ededeb;text-decoration:none;transition:opacity 0.2s;display:inline-block;min-height:24px;padding:4px 0} .site-footer__copyright a:hover{opacity:0.7} .site-footer__payments{display:flex;gap:6px;flex-wrap:wrap} .site-footer__payments .list-payment{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:0} .site-footer__payments .list-payment__item{display:inline-flex} @media(max-width:600px){.site-footer__bottom-inner{flex-direction:column;align-items:center;text-align:center}} .site-footer__columns{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:48px 0 0;border-top:1px solid ${p.gold}26;max-width:900px;margin:0 auto} .site-footer__col{display:flex;flex-direction:column;gap:0} .site-footer__col-title{font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.04px;color:${p.colTitle};margin-bottom:12px;line-height:1.3} .site-footer__col a{font-family:Inter,-apple-system,"system-ui",sans-serif;font-size:14px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;font-weight:400;letter-spacing:0.6px;line-height:1.8;padding:4px 0;display:block} .site-footer__col a:hover{color:#ededeb} @media(max-width:600px){.site-footer__columns{grid-template-columns:1fr;gap:24px}} `; } // Inline CSS as a style element child so it's present on first paint (avoids FOUC // on hard refresh where useEffect'd injection would leave the header unstyled). function GenesisChromeStyles({ variant }){ const css = buildChromeCss(chromePalette(variant)); return ; } const ANNOUNCEMENT_ITEMS = [ "Back in Stock: Genesis Dawn & Dusk", "We Ship Within 1-2 Business Days", "130+ Customers. Zero Refunds.", "Subscribe & Save 10% Every Month", "Join the Genesis Lab on Telegram", "42 Ingredients. Two Scoops. Done.", ]; function AnnouncementBar(){ const doubled = [...ANNOUNCEMENT_ITEMS, ...ANNOUNCEMENT_ITEMS]; return (
{doubled.map((t, i) => ( {t} ))}
); } function AccountIcon(){ return ( ); } function CartIcon(){ return ( ); } function HamburgerIcon(){ return ( ); } function CloseIcon(){ return ( ); } function ProductArrow(){ return ( ); } function IgIcon({ size = 20 }){ return ( ); } function XIcon({ size = 20 }){ return ( ); } function TgIcon({ size = 20 }){ return ( ); } // Payment-icons row — verbatim markup from the live Shopify theme. Parsed via // DOMParser (no script execution) and adopted as live SVG nodes, so React // doesn't need JSX conversion for every attribute and we don't call innerHTML. const PAYMENT_ICONS_HTML = ` `; // Adopt payment-icon DOM before paint so the footer doesn't flash empty on refresh. function PaymentIcons(){ const ref = useRef(null); useLayoutEffect(() => { if (!ref.current) return; const doc = new DOMParser().parseFromString(PAYMENT_ICONS_HTML, "text/html"); ref.current.replaceChildren(...doc.body.childNodes); }, []); return (
); } function SiteHeader({ variant }){ const [menuOpen, setMenuOpen] = useState(false); const close = () => setMenuOpen(false); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return ( <>
Genesis
Shop the Stack →
The Lineup
Genesis Dawn Genesis Dusk
Shop the Stack
Compare Protocol FAQs Concierge Merch Contact Affiliate Program (20%) The Genesis Lab (Telegram)
My Account & Subscriptions
); } function SiteFooter({ variant }){ return ( ); } window.Header = SiteHeader; window.Footer = SiteFooter;