<?php
/**
 * Template Name: Felicity Health - Brand Guidelines
 *  
 * The template for displaying FelicityhealthBrand Guidelines Pages.
 * 
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>

<?php get_header(); ?>
 <style>
.gradient-dark {
    background-color: #343a40;
    background-image: linear-gradient(to right, #343a40, #000);
}

.gradient-dark svg {
    left: 0;
    bottom: 0;
}

.brand-menu .navbar-nav span {
    margin-top: 0px !important;
    margin-bottom: -6px;
}

.duik-sidebar-sticky {
    padding-left: 8% !important;
}

.inner-wrapper-sticky {
    left: 8% !important;
}

.btn-primary {
    color: #fff;
    background-color: #dd381c;
    border-color: #dd381b;
    color: rgb(229, 9, 20);
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(200, 12, 22);
    border-image: initial;
    border-radius: 0px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    font-size: 14px;
    padding: 15px 27px;
}

.btn-primary i {
    font-size: 20px;
}

.btn-primary:hover {
    color: #fff;
    background-color: #dd391b;
    border-color: #dd391a;
}

.section_title {
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    font-family: impact, Arial;
}

.section_title2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
    color: #222;
}

.section_subtitle,
.subtitle {
    font-weight: 400;
    min-height: 44px;
    font-size: 18px;
    line-height: 22px;
    padding-left: 10px;
    border-left: 2px solid rgb(229, 9, 20);
    position: relative;

    text-transform: uppercase;
}

.section_text {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
}


.border-bottom {
    border-bottom: 3px solid #bcbbbb !important;
}

.article .module[data-size=large] {
    -ms-flex-preferred-size: 0 0 100%;
    flex-basis: 0 0 100%;
    width: 100%;
}

.article .module {
    position: relative;
    margin: 20px 0;
    padding: 0 2px;
}

.article .module .responsive-img {
    background-color: hsla(0, 0%, 8%, .02);
}

.article .module.image picture:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    border: 1px solid rgba(34, 31, 31, .3);
}

.responsive-img img {
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1);
}

.module.image .image__content {
    width: 100%;
}

.article .module img {
    display: block;
    margin-bottom: 10px;
}

b,
strong {
    font-weight: bolder;
    color: #222;
}

.bg-red {
    background-color: #dd391a !important;
}

.demo-fonts-box {
    font-family: impact, serif;
}

.bg-ama-heading {
    background: #515151 !important
}

.bg-dark {
    background-color: #222222 !important;
}
</style>
<section class="u-content-space pt-9 pb-0 brand-menu">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="navbar   bg-light border-top border-bottom">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img src="http://localhost:8888/workspace/thisisama.com/site/wp-content/uploads/2020/03/logo.png"
                            alt="AMA logo" style="width: 100px;">
                    </a>
                    <ul class="navbar-nav mr-auto mr-sm-2 mt-2 ml-2 pl-3 mt-lg-0 border-left">
                        <li class="nav-item ">
                            <span class="small d-block">Explore</span>
                            <span class="text-uppercase text-dark small font-weight-bold"><?php the_title(); ?></span>
                        </li>
                    </ul>

                    <div class="my-2 ml-auto my-lg-0">
                        <a class="btn btn-outline-dark btn-sm  small font-weight-bold text-uppercase" href="#">Download
                            Package</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Header -->
<header>

    <!-- Promo Block -->
    <section class="u-promo-block u-promo-block--mheight-300 u-overlay u-overlay--dark text-white gradient-dark"
        style="background-image: url( );">
        <!-- Promo Content -->
        <div class="container u-overlay__inner u-ver-center u-content-space">
            <div class="row justify-content-left pt-9">
                <div class="col-12">
                    <div class="text-left">
                        <h1 class="h1 display-lg-3 pb-0 mb-0 font-weight-bold ">Brand Assets</h1>
                        <p class="h6 text-uppercase u-letter-spacing-sm mb-0">The elements of our brand's visual
                            identity
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Promo Content -->
        <svg class="position-absolute bottom-0 left-0" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 323"
            enable-background="new 0 0 1920 323" xml:space="preserve">
            <polygon fill="#ffffff" style="fill-opacity: .05;" points="-0.5,322.5 -0.5,121.5 658.3,212.3 "></polygon>
            <polygon fill="#ffffff" style="fill-opacity: .1;" points="-2,323 1920,323 1920,-1 "></polygon>
        </svg>
    </section>
    <!-- End Promo Block -->
</header>
<!-- End Header -->



<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <nav class="js-sticky-sidebar col-md-3 col-lg-3 duik-sidebar-sticky border-md-right navbar-expand-md">
            <div class="d-flex justify-content-between mb-3">
                <!-- Responsive Toggle Button -->
                <button class="btn btn-link pl-0 d-md-none" type="button" data-toggle="collapse"
                    data-target="#sidebar-nav" aria-controls="sidebar-nav" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30"
                        focusable="false">
                        <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"
                            d="M4 7h22M4 15h22M4 23h22" />
                    </svg>
                </button>
                <!-- End Responsive Toggle Button -->
            </div>

            <!-- Sidebar Nav -->
            <div class="collapse navbar-collapse border-bottom border-md-0 pt-9 " id="sidebar-nav">
                <div class="js-scrollbar duik-sidebar-sticky">
                    <h5 class="duik-sidebar__heading">Brand Assets</h5>
                    <ul class="js-scroll-nav duik-sidebar__nav">
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link active" href="#ama-logo">Logo</a>
                        </li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-symbol">Symbol</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-fonts">Fonts</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-colors">Colors</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-clearing-space">Clearing
                                space</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-logo-on-color">Logo on
                                color</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-video-watermark">Video
                                Watermark</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#ama-fonts">Typography</a>
                        </li>
                    </ul>

                    <h5 class="duik-sidebar__heading">Press</h5>
                    <ul class="duik-sidebar__nav">
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#">AMA Pictures</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#">AMA Videos</a></li>
                        <li class="duik-sidebar__item"><a class="duik-sidebar__link" href="#">AMA Covers</a></li>
                    </ul>
                </div>
            </div>
            <!-- End Sidebar Nav -->
        </nav>
        <!-- End Sidebar -->

        <main class="ml-sm-auto col-md-9 col-lg-9 px-4 pt-9 pt-md-11 ">
            <div class="row pt-3">
                <!-- Content -->
                <div class="col-xl-10 order-xl-1 duik-content  article">
                    <div class="module mb-7">
                        <h1 class="section_title mt-3">Logo</h1>
                        <span class="section_subtitle"><span>Our Brand Signature</span></span>

                        <p class="mt-5">
                            <a class="btn btn-lg btn-primary text-uppercase" href="#">
                                <i class="fas fa-cloud-download-alt mr-1"></i> Download Logo
                            </a>
                        </p>

                        <p class="section_text mb-5 mt-9"><b>With the signature AMA red, our wordmark is iconic.</b>
                        </p>

                        <figure class="module image" data-size="large">
                            <picture class="responsive-img">
                                <img alt="" class="image__content"
                                    src="http://localhost:8888/workspace/thisisama.com/site/wp-content/uploads/2020/03/AMA-official-logo-1.jpg">
                            </picture>
                        </figure>
                    </div>

                    <div id="ama-symbol" class="module mb-7">
                        <h1 class="section_title mt-3">Symbol</h1>
                        <span class="section_subtitle"><span>Our Brand Symbol</span></span>

                        <p class="mt-5">
                            <a class="btn btn-lg btn-primary text-uppercase" href="#">
                                <i class="fas fa-cloud-download-alt mr-1"></i> Download Symbol
                            </a>
                        </p>

                        <p class="section_text mb-5 mt-9"><b>The Triangle, Square, Triangle represents connection and a
                                never-ending stream of African stories to our clients. Simple and iconic, it instantly
                                sparks brand
                                recognition.</b>
                        </p>

                        <figure class="module image" data-size="large">
                            <picture class="responsive-img">
                                <img alt="" class="image__content"
                                    src="http://localhost:8888/workspace/thisisama.com/site/wp-content/uploads/2020/03/AMA-official-symbol.jpg">
                            </picture>
                        </figure>
                    </div>

                    <!-- Colors -->
                    <div id="ama-colors" class="module mb-7 ">
                        <h1 class="section_title2">Colors</h1>
                        <p class="mb-5 mt-9">
                            <b>Our primary logo is AMA Red on a white background. This is to create a premium corporate
                                feel as we continue to set the industry standard for original content.</b>
                        </p>

                        <p>
                            <ul class="list-unstyled row">
                                <li class="col-lg-3 text-center mb-7">
                                    <div class="bg-red rounded mb-2" style="padding: 50px 25px;">
                                        <small class="text-white d-block">#dd391a</small>
                                        <span class="text-white">AMA red</span>
                                    </div>
                                    <span class="text-dark d-block">HSLA : 6% 88% 96% 0%</span>
                                    <span class="text-dark d-block">RGB : 222 57 28</span>
                                    <span class="text-dark d-block">HEX : DE391C</span>
                                    <!-- <span class="text-dark d-block">Pantone 7597 C </span> -->
                                </li>

                                <li class="col-lg-3 text-center mb-7">
                                    <div class="bg-white rounded mb-2 border" style="padding: 50px 25px;">
                                        <small class="text-black d-block">#ffffff</small>
                                        <span class="text-black">AMA White</span>
                                    </div>
                                    <span class="text-dark d-block">HSLA : 0% 0% 0% 0%</span>
                                    <span class="text-dark d-block">RGB : 255 255 255</span>
                                    <span class="text-dark d-block">HEX : FFFFFF</span>
                                    <!-- <span class="text-dark d-block">Pantone --------</span> -->
                                </li>

                                <li class="col-lg-3 text-center mb-7">
                                    <div class="bg-ama-heading rounded mb-2" style="padding: 50px 25px;">
                                        <small class="text-white d-block">#515151</small>
                                        <span class="text-white">AMA heading</span>
                                    </div>
                                    <span class="text-dark d-block">HSLA : 0% 0 32% 1</span>
                                    <span class="text-dark d-block">RGB : 81 81 81 1</span>
                                    <span class="text-dark d-block">HEX : 515151</span>
                                </li>
                                <li class="col-lg-3 text-center mb-7">
                                    <div class="bg-dark rounded mb-2" style="padding: 50px 25px;">
                                        <small class="text-white d-block">#222222</small>
                                        <span class="text-white">AMA paragraph</span>
                                    </div>
                                    <span class="text-dark d-block">HSLA : 0 0% 13% 1</span>
                                    <span class="text-dark d-block">RGB : 34 34 34 1</span>
                                    <span class="text-dark d-block">HEX : 222222</span>
                                </li>




                            </ul>
                        </p>

                    </div>

                    <!-- Clearing Space -->
                    <div id="ama-clearing-space" class="module mb-7 ">
                        <h1 class="section_title2">Clearing Space</h1>

                        <p class="mb-5 mt-9">
                            <b>The minimum clear space of the logo is the width of the M in AMA.</b>
                        </p>

                        <figure class="module image" data-size="large">
                            <picture class="responsive-img">
                                <img alt="" class="image__content"
                                    src="http://localhost:8888/workspace/thisisama.com/site/wp-content/uploads/2020/03/AMA-Clearing-space.jpg">
                            </picture>
                        </figure>
                    </div>

                    <!-- LOGO ON COLOR -->
                    <div id="ama-logo-on-colors" class="module mb-7 ">
                        <h1 class="section_title2">Logo on color</h1>

                        <p class="mb-5 mt-9">
                            <b>In certain situations, the logo can also be used on a black or contextually
                                colored
                                background, as long as there is a 3:1 contrast ratio. Anything less may
                                compromise
                                visibility and is not recommended. Color contrasts can be checked here.
                            </b>
                        </p>
                    </div>
                    <!-- VIDEO WATERMARK -->
                    <div id="ama-video-watermark" class="module mb-7 ">
                        <h1 class="section_title2">Video Watermark</h1>

                        <p class="mb-5 mt-9">
                            <b>On very few occasions, the logo can appear in white. One such occasion is for the
                                video
                                watermark.
                            </b>
                        </p>
                    </div>
                    <!-- Fonts -->
                    <div id="ama-fonts" class="module mb-7 ">
                        <h1 class="section_title2">AMA Fonts</h1>

                        <p class="mb-5 mt-9">
                            <b>The Fonts of AMA.
                            </b>
                        </p>
                        <div>
                            <!-- IMPACT -->
                            <div class="js-font-content demo-fonts-box bg-red text-light u-box-shadow-sm rounded p-3">
                                <div class="row">
                                    <div class="col-lg">
                                        <p class="demo-fonts-box__item-xl">Aa</p>
                                        <p class="js-font-content__chnage1 demo-fonts-box__item-xs">IMPACT FONT
                                        </p>
                                        <p class="js-font-content__chnage2 demo-fonts-box__item-xs d-none">
                                            Playfair
                                            Display</p>
                                    </div>
                                    <div class="col-lg">
                                        <p class="demo-fonts-box__item">Light</p>
                                        <p class="demo-fonts-box__item-xs font-weight-light">AaBbCcDd</p>
                                        <br>
                                        <p class="demo-fonts-box__item">Regular</p>
                                        <p class="demo-fonts-box__item-xs">AaBbCcDd</p>
                                    </div>
                                    <div class="col-lg">
                                        <p class="demo-fonts-box__item">Bold</p>
                                        <p class="demo-fonts-box__item-xs font-weight-bold">AaBbCcDd</p>
                                        <br>
                                        <p class="demo-fonts-box__item">Numbers (Light)</p>
                                        <p class="demo-fonts-box__item-xs font-weight-light">0123456789</p>
                                    </div>
                                </div>
                            </div>
                            <!-- End IMPACT-->
                        </div>
                    </div>

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



</div>
<!-- End Content -->
 

</main>
</div>
</div>
 


<?php get_footer(); ?>