/* Spacing */ $s-0 : 0; $s-1 : 0.25rem; $s-2 : 0.5rem; $s-3 : 0.75rem; $s-4 : 1rem; $s-5 : 1.25rem; $s-6 : 1.5rem; $s-7 : 2rem; $s-8 : 2.5rem; $s-9 : 3rem; $s-10 : 4rem; $s-11 : 5rem; $s-12 : 6rem; $s-13 : 7.5rem; $s-14 : 9rem; $s-15 : 11rem; $s-16 : 13rem; $s-17 : 15.5rem; $s-18 : 18rem; :root { /* Line Height */ --global--line-height-reset: 1; /* Content widths and grid */ --global--default-content-width: 43.5rem; --global--10col-nogap-content-width: 74.5rem; --global--wide-content-width: 90rem; // 1440px --global--max-content-width-nogap: 90rem; // 1440px --global--max-content-width: 93rem; // 1488px --global--grid-gap: #{2 * $s-4}; /* Border radius */ --global--border-radius-xxs: 0.625rem; --global--border-radius-xs: 0.938rem; --global--border-radius-s: 1.25rem; --global--border-radius-m: 1.563rem; --global--border-radius-l: 1.875rem; --global--border-radius-xl: 2.5rem; --global--border-radius-xxl: 3.125rem; --global--border-radius-xxxl: 3.75rem; --global--border-radius-xxxxl: 4.375rem; --global--border-radius-round: 6.25em; } /* SM breakpoint */ @media only screen and (min-width: 48em) { :root { /* Border radius */ --global--border-radius-xxs: 0.625rem; --global--border-radius-xs: 1.25rem; --global--border-radius-s: 1.875rem; --global--border-radius-m: 2.5rem; --global--border-radius-l: 3.125rem; --global--border-radius-xl: 3.75rem; --global--border-radius-xxl: 4.375rem; --global--border-radius-xxxl: 5rem; --global--border-radius-xxxxl: 5.625rem; } } /* Custom Global styles */ body { /* Global Heading Font sizes */ --global--font-size--h12: 5.125rem; --global--font-size--h11: 4.375rem; --global--font-size--h10: 3.75rem; --global--font-size--h9: 3.25rem; --global--font-size--h8: 2.875rem; --global--font-size--h7: 2.375rem; --global--font-size--h6: 2.125rem; --global--font-size--h5: 1.875rem; --global--font-size--h4: 1.5rem; --global--font-size--h3: 1.25rem; --global--font-size--h2: 1.125rem; --global--font-size--h1: 1rem; /* Global body font sizes */ --global--font-size--body-xxs: 0.75rem; --global--font-size--body-xs: 0.875rem; --global--font-size--body-s: 1rem; --global--font-size--body-m: 1.125rem; --global--font-size--body-l: 1.25rem; --global--font-size--body-xl: 1.375rem; --global--font-size--body-xxl: 1.5rem; --global--font-size--body-xxxl: 1.625rem; --global--font-size--body-xxxxl: 1.875rem; /* Default content padding */ --global--content--padding--left: 1rem; --global--content--padding--right: 1rem; // SM breakpoint @media only screen and (min-width: 48em) { --global--font-size--h12: 8.875rem; --global--font-size--h11: 10.375rem; --global--font-size--h10: 6rem; --global--font-size--h9: 4.875rem; --global--font-size--h8: 4rem; --global--font-size--h7: 3.25rem; --global--font-size--h6: 2.75rem; --global--font-size--h5: 2.25rem; --global--font-size--h4: 1.75rem; --global--font-size--body-xl: 1.5rem; --global--font-size--body-xxl: 1.75rem; --global--font-size--body-xxxl: 2rem; --global--font-size--body-xxxxl: 2.25rem; /* Default content padding */ --global--content--padding--left: 2rem; --global--content--padding--right: 2rem; } // MD breakpoint @media only screen and (min-width: 64em) { --global--font-size--h12: 15.125rem; --global--font-size--h11: 11.75rem; --global--font-size--h10: 9.25rem; --global--font-size--h9: 7.25rem; --global--font-size--h8: 5.625rem; --global--font-size--h7: 4.375rem; --global--font-size--h6: 3.375rem; --global--font-size--h5: 2.625rem; --global--font-size--h4: 1.875rem; --global--font-size--h3: 1.375rem; --global--font-size--body-l: 1.375rem; --global--font-size--body-xl: 1.625rem; --global--font-size--body-xxl: 1.875rem; --global--font-size--body-xxxl: 2.25rem; --global--font-size--body-xxxxl: 2.625rem; } // LG breakpoint @media only screen and (min-width: 80em) { --global--font-size--h12: 25rem; --global--font-size--h11: 18.625rem; --global--font-size--h10: 13.875rem; --global--font-size--h9: 10.375rem; --global--font-size--h8: 7.75rem; --global--font-size--h7: 5.75rem; --global--font-size--h6: 4.375rem; --global--font-size--h5: 3rem; --global--font-size--h4: 2.125rem; --global--font-size--h3: 1.5rem; --global--font-size--h2: 1.25rem; --global--font-size--body-m: 1.25rem; --global--font-size--body-l: 1.5rem; --global--font-size--body-xl: 1.75rem; --global--font-size--body-xxl: 2.125rem; --global--font-size--body-xxxl: 2.5rem; --global--font-size--body-xxxxl: 3rem; /* Default content padding */ --global--content--padding--left: 3rem; --global--content--padding--right: 3rem; } /* Theme Heading font sizes */ --font-size--h12: var(--global--font-size--h12); --font-size--h11: var(--global--font-size--h11); --font-size--h10: var(--global--font-size--h10); --font-size--h9: var(--global--font-size--h9); --font-size--h8: var(--global--font-size--h8); --font-size--h7: var(--global--font-size--h7); --font-size--h6: var(--global--font-size--h6); --font-size--h5: var(--global--font-size--h5); --font-size--h4: var(--global--font-size--h4); --font-size--h3: var(--global--font-size--h3); --font-size--h2: var(--global--font-size--h2); --font-size--h1: var(--global--font-size--h1); /* Theme Body font sizes */ --font-size--body-xxs: var(--global--font-size--body-xxs); --font-size--body-xs: var(--global--font-size--body-xs); --font-size--body-s: var(--global--font-size--body-s); --font-size--body-m: var(--global--font-size--body-m); --font-size--body-l: var(--global--font-size--body-l); --font-size--body-xl: var(--global--font-size--body-xl); --font-size--body-xxl: var(--global--font-size--body-xxl); --font-size--body-xxxl: var(--global--font-size--body-xxxl); --font-size--body-xxxxl: var(--global--font-size--body-xxxxl); }