Untitled
plain_text
2 months ago
45 kB
3
Indexable
Never
.homepage { h1, h2, h3, h4, h5, h6, p { margin: 0; } overflow: hidden; } .color-shift-bg { background-color: $color-primary-dark-blue !important; color: $color-greyscale-off-white !important; } .color-shift-text { color: $color-greyscale-off-white !important; } #heroSection { @include breakpoint(md) { margin-top: 115px; } .hero { background: no-repeat center / cover; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 67.85% ); } height: $section-height; //115px is the width of the header. .hero-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 20px; .hero-bottom { @include breakpoint(md) { align-items: center; flex-direction: column; } } .desktop-image { @include breakpoint(lg) { display: none; } } .mobile-image { display: none; @include breakpoint(lg) { display: block; } } .hero-description { font-family: $font-family-haas-roman; font-size: 24px; font-weight: 700; line-height: 26px; letter-spacing: -0.02em; text-align: left; color: $color-greyscale-off-white; word-wrap: break-word; overflow-wrap: break-word; width: 32ch; @include breakpoint(md) { text-align: center; } } .hero-cta { .hero-cta-content { @include breakpoint(md) { flex-direction: column; gap: 25px; } } .learn-more { text-decoration: underline; font-family: $font-family-plaak-extracondensed; font-size: 15px; line-height: 15px; letter-spacing: -0.02em; font-weight: $font-weight-bold; margin-left: 20px; @include rollingText( $color-greyscale-off-white, $color-greyscale-off-white, 15px ); @include breakpoint(md) { margin-left: 0; } } } } } } /* Get Involved Section */ :root { --cards-per-row: 3; --number-of-rows: 1; } /* Secondary Hero */ #secondaryHero { @include flex(flex, row, nowrap, flex-start, flex-end); background: no-repeat center / cover; min-height: 350px; padding: 0px 0px 42px 20px; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 15deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100% ); } .secondary-hero-title { h2 { color: $color-greyscale-off-white; font-family: $font-family-haas-roman; font-size: 50px; font-weight: 700; line-height: 1.04; /* 104% */ letter-spacing: -2px; text-transform: capitalize; margin-top: auto; } } @include breakpoint(md) { min-height: auto; height: 250px; .secondary-hero-title { h2 { font-size: 26px; line-height: 1.07; } } } } #getInvolved { border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); min-height: $section-height; .get-involved { padding: $section-padding; .card-row { @include flex(flex, row, nowrap, center, center); @include breakpoint(md) { flex-direction: column; } gap: 7px; &::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: rgba($color-greyscale-grey, 0.8); } .card-link { height: calc(100% / var(--number-of-rows)); background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease; margin: 16px 0; .card { position: relative; display: block; transition: transform 0.3s ease; overflow: hidden; border-radius: 2px; &:not(:last-child) { position: relative; } .card-image { width: 100%; height: 100%; object-fit: cover; position: relative; transition: transform 0.3s ease; &:hover { transform: scale(1.1); } } &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, rgba(24, 27, 23, 0.35) 0%, rgba(24, 27, 23, 0) 36.84% ); z-index: 1; transition: opacity 0.3s ease; } &:hover { .card-image { transform: scale(1.1); } &::before { background: none; } .card-header { .card-cta-text, .card-page-link { color: $color-primary-dark-blue; transition: color 0.3s ease; } } } .card-header { flex-direction: column; position: absolute; z-index: 1; top: 0; left: 0; text-align: left; padding: 22px; .card-cta-text { font-family: $font-family-plaak-extended; font-weight: 900; font-size: 24px; line-height: 22px; letter-spacing: -0.03em; color: $color-greyscale-off-white; text-transform: uppercase; margin-bottom: 11px; @include breakpoint(md) { font-size: 18px; line-height: 16px; } } .card-page-link { font-family: $font-family-plaak-extracondensed; font-weight: 400; font-size: 72px; line-height: 56px; letter-spacing: -0.03em; color: $color-greyscale-off-white; text-transform: uppercase; width: 100%; @include breakpoint(md) { font-size: 52px; line-height: 40px; margin: 0; padding: 0; max-width: 272px; } } } } @include breakpoint(lg) { :root { --cards-per-row: 2; --number-of-rows: 2; } } @include breakpoint(md) { :root { --cards-per-row: 1; --number-of-rows: 1; } } } } } } .small-copy { position: relative; border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); padding: 21px 16px; @include breakpoint(md) { justify-content: flex-start !important; } .small-copy-title { @include flex(flex, row, nowrap, flex-start, center); img { position: absolute; right: 0; bottom: 0; display: none; } h1 { font-family: $font-family-plaak-extracondensed; font-weight: 400; font-size: 175px; line-height: 74.9%; letter-spacing: -0.03em; color: $color-primary-dark-blue; text-align: left; @include breakpoint(md) { font-size: 96px; } } h2 { font-family: $font-family-haas-roman; font-size: 50px; font-weight: 700; line-height: 52px; letter-spacing: -0.04em; text-align: left; color: $color-primary-dark-blue; text-transform: capitalize; } @include breakpoint(md) { justify-content: space-between; img { display: block; } } @media screen and (max-width: 1270px) { font-size: 150px; } } .text-square { @include flex(flex, row, wrap, flex-end, center); @include breakpoint(md) { justify-content: flex-start; margin: 0; img { display: none; } } } .small-copy-subtitle { font-family: $font-family-haas-roman; font-weight: 700; font-size: 18px; line-height: 20px; letter-spacing: -0.02em; color: $color-primary-dark-blue; position: relative; text-align: left; } } /* Big Body Text Section */ #bigBodyText { &.active { background-color: $color-primary-dark-blue; & h3 { color: $color-greyscale-off-white; } } .big-body-text { padding: $section-padding; .text-content { h2 { font-size: 50px; font-weight: $font-weight-bold; line-height: 52px; font-family: $font-family-haas-roman; letter-spacing: -0.04em; color: $color-primary-dark-blue; text-align: left; @include breakpoint(md) { font-size: 26px; line-height: 28px; } } } .big-body-text-cta { @include flex(flex, row, nowrap, flex-start, center); width: 100%; margin-top: 78px; gap: 24px; a { text-transform: uppercase; } } } } /* Photo slider Section */ #photoSlider { .photo-slider { padding: $section-padding; border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); // Should be 0.2 but invisible min-height: $section-height; .photo-slider-top-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); // Should be 0.2 but invisible h4 { font-family: $font-family-plaak-extended; font-size: 24px; line-height: 22px; letter-spacing: -0.03em; font-weight: 900; color: $color-primary-dark-blue; text-transform: uppercase; @include breakpoint(md) { font-size: 14px; line-height: 16px; } } .photo-slider-control-icons { display: flex; justify-content: flex-end; gap: 58px; @include breakpoint(md) { gap: 27px; } svg { cursor: pointer; } } } .photo-slider-gallery { display: flex; overflow: hidden; .image-slider-wrapper { @include flex(flex, row, nowrap, center, center); position: relative; margin: 16px 16px 0 0; @include breakpoint(md) { } img { height: auto; border-radius: 2px; } .location { position: absolute; bottom: 0; left: 0; @include flex(flex, row, nowrap, center, center); p { margin-left: 10px; font-family: $font-family-haas-roman; font-weight: $font-weight-bold; font-size: 14px; line-height: 16px; letter-spacing: -0.02em; color: $color-greyscale-off-white; } } } } } } /* Upcoming event Section */ #upcomingEvent { padding: $section-padding; border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); .upcoming-event { @include flex(flex, row, nowrap, flex-start, normal); &-main { @include flex(flex, column, nowrap, space-between, flex-start); min-height: $section-height; flex: 1; position: relative; padding: $section-padding; .top-row { @include flex(flex, column, wrap, flex-start, center); .upcoming-event-subtitle { margin-left: 0; margin-bottom: 16px; width: 100%; img { margin-right: 10px; } h5 { margin: 0; font-family: $font-family-haas-roman; font-size: 14px; font-weight: $font-weight-bold; line-height: 16px; letter-spacing: -0.02em; text-align: left; } } .upcoming-event-title { h2 { margin: 0; font-family: $font-family-plaak-extracondensed; font-size: 175px; font-weight: 400; line-height: 131px; letter-spacing: -0.03em; text-align: left; color: $color-primary-dark-blue; @include breakpoint(md) { font-size: 86px; line-height: 71px; margin-bottom: 20px; } } } } .upcoming-event-mobile-slider { display: none; max-width: 100%; .upcoming-event-slider-item { height: 100%; width: 100%; background: no-repeat center / cover; position: relative; box-sizing: border-box; } @include breakpoint(lg) { display: block; // Shows on mobile margin-bottom: 20px; } .upcoming-event-image-controls-mobile { position: relative; height: 3px; margin-top: 20px; width: 100%; .progress-bar { position: relative; top: 0; left: 0; height: 100%; background: rgba($color-primary-dark-blue, 0.3); } .progress { height: 100%; background: $color-primary-dark-blue; opacity: 1; // fully opaque width: 0; transition: width 0.3s ease; } } } .upcoming-event-info { margin-bottom: 35px; @include flex(flex, row, nowrap, flex-start, flex-start); .upcoming-event-time-place { display: flex; flex-flow: row nowrap; @include breakpoint(lg) { flex-wrap: wrap; } } .upcoming-event-when, .upcoming-event-where { h5 { margin: 0; color: $color-primary-dark-blue; font-family: $font-family-haas-roman; font-size: 24px; font-weight: 700; line-height: 26px; letter-spacing: -0.02em; text-align: left; /* word-break: break-all; */ } span { font-family: $font-family-haas-roman; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.02em; text-align: left; opacity: 0.4; color: $color-primary-dark-blue; } } .upcoming-event-what { p { margin: 0; color: $color-primary-dark-blue; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } span { font-family: $font-family-haas-roman; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.02em; text-align: left; opacity: 0.4; color: $color-primary-dark-blue; } } } .upcoming-event-cta { button { margin-right: 24px; } } } &-slider { height: inherit; .upcoming-event-image-controls { position: absolute; right: 0; bottom: 0; width: 242px; height: 75px; background-color: $color-greyscale-light-grey; @include flex(flex, row, nowrap, space-between, center); span { margin-left: 22px; font-family: $font-family-plaak-extracondensed; font-size: 45px; font-weight: 400; line-height: 35px; letter-spacing: -0.03em; text-align: right; color: $color-primary-dark-blue; opacity: 0.4; } .image-controls { margin-right: 22px; gap: 16px; img { margin-left: 16px; cursor: pointer; } } } &-wrapper { height: 100%; .slick-list { height: inherit; .slick-track { height: 100%; .upcoming-event-slider-item { height: 100%; width: 100%; background: no-repeat center / cover; position: relative; box-sizing: border-box; } } } } position: relative; &::after { content: ""; position: absolute; top: -16px; left: 0; width: 1px; height: calc(100% + 32px); background: rgba($color-greyscale-grey, 0.8); } @include breakpoint(lg) { display: none; } } } } /* Video Section */ #videoCTA { padding: $section-padding; .video-cta { background-position: 50%; background-repeat: no-repeat; background-size: cover; position: relative; min-height: $section-height; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 272.9deg, rgba(0, 0, 0, 0.7) 21.12%, rgba(0, 0, 0, 0) 61.71% ); } @include breakpoint(md) { &::before { background: linear-gradient( 7.27deg, rgba(0, 0, 0, 0.7) 14.62%, rgba(0, 0, 0, 0) 58.81% ); } } &-content { justify-content: flex-end; &-wrapper { margin-top: 85px; margin-bottom: 86px; } .video-cta-section-title { display: flex; flex-direction: row; color: $color-greyscale-light-grey; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; margin-bottom: 16px; } .video-cta-title { > div { padding: 0; } color: $color-greyscale-light-grey; font-family: $font-family-plaak-extracondensed; font-size: 175px; font-weight: 400; line-height: 131px; letter-spacing: -0.03em; text-align: left; margin-bottom: 32px; @include breakpoint(lg) { font-size: 150px; } @include breakpoint(md) { font-size: 72px; line-height: 54px; } } .video-cta-subtitle { color: $color-greyscale-light-grey; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; margin-bottom: 32px; } } } } /* Testimonial Section */ #testimonials { .testimonials { padding: $section-padding; .main-row { @include breakpoint(xl) { flex-direction: column; } } &-title { @include breakpoint(lg) { margin-bottom: 52px; } display: flex; flex-direction: row; img { margin-right: 5px; } h5 { margin: 0; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } } &-main { @include flex(flex, row, nowrap, flex-start, flex-start); @include breakpoint(xl) { flex-direction: column; margin: 0 auto 16px auto; } .testimonial-icon { margin-right: 16px; @include breakpoint(lg) { margin-bottom: 16px; } } .testimonial-wrapper { .slick-slide { margin: 0 50px; } /* the parent */ .slick-list { margin: 0 -50px; } position: relative; /* max-width: 100%; */ overflow: hidden; .testimonial-slider { .slick-track { @include flex(flex, row, nowrap, center, stretch); } .testimonial-slide { display: flex; flex-direction: column; height: inherit; } } .testimonial-text { color: $color-primary-dark-blue; font-family: $font-family-haas-roman; font-size: 50px; font-weight: 700; line-height: 52px; letter-spacing: -0.04em; text-align: left; word-break: break-all; white-space: normal; margin-bottom: 59px; } .testimonial-bottom { margin-top: auto; margin-left: 0; .testimonial-image { @include flex(flex, row, nowrap, flex-start, flex-end); @include breakpoint(lg) { align-items: flex-start; } } .testimonial-name { @include flex(flex, column, nowrap, flex-end, flex-start); margin-left: 10px; h4 { margin: 0; font-family: $font-family-haas-roman; font-size: 24px; font-weight: 700; line-height: 26px; letter-spacing: -0.02em; text-align: left; } .bottom-text { opacity: 0.4; } } } .testimonial-pagination { position: absolute; right: 0; bottom: 0; width: 242px; background-color: $color-greyscale-light-grey; @include flex(flex, row, nowrap, space-between, center); @include breakpoint(md) { height: auto; } span { margin-left: 22px; font-family: $font-family-plaak-extracondensed; font-size: 45px; font-weight: 400; line-height: 35px; letter-spacing: -0.03em; text-align: right; color: $color-primary-dark-blue; opacity: 0.4; @include breakpoint(lg) { margin-left: 0; } } .controls { margin-right: 22px; gap: 16px; .slick-arrow { .slick-disabled { opacity: 0.4 !important; } } img { margin-left: 16px; cursor: pointer; } } } } } } } /* Community Section */ #community { .community { display: flex; justify-content: center; align-items: center; background-color: $color-primary-orche; height: calc(100vh - 115px); overflow: hidden; width: 100vw; @include breakpoint(md) { display: block; flex-direction: column; height: auto; max-height: fit-content; padding: $section-padding; } .mobile-top-panel { display: none; @include breakpoint(md) { display: block; } .title { font-family: $font-family-plaak-extracondensed; font-size: 52px; font-weight: 900; line-height: 52px; letter-spacing: -0.06em; text-align: left; text-transform: uppercase; } .community-mobile-slider { display: none; @include breakpoint(md) { display: block; margin-bottom: 20px; } .community-image-controls-mobile { position: relative; height: 3px; margin-top: 20px; width: 100%; .progress-bar { position: relative; top: 0; left: 0; height: 100%; background: rgba($color-primary-dark-blue, 0.3); } .progress-community { height: 100%; background: $color-primary-dark-blue; opacity: 1; width: 0; transition: width 0.3s ease; } } } } .mobile-bottom-panel { display: none; @include breakpoint(md) { display: block; margin-bottom: 30px; } .subtext { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; margin-bottom: 34px; } .community-page-links { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: 30px; .community-link { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: -4%; &:hover { text-decoration: none; } img { margin-top: 12px; margin-left: 16px; width: 30px; fill: $color-greyscale-black; .community-link:hover & { fill: white; } } span { font-family: $font-family-plaak-extracondensed; color: $color-greyscale-black; font-size: 129px; font-weight: 400; line-height: 85.714%; letter-spacing: -0.03em; text-align: left; text-transform: uppercase; @include rollingText( $color-greyscale-black, $color-greyscale-off-white, 111px ); @include breakpoint(lg) { font-size: 200px; } } } } .keep-scrolling { display: flex; flex-direction: row; h4 { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } img { margin-right: 13px; } } } .container-scroller { width: 100%; height: 100%; @include breakpoint(md) { display: none; } .horizontal-content { height: 100%; align-items: center; display: flex; .horizontal-item { display: flex; align-items: center; padding: 3rem 53px; position: relative; .big-text-container { position: relative; padding: 150px; max-width: none; h2 { font-family: $font-family-plaak-extended; font-size: 600px; font-weight: 900; line-height: 500px; letter-spacing: -0.1em; text-align: left; text-transform: uppercase; } .image-wrapper { margin-left: 40px; .community-image-on-text { margin-right: 300px; z-index: -1; position: absolute; top: 0; &:last-child { margin-right: 0; } $gap: 650px; $count: 6; @for $i from 1 through $count { &:nth-child(#{$i}) { left: ($i - 1) * $gap; @if $i % 2==0 { top: auto; bottom: 223px; } @else { top: 46px; bottom: auto; } } } img { max-width: 100%; height: auto; display: block; } } } } } .right-panel { @include flex(flex, row, nowrap, flex-start, stretch); padding: 65px 98px; width: 100vw; height: $section-height; .left-side { @include flex(flex, column, nowrap, space-between, flex-start); .subtext { h3 { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } } .keep-scrolling { display: flex; flex-direction: row; h4 { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } img { margin-right: 13px; } } } .right-side { display: flex; flex-direction: column; align-items: flex-start; .community-page-links { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; .community-link { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: -4%; &:hover { text-decoration: none; svg { path { fill: white; } } } svg { margin-top: 40px; margin-left: 20px; width: 75px; fill: $color-greyscale-black; transition: fill 0.3s ease; // Add a smooth transition for the fill change } span { font-family: $font-family-plaak-extracondensed; font-size: 250px; font-weight: 400; line-height: 85.714%; letter-spacing: -0.03em; text-align: left; text-transform: uppercase; @include breakpoint(xl) { font-size: 200px; line-height: 171.428px; @include rollingText( $color-greyscale-black, $color-greyscale-off-white, 171.428px ); } @include rollingText( $color-greyscale-black, $color-greyscale-off-white, 214.285px ); } } } } } } } } } /* Suicide hotline Section */ #hotline { .hotline { padding: 43px 20px; min-height: 550px; @include flex(flex, column, nowrap, space-between, flex-start); .top-row { > div { @include flex(flex, row, nowrap, flex-start, flex-start); p { margin: 0; color: $color-primary-dark-blue; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } img { margin-right: 8px; } } } .bottom-row { width: 100%; .big-title { padding: 0; h2 { font-family: $font-family-plaak-extracondensed; font-size: 175px; font-weight: 400; line-height: 131px; letter-spacing: -0.03em; text-align: left; @include breakpoint(md) { margin-bottom: 13px; } } } .call-text { margin-bottom: 10px; } .call-text, .available, a { font-family: $font-family-haas-roman; color: $color-primary-dark-blue; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } a { text-decoration: underline; } } } } /* Fullbleed Section */ #fullbleedImage { background: no-repeat center / cover; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 67.85% ); } .main-row { min-height: $section-height; padding: $section-padding; margin: 0; display: flex; height: 100%; flex-direction: row; justify-content: flex-start; align-items: flex-start; @include breakpoint(lg) { align-content: flex-end; } .section-title { display: flex; gap: 7px; h5 { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; color: $color-greyscale-off-white; } } .main-content { align-self: center; @include breakpoint(md) { margin-left: 0; } } .big-title { margin-bottom: 25px; h2 { font-family: $font-family-haas-roman; font-size: 50px; font-weight: 700; line-height: 52px; letter-spacing: -0.04em; color: $color-greyscale-off-white; @include breakpoint(xl) { font-size: 35px; line-height: 35px; } @include breakpoint(lg) { font-size: 26px; line-height: 26px; } } } .cta-content { @include flex(flex, row, nowrap, flex-start, center); gap: 33px; /* Adjust gap between buttons and links */ @include breakpoint(lg) { gap: 16px; /* Adjust gap for smaller screens */ } button { outline: none; border: none; @include breakpoint(lg) { width: 158px; height: 54px; margin-right: 16px; } } } .unordered-list { margin-top: 10px; text-transform: capitalize; color: $color-greyscale-off-white; font-family: $font-family-haas-roman; font-size: 24px; font-weight: 700; line-height: 26px; letter-spacing: -0.02em; @include breakpoint(md) { font-size: 18px; line-height: 20px; } li { margin-bottom: 5px; } } } } /* Donations Section */ #donations { display: flex; flex-direction: column; gap: 20px; padding: $section-padding; .donation-row { @include flex(flex, row, nowrap, space-between, center); padding: 20px; background: linear-gradient( $color-greyscale-off-white, $color-greyscale-off-white 50%, $color-primary-dark-blue 50%, $color-primary-dark-blue ); background-size: 100% 200%; transition: background 1s, color 1s; position: relative; .donate-title { flex: 1 0 20%; display: flex; align-items: center; justify-content: space-between; } .donation-amount { flex: 1 0 25%; } .donation-description { flex: 1 0 45%; } .donation-desktop-link { flex: 1 0 10%; transform: translateY(100%); opacity: 0; transition: transform 1s ease, opacity 1s ease; } &:hover { background-position: 100% 100%; color: $color-greyscale-off-white; text-decoration: none; .donate-title, .donation-amount, .donation-description { color: $color-greyscale-off-white; } .donation-desktop-link { transform: translateY(0); opacity: 1; } .donation-mobile-link { path { fill: $color-greyscale-off-white; } } } @include breakpoint(md) { align-items: center; justify-content: center; padding: 40px; flex-direction: column; .donation-mobile-link { display: block; } .donate-title { order: 1; display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .donation-desktop-link { display: none; } .donation-amount { order: 2; align-self: flex-start; } .donation-description { order: 3; } } .donate-title, .donation-amount, .donation-description { display: flex; align-items: center; } .donation-mobile-link { display: none; } .donate-title { font-family: $font-family-plaak-extended; text-transform: uppercase; font-size: 24px; font-weight: 900; line-height: 22px; letter-spacing: -0.03em; @include breakpoint(md) { font-size: 14px; line-height: 16px; } } .donation-amount { color: $color-primary-dark-blue; font-family: $font-family-plaak-bold-semicondensed; font-size: 135px; font-weight: 700; line-height: 131px; letter-spacing: -0.03em; @include breakpoint(md) { font-size: 64px; line-height: 131px; } } .donation-description { color: $color-primary-dark-blue; font-family: $font-family-haas-roman; font-size: 24px; font-weight: 700; line-height: 26px; letter-spacing: -0.02em; @include breakpoint(md) { font-size: 18px; line-height: 20px; } } } } /* Tabs Section */ .tabs-section { padding: $section-padding; border-bottom: 1px solid rgba($color-greyscale-grey, 0.8); .tabs-container { display: flex; flex-direction: row; gap: 16px; .tab-link { font-family: $font-family-haas-roman; font-size: 16px; font-weight: 700; line-height: 12px; letter-spacing: -0.03em; color: $color-primary-dark-blue; border: 1px solid $color-primary-dark-blue; border-radius: 2px; background-color: transparent; padding: 14px 20px; text-decoration: none; transition: 0.3s ease-in-out; text-transform: capitalize; &.active, &:hover { background-color: $color-primary-dark-blue; color: $color-greyscale-off-white; } } } } /* Spotlight Section: */ .spotlight { padding: $section-padding; .spotlight-row { @include breakpoint(md) { flex-direction: column-reverse; min-height: $section-height; } &.image-left { flex-direction: row-reverse; } .spotlight-main { min-height: $section-height; background-color: $color-greyscale-off-white; padding: 91px 63px; @include flex(flex, column, nowrap, center, flex-start); color: $color-primary-dark-blue; gap: 20px; @include breakpoint(md) { min-height: auto; } .spotlight-section-title { gap: 8px; h5 { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } } .spotlight-main-text { h3 { font-family: $font-family-plaak-extracondensed; font-size: 72px; font-weight: 400; line-height: 56px; letter-spacing: -0.03em; text-align: left; text-transform: uppercase; } } .spotlight-copy { span { font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; opacity: 0.7; } } } .spotlight-image { background: no-repeat center / cover; @include breakpoint(md) { height: $section-height; } } } } .contact-form-section { padding: 30px 20px; background-color: $color-primary-dark-blue; min-height: $section-height; .contact-form-main { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; row-gap: 20px; h2 { color: $color-greyscale-light-grey; font-family: $font-family-plaak-extracondensed; font-size: 72px; font-weight: 400; line-height: 56px; letter-spacing: -0.03em; text-align: left; text-transform: uppercase; } h3 { color: $color-greyscale-light-grey; font-family: $font-family-haas-roman; font-size: 14px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; text-align: left; } .social-images { @include flex(flex, row, nowrap, flex-start, center); gap: 37px; } @include breakpoint(md) { margin-bottom: 32px; } } .contact-form-wrapper { .contact-form-row { /* display: flex; flex-wrap: wrap; */ // Input Styles input:not(.wpcf7-submit), select, textarea { border: none; border-bottom: 1px solid $color-greyscale-light-grey; background-color: transparent; outline: none; font-family: $font-family-haas-roman; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: 0.02em; text-align: left; color: $color-greyscale-light-grey; opacity: 1; width: 100%; padding: 10px; margin-bottom: 20px; &::placeholder { color: $color-greyscale-light-grey; } } // Special styles for textarea textarea { border: 1px solid $color-greyscale-light-grey; } // Labels label { font-family: $font-family-haas-roman; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.03em; text-align: left; color: $color-greyscale-off-white; display: block; margin-bottom: 5px; width: 100%; } // Flex Columns .contact-form-name, .contact-form-email-affiliation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; } .contact-form-submit { display: flex; flex-direction: row; align-items: center; a { font-family: $font-family-haas-roman; font-size: 16px; font-weight: 700; line-height: 12px; letter-spacing: -0.03em; text-align: left; color: $color-greyscale-grey; text-decoration: underline; } } } } }