bedrock/media/css/protocol/protocol-mozilla-2024.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/.

// These are general styles for elements/components that occur on every page.
// Individual pages may include additional component styles as needed.
@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'mozilla', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
@use '~@mozilla-protocol/core/protocol/css/includes/themes';
@use '~@mozilla-protocol/core/protocol/css/components/forms/form';

// Base elements - general HTML elements
@import '~@mozilla-protocol/core/protocol/css/base/elements';

// Base includes - animations
@import '~@mozilla-protocol/core/protocol/css/base/includes';

// Utility includes
@import '~@mozilla-protocol/core/protocol/css/base/utilities/backgrounds';
@import '~@mozilla-protocol/core/protocol/css/base/utilities/titles';

// Global components
@import '~@mozilla-protocol/core/protocol/css/components/button';
@import 'components/download-button';

// Consent banner
@import '~@mozmeao/consent-banner/styles';

// Custom global components for nav and footer
// These will later be backported to Protocol
@import 'components/sub-navigation';

// Mozilla 2024 brand variables
@import '../m24/vars/color';
@import '../m24/vars/fonts';
@import '../m24/vars/text';


// Temporary styling until the newsletter component is updated in Protocol
// https://github.com/mozilla/protocol/issues/578

.mzp-c-newsletter-subtitle {
    @include text-title-xs;
}

.mzp-c-newsletter-desc {
    @include text-body-md;
}

.mzp-c-newsletter-details legend {
    font-family: var(--body-font-family);
}

#newsletter-submit + .mzp-c-fieldnote {
    @include text-body-xs;
    margin: 0 auto;
    max-width: 30em;
}

// style classes automatically added by python to match Protocol form error styles
.errorlist {
    @include white-links;
    background-color: form.$form-red;
    border-radius: form.$field-border-radius;
    color: $color-white;
    padding: $spacing-sm;
    margin-bottom: $spacing-xl;
}

.error-msg {
    @include light-links;
    background-color: form.$form-red;
    border-radius: form.$field-border-radius;
    color: $color-white;
    padding: $spacing-sm;
    margin-bottom: $spacing-xl;
}

// hide <template> elements in the DOM.
template {
    display: none !important; /* stylelint-disable-line declaration-no-important */
}

// temporary override for Mozilla Monitor word mark
.mzp-c-wordmark.t-product-mozilla-monitor {
    background-image: url('/media/img/logos/mozilla/monitor/wordmark.svg');
}

/* ----------------------------------------------------------------------------- */
// Mozilla 2024 brand theme
:root {
    // fonts
    /* stylelint-disable value-keyword-case  */
    --body-font-family: "Mozilla Text", Inter, Arial, X-LocaleSpecific, sans-serif;
    --button-font-family: "Mozilla Text", Inter, Arial, X-LocaleSpecific, sans-serif;
    --title-font-family: "Mozilla Headline", Rockwell, "Roboto Slab", X-LocaleSpecific, serif;
    /* stylelint-enable */

    // colors
    --background-color-tertiary-inverse: #{$m24-color-dark-gray};
    --background-color-tertiary: #{$m24-color-light-gray};
    --background-color-secondary-inverse: #{$m24-color-dark-gray};
    --background-color-secondary: #{$m24-color-light-gray};
    --background-color-inverse: #{$m24-color-black};
    --background-color: #{$m24-color-white};
    --body-text-color-secondary-inverse: #{$m24-color-light-gray};
    --body-text-color-secondary: #{$m24-color-dark-gray};
    --body-text-color-inverse: #{$m24-color-white};
    --body-text-color: #{$m24-color-black};
    --link-color-hover-inverse: #{$m24-color-light-green};
    --link-color-hover: #{$m24-color-dark-green};
    --link-color-inverse: #{$m24-color-white};
    --link-color-visited-hover-inverse: #{$m24-color-white};
    --link-color-visited-hover: #{$m24-color-dark-green};
    --link-color-visited-inverse: #{$m24-color-light-gray};
    --link-color-visited: #{$m24-color-dark-gray};
    --link-color: #{$m24-color-black};
    --title-text-color-inverse: #{$m24-color-white};
    --title-text-color: #{$m24-color-black};

    // type scale
    --title-2xl-size: 8rem;
    --title-2xl-line-height: 1.1;
    --title-xl-size: 5rem;
    --title-xl-line-height: 1.1;
    --title-lg-size: 3rem;
    --title-lg-line-height: 1.1;
    --title-md-size: 2.5rem;
    --title-md-line-height: 1.1;
    --title-sm-size: 2rem;
    --title-sm-line-height: 1.1;
    --title-xs-size: 1.75rem;
    --title-xs-line-height: 1.1;
    --title-2xs-size: 1.5rem;
    --title-2xs-line-height: 1.1;
    --title-3xs-size: 1.25rem;
    --title-3xs-line-height: 1.1;
    --body-xl-size: 1.313rem;
    --body-lg-size: 1.125rem;
    --body-md-size: 1rem;
    --body-sm-size: 0.875rem;
    --body-xs-size: 0.75rem;
    --body-line-height: 1.4;
}

.mzp-t-dark {
    color: var(--body-text-color-inverse);

    h1, h2, h3, h4, h5, h6 {
        color: var(--title-text-color-inverse);
    }
}

button,
input,
select,
optgroup,
textarea {
    font-family: var(--body-font-family);
}

.mzp-c-card .mzp-c-card-content .mzp-c-card-tag {
    font-family: var(--body-font-family);
}

// Keep the old link colors on Firefox-branded pages
body.mzp-t-firefox {
    --link-color-hover-inverse: #{$color-blue-05};
    --link-color-hover: #{$color-link-hover};
    --link-color-inverse: #{$color-blue-10};
    --link-color-visited-hover-inverse: #{$color-violet-05};
    --link-color-visited-hover: #{$color-link-hover};
    --link-color-visited-inverse: #{$color-violet-10};
    --link-color-visited: #{$color-link-visited};
    --link-color: #{$color-link};
}