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

GAF mobile Web site

/*
 * We need to add custom variables temporarily to achieve colors given by the designer.
 *
 */

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

@Homepage-sectionBg-top-color: #0087E0;
@Homepage-sectionBg-bottom-color: #1073CB;
@Homepage-list-icon-color: #1EB5BD;

.Homepage {
    @this: Homepage;

    &-section {
        .linear-gradient(@Homepage-sectionBg-top-color, @Homepage-sectionBg-bottom-color);
        padding: 40px 30px;

        &-title {
            margin: 0;
            font-size: @type-size-xxlge;
            font-weight: @type-weight-regular;
        }

        &-desc {
            margin-top: @spacing-mid;
            font-size: @type-size-lge;
            line-height: 1.4;
        }

        &-action {
            margin-top: @spacing-xxlarge;
        }

        &--alt {
            .@{this}-section-title,
            .@{this}-section-desc {
                color: @text-color-light;
            }

            .@{this}-section-title {
                font-weight: @type-weight-bold;
            }
        }

        &--invert {
            .linear-gradient(@Homepage-sectionBg-bottom-color, @Homepage-sectionBg-top-color);
        }

        &--light {
            background: @septenary-color-xxxlight;
        }
    }

    &-slider {
        margin: @spacing-small -30px 0;
        overflow: hidden;

        &-list {
            &--featured-projects {
                height: 230px;
            }
        }
    }

    &-list {
        .list-unstyled(@margin: @spacing-mid 0 0);

        &-item {
            .flex();
            .flex-align-items(top);

            &:not(:first-child) {
                margin-top: @spacing-mid;
            }
        }

        &-icon {
            .flex-basis(24px);
            .flex-shrink(0);

            svg {
                width: 24px;
                height: 24px;
                fill: @Homepage-list-icon-color;
            }
        }

        &-body {
            margin-top: @spacing-xxsmall;
            padding-left: 12px;
        }

        &-title,
        &-desc {
            font-size: @type-size-mid;
        }

        &-title {
            margin: 0;
            font-weight: @type-weight-medium;
        }

        &-desc {
            margin-top: @spacing-xsmall;
            margin-bottom: 0;
            line-height: 1.4;
        }
    }

    &-testimonial {
        margin: @spacing-xlarge -@spacing-xxsmall 0;
    }

    // Sections
    &-hero {
        .flex();
        .flex-align-items(center);
        position: relative;
        min-height: calc(~"100vh - 66px");
        overflow: hidden;

        &::before {
            .transform(rotate(45deg));
            position: absolute;
            bottom: -320px;
            right: -120px;
            z-index: 1;
            width: 100%;
            height: 100%;
            opacity: .4;
            background-color: @Homepage-sectionBg-bottom-color;
            content: "";

            @media (min-width: 415px) {
                display: none;
            }
        }

        &-inner {
            position: relative;
            z-index: 2;
        }

        &-title,
        &-desc {
            color: @text-color-light;
        }

        &-title {
            margin: 0;
            font-size: @type-size-huge;
        }

        &-desc {
            margin-top: @spacing-mid;
            margin-bottom: 0;
            font-size: @type-size-lge;
            line-height: 1.4;
        }

        &-footer {
            margin-top: 40px;

            &-item:not(:first-child) {
                margin-top: @spacing-small;
            }
        }

        &-action {
            .transform(translateX(-50%));
            position: absolute;
            left: 50%;
            bottom: 20px;
            z-index: 2;

            &-btn [class*="flicon-"] {
                width: 15px;
                height: 15px;
                stroke-width: 2px;
                stroke: @septenary-color-xxxlight;
            }
        }
    }

    &-products {

        &-item:not(:first-child) {
            margin-top: @spacing-xlarge;
        }
    }

    &-details {
        min-height: 684px;
        padding-bottom: 430px;
        .linear-gradient-with-image ("../images/homepage/freelancer-connects.png", @Homepage-sectionBg-bottom-color,  @Homepage-sectionBg-top-color);
        background-position: bottom;
    }
}