@ -271,7 +271,7 @@ body.noscroll {
margin-top : 2 rem ;
padding-top : 5 rem ;
padding-bottom : 5 rem ;
background-image : url( "/static/img/bg/ 1 .svg") ;
background-image : url( "/static/img/bg/ facts .svg") ;
background-repeat : no-repeat ;
background-position : top center ;
background-size : 100 % auto ;
@ -347,201 +347,217 @@ body.noscroll {
}
. principles {
display : grid ;
grid-template-columns : 1 fr ;
grid-column-gap : 8 rem ;
grid-row-gap : 2 rem ;
margin-top : 5 em ;
background-image : url( "/static/img/bg/principles.svg" ) ;
background-repeat : no-repeat ;
background-position : - 60 rem top ;
background-size : auto 100 % ;
. dropdown {
. principles-list {
display : grid ;
grid-template-columns : 1 fr ;
grid-column-gap : 8 rem ;
grid-row-gap : 2 rem ;
margin-top : 5 em ;
select {
width : 100 % ;
padding : 1 .5 em ;
background-color : $col-bg ;
color : $col-white ;
border : 1 pt solid $col-accent ;
border-radius : 1 em ;
font-size : 1 rem ;
font-weight : bold ;
cursor : pointer ;
transition : background-color .1 s ease-out ;
. dropdown {
& : hover {
background-color : $col-accent ;
select {
width : 100 % ;
padding : 1 .5 em ;
background-color : $col-bg ;
color : $col-white ;
border : 1 pt solid $col-accent ;
border-radius : 1 em ;
font-size : 1 rem ;
font-weight : bold ;
cursor : pointer ;
transition : background-color .1 s ease-out ;
& : hover {
background-color : $col-accent ;
}
}
}
}
. list {
display : none ;
flex-direction : column ;
gap : 1 em ;
. list {
display : none ;
flex-direction : column ;
gap : 1 em ;
& > div {
padding : 1 .5 em ;
outline : 1 pt solid $col-secondary ;
outline-offset : - 1 pt ;
border-radius : 1 em ;
cursor : pointer ;
transition : background-color .1 s ease-out ;
& > div {
padding : 1 .5 em ;
outline : 1 pt solid $col-secondary ;
outline-offset : - 1 pt ;
border-radius : 1 em ;
cursor : pointer ;
transition : background-color .1 s ease-out ;
& . active {
border-radius : 1 em 0 0 1 em ;
position : relative ;
overflow : visible ;
& . active {
border-radius : 1 em 0 0 1 em ;
position : relative ;
overflow : visible ;
& : after {
content : " " ;
display : block ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 2 em ;
height : 100 % ;
background-color : $col-accent ;
clip-path : polygon ( 0 0 , 0 100 % , 100 % 50 % ) ;
transform : translatex ( 2 em ) ;
}
}
& : after {
content : " " ;
display : block ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 2 em ;
height : 100 % ;
& . active , & : hover {
background-color : $col-accent ;
clip-path : polygon ( 0 0 , 0 100 % , 100 % 50 % ) ;
transform : translatex ( 2 em ) ;
outline : none ;
}
}
& . active , & : hover {
background-color : $col-accent ;
outline : none ;
}
. title {
margin : 0 ;
font-weight : bold ;
text-align : left ;
font-size : 1 .138 rem ;
. title {
margin : 0 ;
font-weight : bold ;
text-align : left ;
font-size : 1 .138 rem ;
}
}
}
}
. content {
display : flex ;
flex-direction : column ;
& > div {
height : 0 ;
overflow : hidden ;
opacity : 0 ;
transform : translatey ( - 1 em ) ;
transition : opacity .2 s ease-out , transform .2 s ease-out ;
. content {
display : flex ;
flex-direction : column ;
& . visible {
height : auto ;
opacity : 1 ;
transform : translatex ( 0 ) ;
& > div {
height : 0 ;
overflow : hidden ;
opacity : 0 ;
transform : translatey ( - 1 em ) ;
transition : opacity .2 s ease-out , transform .2 s ease-out ;
& . visible {
height : auto ;
opacity : 1 ;
transform : translatex ( 0 ) ;
}
}
}
h2 {
position : relative ;
text-align : left ;
padding-bottom : 1 rem ;
margin-top : 0 ;
h2 {
position : relative ;
text-align : left ;
padding-bottom : 1 rem ;
margin-top : 0 ;
& : after {
content : " " ;
display : block ;
position : absolute ;
left : 0 ;
bottom : 0 ;
width : 2 em ;
height : 1 pt ;
background-color : $col-secondary ;
& : after {
content : " " ;
display : block ;
position : absolute ;
left : 0 ;
bottom : 0 ;
width : 2 em ;
height : 1 pt ;
background-color : $col-secondary ;
}
}
}
a {
text-decoration : none ;
color : lighten ( $col-accent , 25 % ) ;
a {
text-decoration : none ;
color : lighten ( $col-accent , 25 % ) ;
}
}
}
}
. checklist {
display : flex ;
justify-content : flex-start ;
gap : 1 em ;
margin-top : 2 rem ;
overflow-x : scroll ;
/ / Firefox
scrollbar-width : none ;
/ / Chrome , Safari , Edge
& : : -webkit-scrollbar {
width : 0 ;
}
/ / ` overflow-y : visible ` does not work
padding : 1 rem ;
flex-direction : column ;
background-image : url( "/static/img/bg/checklist.svg" ) ;
background-repeat : no-repeat ;
background-position : center ;
background-size : auto 100 % ;
. c ard {
. checklist-cards {
display : flex ;
flex-direction : column ;
flex-shrink : 0 ;
width : 15 em ;
border : .15 em solid $col-accent ;
border-radius : 1 .5 rem ;
padding : 1 .5 em ;
background-color : $col-bg ;
text-align : left ;
user-select : none ;
justify-content : flex-start ;
gap : 1 em ;
margin-top : 2 rem ;
overflow-x : scroll ;
img {
width : 100 % ;
border-radius : 1 rem ;
/ / Firefox
scrollbar-width : none ;
/ / Chrome , Safari , Edge
& : : -webkit-scrollbar {
width : 0 ;
}
& > . title {
position : relative ;
font-weight : bold ;
font-size : 1 .138 rem ;
padding : 1 em 0 ;
/ / ` overflow-y : visible ` does not work
padding : 1 rem ;
& : after {
content : " " ;
display : block ;
position : absolute ;
left : 0 ;
bottom : 0 ;
width : 25 % ;
height : 1 px ;
background-color : #fff ;
}
}
. download {
margin-top : 1 rem ;
cursor : pointer ;
color : inherit ;
text-decoration : none ;
margin-top : auto ;
. card {
display : flex ;
flex-direction : column ;
flex-shrink : 0 ;
width : 15 em ;
border : .15 em solid $col-accent ;
border-radius : 1 .5 rem ;
padding : 1 .5 em ;
background-color : $col-bg ;
text-align : left ;
user-select : none ;
& : hover {
color : lighten ( $col-accent , 25 % ) ;
img {
width : 100 % ;
border-radius : 1 rem ;
}
. title {
display : flex ;
align-items : baseline ;
font-size : 1 .25 em ;
& > . title {
position : relative ;
font-weight : bold ;
margin-bottom : .25 em ;
font-size : 1 .138 rem ;
padding : 1 em 0 ;
& : after {
content : url( "/static/img/download-icon.svg" ) ;
display : inline-block ;
height : 1 em ;
margin-left : .5 rem ;
content : " " ;
display : block ;
position : absolute ;
left : 0 ;
bottom : 0 ;
width : 25 % ;
height : 1 px ;
background-color : #fff ;
}
}
. meta {
color : $col-secondary ;
font-size : .85 em ;
. download {
margin-top : 1 rem ;
cursor : pointer ;
color : inherit ;
text-decoration : none ;
margin-top : auto ;
& : hover {
color : lighten ( $col-accent , 25 % ) ;
}
. title {
display : flex ;
align-items : baseline ;
font-size : 1 .25 em ;
font-weight : bold ;
margin-bottom : .25 em ;
& : after {
content : url( "/static/img/download-icon.svg" ) ;
display : inline-block ;
height : 1 em ;
margin-left : .5 rem ;
}
}
. meta {
color : $col-secondary ;
font-size : .85 em ;
}
}
}
}
@ -549,9 +565,9 @@ body.noscroll {
. stories {
padding-top : 5 rem ; / / To clear the image
background-image : url( "/static/img/bg/ 2 .svg") ;
background-size : 90 rem auto ;
background-position : center top ;
background-image : url( "/static/img/bg/ stories .svg") ;
background-size : auto 110 % ;
background-position : center ;
background-repeat : no-repeat ;
& : before {
@ -675,164 +691,179 @@ body.noscroll {
}
}
. contact-list {
margin : 5 rem 0 8 rem 0 ;
. row {
display : flex ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
}
. contacts {
margin-top : 8 rem ;
background-image : url( "/static/img/bg/contacts.svg" ) ;
background-repeat : no-repeat ;
background-position : - 40 rem center ;
background-size : auto 100 % ;
. row : first-child . contact : first-child {
border-top : none ;
}
. row . contact : first-child {
border-top : 1 px solid $col-secondary ;
}
. contact-list {
margin : 5 rem auto 8 rem auto ;
. row . contact {
width : 100 % ;
padding : 3 rem 0 ;
border-bottom : 1 px solid $col-secondary ;
flex : 1 ;
& : last-child {
border : none ;
. row {
display : flex ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
}
. title {
font-weight : bold ;
font-size : 1 .25 em ;
. row : first-child . contact : first-child {
border-top : none ;
}
. row . contact : first-child {
border-top : 1 px solid $col-secondary ;
}
. meta {
display: flex ;
flex-direction: column ;
gap: 1 rem ;
f ont-weight: bold ;
. row . contact {
width: 100 % ;
padding: 3 rem 0 ;
border-bottom: 1 px solid $col-secondary ;
f lex: 1 ;
& > div {
& : last-child {
border : none ;
}
. title {
font-weight : bold ;
font-size : 1 .25 em ;
}
. meta {
display : flex ;
align-items : center ;
flex-direction: column ;
gap : 1 rem ;
font-weight : bold ;
& : before {
content : " " ;
height : 2 rem ;
width : 2 rem ;
border : 1 px solid $col-secondary ;
border-radius : .5 rem ;
background-size : 50 % ;
background-position : center ;
background-repeat : no-repeat ;
& > div {
display : flex ;
align-items : center ;
gap : 1 rem ;
& : before {
content : " " ;
height : 2 rem ;
width : 2 rem ;
border : 1 px solid $col-secondary ;
border-radius : .5 rem ;
background-size : 50 % ;
background-position : center ;
background-repeat : no-repeat ;
}
}
}
. phone : before {
background-image : url( "/static/img/icons/phone.svg" ) ;
}
. website : before {
background-image : url( "/static/img/icons/web.svg" ) ;
}
. email : before {
background-image : url( "/static/img/icons/email.svg" ) ;
}
. phone : before {
background-image : url( "/static/img/icons/phone.svg" ) ;
}
. website : before {
background-image : url( "/static/img/icons/web.svg" ) ;
}
. email : before {
background-image : url( "/static/img/icons/email.svg" ) ;
}
a {
text-decoration : none ;
color : inherit ;
a {
text-decoration : none ;
color : inherit ;
& : hover {
color : lighten ( $col-accent , 25 % ) ;
& : hover {
color : lighten ( $col-accent , 25 % ) ;
}
}
}
}
}
}
. faq-list {
width : 100 % ;
margin-top : 5 em ;
& . wrap {
padding : 0 ;
}
. faq {
background-image : url( "/static/img/bg/faq.svg" ) ;
background-repeat : no-repeat ;
background-position : right center ;
background-size : auto 100 % ;
. faq {
position : relative ;
display : grid ;
grid-template-columns : 1 em auto ;
column-gap : 1 em ;
. faq-list {
width : 100 % ;
padding : 2 em ;
cursor : pointer ;
background-color : inherit ;
transition : all .5 s ease ;
margin-top : 5 em ;
/ / Hide bottom border .
margin-bottom : - 1 px ;
& . wrap {
padding : 0 ;
}
border-width : 1 px 0 0 0 ;
border-style : solid ;
border-color : rgba ( 200 , 200 , 200 , 0 .1 ) ;
. faq-card {
position : relative ;
display : grid ;
grid-template-columns : 1 em auto ;
column-gap : 1 em ;
width : 100 % ;
padding : 2 em ;
cursor : pointer ;
& : last-child {
border-width : 1 px 0 ;
}
background-color : inherit ;
transition : all .5 s ease ;
& . active {
border-width : 0 ;
background-color : $col-accent ;
z-index : 1 ;
/ / Hide bottom border .
margin-bottom : - 1 px ;
& : before { border : 0 }
border-width : 1 px 0 0 0 ;
border-style : solid ;
border-color : rgba ( 200 , 200 , 200 , 0 .1 ) ;
. answer {
height : auto ;
margin-top : 1 em ;
opacity : 1 ;
& : last-child {
border-width : 1 px 0 ;
}
. mark : before {
content : " \2212 " ;
& . active {
border-width : 0 ;
background-color : $col-accent ;
z-index : 1 ;
& : before { border : 0 }
. answer {
height : auto ;
margin-top : 1 em ;
opacity : 1 ;
}
. mark : before {
content : " \2212 " ;
}
}
}
. mark {
text-align : center ;
. mark {
text-align : center ;
& : before {
content : " \002B " ;
display : block ;
text-align : right ;
color : #fff ;
font-weight : bold ;
& : before {
content : " \002B " ;
display : block ;
text-align : right ;
color : #fff ;
font-weight : bold ;
font-size : 1 .138 rem ;
}
}
. question {
font-size : 1 .138 rem ;
}
}
. question {
font-size : 1 .138 rem ;
}
. answer {
height : 0 ;
overflow : hidden ;
opacity : 0 ;
transition : all .5 s ease ;
. answer {
height : 0 ;
overflow : hidden ;
opacity : 0 ;
transition : all .5 s ease ;
a {
color : lighten ( $col-bg , 75 % ) ;
}
a {
color : lighten ( $col-bg , 75 % ) ;
ul {
margin : 0 ;
}
}
ul {
margin : 0 ;
}
}
}
}
@ -916,32 +947,29 @@ footer {
}
}
. facts {
. fact-list {
flex-direction : row ;
justify-content : center ;
align-items : stretch ;
gap : 0 ;
. facts . fact-list {
flex-direction : row ;
justify-content : center ;
align-items : stretch ;
gap : 0 ;
. item {
border-right : 1 px solid $col-secondary ;
justify-content : flex-start ;
padding : 0 3 rem ;
max-width : 17 rem ;
. item {
border-right : 1 px solid $col-secondary ;
justify-content : flex-start ;
padding : 0 3 rem ;
max-width : 17 rem ;
& : after {
display : none ;
}
& : after {
display : none ;
}
& : last-child {
border : none ;
}
& : last-child {
border : none ;
}
}
}
. principles {
. principles . principles-list {
grid-template-columns : 1 fr 1 fr ;
. dropdown {
@ -958,19 +986,12 @@ footer {
}
}
. checklist {
. card {
width : 17 em ;
}
}
. stories . stories-list {
flex-direction : row ;
align-items : stretch ;
}
. contact -list . row {
. contacts . contact-list . row {
flex-direction : row ;
margin-bottom : 4 rem ;
@ -987,7 +1008,15 @@ footer {
}
. checklist {
justify-content : center ;
align-items : center ;
. checklist-cards . card {
width : 17 em ;
}
}
. faq {
background-position : 170 % center ;
}
footer . grid {
