media/css/firefox/welcome13.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-vpn';

.c-page-header {
    .mzp-l-content {
        padding-top: $spacing-md;
        padding-bottom: $spacing-md;
    }
}

// * -------------------------------------------------------------------------- */
// Main content
.c-content-main {
    padding: 0;
    text-align: center;
}

.c-main-image {
    border-radius: 100%;
    margin: 0 auto $layout-lg;
    padding: $spacing-lg;
}

.c-main-title {
    @include text-title-md;
    color: $title-text-color;
    margin-left: auto;
    margin-right: auto;

    @supports (--css: variables) {
        color: var(--title-text-color);
    }

    strong {
        color: $color-violet-50;
    }
}

.c-main-tagline {
    @include text-body-xl;
    max-width: $content-md;
    margin-left: auto;
    margin-right: auto;
}

// * -------------------------------------------------------------------------- */
// Secondary content
.page-body .mzp-l-content {
    padding-top: 0;
}

.mzp-c-picto {
    max-width: $content-sm;
}

.mzp-c-picto-title {
    @include text-title-2xs;
}

.mzp-c-picto-image {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    text-align: center;

    svg {
        max-width: 100%;
    }
}

.c-main-cta {
    margin: $layout-md auto;
    text-align: center;
}

// * -------------------------------------------------------------------------- */
// Utilities
.c-utilities {
    @include text-body-sm;
    max-width: $content-md;
    padding-bottom: $layout-xl;
    text-align: center;
}

// * -------------------------------------------------------------------------- */
// Dark mode
@media (prefers-color-scheme: dark) {
    .c-page-header .c-header-logo {
        background-image: url($image-path + '/logos/firefox/browser/logo-word-hor-white.svg');
        @include background-size(216px, 40px);
        display: block;
        height: 0;
        overflow: hidden;
        padding-top: 40px;
    }

    #outer-wrapper {
        background: $color-dark-gray-60;
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-main-title,
    .mzp-c-picto-title {
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-main-image {
        background-color: $color-white;
    }

    .c-main-title strong {
        color: $color-violet-20;
    }

    .mzp-c-picto-image {
        .invert-stroke {
            stroke: #fff;
        }

        .invert-fill {
            fill: #fff;
        }

        .fill-none {
            fill: none;
        }

        .stroke-none {
            stroke: none;
        }

        .fill-light {
            fill: #c3c4fd;
        }

        .fill-med {
            fill: #a77ffa;
        }

        .stroke-med {
            stroke: #a77ffa;
        }

        .fill-dark {
            fill: #6a52de;
        }
    }

    .c-utilities {
        @include white-links;
    }
}