.layout {
height: auto;
display: flex;
justify-content: space-between;
align-items: start;
gap: 32px;
margin-block: var(--spacer-120);
.sidebar {
max-width: 290px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: var(--spacer-60);
position: sticky;
top: 20px;
margin-top: 80px;
.sidebar_list {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 20px;
padding-left: 16px;
border-left: 1px solid var(--bg-grey1);
li {
position: relative;
list-style-type: none;
a {
text-decoration: none;
color: var(--text-grey5);
&.inView {
color: var(--text-arcon-red);
font-size: 16px;
font-weight: 400;
line-height: 26px;
&::before {
opacity: 1;
}
}
&::before {
position: absolute;
content: '';
top: 0;
left: -18px;
width: 3px;
height: 100%;
border-radius: 5px;
background: var(--bg-arcon-red);
opacity: 0;
transition: opacity 0.3s ease;
}
}
}
}
.sidebar_social {
width: 100%;
height: auto;
display: flex;
gap: var(--spacer-24);
}
@media screen and (max-width: 1024px) {
& {
display: none;
}
}
}
.main-content {
width: 100%;
height: auto;
.contentSection {
width: 100%;
height: auto;
padding-bottom: var(--spacer-32);
border-bottom: 1px solid var(--bg-grey1);
ul {
margin-block: 24px;
li {
margin-bottom: 24px;
}
}
&:not(:first-child) {
padding-top: var(--spacer-32);
}
}
}
@media screen and (max-width: 1024px) {
& {
flex-direction: column;
}
}
}
@media screen and (max-width: 1024px) {
.anchor-container {
width: 100%;
height: auto;
z-index: 6;
position: sticky;
background: none;
top: 50px;
margin-bottom: 40px;
.anchorDropdown {
.anchor-dropdown {
position: relative;
width: 100%;
}
.anchor-cta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(177deg, #fff 100%, #fff 100%) padding-box,
var(--blue-red-gradient) border-box;
transition: all 0.5s ease;
.anchor-title {
transition: all 0.5s ease;
}
}
.cta-arrow {
transition: transform 0.3s ease;
}
.titles-container {
position: absolute;
top: calc(100% + (-1px));
left: 0;
width: 100%;
max-height: 0;
transition: max-height 0.3s ease;
overflow: hidden;
background-color: #fff; border-top: 0;
border-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
z-index: 10;
}
.dropdown-title {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
color: var(--text-black-primary);
}
.dropdown-title.active {
color: var(--text-black-primary);
opacity: 0.4;
}
.dropdown-open .titles-container {
max-height: 500px;
transition: max-height 0.3s ease;
}
.displayNone {
border: 0;
}
.dropdown-open .anchor-cta {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown-open .cta-arrow {
transform: rotate(180deg);
}
}
}
}