.wrapper {
@include grid-row; > .content { @include grid-column; }
}
.no-bullets {
list-style-type: none; margin-left: 0; > li { padding-left: 0; }
}
.inner-container {
@include clearfix; &:not(.title-page) { padding-top: rem-calc(60); @include breakpoint(tablet) { padding-top: rem-calc(100); } }
}
.rounded-img img {
border-radius: 16px;
}
.intro {
h1 { font-size: 1.5rem; @include breakpoint(medium) { font-size: 2rem; } @include breakpoint(large) { font-size: 2.5rem; } }
} .title {
h1, h2 { color: $ace-orange; margin-top: 20px; font-size: 1.75rem; @include breakpoint(tablet) { margin-top: 35px; text-align: right; } @include breakpoint(medium) { font-size: 2.375rem; } @include breakpoint(large) { font-size: 3rem; } }
}
b, strong {
font-weight: 700;
}
.sidebar-content {
.content-title, .content, .sidebar { @include grid-column; margin-bottom: rem-calc(20); } .content-title { color: $ace-blue; h1, h2, h3 { font-size: rem-calc(30); margin-bottom: 0; } } .content { @include breakpoint(tablet) { @include grid-column(9); } } .sidebar { @include breakpoint(tablet) { @include grid-column(3); } } @include breakpoint(tablet) { &.flip { .content { @include grid-column-position(3); } .sidebar { @include grid-column-position(-9); } } } blockquote:first-child { margin-top: 0; }
}
.text-content {
position: relative; z-index: 5; font-size: rem-calc(16); @include breakpoint(medium) { font-size: rem-calc(18); } &.font-large { font-size: rem-calc(18); @include breakpoint(medium) { font-size: rem-calc(22); } } h1, h2, h3, h4, h5, h6 { color: $ace-blue; margin-bottom: 0.5em; &:not(:first-child) { margin-top: 1em; } } li { p:last-child { margin-bottom: 1rem; } } .lead { font-weight: normal; margin-bottom: 1rem; font-size: rem-calc(18); @include breakpoint(medium) { margin-bottom: 2rem; font-size: rem-calc(22); } } &.font-large { .lead { font-size: rem-calc(22); @include breakpoint(medium) { font-size: rem-calc(26); } } } .bold { font-weight: bold; } .main-image { text-align: center; margin-top: 1rem; margin-bottom: 1rem; @include breakpoint(medium) { margin-top: 2.5rem; margin-bottom: 2.5rem; } } ul.col-2 { list-style-type: none; margin-left: 0; margin-right: 0; margin: 0 0 1rem; font-weight: 300; @include breakpoint(tablet) { columns: 2; margin: 0 0 2rem; } > li { break-inside: avoid; margin-bottom: 1rem; text-align: left; a { font-weight: normal; color: $ace-navy; strong { color: $ace-orange; } &:hover, &:focus { color: $ace-orange; strong { color: $ace-orange; } } } } }
}
.gallery {
display: flex; flex-wrap: wrap; justify-content: center; @include grid-row; @include grid-row-nest; .gallery-item { display: flex; flex-direction: column; flex: 1 1 auto; @include grid-column; @include grid-column-end; text-align: center; margin: 0 0 2rem; .gallery-icon { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; align-items: center; img { flex: 0 1 auto; } } } @for $i from 1 to 9 { &.gallery-columns-#{$i} { @include grid-layout( ceil($i/3), '.gallery-item' ); @include breakpoint(medium) { @include grid-layout( ceil($i/1.75), '.gallery-item' ); } @include breakpoint(large) { @include grid-layout( $i, '.gallery-item' ); } .gallery-item { max-width: percentage(1/ceil($i/3)); @include grid-layout-center-last(ceil($i/3)); @include breakpoint(medium) { max-width: percentage(1/ceil($i/1.75)); @include grid-layout-center-last(ceil($i/1.75)); } @include breakpoint(large) { max-width: percentage(1/$i); @include grid-layout-center-last($i); } } } }
}
hr {
border-color: $ace-blue;
}
.title {
.content { h1 { color: $ace-orange; margin-bottom: 0.5rem; } }
}
.inner-container {
background: linear-gradient(to bottom, tint($ace-blue, 50%) 0%, $white 70px);
}
.supportBanner {
@include breakpoint(tablet) { background-image: url('../images/supportBanner.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; height: 190px; margin-top: 55px; margin-bottom: 60px; }
} .quote-wrapper {
margin-top: 40px; @include breakpoint(large) { margin-top: 100px; } .quote-image { @include show-for(tablet); @include breakpoint(tablet) { @include grid-column(3); } } .full-quote { @include grid-column; @include breakpoint(tablet) { @include grid-column(9); } blockquote { margin-top: 0; } }
}
.intro-text {
text-align: center; margin-bottom: rem-calc(20); h2 { color: $ace-blue; margin-bottom: 20px; @include breakpoint(tablet) { margin-top: 35px; } } p { font-size: 18px; font-weight: 400; @include breakpoint(tablet) { font-size: 20px; max-width: 960px; margin-left: auto; margin-right: auto; } }
}
.supportCategories {
.categoryLink { min-height: 150px; padding: 20px; margin-bottom: 33px; border-radius: 16px; display: flex; justify-content: center; align-items: center; color: $white; text-align: center; position: relative; &:after { content: ""; width: 19px; height: 11px; background-image: url('../images/downArrow.svg'); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 20px; left: 0; right:0; margin: 0 auto; } @include breakpoint(tablet) { float: left; width: 48%; &:nth-of-type(1), &:nth-of-type(3), &:nth-of-type(5) { margin-right: 2%; } &:nth-of-type(2), &:nth-of-type(4), &:nth-of-type(6) { margin-left: 2%; } } @include breakpoint(large) { width: 32%; &:nth-of-type(1), &:nth-of-type(4) { margin-right: 1%; margin-left: 0; } &:nth-of-type(3), &:nth-of-type(6) { margin-left: 1%; margin-right: 0; } &:nth-of-type(2), &:nth-of-type(5) { margin-right: 1%; margin-left: 1%; } } &:nth-of-type(1) { background: $ace-lime; &:hover { background: $ace-lime-h; } } &:nth-of-type(2) { background: $ace-blue; &:hover { background: $ace-blue-h; } } &:nth-of-type(3) { background: $ace-orange; &:hover { background: $ace-orange-h; } } &:nth-of-type(4) { background: $ace-pink; &:hover { background: $ace-pink-h; } } &:nth-of-type(5) { background: $ace-gold; &:hover { background: $ace-gold-h; } } &:nth-of-type(6) { background: $ace-teal; &:hover { background: $ace-teal-h; } } h3 { color: $white; max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 0; margin-top: -10px; } }
}
@each $type in (‘latin’, ‘alpha’) {
ol[style*="lower-#{$type}"] { counter-reset: listItem; margin-left: 1.5em; li{ display: block; position: relative; counter-increment: listItem; padding-left: 0.5em; &:before { content: counter(listItem,lower-#{$type}) ")"; position: absolute; text-align: right; right: 100%; } } }
}
.attachment-content {
text-align: center;
}
.sitemap-content {
@include grid-column(); .sitemap-list { @include grid-column(10); @include grid-column-end; @include grid-column-offset(1); font-size: rem-calc(18); li { margin-bottom: 0.2rem; } &, ul { list-style-type: none; } ul { margin-left: 2rem; } a { &, * { color: $ace-navy; } &:hover, &:focus { &, * { color: $ace-orange; } } } }
}
mark {
background: transparent; color: $ace-navy; font-weight: bold;
}