/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Resources/styles.scss
@import "styles/_typography.scss";
@import "styles/_mixins.scss";
.resources {
&-title {
h2 {
margin: 50px 0 104px;
}
}
&-tabs {
display: flex;
flex-direction: column;
border-radius: 8px;
border: 1px solid var(--Grey);
margin-bottom: 64px;
&-item {
@include button-text;
cursor: pointer;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.5s;
&__dot {
opacity: 0;
border-radius: 50%;
height: 8px;
width: 8px;
background-color: var(--Blue-purple);
transition: 0.5s;
}
&:hover {
color: var(--Blue-purple);
background-color: var(--Light-Grey);
}
&.active {
color: var(--Blue-purple);
background-color: var(--Light-Grey);
.resources-tabs-item__dot {
opacity: 1;
}
}
}
}
&__body {
&__main-image {
width: 100%;
margin-bottom: 40px;
}
section {
border-bottom: 1px solid var(--Grey);
padding-bottom: 40px;
margin-bottom: 40px;
}
a {
@include button-text;
color: var(--Blue-purple);
}
h3 {
margin-bottom: 24px;
}
.description2 {
margin: 32px 0 8px;
}
.body1 {
margin-bottom: 32px;
}
p {
opacity: 0.7;
margin-bottom: 16px;
}
p ~ strong {
opacity: 1;
}
ul {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
li {
padding-left: 16px;
opacity: 0.7;
&::before {
content: "";
display: inline-block;
border-radius: 50%;
height: 8px;
width: 8px;
background-color: var(--Lavender);
margin-right: 10px;
}
}
}
blockquote {
padding: 24px;
border-radius: 8px;
background: var(--Light-Grey);
display: flex;
@include body1;
gap: 24px;
margin-top: 40px;
&::before {
content: url("../../assets/icons//quote.svg");
display: block;
height: 40px;
width: 40px;
}
}
}
&-last-update {
padding-bottom: 64px;
}
@include w($lg) {
&-tabs {
margin-bottom: 20px;
}
&__body {
section {
padding-bottom: 0px;
margin-bottom: 32px;
}
}
}
}