You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

217 lines
3.8 KiB

.faq {
&__light{
.faq{
&__list{
li{
background-color: white !important;
border: 1px solid black !important;
p{
color: black !important;
}
}
}
}
}
header {
width: 100%;
margin: 0px auto;
padding-top: 40px;
h1 {
color: white;
margin-bottom: 15px;
}
p {
color: $gray11;
}
input {
background-color: $gray5;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: none;
color: white;
flex: 1;
&::placeholder {
color: $gray11;
}
}
button {
background-color: $gray1;
border: none;
margin-right: 2px;
width: 70px;
height: 60px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
&__list {
width: 100%;
margin: 0px auto !important;
padding-top: 30px !important;
li{
background-color: $gray5;
margin-bottom: 15px;
cursor: pointer;
border-radius: 5px;
}
&--itemHeader {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px;
strong {
color: $green;
}
img{
width: 30px;
}
}
&--itemBody {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding:0px 10px 30px;
p {
color: white;
}
}
}
}
@media screen and (min-width: 1441px) {
.faq {
header {
max-width: 800px;
h1 {
font-size: 24px;
}
p {
font-size: 16px;
margin-bottom: 30px;
}
input {
padding: 10px 20px 10px 0px;
font-size: 17px;
}
img {
width: 30px;
}
}
&__list{
max-width: 1040px;
strong{
font-size: 16px;
}
p{
font-size: 15px;
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.faq {
header {
max-width: 700px;
h1 {
font-size: calc(100vw / 55);
}
p {
font-size: calc(100vw / 95);
margin-bottom: 20px;
}
input {
padding: 5px 10px 5px 0px;
font-size: calc(100vw / 95);
}
img {
width: 30px;
}
button{
width: 60px;
height: 50px;
}
}
&__list{
max-width: 900px;
strong{
font-size: calc(100vw / 95);
}
p{
font-size: calc(100vw / 100);
}
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.faq {
background : black;
padding: 50px 20px 20px;
header {
max-width: 700px;
h1 {
font-size: calc(100vw / 25);
}
p {
font-size: calc(100vw / 35);
margin-bottom: 30px;
}
input {
padding: 5px 10px 5px 0px;
font-size: calc(100vw / 40);
}
img {
width: 35px;
}
button{
width: 60px;
height: 55px;
}
}
&__list{
max-width: 700px;
strong{
font-size: calc(100vw / 40);
}
p{
font-size: calc(100vw / 45);
}
}
}
}
@media screen and (max-width: 640px) {
.faq {
background : black;
padding: 50px 20px 20px;
header {
max-width: 700px;
h1 {
font-size: calc(100vw / 18);
}
p {
font-size: calc(100vw / 30);
margin-bottom: 30px;
}
input {
padding: 5px 10px 5px 0px;
font-size: calc(100vw / 30);
}
img {
width: 30px;
}
button{
width: 50px;
height: 45px;
}
}
&__list{
strong{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 34);
}
}
}
}