media/css/firefox/built-for-you/landing.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/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with($image-path: '/media/protocol/img');

@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/video';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';


.built-for-you {
    color: $color-black;

    h1, h2, h3 {
        color: $color-black;
    }
}

// Override Protocol wordmark
.mzp-c-wordmark.mzp-t-wordmark-md.mzp-t-product-firefox {
    background-image: url('/media/img/logos/firefox/logo-word-hor.svg');
}

// Override Protocol product button
.c-button-download-thanks .mzp-c-button.mzp-t-product {
    background-color: $color-black;

    &:hover,
    &:focus,
    &:active {
        background-color: $color-white;
        color: $color-black;
        border-color: $color-black;
    }
}

.c-hero {
    color: $color-black;

    .mzp-c-split-media-asset {
        border-radius: $border-radius-md;
    }

    .c-hero-tagline {
        @include text-body-lg;
    }
}

.c-hero-video {
    video,
    img {
        border-radius: $border-radius-md;
    }

    .fallback {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        video {
            display: none;
        }

        .fallback {
            display: inline-block;
        }
    }
}

.c-section-intro {
    text-align: center;
    max-width: $content-md;
    margin: 0 auto $layout-xl;

    .mzp-c-section-heading {
        padding-bottom: $layout-xs;
    }

    p {
        @include text-body-lg;
    }
}

.section-safety {
    .mzp-c-section-heading {
        max-width: $content-md;
    }

    .mzp-l-columns {
        gap: $spacing-lg;
    }

    .c-highlight {
        border-radius: $border-radius-lg;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
        margin: 0 auto $spacing-lg;
        max-width: $content-sm;
        text-align: center;

        .c-highlight-content {
            padding: $spacing-md;

            h3 {
                @include font-base;
                @include text-body-lg;
                font-weight: normal;
            }
        }
    }

    .mzp-c-card {
        text-align: center;

        .mzp-c-card-block-link {
            border-radius: $border-radius-md;
            box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
        }

        .mzp-c-card-image {
            border-radius: $border-radius-md $border-radius-md 0 0;
        }

        .mzp-c-card-content {
           padding: $spacing-md;
        }

        .mzp-c-card-title {
            @include font-base;
            @include text-body-lg;
            font-weight: normal;
        }
    }
}

.section-features {
    .mzp-l-columns {
        gap: $spacing-md;
    }

    .c-feature {
        background: $color-marketing-gray-10;
        border-radius: $border-radius-sm;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
        margin: 0 auto $spacing-md;
        max-width: $content-sm;
        padding: $spacing-md $spacing-lg;
    }

    .c-feature-title {
        @include text-title-2xs;
        display: flex;
        align-items: center;
        gap: $spacing-md;
    }
}

.section-choose {
    margin-bottom: $layout-md;

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

// Conditional CTAs
.cta-is-firefox {
    display: none;

    .is-firefox & {
        display: block;
    }
}

.cta-not-firefox {
    display: block;

    // hide in Firefox
    .is-firefox & {
        display: none;
    }

    // Assume desktop, hide mobile buttons
    .is-android,
    .is-ios {
        display: none;
    }

    // Show App Store on iOS
    .ios & .is-ios {
        display: block;
    }

    // Show Play Store on Android
    .android & .is-android {
        display: block;
    }

    // Hide desktop download on mobile
    .ios & .mzp-c-button-download-container,
    .android & .mzp-c-button-download-container {
        display: none;
    }
}