/* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ @import "./master-tokens.css"; @import "./typography.css"; @import "./themes.css"; @import "./link.css"; @import "./button.css"; :root { /* border-radius * * source: aem-fe-evolution-tokens * * --corners--button is em-based because it's * used for elements containing text and designed * to scale relatively if text size changes. * * --corners--round is a value we used often * to render a circular shape. */ --corners--button: 2.5em; --corners--round: 50%; /* colors */ --background-color: var(--color-bg-primary); --light-color: var(--color-bg-secondary); --dark-color: var(--color-text-secondary); --text-color: var(--color-text-primary); --link-color: var(--color-brand-primary); --link-hover-color: var(--color-brand-secondary); /* fonts */ --body-font-family: var(--typefamily-primary), plus-jakarta-sans-fallback, arial, helvetica, sans-serif; --heading-font-family: var(--typefamily-primary), plus-jakarta-sans-fallback, arial, helvetica, sans-serif; /* body sizes */ --body-font-size-m: 22px; --body-font-size-s: 19px; --body-font-size-xs: 17px; /* nav height */ --nav-height: 64px; /* --section-max-width: 1440px; */ --section-max-width: 1312px; --section-gutter-inline: var(--space--x8); --section-padding-block: var(--space--x12); /* max width variables */ --readable-max-width: 864px; --content-max-width: 1440px; --content-grid-max-width: 1920px; --margin-inline-auto: 0 auto; } /* fallback fonts */ @font-face { font-family: plus-jakarta-sans-fallback; size-adjust: 91%; ascent-override: 104%; descent-override: 22%; line-gap-override: 0%; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); } @media (width >= 600px) { :root { --section-padding-block: var(--space--x15); } } @media (width >=900px) { :root { /* body sizes */ --body-font-size-m: 18px; --body-font-size-s: 16px; --body-font-size-xs: 14px; /* gutter margins */ --section-gutter-inline: var(--space--x16); } } /* Some base rules are needed for this project. Setting * scrollbar-width and scroll-behavior at root on */ html { scrollbar-width: thin; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } } /* Disable ligatures on */ body { display: none; font-family: var(--body-font-family); font-size: var(--typesize-default); font-synthesis: none; font-feature-settings: normal; font-variant-ligatures: none; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); margin: 0; } body.appear { display: block; } header { height: auto; position: sticky; top: 0; z-index: 11; } header .header, footer .footer { visibility: hidden; } main { position: relative; } body.configuration main { display: none; } header .header[data-block-status="loaded"], footer .footer[data-block-status="loaded"] { visibility: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0.8em; margin-bottom: 0.25em; font-family: var(--heading-font-family); font-weight: 600; line-height: 1.25; scroll-margin: 40px; } p, dl, ol, ul, pre, blockquote { margin-top: 0.8em; margin-bottom: 0.25em; } code, pre { font-size: var(--body-font-size-s); font-family: var(--typefamily-primary); } pre { padding: 16px; border-radius: 8px; background-color: var(--light-color); overflow-x: auto; white-space: pre; } /* Emphasis, italics */ em, i { font-style: italic; } /* main>div { margin: 40px 16px; } */ input, textarea, select, button { font: inherit; } strong { font-weight: var(--typeweight--semibold); } main img { max-width: 100%; width: auto; height: auto; } .icon { display: inline-block; height: 24px; width: 24px; } .icon img { height: 100%; width: 100%; } .section-header { position: relative; max-width: 860px; margin: 0 auto; padding: 0; text-align: center; } .section-header-title { margin: 0 0 var(--space--x5); color: var(--color-theme-text-primary); font-size: clamp(2.125rem, 2.75vw, 3.25rem); font-weight: 500; line-height: 120%; letter-spacing: 0%; } .section-header-description { max-width: 900px; margin: 0 auto; margin-bottom: 2.25rem; color: var(--color-theme-text-secondary); font-size: clamp(1rem, 1rem, 1rem); font-weight: 400; line-height: 1.6; } .section.full-width, .section.two-columns, .section.three-columns, .section.four-columns { background-color: var(--color-theme-background); padding-block: var(--space--x12); padding-inline: var(--space--x8); @media (width >= 600px) { padding-block: var(--space--x15); } @media (width >= 900px) { padding-inline: var(--space--x16); } } .section[class*="theme-"] { background-color: var(--color-theme-background); } .section.full-width > .section-header, .section.two-columns > .section-header, .section.three-columns > .section-header, .section.four-columns > .section-header { padding: var(--space--x12) var(--space--x8) 0; @media (width >= 600px) { padding-top: var(--space--x15); } @media (width >= 900px) { padding-inline: var(--space--x16); } } .section.full-width .section-header .section-header-title, .section.two-columns .section-header .section-header-title, .section.three-columns .section-header .section-header-title, .section.four-columns .section-header .section-header-title { color: var(--color-theme-text-primary); } .section.full-width .section-header .section-header-description, .section.two-columns .section-header .section-header-description, .section.three-columns .section-header .section-header-description, .section.four-columns .section-header .section-header-description { color: var(--color-theme-text-secondary); } .section[class*="theme-"] > .section-header .section-header-description { color: var(--color-theme-text-secondary); } .section.full-width > .section-layout-wrapper, .section.two-columns > .section-layout-wrapper, .section.three-columns > .section-layout-wrapper, .section.four-columns > .section-layout-wrapper { display: grid; gap: 1.5rem; box-sizing: border-box; max-width: 1440px; margin-inline: auto; } .section.full-width > .section-layout-wrapper { grid-template-columns: 1fr; } .section.two-columns > .section-layout-wrapper { grid-template-columns: repeat(2, 1fr); } .section.three-columns > .section-layout-wrapper { grid-template-columns: repeat(3, 1fr); } .section.four-columns > .section-layout-wrapper { grid-template-columns: repeat(4, 1fr); } /* * Section header (Block Title + Block Description) injected by * decorateSectionLayouts() in scripts.js. Spans all columns. */ .section.two-columns > .section-layout-wrapper > .section-header, .section.three-columns > .section-layout-wrapper > .section-header, .section.four-columns > .section-layout-wrapper > .section-header { grid-column: 1 / -1; } .section-header-description :is(p, li) { color: inherit; } .section-header-description a { color: var(--color-theme-text-link); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Collapse to single column on small screens */ @media (width <=599px) { .section.two-columns > .section-layout-wrapper, .section.three-columns > .section-layout-wrapper, .section.four-columns > .section-layout-wrapper { grid-template-columns: 1fr; } } /* Two-column max on tablets */ @media (width >=600px) and (width <=899px) { .section-header-description { margin-bottom: 3rem; } .section.three-columns > .section-layout-wrapper, .section.four-columns > .section-layout-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (width >=900px) { .section.two-columns > .section-layout-wrapper, .section.three-columns > .section-layout-wrapper, .section.four-columns > .section-layout-wrapper { gap: 2rem; } .section-header-description { margin-bottom: var(--space--x12); } } /* Global wrapper reset + themed block background */ main > .section { .grid-gutters { background-color: var(--color-theme-background); &:not(.grid-gutters--full-bleed) { padding-block: var(--section-padding-block); padding-inline: var(--section-gutter-inline); } .grid-width { margin-inline: auto; &:not(.grid-width--full-bleed) { max-width: var(--section-max-width); margin-inline: auto; } /* tabs section when blocks are inside */ .grid-gutters { padding: 0; } } } } main > .section > [class$="-wrapper"] { max-width: none; margin: 0; padding: 0; &.default-content-wrapper { background-color: var(--color-theme-background); padding-block: var(--space--x12); padding-inline: var(--space--x8); @media (width >= 600px) { padding-block: var(--space--x15); } @media (width >= 900px) { padding-inline: var(--space--x16); } /* Width constraints are opt-in via explicit utility classes from block decoration. */ & > .block.grid-gutters > .grid-width { max-width: var(--section-max-width); margin-inline: auto; } } } /* main > .section { > [class$="-wrapper"] > .block:not( .hero-basic, .hero-promotions, .logo-strip, .promo-highlight, .scroll-story, .block-quote, .full-bleed-asset ), .section-layout-wrapper > [class$="-wrapper"] > .block:not( .hero-basic, .hero-promotions, .logo-strip, .promo-highlight, .scroll-story, .block-quote, .full-bleed-asset ) { background-color: var(--color-theme-background); padding-block: var(--space--x12); padding-inline: var(--space--x8); @media (width >= 600px) { padding-block: var(--space--x15); } @media (width >= 900px) { padding-inline: var(--space--x16); } & > * { max-width: 1440px; margin-inline: auto; } } &[class*="-columns"] { > .section-layout-wrapper > [class$="-wrapper"] > .block:not( .hero-basic, .hero-promotions, .logo-strip, .promo-highlight, .scroll-story ) { padding: 0; } } } */