bedrock/media/css/careers/components/testimonials.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 '../utils' as cp;
@use 'sass:color';

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

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/modal';

.c-careers-testimonials {
    // Hide pull quotes section if JS is disabled
    &.no-js-hidden {
        .no-js & {
            @include hidden;
        }
    }

    blockquote {
        @include text-title-xs;

        span {
            background: $color-black;
            color: $color-white;
            line-height: 1.4;
        }
    }

    .c-careers-testimonials-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: $spacing-md;

        .c-careers-testimonial-item {
            padding: $spacing-xl + 15px $spacing-xl $spacing-xl $spacing-xl + 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &:nth-child(1) {
                background-color: cp.$blue-primary;

                &:hover {
                    background-color: color.scale(cp.$blue-primary, $alpha: -40%);
                }
            }

            &:nth-child(3) {
                background-color: color.scale(cp.$blue-primary, $alpha: -90%);

                &:hover {
                    background-color: color.scale(cp.$blue-primary, $alpha: -70%);
                }
            }

            &:nth-child(5) {
                background-color: color.scale(cp.$blue-primary, $alpha: -70%);

                &:hover {
                    background-color: color.scale(cp.$blue-primary, $alpha: -50%);
                }
            }

            &:nth-child(7) {
                background-color: color.scale(cp.$blue-primary, $alpha: -20%);

                &:hover {
                    background-color: color.scale(cp.$blue-primary, $alpha: -40%);
                }
            }

            &:nth-child(9) {
                background-color: color.scale(cp.$blue-primary, $alpha: -50%);

                &:hover {
                    background-color: color.scale(cp.$blue-primary, $alpha: -70%);
                }
            }

            a {
                color: $color-black;
                font-weight: 300;
                align-self: flex-start;
            }

            q {
                @include font-size(28px);
                color: $color-black;
                font-family: var(--title-font-family);
                font-weight: bold;
                margin-bottom: $spacing-md;
                position: relative;

                &::before {
                    @include text-title-md;
                    content: '“';
                    position: absolute;
                    top: -15px;
                    left: -20px;
                    color: $color-black;
                    font-weight: bold;
                }

                &::after {
                    @include text-title-md;
                    content: '”';
                    position: absolute;
                    bottom: 0;
                    color: $color-black;
                    font-weight: bold;
                }
            }

            &:hover {
                cursor: pointer;
            }
        }

        .c-careers-testimonial-image {
            display: none;
        }

        @media #{$mq-md} {
            grid-template-columns: 1fr 1fr;
            gap: $spacing-md;

            .c-careers-testimonial-item {
                q {
                    @include font-size(26px);
                }

                &:last-child {
                    grid-column: span 2;
                }
            }

            .c-careers-testimonial-image {
                display: block;
                background-size: cover;
                background-position: top;
                background-repeat: no-repeat;

                &.one {
                    background-image: url('/media/img/careers/testimonials/perla.jpg');
                }

                &.two {
                    background-image: url('/media/img/careers/testimonials/lauren.jpg');
                }

                &.three {
                    background-image: url('/media/img/careers/testimonials/sunil.jpg');
                }

                &.four {
                    background-image: url('/media/img/careers/testimonials/tom.jpg');
                }

                @media #{$mq-high-res} {
                    &.perla {
                        background-image: url('/media/img/careers/testimonials/perla-high-res.jpg');
                    }

                    &.two {
                        background-image: url('/media/img/careers/testimonials/lauren-high-res.jpg');
                    }

                    &.three {
                        background-image: url('/media/img/careers/testimonials/sunil-high-res.jpg');
                    }

                    &.four {
                        background-image: url('/media/img/careers/testimonials/tom-high-res.jpg');
                    }
                }
            }
        }

        @media #{$mq-lg} {
            grid-template-columns: repeat(3, 1fr);
            row-gap: $spacing-lg;

            .c-careers-testimonial-item {
                // won't work for legacy browsers (won't break anything), but will help keep the sqaure shape on newer browsers
                aspect-ratio: 1/1;

                &:last-child {
                    grid-column: initial;
                }
            }
        }
    }
}

// Hide full testimonials if JS is enabled
.c-careers-full-testimonials {
    .js & {
        @include hidden;
    }
}

.mzp-c-modal-inner.c-careers-full-testimonial-wrapper {
    background-color: $color-white;

    .c-careers-testimonials-modal {
        width: 100%;

        blockquote {
            @include text-title-2xs;
            border: 0;
            color: $color-black;
            font-weight: 400;

            .c-careers-testimonial-quote {
                position: relative;

                p:nth-of-type(1n) {
                    &::before {
                        @include text-title-md;
                        content: '“';
                        position: absolute;
                        top: -15px;
                        left: -20px;
                        color: $color-dark-gray-20;
                        font-weight: bold;
                    }
                }

                p:last-of-type {
                    &::after {
                        @include text-title-md;
                        content: '”';
                        position: absolute;
                        bottom: -15px;
                        color: $color-dark-gray-20;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

// Styling modal citation section
.c-testimonials-citation {
    border-left: 4px solid cp.$blue-primary;
    padding-left: $spacing-lg;

    cite {
        @include text-title-xs;
        font-weight: 700;
        font-style: normal;
        color: $color-dark-gray-20;

        &::before {
            content: '';
        }
    }

    p {
        @include text-body-sm;
        color: $color-dark-gray-20;
        font-family: var(--body-font-family);
        font-weight: 700;
        margin-bottom: 0;
    }
}

// styling modal controls
.c-careers-full-testimonial-wrapper {
    .mzp-c-modal-close {
        background: $color-black;
        border-radius: 100%;

        button {
            cursor: pointer;
        }
    }

    .c-modal-next {
        @extend .mzp-c-modal-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder  */
        background: cp.$blue-primary;
        right: 3.75rem;

        .hide-next & {
            display: none;
        }

        .c-modal-button-next {
            background-image: url('/media/protocol/img/icons/arrow-right.svg');
        }
    }

    .c-modal-prev {
        @extend .mzp-c-modal-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder  */
        background: cp.$blue-primary;
        right: 7.1rem;

        .hide-next & {
            right: 3.75rem;
        }

        .hide-prev & {
            display: none;
        }

        .c-modal-button-prev {
            background-image: url('/media/protocol/img/icons/arrow-left.svg');
        }
    }

    .c-modal-button-next,
    .c-modal-button-prev {
        @extend .mzp-c-modal-button-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
    }
}