media/css/firefox/new/desktop/refresh-experiment.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 'sass:math';

$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/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
@import '../../../protocol/components/sub-navigation';

// --------------------------------------------------------------------------
// Protocol over-rides
// https://github.com/mozilla/protocol/issues/345
// https://github.com/mozilla/protocol/issues/536
// https://github.com/mozilla/bedrock/pull/9096


// xs
$v-grid-xs: $layout-md;
$h-grid-xs: $layout-xs;

// md
$v-grid-md: $layout-xl * 0.5;
$h-grid-md: 64px;

// lg
$v-grid-lg: 192px * 0.5;
$h-grid-lg: 80px;

main {
    background-color: $color-white; // for IE6
    color: $color-dark-gray-30;

    h2,
    h3,
    h4 {
        color: $color-marketing-gray-99;
        margin-bottom: $spacing-md;
        text-wrap: balance;
    }

    h3 {
        font-weight: normal;
    }

    img {
        .mzp-c-card & {
            display: block;
            margin-bottom: $spacing-lg;
        }
    }
}

// notification

.mzp-c-notification-bar {
    a:link {
        margin: 0;
    }
}

// emphasis box

.mzp-c-emphasis-box {
    padding: $v-grid-xs $h-grid-xs;
    background-color: #EDEDF0;
    border-radius: 30px;
    max-width: $content-xl + $layout-xl;
    box-sizing: border-box;
    margin: 0 auto;


    @media #{$mq-md} {
        padding: $layout-md;
        border-radius: 40px;
    }

    @media #{$mq-lg} {
        padding: $layout-lg;
        border-radius: 60px;
    }

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

// button container

.mzp-c-button-download-container {
    .main-download & { // target main to avoid conflicting with nav
        margin-bottom: 0;
    }

    .t-intro & {
        @include bidi(((text-align, left, right),));
    }

    .t-features &,
    .t-discover & {
        display: block;
    }
}

// cta link

button.mzp-c-cta-link {
    background: none;
    border: 0;
    color: $color-link;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;

    &:hover {
        color: $color-link-hover;
    }
}

// --------------------------------------------------------------------------
// conditional content classes

.show-android,
.show-ios {
    display: none !important; /* stylelint-disable-line declaration-no-important */
}

.ios .show-ios {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}

.android .show-android {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}

.ios,
.android {
    #download-features,
    #download-discover {
        display: none;
    }
}

.show-else {
    .android &,
    .ios & {
        display: none !important; /* stylelint-disable-line declaration-no-important */
    }
}

// --------------------------------------------------------------------------

.u-visually-hidden {
    @include visually-hidden;
}

// --------------------------------------------------------------------------
// section titles

.mzp-c-section-heading {
    @include text-title-md;
}


// --------------------------------------------------------------------------
// Blocks
// used for highlights, hero, and mobile

.c-block {
    margin: 0 auto;
    overflow-x: hidden;
    padding: $v-grid-xs 0;
    position: relative;

    @media #{$mq-md} {
        padding: $v-grid-md 0;
    }

    @media #{$mq-lg} {
        padding: $v-grid-lg 0;
    }
}

.c-block-container {
    @include clearfix;
    @include border-box;
    margin: 0 auto;
    max-width: $content-xl + $layout-xl * 2;
    min-width: $content-xs;
    padding: 0 $layout-sm;

    .c-block-media-img {
        margin: 0 auto;
    }

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

    // vertical and horizontal aligment for body or media
    // text align works for float fallback
    // justify positioning works for no constraint
    // absolute positioning works on constrain-height
    @media #{$mq-md} {
        padding: 0 $layout-lg;

        .l-h-start {
            @include bidi(((text-align, left, right),));
            justify-self: start;

            .c-block-media-img {
                @include bidi((
                    (margin-right, auto, margin-left, 0),
                    (margin-left, 0, margin-right, 0),
                ));
            }
        }

        .l-h-center {
            justify-self: center;
            text-align: center;

            .c-block-media-img {
                margin: 0 auto;
            }
        }

        .l-h-end {
            justify-self: end;

            .c-block-media-img {
                @include bidi((
                    (margin-left, auto, margin-right, 0),
                    (margin-right, 0, margin-left, 0),
                ));
            }
        }
    }

    // vertical alignment only browsers with grid support
    @supports (display:grid) {
        .l-v-start {
            align-self: start;
        }

        .l-v-center {
            align-self: center;
        }

        .l-v-end {
            align-self: end;
        }
    }
}

