html { font-size: calc(100vw / 1440 * 10); }
@media (max-width: 1000px) { html { font-size: calc(100vw / 390 * 10); } }
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: hidden;
font-family: "Stolzl", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-weight: 400;
color: var(--text);
background: var(--page);
}
button, input, textarea, select { font-family: inherit; }
img{max-width:100%;height:auto}
@font-face{font-family:"Stolzl";src:url("../fonts/Stolzl-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Stolzl";src:url("../fonts/Stolzl-Regular.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Stolzl";src:url("../fonts/Stolzl-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Stolzl";src:url("../fonts/Stolzl-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
--c-4720B7:#4720B7;
--c-F9F5FF:#F9F5FF;
--c-yellow:#FDCC0D;
--c-yellow2:#FFE373;
--c-white:#FFFFFF;
--c-6D00F1:#6D00F1;
--c-5B5B5B:#5B5B5B;
--c-380279:#380279;
--c-0A54FF:#0A54FF;
--c-222222:#222222;
--c-2c0060:#2C0060;
--c-3e0088:#3E0088;
--c-5e00cf:#5E00CF;
--c-732FE9:#732FE9;
--c-3C0084:#3C0084;
--c-161616:#161616;
--c-white-06:rgba(255,255,255,.06);
--c-white-10:rgba(255,255,255,.10);
--c-white-12:rgba(255,255,255,.12);
--c-white-65:rgba(255,255,255,.65);
--page: var(--c-222222);
--outer: var(--c-3e0088);
--inner: var(--c-5e00cf);
--yellow: var(--c-yellow);
--text: var(--c-white);
--rOuter: 6rem;
--rInner: 3rem;
--marquee-speed: 34s;
--logo-gap: 0rem;
--logo-slot: 120px;
--logo-h: 5.5rem;
--shift: 800px;
}
.kolir-page {
min-height: 100vh;
padding: 2rem;
background: var(--page);
overflow-x: clip;
overflow-y: clip;
}
@media (max-width: 1000px) { .kolir-page { padding: .6rem; } }
.shell { max-width: 137.6rem; margin: 0 auto; }
@media (max-width: 1000px) {
html { height: 100%; overflow: hidden; }
body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.kolir-page { min-height: auto; overflow: visible; }
}
.hero { position: relative; }
.hero-card{
width: 100%;
border-radius: var(--rOuter);
padding: 3.6rem 14rem 10.4rem 14rem;
background: var(--outer);
position: relative;
overflow: visible;
}
@media (max-width: 1000px){
.hero-card{
background: var(--c-2c0060);
border-radius: 5rem;
padding: 2rem 1rem 4rem 1rem;
}
}
.hero-card-decor{
position:absolute;
inset:0;
pointer-events:none;
user-select:none;
z-index:0;
}
.site-header{ position: relative; z-index: 10; }
.hero-head{
height: 8.4rem;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 2.4rem;
padding: 0 9rem;
}
.hero-head-left { justify-self: start; }
.hero-head-right { justify-self: end; }
.hero-head-center{
justify-self: end;
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.1rem 1.6rem;
border-radius: 999rem;
background: var(--c-2c0060);
font-weight: 500;
}
.brand{ display:flex; align-items:center; text-decoration:none; color:var(--text); }
.brand img{ height:3.2rem; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:3.2rem; padding:0 1.6rem; }
.nav a:hover{opacity: 0.7; }
.nav a{ color:var(--text); text-decoration:none; font-size:1.4rem; font-weight:400; letter-spacing:.01em; }
.cta-top{
display:inline-flex;align-items:center;justify-content:center;height:3rem;
padding:0 1.8rem;border-radius:999rem;background:transparent;color:var(--text);
text-decoration:none;font-size:1.35rem;font-weight:500;
box-shadow: inset 0 0 0 1px var(--yellow);
white-space: nowrap;
transition: box-shadow 0.3s ease;
}
.cta-top:hover {
background-color: var(--c-5e00cf);
box-shadow: inset 0 0 0 0px var(--yellow);
}
.lang{
display:inline-flex;align-items:center;gap:.8rem;color:var(--text);
font-size:1.4rem;font-weight:400;text-decoration:none;
}
.chev{
width:.9rem;height:.9rem;
border-right:.2rem solid var(--yellow);
border-bottom:.2rem solid var(--yellow);
transform: rotate(45deg);
margin-top: -.2rem;
}
.m-top{ display:none; }
.m-menu{ display:none; }
@media (max-width: 1000px){
.hero-head{ display:none; }
.m-top{
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
z-index: 100;
margin-bottom: 2rem;
padding: 0 4rem;
}
.m-burger{
width: 7rem;
height: 4rem;
border-radius: 2.6rem;
border: 0;
background: var(--c-5e00cf);
display: grid;
place-items: center;
cursor: pointer;
}
.m-burger span{
width: 3.4rem;
height: .2rem;
border-radius: 99rem;
background: var(--c-white);
display: block;
box-shadow: 0 .72rem 0 var(--c-white);
transform: translateY(-.36rem);
}
.m-burger.is-open{ background: var(--c-white); }
.m-burger.is-open span{
background: var(--c-5e00cf);
box-shadow: 0 .72rem 0 var(--c-5e00cf);
}
.m-brand img{ height: 2.4rem; display:block; }
.m-lang{
height:4rem;
padding:0 1.8rem;
border-radius:2.6rem;
display:flex;
align-items:center;
gap:.8rem;
text-decoration:none;
color:var(--text);
background:transparent;
border:2px solid var(--c-5e00cf);
font-size:1.5rem;
font-weight:400;
}
.m-lang .chev{
width:1rem;height:1rem;
border-right:.22rem solid var(--yellow);
border-bottom:.22rem solid var(--yellow);
transform: rotate(45deg);
margin-top:-.2rem;
}
.m-menu{
display:block;
position:absolute;
left:4rem;
right:4rem;
top:7.2rem;
z-index:45;
opacity:0;
transform: translateY(-.8rem) scale(.985);
pointer-events:none;
transition: .22s ease;
}
.m-menu.is-open{
opacity:1;
transform: translateY(0) scale(1);
pointer-events:auto;
}
.m-menu-card{
border-radius: 3rem;
width: 68%;
padding: 6rem 1rem 1.2rem;
background: var(--c-5e00cf);
overflow: hidden;
margin: -8rem 2rem 2rem -1rem;
box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.22);
}
.m-menu a{
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem 1rem;
color:var(--text);
text-decoration:none;
font-size:1.6rem;
font-weight:500;
}
.m-menu a + a{ border-top:.1rem solid rgba(255,255,255,.14); }
}
.hero-inner{
position: relative;
z-index: 3;
isolation: isolate;
margin-top: 6rem;
padding: 0 0 0 9rem;
display: flex;
align-items: stretch;
justify-content: space-between;
overflow: visible;
}
.hero-inner-clip{
position:absolute;
inset:0;
border-radius: var(--rInner);
background: var(--inner);
overflow: hidden;
z-index: 1;
}
.hero-decor{
position:absolute;
pointer-events:none;
user-select:none;
opacity:1;
filter:none;
z-index:2;
}
.hero-scribble{
right:-8rem;
top:1.6rem;
width:61rem;
height:auto;
color: var(--c-yellow);
}
.hero-left{
z-index: 7;
position: relative;
flex: 1 1 auto;
min-width: 0;
padding-top: 6rem;
}
.pill{
display:inline-flex;
align-items:center;
justify-content:center;
height:4rem;
padding: 0 2.2rem;
border-top-left-radius:0 !important;
border-radius:999rem;
background:transparent;
border: .15rem solid var(--yellow);
color:var(--text);
font-size:1.5rem;
font-weight:600;
position:relative;
z-index:8;
}
.hero-title{
margin: 1.4rem 0 0;
font-size: 5.5rem;
line-height: 1.02;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--text);
position: relative;
z-index: 8;
}
.hero-title .t-brand{
display:block;
padding-left:23rem;
margin-top:-6.2rem;
}
.hero-title .t-line{ display:block; width: 60rem; }
.hero-bottom{
margin-top: 3rem;
display:grid;
grid-template-columns: auto 1fr;
column-gap: 3rem;
align-items:start;
position:relative;
z-index: 8;
}
.btn{
padding: 1.5rem 3.2rem;
border-radius: 999rem;
border: 0;
cursor: pointer;
font-size: 2rem;
font-weight: 600;
line-height: 2rem;
background: var(--yellow);
color: var(--inner);
white-space: nowrap;
position: relative;
z-index: 10;
transition: opacity 0.3s ease;
text-decoration: none;
}
.btn:hover{
opacity: 0.95;
}
.hero-info{
display:grid;
grid-template-columns: .3rem minmax(0,33rem);
column-gap: 2rem;
align-items: center;
transform: translateY(-7.1rem);
z-index: 8;
position: relative;
}
.hero-line{ width:.2rem; height:13.2rem; border-radius:9rem; background: var(--yellow); }
.hero-desc{ margin:0; font-size:1.2rem; line-height:1.55; color:var(--text); max-width:33rem; font-weight:400; }
.hero-right{
position: relative;
z-index: 6;
flex: 0 0 46rem;
display:flex;
align-items:flex-end;
justify-content:flex-end;
pointer-events:none;
}
.girl{
width: 49.7rem;
height:auto;
display:block;
margin-right: 4rem;
position: relative;
z-index: 6;
margin-top: -6.5rem;
}
.trusted{
margin-top: 4.5rem;
display:flex;
align-items:center;
gap: 4.8rem;
color: var(--c-white-65);
font-size: 1.4rem;
position: relative;
z-index: 5;
width: 100%;
padding: 0 9rem;
font-weight: 400;
}
.trusted .label{
margin: 0;
color: var(--text);
font-weight: 400;
white-space: nowrap;
flex: 0 0 auto;
}
.logos{
position: relative;
isolation: isolate;
}
.logos-track{
position: relative;
z-index: 1;
}
.logos::before,
.logos::after{
content:"";
position:absolute;
top:0;
bottom:0;
width: 8rem;
pointer-events:none;
z-index: 2;
}
.logos::before{
left:0;
background: linear-gradient(
90deg,
var(--outer) 0%,
rgb(44 0 96 / 0) 100%
);
}
.logos::after{
right:0;
background: linear-gradient(
270deg,
var(--outer) 0%,
rgb(44 0 96 / 0) 100%
);
}
@media (max-width: 1000px){
.logos::before,
.logos::after{
width: 6rem;
}
.logos::before{
left:0;
background: linear-gradient(
90deg,
var(--c-2c0060) 0%,
rgb(44 0 96 / 0) 100%
);
}
.logos::after{
right:0;
background: linear-gradient(
270deg,
var(--c-2c0060) 0%,
rgb(44 0 96 / 0) 100%
);
}
}
.logos{
position:relative;
flex:1 1 auto;
min-width:0;
overflow:hidden;
-webkit-mask-image: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 7%,
rgba(0,0,0,1) 93%,
rgba(0,0,0,0) 100%
);
mask-image: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 7%,
rgba(0,0,0,1) 93%,
rgba(0,0,0,0) 100%
);
}
.logos-track{
display:flex;
align-items:center;
gap: 1rem;
width: max-content;
will-change: transform;
animation: marquee var(--marquee-speed) linear infinite;
}
.logo-item{
flex: 0 0 10rem;
height: 5rem;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
pointer-events:none;
}
.logo-item img{ height:100%; width:auto; display:block; }
@keyframes marquee{
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1 * var(--shift))); }
}
@media (max-width: 1000px){
.hero { overflow: visible; }
.hero-inner{
margin-top: 0;
border-radius: 5rem;
padding: 3.6rem 2.2rem;
height: 53rem;
overflow: hidden;
}
.hero-inner-clip{ border-radius: 5rem; }
.hero-inner::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 12rem;
background: linear-gradient(180deg, rgba(94,0,207,0) 0%, rgba(94,0,207,1) 100%);
z-index:4;
pointer-events:none;
border-radius: 0rem 0rem 5rem 5rem;
}
.hero-scribble{ display:none !important; }
.pill{ height:2.5rem; padding:.8rem 1.5rem; font-size:1rem; font-weight:500; }
.hero-title{ margin:-3rem 0 0; font-size:3.5rem; line-height:1.1; letter-spacing:0; }
.hero-title .t-brand{ display:inline; margin-top:0; padding-left:15.5rem; }
.hero-title .t-line{ display:block; width:24rem; }
.hero-title .t-line--1{ display:inline; }
.hero-title .t-line--2,.hero-title .t-line--3{ display:block; }
.hero-left{ padding-top:0; }
.hero-right{
position:absolute;
right:0;
bottom:0;
z-index:4;
}
.girl{
/* width:36rem;
height:39rem;
margin:0;
z-index:4;
margin-top:0;
transform: translateX(9rem); */
width: 44rem;
height: 47rem;
margin: 0;
z-index: 4;
margin-top: 0;
transform: translateX(12rem);
top: 2rem;
}
.hero-bottom{
margin-top:2.4rem;
display:flex;
flex-direction:column;
gap:7.5rem;
}
.hero-info{
transform:none;
order:1;
grid-template-columns:.3rem minmax(0,22rem);
column-gap:1.7rem;
}
.hero-line{ height:12.4rem; }
.hero-desc{ font-size:1.1rem; line-height:2rem; max-width:13.5rem; }
.btn{
order:2;
width:100%;
height:4.5rem;
font-size:1.7rem;
padding:0 2.6rem;
white-space: normal;
z-index:12;
display: flex;
justify-content: center;
align-items: center;
}
:root{ --marquee-speed: 26s; --logo-h: 6.5rem; }
.trusted{
margin-top:2.2rem;
padding:0 3rem;
gap:1.6rem;
flex-direction:column;
align-items:flex-start;
}
.logos{ -webkit-mask-image:none; mask-image:none; width:100%; }
}
@media (prefers-reduced-motion: reduce){
.logos-track{ animation:none; }
}
.s-scribble{
position:absolute;
height:auto;
opacity:1;
filter:none;
}
.s-scribble--left{
left:-21rem;
top:-22rem;
width:67rem;
transform: rotate(0deg);
color: var(--c-2c0060);
}
.s-scribble--right{
right:-46rem;
top:24rem;
width:74rem;
transform: rotate(0deg);
color: var(--c-2c0060);
}
/*
SERVICES*/
/* 4 */
.services-card{ position: relative; }
.services-scribble-left{
position: absolute;
left: -40rem;
top: -39rem;
width: 65rem;
height: auto;
color: var(--c-161616);
pointer-events: none;
user-select: none;
z-index: 1;
}
.services-scribble-left svg{
width: 100%;
height: auto;
display: block;
}
.services-content{ position: relative; z-index: 2; }
@media (max-width: 1000px){
.services-scribble-left {
left: 26rem;
top: -15rem;
width: 32rem;
transform: rotate(299deg);
}
}
.aboutss-card{ position: relative; }
.aboutss-scribble-left{
position: absolute;
left: -65rem;
top: -75rem;
width: 75rem;
height: auto;
color: var(--c-161616);
pointer-events: none;
user-select: none;
z-index: 1;
}
.aboutss-scribble-left svg{
width: 100%;
height: auto;
display: block;
}
.aboutss-content{ position: relative; z-index: 2; }
@media (max-width: 1000px){
.aboutss-scribble-left{
left: -10rem;
top: -12rem;
width: 39rem;
transform: rotate(252deg);
}
}
/* 11 */
.aboutss-scribble-right{
position: absolute;
right: -59rem;
top: -49rem;
width: 54rem;
height: auto;
color: var(--c-161616);
pointer-events: none;
user-select: none;
z-index: 1;
}
.aboutss-scribble-right svg{
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1000px){
.aboutss-scribble-right{ display: none; }
}
/* 2 */
.footer-scribble-left{
position: absolute;
left: -61rem;
top: 76rem;
width: 54rem;
height: auto;
color: var(--c-3C0084);
pointer-events: none;
user-select: none;
z-index: 1;
transform: rotate(11deg);
}
.footer-scribble-left svg{
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1000px){
.footer-scribble-left{ display: none; }
}
/* 22 */
.footer-scribble-right{
position: absolute;
right: -51rem;
top: 101rem;
width: 54rem;
height: auto;
color: var(--c-161616);
pointer-events: none;
user-select: none;
z-index: 1;
transform: rotate(11deg);
}
.footer-scribble-right svg{
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1000px){
.footer-scribble-right{ display: none; }
}
.services{
margin-top: -8rem;
width: 100%;
padding: 3.6rem 14rem 10.4rem 14rem;
}
.services-card{
width: 100%;
border-radius: var(--rInner);
background: var(--yellow);
padding: 5.2rem 9rem 6.2rem;
position: relative;
overflow: visible;
isolation: isolate;
z-index: 40;
}
.services-clip{
position:absolute;
inset:0;
border-radius: var(--rInner);
overflow:hidden;
z-index:0;
pointer-events:none;
}
.services-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
user-select:none;
}
.services-content{ position:relative; z-index:2; }
.services-head{
position: relative;
display:flex;
align-items:flex-start;
justify-content:center;
min-height:6.8rem;
}
.services-title{
margin:0;
font-size:4.5rem;
line-height:1;
font-weight:500;
letter-spacing:-0.02em;
color: var(--c-222222);
text-align:center;
}
.services-label{
position:absolute;
right:0;
top:1.2rem;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:1.1rem;
color: var(--c-222222);
font-size:1.8rem;
font-weight:500;
}
.services-label .lines{ display:flex; align-items:center; gap:.9rem; }
.services-label .l1,.services-label .l2{ display:block; height:.25rem; border-radius:99rem; }
.services-label .l1{ width:5rem; background: var(--c-yellow2); }
.services-label .l2{ width:2.5rem; background: var(--c-732FE9); }
.services-grid{
margin-top: 4.2rem;
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 2.6rem;
position:relative;
z-index:2;
grid-auto-rows: 9.6rem;
align-items:start;
overflow: visible;
}
.svc{
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--rInner);
background: var(--c-white);
padding: 2.6rem 7.4rem 2.6rem 2.6rem;
text-decoration: none;
color: var(--c-222222);
z-index: 1;
transition: box-shadow .25s ease, background .25s ease;
will-change: box-shadow;
min-height: 11rem;
--svc-head-h: 5.8rem;
}
.svc-text{
position: relative;
z-index: 2;
display: grid;
grid-template-rows: var(--svc-head-h) auto auto;
align-content: start;
min-width: 0;
}
.svc-title{
margin:0;
font-size:1.9rem;
font-weight:500;
line-height:1.1;
color: var(--c-222222);
align-self: center;
}
.svc-line{
width: 8.2rem;
height: .26rem;
border-radius: 99rem;
background: var(--yellow);
margin-top: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(.4rem);
transition: opacity .22s ease, transform .22s ease, max-height .22s ease, margin-top .22s ease;
}
.svc-desc{
margin: 0;
max-width: 38rem;
font-size:1.3rem;
line-height:1.45;
color: var(--c-white);
margin-top: 0;
max-height: 0;
opacity: 0;
overflow:hidden;
transform: translateY(.6rem);
transition: opacity .22s ease, transform .22s ease, max-height .22s ease, margin-top .22s ease;
}
.svc-ico{
width: 4.2rem;
height: 4.2rem;
border-radius:50%;
background: var(--yellow);
display:grid;
place-items:center;
color: var(--c-222222);
position:absolute;
right: 1.4rem;
top: 1.4rem;
z-index:3;
transition: background .22s ease, color .22s ease;
}
.svc-ico svg{
width: 1.0rem;
height: 1.0rem;
display:block;
transition: transform .22s ease;
transform-origin: 50% 50%;
transform: rotate(0deg);
}
.svc-corner{
position:absolute;
top:-5rem;
right:-21rem;
width: 34rem;
height:34rem;
pointer-events:none;
user-select:none;
color: var(--c-4720B7);
opacity: 0;
transform: translateY(-1.2rem) scale(.98);
transition: opacity .25s ease, transform .25s ease;
z-index:1;
}
.svc.is-open{
background: var(--c-5e00cf);
box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.22);
z-index: 60;
}
.svc.is-open .svc-title{ color: var(--c-white); }
.svc.is-open .svc-line{
margin-top: 2rem;
max-height: 1rem;
opacity: 1;
transform: translateY(0);
}
.svc.is-open .svc-desc{
margin-top: 2rem;
max-height: 20rem;
opacity: 1;
transform: translateY(0);
}
.svc.is-open .svc-corner{
opacity: 1;
transform: translateY(0) scale(1);
}
.svc.is-open .svc-ico{
background: var(--c-white);
color: var(--c-5e00cf);
}
.svc.is-open .svc-ico svg{
transform: rotate(280deg) !important;
}
@media (hover:hover){
.svc:hover{
background: var(--c-5e00cf);
box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.22);
z-index: 60;
}
.svc:hover .svc-title{
color: var(--c-white);
letter-spacing: -0.01em;
}
.svc:hover .svc-line{
margin-top: 2rem;
max-height: 1rem;
opacity: 1;
transform: translateY(0);
}
.svc:hover .svc-desc{
margin-top: 2rem;
max-height: 20rem;
opacity: 1;
transform: translateY(0);
}
.svc:hover .svc-ico{
background: var(--c-white);
color: var(--c-5e00cf);
}
.svc:hover .svc-ico svg{
transform: rotate(280deg) !important;
}
.svc:hover .svc-corner{
opacity: 1;
transform: translateY(0) scale(1);
}
}
.services-float{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
user-select:none;
}
.services-content{ z-index:auto !important; }
.services-grid{ z-index:auto !important; }
.services-float{ z-index: 3; }
.svc.is-open{ z-index: 999 !important; }
@media (hover:hover){
.svc:hover{ z-index: 999 !important; }
}
.vr-org{
position:absolute;
right:6rem;
bottom:-9.6rem;
width:33rem;
height:auto;
}
.planet-org{
position:absolute;
right:-8.2rem;
top:21rem;
width:16rem;
height:auto;
}
.vector-s1{ left:-15rem; top:4rem; width:51rem; transform:rotate(0deg); color: var(--c-yellow2); }
.vector-s2{ right:0rem; top:-2rem; width:37rem; transform:rotate(0deg); color: var(--c-yellow2); }
@media (max-width: 1000px){
.services{
margin-top: -2.5rem;
padding: .6rem;
}
.services-card{
border-radius:4rem;
padding: 4rem 1.2rem 12.2rem;
}
.services-clip{ border-radius:4rem; }
.services-title{ font-size:4.4rem; }
.services-label{ display:none; }
.services-grid{
margin-top: 3.2rem;
grid-template-columns: 1fr;
gap: 1.6rem;
grid-auto-rows: auto;
}
.svc{
border-radius: 1.5rem;
padding: 2.8rem 7.2rem 2.8rem 2.4rem;
min-height: 7.6rem;
--svc-head-h: 3.6rem;
}
.svc-title{
font-size: 1.6rem;
}
.svc-ico{
width: 4.2rem;
height: 4.2rem;
right: 1.6rem;
top: 50%;
transform: translateY(-50%);
}
.svc-ico svg{ width:1.2rem; height:1.2rem; }
.svc.is-open .svc-ico{
top: 2rem;
right: 2rem;
transform: none;
}
.svc-corner{
width: 29rem;
top: -8rem;
right: -18rem;
}
.s-scribble--left{
left:-4.8rem;
top:-13rem;
width:48rem;
transform:rotate(352deg);
color: var(--c-3C0084);
}
.s-scribble--right{
display:block;
right:-20rem;
top:-10rem;
width:40rem;
transform:rotate(18deg);
display: none;
}
.vr-org{ right:auto; left:1rem; bottom:-9.5rem; width:26rem; }
.planet-org{ right:-2rem; top:auto; bottom:1.2rem; width:12.5rem; }
.vector-s1{ left:-15rem !important; top:52rem !important; width:51rem !important; transform:rotate(10deg) !important; color: var(--c-yellow2); }
.vector-s2{ right:-24rem !important; top:7rem !important; width:37rem !important; transform:rotate(28deg) !important; color: var(--c-yellow2); }
}
/*PORTFOLIO */
.swiper-wrapper {
position: relative;
width: 0% !important;
height: 100%;
z-index: 1;
}
.portfolio{
width: 100%;
padding: 0rem 14rem 7.2rem 14rem;
margin-top: 0rem;
position: relative;
}
@media (max-width: 1000px){
.portfolio{ padding: 4.4rem 1rem 5.2rem; margin-top: 1.2rem; }
}
.portfolio-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 3rem;
padding: 0 9rem;
}
@media (max-width: 1000px){
.portfolio-head{ padding: 0 2.2rem; flex-direction:column; gap: 1.6rem; }
}
.p-title{
margin:0;
font-size: 4.5rem;
line-height: 1.02;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--yellow);
}
@media (max-width:1000px){
.p-title{ font-size: 5.2rem; }
}
.p-sub{
margin: 2.1rem 0 0;
max-width: 56rem;
font-size: 1.6rem;
line-height: 1.65;
color: var(--c-white);
font-weight: 400;
}
@media (max-width:1000px){
.p-sub{ margin-top: 1.2rem; font-size: 1.4rem; max-width: 34rem; }
}
.p-underline{
width: 9.2rem;
height: .26rem;
border-radius: 99rem;
background: var(--yellow);
margin-top: 2.0rem;
}
.p-right{
display:flex;
align-items:flex-start;
justify-content:flex-end;
padding-top: .6rem;
min-width: 18rem;
}
@media (max-width:1000px){
.p-right{ padding-top: 0; justify-content:flex-start; }
.p-mini{display: none !important;}
}
.p-mini{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:.8rem;
color:var(--c-white);
font-size:1.4rem;
font-weight:500;
opacity:.95;
}
.p-mini-line{
width:2.6rem;
height:.24rem;
border-radius:999rem;
background:var(--yellow);
}
.p-stage{
margin-top: 4.4rem;
padding: 0 9rem;
position: relative;
}
@media (max-width: 1000px){
.p-stage{ padding: 0 2.2rem; margin-top: 3.2rem; }
}
.p-stage-inner{
position: relative;
max-width: 100rem;
margin: 0 auto;
padding: 1.6rem 0 0;
}
.p-stage-inner::before,
.p-stage-inner::after{
content:"";
position:absolute;
top: 0;
bottom: 0;
width: 20rem;
z-index: 25;
pointer-events:none;
}
.p-stage-inner::before{
left: -1rem;
}
.p-stage-inner::after{
right: -1rem;
}
@media (max-width: 1000px){
.p-stage-inner::before,
.p-stage-inner::after{ width: 10rem; }
}
.p-back-scribble{
position:absolute;
left: 50%;
top: 7.2rem;
transform: translateX(-50%);
width: 86rem;
height:auto;
opacity: .18;
filter: blur(.2rem);
z-index: 1;
pointer-events:none;
user-select:none;
}
@media (max-width:1000px){
.p-back-scribble{ width: 64rem; top: 6.2rem; opacity:.14; }
}
.p-swiper{
position: relative;
z-index: 5;
width: 100%;
overflow: visible;
padding: 2.2rem 0 3.5rem;
user-select:none;
perspective: 1400px;
}
.p-swiper .swiper-wrapper{
align-items: center;
transform-style: preserve-3d;
}
.p-swiper .swiper-slide{
width: 32.4rem;
transform-style: preserve-3d;
will-change: transform, filter, opacity;
transition: transform 650ms ease, filter 350ms ease, opacity 350ms ease;
}
@media (max-width:1000px){
.p-swiper .swiper-slide{ width: 29.0rem; }
}
.p-card{
position: relative;
border-radius: 3rem;
background: var(--c-161616);
overflow: hidden;
padding: 4rem 1rem 1rem 1rem;
min-height: 46.2rem;
isolation: isolate;
}
.p-card::before{
content:"";
position:absolute;
inset:-.1rem;
border-radius: inherit;
pointer-events:none;
z-index: 0;
}
.p-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 1.2rem 1.5rem;
height: 3.4rem;
border-radius: 999rem;
background: var(--c-white-65);
color: var(--c-222222);
font-weight:500;
font-size: 2.2rem;
letter-spacing: .02em;
position: relative;
z-index: 2;
}
.p-swiper .swiper-slide-active .p-pill{
background: var(--yellow);
color: var(--c-161616);
}
.p-h3{
margin: 1.7rem 0 0;
font-size: 3.0rem;
line-height: 1.06;
font-weight:600;
color: var(--c-white);
position: relative;
z-index: 2;
max-width: 28rem;
}
@media (max-width:1000px){
.p-h3{ font-size: 2.8rem; }
}
.p-shot{
margin-top: 2.2rem;
border-radius: 3.1rem;
overflow: hidden;
position: relative;
display:flex;
align-items:center;
justify-content:center;
z-index: 2;
}
@media (max-width:1000px){
.p-shot{ height: 26.6rem; border-radius: 3.0rem; }
}
.p-shot img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
filter: grayscale(1);
opacity:.9;
transform: translateZ(0);
transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.p-swiper .swiper-slide-active .p-shot img{
filter:none;
opacity:1;
}
.p-go{
position:absolute;
right: 1.6rem;
bottom: 1.6rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
background: var(--c-0A54FF);
display:grid;
place-items:center;
z-index: 3;
}
.p-go svg{ width: 2.0rem; height: 2.0rem; display:block; }
.p-nav{
position:absolute;
top: 50%;
transform: translateY(-2%);
z-index: 30;
width: 6rem;
height: 6rem;
border-radius: 50%;
cursor:pointer;
display:grid;
place-items:center;
background: transparent;
border: .22rem solid var(--c-white);
color: var(--c-white);
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.p-nav svg{ width: 3.5rem; height: 3.5rem; display:block; }
.p-prev{ left: -4.8rem; top: 24rem; }
.p-next{ right: -4.8rem; top: 24rem; }
.p-next.is-filled{
background:var(--c-white);
border-color:var(--c-white);
color:var(--c-161616);
}
@media (hover:hover){
.p-nav:hover{
transform: translateY(-2%) scale(1.03);
background:var(--c-white);
border-color:var(--c-white);
color:var(--c-161616);
}
}
@media (max-width:1000px){
.p-nav{ width: 5.6rem; height: 5.6rem; }
.p-prev{ left: 0.8rem; }
.p-next{ right: 0.8rem; }
.p-nav svg{ width: 2.0rem; height: 2.0rem; }
.p-nav{ display:none !important; }
}
.p-nav:focus-visible{
outline: .25rem solid var(--yellow);
outline-offset: .35rem;
}
.p-progress{
position: relative;
z-index: 26;
margin: -1.2rem auto 0;
display:flex;
justify-content:center;
align-items:center;
}
.p-progress-bar{
border-radius: 999rem;
background: var(--c-161616);
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 2rem;
}
.p-progress-dot{
width: 3rem;
height: .15rem;
border-radius: 999rem;
background: var(--c-222222);
padding:.15rem;
cursor: pointer;
}
/* 1232 */
.briefs-panel-left{
will-change: transform, opacity;
}
.briefs-panel-left .briefs-tag,
.briefs-panel-left .briefs-h3,
.briefs-panel-left .briefs-p,
.briefs-panel-left .briefs-btn{
opacity: 1;
will-change: transform, opacity;
}
.briefs-panel-left.is-animating .briefs-tag,
.briefs-panel-left.is-animating .briefs-h3,
.briefs-panel-left.is-animating .briefs-p,
.briefs-panel-left.is-animating .briefs-btn{
animation: briefsItemSlideIn .48s cubic-bezier(.22,.61,.36,1) both;
}
.briefs-panel-left.is-animating .briefs-tag{
animation-delay: 0s;
}
.briefs-panel-left.is-animating .briefs-h3{
animation-delay: .04s;
}
.briefs-panel-left.is-animating .briefs-p{
animation-delay: .08s;
}
.briefs-panel-left.is-animating .briefs-btn{
animation-delay: .12s;
}
@keyframes briefsItemSlideIn{
from{
opacity: 0;
transform: translateX(-1.25rem);
}
to{
opacity: 1;
transform: translateX(0);
}
}
.briefs-girl,
.briefs-heroimg img{
will-change: transform, opacity;
}
.briefs-girl.is-animating,
.briefs-heroimg img.is-animating{
animation: briefsGirlSlideIn .52s cubic-bezier(.22,.61,.36,1);
}
@keyframes briefsGirlSlideIn{
from{
opacity: 0;
transform: translateX(2rem);
}
to{
opacity: 1;
transform: translateX(0);
}
}
.p-progress-dot.is-active{
background: var(--yellow);
width: 5rem;
}
@media (max-width:1000px){
.p-progress-bar{ width: 30rem; height: 4.4rem; background: #ffffff00; }
.p-progress-dot{ width: 5.2rem; background-color: var(--c-161616); }
}
.p-c{
padding: 0rem 2.5rem 0rem 2.5rem;
}
.p-zigzag{
position:absolute;
top: -23rem;
left: 31rem;
width: 40rem;
height: 40rem;
transform:translateX(-50%);
color:var(--c-white);
opacity:1;
z-index:1;
pointer-events:none;
user-select:none;
color: var(--c-222222);
}
.p-card > *:not(.p-zigzag):not(.p-go):not(.p-link){ position:relative; z-index:2; }
.p-go{
position:absolute;
right: 1.6rem;
bottom: 1.6rem;
z-index: 3;
}
@media (max-width:1000px){
.p-zigzag{
top: -23rem;
left: 29rem;
width: 40rem;
}
}
@media (hover:hover){
.p-swiper .swiper-slide-active .p-card{ cursor: pointer; }
.p-swiper .swiper-slide:not(.swiper-slide-active) .p-card{ cursor: default; }
.p-swiper .swiper-slide-active .p-card,
.p-swiper .swiper-slide-active .p-card .p-pill,
.p-swiper .swiper-slide-active .p-card .p-h3,
.p-swiper .swiper-slide-active .p-card .p-go,
.p-swiper .swiper-slide-active .p-card .p-shot img,
.p-swiper .swiper-slide-active .p-card .p-zigzag,
.p-swiper .swiper-slide-active .p-card .p-link{
transition: background .18s ease, color .18s ease, filter .18s ease, opacity .18s ease, transform .18s ease;
}
.p-swiper .swiper-slide-active .p-card:hover{
background:var(--c-white);
}
.p-swiper .swiper-slide-active .p-card:hover .p-h3{
color:var(--c-161616);
}
.p-swiper .swiper-slide-active .p-card:hover .p-pill{
background:var(--c-0A54FF);
color:var(--c-white);
}
.p-swiper .swiper-slide-active .p-card:hover .p-zigzag{
color: rgba(10,84,255,.14);
}
.p-swiper .swiper-slide-active .p-card:hover .p-shot img{
filter:none;
opacity:1;
}
.p-swiper .swiper-slide-active .p-card:hover .p-go{
background: var(--yellow);
}
.p-swiper .swiper-slide-active .p-card:hover .p-go svg path{
stroke:var(--c-161616);
}
.p-link{
position:absolute;
left: 2.0rem;
bottom: -1rem;
width: 10rem;
height: 10rem;
background-image: var(--pIcon);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter: drop-shadow(0 .35rem .6rem rgba(0,0,0,.35));
opacity:0;
transform: translateY(.6rem);
z-index: 4;
pointer-events:none;
}
.p-swiper .swiper-slide-active .p-card:hover .p-link{
opacity:1;
transform: translateY(0);
}
}
/* BRIEFS */
.briefs{
width:100%;
margin-top: 2.6rem;
position: relative;
margin-bottom: 10rem;
}
@media (max-width:1000px){
.briefs{ padding: 0rem 1rem 0rem ; margin-top: 0rem; margin-bottom:4rem; }
}
.briefs-card{
position:relative;
border-radius: var(--rOuter);
background: var(--c-5e00cf);
padding: 5rem 23rem 8rem 14rem;
overflow:hidden;
isolation:isolate;
}
@media (max-width:1000px){
.briefs-card{
overflow: visible;
border-radius: 3rem;
padding: 4rem 2rem 2rem 2rem;
}
.briefs-kicker{
margin-left: -4.5rem;
gap: 1rem;
}
.briefs-kicker2{
margin-left: -2.5rem;
gap: 1rem;
margin-top: 2rem;
}
}
.briefs-head{
position:relative;
z-index: 2;
display:grid;
grid-template-columns: 1.35fr 1fr auto;
column-gap: 5rem;
align-items:start;
padding: 0 0rem 0 9rem;
}
.briefs-kicker{
display:flex;
align-items:center;
gap: 1.2rem;
margin-bottom: .5rem;
}
.briefs-kicker2{
display:flex;
align-items:center;
gap: 1.2rem;
margin-bottom: .5rem;
}
.briefs-kline{
width: 3.6rem;
height: .26rem;
border-radius: 99rem;
background: var(--yellow);
}
.briefs-ktext{
color: var(--c-white);
font-size: 1rem;
font-weight: 500;
}
.briefs-title{
margin:0;
font-size: 4.5rem;
line-height: 1.2;
font-weight: 500;
color: var(--c-white);
letter-spacing: -0.02em;
}
.briefs-underline{
margin-top: 2.4rem;
width: 12rem;
height: .26rem;
border-radius: 99rem;
background: var(--yellow);
}
.briefs-mid{
display:flex;
gap: 3.6rem;
padding-top: 2.4rem;
align-items: center;
}
.briefs-vline{
width: .15rem;
height: 8rem;
border-radius: 99rem;
background: var(--yellow);
flex: 0 0 auto;
}
.briefs-lead{
margin:0;
color: var(--c-white);
font-size: 1.2rem;
line-height: 1.3;
font-weight: 400;
}
.briefs-right{ padding-top: 1.6rem; }
.briefs-mini{
display:flex;
flex-direction:column;
align-items:flex-end;
gap: 1.1rem;
color: var(--c-white);
font-size: 1.4rem;
font-weight: 500;
}
.briefs-mini .lines{ display:flex; align-items:center; gap:.9rem; }
.briefs-mini .l1,.briefs-mini .l2{ display:block; height:.25rem; border-radius:99rem; }
.briefs-mini .l1{ width:5rem; background: var(--c-6D00F1); }
.briefs-mini .l2{ width:2.5rem; background: var(--yellow); }
.briefs-body{ position:relative; z-index: 3; margin-top: 5.6rem; }
.briefs-tabs{
display:flex;
align-items:center;
gap: 0;
position:relative;
z-index: 5;
justify-content: flex-end;
}
.briefs-tab{
appearance: none;
border: 0;
background: transparent;
color: var(--c-white);
font-size: 1.4rem;
font-weight: 400;
padding: 2.6rem 2.8rem;
cursor: pointer;
position: relative;
border-radius: 3rem 3rem 0rem 0rem;
transition: background .18s ease, color .18s ease, transform .18s ease;
white-space: nowrap;
}
.briefs-tab + .briefs-tab::before{
content:"";
position:absolute;
left:0;
top:50%;
transform: translateY(-50%);
width:.12rem;
height: 2.2rem;
background: rgba(255,255,255,.14);
}
.briefs-tab.is-active{
background: var(--c-white);
color: var(--c-5e00cf);
font-weight: 500;
transform: translateY(.2rem);
}
.briefs-panel{
background: var(--c-white);
border-radius: 3rem;
padding: 3.2rem 9rem 5.2rem;
display:grid;
grid-template-columns: 1fr 52rem;
/* gap: 5.2rem; */
position:relative;
overflow: visible;
min-height:41rem;
}
.briefs-panel-left{ position:relative; z-index: 2 }
.briefs-tag{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: 999rem;
background: var(--yellow);
color: var(--c-222222);
font-size: 1.4rem;
font-weight: 500;
}
.briefs-h3{
margin: 2.4rem 0 0;
font-size: 2.6rem;
line-height: 1.25;
font-weight: 500;
color: var(--c-222222);
letter-spacing: -0.02em;
}
.briefs-p{
margin: 2rem 0 0;
font-size: 1.2rem;
line-height: 1.2;
color: var(--c-222222);
max-width: 24rem;
font-weight: 500;
}
.briefs-btn{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 3.2rem;
padding: 1.5rem 3rem;
border-radius: 999rem;
background: var(--c-5e00cf);
color: var(--c-white);
text-decoration: none;
font-size: 1.6rem;
font-weight: 500;
transition: opacity 0.3s ease;
}
.briefs-btn:hover{
opacity: 0.9;
}
.briefs-panel-right{
position:relative;
pointer-events:none;
user-select:none;
}
.briefs-yellow{
position: absolute;
right: -18rem;
bottom: -10.4rem;
width: 50rem;
height: 35rem;
border-radius: 3rem;
background: var(--yellow);
overflow: hidden;
}
.briefs-scribble{
position: absolute;
right: -11rem;
bottom: -3rem;
width: 70rem;
height: auto;
opacity: .22;
}
.briefs-girl{
position:absolute;
right: -13.4rem;
bottom: -10.5rem;
width: 37rem;
height:auto;
}
@media (min-width: 1001px) {
.briefs-panel-left, .briefs-panel-right{
width:40rem;
}
.briefs-kicker {
display: none;
}
.briefs-kicker2{
display: none;
}
.footerkmob-hr{
display: none;
}
.briefs-underline{
display: none;
}
}
.briefs-heroimg{ display:none; }
@media (max-width:1000px){
.briefs-tab{
border-radius: 999rem;
}
.briefs-p{
max-width: none;
font-weight: 400;
font-size: 1.4rem;
}
.briefs-lead{
width: 14rem;
}
.briefs-head{
grid-template-columns: 1fr;
row-gap: 2.2rem;
padding: 0 0rem 0 0rem;
}
.briefs-right{ display:none; }
.briefs-mid{ padding-top: 0; gap: 2.2rem; }
.briefs-vline{ height: 7.2rem; display: none; }
.briefs-title{ font-size: 3.2rem; }
.briefs-underline{ margin-top: 2.2rem; width: 8rem; }
.briefs-body{ margin-top: 2.8rem; }
.briefs-tabs{
justify-content: flex-start;
gap: 1.2rem;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-left: 1.2rem;
scrollbar-width: none;
touch-action: pan-x;
margin-right: -5rem;
}
.briefs-tabs::-webkit-scrollbar{ display:none; height:0; }
.briefs-tab{
flex: 0 0 auto;
scroll-snap-align: start;
padding: 1.3rem 2rem;
background-color: var(--c-2c0060);
color: var(--c-white);
}
.briefs-tab + .briefs-tab::before{ display:none; }
.briefs-tab.is-active{ background: var(--c-white); color: var(--c-5e00cf); }
.briefs-panel{
grid-template-columns: 1fr;
padding: 4rem 2rem;
border-radius: 2rem;
margin-top: .6rem;
}
.briefs-h3{ font-size: 2.4rem; }
.briefs-panel-right{ display:none; }
.briefs-btn {
font-size: 1.4rem;
}
.briefs-heroimg {
display: block;
position: absolute;
right: 0rem;
top: 11.6rem;
width: 20rem;
z-index: 2;
pointer-events: none;
-webkit-mask-image: linear-gradient(
180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 70%,
rgba(0,0,0,0) 100%
);
mask-image: linear-gradient(
180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 70%,
rgba(0,0,0,0) 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.briefs-heroimg img{ width:100%; height:auto; display:block; }
}
.yellow{
position: relative;
background: var(--yellow);
border-radius: 3rem;
overflow: visible;
min-height: 35rem;
}
.yellow__clip{
--bleedTop: 140px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: calc(var(--bleedTop) * -1);
overflow: hidden;
border-radius: inherit;
z-index: 1;
pointer-events: none;
}
.yellow__img{
position: absolute;
left: 50%;
bottom: -40px;
transform: translateX(-50%);
height: 520px;
width: auto;
}
.yellow__content{
position: relative;
z-index: 2;
padding: 40px;
}
.briefs-card{
position: relative;
isolation: isolate;
}
.briefs-decor{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
}
/* 2 */
.briefs-bg-left,
.briefs-bg-right{
position: absolute;
height: auto;
}
.briefs-bg-left{
left: -4rem;
top: 9rem;
width: 57rem;
color: var(--c-6D00F1);
}
.briefs-bg-right{
right: -37rem;
top: -10rem;
width: 58rem;
color: var(--c-6D00F1);
}
.briefs-head,
.briefs-body{ position: relative; z-index: 2; }
@media (max-width:1000px){
.briefs-bg-right{
display: none;
}
.briefs-bg-left{
left: 11rem;
top: -4rem;
width: 41rem;
color: var(--c-6D00F1);
transform: rotate(261deg);
}
.t-fadeRight{
display: none;
}
.briefs-bg-right{ right:-44rem; top:-24rem; opacity:.14; }
}
.t-sliderWrap{
position: relative;
}
.t-sliderWrap .swiper{
overflow: visible !important;
}
.t-fadeRight{
position: absolute;
top: 1rem;
right: -6rem;
height: 55%;
width: 27rem;
pointer-events: none;
z-index: 9999;
background: linear-gradient(90deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 1) 100%);
}
@media (min-width: 1001px){
.briefs-tab:last-child.is-active::after{
content: none;
}
.briefs-body:has(.briefs-tab:last-child.is-active) .briefs-panel{
border-top-right-radius: 0;
}
}
/* */
@media (min-width: 1001px){
.briefs-tab:last-child.is-active::after{
content: none;
}
}
@media (min-width: 1001px){
.briefs-tabs{ overflow: visible; position: relative; }
.briefs-tab{ position: relative; z-index: 1; }
.briefs-tab.is-active{ z-index: 50; }
.briefs-tab.is-active::before,
.briefs-tab.is-active::after{
content:"";
position:absolute;
bottom: 0;
width: 4.1rem;
height: 4.1rem;
background-color: var(--c-white);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-size: 100% 100%;
pointer-events:none;
z-index: 5;
}
.briefs-tab.is-active::before{
left: -4rem;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M40%2040H0C22.0914%2040%2040%2022.0914%2040%200V40Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M40%2040H0C22.0914%2040%2040%2022.0914%2040%200V40Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
}
.briefs-tab.is-active::after{
right: -4rem;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%2040V0C0%2022.0914%2017.9086%2040%2040%2040H0Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%2040V0C0%2022.0914%2017.9086%2040%2040%2040H0Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
}
.briefs-tab:not(:first-child).is-active::before{
transform: translateY(-0.7rem);
}
.briefs-tab:first-child.is-active::before{
transform: translateY(0);
}
}
.briefs-yellow{
position: absolute;
right: -18rem;
bottom: -10.4rem;
width: 50rem;
height: 35rem;
border-radius: 3rem;
background: var(--yellow);
overflow: visible;
--bleedL: 12rem;
-webkit-clip-path: inset(0 0 0 calc(var(--bleedL) * -1) round 3rem);
clip-path: inset(0 0 0 calc(var(--bleedL) * -1) round 3rem);
}
.briefs-scribble{
position: absolute;
left: calc(var(--bleedL) * -1);
right: auto;
bottom: -3rem;
width: 70rem;
opacity: 1;
pointer-events: none;
user-select: none;
color: var(--c-yellow2);
}
.briefs-panel{
position: relative;
isolation: isolate;
}
.briefs-panel-decor{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
user-select:none;
overflow: hidden;
}
.briefs-panel-scribble{
position: absolute;
left: 40rem;
top: -7rem;
width: 56rem;
height: auto;
color: var(--c-F9F5FF);
opacity: 1;
}
.briefs-panel-left,
.briefs-panel-right{ position:relative; z-index:2; }
@media (max-width:1000px){
.briefs-panel-scribble{ display:none; }
}
/* TESTIMONIALS */
.testimonials{
position: relative;
overflow: hidden;
}
.t-scribble{
position: absolute;
left: -60rem;
top: 50%;
transform: translateY(-50%);
width: 109.5rem;
height: auto;
z-index: 0;
pointer-events: none;
}
.t-scribble svg{
width: 100%;
height: auto;
display: block;
}
.testimonials > *:not(.t-scribble){
position: relative;
z-index: 2;
}
@media (max-width: 1000px){
.t-scribble{
left: -45rem;
top: 40%;
width: 85rem;
}
}
.testimonials{
--ts-yellow: var(--yellow);
--ts-bg: #222222;
--screen-inset-x: 7.4%;
--screen-inset-top: 2.9%;
--screen-inset-bottom: 3.1%;
--screen-radius: 5.4rem;
position:relative;
padding: 7.2rem 0 6.8rem;
background: var(--ts-bg);
overflow:hidden;
width: 103% !important;
}
.t-shell{
width:min(132rem, 100% - 12rem);
margin:0 auto;
}
.t-head{
position:relative;
min-height: 22rem;
padding-left: 49rem;
padding-top: 4rem;
}
.t-kicker{
display:flex;
align-items:center;
gap: 1.6rem;
color: var(--c-white);
font-size: 1.4rem;
margin-bottom: 2.2rem;
}
.t-kline{
width: 4.4rem;
height: .2rem;
background: var(--ts-yellow);
border-radius: 999rem;
}
.t-title{
margin:0;
font-size: 4.5rem;
line-height: .95;
letter-spacing: -0.02em;
color:var(--c-white);
font-weight: 500;
}
.t-title span{ color: var(--ts-yellow); }
.t-subwrap{
margin-top: 2.2rem;
max-width: 40rem;
}
.t-sub{
margin:0;
color: var(--c-white);
font-size: 1.4rem;
line-height: 1.55;
}
.t-vline{ display:none; }
.t-underline{
display:block;
width: 7.4rem;
height: .26rem;
background: var(--ts-yellow);
border-radius: 999rem;
margin-top: 2rem;
}
.t-topright{
position:absolute;
right:21rem;
top: 1.2rem;
display:flex;
flex-direction:column;
align-items:flex-end;
gap: 1rem;
color:var(--c-white);
font-size: 1.4rem;
}
.t-topright .lines{
display:flex;
align-items:center;
gap: 1rem;
}
.t-topright .l1{
width: 4rem;
height: .22rem;
background: var(--c-161616);
border-radius: 999rem;
}
.t-topright .l2{
width: 2.4rem;
height: .22rem;
background: var(--c-yellow);
border-radius: 999rem;
}
/* 121 */
.t-stage{
position:relative;
min-height:38rem;
margin-top: 2.6rem;
}
.t-phone{
position:absolute;
left: 15rem;
top: -25rem;
width: 30rem;
z-index: 2;
pointer-events:none;
}
.t-phone-wrap{
position:relative;
width:100%;
height:100%;
}
.t-phone-frame{
position:relative;
z-index: 3;
width:100%;
height:100%;
display:block;
object-fit: contain;
}
.t-phone-screen{
position: absolute;
left: 1.3rem;
right: 1.3rem;
top: 1.2rem;
bottom: 1.2rem;
border-radius: 4rem;
overflow: hidden;
background: var(--ts-yellow);
z-index: 3;
}
.t-phone-logo{
position:absolute;
left: 2.4rem;
top: 6.4rem;
width: 10rem;
text-transform: lowercase;
}
.t-phone-logo::after{
content:"";
position:absolute;
left: 3.05rem;
top: 2.15rem;
width: 3.0rem;
height: 3.0rem;
border-radius: 50%;
background: var(--c-6D00F1);
opacity:.95;
z-index:-1;
}
.t-hand{
position: absolute;
left: -0.6rem;
top: 6.8rem;
width: 43rem;
max-width: none;
height: auto;
filter: grayscale(100%) contrast(1.05);
}
.t-swiper{
position:absolute;
left: 16rem;
right: 0;
top: 1rem;
z-index: 6;
padding: 0 1rem;
margin-right: -8rem !important;
}
/* тут */
.t-swiper .swiper-wrapper{ align-items: stretch; }
.t-swiper .swiper-slide{
width: 43rem;
height: auto;
transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.t-card{
height: 100%;
border-radius: 3rem;
padding: 2.5rem;
background: var(--c-161616);
position:relative;
overflow:hidden;
}
.t-card-top{
display:flex;
align-items:center;
gap: 1.4rem;
margin-bottom: 2.2rem;
position:relative;
z-index:2;
}
.t-ava{
width: 4.6rem;
height: 4.6rem;
border-radius: 50%;
object-fit: cover;
}
.t-name{
color:var(--c-white);
font-size: 1.8rem;
font-weight: 500;
line-height: 1.1;
}
.t-role{
margin-top: .3rem;
color: var(--c-white);
font-size: 1.2rem;
font-weight:300;
opacity: 0.3;
}
.t-rate{
margin-left: auto;
width: 4rem;
height: 4rem;
display: grid;
place-items: center;
background-color: transparent;
background-image: url("../img/star.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
color: var(--c-161616);
font-weight: 600;
font-size: 1.2rem;
position: relative;
z-index: 2;
}
.t-text{
margin:0;
color: var(--c-white);
font-size: 1.3rem;
line-height: 1.4;
position:relative;
z-index:2;
font-weight: 300;
}
.t-progress{
position:absolute;
left: 44%;
bottom: 3.0rem;
transform: translateX(-50%);
padding: 1.6rem 1.8rem;
border-radius: 99rem;
background: rgba(0,0,0,.32);
z-index: 7;
}
.t-progress-bar{
display:flex;
justify-content:center;
align-items:center;
gap: 1.2rem;
}
.t-progress-dot{
width: 3.2rem;
height: .18rem;
border-radius: 999rem;
background: var(--c-222222);
transition: width .22s ease, background-color .22s ease;
cursor:pointer;
}
.t-progress-dot.is-active{
width: 5.2rem;
background: var(--ts-yellow);
}
@media (min-width:1001px){
.t-kicker {
margin-bottom: 3rem;
display: none;
}
}
@media (max-width:1000px){
.testimonials{ padding: 5.2rem 0 5.2rem; }
.t-shell{ width: 100%; }
.t-progress-dot{
background: var(--c-161616);
}
.t-head{ padding: 0 3rem 0 3rem; min-height: unset; }
.t-title{ font-size: 3rem; }
.t-topright{ display:none; }
.t-underline{ display:none; }
.t-title span {
color: var(--c-white);
}
.t-kicker {
display: flex;
align-items: center;
gap: 1rem;
color: var(--c-white);
font-size: 1rem;
margin-bottom: 4rem;
margin-left: -5rem;
}
.t-subwrap{
display:grid;
grid-template-columns: .22rem 1fr;
gap: 1.8rem;
align-items:start;
margin-top: 3rem;
max-width: 24rem;
align-items: center;
}
.t-vline{
display:block;
width: .22rem;
height: 8rem;
background: var(--ts-yellow);
border-radius: 999rem;
}
.t-sub{
font-size: 1.2rem;
margin-top: 0;
}
.t-stage{ min-height: unset; margin-top: 3.2rem; left: -4rem; }
.t-phone{ display:none; }
.t-swiper{
position:relative;
left: 0;
right: 0;
bottom: 0;
padding: 0;
}
.t-swiper .swiper-slide{ width: calc(97vw - 5rem); }
.t-progress{
position:relative;
left:auto;
bottom:auto;
transform:none;
width: 100%;
margin: 2.0rem auto 0;
background-color: var(--c-222222);
}
}
.t-scene,
.testimonials-scene,
.t-wrap {
position: relative;
isolation: isolate;
}
.t-content,
.t-swiper,
.testimonials-swiper {
position: relative;
z-index: 10;
}
.t-hand,
.hand,
.testimonials-hand {
position: absolute;
z-index: 30;
pointer-events: none;
}
.t-phone-screen{ position:absolute; }
.t-camera-phone{
position: absolute;
top: 1.05rem;
left: 50%;
transform: translateX(-50%);
width: 8rem;
height: auto;
z-index: 20;
pointer-events: none;
user-select: none;
}
.t-phone-screen{
overflow: hidden;
}
.t-phone-decor{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
user-select: none;
}
.t-phone-scribble{
position: absolute;
height: auto;
}
.t-phone-scribble--tr{
right: -42rem;
top: -2rem;
width: 72rem;
color: var(--c-yellow2);
}
.t-phone-scribble--bl{
left: -8rem;
bottom: -32rem;
width: 58rem;
color: var(--c-yellow2);
}
.t-phone-logo{ position:absolute; z-index: 15; }
/* ABOUT */
.aboutk{
padding: 6rem 0 0rem;
background: transparent;
margin-bottom: -6rem;
}
.aboutk-shell{
margin: 0 auto;
padding: 0 14rem 0 23rem !important;
}
.aboutk-card{
position: relative;
background: var(--c-yellow2);
border-radius: 3rem;
/* padding: 5rem 7rem 5rem; */
display: grid;
grid-template-columns: 1fr;
overflow: visible;
}
/* .aboutk-media{
position: absolute;
left: -7rem;
top: -4rem;
width: 52rem;
height: 33rem;
border-radius: 3rem;
overflow: visible;
z-index: 2;
} */
.aboutk-media-bg{
position: absolute; inset: 0;
background: var(--c-5e00cf);
}
/* .aboutk-media::after{
content:"";
position: absolute;
right: -6.2rem;
top: 50%;
width: 9rem;
height: 7rem;
transform: translateY(-50%);
border-radius: 999rem;
background: var(--c-5e00cf);
z-index: 3;
} */
.aboutk-pill{
display: inline-flex;
align-items: center;
padding: 0.5rem 1.4rem;
border-radius: 999px;
background: var(--c-white);
font-size: 1.3rem;
line-height: 1;
margin-bottom: 1.6rem;
color: var(--c-161616);
font-weight: 500;
}
.aboutk-title{
margin: 1.6rem 0 1.8rem;
font-size: 3rem;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--c-161616);
font-weight: 500;
}
.aboutk-text{
margin: 0 0 1.6rem;
font-size: 1.3rem;
line-height: 1.5;
color: var(--c-161616);
max-width: 56rem;
}
@media (max-width: 1000px){
.aboutk{ padding: 4rem 0 4.5rem; }
.aboutk-shell{
padding: 0;
}
.aboutk-card{
padding: 0;
border-radius: 3.2rem;
overflow: hidden;
min-height: unset;
}
.aboutk-media{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 42rem;
border-radius: 0;
}
.aboutk-media::after{ display:none; }
.aboutk-scribble{
display: none;
}
.aboutk-img{ object-position: 72% 10%; }
.aboutk-content{
/* padding: 3.2rem 3rem 3.6rem; */
}
.aboutk-title{
font-size: 4rem;
margin: 1.4rem 0 1.6rem;
}
.aboutk-text{
font-size: 1.55rem;
max-width: none;
}
.aboutk-btn{
width: 100%;
justify-content: center;
height: 6.6rem;
display: ruby-text !important;
}
}
/* CONTACT */
.contactk{
padding: 0 0 0rem;
background: transparent;
}
.contactk-shell{
margin: 0 auto;
}
.contactk-card{
background: var(--c-2c0060);
border-radius: 5rem;
padding: 14.6rem 23rem 6rem 23rem;
overflow: hidden;
}
.contactk-head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 3rem;
margin-bottom: 4.6rem;
}
.contactk-title{
margin: 0 0 3rem;
font-size: 4.5rem;
line-height: 1.02;
color: var(--c-white);
font-weight: 500;
}
.contactk-sub{
margin: 0;
font-size: 1.4rem;
color: var(--c-white);
max-width: 56rem;
}
.contactk-line{
display: block;
width: 7rem;
height: .3rem;
background: var(--yellow);
border-radius: 99rem;
margin-top: 3rem;
}
.contactk-head-right{
margin-top: 1.2rem;
color: var(--c-white);
font-size: 1.4rem;
text-decoration: none;
position: relative;
padding-bottom: 1.2rem;
}
.contactk-head-underline{
position: absolute;
right: 0;
bottom: 0;
width: 2.2rem;
height: .3rem;
background: var(--yellow);
border-radius: 99rem;
}
.contactk-grid{
display: grid;
grid-template-columns: minmax(26rem, 1fr) 1.7fr;
gap: 1.5rem;
align-items: stretch;
}
.ck-cards{
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ck-cards .ck-card{ flex: 1 1 auto; }
.ck-card{
background: var(--c-380279);
border-radius: 2.8rem;
padding: 2rem;
color: var(--c-white);
text-decoration: none;
min-height: 15.6rem;
}
.ck-top{
display: flex;
align-items: center;
gap: 1.4rem;
margin-bottom: 2.5rem;
}
.ck-ico{
width: 4rem;
height: 4rem;
display: block;
}
.ck-ttl{
font-size: 2rem;
font-weight: 400;
color: var(--yellow);
}
.ck-txt{
font-size: 1.5rem;
color: var(--c-white);
margin-bottom: 2.5rem;
}
.ck-small{
font-size: 1.5rem;
color: var(--c-white);
margin-bottom: 1rem;
}
.ck-card--studio{
grid-column: 1 / span 1;
min-height: 18.5rem;
}
/* .ck-form{
grid-column: 2 / span 2;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 2.2rem;
background: var(--yellow);
border-radius: 2.8rem;
padding: 1.5rem 2.5rem;
position: relative;
overflow: hidden;
} */
.ck-form{
display: flex;
flex-direction: column;
gap: 1.8rem;
background: var(--yellow);
border-radius: 2.8rem;
padding: 2.6rem 2.8rem;
position: relative;
overflow: hidden;
}
.ck-form-left,
.ck-form-right{ display: block; width: 100%; }
.ck-form-title{ max-width: none; }
/* yellow shapes */
/* .ck-form::before,
.ck-form::after{
content:"";
position: absolute;
width: 28rem;
height: 28rem;
border-radius: 50%;
background: rgba(255,255,255,0.18);
left: -10rem;
top: -12rem;
}
.ck-form::after{
width: 32rem;
height: 32rem;
left: 6rem;
top: 7rem;
background: rgba(255,255,255,0.14);
} */
.ck-form-left{
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.ck-form-title{
font-size: 2rem;
line-height: 1.2;
font-weight: 500;
color: var(--c-380279);
max-width: 36rem;
}
.ck-form-right{
position: relative;
z-index: 1;
display: grid;
/* gap: 1.2rem; */
}
.ck-inp{
width: 100%;
border: 0;
outline: none;
border-radius: 1.6rem;
padding: 1.25rem 1.6rem;
font-size: 1.4rem;
background: var(--c-yellow2);
color: var(--c-5e00cf);
}
.ck-field--email p{
margin:0;
}
.ck-field--submit p{
margin:0;
}
.ck-inp--ta{
/* min-height: 7.6rem; */
resize: none;
padding-top: 1.25rem;
height:7rem;
}
.ck-send{
height: 4.6rem;
border: 0;
border-radius: 999rem;
background: var(--c-5e00cf);
color: var(--c-white);
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.3s ease;
width:100%;
}
.ck-send:hover{
opacity: 0.9;
}
@media (min-width: 1001px){
.contactk-head-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1.2rem;
color: var(--c-white);
}
.contactk-underlines{
display:flex;
align-items:center;
gap: 1.2rem;
}
.contactk-underlines .line{
display:block;
height: .35rem;
border-radius: 99rem;
}
.contactk-underlines .line--purple{
width: 4.4rem;
height: .22rem;
background: var(--c-380279);
opacity: .55;
}
.contactk-underlines .line--yellow{
width: 2.4rem;
height: .22rem;
background: var(--yellow);
}
}
@media (max-width: 1000px){
.ck-txt{
font-size: 1.5rem;
color: var(--c-white);
margin-bottom: 1rem !important;
}
.ck-ttl{
font-size: 2.4rem;
}
.contactk-card{
padding: 4.2rem 1rem 0.8rem;
border-radius: 4rem;
margin-top: 5rem;
overflow: visible;
margin-bottom: 31rem;
}
.contactk-head{
flex-direction: column-reverse;
align-items: flex-start;
margin-bottom: 3.2rem;
}
.contactk-title{ font-size: 4.2rem; }
.contactk-head-right{ align-self: flex-start; display: none;}
.contactk-grid{
grid-template-columns: 1fr;
gap: .8rem;
margin-bottom: -32rem;
}
.ck-card--studio{ grid-column: auto; padding: 2rem; }
.contactk-head-left {
padding: 0rem 2rem;
}
.ck-form{
grid-column: auto;
grid-template-columns: 1fr;
gap: 4rem;
padding: 4rem 2rem;
border-radius: 2rem;
}
.ck-form-title{ max-width: none; font-size: 2.7rem; }
.ck-send{ font-weight: 300; }
}
/* FOOTER */
.footerk{
padding: 4rem 20rem 0rem 20rem;
background-color: var(--c-222222);
}
.footerk-shell{
width: min(126rem, calc(100% - 6rem));
margin: 0 auto;
}
.footerk-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.2rem;
}
.footerk-left{
display: flex;
align-items: center;
gap: 2.2rem;
}
.footerk-logo{
width: 8.6rem;
height: auto;
display: block;
}
.footerk-copy{
font-size: 1.1rem;
color: var(--c-5B5B5B);
}
.footerk-socials{
display: flex;
gap: 0.7rem;
align-items: center;
}
.footerk-social{
}
.footerk-social img{
width: 3rem;
height: 3rem;
display: block;
transition: opacity 0.3s ease;
}
.footerk-social img:hover{
opacity: 0.6;
}
.footerk-hr{
height: .1rem;
background: rgba(255,255,255,0.10);
margin: 3rem 0;
}
.footerkmob-hr{
height: .1rem;
background: rgba(255,255,255,.10);
border: 0;
margin: 0;
width: 100%;
}
.footerk-mid{
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.footerk-legal{
font-size: 1.1rem;
color: var(--c-5B5B5B);
max-width: 70rem;
}
.footerk-links{
display: flex;
gap: 3rem;
align-items: center;
}
.footerk-link{
font-size: 1.1rem;
color: var(--c-white);
text-decoration: underline;
text-underline-offset: .25em;
}
@media (max-width: 1000px){
.footerk-legal{
text-align: center;
}
.footerk-shell{ width: min(46rem, calc(100% - 4rem)); }
.footerk-top{
flex-direction: column;
align-items: flex-start;
gap: 3rem;
}
.footerk-left{
width: 100%;
justify-content: space-between;
gap: 1.6rem;
}
.footerk-copy{
/* max-width: 18rem; */
text-align: right;
font-size: 1.2rem;
}
.footerk-social img{
width: 4rem;
height: 4%;
}
.footerk-socials{
width: 100%;
justify-content: space-between;
}
.footerk-mid{
flex-direction: column;
align-items: flex-start;
gap: 3rem;
}
.footerk-links{
width: 100%;
justify-content: space-between;
}
.footerk {
/* margin-top: 31rem; */
padding: 4rem 1rem 2rem 1rem;
}
}
/* /FOOTER */
/* ABOUT */
.aboutk,
.aboutk-shell,
.aboutk-card{
overflow: visible;
}
.aboutk{
padding: 7rem 0 0rem 0;
}
.aboutk-shell{
max-width: 140rem;
margin: 0 auto;
padding: 0 4rem;
}
.aboutk-card{
position: relative;
}
.aboutk-clip{
position: relative;
background: var(--c-yellow);
border-radius: 3rem;
overflow: hidden;
padding: 4rem 4rem 4rem 51rem;
}
.aboutk-content{
position: relative;
z-index: 3;
max-width: 41rem;
}
.aboutk-title{
margin: 0 0 2rem;
font-size:3rem;
line-height: 1.05;
}
.aboutk-text{
margin: 0 0 1.6rem;
font-size: 1.4rem;
line-height: 1.5;
max-width: 41rem;
}
.aboutk-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.6rem 3rem;
border-radius: 999px;
background: #5A00FF;
color: #fff;
text-decoration: none;
font-weight: 600;
margin-top: 2.6rem;
font-size: 1.8rem;
transition: opacity 0.3s ease;
}
.aboutk-btn:hover{
opacity: 0.9;
}
.aboutk-media{
position: absolute;
left: 0;
top: 0;
width: 52rem;
height: 33rem;
transform: translate(-6rem, -6rem);
z-index: 6;
pointer-events: none;
overflow: visible;
-webkit-clip-path: inset(0 0 var(--cutB) var(--bleedL) round 3rem);
clip-path: inset(0 0 var(--cutB) var(--bleedL) round 3rem);
}
.aboutk-media-bg{
position: absolute;
inset: 0;
border-radius: 4rem;
background: #5A00FF;
overflow: visible;
}
.aboutk-scribble{
color:var(--c-4720B7);
position: absolute;
left: -12rem;
top: -3rem;
width: 67rem;
height: auto;
z-index: 2;
}
.aboutk-img{
position: absolute;
inset: 0;
width: 43rem;
height: 100%;
object-fit: cover;
border-radius: 3rem;
z-index: 3;
overflow: visible;
bottom: 0rem;
top: -1.2rem;
left: 4rem;
}
.about-decor{
position: absolute;
z-index: 1;
pointer-events: none;
}
.about-decor--tr{
top: -1rem;
right: -40rem;
width: 68rem;
transform: rotate(29deg);
color: var(--c-yellow2);
}
.about-decor--tr svg{
width: 100%;
height: auto;
display: block;
}
.about-decor--bl{
color: var(--c-yellow2);
bottom: -32rem;
left: -2rem;
width: 52rem;
transform: rotate(333deg);
}
.about-decor--bl svg{
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1000px){
.aboutk-shell{
padding: 0 !important;
}
.aboutk-shell{ padding: 0 2rem; }
.aboutk-clip{
padding: 9rem 2rem 4rem 7.2rem;
border-radius: 3.2rem;
min-height: auto;
margin-top: 19rem;
margin-left: -3rem;
}
.aboutk-media{
left: 2rem;
top: 0;
width: calc(100% - 0rem);
height: 30rem;
transform: translate(2rem, -6rem);
}
.aboutk-title{ font-size: 3.4rem; }
.aboutk-text{ font-size: 1.5rem; }
.about-decor--tr{
top: -22rem;
right: -25rem;
width: 62rem;
transform: rotate(216deg);
}
.about-decor--bl{
bottom: -34rem;
left: 20rem;
width: 50rem;
transform: rotate(311deg);
}
.aboutk-card {
position: relative;
background: #ffffff00;
}
}
.br-desktop { display: inline; }
@media (max-width: 1000px){
.br-desktop { display: none; }
}
/*
*/
video {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
canvas {
background: transparent;
}
/* лангвіч */
/* mob */
.lang-switch--mob{ display:none; }
@media (max-width: 1000px){
.lang-switch--mob{ display:inline-flex; position:relative; }
.lang-switch--mob .m-lang{
display:inline-flex;
align-items:center;
justify-content:center;
gap: .9rem;
height: 4.6rem;
padding: 0 2.1rem;
border-radius: 999px;
background: transparent;
color: #fff;
cursor: pointer;
line-height: 1;
font: inherit;
}
.lang-switch--mob .m-lang__text{
font-size: 1.6rem;
font-weight: 600;
letter-spacing: .02em;
transform: translateY(.02em);
}
.lang-switch--mob .m-lang .chev{
width: 1.6rem;
height: .95rem;
position: relative;
display:inline-block;
transform: translateY(.08rem);
border: 0rem !important;
}
.lang-switch--mob .m-lang .chev::before,
.lang-switch--mob .m-lang .chev::after{
content:"";
position:absolute;
top:50%;
width:1.05rem;
height:.22rem;
background: var(--c-yellow);
border-radius:999px;
}
.lang-switch--mob .m-lang .chev::before{
left:-0.1rem;
transform: translateY(-50%) rotate(45deg);
}
.lang-switch--mob .m-lang .chev::after{
right:0;
transform: translateY(-50%) rotate(-45deg);
}
.lang-switch--mob .lang-switch-list{
position:absolute;
right: -0.3rem;
top: -1.4rem;
width: 10rem;
padding: 1rem;
border-radius: 3.2rem;
background: var(--c-5e00cf);
box-shadow: 0 18px 40px rgba(0,0,0,.35);
display:flex;
flex-direction: column;
align-items:center;
gap: 1.2rem;
opacity:0;
visibility:hidden;
transform: translateY(-.6rem);
transition: 180ms ease;
z-index: 2000;
}
.lang-switch--mob[data-open="1"] .lang-switch-list{
opacity:1;
visibility:visible;
transform: translateY(0);
}
.lang-switch--mob .lang-current{
width: 100%;
height: 4.6rem;
border-radius: 999px;
border:0;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
gap: 1rem;
color: var(--c-5e00cf);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
}
.lang-switch--mob .lang-current .chev{
width: 1.6rem;
height: .95rem;
position: relative;
display:inline-block;
transform: translateY(.08rem) rotate(180deg);
border:0rem !important;
}
.lang-switch--mob .lang-current .chev::before,
.lang-switch--mob .lang-current .chev::after{
content:"";
position:absolute;
top:50%;
width:1.05rem;
height:.22rem;
background: var(--c-5e00cf);
border-radius:999px;
}
.lang-switch--mob .lang-current .chev::before{
left:-0.1rem;
transform: translateY(-50%) rotate(45deg);
}
.lang-switch--mob .lang-current .chev::after{
right:0;
transform: translateY(-50%) rotate(-45deg);
}
.lang-switch--mob .lang-option{
display:block;
width: 100%;
text-align:center;
text-decoration:none;
color:#fff;
font-size: 2.0rem;
font-weight: 700;
letter-spacing:.02em;
padding: .8rem 0 1.2rem;
border-radius: 1.8rem;
}
}
/* pc */
.lang-switch--pc{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.lang-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.1rem;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
line-height: 1;
color: #fff;
font: inherit;
}
.lang-btn__text{
font-size: 1.8rem;
font-weight: 500;
letter-spacing: .02em;
display: inline-block;
transform: translateY(.02em);
}
.lang-btn__chev{
width: 1.6rem;
height: .95rem;
display: inline-block;
position: relative;
transform: translateY(.1rem);
}
.lang-btn__chev::before,
.lang-btn__chev::after{
content:"";
position:absolute;
top: 50%;
width: 1.05rem;
height: .22rem;
background: var(--c-yellow);
border-radius: 999px;
}
.lang-btn__chev::before{
left: 0;
transform: translateY(-50%) rotate(45deg);
}
.lang-btn__chev::after{
right: -0.1rem;
transform: translateY(-50%) rotate(-45deg);
}
.lang-switch--pc[data-open="1"] .lang-btn__chev::before{
transform: translateY(-50%) rotate(-45deg);
}
.lang-switch--pc[data-open="1"] .lang-btn__chev::after{
transform: translateY(-50%) rotate(45deg);
}
.lang-dd{
position: absolute;
top: calc(100% + 1.1rem);
left: 50%;
transform: translate(-50%, -0.4rem);
width: max-content;
display: grid;
gap: .9rem;
padding: .2rem 0;
opacity: 0;
visibility: hidden;
transition: 180ms ease;
z-index: 1000;
}
.lang-switch--pc[data-open="1"] .lang-dd{
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.lang-dd__pill{
min-width: 7.6rem;
height: 4.6rem;
padding: 0 2.4rem;
border-radius: 999px;
background: var(--c-5e00cf);
color: var(--c-white);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: .02em;
}
.lang-dd__pill:hover{ filter: brightness(1.06); }
@media (max-width: 1000px){
.lang-switch--pc{ display: none; }
}
@media (max-width: 1000px) {
.briefs-tabs{
--fade: 2.5rem;
-webkit-mask-image: linear-gradient(to right,
transparent 0,
#000 var(--fade),
#000 100%
);
mask-image: linear-gradient(to right,
transparent 0,
#000 var(--fade),
#000 100%
);
}
}
/* .p-stage-inner::before,
.p-stage-inner::after{
pointer-events: none !important;
}
.p-swiper .swiper-slide{
pointer-events: none !important;
}
.p-swiper .swiper-slide-active{
pointer-events: auto !important;
}
.p-swiper .swiper-slide{
position: relative;
}
.p-swiper .swiper-slide-active{
z-index: 50 !important;
} */
/* виключаємо відгуки блок */
.testimonials {
display: none;
}
.aboutss-scribble-left {
display: none;
}
article a {
text-decoration: none;
}
/* */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900;
border: 0;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
border: 0;
}
.pp-list{
margin: 0 0 1.5rem;
padding-left: 1.5rem;
color: var(--pp-text2);
list-style: disc;
list-style-position: outside;
}
.pp-list li{
display: list-item;
margin: .55rem 0;
line-height: 1.7;
}
.pp-list li::marker{
color: #fff;
}
.pp{
background: transparent;
padding: 4.25rem 0 6rem;
--pp-radius: 2.25rem;
--pp-border: rgba(255,255,255,.08);
}
.pp-container{
width: min(122rem, calc(100% - 3rem));
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.pp-hero{
border-radius: var(--pp-radius);
padding: 3rem 3.25rem 2.75rem;
background: var(--bgBriefHeadColor);
}
.pp-title{
margin: 0 0 0rem;
font-size: 2.65rem;
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.pp-date{
margin: 0 0 1.25rem;
font-size: 1.05rem;
line-height: 1.35;
font-weight: 800;
color: var(--pp-accent);
}
.pp-lead{
margin: 0;
max-width: 46rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--pp-text);
}
.pp-card{
overflow: hidden;
}
.pp-card-inner{
padding: 3rem 3.25rem;
}
.pp-h2{
margin: 0 0 1rem;
font-size: 2.2rem;
line-height: 1.25;
font-weight: 900;
color: #fff;
margin-top: 7rem;
margin-bottom: 4rem;
}
.pp-p{
margin: 0 0 1.35rem;
font-size: 1.4rem;
line-height: 1.75;
color: var(--pp-text2);
}
.pp-list{
margin: 0 0 1.5rem;
padding-left: 1.15rem;
color: var(--pp-text2);
}
.pp-list li{
margin: .55rem 0;
line-height: 1.7;
}
.pp-list strong{
font-weight: 900;
color: #fff;
}
.pp-card-inner > :last-child{
margin-bottom: 0;
}
.pp a{
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.pp a:hover{
opacity: .9;
}
@media (max-width: 1000px){
.pp{
padding: 2.5rem 0 4rem;
--pp-radius: 1.75rem;
}
.pp-container{
width: min(62rem, calc(100% - 1.5rem));
gap: 1.25rem;
}
.pp-hero{
padding: 1.75rem 1.5rem 1.5rem;
}
.pp-title{
font-size: 1.85rem;
}
.pp-date{
font-size: .95rem;
}
.pp-lead{
font-size: .98rem;
}
.pp-card-inner{
padding: 1.75rem 1.5rem;
}
.pp-h2{
font-size: 2rem;
}
}
/* */
#logos,
#logosTrack,
#logos .logos-track,
#logos .logo-item,
#logos .logo-item img {
pointer-events: auto !important;
}
#logos .logos-track,
#logosTrack {
display: flex !important;
align-items: center !important;
gap: 64px !important;
}
#logos .logo-item {
flex: 0 0 auto !important;
}
#logos .logo-swap {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
}
#logos .logo-swap .logo-img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
transition: opacity 300ms ease !important;
}
#logos .logo-swap .logo-img-default {
position: relative !important;
z-index: 1 !important;
opacity: 1 !important;
}
#logos .logo-swap .logo-img-white {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 2 !important;
opacity: 0 !important;
pointer-events: none !important;
}
#logos .logo-swap:hover .logo-img-default {
opacity: 0 !important;
}
#logos .logo-swap:hover .logo-img-white {
opacity: 1 !important;
}
@media (max-width: 767px) {
#logos .logos-track,
#logosTrack {
gap: 42px !important;
}
}
/* */
@media (max-width: 767px) {
#logos {
overflow: hidden !important;
margin-top: 1.4rem !important;
}
#logosTrack,
#logos .logos-track {
gap: 2rem !important;
column-gap: 2rem !important;
}
#logos .logo-item {
flex: 0 0 var(--logo-slot, 15rem) !important;
width: var(--logo-slot, 15rem) !important;
min-width: var(--logo-slot, 15rem) !important;
max-width: var(--logo-slot, 15rem) !important;
height: 6.4rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#logos .logo-item img,
#logos .logo-swap .logo-img {
max-width: 13.8rem !important;
max-height: 5.4rem !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
}
/* */
@media (min-width: 1001px) {
#logos {
overflow: hidden !important;
}
#logosTrack,
#logos .logos-track {
gap: clamp(1.6rem, 1.6vw, 3.2rem) !important;
column-gap: clamp(1.6rem, 1.6vw, 3.2rem) !important;
}
#logos .logo-item {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: clamp(4.8rem, 4vw, 6.8rem) !important;
padding: 0 clamp(0.4rem, 0.6vw, 1rem) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#logos .logo-item img,
#logos .logo-swap .logo-img {
max-width: clamp(10.5rem, 8.6vw, 15rem) !important;
max-height: clamp(3.8rem, 3.2vw, 5.6rem) !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
}