solution-page.dust

<section class="solution-top">
        <h1 class="copy-text">{@i18n t="cognitive:cognitive_title"/}</h1>
        <p class="copy-statement">{@i18n t="cognitive:cognitive_desc"/}</p>
        {^hideSignUp}
        <a class="get-started" href="https://apps.admin.ibmcloud.com/manage/trial/bluemix.html">{@i18n t="cognitive:getstartedfree_button"/}</a>
        {/hideSignUp}
</section>

solution.css

/**
 * CSS for Solution Top section
 */
.bluemixSolutions .solution-top {
    box-shadow: 0 7px 9px -7px rgba(0, 0, 0, 0.7) inset;
    position: relative;
    background-color: #2d3f4a;
}

.bluemixSolutions .copy-text {
    color: #41d6c3;
}

.bluemixSolutions .copy-statement {
    color: #dfe6eb;
}

.bluemixSolutions .solution-top .get-started {
    margin-bottom: 28px;
    padding-top: 22px;
    padding-bottom: 22px;
    padding: 11px 34px;
    width: auto;
    text-transform: uppercase;
}

.bluemixSolutions .solution-top .get-started:hover {
    background-color: rgb(86, 219, 206);
    color: rgb(60, 80, 91);
}

.bluemixSolutions .solution-top .light-gray-arrow {
    color: #dfe6eb;
    font-size: 2.5rem;
    margin: 0 0 17px 0;
}
@media screen and (min-width: 694px) {
    .bluemixSolutions .solution-top .light-gray-arrow {
        margin-bottom: 3.5rem;
    }
}
@media screen and (min-width: 862px) {
    .bluemixSolutions .solution-top .light-gray-arrow {
        margin: 0;
    }
}
/**
 * End of Solution Top section
 */