.c-block-media-img {
    display: block;
}

.c-block-body {
    position: relative;

    // vertical spacing between body and media before side by side display kicks in
    @media all and (max-width: #{$screen-md - 1}) {
        &:first-child {
            margin-bottom: $v-grid-xs;
        }

        &:last-child {
            margin-top: $v-grid-xs;
        }

        .mzp-has-media-hide-on-sm & {
            margin-bottom: 0;
            margin-top: 0;
        }
    }
}

.c-block-media {
    position: relative;

    @media (max-width: #{$screen-md - 1px}) {
        .mzp-has-media-hide-on-sm & {
            display: none;
        }
    }

    // constraints on height or width of media
    @media all and (max-width: #{$screen-md - 1}) {
        // center image & constrain width
        &.l-media-constrain-on-sm {
            text-align: center;

            .c-block-media-img {
                margin: 0 auto;
                width: $content-sm;
            }
        }
    }
}

// --------------------------------------
// side by side layout, float based fall back

@media #{$mq-md} {
    .c-block-body {
        @include border-box;
        @include bidi(((float, left, right),));
        width: 50%;
        padding: 0 ($h-grid-lg * 0.5);

        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }

        .l-reversed & {
            @include bidi(((float, right, left),));
        }
    }

    .c-block-media {
        @include border-box;
        @include bidi(((float, right, left),));
        width: 50%;
        padding: 0 ($h-grid-lg * 0.5);

        .l-reversed & {
            @include bidi(((float, left, right),));
        }
    }
}

// --------------------------------------
// side by side layout, grid based

@media #{$mq-md} {
    @supports (display:grid) {
        .c-block-container {
            // grid is all start/end based we don't need bidi declarations for RTL support \o/
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 'body media';
            grid-column-gap: $h-grid-lg;

            .l-reversed > & {
                grid-template-areas: 'media body';
            }
        }

        .c-block-body,
        .c-block-media {
            .c-block-container & { // extra specificitly to over-ride the styles that make the float fall-back work
                float: none;
                min-width: 0; // because of https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
                padding: 0;
                width: auto;
            }
        }

        .c-block-body {
            grid-area: body;
            max-width: $content-sm;
        }

        .c-block-media {
            align-self: stretch;
            grid-area: media;

            .c-block-media-img {
                display: block;
                max-width: 100%;
            }
        }
    }
}

// --------------------------------------------------------------------------
// intro

.c-intro-download-alt {
    @include text-body-xs;
    color: $color-dark-gray-30;
    display: block;
    margin-top: $spacing-md;

    a:link,
    a:visited {
        color: inherit;
        text-decoration: none;
    }

    a:hover,
    a:active,
    a:focus {
        text-decoration: underline;
    }
}

// --------------------------------------------------------------------------
// releases
// different from card row of 3 because of behaviour at mq-md

.t-releases h2 {
    @include visually-hidden;
}

.t-releases ul {
    @include clearfix;
    margin: 0 auto;

    li {
        margin-bottom: $layout-lg;
        padding-top: $layout-md + $spacing-md;
        position: relative;

        .t-custom &:last-child {
            margin-bottom: 0;
        }
    }

    img {
        display: block;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        max-height: $layout-sm;
    }

    p {
        margin-bottom: 0;
    }

    @media #{$mq-md} {
        img {
            float: left;
            margin-left: 0;
            margin-right: $layout-sm;
        }
    }

    @media #{$mq-lg} {
        li {
            float: left;
            width: calc(33.3% - (#{$h-grid-lg} - #{math.div($h-grid-lg, 3)}));
            margin-bottom: 0;
            padding-top: 54px + $spacing-xl;

            &:nth-child(2n) {
                margin-left: $h-grid-lg;
                margin-right: $h-grid-lg;
            }
        }

        img {
            float: none;
            max-height: 54px;
        }

        .t-cursor img {
            max-height: 38px;
        }
    }
}

