%PDF-
%PDF-
Mini Shell
Mini Shell
.sidebar-column {
.article-item {
&.article--serie {
.article-item--inner {
padding-left: calc-rem(12);
}
.article-item--serie--list {
margin-bottom: 0;
.article-item--serie--item {
.article-item--serie--title {
display: block;
font-size: calc-rem(16);
line-height: calc-lh(16,24);
text-decoration: none;
color: #262626;
span {
text-decoration: underline;
}
}
}
}
}
&.article-item--small {
}
&.article-item--big {
.article-item--title {
font-size: calc-rem(18);
line-height: calc-lh(18,27);
margin-bottom: calc-rem(10);
}
.article-item--thumbnail {
margin-bottom: calc-rem(10);
span {
position: relative;
background: transparent;
font-size: calc-rem(13);
line-height: calc-lh(13,20);
color: #6C6C6C;
padding-left: 0;
padding-bottom: 0;
}
}
.article-item--description {
display: block;
font-size: calc-rem(16);
line-height: calc-lh(16,25);
margin-bottom: calc-rem(20);
}
}
}
}
.banner {
position: relative;
.banner-inner {
position: relative;
margin-top: calc-rem(19);
.annons-label {
margin-bottom: calc-rem(3);
color: #262626;
}
a {
display: block;
img {
display: block;
width: 100%;
}
}
}
}
.banner-content {
padding-bottom: calc-rem(40) !important;
}
.hot-articles {
padding-top: calc-rem(7);
@include media-breakpoint-down(md) {
padding-bottom: calc-rem(7) !important;
}
.hot-articles--title {
display: flex;
justify-content: center;
position: relative;
margin-bottom: calc-rem(35);
&:before {
content: '';
display: block;
position: absolute;
top: 50%;
border-top: solid 1px #191919;
left: 0;
right: 0;
z-index: 1;
}
span {
background: #fff;
z-index: 3;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
font-weight: bold;
padding: 0 calc-rem(12);
letter-spacing: calc-rem(4);
}
}
}
.chronicles {
padding-bottom: calc-rem(40) !important;
.chronicles--inner {
border: solid 1px #191919;
margin-top: calc-rem(10);
}
.chronicles--title {
display: flex;
justify-content: center;
position: relative;
margin-top: calc-rem(-10);
span {
background: #fff;
z-index: 3;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
font-weight: bold;
padding: 0 calc-rem(12);
letter-spacing: calc-rem(5);
}
}
.chronicles--list {
padding: calc-rem(40);
padding-bottom: calc-rem(25);
.chronicles-item {
position: relative;
margin-bottom: calc-rem(55);
&:last-child {
margin-bottom: 0;
}
&:before {
z-index: 1;
content: '';
display: block;
width: 50px;
height: 50px;
background: url('../img/quote.svg');
background-size: cover;
position: absolute;
left: calc-rem(-20);
top: calc-rem(-30);
}
> * {
z-index: 2;
position: relative;
}
.chronicles-item--title {
font-family: $font-playfair;
font-size: calc-rem(16);
line-height: calc-lh(16,24);
color: #262626;
text-decoration: none;
margin-bottom: calc-rem(8);
display: block;
}
.chronicles-item--author {
font-size: calc-rem(14);
color: #7C7C7C;
a {
color: #262626;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
}
}
}
}
.chronicles--button {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: calc-rem(15);
padding: calc-rem(17) calc-rem(20);
background: $primary;
color: #fff;
transition: $transition_normal;
i {
margin-left: calc-rem(10);
}
&:hover {
background: #1D1D1D;
}
}
}
.hot-categories {
.hot-categories--inner {
background: #F0EEEA;
padding-top: calc-rem(30);
}
.hot-categories--title {
display: flex;
justify-content: center;
position: relative;
span {
z-index: 3;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
font-weight: bold;
padding: 0 calc-rem(12);
letter-spacing: calc-rem(5);
}
}
.hot-categories--list {
padding: calc-rem(18) calc-rem(20) calc-rem(30) calc-rem(20);
.hot-categories--item {
position: relative;
margin-bottom: calc-rem(10);
display: flex;
align-items: center;
padding: calc-rem(4);
text-decoration: none;
box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.2);
color: #262626;
background: #fff;
&:hover {
background: $primary;
color: #fff;
}
span {
flex: 1 1;
display: block;
min-width: 1px;
font-size: calc-rem(16);
line-height: calc-lh(16,21);
}
img {
margin-right: calc-rem(15);
}
i {
margin-right: calc-rem(15);
margin-left: calc-rem(15);
font-size: calc-rem(14);
}
}
}
.hot-categories--button {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: calc-rem(15);
padding: calc-rem(17) calc-rem(20);
background: $primary;
color: #fff;
i {
margin-left: calc-rem(10);
}
}
}
.article-item--category {
font-size: calc-rem(15);
line-height: calc-lh(15,24);
text-decoration: none;
font-weight: bold;
letter-spacing: calc-rem(2);
display: inline-block;
margin-right: calc-rem(15);
text-transform: uppercase;
}
.article-item--company {
display: inline-flex;
text-transform: uppercase;
color: #909090;
font-size: calc-rem(14);
margin-right: calc-rem(15);
align-items: center;
min-height: calc-rem(22);
padding-top: calc-rem(1);
min-width: 1px;
a {
text-decoration: none;
color: #909090;
margin-left: calc-rem(5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 1px;
}
}
.article-label {
display: inline-block;
font-size: calc-rem(11);
line-height: calc-lh(11,22);
padding: 0 10px;
background: #4D4D4D;
color: #fff;
text-transform: uppercase;
margin-right: calc-rem(17);
&.article-label--serie {
background: #2B3A5D;
}
&.article-label--chronicle {
background: #E6DB81;
color: #000000;
}
}
.article-save-btn {
text-transform: uppercase;
display: flex;
align-items: center;
color: #909090;
font-size: calc-rem(14);
background: none;
border: none;
padding: 0;
i {
margin-left: calc-rem(10);
}
&:hover {
color: $primary;
}
&.active {
color: $primary;
}
}
.share-btn--wrapper {
display: flex;
align-items: center;
.share-btn--title {
margin-right: calc-rem(14);
font-size: calc-rem(14);
color: #909090;
}
.share-btn {
display: flex;
a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background: #2B3A5D;
color: #fff;
cursor: pointer;
&:hover {
background: $primary;
}
& + a {
margin-left: calc-rem(10);
}
}
}
}
.article-labels {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.article-author {
font-size: calc-rem(14);
color: #7C7C7C;
margin-bottom: 0;
margin-right: calc-rem(20);
white-space: nowrap;
display: flex;
min-width: 1px;
a {
color: #262626;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: calc-rem(5);
min-width: 1px;
}
}
.article-tags {
ul {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
li {
margin-right: calc-rem(20);
a {
font-size: calc-rem(16);
line-height: calc-lh(16,30);
color: #909090;
}
}
}
}
.article-item--serie--wrapper {
.article-item--serie--wrapper--title {
font-size: calc-rem(22);
line-height: calc-lh(22,33);
font-weight: bold;
color: #2B3A5D;
margin-bottom: calc-rem(18);
@include media-breakpoint-down(md) {
font-size: calc-rem(20);
line-height: calc-lh(20,33);
margin-bottom: calc-rem(8);
}
}
}
.article-item--serie--list {
overflow: hidden;
margin-bottom: calc-rem(35);
.swiper-slide {
max-width: calc-rem(280);
}
.article-item--serie--item {
max-width: calc-rem(280);
position: relative;
img {
max-width: 100%;
width: 100%;
margin-bottom: calc-rem(22);
}
.article-item--serie--title {
display: block;
font-size: calc-rem(18);
line-height: calc-lh(18,27);
text-decoration: none;
color: #262626;
@include media-breakpoint-down(md) {
font-size: calc-rem(16);
line-height: calc-lh(16,24);
}
&:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
span {
text-decoration: underline;
}
}
}
}
.article-item {
&.article--serie {
.article-item--inner {
padding-left: calc-rem(35);
padding-top: calc-rem(7);
padding-bottom: calc-rem(7);
border-left: solid 5px $primary;
@include media-breakpoint-down(md) {
padding-left: calc-rem(15);
padding-top: calc-rem(3);
}
}
}
&.article-item--small {
display: flex;
@include media-breakpoint-down(md) {
position: relative;
}
.article-item--thumbnail {
width: 100%;
max-width: calc-rem(67);
margin-right: calc-rem(16);
margin-bottom: calc-rem(45);
display: block;
}
.article-item--info {
padding-top: calc-rem(3);
margin-bottom: calc-rem(25);
.article-item--category {
display: block;
margin-bottom: 0;
width: 100%;
font-size: calc-rem(13);
line-height: calc-lh(13,17);
text-transform: uppercase;
}
.article-item--info--labels {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: calc-rem(3);
.article-item--title {
display: block;
}
.article-item--company,
.article-label {
margin-top: calc-rem(3);
margin-bottom: calc-rem(3);
}
}
}
.article-item--saved {
display: flex;
padding-left: calc-rem(20);
margin-left: calc-rem(20);
@include media-breakpoint-down(md) {
padding-left: 0;
margin-left: 0;
justify-content: center;
margin-top: calc-rem(20);
}
button {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
font-size: calc-rem(40);
padding: calc-rem(10) calc-rem(30);
@include media-breakpoint-down(md) {
padding: calc-rem(20) calc-rem(30) 0 calc-rem(30);
font-size: calc-rem(30);
text-align: center;
}
}
}
.article-item--title {
font-size: calc-rem(18);
line-height: calc-lh(18,27);
color: #262626;
text-decoration: none;
margin-bottom: 0;
&:hover {
text-decoration: underline;
}
}
}
&.article-item--big {
.article-item--inner {
> * {
&:last-child {
margin-bottom: 0 !important;
}
}
}
.article-labels {
margin-bottom: calc-rem(7);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(10);
}
}
.article-save-btn {
margin-left: auto;
margin-right: calc-rem(20);
}
.article-author {
@include media-breakpoint-down(md) {
display: none;
}
}
.article-item--title {
color: #262626;
text-decoration: none;
font-size: calc-rem(39.5);
line-height: calc-lh(40,54);
display: block;
margin-bottom: calc-rem(20);
@include media-breakpoint-down(md) {
font-size: calc-rem(18);
line-height: calc-lh(18,27);
margin-bottom: calc-rem(12);
}
}
.article-item--thumbnail {
display: block;
position: relative;
margin-bottom: calc-rem(15);
text-decoration: none;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(10);
}
img {
width: 100%;
max-width: 100%;
z-index: 1;
}
span {
z-index: 2;
position: absolute;
left: 0;
bottom: 0;
display: block;
background: rgba($color: #000000, $alpha: 0.25);
color: #D0D0D0;
font-size: calc-rem(13);
padding: calc-rem(8) calc-rem(12);
@include media-breakpoint-down(md) {
position: relative;
padding: calc-rem(8) 0 0 0;
background: none;
color: #6C6C6C;
}
}
}
.article-item--description {
display: block;
font-size: calc-rem(20);
line-height: calc-lh(20,30);
margin-bottom: calc-rem(20);
@include media-breakpoint-down(md) {
font-size: calc-rem(16);
}
}
}
}
.editorials {
padding: calc-rem(45) 0 calc-rem(20) 0;
background: #1D1D1D;
.editorials-title {
display: flex;
justify-content: center;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
letter-spacing: calc-rem(4.5);
font-weight: 900;
margin-bottom: calc-rem(47);
color: #B1B1B1;
@include media-breakpoint-down(md) {
overflow: hidden;
}
span {
position: relative;
display: block;
padding: 0 calc-rem(7) 0 calc-rem(10);
&:before,
&:after {
content: '';
display: block;
width: calc-rem(50);
border-bottom: solid 1px #B1B1B1;
top: 50%;
position: absolute;
}
&:before {
right: 100%;
}
&:after {
left: 100%;
}
}
}
.article-item {
&.article-item--small {
.article-item--title {
color: #fff;
}
}
}
.row {
> * {
&:nth-child(1) {
.article-item--category {
color: #98A6C3;
}
}
&:nth-child(2) {
.article-item--category {
color: #28897E;
}
}
&:nth-child(3) {
.article-item--category {
color: #AD7253;
}
}
&:nth-child(4) {
.article-item--category {
color: #B1799D;
}
}
}
}
}
.load-more-posts {
width: 100%;
display: flex;
border: solid 1px #D6D6D6;
background: transparent;
align-items: center;
justify-content: center;
padding: calc-rem(24) calc-rem(20);
font-size: calc-rem(15);
transition: $transition_normal;
i {
margin-left: calc-rem(12);
}
&:hover {
color: #fff;
background: #1D1D1D;
border: solid 1px #1D1D1D;
}
&:disabled {
background: #ececec !important;
color: #bbbbbb !important;
border: solid 1px #ececec !important;
cursor: not-allowed;
}
}
.do-not-mess {
padding: calc-rem(22) 0 calc-rem(42) 0;
background: #F0EEEA;
.do-not-mess--title {
text-align: center;
color: #191919;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
font-weight: bold;
letter-spacing: calc-rem(4);
margin-bottom: calc-rem(24);
}
a {
display: block;
margin-bottom: calc-rem(30);
img {
width: 100%;
}
}
}
.related-articles {
.related-articles--title {
display: flex;
justify-content: center;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
letter-spacing: calc-rem(4.5);
font-weight: 900;
margin-bottom: calc-rem(35);
color: #191919;
position: relative;
&:before {
content: '';
display: block;
border-bottom: solid 1px #191919;
top: 50%;
position: absolute;
left: 0;
right: 0;
}
span {
position: relative;
display: block;
padding: 0 calc-rem(7) 0 calc-rem(10);
background: #fff;
}
}
}
.page--offer--item {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(30);
height: auto;
}
.page--offer--item--inner {
padding: calc-rem(50) calc-rem(40) calc-rem(40) calc-rem(40);
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1;
@include media-breakpoint-down(md) {
padding: calc-rem(50) calc-rem(20) calc-rem(20) calc-rem(20);
}
}
&.offer-left {
background: #247474;
}
&.offer-right {
background: #2647B4;
}
.page--offer--item--img {
flex: 1 1;
display: flex;
align-items: flex-end;
margin-bottom: calc-rem(57);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(32);
}
img {
@include media-breakpoint-down(md) {
max-height: calc-rem(180);
}
}
}
.page--offer--item--button {
width: 100%;
a {
display: flex;
padding: calc-rem(15);
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
background: rgba($color: #2B3A5D, $alpha: 0.5);
&:hover {
background: rgba($color: #2B3A5D, $alpha: 0.2);
}
i {
margin-left: calc-rem(10);
}
}
}
h3 {
font-size: calc-rem(28);
line-height: calc-lh(28,36);
font-weight: 800;
max-width: calc-rem(630);
margin-bottom: calc-rem(20);
color: #fff;
@include media-breakpoint-down(md) {
font-size: calc-rem(24);
line-height: calc-lh(24,28);
}
}
p {
font-size: calc-rem(20);
line-height: calc-lh(20,29);
color: #C4CBCC;
@include media-breakpoint-down(md) {
font-size: calc-rem(17);
line-height: calc-lh(17,26);
}
}
a {
color: #C4CBCC;
&:hover {
text-decoration: none;
}
}
&.offer-chronicle {
height: auto;
.page--offer--item--inner {
padding: 0;
.page--offer--item--img {
margin: 0;
width: 100%;
img {
max-width: 100%;
}
}
.page--offer--item--text {
background: #f7f3cf;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 calc-rem(60);
padding-bottom: calc-rem(20);
h3 {
color: #0F0F0F;
}
p {
color: #0F0F0F;
}
a {
color: #0F0F0F;
}
}
}
.page--offer--item--button {
a {
background: #1D1D1D;
&:hover {
background: rgba($color: #1D1D1D, $alpha: 0.8);
}
}
}
}
}
Zerion Mini Shell 1.0