media/css/firefox/welcome.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/modal';
@import '~@mozilla-protocol/core/protocol/css/components/inline-list';

// * -------------------------------------------------------------------------- */
// Smooth Scroll

html {
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}

// * -------------------------------------------------------------------------- */
// Page header

.c-page-header {
    background: $color-white;

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

.c-header-logo {
    display: block;
    margin: 0 auto;

    @media #{$mq-md} {
        display: inline;
        margin: 0;
    }
}

.c-shoulder-cta {
    margin: $spacing-md 0 0;
    text-align: center;

    @media #{$mq-md} {
        @include bidi((
            (float, right, left),
            (text-align, left, right),
        ));
        margin: 0;
    }
}

// * -------------------------------------------------------------------------- */
// Page callout

.mzp-c-callout {
    &.mzp-t-dark.mzp-t-hero {
        background-color: $color-marketing-gray-99;
    }

    .welcome-page4 & {
        background: $color-orange-70 radial-gradient(circle at 60% 100%, $color-yellow-50 5%, $color-orange-70 94%);
    }

    .welcome-page9 & {
        background-color: $color-white;

        .mzp-l-content {
            max-width: $content-lg;
            padding-bottom: 0;
            padding-top: 0;
        }
    }
}

.mzp-c-call-out-body {
    @include border-box;
    margin: 0 auto;
    max-width: $content-md;
    padding: $layout-xs 0;
    text-align: center;

    .welcome-page4 & {
        max-width: $content-md - ($layout-md * 2);
    }

    .welcome-page10 & {
        padding-top: 0;
    }

    @media #{$mq-md} {
        padding: $layout-md $layout-xl;

        .welcome-page4 & {
            padding: $layout-lg 0;

            p {
                margin: 0 $layout-xl;
            }
        }
    }

    .primary-cta {
        margin: 0 auto;

        h2 {
            @include text-display-xs;
        }

        .mzp-c-button {
            min-width: 180px;
        }
    }
}

.mzp-c-callout.mzp-t-hero .mzp-c-callout-title {
    @include text-title-lg;
    margin-bottom: $layout-sm;

    .welcome-page1 &,
    .welcome-page3 &,
    .welcome-page6 &,
    .welcome-page7 &,
    .welcome-page8 &,
    .welcome-page9 &,
    .welcome-page10 & {
        @include text-title-md;
    }

    .welcome-page8 & {
        strong {
            @include zap('/media/protocol/img/zaps/zap-10.svg');
        }
    }

    .welcome-page9 &,
    .welcome-page10 & {
        strong {
            color: $color-violet-50;
        }
    }
}

.mzp-c-callout.mzp-t-hero .mzp-c-callout-desc {
    @include text-body-lg;
    margin-bottom: $layout-sm;

    .welcome-page9 & {
        margin: 0 auto $layout-sm;
        max-width: $content-sm;
    }
}

// * -------------------------------------------------------------------------- */
// Primary content

.body-primary {
    @include text-body-lg;
    margin: $layout-md auto $layout-lg;
    text-align: center;

    .welcome-page9 &,
    .welcome-page10 & {
        margin-bottom: 0;
    }

    .primary-image {
        margin: $layout-sm auto 0;
    }

    .primary-image-desc {
        @include text-title-2xs;
        font-style: italic;
        margin: $layout-sm 0 $layout-xl 0;
    }

    .primary-cta {
        margin: $layout-md auto 0;
    }
}

.welcome-page9 {
    .product-logo {
        display: block;
        margin: $spacing-2xl auto;
    }
}

.welcome-page10 {
    .hero-image {
        display: block;
        margin: 0 auto;
        width: 120px;
    }
}

// * -------------------------------------------------------------------------- */
// Secondary content
// To be replaced by revamped picto card. See https://github.com/mozilla/protocol/issues/382

.c-picto-block {
    @include border-box;
    margin: 0 auto $spacing-2xl;
    max-width: $content-md - ($layout-md * 2);
    padding: 0 $layout-md;

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

    .c-picto-block-image {
        align-items: center;
        display: flex;
        margin-bottom: $spacing-md;
        min-height: $layout-md;
    }

    &.t-adjacent-image {
        @include bidi((
            (padding-left, $layout-xl, 0),
            (padding-right, 0, $layout-xl),
            (text-align, left, right),
        ));
        position: relative;

        & + & {
            border-top: 1px solid $color-marketing-gray-30;
            padding-top: $layout-md;
        }

        .c-picto-block-image {
            @include bidi((
                (left, 0, auto),
                (right, auto, 0)
            ));
            display: block;
            margin: 0;
            max-width: $layout-md;
            min-height: 0;
            position: absolute;
        }
    }
}