.c-notes {
    margin-bottom: 0;
    text-align: center;

    @media #{$mq-lg} {
        margin-top: $layout-sm;
        margin-bottom: $layout-sm * -1;
    }
}

// --------------------------------------------------------------------------
// highlights
// includes t-compare, t-block, t-everyone, and t-devices block components

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

    p {
        margin-bottom: $spacing-xl;
    }
}

// --------------------------------------

#protection-report {
    display: none;

    .state-firefox-desktop-70 & {
        display: block;
    }
}

// --------------------------------------

.t-devices .mobile-download-buttons li {
    display: inline-block;
    margin-right: $spacing-md;
}


// --------------------------------------------------------------------------
// customization

.t-custom {
    background-color: #F9F9FB;
}

.c-screen {
    position: relative;
    text-align: center;
    margin-bottom: $layout-sm;

    svg {
        display: block;
        width: $content-xl;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

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

// --------------------------------------------------------------------------

.t-free {
    .mzp-c-emphasis-box {
        @include clearfix;
    }
}

.c-free {
    text-align: center;

    img {
        margin: 0 auto;
    }

    h2, p {
        text-align: start;
    }

    @media #{$mq-md} {
        p {
            font-size: 20px;
        }
    }

    @media #{$mq-lg} {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: min-content 1fr;
        grid-column-gap: $h-grid-lg;

        .c-free-body {
            align-self: center;
        }

        p {
            font-size: 24px;
            margin-bottom: 0;
        }
    }


}

// --------------------------------------------------------------------------

.c-support {
    @include text-title-xs;
    background-color: $color-light-gray-10;
    display: block; // IE8
    font-weight: bold;
    padding: $spacing-lg;
    text-align: center;
}

// --------------------------------------------------------------------------
// mobile

.android main,
.ios main {
    @include flexbox;
    flex-direction: column;
}

#mobile-banner {
    order: -1;
}

.c-mobile {
    @include light-links;
    background-color: $color-violet-70;
    color: $color-white;
    position: relative;
    overflow-x: hidden;

    h2 {
        color: $color-white;
    }

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

    @media #{$mq-sm} {
        &::after {
            @include bidi((
                (left, 60%, right, auto),
                (margin-left, $h-grid-xs * 0.5, margin-left, 0),
            ));
            background-position: top center;
            background-repeat: no-repeat;
            border-radius: $border-radius-sm;
            bottom: $layout-lg;
            content: '';
            display: block;
            position: absolute;
            top: $layout-lg;
            width: 40%;

            &,
            .android & {
                @include at2x('/media/img/firefox/new/desktop/android.png', contain);
            }

            .ios & {
                @include at2x('/media/img/firefox/new/desktop/ios.png', contain);
            }
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-xs * 0.5, padding-left, 0),));
            @include border-box;
            max-width: 60%;
        }
    }

    @media #{$mq-md} {
        &::after {
            @include bidi((
                (left, 50%, right, auto),
                (margin-left, $h-grid-md * 0.5, margin-right, 0),
            ));
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-md * 0.5, padding-left, 0),));
            max-width: 50%;
        }
    }

    @media #{$mq-lg} {
        &::after {
            @include bidi(((margin-left, $h-grid-lg * 0.5, margin-right, 0),));
        }

        .c-mobile-text {
            @include bidi(((padding-right, $h-grid-lg * 0.5, padding-left, 0),));
        }
    }
}

.c-desktop a {
    @include text-title-xs;
    background-image: url('/media/img/firefox/new/desktop/mobile-arrow.svg');
    background-position: bottom center;
    background-repeat: no-repeat;
    color: $color-purple-50;
    display: block;
    font-weight: bold;
    padding: $spacing-md $h-grid-xs #{$spacing-lg + 64px};
    text-align: center;
    text-decoration: none;
}

// --------------------------------------------------------------------------
// scroll animation

@supports (animation-fill-mode: forwards) {
    .has-animate {
        opacity: 0;
        transform-origin: bottom center;
    }

    .is-animated {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-name: zoom;
    }

    @keyframes zoom {
        from {
            opacity: 0;
            transform: scaleX(0.8) scaleY(0.8);
        }

        to {
            opacity: 1;
            transform: scaleX(1) scaleY(1);
        }
    }
}