Add "Kariera" page
This commit is contained in:
Roman Pyrih
@@ -327,6 +327,7 @@ header#masthead {
|
||||
|
||||
height: 100svh;
|
||||
max-height: calc(100svh - $header-height);
|
||||
overflow: auto;
|
||||
}
|
||||
&.active {
|
||||
}
|
||||
@@ -3386,3 +3387,608 @@ body.page-id-414 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* Kariera
|
||||
body.page-id-473 {
|
||||
main.kariera-page {
|
||||
padding-top: 32px;
|
||||
|
||||
.box-1 {
|
||||
margin-bottom: 48px;
|
||||
|
||||
&:hover {
|
||||
.box-bg {
|
||||
img {
|
||||
transform: scale(1.3);
|
||||
transition: all 10s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
margin-bottom: 150px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.box--wrapper {
|
||||
position: relative;
|
||||
height: 568px;
|
||||
padding: 64px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
height: 460px;
|
||||
}
|
||||
@include respond-below(sm) {
|
||||
padding: 30px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.box-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: brightness(0.7);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
object-position: center;
|
||||
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: 40px;
|
||||
height: 100%;
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
#breadcrumbs_box {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
#breadcrumbs {
|
||||
color: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
.box-head {
|
||||
max-width: 785px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
color: $cWhite;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.96px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
font-size: 40px;
|
||||
}
|
||||
@include respond-below(md) {
|
||||
font-size: 30px;
|
||||
}
|
||||
@include respond-below(sm) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-bottom: 150px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 64px;
|
||||
margin-bottom: 100px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-bottom: 30px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
gap: 50px 24px;
|
||||
}
|
||||
}
|
||||
.posts-more {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
|
||||
&:hover {
|
||||
.loader {
|
||||
&::after,
|
||||
&::before {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: -3px;
|
||||
display: none;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: $cGold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
animation: animloader 1s linear infinite;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
&::after {
|
||||
opacity: 0;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-empty {
|
||||
padding-top: 150px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
.box--wrapper {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.68px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* Single post
|
||||
body.single-kariera {
|
||||
main.page-single-kariera {
|
||||
margin-top: 50px;
|
||||
|
||||
.box-1 {
|
||||
margin-bottom: 120px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include respond-below(lg) {
|
||||
flex-direction: column-reverse;
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
.col {
|
||||
&-1 {
|
||||
// flex: 1;
|
||||
width: 100%;
|
||||
|
||||
@include respond-above(lg) {
|
||||
padding-right: 70px;
|
||||
border-right: 1px solid #d4d4d4;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.btn-back-page {
|
||||
&:hover {
|
||||
path {
|
||||
stroke: $cWhite;
|
||||
}
|
||||
}
|
||||
path {
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
@include respond-above(lg) {
|
||||
flex-basis: 480px;
|
||||
}
|
||||
@include respond-below(lg) {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.post-thumbnail {
|
||||
@include respond-above(lg) {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
}
|
||||
@include respond-below(lg) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
@include respond-below(lg) {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-top: 135px;
|
||||
padding-bottom: 160px;
|
||||
background: #fafafa;
|
||||
|
||||
@include respond-below(lg) {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.row {
|
||||
@include box_title_line(#d4d4d4, #fafafa);
|
||||
|
||||
@include respond-above(lg) {
|
||||
padding-left: 64px;
|
||||
}
|
||||
@include respond-below(lg) {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.box-head {
|
||||
h2 {
|
||||
margin-bottom: 40px;
|
||||
color: $cBlack;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.96px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
|
||||
@include respond-below(lg) {
|
||||
article.article-card {
|
||||
.article-card--wrapper {
|
||||
.article-card--image {
|
||||
a {
|
||||
img {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-card--content {
|
||||
.article-card--title {
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-between(sm, md) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
article.article-card {
|
||||
&:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.kariera {
|
||||
.entry-header {
|
||||
margin: 32px 0;
|
||||
|
||||
h1 {
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.96px;
|
||||
margin: 0;
|
||||
|
||||
@include respond-below(xl) {
|
||||
font-size: 42px;
|
||||
}
|
||||
@include respond-below(md) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
margin-bottom: 50px;
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
position: relative;
|
||||
color: $cBlack;
|
||||
font-family: $fHelveticaNeue;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.48px;
|
||||
padding: 0 0 50px 0;
|
||||
margin: 0 0 16px 0;
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 1px;
|
||||
background: $cGold;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
margin-bottom: 32px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.48px;
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.36px;
|
||||
|
||||
strong {
|
||||
color: $cGold;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cGold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.36px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 1px;
|
||||
background: $cGold;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: custom-counter;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.36px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
counter-increment: custom-counter;
|
||||
content: counter(custom-counter) '.';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
color: $cGold;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure.wp-block-pullquote {
|
||||
padding: 0;
|
||||
margin: 50px 0;
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding: 32px 130px 32px 32px;
|
||||
background-color: #fafafa;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
background-image: url('/wp-content/uploads/2025/08/quote.svg');
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
padding: 24px 70px 24px 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.38px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
cite {
|
||||
position: relative;
|
||||
color: $cBlack;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.36px;
|
||||
padding-left: 35px;
|
||||
margin-top: 24px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 1px;
|
||||
background: $cGold;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@include respond-below(md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-footer {
|
||||
.entry-meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
padding-right: 5px;
|
||||
border-right: 1px solid #8f8f8f;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
color: #8f8f8f;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user