.home {
.banner-wrapper { display: none; @include breakpoint(medium) { display: block; } position: relative; background: $ace-blue; text-align: left; .banner-controls { position: absolute; background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202754%20292%22%20width%3D%222754%22%20height%3D%22292%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EAce%20Wave%20white%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M2754%2C292H0s1.82-94.37.47-97.79a6.63%2C6.63%2C0%2C0%2C1%2C3.61-8.58%2C1280.35%2C1280.35%2C0%2C0%2C1%2C165.35-56.42A1225.54%2C1225.54%2C0%2C0%2C1%2C341.29%2C96.57a1312.92%2C1312.92%2C0%2C0%2C1%2C174.84-8.5c58.4.91%2C116.67%2C5.4%2C174.55%2C12.34C806.52%2C114.34%2C920.62%2C138%2C1034%2C162.33c56.7%2C12.18%2C113.22%2C24.54%2C169.86%2C36.16s113.29%2C22.35%2C170.13%2C31.57c113.61%2C18.5%2C228.07%2C30.51%2C342.55%2C31.83a1801.57%2C1801.57%2C0%2C0%2C0%2C341.07-27.79c112.39-20%2C222.74-50.71%2C330-89.9S2652.58%2C53.34%2C2754%2C0%22%2F%3E%3C%2Fsvg%3E'); background-position: bottom center; background-repeat: no-repeat; background-size: 100% 100%; z-index: 15; right: 0; bottom: 0; left: 0; height: 20%; max-height: 200px; .slick-dots { top: 25%; bottom: auto; } } .banner-home { position: relative; // top: 0; // right: 0; // bottom: 0; // left: 0; max-width: 2095px; margin: auto; z-index: 10; // overflow: hidden; &:not(.slick-initialized) { .banner:not(:first-of-type) { display: none; } } .banner { display: flex; flex-direction: column; align-content: flex-start; justify-content: center; color: $white; height: 100%; font-size: rem-calc(28); line-height: 1.4; font-weight: 400; background-size: cover; background-position: center center; background-repeat: no-repeat; @include breakpoint(medium) { font-size: rem-calc(38); line-height: $global-lineheight; } @include breakpoint(large) { font-size: rem-calc(45); } &:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba($black, 0.3); z-index: 5; pointer-events: none; } .content { @include grid-row; width: 100%; flex: 0 1 auto; z-index: 10; position: relative; } .banner-text { display: block; @include grid-column(12,0); padding: rem-calc(28); max-width: rem-calc(870); text-shadow: 3px 3px 11px $black; margin-bottom: 10%; @include breakpoint(medium) { width: 75%; padding: rem-calc(45); } @include breakpoint(large) { padding: rem-calc(96); } } } } } .welcome-wrapper { text-align: center; font-size: rem-calc(20); padding-top: rem-calc(50); padding-bottom: rem-calc(50); h1 { margin-bottom: rem-calc(21); } .call-out { display: inline-block; border-radius: rem-calc(15); margin: rem-calc(25) auto 0; background: $ace-orange; color: $white; font-size: rem-calc(26); padding: rem-calc(11 18); span { display: inline-block; margin-top: 8px; margin-bottom: 10px; } .button { margin-left: rem-calc(18); } } } .projects-wrapper { background: linear-gradient(transparent, transparent 200px, $ace-navy 200px, $ace-navy); padding-top: rem-calc(50); } .project-list { @include grid-layout(1, '.project', $grid-column-gutter); @include breakpoint(tablet) { @include grid-layout(2, '.project', $grid-column-gutter); } @include breakpoint(medium) { @include grid-layout(3, '.project', $grid-column-gutter); } @include breakpoint(medium) { margin-bottom: 47px; } display: flex; justify-content: center; flex-wrap: wrap; .project { display: flex; flex: 0 1 auto; min-width: 0; max-width: percentage(1); @include breakpoint(tablet) { max-width: percentage(1/2); } @include breakpoint(medium) { max-width: percentage(1/3); } margin-bottom: rem-calc(23); .inner { display: flex; flex-direction: column; flex: 1 1 auto; background: tint($ace-lime, 70%); border-radius: rem-calc(20); overflow: hidden; } .project-image { flex: 0 1 auto; } .project-content { display: flex; flex: 1 1 auto; flex-direction: column; padding: rem-calc(18); h2 { flex: 0 1 auto; font-size: rem-calc(26); font-weight: 300; color: $ace-blue; } .project-description { flex: 1 1 auto; } .project-link { flex: 0 1 auto; text-align: right; a { display: inline-block; position: relative; font-weight: normal; padding: rem-calc(0 24 0 5); color: $ace-orange; &:after { content: ''; display: block; position: absolute; top: 0; right: rem-calc(5); bottom: 0; margin: auto; height: rem-calc(20); width: rem-calc(12); transform: none; border: none; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Chevron%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%2398c21f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2211%22%20height%3D%2218%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EChevron%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%222.19%2017.37%209.81%2010%202.19%202.63%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-position: center center; background-repeat: no-repeat; background-size: contain; } &:hover, &:focus { color: $ace-blue; } } } } &-small { h2 { font-size: rem-calc(22); } .project-image { display: none; } } &:nth-of-type(n+2) { .project-image { @include show-for(tablet); } } &:nth-of-type(n+3) { .project-image { @include show-for(medium); } } } } .latest-news-wrapper { text-align: center; background: $ace-navy; padding-bottom: rem-calc(40); h2 { color: $ace-blue; text-transform: uppercase; font-size: rem-calc(16); margin-bottom: rem-calc(8); } .article-excerpt { font-size: rem-calc(26); color: $white; margin-bottom: rem-calc(8); time { color: tint($ace-blue, 50%); margin-right: rem-calc(30); } } .read-more { display: inline-block; position: relative; font-weight: 400; padding: rem-calc(4 21 4 4); color: $ace-orange; &:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; height: rem-calc(20); width: rem-calc(12); background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Chevron%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%2398c21f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2211%22%20height%3D%2218%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EChevron%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%222.19%2017.37%209.81%2010%202.19%202.63%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-position: center center; background-repeat: no-repeat; background-size: contain; } &:hover, &:focus { color: tint($ace-orange, 40%); } } } .services-wrapper { text-align: center; padding-top: rem-calc(70); h2 { margin-bottom: 20px; } .specialistIntro { max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 33px; } .service { ul { text-align: left; } } } .newsletter-wrapper { padding-bottom: rem-calc(45); background: linear-gradient($white, #dde5f1 50%, #c3d2e7 89%, #c3d2e7); .ace-wave-divider { @include grid-col-row; text-align: center; margin-bottom: rem-calc(50); } .wrapper .content { @include grid-column(12,0); } .newsletterLink { text-align: center; } h2 { font-size: rem-calc(26); margin-top: 8px; margin-bottom: 10px; width: 100%; @include breakpoint(medium) { font-size: rem-calc(26); width: 70%; float: left; text-align: right; padding-right: 2%; } @include breakpoint(large) { width: 65%; } } .yes { text-align: center; @include breakpoint(medium) { width: 25%; text-align: left; float: left; } @include breakpoint(large) { width: 35%; } } .frm_forms.frm_style_ace-style.with_frm_style { @include grid-column(7,0); margin: 0; .frm_section_heading { @include grid-column(8); } .frm_submit { @include grid-column(4); clear: none; } } } .service-list { @include grid-layout(1, '.service', $grid-column-gutter); @include breakpoint(tablet) { @include grid-layout(2, '.service', $grid-column-gutter); } @include breakpoint(medium) { @include grid-layout(3, '.service', $grid-column-gutter); } .service { margin-bottom: rem-calc(45); h3 { text-align: center; color: $white; background: $ace-blue; border-radius: rem-calc(10); padding: rem-calc(15 24 12); font-size: rem-calc(26); } ul { margin-left: 0; li { font-size: rem-calc(16); line-height: 1.25; list-style-type: none; position: relative; padding-left: rem-calc(21); padding-top: rem-calc(14); padding-bottom: rem-calc(14); &:before { content: ''; display: block; position: absolute; left: 0; height: rem-calc(20); width: rem-calc(12); background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Chevron%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%2398c21f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2211%22%20height%3D%2218%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EChevron%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%222.19%2017.37%209.81%2010%202.19%202.63%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-position: center center; background-repeat: no-repeat; background-size: contain; } a { color: $ace-navy; &:hover, &:focus { color: $ace-orange; } } } } } } .social-media-wrapper { padding-top: rem-calc(96); padding-bottom: rem-calc(50); .wrapper { .content { h2 { margin-bottom: 35px; text-align: center; } } } .social-feed-left, .social-feed-right { @include grid-column; margin-bottom: rem-calc(30); h3 { font-size: rem-calc(16); a { font-weight: bold; } } } .social-feed-left { @include breakpoint(tablet) { @include grid-column(5); } .twitterFollow { float: left; margin-right: 13px; position: relative; top: -19px; } .twitter-title { margin-top: 10px; } .twitterFeed { clear: both; } } .social-feed-right { @include breakpoint(tablet) { @include grid-column(6); @include grid-column-offset(1); } .transparent { background: transparent; color: $ace-orange; padding-left: 0; position: relative; bottom: 1px; } .facebookFollow { float: left; margin-right: 13px; } .youtubeFollow { float: left; position: relative; margin-right: 13px; top: -9px; } .youtubeTitle { float: left; margin-top: 10px; } .facebookTitle { float: left; margin-top: 16px; } iframe { margin-top: 25px; } } .social-media-module { margin-bottom: rem-calc(50); } } .just-giving-wrapper { .front-gallery { position: relative; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center center; } .call-out { display: table; position: relative; margin-top: rem-calc(-36); margin-right: auto; margin-left: auto; color: $ace-navy; background: $ace-lime; border-radius: 2 * $global-radius; padding: rem-calc(14 8); z-index: 5; .headers, .button-wrapper { display: table-cell; padding: rem-calc(4 8); vertical-align: middle; } h2 { font-weight: 600; font-size: rem-calc(30); margin-bottom: rem-calc(2); } h3 { font-size: rem-calc(16); margin-bottom: 0; } .button { font-size: rem-calc(20); font-weight: 400; text-transform: uppercase; background: $ace-blue; padding-top: rem-calc(17); padding-bottom: rem-calc(17); &:after { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22chevron-white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2.46px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%222%22%20y%3D%223.39%22%20width%3D%228.04%22%20height%3D%2213.61%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EChevron%20White%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%223.23%2015.77%208.81%2010.19%203.23%204.62%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } &:hover, &:focus { background: $ace-blue-h; } } } }
}
.ace-wave {
.cls-1{ fill: $ace-lime; } .cls-2{ fill: $ace-navy; } .cls-3{ fill: $ace-blue; }
}