/**
 * Copyright (c) Enalean, 2017-Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "./includes/login";
@use "pkg:@tuleap/burningparrot-sign-in";

$homepage-small-screen-width: 850px;
$homepage-huge-screen-width: 3000px;

/* stylelint-disable-next-line selector-no-qualifying-type */
body.homepage > #main-container {
    background: linear-gradient(
        to bottom,
        var(--tlp-background-color) 300px,
        var(--tlp-dark-color) 300px
    );

    /* stylelint-disable-next-line selector-no-qualifying-type */
    > main > #feedback {
        background: var(--tlp-background-color);
    }
}

.homepage-content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(
        to bottom,
        var(--tlp-background-color),
        var(--tlp-white-color) 50%
    );

    @media screen and (max-width: $homepage-small-screen-width) {
        padding: 40px 20px;
    }
}

.homepage-welcome-sign-in {
    display: flex;
    position: relative;
    z-index: 3;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    padding: 60px;

    @media screen and (max-width: $homepage-small-screen-width) {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

.homepage-welcome {
    flex: 1 1 auto;
    max-width: 50%;
    margin: 0 50px 220px 0;

    @media screen and (max-width: $homepage-small-screen-width) {
        width: 100%;
        max-width: none;
        margin: 0 0 20px;
        text-align: center;

        > .homepage-welcome-new-account-button {
            display: none;
        }
    }
}

.homepage-welcome-custom-logo {
    width: 250px;
    margin: 0 0 30px;
}

.homepage-welcome-standard-logo {
    margin: 0 0 40px;
    white-space: nowrap;
}

.homepage-welcome-standard-logo-tulip {
    margin: 0 18px 0 0;
    fill: var(--tlp-main-color);
}

.homepage-welcome-standard-logo-tuleap {
    position: relative;
    top: 8px;
    fill: var(--tlp-dark-color);
}

$text-shadow-so-that-text-over-dark-background-is-somewhat-visible:
    1px 1px 0 var(--tlp-white-color),
    -1px 1px 0 var(--tlp-white-color),
    1px -1px 0 var(--tlp-white-color),
    -1px -1px 0 var(--tlp-white-color);

.homepage-welcome-title {
    margin: 0 0 30px;
    color: var(--tlp-dark-color);
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    text-shadow: $text-shadow-so-that-text-over-dark-background-is-somewhat-visible;
}

.homepage-welcome-text {
    margin: 0 0 30px;
    color: var(--tlp-dark-color);
    font-size: 18px;
    line-height: 30px;
    text-shadow: $text-shadow-so-that-text-over-dark-background-is-somewhat-visible;

    > p {
        margin: 0 0 16px;
        font-size: 18px;
        line-height: 30px;

        &:last-child {
            margin: 0;
        }
    }
}

.homepage-already-signed-in {
    @include burningparrot-sign-in.tuleap-sign-in;
}

.homepage-sign-in-register {
    margin: 30px 0 0;
}

.homepage-sign-in-forgot-password {
    text-align: right;
}

.homepage-already-signed-in > .tlp-avatar-jumbo {
    margin: 0 0 20px;
}

.homepage-already-signed-in-title {
    margin: 0 0 40px;
    color: var(--tlp-dark-color);
    line-height: 38px;
    text-align: center;
}

.homepage-background {
    position: absolute;
    z-index: 2;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 733px;
    overflow: hidden;
}

.homepage-background-illustration {
    position: absolute;

    @media screen and (min-width: $homepage-huge-screen-width) {
        transform: scale(1.5);
        transform-origin: bottom left;
    }
}

.homepage-background-illustration-background {
    fill: var(--tlp-dark-color);
}

.homepage-background-stroke {
    stroke: var(--tlp-main-color);
}

.homepage-background-dark-circle {
    stroke: var(--tlp-main-color);
    fill: var(--tlp-dark-color);
}

.homepage-background-light-circle {
    stroke: var(--tlp-main-color);
    fill: var(--tlp-white-color);
}

.homepage-bottom-content {
    display: flex;
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: -100px auto 60px;
    padding: 60px;

    @media screen and (max-width: $homepage-small-screen-width) {
        flex-direction: column;
        align-items: center;
    }
}

.homepage-statistics {
    display: flex;
    flex: 1 0 50%;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 60px 0 0;

    @media screen and (max-width: $homepage-small-screen-width) {
        margin: 0 0 60px;
    }
}

.homepage-statistic {
    display: flex;
    position: relative;
    align-items: flex-start;
    justify-content: center;
    min-width: 150px;
    margin: 10px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--tlp-main-color);
    border-radius: var(--tlp-large-radius);
    background: var(--tlp-dark-color);
    color: var(--tlp-white-color);
}

.homepage-statistic-main {
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
}

.homepage-statistic-total {
    margin: 0 0 10px;
    font-size: 60px;
    font-weight: 300;
    line-height: 40px;
}

.homepage-statistic-label {
    opacity: 0.6;
    color: var(--tlp-neutral-dark-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.homepage-statistic-growth {
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    margin: 0 0 0 20px;
    color: var(--tlp-success-color);
}

.homepage-statistic-growth-plus {
    margin: 0 2px 0 0;
    font-size: 18px;
    font-weight: 700;
}

.homepage-statistic-growth-value {
    position: relative;
    top: -2px;
    margin: 0 5px 0 0;
    font-size: 28px;
}

.homepage-statistic-growth-label {
    font-size: 11px;
    font-weight: 600;
}

.homepage-statistic-growth-background {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 0;
    opacity: 0.05;

    @supports (mix-blend-mode: overlay) {
        mix-blend-mode: overlay;
        opacity: 0.3;
    }
}

.homepage > footer {
    position: relative;
    z-index: 3;
    background: none;
    background-image: linear-gradient(
        to bottom,
        var(--tlp-dark-color),
        var(--tlp-dark-color-darker-10)
    );
}