@media #{$mq-md} {
    .l-columns-two {
        display: flex;
        margin: 0 auto;
        max-width: $content-lg;
        padding: 0 $layout-md;
        flex-wrap: wrap;

        .c-picto-block {
            flex: 1 1 50%;
            padding: 0 $layout-lg;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Secondary CTA

.secondary-cta {
    @include text-body-lg;
    margin: $layout-lg auto $layout-sm;
    text-align: center;

    h2 {
        @include text-display-xs;
    }

    p {
        margin: 0 auto;
    }

    .mzp-c-button {
        min-width: 180px;
    }
}

.c-utilities {
    @include text-body-sm;
    max-width: $content-md;
    text-align: center;

    .c-survey-link {
        font-weight: bold;
    }
}

// * -------------------------------------------------------------------------- */
// Dark theme

.mzp-c-callout.mzp-t-dark {
    @include light-links;
    background-color: $color-ink-80;
    color: $color-white;

    .mzp-c-button.mzp-t-product {
        color: $color-white;
    }
}

// * -------------------------------------------------------------------------- */
//  Modal

.no-js {
    .js-modal-link {
        display: none;
    }

    .mzp-u-modal-content {
        margin: 0 auto;
        text-align: center;
    }

    .modal-title {
        @include text-title-sm;
        margin-top: $spacing-xl;
    }
}

.modal-title {
    padding-top: $layout-xl;
    position: relative;

    &::before {
        @include image-replaced;
        background-position: center;
        background-repeat: no-repeat;
        content: '';
        height: $layout-lg;
        left: 50%;
        margin-left: -($layout-lg * 0.5);
        position: absolute;
        top: 0;
        width: $layout-lg;

        .welcome-page6 & {
            @include background-size(64px, 64px);
            background-image: url('/media/protocol/img/logos/firefox/browser/logo.svg');
        }
    }
}

.mzp-c-modal-window {
    padding: $spacing-sm;
}

.mzp-c-modal-inner {
    background-color: transparent;
    padding: 0;

    .modal-title {
        @include text-title-md;
        color: $color-ink-80;
        margin-bottom: 0;

        + p {
            margin-bottom: $layout-md;
        }
    }

    .mzp-c-modal-overlay-contents {
        background: $color-white;
        color: $color-black;
        padding: $layout-xs;
        text-align: center;

        a {
            color: $color-link;
        }
    }
}

.qr-code-wrapper {
    margin: 0 auto;
    width: $content-xs;
}

.c-store-badges {
    text-align: center;
    margin-top: $layout-sm;

    li {
        display: inline-block;
        margin: 0 $spacing-sm $spacing-lg;
    }
}

@media #{$mq-sm} {
    .mzp-c-modal-window {
        padding: $layout-xs;
    }
}

@media #{$mq-md} {
    .mzp-c-modal-inner {
        margin: 0 auto;
        max-width: 800px;
        padding: $layout-md;

        .mzp-c-modal-overlay-contents {
            padding: $layout-md;
        }
    }
}

// * -------------------------------------------------------------------------- */
//  Send to Device overrides

#send-to-device {
    margin: 0 auto;
    text-align: center;

    footer {
        display: none;
    }

    // send to device is inline on this page.
    .welcome-page4 & {
        color: $color-ink-80;
        margin-top: $spacing-md;

        .mzp-c-button-info {
            width: unset;
        }
    }
}

// * -------------------------------------------------------------------------- */
//  Set as default conditionals

.state-is-default {
    display: none;
}

.is-firefox-default {
    .state-is-default {
        display: inline-block;
    }

    .state-not-default {
        display: none;
    }
}

.image-container {
    margin: 35px 0 70px;

    .image-wrapper {
        display: inline-block;
        vertical-align: top;
        margin: 0 50px;
        position: relative;

        // This test is not being performed in any RTL locales
        &:first-of-type {
            margin: 0 50px 0 0;
        }

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

        p {
            @include font-size(17px);
            max-width: 250px;
            margin: 0 auto;
        }

        img {
            vertical-align: top;
            height: 290px;
            width: auto;
        }

        video {
            vertical-align: top;
            pointer-events: none;
        }
    }

    #arrow-right,
    #arrow-down {
        position: absolute;
    }

    #arrow-right {
        top: 110px;
        right: -90px;
        height: 85px;
    }

    #arrow-down {
        display: none;
    }
}