Siteheader Bambu: Transparent

{{#if static}}
    <header class="SiteHeader {{#unless disablescroll}}js-header{{/unless}} {{modifier}} {{#if showlanguagepicker}}has-languagepicker{{/if}} {{#unless shownavigation}}SiteHeader--noNavigation{{/unless}}" role="banner">
        {{#if skiplink}}
            <a href="#content" class="u-text-screenreader">Skip to main content</a>
        {{/if}}
        <div class="SiteHeader-container">
            <div class="row _centeritems">
                {{#if showlogo}}
                    <a  href="/"
                        class="SiteHeader-logo db mw-60p px300"
                        title="Bambu"
                    >
                        <span class="screenreader">Bambu</span>
                        <svg id="logo-bambu" class="db mw-100p" xmlns="http://www.w3.org/2000/svg" width="230" height="32" viewBox="0 0 230 32">
                            <path fill="#515E5F" d="M145.5 18.9v-8.05h.92V14a2.42 2.42 0 0 1 2-1c1.52 0 2.6 1.2 2.6 3.07S149.92 19 148.4 19a2.46 2.46 0 0 1-2-1v.87zm2.65-.66c1.18 0 1.88-1 1.88-2.25s-.7-2.3-1.88-2.3a2.17 2.17 0 0 0-1.74.9v2.6a2.15 2.15 0 0 0 1.8.9zm3.93 2.13a1.4 1.4 0 0 0 .5.1.84.84 0 0 0 .86-.62l.4-.88-2.45-5.9h1l1.9 4.8 1.9-4.8h1l-2.9 7a1.73 1.73 0 0 1-1.7 1.2 2.94 2.94 0 0 1-.7-.1zm8.77-2.6l.6-.76a3.4 3.4 0 0 0 2.55 1.2c1.44 0 1.9-.7 1.9-1.4 0-2-4.77-.9-4.77-3.8 0-1.3 1.18-2.2 2.77-2.2a3.8 3.8 0 0 1 2.86 1.1l-.6.8a3.08 3.08 0 0 0-2.33-1c-1 0-1.65.6-1.65 1.3 0 1.8 4.77.8 4.77 3.8 0 1.2-.8 2.4-3 2.4a4 4 0 0 1-3.1-1.2zm8.37.23v3.1h-.9v-8.03h.9v.87a2.44 2.44 0 0 1 2-1c1.53 0 2.6 1.16 2.6 3.06s-1.1 3-2.63 3a2.4 2.4 0 0 1-2-1zm3.6-2c0-1.3-.7-2.25-1.86-2.25a2.16 2.16 0 0 0-1.74.93v2.62a2.17 2.17 0 0 0 1.74.94c1.17 0 1.87-.97 1.87-2.24zm2.38 2.9v-5.83h.9V14a2.48 2.48 0 0 1 1.9-1v.93a1.6 1.6 0 0 0-.36 0 2.13 2.13 0 0 0-1.58.93v4.04zm3.44-2.9a2.9 2.9 0 1 1 5.77 0 2.9 2.9 0 1 1-5.7 0zm4.82 0a2 2 0 1 0-3.88 0 2 2 0 1 0 3.88 0zm6.27 2.9v-.82a2.85 2.85 0 0 1-2.08 1 1.64 1.64 0 0 1-1.86-1.86v-4.15h.9v3.84c0 1 .5 1.4 1.3 1.4a2.23 2.23 0 0 0 1.7-.9v-4.3h.9V19zm2.87-1.22v-3.8h-1v-.8h1v-1.6h.92v1.6h1.18v.8h-1.18v3.6c0 .44.2.76.6.76a.87.87 0 0 0 .6-.24l.28.68a1.48 1.48 0 0 1-1.1.37 1.2 1.2 0 0 1-1.3-1.37zm6.04.1l.6-.77a3.4 3.4 0 0 0 2.53 1.2c1.44 0 1.9-.7 1.9-1.4 0-2-4.77-.9-4.77-3.8 0-1.3 1.18-2.2 2.77-2.2a3.8 3.8 0 0 1 2.86 1.1l-.6.8a3.08 3.08 0 0 0-2.33-1c-1 0-1.65.6-1.65 1.3 0 1.8 4.77.8 4.77 3.8 0 1.2-.8 2.4-3 2.4a4 4 0 0 1-3.08-1.22zm7.14-1.78a2.9 2.9 0 1 1 5.77 0 2.9 2.9 0 1 1-5.77 0zm4.82 0a2 2 0 1 0-3.88 0 2 2 0 1 0 3.88 0zm2 0a2.88 2.88 0 0 1 2.92-3.06 2.5 2.5 0 0 1 2.14 1l-.6.56a1.73 1.73 0 0 0-1.5-.76 2 2 0 0 0-2 2.25 2 2 0 0 0 2 2.2 1.76 1.76 0 0 0 1.5-.8l.6.5a2.5 2.5 0 0 1-2.14 1 2.9 2.9 0 0 1-2.9-3.1zm6.03-4.37a.6.6 0 1 1 1.22 0 .6.6 0 0 1-1.22 0zm.16 7.27v-5.83h.9v5.83zm6.2 0v-.66a2.52 2.52 0 0 1-2 .8 1.94 1.94 0 0 1-2-1.92 1.9 1.9 0 0 1 2-1.92 2.44 2.44 0 0 1 1.9.8v-1.06c0-.8-.7-1.23-1.5-1.23a2.32 2.32 0 0 0-1.8.9l-.4-.6a3.05 3.05 0 0 1 2.3-1c1.2 0 2.2.6 2.2 2v4zm0-1.23v-1.1a2 2 0 0 0-1.6-.72 1.28 1.28 0 1 0 0 2.55 2 2 0 0 0 1.6-.73zm2.6 1.23v-8.05h.9v8.05z"/>
                            <path fill="#11a7aa" d="M27.17 18.4V30a1 1 0 0 0 1 1H31a1 1 0 0 0 1-1V18.4zM32 13.6V9.73a3.88 3.88 0 0 1 7.76 0v3.85h4.82V9.73a8.7 8.7 0 0 0-17.4 0v3.85zM39.76 30a1 1 0 0 0 1 1h2.77a1 1 0 0 0 1-1V18.4h-4.77zm12.6-11.6V30a1 1 0 0 0 1 1H56a1.24 1.24 0 0 0 1.2-1.2V18.4zm30-8.73a8.7 8.7 0 0 0-15-6 8.7 8.7 0 0 0-15 6v3.92h4.8v-4a3.88 3.88 0 0 1 7.77 0v3.9h4.82V9.6a3.88 3.88 0 0 1 7.76 0v3.9h4.9zM77.5 18.4v11.4a1.24 1.24 0 0 0 1.2 1.2h2.42a1.24 1.24 0 0 0 1.2-1.2V18.4zM64.94 29.8a1.24 1.24 0 0 0 1.2 1.2h2.4a1.24 1.24 0 0 0 1.22-1.2V18.4h-4.82zm62.94-11.4v3.85a3.88 3.88 0 1 1-7.76 0V18.4h-4.82v3.85a8.7 8.7 0 1 0 17.4 0V18.4zM132.7 2a1 1 0 0 0-1-1h-2.77a1 1 0 0 0-1 1v11.6h4.82zM32 13.6h7.76v4.8H32z"/>
                            <path fill="#0f6270" d="M27.17 13.6H32v4.8h-4.83zm12.6 0h4.8v4.8h-4.8zm25.17 0h4.82v4.8h-4.82zm-12.6 0h4.83v4.8h-4.82zm25.18 0h4.82v4.8h-4.82zm37.78 0h4.8v4.8h-4.8z"/>
                            <path fill="#11a7aa" d="M94.94 13.55V5.82H90.1v7.77h4.84v-.1m-4.84 4.9h4.83v7.7H90.1z"/>
                            <path fill="#0f6270" d="M95 1h-3.6a1.3 1.3 0 0 0-1.3 1.3v3.5h4.83zm-.06 17.37V13.6H90.1v4.8h4.84v-.03m32.94-4.77h4.82v4.8h-4.82z"/>
                            <path fill="#11a7aa" d="M120.1 2a1 1 0 0 0-1-1h-2.76a1 1 0 0 0-1 1v11.6h4.82z"/>
                            <path fill="#0f6270" d="M95 31h-3.6a1.3 1.3 0 0 1-1.3-1.3v-3.5h4.83z"/>
                            <path fill="#11a7aa" d="M6.82 13.55V5.82H2v7.77h4.82v-.1M2 18.4h4.82v7.77H2z"/>
                            <path fill="#0f6270" d="M6.84 1H3.3A1.3 1.3 0 0 0 2 2.3v3.5h4.82zm-.02 17.37V13.6H2v4.8h4.82v-.03M6.84 31H3.3A1.3 1.3 0 0 1 2 29.7v-3.5h4.82z"/>
                            <path fill="#11a7aa" d="M19.75 9.74A8.73 8.73 0 0 0 11.08 1H6.84v4.82h4.25a3.88 3.88 0 0 1 0 7.76H6.8v4.82h4.25a3.88 3.88 0 0 1 0 7.76H6.82V31h4.25a8.7 8.7 0 0 0 6-15 8.72 8.72 0 0 0 2.68-6.26zm88.1 0A8.73 8.73 0 0 0 99.2 1H95v4.82h4.25a3.88 3.88 0 0 1 0 7.76h-4.3v4.82h4.24a3.88 3.88 0 0 1 0 7.76h-4.3V31h4.2a8.7 8.7 0 0 0 6-15 8.72 8.72 0 0 0 2.6-6.26z"/>
                        </svg>
                    </a>
                {{/if}}
                {{#if shownavigation}}
                    <div class="col _grow">
                        <nav class="SiteHeader-nav js-headernav" role="navigation">
                            {{#if landing}}
                                <ul>
                                    <li><a href="/social-selling/">Marketing</a></li>
                                    <li><a href="/services/">Services</a></li>
                                    <li><a href="/about/">About Us</a></li>
                                    <li><a href="/blog/">Blog</a></li>
                                    <li><a href="/blog/resources/">Resources</a></li>
                                </ul>
                            {{else}}
                                <ul>
                                    <li>
                                        <a href="/amplification/"
                                            class="js-navigationlink"
                                            data-navigation-target="#navigation-solutions"
                                            aria-haspopup=true
                                        >
                                            Solutions
                                        </a>

                                        <div id="navigation-solutions"
                                            class="SiteHeader-secondarynav js-secondarynav"
                                            aria-hidden="true"
                                            aria-label="Solutions submenu"
                                        >
                                            <div class="SiteHeader-secondarynavcontainer">
                                                <div class="row">
                                                    <div class="col _span-12">
                                                        <div id="navigation-solutions-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
                                                            Solutions
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row _left iconlist"
                                                    role="list"
                                                    aria-labelledby="navigation-solutions-header"
                                                    style="margin-top:0"
                                                >
                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/amplification/"
                                                            class="iconlist-item _circle icon _human-resources _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Amplification</p>
                                                                <span class="subtitle">Amplify your social media reach.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/internal-communications/"
                                                            class="iconlist-item _circle icon _internal-communications _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Internal Comms</p>
                                                                <span class="subtitle">Improve internal communications.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/social-selling/"
                                                           class="iconlist-item _circle icon _marketing _before"
                                                           tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Social Selling</p>
                                                                <span class="subtitle">Leverage social selling.</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div class="row _left iconlist"
                                                     role="list"
                                                     aria-labelledby="navigation-solutions-header"
                                                >
                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/social-recruiting/"
                                                           class="iconlist-item _circle icon _sales _before"
                                                           tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Social Recruiting</p>
                                                                <span class="subtitle">Tap into social recruiting.</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li>
                                        <a href="/services/">
                                            Services
                                        </a>
                                    </li>

                                    <li>
                                        <a href="/about/">
                                            About
                                        </a>
                                    </li>

                                    <li>
                                        <a href="/blog/">
                                            Blog
                                        </a>
                                    </li>

                                    <li>
                                        <a href="/blog/resources/"
                                            class="js-navigationlink"
                                            data-navigation-target="#navigation-resources"
                                            aria-haspopup=true
                                        >
                                            Resources
                                        </a>

                                        <div id="navigation-resources"
                                            class="SiteHeader-secondarynav js-secondarynav"
                                            aria-hidden="true"
                                            aria-label="Solutions submenu"
                                        >
                                            <div class="SiteHeader-secondarynavcontainer">
                                                <div class="row">
                                                    <div class="col _span-12">
                                                        <div id="navigation-solutions-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
                                                            Resources
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row iconlist"
                                                    role="list"
                                                    aria-labelledby="navigation-solutions-header"
                                                    style="margin-top:0"
                                                >
                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/blog/resources/"
                                                            class="iconlist-item _circle icon _home _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Resources Home</p>
                                                                <span class="subtitle">Our latest tips and insights all in one place.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/blog/case-studies/"
                                                            class="iconlist-item _circle icon _case-studies _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Case Studies</p>
                                                                <span class="subtitle">Customer case studies and use cases.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/blog/data/"
                                                            class="iconlist-item _circle icon _data-report _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Data Reports</p>
                                                                <span class="subtitle">Data to help you inform your advocacy strategy.</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div class="row iconlist"
                                                    role="list"
                                                    aria-labelledby="navigation-solutions-header"
                                                >
                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/blog/guides/"
                                                            class="iconlist-item _circle icon _guides _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Guides</p>
                                                                <span class="subtitle">To help you build a employee advocacy program.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/reach-calculator/"
                                                            class="iconlist-item _circle icon _calculator _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Reach Calculator</p>
                                                                <span class="subtitle">Calculate the power of your employees on social.</span>
                                                            </div>
                                                        </a>
                                                    </div>

                                                    <div class="col _span-4" role="listitem">
                                                        <a href="/blog/webinars/"
                                                            class="iconlist-item _circle icon _webinars _before"
                                                            tabindex="-1"
                                                        >
                                                            <div class="text">
                                                                <p class="icon _arrow _after spacedout">Webinars</p>
                                                                <span class="subtitle">Live and on-demand webinars.</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    {{#if showlogin}}
                                        <li>
                                            <a href="https://app.getbambu.com/login/" class="_gray">
                                                Log In
                                            </a>
                                        </li>
                                    {{/if}}
                                </ul>
                            </nav>
                        </div>

                    {{/if}} {{!-- /landing --}}

                {{/if}} {{!-- /shownavigation --}}

                {{#if showcta}}
                    <div class="SiteHeader-cta col _shrink">
                        {{#if customctalink}}
                            <a href="{{customctalink}}" class="button _secondary js-track__topNavCTA">{{customctatext}}</a>
                        {{else}}
                            <a href="/demo/" class="button _secondary js-track__topNavCTA">Request a Demo</a>
                        {{/if}}
                    </div>
                {{/if}}

                {{#if showlogin}}
                    <div class="SiteHeader-login">
                        <a href="https://app.getbambu.com/login/" class="_gray">Log In</a>

                        {{#if showmobilenav}}
                            <button type="button" class="button _mobile-toggle {{#if drawermenu}}js-drawer-open{{else}}js-openmenu{{/if}}">
                                <span class="u-text-screenreader">Menu</span>
                                <span class="line"></span>
                                <span class="line"></span>
                                <span class="line"></span>
                            </button>
                        {{/if}}
                    </div>
                {{/if}}

            </div>
        </div>
    </header>

{{else}}

    <header class="SiteHeader _bambu {{modifier}} js-header" role="banner">
        {{> @children}}
    </header>

{{/if}}