Home page
This commit is contained in:
Roman Pyrih
@@ -287,6 +287,28 @@ header#masthead .row nav#site-navigation ul#primary-menu {
|
||||
gap: 50px;
|
||||
justify-content: center;
|
||||
}
|
||||
header#masthead .row nav#site-navigation ul#primary-menu li {
|
||||
position: relative;
|
||||
}
|
||||
header#masthead .row nav#site-navigation ul#primary-menu li.current-menu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
header#masthead .row nav#site-navigation ul#primary-menu li.current-menu-item::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #d9ba5c;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
header#masthead .row nav#site-navigation ul#primary-menu li.current-menu-item a {
|
||||
color: #d9ba5c;
|
||||
}
|
||||
header#masthead .row nav#site-navigation ul#primary-menu li a {
|
||||
color: #232323;
|
||||
font-size: 16px;
|
||||
@@ -302,6 +324,131 @@ header#masthead .row .main-navigation-secondary {
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
footer#site-footer {
|
||||
background: #232323;
|
||||
}
|
||||
footer#site-footer .footer-1 {
|
||||
padding-top: 140px;
|
||||
padding-bottom: 90px;
|
||||
border-bottom: 1px solid #9e9e9e;
|
||||
}
|
||||
footer#site-footer .footer-1 .row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 60px;
|
||||
column-gap: 60px;
|
||||
}
|
||||
footer#site-footer .footer-1 .row .col-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-width: 636px;
|
||||
}
|
||||
footer#site-footer .footer-1 .row .col-1 img {
|
||||
width: 239px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
footer#site-footer .footer-1 .row .col-1 h2 {
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.96px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
footer#site-footer .footer-1 .row .col-1 p {
|
||||
color: #9e9e9e;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.38px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
footer#site-footer .footer-1 .row .col-2 img {
|
||||
width: 100%;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
margin-top: -190px;
|
||||
}
|
||||
footer#site-footer .footer-2 {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
footer#site-footer .footer-2 .row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-1 {
|
||||
flex-basis: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: 20px;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-1 p {
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.32px;
|
||||
margin: 0;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-1 a {
|
||||
color: #9e9e9e;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-2 {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-2 ol {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
-moz-column-gap: 30px;
|
||||
column-gap: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
footer#site-footer .footer-2 .row .col-2 ol li p {
|
||||
color: #9e9e9e;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
|
||||
article.article-card .article-card--wrapper .article-card--image {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
article.article-card .article-card--wrapper .article-card--image a img {
|
||||
width: 100%;
|
||||
height: 286px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
article.article-card .article-card--wrapper .article-card--content .article-card--title {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
article.article-card .article-card--wrapper .article-card--content .article-card--title h3 {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.45px;
|
||||
}
|
||||
article.article-card .article-card--wrapper .article-card--content .article-card--title h3 a {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
body.page-id-25 main {
|
||||
margin-top: 60px;
|
||||
}
|
||||
@@ -352,27 +499,51 @@ body.page-id-25 main .box-1 .box-quote p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
body.page-id-25 main .box-2 {
|
||||
position: relative;
|
||||
padding-top: 220px;
|
||||
padding-bottom: 180px;
|
||||
background: #232323;
|
||||
}
|
||||
body.page-id-25 main .box-2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 105px;
|
||||
background: linear-gradient(0deg, #d9d9d9 0%, rgba(255, 255, 255, 0) 100%);
|
||||
transform: translateY(-100%);
|
||||
z-index: -1;
|
||||
}
|
||||
body.page-id-25 main .box-2 .row .col-1 {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
max-width: 474px;
|
||||
padding-left: 64px;
|
||||
position: relative;
|
||||
}
|
||||
body.page-id-25 main .box-2 .row .col-1::before {
|
||||
content: attr(box-title);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #232323;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-2 .row .col-1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #ffffff;
|
||||
}
|
||||
body.page-id-25 main .box-2 .row .col-1 .box-text {
|
||||
margin-bottom: 64px;
|
||||
@@ -386,4 +557,352 @@ body.page-id-25 main .box-2 .row .col-1 .box-text p {
|
||||
}
|
||||
body.page-id-25 main .box-2 .row .col-1 .box-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body.page-id-25 main .box-3 {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 215px;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
padding-top: 160px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row::before {
|
||||
content: attr(box-title);
|
||||
color: #d4d4d4;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #d4d4d4;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
-moz-column-gap: 40px;
|
||||
column-gap: 40px;
|
||||
row-gap: 50px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul li:not(.last) h2 {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.68px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul li:not(.last) p {
|
||||
color: #d9ba5c;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul li.last {
|
||||
padding: 32px 40px;
|
||||
background: #f7f3e9;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul li.last h2 {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
}
|
||||
body.page-id-25 main .box-3 .row ul li.last p {
|
||||
color: #d9ba5c;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
body.page-id-25 main .box-4 {
|
||||
position: relative;
|
||||
padding-top: 164px;
|
||||
padding-bottom: 164px;
|
||||
background: #232323;
|
||||
}
|
||||
body.page-id-25 main .box-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 105px;
|
||||
background: linear-gradient(0deg, #d9d9d9 0%, rgba(255, 255, 255, 0) 100%);
|
||||
transform: translateY(-100%);
|
||||
z-index: -1;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 110px;
|
||||
column-gap: 110px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-1 {
|
||||
position: relative;
|
||||
padding-left: 110px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-1::before {
|
||||
content: attr(box-title);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #232323;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #ffffff;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-1 img {
|
||||
width: 100%;
|
||||
max-width: 627px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-2 ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 64px;
|
||||
max-width: 345px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-2 ul li h3 {
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.68px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-2 ul li p {
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.38px;
|
||||
}
|
||||
body.page-id-25 main .box-4 .row .col-2 ul li p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body.page-id-25 main .box-5 {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote::before {
|
||||
content: attr(box-title);
|
||||
color: #d4d4d4;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #d4d4d4;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote h3 {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.38px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote .big-quote-text {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote .big-quote-text p {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.53px;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote .big-quote-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote .big-quote-text p strong {
|
||||
color: #d9ba5c;
|
||||
font-weight: 400;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote ol {
|
||||
margin: 40px 0 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
body.page-id-25 main .box-5 .row .big-quote ol li:not(:first-child) {
|
||||
margin-left: -24px;
|
||||
}
|
||||
body.page-id-25 main .box-6 {
|
||||
position: relative;
|
||||
background: #fafafa;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 100px;
|
||||
column-gap: 100px;
|
||||
padding: 160px 0 125px;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1 {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
width: 100%;
|
||||
max-width: 588px;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1::before {
|
||||
content: attr(box-title);
|
||||
color: #d4d4d4;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #fafafa;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #d4d4d4;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1 .box-text {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1 .box-text p {
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.53px;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1 .box-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-1 ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
-moz-column-gap: 40px;
|
||||
column-gap: 40px;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
body.page-id-25 main .box-6 .row .col-2 img {
|
||||
height: 100%;
|
||||
width: 673px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
}
|
||||
body.page-id-25 main .box-7 {
|
||||
padding-top: 164px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
body.page-id-25 main .box-7 .row {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
body.page-id-25 main .box-7 .row::before {
|
||||
content: attr(box-title);
|
||||
color: #d4d4d4;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
}
|
||||
body.page-id-25 main .box-7 .row::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #d4d4d4;
|
||||
}/*# sourceMappingURL=custom.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -6,12 +6,71 @@ $cWhite: #ffffff;
|
||||
$cGold: #d9ba5c;
|
||||
$cGolder: #ba962b;
|
||||
$cGray: #8b8b8b;
|
||||
$cGray2: #9e9e9e;
|
||||
$cBlack: #232323;
|
||||
$cLightGray: #d9d9d9;
|
||||
|
||||
$fHelveticaNeue: 'Helvetica Neue', sans-serif;
|
||||
|
||||
$header-height: 77px;
|
||||
|
||||
@mixin h2($color) {
|
||||
color: $color;
|
||||
font-weight: 500;
|
||||
font-size: 64px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -1.4px;
|
||||
}
|
||||
|
||||
@mixin box_title_line($color, $bgColor) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: attr(box-title);
|
||||
color: $color;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.34px;
|
||||
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
padding-top: 24px;
|
||||
background: $bgColor;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box_top_shadow($color) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 105px;
|
||||
background: linear-gradient(0deg, $color 0%, rgba(255, 255, 255, 0) 100%);
|
||||
transform: translateY(-100%);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
//* Global
|
||||
* {
|
||||
font-family: $fHelveticaNeue;
|
||||
}
|
||||
@@ -136,14 +195,6 @@ $header-height: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h2($color) {
|
||||
color: $color;
|
||||
font-weight: 500;
|
||||
font-size: 64px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -1.4px;
|
||||
}
|
||||
|
||||
header#masthead {
|
||||
height: $header-height;
|
||||
|
||||
@@ -169,6 +220,30 @@ header#masthead {
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.current-menu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: $cGold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cGold;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cBlack;
|
||||
font-size: 16px;
|
||||
@@ -206,6 +281,160 @@ header#masthead {
|
||||
}
|
||||
}
|
||||
|
||||
footer#site-footer {
|
||||
background: $cBlack;
|
||||
|
||||
.footer-1 {
|
||||
padding-top: 140px;
|
||||
padding-bottom: 90px;
|
||||
border-bottom: 1px solid $cGray2;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 60px;
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-width: 636px;
|
||||
|
||||
img {
|
||||
width: 239px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $cWhite;
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.96px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
p {
|
||||
color: $cGray2;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.38px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
margin-top: -190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-2 {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
flex-basis: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: 20px;
|
||||
|
||||
p {
|
||||
color: $cWhite;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cGray2;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
flex-basis: 60%;
|
||||
|
||||
ol {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
column-gap: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
p {
|
||||
color: $cGray2;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.article-card {
|
||||
.article-card--wrapper {
|
||||
.article-card--image {
|
||||
margin-bottom: 24px;
|
||||
|
||||
a {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 286px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-card--content {
|
||||
.article-card--title {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.45px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
> a {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* Home
|
||||
body.page-id-25 {
|
||||
main {
|
||||
@@ -263,6 +492,7 @@ body.page-id-25 {
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
@include box_top_shadow($cLightGray);
|
||||
padding-top: 220px;
|
||||
padding-bottom: 180px;
|
||||
background: $cBlack;
|
||||
@@ -270,24 +500,9 @@ body.page-id-25 {
|
||||
.row {
|
||||
.col {
|
||||
&-1 {
|
||||
position: relative;
|
||||
padding-left: 64px;
|
||||
max-width: 474px;
|
||||
|
||||
&::before {
|
||||
content: attr(box-title);
|
||||
color: $cWhite;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 0;
|
||||
letter-spacing: -0.34px;
|
||||
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
padding-left: 64px;
|
||||
@include box_title_line($cWhite, $cBlack);
|
||||
|
||||
.box-text {
|
||||
margin-bottom: 64px;
|
||||
@@ -308,5 +523,263 @@ body.page-id-25 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 215px;
|
||||
|
||||
.row {
|
||||
@include box_title_line(#d4d4d4, $cWhite);
|
||||
padding-left: 64px;
|
||||
padding-top: 160px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
column-gap: 40px;
|
||||
row-gap: 50px;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
&:not(.last) {
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.68px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $cGold;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
}
|
||||
}
|
||||
&.last {
|
||||
padding: 32px 40px;
|
||||
background: #f7f3e9;
|
||||
border-radius: 6px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $cGold;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
@include box_top_shadow($cLightGray);
|
||||
padding-top: 164px;
|
||||
padding-bottom: 164px;
|
||||
background: $cBlack;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 110px;
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
@include box_title_line($cWhite, $cBlack);
|
||||
padding-left: 110px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 627px;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 64px;
|
||||
max-width: 345px;
|
||||
|
||||
li {
|
||||
h3 {
|
||||
color: $cWhite;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.68px;
|
||||
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
color: $cWhite;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.38px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-5 {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.row {
|
||||
.big-quote {
|
||||
@include box_title_line(#d4d4d4, $cWhite);
|
||||
padding-left: 64px;
|
||||
|
||||
h3 {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.38px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.big-quote-text {
|
||||
margin-bottom: 40px;
|
||||
|
||||
p {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.53px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $cGold;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 40px 0 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
li {
|
||||
&:not(:first-child) {
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-6 {
|
||||
position: relative;
|
||||
background: #fafafa;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 100px;
|
||||
padding: 160px 0 125px;
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
@include box_title_line(#d4d4d4, #fafafa);
|
||||
padding-left: 64px;
|
||||
width: 100%;
|
||||
max-width: 588px;
|
||||
|
||||
.box-text {
|
||||
margin-bottom: 120px;
|
||||
|
||||
p {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.53px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
column-gap: 40px;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 673px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-7 {
|
||||
padding-top: 164px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.row {
|
||||
@include box_title_line(#d4d4d4, $cWhite);
|
||||
padding-left: 64px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user