3422 lines
58 KiB
CSS
3422 lines
58 KiB
CSS
.thankyou-title h2 {color:#121212;
|
||
color: #000;
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
}
|
||
|
||
.about-area .container {max-width: 100% !important; padding:0px 5%;}
|
||
.about-area_home .container {max-width: 100% !important; padding:0px 5%;}
|
||
|
||
.team-info-front span {text-align: left !important;}
|
||
|
||
|
||
/* ===== Iframe / Lenis jitter fix ===== */
|
||
|
||
iframe {
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
|
||
.card-thumb-video iframe,
|
||
.flip-card-media iframe,
|
||
.pulse-preview-img iframe,
|
||
.mobile-service-preview iframe,
|
||
.portfolio-video-embed iframe {
|
||
pointer-events: none !important;
|
||
touch-action: none !important;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
|
||
.inspiration-overlay-slider .flip-card {
|
||
|
||
pointer-events: auto !important;
|
||
|
||
cursor: pointer !important;
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ===== Video wrapper ===== */
|
||
|
||
.flip-card-media {
|
||
position: relative;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
overflow: hidden;
|
||
|
||
border-radius: 10px;
|
||
|
||
transform: translateZ(0);
|
||
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
|
||
.flip-card-media iframe {
|
||
position: absolute;
|
||
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 240%;
|
||
height: 145%;
|
||
|
||
border: 0;
|
||
|
||
transform:
|
||
translate(-50%, -50%)
|
||
translateZ(0);
|
||
|
||
pointer-events: none;
|
||
|
||
will-change: transform;
|
||
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
|
||
opacity: 1;
|
||
|
||
transition: opacity 0s linear;
|
||
}
|
||
|
||
|
||
/* kill iframe instantly */
|
||
|
||
.flip-card.active .flip-card-media iframe {
|
||
opacity: 0;
|
||
}
|
||
|
||
|
||
/* ===== Back ===== */
|
||
|
||
.flip-card-back {
|
||
z-index: 1;
|
||
|
||
transform:
|
||
rotateY(180deg)
|
||
translateZ(0);
|
||
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
/* ===== Team slider Bunny video fix ===== */
|
||
|
||
.card-thumb {
|
||
position: relative;
|
||
height: 425px;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
|
||
.card-thumb img {
|
||
width: 100% !important;
|
||
height: 425px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.card-thumb iframe {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 300%;
|
||
height: 300%;
|
||
|
||
border: 0;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.team-info {
|
||
position: relative;
|
||
z-index: 5;
|
||
}
|
||
|
||
.team-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== Team slider Bunny video final cover ===== */
|
||
|
||
.card-thumb iframe {
|
||
position: absolute;
|
||
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 300%;
|
||
height: 300%;
|
||
|
||
border: 0;
|
||
|
||
transform: translate(-50%, -50%);
|
||
|
||
pointer-events: none;
|
||
|
||
z-index: 1;
|
||
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
will-change: transform;
|
||
}
|
||
|
||
|
||
/* ===== Mobile Services Preview: image + video support ===== */
|
||
|
||
@media (max-width: 767px) {
|
||
.mobile-service-preview {
|
||
position: fixed !important;
|
||
right: 10px;
|
||
bottom: 30px;
|
||
|
||
width: 160px;
|
||
height: 110px;
|
||
|
||
overflow: hidden;
|
||
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(12px) scale(.92);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
|
||
transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
|
||
}
|
||
|
||
.mobile-service-preview.is-visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
.mobile-service-preview img,
|
||
.mobile-service-preview iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border: 0;
|
||
object-fit: cover;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.mobile-service-preview.is-video-preview iframe {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 185%;
|
||
height: 185%;
|
||
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.mobile-service-preview {
|
||
visibility: visible !important;
|
||
opacity: 0;
|
||
}
|
||
|
||
.mobile-service-preview.is-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
|
||
/* ===== Pulse preview supports image + video ===== */
|
||
|
||
.pulse-preview-img {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== Pulse Bunny video cover ===== */
|
||
|
||
.pulse-preview-img iframe {
|
||
position: absolute;
|
||
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 185%;
|
||
height: 180%;
|
||
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
|
||
border: 0;
|
||
|
||
transform: translate(-50%, -50%);
|
||
|
||
pointer-events: none;
|
||
}
|
||
|
||
.pulse-preview-img.is-video-preview {
|
||
width: 370px;
|
||
height: 412px;
|
||
|
||
overflow: hidden;
|
||
|
||
position: fixed;
|
||
}
|
||
|
||
/* ===== Bunny iframe true cover ===== */
|
||
|
||
.portfolio-video-embed {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portfolio-video-embed iframe {
|
||
position: absolute;
|
||
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
border: 0;
|
||
|
||
transform: translate(-50%, -50%) scale(2.2);
|
||
|
||
transform-origin: center center;
|
||
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ===== Lenis + iframe jitter fix ===== */
|
||
|
||
.portfolio-video-embed {
|
||
isolation: isolate;
|
||
contain: layout paint;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
|
||
.portfolio-video-embed iframe {
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
will-change: transform;
|
||
}
|
||
|
||
|
||
|
||
/* ===== Black Rotating Word ===== */
|
||
|
||
.hero-rotating-word-black {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
|
||
font: inherit;
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
|
||
color:inherit;
|
||
}
|
||
|
||
.black-char-wrap {
|
||
display: inline-flex;
|
||
overflow: hidden;
|
||
|
||
padding-top: .08em;
|
||
padding-bottom: .16em;
|
||
|
||
margin-top: -.08em;
|
||
margin-bottom: -.16em;
|
||
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.black-char {
|
||
display: block;
|
||
|
||
font: inherit;
|
||
line-height: inherit;
|
||
color: inherit;
|
||
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
|
||
/* ===== Work page portfolio grid ===== */
|
||
|
||
.portfolio-projects {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
||
}
|
||
|
||
.project-card {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.project-img-wrapper img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* 1400px naj ostane 2 v vrsti */
|
||
@media (min-width: 1400px) {
|
||
.portfolio-area .container {
|
||
max-width: 1400px;
|
||
}
|
||
|
||
.portfolio-projects {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
/* ===== Work page portfolio grid override ===== */
|
||
|
||
@media (min-width: 2000px) {
|
||
.portfolio-area .container {
|
||
max-width: 1900px !important;
|
||
}
|
||
|
||
.portfolio-projects {
|
||
display: grid !important;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||
|
||
}
|
||
|
||
.portfolio-projects .project-card {
|
||
width: auto !important;
|
||
max-width: none !important;
|
||
flex: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* ===== Pulse desktop only ===== */
|
||
|
||
@media (max-width: 767px) {
|
||
.pulse-services-section {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ===== Old mobile version only ===== */
|
||
|
||
@media (min-width: 768px) {
|
||
.about_area_home2 {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
|
||
/* ===== Pulse Services Scroll Story ===== */
|
||
|
||
.pulse-services-section {
|
||
position: relative;
|
||
padding-top:60px;
|
||
background:#000;
|
||
margin-top:-10px;
|
||
}
|
||
|
||
.pulse-services-wrap .kakodelamo-title {
|
||
text-align: left;
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.pulse-story-wrap {
|
||
position: relative;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pulse-word-cloud {
|
||
position: relative;
|
||
will-change: transform;
|
||
}
|
||
|
||
.pulse-service-word {
|
||
display: block;
|
||
width: fit-content;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pulse-service-word img {
|
||
display: none;
|
||
}
|
||
|
||
.pulse-service-word span {
|
||
display: block;
|
||
width: fit-content;
|
||
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-size: clamp(72px, 8.8vw, 150px);
|
||
line-height: 1;
|
||
color: #F5F5F5;
|
||
white-space: nowrap;
|
||
|
||
transition:
|
||
color .25s ease,
|
||
opacity .25s ease,
|
||
transform .25s ease;
|
||
}
|
||
|
||
.pulse-service-word:not(.is-active) span {
|
||
opacity: 1;
|
||
}
|
||
|
||
.pulse-service-word.is-active span {
|
||
opacity: 1;
|
||
color: #4050FF;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
|
||
|
||
.pulse-preview-img {
|
||
position: fixed;
|
||
right: 40px;
|
||
bottom: 40px;
|
||
width: min(360px, 32vw);
|
||
height: auto;
|
||
z-index: 50;
|
||
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
cursor: pointer;
|
||
|
||
transform: translateY(18px) scale(.96);
|
||
transition:
|
||
opacity .35s ease,
|
||
transform .35s ease,
|
||
visibility .35s ease;
|
||
}
|
||
|
||
.pulse-preview-img.is-visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
|
||
|
||
/* ===== Pink Rotating Word Wave Animation ===== */
|
||
|
||
.about-title-wrap5 .hero-rotating-word-pink {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
|
||
white-space: nowrap;
|
||
|
||
color: #FFDFF0;
|
||
|
||
font: inherit;
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
}
|
||
|
||
.about-title-wrap5 .pink-char-wrap {
|
||
display: inline-flex;
|
||
overflow: hidden;
|
||
|
||
padding-top: .08em;
|
||
padding-bottom: .16em;
|
||
|
||
margin-top: -.08em;
|
||
margin-bottom: -.16em;
|
||
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.about-title-wrap5 .pink-char {
|
||
display: block;
|
||
|
||
font: inherit;
|
||
line-height: inherit;
|
||
color: inherit;
|
||
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ===== Creative Area Rotating Word ===== */
|
||
|
||
.ct-heading .ct-rotating-word {
|
||
display: inline-block;
|
||
position: relative;
|
||
|
||
margin-left: .18em;
|
||
white-space: nowrap;
|
||
|
||
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
word-spacing: 0;
|
||
font-family: 'Adieu-Regular' !important;
|
||
color: inherit;
|
||
}
|
||
|
||
.ct-heading .ct-char-wrap {
|
||
display: inline-flex;
|
||
overflow: hidden;
|
||
|
||
|
||
padding-top: .08em;
|
||
padding-bottom: .16em;
|
||
margin-top: -.08em;
|
||
margin-bottom: -.16em;
|
||
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.ct-heading .ct-char {
|
||
display: block;
|
||
|
||
font-family: 'Adieu-Regular';
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
|
||
color: inherit;
|
||
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
|
||
/* ===== Hero Rotating Word Wave Animation ===== */
|
||
/* Rotating word inside .about-title-wrap h2 */
|
||
/* Fixes: inherits H2 styling, removes fake letter spacing, keeps baseline aligned, prevents descenders from being clipped */
|
||
|
||
.about-title-wrap .hero-rotating-word {
|
||
display: inline-flex;
|
||
|
||
|
||
align-items: baseline;
|
||
position: relative;
|
||
|
||
margin-left: 0px;
|
||
white-space: nowrap;
|
||
vertical-align: baseline;
|
||
|
||
font: inherit;
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
word-spacing: 0;
|
||
font-kerning: normal;
|
||
|
||
color: #121212;
|
||
}
|
||
|
||
.about-title-wrap .hero-char-wrap {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
overflow: hidden;
|
||
|
||
margin: 0;
|
||
padding-top: .08em;
|
||
padding-bottom: .16em;
|
||
margin-top: -.08em;
|
||
margin-bottom: -.16em;
|
||
|
||
font-size: inherit;
|
||
line-height: 1.15;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
.about-title-wrap .hero-char {
|
||
display: block;
|
||
|
||
font: inherit;
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
line-height: inherit;
|
||
letter-spacing: inherit;
|
||
|
||
color: inherit;
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
|
||
|
||
|
||
::selection {
|
||
background:#FFDFF0 !important;
|
||
color:#000;
|
||
|
||
}
|
||
|
||
::-moz-selection {
|
||
background:#FFDFF0 !important;
|
||
color:#000;
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
.inspiration-mobile-wrapper {overflow: hidden;}
|
||
|
||
.slider-wrapper {
|
||
|
||
width: 100%;
|
||
|
||
max-width: 100%;
|
||
|
||
overflow: visible;
|
||
|
||
cursor: grab;
|
||
|
||
touch-action: pan-y;
|
||
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.slider-wrapper.is-dragging {
|
||
|
||
cursor: grabbing;
|
||
|
||
}
|
||
|
||
.inspiration-overlay-slider {
|
||
|
||
display: flex !important;
|
||
|
||
flex-direction: row !important;
|
||
|
||
flex-wrap: nowrap !important;
|
||
|
||
align-items: center !important;
|
||
|
||
width: max-content !important;
|
||
|
||
max-width: none !important;
|
||
|
||
will-change: transform;
|
||
|
||
transform: translate3d(0,0,0);
|
||
|
||
}
|
||
|
||
.inspiration-overlay-slider .flip-card {
|
||
position: relative !important;
|
||
flex: 0 0 auto !important;
|
||
|
||
width: 306px;
|
||
height: 390px;
|
||
|
||
margin-right: -2px;
|
||
|
||
top: auto !important;
|
||
left: auto !important;
|
||
right: auto !important;
|
||
bottom: auto !important;
|
||
|
||
transform: rotate(-2deg);
|
||
}
|
||
|
||
.inspiration-overlay-slider .flip-card:nth-child(even) {
|
||
transform: rotate(2deg);
|
||
}
|
||
|
||
.inspiration-overlay-slider .flip-card:nth-child(3n) {
|
||
transform: rotate(-4deg);
|
||
}
|
||
|
||
|
||
@media (max-width: 767px) {
|
||
.services-story-mobile-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.services-word-cloud {
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
|
||
.portfolio-slider-wrap {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
|
||
-webkit-overflow-scrolling: touch;
|
||
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.portfolio-slider-wrap::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.portfolio-slider {
|
||
width: max-content;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
.portfolio-slider-wrap {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portfolio-slider-wrap {
|
||
cursor: grab;
|
||
touch-action: pan-y;
|
||
|
||
overscroll-behavior-x: contain;
|
||
}
|
||
|
||
.portfolio-slider-wrap.is-dragging {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.portfolio-slider-wrap.is-dragging a {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.portfolio-slider {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
gap: 25px;
|
||
width: max-content;
|
||
will-change: transform;
|
||
}
|
||
|
||
.portfolio-slide {
|
||
flex: 0 0 auto;
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
gap: 14px;
|
||
|
||
text-decoration: none;
|
||
|
||
color: inherit;
|
||
}
|
||
|
||
.portfolio-slide img,
|
||
.portfolio-slide video {
|
||
width: 100%;
|
||
height: 500px;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
|
||
|
||
.klasik-sirina { width: 650px; }
|
||
.ozki-sirina { width: 500px; }
|
||
.mini-sirina { width: 280px; }
|
||
.siroki-sirina { width: 620px; }
|
||
|
||
.portfolio-slide-link {
|
||
display: block;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-size: 16px;
|
||
line-height: 130%;
|
||
color: #F5F5F5;
|
||
text-decoration: none;
|
||
transition: color 400ms ease;
|
||
}
|
||
|
||
.portfolio-slide:hover .portfolio-slide-link {
|
||
color: #4050FF;
|
||
}
|
||
|
||
|
||
|
||
|
||
@media (max-width: 767px) {
|
||
|
||
.services-word-cloud {
|
||
width: 100%;
|
||
overflow: visible;
|
||
padding-right: 10%;
|
||
}
|
||
|
||
.service-word {
|
||
font-size: clamp(34px, 12vw, 52px) !important;
|
||
line-height: 1.05 !important;
|
||
max-width: 90%;
|
||
white-space: nowrap !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
.service-word > img {
|
||
display: none !important;
|
||
}
|
||
|
||
.service-word.is-active {
|
||
color: #4050FF;
|
||
}
|
||
|
||
.mobile-service-preview {
|
||
position: fixed !important;
|
||
right: 10px;
|
||
bottom: 30px;
|
||
|
||
width: 160px;
|
||
height: 110px;
|
||
|
||
object-fit: cover;
|
||
opacity: 0;
|
||
transform: translateY(12px) scale(.92);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
|
||
transition: opacity 300ms ease, transform 300ms ease;
|
||
}
|
||
|
||
.mobile-service-preview.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.services-word-cloud {padding-top:20px;}
|
||
|
||
|
||
.service-word {
|
||
position: relative;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
width: fit-content;
|
||
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-size: clamp(72px, 8.8vw, 150px);
|
||
line-height: 1;
|
||
|
||
color: #F5F5F5;
|
||
white-space: nowrap;
|
||
|
||
cursor: pointer;
|
||
|
||
transition:
|
||
color 400ms ease,
|
||
transform 400ms ease;
|
||
}
|
||
|
||
.service-word img {
|
||
width: 0;
|
||
height: 110px;
|
||
|
||
object-fit: cover;
|
||
object-position: center;
|
||
|
||
flex-shrink: 0;
|
||
|
||
opacity: 0;
|
||
margin-right: 0;
|
||
|
||
transform: scale(.9);
|
||
|
||
transition:
|
||
width 400ms ease,
|
||
margin-right 400ms ease,
|
||
opacity 300ms ease,
|
||
transform 400ms ease;
|
||
}
|
||
|
||
.service-word span {
|
||
display: block;
|
||
}
|
||
|
||
.service-word:hover {
|
||
color: #4050FF;
|
||
transform: translateX(28px);
|
||
}
|
||
|
||
.service-word:hover img {
|
||
width: 170px;
|
||
margin-right: 28px;
|
||
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
|
||
|
||
|
||
.together-content3 h2 {font-size: 40px; line-height: 110%; color:#F5F5F5;}
|
||
|
||
.together-content5 h2 {font-size: 40px; line-height: 110%; color:#F5F5F5;}
|
||
|
||
|
||
.working-together-area3 {
|
||
}
|
||
|
||
.working-together-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 50px;
|
||
align-items: end;
|
||
}
|
||
|
||
.working-together-image img {
|
||
width: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.together-content3 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.fixfont h2 { font-family: 'Adieu-Regular' !important;}
|
||
|
||
.together-content3 h2 {
|
||
margin-bottom: 25px;
|
||
font-size: 40px; line-height: 110%; color:#F5F5F5;
|
||
}
|
||
|
||
.together-content5 h2 {
|
||
margin-bottom: 25px;
|
||
font-size: 40px; line-height: 110%; color:#F5F5F5;
|
||
}
|
||
|
||
.together-content3 p {
|
||
margin-bottom: 50px;
|
||
color:#F5F5F5;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-size: 24px; line-height: 110%;
|
||
}
|
||
|
||
.together-content3 .common-btn {color:#C7C7C7;}
|
||
.together-content3 .common-btn span {background-color:#060606;}
|
||
|
||
.together-content3 .common-btn:hover {color:#FFDFF0}
|
||
|
||
@media (max-width: 767px) {
|
||
.working-together-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 35px;
|
||
}
|
||
|
||
|
||
.together-content3 p {
|
||
margin-bottom: 35px;
|
||
}
|
||
}
|
||
|
||
|
||
.about-area2 {
|
||
position: relative !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.about-area2 .flair {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 50px;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
|
||
.awards-cloud {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
gap: 5px 19px;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
padding:0px 5%;
|
||
}
|
||
|
||
.award-item {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
color: #121212;
|
||
white-space: nowrap;
|
||
transition: all 400ms;
|
||
}
|
||
|
||
.award-item:hover {
|
||
color: #4050FF;
|
||
}
|
||
|
||
.award-item sup {
|
||
position: relative;
|
||
top: -34px;
|
||
margin-left: -13px;
|
||
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
width: 33px;
|
||
height: 33px;
|
||
|
||
border: 2px solid currentColor;
|
||
border-radius: 50%;
|
||
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
letter-spacing: 0;
|
||
vertical-align: baseline;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
font-weight: 600;
|
||
transition: all 400ms;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.awards-cloud {
|
||
gap: 5px 10px;
|
||
padding:0px 15px;
|
||
}
|
||
|
||
.award-item {
|
||
font-size: clamp(34px, 7vw, 64px);
|
||
white-space: wrap;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.award-item sup {
|
||
top: -18px;
|
||
width: 20px;
|
||
left:5px;
|
||
height: 20px;
|
||
font-size: 8px;
|
||
border-width: 1.5px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.header {
|
||
transition: transform 0.35s ease, padding 0.35s ease;
|
||
}
|
||
|
||
.header.header-hidden {
|
||
transform: translateY(-100%);
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: 120px;
|
||
}
|
||
|
||
.page-reveal {
|
||
position: fixed;
|
||
inset: 0;
|
||
|
||
background: #121212;
|
||
|
||
z-index: 998;
|
||
pointer-events: none;
|
||
|
||
transform-origin: top center;
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
.header {
|
||
z-index: 9999;
|
||
}
|
||
|
||
.award-container {
|
||
perspective: 1200px;
|
||
}
|
||
|
||
.awards-wrap {
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
}
|
||
|
||
.awards-wrap img {
|
||
will-change: transform, opacity, filter;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.brand-dock-wrap {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
padding: 35px 0;
|
||
margin: -35px 0;
|
||
}
|
||
|
||
.brand-dock {
|
||
width: max-content;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 75px;
|
||
margin: 0;
|
||
padding: 35px 0;
|
||
list-style: none;
|
||
will-change: transform;
|
||
overflow: visible;
|
||
}
|
||
|
||
.brand-dock-item {
|
||
flex: 0 0 auto;
|
||
width: 180px;
|
||
height: 180px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: visible;
|
||
transform-origin: center bottom;
|
||
will-change: transform;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.brand-dock-link {
|
||
position: relative;
|
||
width: 180px;
|
||
height: 180px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: visible;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.brand-dock-img {
|
||
max-width: 100%;
|
||
max-height: 140px;
|
||
object-fit: contain;
|
||
transform-origin: center bottom;
|
||
will-change: opacity;
|
||
transition: opacity .25s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.brand-hover {
|
||
position: absolute;
|
||
inset: 0;
|
||
margin: auto;
|
||
opacity: 0;
|
||
}
|
||
|
||
.brand-dock-item:hover .brand-default {
|
||
opacity: 0;
|
||
}
|
||
|
||
.brand-dock-item:hover .brand-hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.brand-dock-item.min-h .brand-dock-img {
|
||
max-height: 98px;
|
||
}
|
||
|
||
.brand-dock-item.max-h .brand-dock-img {
|
||
max-height: 125px;
|
||
}
|
||
|
||
.brand-dock-item.logo-squre .brand-dock-img {
|
||
max-height: 145px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.brand-dock-wrap {
|
||
padding: 45px 0;
|
||
margin: -60px 0;
|
||
}
|
||
|
||
.brand-dock {
|
||
gap: 20px;
|
||
padding: 45px 0 0 0;
|
||
}
|
||
|
||
.brand-dock-item,
|
||
.brand-dock-link {
|
||
width: 140px;
|
||
height: 140px;
|
||
}
|
||
|
||
.brand-dock-img {
|
||
max-width: 100%;
|
||
max-height: 125px;
|
||
}
|
||
|
||
.brand-dock-item.min-h .brand-dock-img {
|
||
max-height: 118px;
|
||
}
|
||
|
||
.brand-dock-item.max-h .brand-dock-img {
|
||
max-height: 145px;
|
||
}
|
||
|
||
.brand-dock-item.logo-squre .brand-dock-img {
|
||
max-height: 145px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.showcase-title i {font-style: normal !important;}
|
||
.about-title-wrap i {font-style: normal !important;}
|
||
|
||
html,
|
||
body,
|
||
* {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorpointer.png") 6 2, auto !important;
|
||
}
|
||
|
||
a:hover,
|
||
button:hover,
|
||
input[type="submit"]:hover,
|
||
input[type="button"]:hover,
|
||
[role="button"]:hover,
|
||
label:hover,
|
||
summary:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.showcase-item img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.awards-wrap img {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.site-logo img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.team-card img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.branding-list h2:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.project-card img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.portfolio-info h4 {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.award-item:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.flip-card-front img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.service-word span:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.service-word:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
a.portfolio-slide img:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
a.portfolio-slide video:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.pulse-service-word span:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
.brand-dock-item:hover {
|
||
cursor: url("https://spletnafabrika.si/aritmija/assets/img/Cursorhover.png") 6 2, pointer !important;
|
||
}
|
||
|
||
|
||
@font-face {
|
||
font-family: 'Adieu-Regular';
|
||
src: url(../fonts/Adieu-Regular.ttf);
|
||
}
|
||
@font-face {
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
src: url(../fonts/Aktiv-Grotesk-Ex.ttf);
|
||
font-weight: 400;
|
||
}
|
||
@font-face {
|
||
font-family: 'Aktiv-Grotesk-Ex-Bold';
|
||
src: url(../fonts/Aktiv-Grotesk-Ex-XBold.ttf);
|
||
}
|
||
|
||
|
||
/* Base CSS */
|
||
a:focus {
|
||
outline: 0 solid
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin: 0 0 15px;
|
||
color: #F5F5F5;
|
||
}
|
||
|
||
|
||
body {
|
||
color: #F5F5F5;
|
||
font-weight: 400;
|
||
background-color: #121212;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.selector-for-some-widget {
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none;
|
||
}
|
||
ul{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
a, button, input, textarea{
|
||
outline: none !important;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.container{
|
||
max-width: 1400px;
|
||
}
|
||
|
||
|
||
|
||
/*------------ Header Area Start ----------*/
|
||
|
||
header {
|
||
padding-top: 40px;
|
||
padding-bottom: 40px;
|
||
}
|
||
header {
|
||
position: sticky;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
z-index: 999;
|
||
}
|
||
.header-wrapper {
|
||
padding: 0 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 170px;
|
||
}
|
||
.site-logo a {
|
||
display: inline-block;
|
||
}
|
||
.site-logo {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
}
|
||
.header-wrapper a {
|
||
text-decoration: none;
|
||
transition: .3s;
|
||
font-size: 16px;
|
||
color: #D9D9D9;
|
||
display: inline-block;
|
||
padding: 2px 30px;
|
||
}
|
||
.header-wrapper a:hover{
|
||
color: #FFDFF0;
|
||
}
|
||
.mobile-nav{
|
||
display: none;
|
||
}
|
||
.logo-sm img {
|
||
width: 100px;
|
||
}
|
||
|
||
.sticky {mix-blend-mode: difference; }
|
||
.sticky .header-wrapper a {color:#FFF;}
|
||
|
||
/*------------ Header Area End ----------*/
|
||
|
||
|
||
|
||
|
||
/*------------ Hero Area Start ----------*/
|
||
.hero-area {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
background:#000;
|
||
}
|
||
|
||
.video-hero {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-video {
|
||
position: relative;
|
||
width: 70%;
|
||
height: 75vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-video iframe {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 180%;
|
||
height: 180%;
|
||
border: 0;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@media only screen and (max-width: 767px) {
|
||
.video-hero {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.hero-video {
|
||
width: 70%;
|
||
height: 75vh;
|
||
}
|
||
|
||
.hero-video iframe {
|
||
width: 320%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.hero-video {
|
||
width: 70%;
|
||
height: 75vh;
|
||
object-fit: cover;
|
||
transform-origin: center center;
|
||
border-radius: 0px;
|
||
}
|
||
|
||
|
||
.hero-area .container{
|
||
padding: 0px;
|
||
}
|
||
|
||
.project-video{
|
||
height: 700px;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
}
|
||
.slide-menu {
|
||
display: none;
|
||
}
|
||
.lets-talk-btn {
|
||
position: fixed;
|
||
mix-blend-mode: difference;
|
||
left: 35px;
|
||
bottom: 50px;
|
||
z-index: 9999;
|
||
display: inline-block;
|
||
color: #f5f5f5;
|
||
padding: 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
text-transform: uppercase;
|
||
font-size: 13.70px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(12px);
|
||
pointer-events: none;
|
||
transition: opacity .35s ease, transform .35s ease, visibility .35s ease, color .3s ease;
|
||
}
|
||
|
||
.lets-talk-btn.is-visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.lets-talk-btn:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
/* ===== Fixed Language Switch ===== */
|
||
|
||
.language-action {
|
||
position: fixed;
|
||
right: 35px;
|
||
bottom: 40px;
|
||
z-index: 999;
|
||
display: inline-block;
|
||
mix-blend-mode: difference;
|
||
isolation: isolate;
|
||
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
transform: translateY(12px) !important;
|
||
pointer-events: none !important;
|
||
|
||
transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
|
||
}
|
||
|
||
.language-action.is-visible {
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
transform: translateY(0) !important;
|
||
pointer-events: auto !important;
|
||
}
|
||
|
||
|
||
.language-action ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.language-action ul li {
|
||
display: block;
|
||
margin: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.language-action li a:first-child {margin-bottom: 7px;}
|
||
|
||
.language-action li a {
|
||
display: block;
|
||
|
||
border: none;
|
||
background: transparent;
|
||
|
||
padding: 0;
|
||
margin: 0px 0px;
|
||
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
text-transform: uppercase;
|
||
|
||
color: #f5f5f5;
|
||
text-decoration: none;
|
||
|
||
cursor: pointer;
|
||
|
||
position: relative;
|
||
z-index: 999999;
|
||
|
||
pointer-events: auto;
|
||
|
||
transition: color .2s ease;
|
||
}
|
||
|
||
.language-action li a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
.language-action li.active a {
|
||
color: #fff;
|
||
}
|
||
|
||
/*------------ Header Area End ----------*/
|
||
|
||
|
||
|
||
|
||
|
||
/*------------ Showcase Area Start ----------*/
|
||
|
||
.showcase-area {
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: auto;
|
||
padding-top: 0px;
|
||
padding-bottom: 100px;
|
||
transition: .3s;
|
||
overflow: hidden;
|
||
background:#000;
|
||
}
|
||
.card-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 400px;
|
||
overflow: hidden;
|
||
}
|
||
.card {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
width: 260px;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||
}
|
||
.card img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
.section-title {
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
}
|
||
.section-title h2 {
|
||
font-size: 64px;
|
||
line-height: 110%;
|
||
font-weight: normal;
|
||
}
|
||
.section-title h2 span {
|
||
color: #FFDFF0;
|
||
}
|
||
.section-title h2 b {
|
||
font-weight: unset;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.showcase-title{
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
margin-bottom: 50px;
|
||
}
|
||
.bottom-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.bottom-title h4 {
|
||
font-size: 40px;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.bottom-title h4 span{
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
|
||
}
|
||
.bottom-title{
|
||
margin-top: 100px;
|
||
}
|
||
.common-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0 15px;
|
||
color: #FFDFF0;
|
||
font-size: 24px;
|
||
transition: .3s;
|
||
text-decoration: none;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
justify-content: center;
|
||
}
|
||
.common-btn:hover{
|
||
color: #fff
|
||
}
|
||
.common-btn span {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
border-radius: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: rgba(255, 223, 240, 0.1);
|
||
transition: .3s;
|
||
transform: rotate(0deg);
|
||
position: relative;
|
||
|
||
}
|
||
a.common-btn:hover span {
|
||
transform: rotate(45deg);
|
||
}
|
||
.btn-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.showcase-slider {
|
||
margin: 0 auto;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
|
||
.slider-wrap {
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
display: flex;
|
||
}
|
||
|
||
.showcase-item {
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
}
|
||
|
||
.showcase-item img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.showcase-slider {
|
||
perspective: 1200px;
|
||
}
|
||
|
||
.slider-wrap {
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
}
|
||
|
||
.showcase-item {
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
width: 340px;
|
||
height: 440px;
|
||
}
|
||
|
||
.showcase-item img {
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
.showcase-item:nth-child(3){
|
||
width: 340px;
|
||
height: 440px;
|
||
z-index: 5;
|
||
transform: rotate(-1.85deg);
|
||
}
|
||
.showcase-item:nth-child(1) {
|
||
transform: rotate(3.44deg);
|
||
margin-right: -40px;
|
||
}
|
||
.showcase-item:nth-child(2) {
|
||
transform: rotate(-4.78deg);
|
||
margin-right: -80px;
|
||
}
|
||
.showcase-item:nth-child(4) {
|
||
transform: rotate(1.70deg);
|
||
margin-left: -30px;
|
||
z-index: 2;
|
||
height: 360px;
|
||
}
|
||
.showcase-item:nth-child(5) {
|
||
transform: rotate(-7.75deg);
|
||
margin-left: -40px;
|
||
z-index: 1;
|
||
height: 390px;
|
||
}
|
||
|
||
|
||
|
||
/*------------ Showcase Area End ----------*/
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/*------------ Brief Area Start ----------*/
|
||
.brief-area{
|
||
padding: 150px 0;
|
||
background: linear-gradient(100deg, rgba(255, 255, 255, 1) 0%, rgba(251, 224, 238, 1) 100%);
|
||
overflow: hidden;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.brief-area3 {
|
||
padding: 150px 0;
|
||
background: linear-gradient(167deg, #ffffff, #ffffff 53.78%, #fff1f8 65%, #ffeaf5);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.brand-slider-area .brief-title{
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.brief-title{
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.brief-title3 {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.brief-title3 h2 {
|
||
font-size: 24px; line-height: 130%;
|
||
color: #121212;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
|
||
.for-mobile{
|
||
display: none;
|
||
}
|
||
|
||
.veonas {margin-top:50px;}
|
||
.veonas .cta-btn {text-align: center;}
|
||
.veonas .cta-btn .common-btn {color:#121212;}
|
||
.veonas .cta-btn .common-btn:hover {color:#4050FF;}
|
||
|
||
/*------------ Brief Area End ----------*/
|
||
|
||
|
||
|
||
|
||
|
||
/*------------ Brand Area Start ----------*/
|
||
.brand-slider-area {
|
||
padding: 150px 0;
|
||
background: #F5F5F5;
|
||
overflow: visible;
|
||
}
|
||
.infinite-slider {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
}
|
||
.slider-track {
|
||
display: flex;
|
||
width: max-content;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.brand-logo {
|
||
flex: 0 0 auto;
|
||
padding: 0 50px;
|
||
justify-content: center;
|
||
}
|
||
.brand-logo img {
|
||
max-height: 60px;
|
||
display: block;
|
||
filter: grayscale(100%) brightness(1);
|
||
transition: .4s ease;
|
||
transform: scale(1);
|
||
}
|
||
.brand-logo img:hover {filter:none;}
|
||
.brand-logo { transition: .4s ease;
|
||
transform: scale(1);}
|
||
.brand-logo:hover {
|
||
transform: scale(1.1);
|
||
filter: none;
|
||
}
|
||
.min-h img{
|
||
max-height: 42px;
|
||
}
|
||
.max-h img{
|
||
max-height: 70px;
|
||
}
|
||
|
||
.logo-squre img{
|
||
max-height: 84px;
|
||
}
|
||
|
||
|
||
.shk-vrtx-wrap-91A {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
height: 1.2em;
|
||
position: relative;
|
||
}
|
||
|
||
.shk-vrtx-track-91A {
|
||
display: block;
|
||
will-change: transform;
|
||
color: #FF3AD1;
|
||
}
|
||
|
||
.shk-vrtx-item-91A {
|
||
display: block;
|
||
line-height: 1.2em;
|
||
}
|
||
/*------------ Brand Area End ----------*/
|
||
|
||
|
||
|
||
|
||
/*------------ CTA Area Start ----------*/
|
||
.cta-area {
|
||
padding: 100px 0;
|
||
background-color:#4050FF;
|
||
z-index: 99999;;
|
||
}
|
||
.cta-area .container{
|
||
max-width: 1400px;
|
||
}
|
||
.cta-btn {
|
||
text-align: end;
|
||
}
|
||
|
||
.cta-btn .common-btn {color:#F5F5F5;}
|
||
.cta-btn .common-btn:hover {color:#FFDFF0;}
|
||
|
||
|
||
.cta-content h2 {
|
||
margin: 0;
|
||
font-size: 40px;
|
||
line-height: 110%;
|
||
font-family: 'Adieu-Regular';
|
||
|
||
color:#FFFFFF;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.cta-content h3 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
line-height: 110%;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
color:#F5F5F5;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
|
||
/*------------ CTA Area End ----------*/
|
||
|
||
|
||
|
||
/*------------ Footer Area Start ----------*/
|
||
footer {
|
||
padding-top: 100px;
|
||
padding-bottom: 20px;
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
}
|
||
#footer-img {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: block;
|
||
overflow: visible;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
footer h4 {
|
||
font-size: 20px;
|
||
color: #FFDFF0;
|
||
display: block;
|
||
margin-bottom: 25px;
|
||
}
|
||
.social-links ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30px;
|
||
}
|
||
.social-links ul li a{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
background-color: #f5f5f5;
|
||
color: #121212;
|
||
transition: .3s;
|
||
border-radius: 100%;
|
||
transition: all 400ms;
|
||
}
|
||
.social-links ul li img {
|
||
width: 25px;
|
||
transition: .3s;
|
||
}
|
||
|
||
.social-links li a:hover {
|
||
background-color: #FFDFF0;
|
||
}
|
||
.footer-info ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-info ul li {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-info ul li:last-child {margin-bottom: 0px;}
|
||
|
||
.footer-info ul li a {
|
||
color: #fff;
|
||
font-size: 24px;
|
||
font-family: 'Adieu-Regular';
|
||
line-height: 110%;
|
||
transition: all 400ms;
|
||
}
|
||
.footer-info ul li a:hover {color: #FFDFF0}
|
||
.footer-info p {
|
||
font-size: 24px;
|
||
font-family: 'Adieu-Regular';
|
||
line-height: 110%;
|
||
margin-bottom: 10px;
|
||
}
|
||
.footer-info p:last-child {margin-bottom: 0px;}
|
||
.footer-love {
|
||
margin-top: 100px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
.footer-love img {
|
||
width: 200px;
|
||
}
|
||
.copyright-wrap {
|
||
position: relative;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
width: 100%;
|
||
padding-top:20px;
|
||
}
|
||
|
||
.copyright-left,
|
||
.copyright-right {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.copyright-center {
|
||
position: absolute;
|
||
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.copyright-center p { font-family: 'Adieu-Regular' !important;}
|
||
|
||
.copyright-wrap p {
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.copyright-wrap {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 12px;
|
||
padding-top:0px !important;
|
||
}
|
||
|
||
.copyright-center {
|
||
position: static !important;
|
||
left: auto !important;
|
||
transform: none !important;
|
||
order: -10 !important;
|
||
}
|
||
|
||
.copyright-left {
|
||
order: 1 !important;
|
||
}
|
||
|
||
.copyright-right {
|
||
order: 2 !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
.copyright-wrap p {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
color: #F5F5F5;
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
}
|
||
.sticky .header-wrapper a {
|
||
|
||
}
|
||
|
||
|
||
/*------------ Footer Area End ----------*/
|
||
|
||
|
||
/*------------ Projects Area Start ----------*/
|
||
.projects-area {
|
||
background: #000;
|
||
padding-bottom: 100px;
|
||
padding-top: 50px;
|
||
}
|
||
.single-project {
|
||
margin-bottom: 30px;
|
||
}
|
||
.project-info h1 {
|
||
font-size: 40px;
|
||
margin: 0;
|
||
|
||
}
|
||
.project-info {
|
||
margin-bottom: 50px;
|
||
}
|
||
.subtitle {
|
||
text-align: right;
|
||
}
|
||
.client-info h4 {
|
||
color: #FFDFF0;
|
||
font-size: 16px;
|
||
letter-spacing: .2px;
|
||
line-height: 110%;
|
||
margin-bottom: 5px;
|
||
}
|
||
.client-info{
|
||
margin-bottom: 20px;
|
||
}
|
||
.project-details h4 {
|
||
color: #FFDFF0;
|
||
font-size: 16px;
|
||
letter-spacing: .2px;
|
||
line-height: 110%;
|
||
margin-bottom: 10px;
|
||
}
|
||
.project-details p {
|
||
margin-bottom: 8px;
|
||
line-height: 100%;
|
||
color: #F5F5F5;
|
||
}
|
||
.description-text p {
|
||
line-height: 130%;
|
||
color: #F5F5F5;
|
||
margin-bottom: 0px;
|
||
}
|
||
.single-wrapper {margin-bottom: 3rem;}
|
||
.project-content {
|
||
padding-top: 50px;
|
||
padding-bottom: 70px;
|
||
}
|
||
/*------------ Projects Area End ----------*/
|
||
|
||
|
||
|
||
|
||
|
||
/*------------ Portfolio Area Start ----------*/
|
||
.portfolio-area {
|
||
padding: 100px 0;
|
||
background: #000;
|
||
}
|
||
.portfolio-title {
|
||
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
.portfolio-title h1 {
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
|
||
}
|
||
.portfolio-title .description {
|
||
max-width: 734px;
|
||
margin: 0 auto;
|
||
padding-top: 10px;
|
||
}
|
||
.portfolio-title .description p {
|
||
font-size: 24px;
|
||
}
|
||
.portfolio-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 25px;
|
||
}
|
||
|
||
.portfolio-filter button {
|
||
border: 1px solid #F5F5F5;
|
||
transition: .3s;
|
||
border-radius: 60px;
|
||
background: transparent;
|
||
color: #F5F5F5;
|
||
display: inline-block;
|
||
padding: 10px 20px;
|
||
font-size: 20px;
|
||
line-height: 120%;
|
||
padding-bottom: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.portfolio-filter button:hover{
|
||
background-color: #4050FF;
|
||
border-color: #4050FF;
|
||
}
|
||
.portfolio-filter button.active{
|
||
background-color: #4050FF;
|
||
border-color: #4050FF;
|
||
}
|
||
|
||
|
||
.portfolio-projects {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0 50px;
|
||
}
|
||
.project-card {
|
||
margin-top: 100px;
|
||
}
|
||
.portfolio-info {
|
||
margin-top: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
}
|
||
.portfolio-info h1 {
|
||
font-size: 24px;
|
||
margin: 0;
|
||
line-height: 110%;
|
||
font-family: 'Adieu-Regular';
|
||
transition: all 400ms;
|
||
}
|
||
|
||
.project-card:hover .portfolio-info h1 {color:#4050FF}
|
||
.portfolio-info span {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.project-card img {
|
||
max-height: 680px;
|
||
object-fit: cover;
|
||
transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
|
||
position: relative;
|
||
transform: scale(1);
|
||
}
|
||
.project-card:hover img {
|
||
transform: scale(1.07);
|
||
}
|
||
|
||
.project-img-wrapper {overflow: hidden;}
|
||
|
||
.project-card {
|
||
transition: transform 0.010s cubic-bezier(.22,.61,.36,1);
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.project-card.hide {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
pointer-events: none;
|
||
position: absolute;
|
||
}
|
||
|
||
.portfolio-projects {
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.project-card.hide {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
pointer-events: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.project-card {
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.terms-area {
|
||
padding-top: 60px;
|
||
padding-bottom: 100px;
|
||
color: #000;
|
||
background-image: linear-gradient(to left top, #fbe0ef, #f7e5f3, #f5e9f5, #f3edf6, #f3f1f6, #f4f3f6, #f5f5f7, #f7f7f7, #f9f9f9, #fbfbfb, #fdfdfd, #ffffff);
|
||
}
|
||
.content-block h2 {
|
||
font-size: 40px;
|
||
color: #000;
|
||
line-height: 130%;
|
||
font-family: 'Adieu-Regular';
|
||
margin-bottom: 20px;
|
||
}
|
||
.content-block h4 {
|
||
color: #000;
|
||
font-size: 20px;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.terms-content {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
.content-block {
|
||
margin-bottom: 30px;
|
||
}
|
||
/*------------ Portfolio Area End ----------*/
|
||
|
||
|
||
|
||
|
||
/*------------ Contact Area Start ----------*/
|
||
.contact-area{
|
||
padding: 100px 0;
|
||
background-image: linear-gradient(to left top, #fbe0ef, #f7e5f3, #f5e9f5, #f3edf6, #f3f1f6, #f4f3f6, #f5f5f7, #f7f7f7, #f9f9f9, #fbfbfb, #fdfdfd, #ffffff);
|
||
}
|
||
.contact-wrapper {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
.contact-title {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
.contact-title h1 {
|
||
color: #000;
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
|
||
}
|
||
.contact-title p {
|
||
font-size: 24px;
|
||
color: #000;
|
||
max-width: 800px; margin:auto;
|
||
padding-top:10px;
|
||
}
|
||
.single-item {
|
||
width: 100%;
|
||
margin-bottom: 25px;
|
||
}
|
||
.single-item input {
|
||
height: 60px;
|
||
padding: 10px 0;
|
||
border: none;
|
||
border-bottom: 1px solid #4050FF;
|
||
background: transparent;
|
||
width: 100%;
|
||
color: #000;
|
||
}
|
||
.single-item input::placeholder{
|
||
color: #747474;
|
||
opacity: 1;
|
||
}
|
||
|
||
.single-item textarea {
|
||
height: 60px;
|
||
padding: 10px 0;
|
||
border: none;
|
||
border-bottom: 1px solid #4050FF;
|
||
background: transparent;
|
||
width: 100%;
|
||
color: #000;
|
||
}
|
||
.single-item textarea::placeholder{
|
||
color: #747474;
|
||
opacity: 1;
|
||
}
|
||
.btn__primary{
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 0 15px;
|
||
border: none;
|
||
background: transparent;
|
||
font-size: 20px;
|
||
color: #4050FF;
|
||
}
|
||
.btn__primary span {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #E6E2F6;
|
||
border-radius: 100%;
|
||
transition: .3s;
|
||
transform: rotate(0deg);
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
}
|
||
.btn__primary img {
|
||
position: relative;
|
||
top: 1px;
|
||
width: 12px;
|
||
}
|
||
.btn__primary:hover span{
|
||
transform: rotate(45deg);
|
||
}
|
||
.submit-btn{
|
||
margin-top: 70px;
|
||
text-align: center;
|
||
}
|
||
.contact-note-area {
|
||
padding: 50px 0;
|
||
background: #4050FF;
|
||
text-align: center;
|
||
}
|
||
.note-text h2 {
|
||
font-size: 40px;
|
||
line-height: 130%;
|
||
font-family: 'Adieu-Regular';
|
||
font-weight: normal;
|
||
}
|
||
.note-text {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
.note-links a {color:#FFDFF0 !important}
|
||
.back-home {
|
||
text-align: center;
|
||
}
|
||
/*------------ Contact Area End ----------*/
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/*------------ About Area End ----------*/
|
||
.about-area {
|
||
|
||
padding-top: 100px;
|
||
padding-bottom: 30px;
|
||
overflow: hidden;
|
||
background: linear-gradient(
|
||
to top,
|
||
#121212 0%,
|
||
#121212 18%,
|
||
#F5F5F5 18%,
|
||
#F5F5F5 100%
|
||
);
|
||
}
|
||
|
||
.about-area_home {
|
||
|
||
padding: 100px 0px;
|
||
overflow: hidden;
|
||
background:#000;
|
||
}
|
||
|
||
.nagrade-title {max-width: 605px;margin:auto; line-height: 130% !important; }
|
||
|
||
.about-area2 {
|
||
|
||
padding:100px 0px;
|
||
overflow: hidden;
|
||
background: #FFF;
|
||
}
|
||
|
||
|
||
.heightfix {padding:200px 0px 50px 0px;}
|
||
|
||
.about-title-wrap5 .kakodelamo-title {text-align: left;}
|
||
|
||
|
||
.about-title-wrap {
|
||
|
||
margin: 0 auto;
|
||
margin-bottom: 50px;
|
||
}
|
||
.about-title-wrap h1 {
|
||
color: #121212;
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
}
|
||
|
||
.about-title-wrap5 h1 {
|
||
color: #F5F5F5;
|
||
font-size: 80px;
|
||
line-height: 110%;
|
||
margin-bottom: 0px;;
|
||
}
|
||
|
||
|
||
.about-title-wrap h1 .pink-text{
|
||
color: #FF3AD1;
|
||
}
|
||
|
||
.about-title-wrap5 h1 .pink-text2{
|
||
color: #FFDFF0;
|
||
}
|
||
|
||
|
||
|
||
.team-title {
|
||
max-width: 1208px;
|
||
margin: 0 auto;
|
||
margin-bottom: 50px;
|
||
padding-top:100px;}
|
||
|
||
.team-title h3 {color:#121212; text-align: center ;
|
||
font-family: 'Adieu-Regular'; margin-bottom:15px; font-size:40px; line-height: 110%;
|
||
}
|
||
|
||
.team-title-subtitle {font-size:24px; line-height: 110%; color:#121212; text-align: center; font-family: 'Aktiv-Grotesk-Ex';}
|
||
.blagovne-title {font-size:24px; line-height: 110%; color:#121212; text-align: center; font-family: 'Adieu-Regular';}
|
||
|
||
.kakodelamo-title {font-size:24px; line-height: 130%; text-align: center; font-family: 'Adieu-Regular'; color:#F5F5F5; margin-bottom: 50px;}
|
||
|
||
.kakodelamo-opis {font-size:24px; line-height: 130%; color:#F5F5F5; max-width:1000px;}
|
||
.kakodelamo-opis2 {font-size:24px; line-height: 130%; color:#F5F5F5; max-width:1000px; margin-left:auto;}
|
||
|
||
.team-slider {
|
||
display: flex;
|
||
width: max-content;
|
||
cursor: grab;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.team-card {
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
background: #FFDFF0;
|
||
position: relative;
|
||
max-width: 350px;
|
||
min-width: 350px;
|
||
|
||
/* subtle base tilt */
|
||
transform: rotate(-1deg);
|
||
|
||
/* 3D support */
|
||
transform-style: preserve-3d;
|
||
perspective: 1000px;
|
||
will-change: transform;
|
||
|
||
cursor: pointer;
|
||
transition: transform 0.15s ease-out; /* faster return to normal */
|
||
}
|
||
.team-info {
|
||
display: flex;
|
||
align-items: top;
|
||
justify-content: space-between;
|
||
gap: 0 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.team-info h4 {
|
||
color: #4050FF;
|
||
font-size: 24px;
|
||
margin: 0;line-height: 1;
|
||
font-family: 'Adieu-Regular';
|
||
font-weight: 400 !important;
|
||
}
|
||
|
||
.team-info span {
|
||
color: #4050FF;
|
||
font-size: 16px;
|
||
margin: 0;
|
||
text-align: right;
|
||
}
|
||
.team-card:nth-child(even) {
|
||
background: #4050FF;
|
||
transform: rotate(2deg);
|
||
|
||
}
|
||
.team-card:nth-child(even) .team-info h4 {
|
||
color: #fff;
|
||
}
|
||
.team-card:nth-child(even) .team-info span {
|
||
color: #fff;
|
||
}
|
||
.team-card:nth-child(4) {
|
||
position: relative;
|
||
top: -10px;
|
||
}
|
||
|
||
.team-slider {
|
||
display: flex;
|
||
width: max-content;
|
||
cursor: grab;
|
||
}
|
||
|
||
.team-track {
|
||
display: flex;
|
||
gap: 0 10px;
|
||
}
|
||
|
||
section.working-together-area2 {
|
||
background: #121212;
|
||
padding: 100px 0;
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
section.working-together-area4 {
|
||
background: #000;
|
||
padding: 150px 0;
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
section.working-together-area {
|
||
background: #060606;
|
||
padding: 100px 0;
|
||
}
|
||
|
||
section.working-together-area3 {
|
||
background: #060606;
|
||
padding: 100px 0;
|
||
}
|
||
|
||
|
||
.together-content .common-btn {
|
||
margin-top: 40px;
|
||
}
|
||
.common-btn span img {
|
||
position: relative;
|
||
width: 10px;
|
||
}
|
||
.together-content {
|
||
margin:100px 0px 150px 0px;
|
||
max-width: 1000px;
|
||
}
|
||
|
||
.together-content3 {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.together-content3 h2 {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.kakodelamo-opis5 .common-btn {margin-top:0px;
|
||
color:#F5F5F5 !important;
|
||
}
|
||
|
||
.kakodelamo-opis5 .common-btn:hover {color:#4050FF !important;}
|
||
.kakodelamo-opis5 .common-btn span {background-color: #060606 !important;;}
|
||
|
||
|
||
.together-content2 {
|
||
margin-bottom:150px;
|
||
max-width: 1100px;
|
||
text-align: right;
|
||
margin-left: auto;
|
||
}
|
||
.creative-area {
|
||
padding: 100px 0;
|
||
background: #4050FF;
|
||
text-align: center;
|
||
}
|
||
.creative-area h2 {
|
||
margin: 0;
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
gap: 12x;
|
||
font-size: 40px;
|
||
}
|
||
.creative-area h2 span{
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
|
||
}
|
||
|
||
|
||
.ct-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color:#FFF;
|
||
}
|
||
|
||
.ct-viewport {
|
||
height: 1.2em; /* shows only one line */
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.ct-vertical {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ct-vertical span {
|
||
height: 1.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.brand-area-two{
|
||
padding: 100px 0;
|
||
background-color: #FFF;
|
||
}
|
||
|
||
|
||
/*------- Inspiration Area Start -------*/
|
||
.inspiration-area {
|
||
position: relative;
|
||
transition: .3s;
|
||
background-color: #FFFFFF;
|
||
padding: 200px 0 150px 0;
|
||
}
|
||
.inspiration-title h2 {
|
||
text-align: center;
|
||
color: #121212;
|
||
font-size: 40px;
|
||
line-height: 110%;
|
||
display: inline-block;
|
||
z-index: 0;
|
||
position: relative;
|
||
max-width: 384px;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.inspiration-title h2 b{
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.inspiration-title {
|
||
text-align: center;
|
||
position: absolute;
|
||
display: inline-block;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 0;
|
||
}
|
||
.inspiration-wrapper{
|
||
max-width: 1400px;
|
||
height: 1060px;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
|
||
|
||
.flip-card {
|
||
width: 300px;
|
||
height:360px;
|
||
perspective: 1000px;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transition: .3s ease;
|
||
}
|
||
|
||
.flip-card-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.6s;
|
||
transform-style: preserve-3d;
|
||
position: relative;
|
||
}
|
||
|
||
.flip-card.active .flip-card-inner {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
|
||
.flip-card-front,
|
||
.flip-card-back {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
backface-visibility: hidden;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
}
|
||
.flip-card-front{
|
||
background-color: #4050FF;
|
||
padding: 15px;
|
||
border-radius: 15px;
|
||
}
|
||
/* Front */
|
||
.flip-card-front img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
/* Back */
|
||
.flip-card-back {
|
||
background: #4050FF;
|
||
color: #fff;
|
||
transform: rotateY(180deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 30px;
|
||
flex-direction: column;
|
||
}
|
||
.flip-card-back p {
|
||
font-size: 20px;
|
||
line-height: 140%;
|
||
margin: 0;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
.flip-card.card__1 {
|
||
transform: translate(-50%, -50%) rotate(-14deg);
|
||
left: 29%;
|
||
top: 42%;
|
||
z-index: 3;
|
||
}
|
||
.flip-card.card__2 {
|
||
transform: translate(-50%, -50%) rotate(-14deg);
|
||
left: 43%;
|
||
top: 54%;
|
||
z-index: 3;
|
||
}
|
||
.flip-card.card__3 {
|
||
transform: translate(-50%, -50%) rotate(-29deg);
|
||
left: 38%;
|
||
top: 65%;
|
||
z-index: 1;
|
||
}
|
||
.flip-card.card__4 {
|
||
top: 30%;
|
||
transform: translate(-50%, -50%) rotate(-12deg);
|
||
left: 43%;
|
||
}
|
||
.flip-card.card__5 {
|
||
top: 67%;
|
||
transform: translate(-50%, -50%) rotate(15deg);
|
||
left: 58%;
|
||
}
|
||
.flip-card.card__6 {
|
||
transform: translate(-50%, -50%) rotate(11deg);
|
||
left: unset;
|
||
right: 17%;
|
||
top: 35%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.flip-card.card__7 {
|
||
transform: translate(-50%, -50%) rotate(20deg);
|
||
left: unset;
|
||
right: 5%;
|
||
top: 48%;
|
||
z-index: 3;
|
||
}
|
||
.flip-card.card__8 {
|
||
transform: translate(-50%, -50%) rotate(41deg);
|
||
left: unset;
|
||
right: 20%;
|
||
top: 61%;
|
||
z-index: 1;
|
||
}
|
||
|
||
|
||
.inspiration-area:hover .flip-card.card__1 {
|
||
left: 16%;
|
||
top: 25%;
|
||
transform: translate(-50%, -50%) rotate(6deg);
|
||
}
|
||
.inspiration-area:hover .flip-card.card__2 {
|
||
left: 20%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) rotate(-2deg);
|
||
}
|
||
|
||
.inspiration-area:hover .flip-card.card__3 {
|
||
transform: translate(-50%, -50%) rotate(-29deg);
|
||
left: 18%;
|
||
top: 75%;
|
||
}
|
||
.inspiration-area:hover .flip-card.card__4 {
|
||
left: 48%;
|
||
top: 16%;
|
||
transform: translate(-50%, -50%) rotate(10deg);
|
||
}
|
||
.inspiration-area:hover .flip-card.card__5 {
|
||
top: 84%;
|
||
transform: translate(-50%, -50%) rotate(-15deg);
|
||
left: 55%;
|
||
}
|
||
.inspiration-area:hover .flip-card.card__6 {
|
||
transform: translate(-50%, -50%) rotate(-6deg);
|
||
left: unset;
|
||
right: 3%;
|
||
top: 25%;
|
||
}
|
||
.inspiration-area:hover .flip-card.card__7 {
|
||
transform: translate(-50%, -50%) rotate(3deg);
|
||
left: unset;
|
||
right: -8%;
|
||
top: 55%;
|
||
}
|
||
.inspiration-area:hover .flip-card.card__8 {
|
||
transform: translate(-50%, -50%) rotate(10deg);
|
||
left: unset;
|
||
right: 2%;
|
||
top: 86%;
|
||
}
|
||
|
||
|
||
.faling-btn a {
|
||
opacity: 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.card__normal .flip-card-front{
|
||
background-color: #FFDFF0;
|
||
}
|
||
.card__normal .flip-card-back{
|
||
background-color: #FFDFF0;
|
||
}
|
||
.card__normal .flip-card-back{
|
||
color: #4050FF;
|
||
}
|
||
/*------- Inspiration Area End -------*/
|
||
|
||
|
||
.awards-wrap {
|
||
display: grid;
|
||
align-items: center;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 30px 60px;
|
||
justify-items: center;
|
||
text-align: center;
|
||
margin-top: 150px;
|
||
}
|
||
.awards-wrap img {
|
||
max-height: 110px;
|
||
flex-shrink: 0;
|
||
transform-style: preserve-3d;
|
||
will-change: transform;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.awards-wrap img:nth-child(odd) {
|
||
transform: rotate(15deg);
|
||
}
|
||
.awards-wrap img:nth-child(even) {
|
||
transform: rotate(-15deg);
|
||
}
|
||
|
||
|
||
|
||
|
||
.branding-section {
|
||
text-align: center;
|
||
padding: 100px 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.subtitle {
|
||
margin-bottom: 40px;
|
||
color: #A7A7A7;
|
||
}
|
||
|
||
.branding-list h2 {
|
||
font-size: 40px;
|
||
margin: 10px 0;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
font-family: 'Adieu-Regular';
|
||
}
|
||
|
||
.branding-list h2:hover {
|
||
color: #4c5cff;
|
||
}
|
||
|
||
/* Floating image */
|
||
.hover-image {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
|
||
z-index: 999;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.hover-image img {
|
||
width: 440px;
|
||
height: 300px;
|
||
object-fit: cover;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.branding-area {
|
||
padding: 100px 0;
|
||
position: relative;
|
||
background-image: linear-gradient(to left top, #f9f2f6, #faf5f9, #fbf9fb, #fdfcfd, #ffffff);
|
||
}
|
||
.branding-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.branding-list {
|
||
text-align: center;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.branding-list h2 {
|
||
font-size: 55px;
|
||
color: #121212;
|
||
line-height: 110%;
|
||
}
|
||
|
||
|
||
|
||
|
||
.together-content h2 {
|
||
font-size: 80px; line-height: 110%; margin-bottom: 50px; max-width: 1000px; display: block;
|
||
white-space: normal; font-family: 'Aktiv-Grotesk-Ex';
|
||
}
|
||
|
||
|
||
.together-content2 h2 {
|
||
font-size: 80px; line-height: 110%; margin-bottom: 50px; max-width: 1100px; display: block;
|
||
white-space: normal; font-family: 'Aktiv-Grotesk-Ex';
|
||
}
|
||
|
||
|
||
.together-content h2 .word-reveal-word{
|
||
color: #F5F5F5;
|
||
transition: color 0.45s ease;
|
||
display: inline;
|
||
|
||
white-space: normal;
|
||
}
|
||
|
||
|
||
.together-content2 h2 .word-reveal-word{
|
||
color: #F5F5F5;
|
||
transition: color 0.45s ease;
|
||
display: inline;
|
||
|
||
white-space: normal;
|
||
}
|
||
|
||
|
||
.branding-super-wrapper h2 {
|
||
font-size: 64px;
|
||
color: #4050FF;
|
||
text-align: center;
|
||
}
|
||
.branding-area-two .branding-list{
|
||
gap: 40px 0;
|
||
position: relative;
|
||
}
|
||
.with-btn {
|
||
position: relative;
|
||
}
|
||
.faling-btn {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding:5px 20px;
|
||
gap: 0 20px;
|
||
z-index: 1;
|
||
}
|
||
.faling-btn a {
|
||
display: inline-block;
|
||
padding: 8px 14px;
|
||
border: 1px solid #4050FF;
|
||
border-radius: 50px;
|
||
font-size: 14px;
|
||
position: relative;
|
||
transition: .3s;
|
||
color: #4050FF;
|
||
}
|
||
.faling-btn a:hover{
|
||
background-color: #4050FF;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
.ct-falling-btn-wrap a {
|
||
display: inline-block;
|
||
position: relative;
|
||
opacity: 0;
|
||
transform: translateY(-200px) rotate(0deg);
|
||
}
|
||
.branding-about-area{
|
||
padding-bottom: 150px;
|
||
}
|
||
|
||
.faling-btn a {
|
||
display: inline-block;
|
||
will-change: transform, opacity;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
|
||
.stack-section {
|
||
height: 500vh; /* This controls the "length" of the scroll animation */
|
||
background: #111;
|
||
}
|
||
|
||
.stack-container {
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card {
|
||
position: absolute;
|
||
width: 300px;
|
||
height: 450px;
|
||
will-change: transform;
|
||
/* Add slight rotation like your screenshot */
|
||
}
|
||
|
||
.card img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
|
||
|
||
.branding-area.branding-home{
|
||
background: #F5F5F5 !important;
|
||
}
|
||
|
||
|
||
|
||
.ct-wrap i {
|
||
font-style: normal;
|
||
font-family: 'Adieu-Regular';
|
||
color: #f5f5f5;
|
||
}
|
||
.ct-wrap h4 {
|
||
display: none;
|
||
}
|
||
.inspire-title h2 {
|
||
font-size: 26px;
|
||
color: #121212;
|
||
text-align: center;
|
||
}
|
||
.inspiration-mobile-wrapper{
|
||
display: none;
|
||
}
|
||
|
||
|
||
.awards-wrap {
|
||
opacity: 0;
|
||
transform: translateY(50px);
|
||
}
|
||
.showcase-item {
|
||
opacity: 0;
|
||
transform: translateY(60px);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.showcase-item {
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.showcase-item img {
|
||
display: block;
|
||
width: 100%;
|
||
transition: transform 0.2s ease;
|
||
will-change: transform;
|
||
}
|
||
|
||
|
||
.showcase-title .shk-vrtx-wrap-91A {
|
||
margin-bottom: -10px;
|
||
}
|
||
|
||
.shk-vrtx-wrap-91A {
|
||
margin-bottom: -10px;
|
||
}
|
||
|
||
|
||
|
||
/* ========================================
|
||
SHOWCASE GELLARY SLIDER - HOME - MOBILE
|
||
======================================== */
|
||
|
||
.showcase-gellary-wrap {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.showcase-gellary .owl-stage-outer {
|
||
overflow: visible;
|
||
}
|
||
|
||
.showcase-gellary .owl-stage {
|
||
display: flex;
|
||
align-items: center;
|
||
transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
|
||
}
|
||
|
||
/* SIDE ITEMS (manjši še za ~10%) */
|
||
.showcase-gellary .owl-item {
|
||
transition:
|
||
transform 0.85s cubic-bezier(.22,.61,.36,1),
|
||
opacity 0.85s cubic-bezier(.22,.61,.36,1),
|
||
filter 0.85s cubic-bezier(.22,.61,.36,1);
|
||
transform: scale(0.80); /* <-- manjši */
|
||
opacity: 0.45;
|
||
filter: saturate(0.9);
|
||
z-index: 1;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.showcase-gellary .owl-item.active:not(.center) {
|
||
transform: scale(0.9);
|
||
opacity: 0.75;
|
||
z-index: 2;
|
||
}
|
||
|
||
.showcase-gellary .owl-item.center {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* CENTER */
|
||
.showcase-gellary .owl-item.center {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* CARD */
|
||
.showcase-gellary .showcase-card {
|
||
position: relative;
|
||
border-radius: 18px;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* FLOAT WRAPPER */
|
||
.showcase-gellary .showcase-float-inner {
|
||
transition:
|
||
transform 0.85s cubic-bezier(.22,.61,.36,1),
|
||
box-shadow 0.85s cubic-bezier(.22,.61,.36,1);
|
||
will-change: transform;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* IMAGE */
|
||
.showcase-gellary .showcase-card img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 360px;
|
||
object-fit: cover;
|
||
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
/* SIDE POSITION */
|
||
.showcase-gellary .owl-item:not(.center) .showcase-float-inner {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
/* subtle rotation */
|
||
.showcase-gellary .owl-item:not(.center):nth-child(odd) .showcase-float-inner {
|
||
transform: translateY(10px) rotate(-1.4deg);
|
||
}
|
||
|
||
.showcase-gellary .owl-item:not(.center):nth-child(even) .showcase-float-inner {
|
||
transform: translateY(10px) rotate(1.4deg);
|
||
}
|
||
|
||
/* CENTER FLOAT (močnejši) */
|
||
.showcase-gellary .owl-item.center .showcase-float-inner {
|
||
transform: translateY(-8px);
|
||
animation: showcaseCardFloat 3s cubic-bezier(.45,.05,.55,.95) infinite;
|
||
}
|
||
|
||
.showcase-gellary .owl-item:not(.center) .showcase-float-inner {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
.showcase-gellary.is-dragging .owl-item,
|
||
.showcase-gellary.is-dragging .showcase-float-inner {
|
||
transition: none !important;
|
||
}
|
||
|
||
.showcase-gellary.is-dragging .owl-item.center .showcase-float-inner {
|
||
animation: none !important;
|
||
}
|
||
|
||
/* FLOAT ANIMATION – bolj “premium slow drift” */
|
||
@keyframes showcaseCardFloat {
|
||
0% {
|
||
transform: translateY(-8px);
|
||
}
|
||
50% {
|
||
transform: translateY(-18px); /* <-- bolj float */
|
||
}
|
||
100% {
|
||
transform: translateY(-8px);
|
||
}
|
||
}
|
||
|
||
/* clarity */
|
||
.showcase-gellary .owl-item:not(.center) img {
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.showcase-gellary .owl-item.center img {
|
||
opacity: 1;
|
||
} |