gaf-mobile/app/styles/layout/mobile.less

GAF mobile Web site

@import (reference) '../themes/variables';

// Mobile apps landing page

.mobile {
    background: @body-bg-light;

    &-hero {
        .default-vertical-padding;
    }

    &-title {
        font-size: @type-size-xxxlge;
    }

    &-store-links {
        width: 100%;
        margin: 30px 0;
        text-align: center;
    }

    .app-store-link-badge {
        height: 42px;
    }

    .app-store-link-android {
        margin-right: 10px;
    }

    &-app-image {
        display: block;
        width: 80%;
        max-width: 340px;
        height: auto;
        margin: 0 auto 50px;
    }

    &-content {
        padding: 30px 0 40px;
        color: @septenary-color-xxxlight;
    }

    &-content-freelancers {
        background-color: @primary-color-xlight;
    }

    &-content-employers {
        background-color: @quaternary-color-xdark;
    }

    &-content-title {
        color: @septenary-color-xxxlight;
    }

    &-content-sub-title {
        font-size: @type-size-xlge;
        color: @septenary-color-xxxlight;
    }

    &-content-inner {
        text-align: center;
    }

    &-content-icon-container {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-top: 40px;
        border-radius: 50%;
        background-color: @septenary-color-xxxlight;
    }

    &-content-icon {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        width: 65px;
        margin: auto;
        padding: 4px;

        path, line, circle, polygon, polyline {
            stroke: @text-color-dark;
            stroke-width: 2px;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .has-color-alt {
            stroke-width: 0;
            fill: @primary-color-xxlight;
            opacity: 0.5;
        }
    }

    &-content-icon-title {
        color: @septenary-color-xxxlight;
    }

    &-cta {
        .default-vertical-padding;
    }
}