diff --git a/css/styles.css b/css/styles.css
index 8e645986f3c7973e378c3dbec54f818708c38b17..a2683658916bed1a8f180eb881f5ceabf8dbdd38 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -550,7 +550,7 @@ var {
html {
box-sizing: border-box;
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 100%;
line-height: 1.45;
min-height: 100%;
@@ -561,7 +561,7 @@ html {
body {
background-color: #fff;
- color: #212121;
+ color: #000;
margin: 0;
padding: 0;
word-wrap: break-word; }
@@ -584,7 +584,7 @@ iframe {
h1, h2, h3, h4, h5, h6 {
color: inherit;
- font-weight: 700;
+ font-weight: 600;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
@@ -602,57 +602,57 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 1em; }
h1 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 3rem;
- font-weight: 700;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 2.566rem;
+ font-weight: 400;
line-height: 1.1; }
@media (max-width: 43.75em) {
h1 {
- font-size: 2rem; } }
+ font-size: 1.602rem; } }
h2 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 2.5rem;
- font-weight: 700;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 1.802rem;
+ font-weight: 400;
line-height: 1.1; }
@media (max-width: 43.75em) {
h2 {
- font-size: 1.5rem; } }
+ font-size: 1.424rem; } }
h3 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 2rem;
- font-weight: 700;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 1.424rem;
+ font-weight: 400;
line-height: 1.1; }
@media (max-width: 43.75em) {
h3 {
- font-size: 1.25rem; } }
+ font-size: 1.266rem; } }
h4 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 1.5rem;
- font-weight: 700;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 1.266rem;
+ font-weight: 400;
line-height: 1.45; }
@media (max-width: 43.75em) {
h4 {
- font-size: 1rem; } }
+ font-size: 1.125rem; } }
h5 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 1rem;
- font-weight: 700;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 1.125rem;
+ font-weight: 400;
line-height: 1.45; }
h6 {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 0.75rem;
- font-weight: 600;
+ color: #000;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
letter-spacing: -0.04em;
line-height: 1.7;
text-transform: uppercase; }
@@ -749,7 +749,7 @@ a {
text-decoration: none; }
a[href]::after {
content: " <" attr(href) ">";
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 10pt;
font-weight: normal;
text-transform: lowercase; }
@@ -770,9 +770,9 @@ abbr:hover {
content: " (" attr(title) ")"; } }
cite {
- color: #5b616b;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 0.75rem;
+ color: #757575;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+ font-size: 1rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.02em;
@@ -783,7 +783,7 @@ dfn {
mark {
background: #ff0;
- color: #212121; }
+ color: #000; }
small {
font-size: 75%; }
@@ -802,7 +802,7 @@ pre {
page-break-inside: avoid; } }
hr {
- border: 1px solid #aeb0b5;
+ border: 1px solid #A2A2A2;
box-sizing: content-box;
height: 0;
margin: 1.5rem 0;
@@ -855,22 +855,22 @@ table {
td {
background-color: #fff;
- border: 1px solid #5b616b;
+ border: 1px solid #757575;
padding: 1rem; }
tfoot td,
tfoot th {
- background-color: #f1f1f1; }
+ background-color: #eee; }
th {
background-color: #fff;
- border: 1px solid #5b616b;
+ border: 1px solid #757575;
padding: 1rem;
text-align: left; }
thead td,
thead th {
- background-color: #f1f1f1; }
+ background-color: #eee; }
@media print {
thead {
@@ -902,7 +902,7 @@ legend {
white-space: normal; }
optgroup {
- font-weight: 700; }
+ font-weight: 600; }
textarea {
overflow: auto; }
@@ -946,7 +946,7 @@ svg:not(:root) {
width: auto; }
.uw-input--grey {
- background-color: #757575;
+ background-color: #DFDFDF;
border: 0;
color: #fff;
font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
@@ -955,7 +955,7 @@ svg:not(:root) {
text-transform: uppercase;
width: 100%; }
.uw-input--grey:hover {
- background-color: #eee;
+ background-color: #fafafa;
color: #000; }
.breadcrumb__title, .readmore-link__accessibility-description {
@@ -1532,7 +1532,7 @@ ul.toolbar-menu {
margin-bottom: 0; }
.uw-blockquote {
- background-color: #eee;
+ background-color: #fafafa;
color: #000; }
.uw-blockquote__wrapper {
display: block;
@@ -1584,7 +1584,7 @@ ul.toolbar-menu {
.breadcrumb {
background-color: #112E51;
color: #fff;
- font-size: 0.75rem;
+ font-size: 1rem;
margin: 1rem 0;
min-height: 2.5rem;
padding-top: 1rem; }
@@ -1605,7 +1605,7 @@ ul.toolbar-menu {
.breadcrumb__item {
margin-right: 0.75em; }
.breadcrumb__item::after {
- color: #f1f1f1;
+ color: #eee;
content: '/';
margin-left: 0.75em; }
.breadcrumb__item:last-child::after {
@@ -1620,15 +1620,15 @@ ul.toolbar-menu {
.breadcrumb__list .breadcrumb__item:nth-last-child(2)::after {
display: none; }
.breadcrumb__list .breadcrumb__item:nth-last-child(2)::before {
- color: #f1f1f1;
+ color: #eee;
content: '<';
margin-right: 0.75em; } }
.breadcrumb__link {
- color: #aeb0b5;
+ color: #A2A2A2;
text-decoration: none; }
.breadcrumb__link:visited {
- color: #aeb0b5; }
+ color: #A2A2A2; }
.breadcrumb__link:hover, .breadcrumb__link:focus {
color: #fff; }
.breadcrumb__link:active {
@@ -1641,11 +1641,11 @@ ul.toolbar-menu {
color: #fff;
cursor: pointer;
display: inline-block;
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
- font-weight: 700;
+ font-weight: 600;
line-height: 1.45;
padding: 0.5rem 1rem;
text-align: center;
@@ -1663,8 +1663,8 @@ ul.toolbar-menu {
background-color: #112E51;
color: #fff; }
.button[disabled] {
- background-color: #f1f1f1;
- color: #aeb0b5;
+ background-color: #eee;
+ color: #A2A2A2;
cursor: default;
pointer-events: none; }
.button + .button {
@@ -1690,11 +1690,11 @@ ul.toolbar-menu {
color: #fff;
cursor: pointer;
display: inline-block;
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
- font-weight: 700;
+ font-weight: 600;
line-height: 1.45;
padding: 0.5rem 1rem;
text-align: center;
@@ -1711,17 +1711,17 @@ ul.toolbar-menu {
background-color: #046b99;
color: #fff; }
.button--secondary[disabled] {
- background-color: #f1f1f1;
- color: #aeb0b5;
+ background-color: #eee;
+ color: #A2A2A2;
cursor: default;
pointer-events: none; }
.button--large {
- font-size: 1.25rem;
+ font-size: 1.266rem;
padding: 1rem 2.5rem; }
.button--small {
- font-size: 0.75rem;
+ font-size: 1rem;
padding: 0.25rem 0.5rem; }
.uw-cta .neutral .uw-cta__text--big {
@@ -1887,18 +1887,18 @@ ul.toolbar-menu {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.card__date {
- font-size: 0.75rem; }
+ font-size: 1rem; }
.card__title {
- font-size: 1.5rem; }
+ font-size: 1.424rem; }
.card__title a {
- color: #212121; }
+ color: #000; }
.card__title a:visited {
- color: #212121; }
+ color: #000; }
.card__title a:hover, .card__title a:focus {
- color: #5b616b; }
+ color: #757575; }
.card__title a:active {
- color: #5b616b; }
+ color: #757575; }
.card__body {
display: flex;
@@ -1909,7 +1909,7 @@ ul.toolbar-menu {
margin-bottom: 0; }
.card__date {
- color: #5b616b;
+ color: #757575;
margin-bottom: 1rem; }
.card__content {
@@ -1947,7 +1947,7 @@ ul.toolbar-menu {
.card--feature {
flex-direction: row; }
.card--feature .card__title {
- font-size: 2rem; }
+ font-size: 1.602rem; }
.card--feature .card__body {
max-width: 600px;
padding: 1.5rem 2vw 0; }
@@ -2102,13 +2102,13 @@ details.details {
.details__summary {
background-image: url("../images/plus.svg");
- background-color: #f1f1f1;
+ background-color: #eee;
background-position: right 1.5rem center;
background-repeat: no-repeat;
background-size: 0.8125rem;
cursor: pointer;
display: block;
- font-weight: 700;
+ font-weight: 600;
line-height: 1;
outline: 0;
padding: 0.9375rem 3.4375rem 0.9375rem 1.5rem;
@@ -2120,7 +2120,7 @@ details.details {
[open] > .details__summary {
background-image: url("../images/minus.svg"); }
.details__summary:hover {
- background-color: #aeb0b5; }
+ background-color: #A2A2A2; }
.details__summary:focus {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.details__summary::-webkit-details-marker {
@@ -2134,15 +2134,15 @@ details.details {
.details__content {
background: #fff;
- border: 3px solid #f1f1f1;
+ border: 3px solid #eee;
border-top: 0;
padding: 1.5rem; }
.details__content > :last-child {
margin-bottom: 0; }
.details__description {
- color: #212121;
- font-size: 1rem;
+ color: #000;
+ font-size: 1.125rem;
margin-bottom: 1rem; }
.details__description > :last-child {
margin-bottom: 0; }
@@ -2194,11 +2194,11 @@ details.details {
color: #fff;
cursor: pointer;
display: inline-block;
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
- font-weight: 700;
+ font-weight: 600;
line-height: 1.45;
padding: 0.5rem 1rem;
text-align: center;
@@ -2225,8 +2225,8 @@ details.details {
background-color: #112E51;
color: #fff; }
.dropbutton__toggle-button[disabled] {
- background-color: #f1f1f1;
- color: #aeb0b5;
+ background-color: #eee;
+ color: #A2A2A2;
cursor: default;
pointer-events: none; }
@@ -2257,8 +2257,8 @@ details.details {
grid-template-columns: 50% 50%; }
.uw-expand-collapse__button {
- background-color: #eee;
- color: #f1f1f1;
+ background-color: #fafafa;
+ color: #eee;
font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
font-size: 1.125rem;
letter-spacing: 0.055rem;
@@ -2268,15 +2268,15 @@ details.details {
text-transform: uppercase;
width: 100%; }
.uw-expand-collapse__button:hover {
- background-color: #f1f1f1;
- color: #eee; }
+ background-color: #eee;
+ color: #fafafa; }
.uw-expand-collapse__button--controls {
text-align: center; }
.uw-expand-collapse__button--title:hover::after {
- border: solid #eee;
+ border: solid #fafafa;
border-width: 0 3px 3px 0; }
.uw-expand-collapse__button--title::after {
- border: solid #f1f1f1;
+ border: solid #eee;
border-width: 0 3px 3px 0;
content: '';
display: inline-block;
@@ -2369,7 +2369,7 @@ details.details {
.uw-ff--with-bubbles .owl-item:first-child {
margin-left: 0; }
.uw-ff--with-bubbles .owl-item:nth-child(odd)::after {
- border-bottom: 1.5rem solid #eee;
+ border-bottom: 1.5rem solid #fafafa;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
content: '';
@@ -2382,7 +2382,7 @@ details.details {
.uw-ff--with-bubbles .owl-item:nth-child(even)::after {
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
- border-top: 1.5rem solid #eee;
+ border-top: 1.5rem solid #fafafa;
bottom: -1.25rem;
content: '';
height: 0;
@@ -2409,7 +2409,7 @@ details.details {
width: 100%; }
.uw-ff__fact {
- background-color: #eee;
+ background-color: #fafafa;
border-radius: 13px;
clear: both;
display: block;
@@ -2455,8 +2455,8 @@ details.details {
.field__label {
display: block;
- font-size: 1rem;
- font-weight: 700; }
+ font-size: 1.125rem;
+ font-weight: 600; }
.field__label.is-inline {
display: inline-block;
margin-right: 0.1em; }
@@ -2492,19 +2492,19 @@ details.details {
display: block; }
.fieldset__description {
- color: #5b616b;
- font-size: 1rem; }
+ color: #757575;
+ font-size: 1.125rem; }
.fieldset__description > :last-child {
margin-bottom: 0; }
.fieldset--default {
background: #fff;
- border: 1px solid #757575;
+ border: 1px solid #DFDFDF;
margin: 1rem 0 1.75rem;
padding: 0 1em; }
.fieldset--default .fieldset__legend {
- background: #757575;
- border: 1px solid #757575;
+ background: #DFDFDF;
+ border: 1px solid #DFDFDF;
border-bottom: 0;
color: #212121;
height: 2em;
@@ -2536,8 +2536,8 @@ details.details {
padding: 0; }
.form-item__description {
- color: #5b616b;
- font-size: 1rem; }
+ color: #757575;
+ font-size: 1.125rem; }
.form-item__description > :last-child {
margin-bottom: 0; }
@@ -2562,8 +2562,8 @@ details.details {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
- background-color: #eee;
- border: 1px solid #757575;
+ background-color: #fafafa;
+ border: 1px solid #DFDFDF;
border-radius: 0;
display: inline-block;
font-size: 1rem;
@@ -2638,7 +2638,7 @@ details.details {
.form-item__week:hover,
.form-item__week:focus {
background-color: #fff;
- border: 1px solid #5b616b; }
+ border: 1px solid #757575; }
.form-item__color:disabled,
.form-item__date:disabled,
@@ -2685,8 +2685,8 @@ details.details {
.form-item__url:disabled:focus,
.form-item__week:disabled:hover,
.form-item__week:disabled:focus {
- background-color: #eee;
- border: 1px solid #757575; }
+ background-color: #fafafa;
+ border: 1px solid #DFDFDF; }
.is-full-width >
.form-item__color, .is-full-width >
.form-item__date, .is-full-width >
@@ -2724,7 +2724,7 @@ details.details {
outline: 2px solid transparent;
outline-offset: 2px;
background: #fff;
- border: 1px solid #5b616b;
+ border: 1px solid #757575;
content: '\a0';
display: inline-block;
height: 1.25rem;
@@ -2764,7 +2764,7 @@ details.details {
-moz-appearance: none;
appearance: none;
background-color: #fff;
- border: 1px solid #5b616b;
+ border: 1px solid #757575;
border-radius: 50%;
box-shadow: 0 0 0 2px transparent;
cursor: pointer;
@@ -2822,8 +2822,8 @@ details.details {
.form-item--range .form-item__range::-moz-range-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #5b616b;
- border: 1px solid #eee;
+ background: #757575;
+ border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
height: 2.75rem;
@@ -2833,8 +2833,8 @@ details.details {
.form-item--range .form-item__range::-moz-range-thumb:focus {
outline-color: #4773aa; }
.form-item--range .form-item__range::-moz-range-track {
- background: #aeb0b5;
- border: 1px solid #5b616b;
+ background: #A2A2A2;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -2844,8 +2844,8 @@ details.details {
.form-item--range .form-item__range::-ms-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #5b616b;
- border: 1px solid #eee;
+ background: #757575;
+ border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
height: 2.75rem;
@@ -2856,8 +2856,8 @@ details.details {
.form-item--range .form-item__range::-ms-thumb:focus {
outline-color: #4773aa; }
.form-item--range .form-item__range::-ms-track {
- background: #aeb0b5;
- border: 1px solid #5b616b;
+ background: #A2A2A2;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -2868,13 +2868,13 @@ details.details {
border: 0;
color: transparent; }
.form-item--range .form-item__range::-ms-fill-lower, .form-item--range .form-item__range::-ms-fill-upper {
- background: #aeb0b5;
- border: 1px solid #5b616b; }
+ background: #A2A2A2;
+ border: 1px solid #757575; }
.form-item--range .form-item__range::-webkit-slider-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #5b616b;
- border: 1px solid #eee;
+ background: #757575;
+ border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
height: 2.75rem;
@@ -2886,8 +2886,8 @@ details.details {
.form-item--range .form-item__range::-webkit-slider-thumb:focus {
outline-color: #4773aa; }
.form-item--range .form-item__range::-webkit-slider-runnable-track {
- background: #aeb0b5;
- border: 1px solid #5b616b;
+ background: #A2A2A2;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -2936,29 +2936,29 @@ details.details {
z-index: 2; }
.hero-bg-image__title {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 4rem;
- font-weight: 700;
+ color: #000;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+ font-size: 2.566rem;
+ font-weight: 600;
line-height: 1.1;
color: #fff;
margin-bottom: 2.5rem; }
@media (max-width: 60em) {
.hero-bg-image__title {
- font-size: 3rem;
+ font-size: 2.027rem;
margin-bottom: 1.5rem; } }
.hero-bg-image__summary {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 1.25rem;
+ color: #000;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+ font-size: 1.266rem;
font-weight: 400;
line-height: 1.45;
color: #fff;
margin-bottom: 2.5rem; }
@media (max-width: 60em) {
.hero-bg-image__summary {
- font-size: 1rem;
+ font-size: 1.125rem;
margin-bottom: 1.5rem; } }
.hero-bg-image--left {
@@ -3015,10 +3015,10 @@ details.details {
top: 5%; } }
.hero-inline-image__title {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 4rem;
- font-weight: 700;
+ color: #000;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+ font-size: 2.566rem;
+ font-weight: 600;
line-height: 1.1;
margin-bottom: 1.5rem; }
@media (min-width: 60em) {
@@ -3027,12 +3027,12 @@ details.details {
margin-bottom: 2.5rem; } }
@media (max-width: 60em) {
.hero-inline-image__title {
- font-size: 3rem; } }
+ font-size: 2.027rem; } }
.hero-inline-image__summary {
- color: #212121;
- font-family: "Source Sans Pro", Arial, sans-serif;
- font-size: 1.25rem;
+ color: #000;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+ font-size: 1.266rem;
font-weight: 400;
line-height: 1.45;
margin-bottom: 1.5rem; }
@@ -3092,7 +3092,7 @@ details.details {
.list--border li {
padding-left: 0; }
.list--border > li {
- border-bottom: 1px solid #aeb0b5;
+ border-bottom: 1px solid #A2A2A2;
padding: 0.25rem; }
.list--clean {
@@ -3141,7 +3141,7 @@ details.details {
content: "";
display: table; }
.list--pipeline > li {
- border-right: 1px solid #aeb0b5;
+ border-right: 1px solid #A2A2A2;
display: block;
float: left;
margin-right: 0.75em;
@@ -3149,7 +3149,7 @@ details.details {
padding-right: 0.75em;
/* stylelint-disable-next-line selector-no-qualifying-type */ }
[dir='rtl'] .list--pipeline > li {
- border-left: 1px solid #aeb0b5;
+ border-left: 1px solid #A2A2A2;
border-right: 0;
float: right;
margin-left: 0.75em;
@@ -3157,7 +3157,7 @@ details.details {
padding-left: 0.75em;
padding-right: 0; }
.list--pipeline > li.is-active {
- font-weight: 700; }
+ font-weight: 600; }
.list--pipeline > li:last-child {
border-right: 0;
margin-right: 0;
@@ -3207,7 +3207,7 @@ details.details {
content: "";
display: table; }
.menu--account > li {
- border-right: 1px solid #aeb0b5;
+ border-right: 1px solid #A2A2A2;
display: block;
float: left;
margin-right: 0.75em;
@@ -3215,7 +3215,7 @@ details.details {
padding-right: 0.75em;
/* stylelint-disable-next-line selector-no-qualifying-type */ }
[dir='rtl'] .menu--account > li {
- border-left: 1px solid #aeb0b5;
+ border-left: 1px solid #A2A2A2;
border-right: 0;
float: right;
margin-left: 0.75em;
@@ -3223,7 +3223,7 @@ details.details {
padding-left: 0.75em;
padding-right: 0; }
.menu--account > li.is-active {
- font-weight: 700; }
+ font-weight: 600; }
.menu--account > li:last-child {
border-right: 0;
margin-right: 0;
@@ -3233,7 +3233,7 @@ details.details {
margin-left: 0;
padding-left: 0; }
.menu--account .menu__link {
- font-size: 0.75rem; }
+ font-size: 1rem; }
.menu--uw-footer {
background-color: #000;
@@ -3747,7 +3747,7 @@ details.details {
content: "";
display: table; }
.menu--submenu > li {
- border-right: 1px solid #aeb0b5;
+ border-right: 1px solid #A2A2A2;
display: block;
float: left;
margin-right: 0.75em;
@@ -3755,7 +3755,7 @@ details.details {
padding-right: 0.75em;
/* stylelint-disable-next-line selector-no-qualifying-type */ }
[dir='rtl'] .menu--submenu > li {
- border-left: 1px solid #aeb0b5;
+ border-left: 1px solid #A2A2A2;
border-right: 0;
float: right;
margin-left: 0.75em;
@@ -3763,7 +3763,7 @@ details.details {
padding-left: 0.75em;
padding-right: 0; }
.menu--submenu > li.is-active {
- font-weight: 700; }
+ font-weight: 600; }
.menu--submenu > li:last-child {
border-right: 0;
margin-right: 0;
@@ -3774,9 +3774,9 @@ details.details {
padding-left: 0; }
.message {
- background-color: #f1f1f1;
- border: 1px solid #aeb0b5;
- color: #212121;
+ background-color: #eee;
+ border: 1px solid #A2A2A2;
+ color: #000;
margin-bottom: 1rem;
overflow: hidden;
padding: 1rem;
@@ -3797,7 +3797,7 @@ details.details {
.message::before {
display: none !important; } }
.message a {
- color: #5b616b;
+ color: #757575;
font-weight: 600;
text-decoration: underline; }
@@ -3817,7 +3817,7 @@ details.details {
background-image: url("../images/messages-error.svg"); }
.message--error .message__item em:first-child {
font-style: normal;
- font-weight: 700; }
+ font-weight: 600; }
.message--warning {
background-color: #fff1d2;
@@ -3833,9 +3833,9 @@ details.details {
border-radius: 0;
box-shadow: none;
display: inline-block;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1rem;
- font-weight: 700;
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 1.125rem;
+ font-weight: 600;
height: 55px;
line-height: 55px;
margin: 0;
@@ -3868,8 +3868,8 @@ details.details {
width: 33px; }
.mobile-menu {
- background-color: #f1f1f1;
- background-color: rgba(241, 241, 241, 0.98);
+ background-color: #eee;
+ background-color: rgba(238, 238, 238, 0.98);
left: 0;
overflow-y: auto;
position: fixed;
@@ -3895,21 +3895,21 @@ details.details {
.mobile-menu__link {
background-color: transparent;
border: 0;
- color: #5b616b;
+ color: #757575;
display: block;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1.25rem;
- font-weight: 700;
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 1.266rem;
+ font-weight: 600;
line-height: 1.45;
margin: 0;
- padding: 0.78125rem 1rem;
+ padding: 0.76965rem 1rem;
text-align: left;
text-decoration: none;
white-space: normal;
width: auto;
z-index: 3; }
.mobile-menu__link:hover, .mobile-menu__link:focus, .mobile-menu__link:active, .mobile-menu__link.is-active {
- color: #212121; }
+ color: #000; }
.mobile-menu__link.has-subnav {
margin-right: 44px; }
@@ -3949,17 +3949,17 @@ details.details {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20viewBox%3D%220%200%2019%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M2.3%2012l7.5-7.5%207.5%207.5%202.3-2.3-9.7-9.7-9.7%209.7%202.3%202.3z%22%2F%3E%0A%3C%2Fsvg%3E'); }
.mobile-menu__subnav {
- background-color: #eee;
- background-color: rgba(238, 238, 238, 0.98);
+ background-color: #fafafa;
+ background-color: rgba(250, 250, 250, 0.98);
display: none;
list-style: none;
margin: 0;
padding: 0; }
.mobile-menu__subnav .mobile-menu__link {
- color: #5b616b;
+ color: #757575;
padding-left: 24px; }
.mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
- color: #212121; }
+ color: #000; }
.pager__items {
list-style-type: none;
@@ -3989,12 +3989,12 @@ details.details {
.pager__item--ellipsis, .pager__item--current.pager__item, .pager__link {
background-color: transparent;
- color: #212121;
+ color: #000;
min-width: 2.5rem;
padding: 0.5em;
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1), background-color 375ms cubic-bezier(0.0, 0, 0.2, 1); }
.pager__item--ellipsis:focus, .pager__item--current.pager__item:focus, .pager__link:focus {
- outline: 1px dotted #323a45; }
+ outline: 1px dotted #4e4e4e; }
.pager__item--ellipsis {
display: none; }
@@ -4010,7 +4010,7 @@ details.details {
display: inline-block;
text-decoration: none; }
.pager__link:visited {
- color: #212121; }
+ color: #000; }
.pager__link:hover, .pager__link:focus {
background-color: #0071BC;
color: #fff; }
@@ -4021,20 +4021,20 @@ details.details {
.pager__link--previous,
.pager__link--next {
background-color: transparent;
- color: #212121;
+ color: #000;
position: relative; }
.pager__link--previous:hover, .pager__link--previous:focus,
.pager__link--next:hover,
.pager__link--next:focus {
background-color: transparent;
- color: #212121; }
+ color: #000; }
.pager__link--previous:hover .pager__link-icon g, .pager__link--previous:focus .pager__link-icon g,
.pager__link--next:hover .pager__link-icon g,
.pager__link--next:focus .pager__link-icon g {
fill: #0071BC; }
.pager__link--previous:visited,
.pager__link--next:visited {
- color: #212121; }
+ color: #000; }
.pager__item--previous {
margin-right: 2.5rem; }
@@ -4053,7 +4053,7 @@ details.details {
transform: translateY(-48%);
width: 24px; }
.pager__link-icon g {
- fill: #212121; }
+ fill: #000; }
.pager__item--next .pager__link-icon {
left: auto;
right: 0;
@@ -4063,8 +4063,8 @@ details.details {
position: relative; }
.progress__track {
- background-color: #aeb0b5;
- border: 1px solid #323a45;
+ background-color: #A2A2A2;
+ border: 1px solid #4e4e4e;
border-radius: 0.1875rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
height: 1rem;
@@ -4084,8 +4084,8 @@ details.details {
.progress__description,
.progress__percentage {
- color: #212121;
- font-size: 0.75rem;
+ color: #000;
+ font-size: 1rem;
overflow: hidden; }
.progress__description {
@@ -4144,7 +4144,7 @@ picture {
.skiplinks {
display: flex;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
justify-content: center;
position: absolute;
width: 100%;
@@ -4153,8 +4153,8 @@ picture {
.skiplinks__link,
.skiplinks__link:visited,
.skiplinks__link:focus {
- background-color: #323a45;
- border: 2px solid #f1f1f1;
+ background-color: #4e4e4e;
+ border: 2px solid #eee;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
@@ -4233,17 +4233,17 @@ picture {
border-top-right-radius: 0; }
.tabs__link {
- background-color: #f1f1f1;
+ background-color: #eee;
border: 0;
border-radius: 0;
- color: #212121;
+ color: #000;
cursor: pointer;
display: inline-block;
- font-family: "Source Sans Pro", Arial, sans-serif;
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
- font-weight: 700;
+ font-weight: 600;
line-height: 1.45;
padding: 0.5rem 1rem;
text-align: center;
@@ -4251,35 +4251,35 @@ picture {
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
- border-left: 1px solid #aeb0b5;
+ border-left: 1px solid #A2A2A2;
display: block;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1rem;
- line-height: 1.0625;
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 1.125rem;
+ line-height: 0.9444444444;
margin: 0;
padding: 0.5rem 1rem; }
.tabs__link:visited {
- color: #212121; }
+ color: #000; }
.tabs__link:hover, .tabs__link:focus {
- background-color: #aeb0b5;
- color: #212121; }
+ background-color: #A2A2A2;
+ color: #000; }
.tabs__link:active {
- background-color: #323a45;
+ background-color: #4e4e4e;
color: #fff; }
.tabs__link[disabled] {
- background-color: #f1f1f1;
- color: #aeb0b5;
+ background-color: #eee;
+ color: #A2A2A2;
cursor: default;
pointer-events: none; }
.tabs__link:focus {
- background-color: #aeb0b5; }
+ background-color: #A2A2A2; }
.tabs__link:visited, .tabs__link:hover {
- color: #212121; }
+ color: #000; }
.tabs__link:active {
- background-color: #323a45;
+ background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active {
- background-color: #323a45;
+ background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active:hover {
color: #fff; }
@@ -4303,7 +4303,7 @@ picture {
border: 2px solid #4773aa;
border-radius: 70px;
display: inline-block;
- font-size: 0.75rem;
+ font-size: 1rem;
margin: 0 0 0.5rem 0;
padding: 0.25em 1.65em;
text-align: center;
diff --git a/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index bcebb8456aa861e2eecca19e52b4fa7888e58a56..119bedf19935c41c9f68c04f1d52805a525245f5 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -88,13 +88,14 @@ gesso:
primary: "#b71233"
grayscale:
white: "#fff"
- gray-1: "#eee"
- gray-2: "#f1f1f1"
- gray-3: "#757575"
- gray-4: "#aeb0b5"
- gray-5: "#5b616b"
- gray-6: "#323a45"
- black: "#212121"
+ gray-1: "#fafafa"
+ gray-2: "#eee"
+ gray-3: "#DFDFDF"
+ gray-4: "#A2A2A2"
+ gray-5: "#757575"
+ gray-6: "#4e4e4e"
+ gray-7: "#111"
+ black: "#000"
other:
yellow:
base: "#fad980"
@@ -128,9 +129,9 @@ gesso:
lg: 1280px
colors:
text:
- primary: "#212121"
- secondary: "#5b616b"
- on-light: "#212121"
+ primary: "#000"
+ secondary: "#757575"
+ on-light: "#000"
on-dark: "#fff"
link: "#0071BC"
link-hover: "#205493"
@@ -154,8 +155,8 @@ gesso:
text-hover: "#fff"
text-active: "#fff"
disabled:
- background: "#f1f1f1"
- text: "#aeb0b5"
+ background: "#eee"
+ text: "#A2A2A2"
danger:
background: "#e31c3d"
background-hover: "#cd2026"
@@ -164,40 +165,40 @@ gesso:
text-hover: "#fff"
text-active: "#fff"
form:
- background: "#eee"
+ background: "#fafafa"
background-active: "#fff"
background-checked: "#0071BC"
background-unchecked: "#fff"
- border: "#757575"
- border-dark: "#5b616b"
- border-light: "#eee"
- thumb: "#5b616b"
- track: "#aeb0b5"
+ border: "#DFDFDF"
+ border-dark: "#757575"
+ border-light: "#fafafa"
+ thumb: "#757575"
+ track: "#A2A2A2"
mark:
background: "#ff0"
- text: "#212121"
+ text: "#000"
selection:
background: "#0071BC"
text: "#fff"
table:
- border: "#5b616b"
+ border: "#757575"
background: "#fff"
- background-head: "#f1f1f1"
- background-foot: "#f1f1f1"
+ background-head: "#eee"
+ background-foot: "#eee"
ui:
generic:
- background: "#aeb0b5"
- background-darker: "#212121"
- background-dark: "#323a45"
- background-light: "#f1f1f1"
- background-lighter: "#eee"
- border: "#aeb0b5"
- border-dark: "#323a45"
- border-light: "#f1f1f1"
+ background: "#A2A2A2"
+ background-darker: "#000"
+ background-dark: "#4e4e4e"
+ background-light: "#eee"
+ background-lighter: "#fafafa"
+ border: "#A2A2A2"
+ border-dark: "#4e4e4e"
+ border-light: "#eee"
text-lighter: "#fff"
- text-light: "#aeb0b5"
- text-dark: "#5b616b"
- text-darker: "#212121"
+ text-light: "#A2A2A2"
+ text-dark: "#757575"
+ text-darker: "#000"
accent: "#0071BC"
accent-dark: "#112E51"
accent-light: "#4773aa"
@@ -215,103 +216,139 @@ gesso:
font-family:
primary:
name: Primary
+ stack: georgia, "droid serif", "Times New Roman", Times, serif
+ secondary:
+ name: Secondary
stack: '"Source Sans Pro", Arial, sans-serif'
+ condensed:
+ name: Condensed
+ stack: BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans",
+ sans-serif
+ condensed-book:
+ name: Condensed-Book
+ stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
system:
name: System
- stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans",
- Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
+ stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
monospace:
name: Monospace
stack: Consolas, "Lucida Console", "Liberation Mono", "Courier New",
monospace, sans-serif
+ icon-font:
+ name: icon-font
+ stack: fdsu-rwd
base-font-size: 16px
font-size:
- "0": 12px
- "1": 16px
- "2": 20px
- "3": 24px
- "4": 32px
- "5": 40px
- "6": 48px
- "7": 56px
- "8": 64px
- "9": 72px
+ "0": 16px
+ "1": 18px
+ "2": 20.256px
+ "3": 22.784px
+ "4": 25.632px
+ "5": 28.832px
+ "6": 32.432px
+ "7": 36.496px
+ "8": 41.056px
+ "9": 46.192px
+ "10": 51.952px
+ "11": 58.448px
+ "12": 65.76px
+ "13": 73.984px
+ "14": 83.232px
+ "15": 93.632px
+ "16": 105.328px
+ "-6": 7.888px
+ "-5": 8.88px
+ "-4": 9.984px
+ "-3": 11.232px
+ "-2": 12.64px
+ "-1": 14.224px
font-weight:
+ hairline: 200
light: 300
regular: 400
+ bold: 600
semibold: 600
- bold: 700
+ extrabold: 700
+ black: 800
line-height:
tight: 1.1
base: 1.45
loose: 1.7
display:
display:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 64px
- font-weight: 700
+ color: "#000"
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif
+ font-size: 41.056px
+ font-weight: 600
line-height: 1.1
h1:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 48px
- font-weight: 700
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 41.056px
+ font-weight: 400
line-height: 1.1
h2:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 40px
- font-weight: 700
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 28.832px
+ font-weight: 400
line-height: 1.1
h3:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 32px
- font-weight: 700
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 22.784px
+ font-weight: 400
line-height: 1.1
h4:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 24px
- font-weight: 700
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 20.256px
+ font-weight: 400
line-height: 1.45
h5:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 16px
- font-weight: 700
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 18px
+ font-weight: 400
line-height: 1.45
h6:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 12px
- font-weight: 600
+ color: "#000"
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
+ Sans", sans-serif'
+ font-size: 16px
+ font-weight: 400
letter-spacing: -0.04em
line-height: 1.7
text-transform: uppercase
blockquote:
color: "#0071BC"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 24px
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif
+ font-size: 22.784px
font-weight: 400
line-height: 1.45
body:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
+ color: "#000"
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 16px
font-weight: 400
line-height: 1.45
body-large:
- color: "#212121"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 20px
+ color: "#000"
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif
+ font-size: 20.256px
font-weight: 400
line-height: 1.45
cite:
- color: "#5b616b"
- font-family: '"Source Sans Pro", Arial, sans-serif'
- font-size: 12px
+ color: "#757575"
+ font-family: georgia, "droid serif", "Times New Roman", Times, serif
+ font-size: 16px
font-style: normal
font-weight: 600
letter-spacing: .02em
@@ -330,9 +367,20 @@ gesso:
intro: 270ms
outro: 195ms
z-index:
- nav: 1000
- drawer: 1200
- modal: 1300
+ modal: 10
+ drawer: 9
+ overlay: 9
+ nav: 8
+ logo: 8
+ dropdown: 7
+ mobilemenu: 6
+ interact: 5
+ header: 4
+ footer: 4
+ content: 3
+ slides: 2
+ wrapper: 2
+ background: 1
spacing:
xxs: 4px
xs: 8px
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index a0647590a394f14954bec34ce9b2a202edcb3249..0f350cc69de1eb3c46616a611080e80194ad58d6 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -106,13 +106,14 @@ $gesso: (
),
grayscale: (
white: #fff,
- gray-1: #eee,
- gray-2: #f1f1f1,
- gray-3: #757575,
- gray-4: #aeb0b5,
- gray-5: #5b616b,
- gray-6: #323a45,
- black: #212121,
+ gray-1: #fafafa,
+ gray-2: #eee,
+ gray-3: #DFDFDF,
+ gray-4: #A2A2A2,
+ gray-5: #757575,
+ gray-6: #4e4e4e,
+ gray-7: #111,
+ black: #000,
),
other: (
yellow: (
@@ -156,9 +157,9 @@ $gesso: (
),
colors: (
text: (
- primary: #212121,
- secondary: #5b616b,
- on-light: #212121,
+ primary: #000,
+ secondary: #757575,
+ on-light: #000,
on-dark: #fff,
link: #0071BC,
link-hover: #205493,
@@ -186,8 +187,8 @@ $gesso: (
text-active: #fff,
),
disabled: (
- background: #f1f1f1,
- text: #aeb0b5,
+ background: #eee,
+ text: #A2A2A2,
),
danger: (
background: #e31c3d,
@@ -199,44 +200,44 @@ $gesso: (
),
),
form: (
- background: #eee,
+ background: #fafafa,
background-active: #fff,
background-checked: #0071BC,
background-unchecked: #fff,
- border: #757575,
- border-dark: #5b616b,
- border-light: #eee,
- thumb: #5b616b,
- track: #aeb0b5,
+ border: #DFDFDF,
+ border-dark: #757575,
+ border-light: #fafafa,
+ thumb: #757575,
+ track: #A2A2A2,
),
mark: (
background: #ff0,
- text: #212121,
+ text: #000,
),
selection: (
background: #0071BC,
text: #fff,
),
table: (
- border: #5b616b,
+ border: #757575,
background: #fff,
- background-head: #f1f1f1,
- background-foot: #f1f1f1,
+ background-head: #eee,
+ background-foot: #eee,
),
ui: (
generic: (
- background: #aeb0b5,
- background-darker: #212121,
- background-dark: #323a45,
- background-light: #f1f1f1,
- background-lighter: #eee,
- border: #aeb0b5,
- border-dark: #323a45,
- border-light: #f1f1f1,
+ background: #A2A2A2,
+ background-darker: #000,
+ background-dark: #4e4e4e,
+ background-light: #eee,
+ background-lighter: #fafafa,
+ border: #A2A2A2,
+ border-dark: #4e4e4e,
+ border-light: #eee,
text-lighter: #fff,
- text-light: #aeb0b5,
- text-dark: #5b616b,
- text-darker: #212121,
+ text-light: #A2A2A2,
+ text-dark: #757575,
+ text-darker: #000,
accent: #0071BC,
accent-dark: #112E51,
accent-light: #4773aa,
@@ -260,35 +261,67 @@ $gesso: (
font-family: (
primary: (
name: Primary,
+ stack: 'georgia, "droid serif", "Times New Roman", Times, serif',
+ ),
+ secondary: (
+ name: Secondary,
stack: '"Source Sans Pro", Arial, sans-serif',
),
+ condensed: (
+ name: Condensed,
+ stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ ),
+ condensed-book: (
+ name: Condensed-Book,
+ stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ ),
system: (
name: System,
- stack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
+ stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
),
monospace: (
name: Monospace,
stack: 'Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif',
),
+ icon-font: (
+ name: icon-font,
+ stack: fdsu-rwd,
+ ),
),
base-font-size: 16px,
font-size: (
- 0: 12px,
- 1: 16px,
- 2: 20px,
- 3: 24px,
- 4: 32px,
- 5: 40px,
- 6: 48px,
- 7: 56px,
- 8: 64px,
- 9: 72px,
+ 0: 16px,
+ 1: 18px,
+ 2: 20.256px,
+ 3: 22.784px,
+ 4: 25.632px,
+ 5: 28.832px,
+ 6: 32.432px,
+ 7: 36.496px,
+ 8: 41.056px,
+ 9: 46.192px,
+ 10: 51.952px,
+ 11: 58.448px,
+ 12: 65.76px,
+ 13: 73.984px,
+ 14: 83.232px,
+ 15: 93.632px,
+ 16: 105.328px,
+ -6: 7.888px,
+ -5: 8.88px,
+ -4: 9.984px,
+ -3: 11.232px,
+ -2: 12.64px,
+ -1: 14.224px,
),
font-weight: (
+ hairline: 200,
light: 300,
regular: 400,
+ bold: 600,
semibold: 600,
- bold: 700,
+ extrabold: 700,
+ black: 800,
),
line-height: (
tight: 1.1,
@@ -297,81 +330,81 @@ $gesso: (
),
display: (
display: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 64px,
- font-weight: 700,
+ color: #000,
+ font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
+ font-size: 41.056px,
+ font-weight: 600,
line-height: 1.1,
),
h1: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 48px,
- font-weight: 700,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 41.056px,
+ font-weight: 400,
line-height: 1.1,
),
h2: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 40px,
- font-weight: 700,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 28.832px,
+ font-weight: 400,
line-height: 1.1,
),
h3: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 32px,
- font-weight: 700,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 22.784px,
+ font-weight: 400,
line-height: 1.1,
),
h4: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 24px,
- font-weight: 700,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 20.256px,
+ font-weight: 400,
line-height: 1.45,
),
h5: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 16px,
- font-weight: 700,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 18px,
+ font-weight: 400,
line-height: 1.45,
),
h6: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 12px,
- font-weight: 600,
+ color: #000,
+ font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+ font-size: 16px,
+ font-weight: 400,
letter-spacing: -0.04em,
line-height: 1.7,
text-transform: uppercase,
),
blockquote: (
color: #0071BC,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 24px,
+ font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
+ font-size: 22.784px,
font-weight: 400,
line-height: 1.45,
),
body: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
+ color: #000,
+ font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
font-size: 16px,
font-weight: 400,
line-height: 1.45,
),
body-large: (
- color: #212121,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 20px,
+ color: #000,
+ font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
+ font-size: 20.256px,
font-weight: 400,
line-height: 1.45,
),
cite: (
- color: #5b616b,
- font-family: '"Source Sans Pro", Arial, sans-serif',
- font-size: 12px,
+ color: #757575,
+ font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
+ font-size: 16px,
font-style: normal,
font-weight: 600,
letter-spacing: .02em,
@@ -396,9 +429,20 @@ $gesso: (
),
),
z-index: (
- nav: 1000,
- drawer: 1200,
- modal: 1300,
+ modal: 10,
+ drawer: 9,
+ overlay: 9,
+ nav: 8,
+ logo: 8,
+ dropdown: 7,
+ mobilemenu: 6,
+ interact: 5,
+ header: 4,
+ footer: 4,
+ content: 3,
+ slides: 2,
+ wrapper: 2,
+ background: 1,
),
spacing: (
xxs: 4px,
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index 89b265492b091c05aff85bd0714ac01c440d71ab..b9c0f2a583bb766f3178074b477af219ddd44156 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -88,13 +88,14 @@ gesso:
primary: '#b71233'
grayscale:
white: '#fff'
- gray-1: '#eee'
- gray-2: '#f1f1f1'
- gray-3: '#757575'
- gray-4: '#aeb0b5'
- gray-5: '#5b616b'
- gray-6: '#323a45'
- black: '#212121'
+ gray-1: '#fafafa'
+ gray-2: '#eee'
+ gray-3: '#DFDFDF'
+ gray-4: '#A2A2A2'
+ gray-5: '#757575'
+ gray-6: '#4e4e4e'
+ gray-7: '#111'
+ black: '#000'
other:
yellow:
base: '#fad980'
@@ -215,30 +216,58 @@ gesso:
font-family:
primary:
name: Primary
+ stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
+ secondary:
+ name: Secondary
stack: '"Source Sans Pro", Arial, sans-serif'
+ condensed:
+ name: Condensed
+ stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+ condensedbook:
+ name: Condensed-Book
+ stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
system:
name: System
- stack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
+ stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
monospace:
name: Monospace
stack: 'Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif'
+ iconfont:
+ name: icon-font
+ stack: 'fdsu-rwd'
base-font-size: 16px
font-size:
- 0: 12px
- 1: 16px
- 2: 20px
- 3: 24px
- 4: 32px
- 5: 40px
- 6: 48px
- 7: 56px
- 8: 64px
- 9: 72px
+ -6: 7.888px
+ -5: 8.88px
+ -4: 9.984px
+ -3: 11.232px
+ -2: 12.64px
+ -1: 14.224px
+ 0: 16px
+ 1: 18px
+ 2: 20.256px
+ 3: 22.784px
+ 4: 25.632px
+ 5: 28.832px
+ 6: 32.432px
+ 7: 36.496px
+ 8: 41.056px
+ 9: 46.192px
+ 10: 51.952px
+ 11: 58.448px
+ 12: 65.76px
+ 13: 73.984px
+ 14: 83.232px
+ 15: 93.632px
+ 16: 105.328px
font-weight:
+ hairline: 200
light: 300
regular: 400
+ bold: 600
semibold: 600
- bold: 700
+ extrabold: 700
+ black: 800
line-height:
tight: 1.1
base: 1.45
@@ -252,39 +281,39 @@ gesso:
line-height: tight
h1:
color: text.primary
- font-family: primary.stack
- font-size: 6
- font-weight: bold
+ font-family: condensed-book.stack
+ font-size: 8
+ font-weight: regular
line-height: tight
h2:
color: text.primary
- font-family: primary.stack
+ font-family: condensed-book.stack
font-size: 5
- font-weight: bold
+ font-weight: regular
line-height: tight
h3:
color: text.primary
- font-family: primary.stack
- font-size: 4
- font-weight: bold
+ font-family: condensed-book.stack
+ font-size: 3
+ font-weight: regular
line-height: tight
h4:
color: text.primary
- font-family: primary.stack
- font-size: 3
- font-weight: bold
+ font-family: condensed-book.stack
+ font-size: 2
+ font-weight: regular
line-height: base
h5:
color: text.primary
- font-family: primary.stack
+ font-family: condensed-book.stack
font-size: 1
- font-weight: bold
+ font-weight: regular
line-height: base
h6:
color: text.primary
- font-family: primary.stack
+ font-family: condensed-book.stack
font-size: 0
- font-weight: semibold
+ font-weight: regular
letter-spacing: -0.04em
line-height: loose
text-transform: uppercase
@@ -297,7 +326,7 @@ gesso:
body:
color: text.primary
font-family: primary.stack
- font-size: 1
+ font-size: 0
font-weight: regular
line-height: base
body-large:
@@ -328,12 +357,23 @@ gesso:
intro: 270ms
outro: 195ms
z-index:
- nav: 1000
- drawer: 1200
- modal: 1300
+ modal: 10
+ drawer: 9
+ overlay: 9
+ nav: 8
+ logo: 8
+ dropdown: 7
+ mobilemenu: 6
+ interact: 5
+ header: 4
+ footer: 4
+ content: 3
+ slides: 2
+ wrapper: 2
+ background: 1
spacing:
xxs: 4px
- xs: 8px
+ xs: 8px
sm: 16px
md: 24px
lg: 40px
diff --git a/source/_patterns/01-global/02-typography/_typography.scss b/source/_patterns/01-global/02-typography/_typography.scss
index 67fece2bffd6c66597f83905a96ab37122d13edc..652d632d002bd1e81076eb6500741d9784b944d0 100755
--- a/source/_patterns/01-global/02-typography/_typography.scss
+++ b/source/_patterns/01-global/02-typography/_typography.scss
@@ -2,7 +2,7 @@
// Typography variables
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_
-$base-font-size: 17px;
+$base-font-size: 16px;
$base-line-height: 1.5;
$vertical-spacing: $base-font-size; // Used as the default spacing below most items such as paragraphs, lists, etc.
$vertical-spacing-forms: 30px; // Used as the default spacing below form elements.
diff --git a/source/_patterns/01-global/02-typography/typography.twig b/source/_patterns/01-global/02-typography/typography.twig
index c7ac0be7d8f1e877969b4def4c0153f87954f3a2..f5df56c7707e68472559613b23c18c4e38114bd3 100755
--- a/source/_patterns/01-global/02-typography/typography.twig
+++ b/source/_patterns/01-global/02-typography/typography.twig
@@ -13,4 +13,5 @@
</div>
{% endfor %}
</div>
+ <hr>
{% endfor %}
diff --git a/source/_patterns/01-global/02-typography/typography.yml b/source/_patterns/01-global/02-typography/typography.yml
index f46c55f75ffc6ac1a66fb1456cf4bbe6f6303702..9731003a92d054ce8d003fbaba74f10c95595c1e 100755
--- a/source/_patterns/01-global/02-typography/typography.yml
+++ b/source/_patterns/01-global/02-typography/typography.yml
@@ -28,7 +28,7 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"georgia\"; font-weight: 700; font-style: normal;"
+ font_preview_style: "font-family: georgia; font-weight: 700; font-style: normal;"
font_name: 'georgia'
font_weight: '700'
font_style: 'normal'
@@ -39,29 +39,29 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrot\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: BureauGrot; font-weight: 400; font-style: normal;"
font_name: 'BureauGrot'
font_weight: '300'
font_style: 'normal'
-
family_name: 'BureauGrotCond'
- style: 'font-family: "BureauGrotCond", serif;'
+ style: 'font-family: BureauGrotCond, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrotCond\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: BureauGrotCond; font-weight: 400; font-style: normal;"
font_name: 'BureauGrotCond'
- font_weight: '300'
+ font_weight: '600'
font_style: 'bold'
-
family_name: 'BureauGrotWide'
- style: 'font-family: "BureauGrotWide", serif;'
+ style: 'font-family:BureauGrotWide, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrotWide\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: BureauGrotWide; font-weight: 400; font-style: normal;"
font_name: 'BureauGrotWide'
font_weight: '300'
font_style: 'normal'
@@ -72,7 +72,7 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrot Book\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: 'BureauGrot Book'; font-weight: 400; font-style: normal;"
font_name: 'BureauGrot Book'
font_weight: '300'
font_style: 'normal'
@@ -83,7 +83,7 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrotCond Book\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: 'BureauGrotCond Book'; font-weight: 400; font-style: normal;"
font_name: 'BureauGrotCond Book'
font_weight: '300'
font_style: 'normal'
@@ -94,7 +94,7 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"BureauGrotWide Book\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: 'BureauGrotWide Book'; font-weight: 400; font-style: normal;"
font_name: 'BureauGrotWide Book'
font_weight: 'normal'
font_style: 'normal'
@@ -105,7 +105,7 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"iconic\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: iconic; font-weight: 400; font-style: normal;"
font_name: 'iconic'
font_weight: 'normal'
font_style: 'normal'
@@ -116,95 +116,95 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Regularalternate\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family:Typ1451-Regularalternate; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Regularalternate'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Mediumalternate'
- style: 'font-family: "Typ1451-Mediumalternate", serif;'
+ style: 'font-family: Typ1451-Mediumalternate, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Mediumalternate\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Mediumalternate; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Mediumalternate'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Regular'
- style: 'font-family: "Typ1451-Regular", serif;'
+ style: 'font-family:Typ1451-Regular, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Regular\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Regular; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Regular'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Boldalternate'
- style: 'font-family: "Typ1451-Boldalternate", serif;'
+ style: 'font-family: Typ1451-Boldalternate, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Boldalternate\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Boldalternate; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Boldalternate'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Medium'
- style: 'font-family: "Typ1451-Medium", serif;'
+ style: 'font-family: Typ1451-Medium, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Medium\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Medium; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Medium'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Bold'
- style: 'font-family: "Typ1451-Bold", serif;'
+ style: 'font-family: Typ1451-Bold, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Bold\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Bold; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Bold'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Light'
- style: 'font-family: "Typ1451-Light", serif;'
+ style: 'font-family: Typ1451-Light, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Light\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Light; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Light'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Typ1451-Lightalternate'
- style: 'font-family: "Typ1451-Lightalternate", serif;'
+ style: 'font-family: Typ1451-Lightalternate, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"Typ1451-Lightalternate\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: Typ1451-Lightalternate; font-weight: 400; font-style: normal;"
font_name: 'Typ1451-Lightalternate'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'fdsu-rwd'
- style: 'font-family: "fdsu-rwd", serif;'
+ style: 'font-family: fdsu-rwd, serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: "font-family: \"fdsu-rwd\"; font-weight: 400; font-style: normal;"
+ font_preview_style: "font-family: fdsu-rwd; font-weight: 400; font-style: normal;"
font_name: 'fdsu-rwd'
font_weight: 'normal'
font_style: 'normal'