.yaroo-home-split-block {
width: 100%;
margin: clamp(1.05rem, 2.2vw, 2.2rem) auto clamp(0.85rem, 2vw, 1.8rem);
padding: 0 clamp(12px, 2vw, 32px);
}
.yaroo-home-split-block + .yaroo-home-split-block {
margin-top: clamp(0.55rem, 1.2vw, 1.1rem);
}
.yaroo-home-split-block__inner {
--yaroo-split-cut: clamp(28px, 3.4vw, 62px);
position: relative;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
width: min(96vw, 1780px);
height: clamp(301px, 20.4vw, 439px);
min-height: 0;
max-height: 439px;
margin: 0 auto;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: clamp(16px, 1.5vw, 24px);
background:
radial-gradient(circle at 18% 18%, rgba(255, 122, 0, 0.13), transparent 32%),
linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
opacity: 0;
--yaroo-split-slide-distance: clamp(220px, 34vw, 520px);
transform: translateX(calc(var(--yaroo-split-slide-distance) * -1)) translateY(26px);
transition:
opacity 980ms cubic-bezier(.16, .78, .22, 1),
transform 980ms cubic-bezier(.16, .78, .22, 1),
box-shadow 260ms ease,
border-color 260ms ease;
isolation: isolate;
}
.yaroo-home-split-block__inner--reverse {
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
transform: translateX(var(--yaroo-split-slide-distance)) translateY(26px);
}
.yaroo-home-split-block__inner.is-visible,
.yaroo-home-split-block__inner--reverse.is-visible {
opacity: 1;
transform: translateX(0) translateY(0);
}
.yaroo-home-split-block__inner:hover {
border-color: rgba(255, 122, 0, 0.2);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 122, 0, 0.08);
}
.yaroo-home-split-block__media {
position: relative;
min-width: 0;
height: 100%;
min-height: 0;
clip-path: polygon(0 0, 100% 0, calc(100% - var(--yaroo-split-cut)) 100%, 0 100%);
background:
linear-gradient(135deg, rgba(255,122,0,0.18), transparent 42%),
#111116;
z-index: 2;
}
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__media {
clip-path: polygon(var(--yaroo-split-cut) 0, 100% 0, 100% 100%, 0 100%);
}
.yaroo-home-split-block__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(11,11,13,0.08), rgba(11,11,13,0.08)),
linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.16));
pointer-events: none;
}
.yaroo-home-split-block__media img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center;
transform: scale(1.01);
transition: transform 500ms ease;
}
.yaroo-home-split-block__inner:hover .yaroo-home-split-block__media img {
transform: scale(1.035);
}
.yaroo-home-split-block__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 0;
padding: 0.7rem;
color: rgba(255,255,255,0.7);
font-size: clamp(0.78rem, 0.9vw, 0.95rem);
font-weight: 800;
letter-spacing: 0.03em;
text-align: center;
text-transform: uppercase;
}
.yaroo-home-split-block__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
height: 100%;
margin-left: calc(var(--yaroo-split-cut) * -0.5);
padding: clamp(0.45rem, 0.8vw, 0.85rem) clamp(0.95rem, 2.2vw, 2.3rem) clamp(0.45rem, 0.8vw, 0.85rem) calc(var(--yaroo-split-cut) * 0.68);
overflow: hidden auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 122, 0, 0.55) rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 0 100%, rgba(255,122,0,0.13), transparent 42%),
linear-gradient(135deg, rgba(22,22,27,0.98), rgba(11,11,13,0.98));
z-index: 1;
}
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__content {
margin-left: 0;
margin-right: calc(var(--yaroo-split-cut) * -0.5);
padding: clamp(0.45rem, 0.8vw, 0.85rem) calc(var(--yaroo-split-cut) * 0.68) clamp(0.45rem, 0.8vw, 0.85rem) clamp(0.95rem, 2.2vw, 2.3rem);
background:
radial-gradient(circle at 100% 100%, rgba(255,122,0,0.13), transparent 42%),
linear-gradient(225deg, rgba(22,22,27,0.98), rgba(11,11,13,0.98));
}
.yaroo-home-split-block__content::-webkit-scrollbar {
width: 6px;
}
.yaroo-home-split-block__content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
}
.yaroo-home-split-block__content::-webkit-scrollbar-thumb {
background: rgba(255, 122, 0, 0.52);
border-radius: 999px;
}
.yaroo-home-split-block__content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--yaroo-split-cut) * -0.42);
width: calc(var(--yaroo-split-cut) + 2px);
background: linear-gradient(180deg, rgba(255,122,0,0.36), rgba(255,154,61,0.08));
clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%);
pointer-events: none;
opacity: 0.72;
}
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__content::before {
left: auto;
right: calc(var(--yaroo-split-cut) * -0.42);
clip-path: polygon(0 0, 42% 0, 100% 100%, 58% 100%);
}
.yaroo-home-split-block__content h2 {
margin: 0 0 clamp(0.18rem, 0.35vw, 0.36rem);
color: var(--orange, #ff7a00);
font-size: clamp(1.05rem, 1.35vw, 1.55rem);
line-height: 1.02;
letter-spacing: -0.035em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.yaroo-home-split-block__text {
color: var(--text-soft, #b6b6bd);
font-size: clamp(0.88rem, 0.98vw, 1.06rem);
line-height: 1.22;
display: block;
overflow: visible;
max-height: none;
}
.yaroo-home-split-block__text p {
margin: 0 0 0.28rem;
}
.yaroo-home-split-block__text p:last-child {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.yaroo-home-split-block__inner,
.yaroo-home-split-block__media img {
transition: none;
}
.yaroo-home-split-block__inner,
.yaroo-home-split-block__inner--reverse {
opacity: 1;
transform: none;
}
}
@media (max-width: 920px) {
.yaroo-home-split-block__inner,
.yaroo-home-split-block__inner--reverse {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(210px, 1fr);
height: clamp(286px, 43.35vw, 383px);
max-height: 383px;
}
.yaroo-home-split-block__inner--reverse {
grid-template-columns: minmax(210px, 1fr) minmax(0, 1.35fr);
}
.yaroo-home-split-block__media,
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__media {
min-height: 0;
}
.yaroo-home-split-block__content h2 {
font-size: clamp(0.98rem, 2.6vw, 1.32rem);
}
.yaroo-home-split-block__text {
font-size: clamp(0.82rem, 2.2vw, 0.96rem);
display: block;
overflow: visible;
max-height: none;
}
}
@media (max-width: 680px) {
.yaroo-home-split-block {
margin-top: 1rem;
padding: 0 10px;
}
.yaroo-home-split-block + .yaroo-home-split-block {
margin-top: 0.65rem;
}
.yaroo-home-split-block__inner,
.yaroo-home-split-block__inner--reverse {
display: flex;
flex-direction: column;
height: auto;
max-height: none;
min-height: 0;
border-radius: 18px;
}
.yaroo-home-split-block__media,
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__media {
order: 1;
height: 235px;
min-height: 235px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
}
.yaroo-home-split-block__content,
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__content {
order: 2;
height: auto;
min-height: 245px;
margin-left: 0;
margin-right: 0;
margin-top: -12px;
padding: 0.72rem 0.9rem 0.85rem;
}
.yaroo-home-split-block__content::before,
.yaroo-home-split-block__inner--reverse .yaroo-home-split-block__content::before {
display: none;
}
.yaroo-home-split-block__content h2 {
font-size: clamp(1.05rem, 5vw, 1.35rem);
}
.yaroo-home-split-block__text {
font-size: clamp(0.9rem, 3.8vw, 1rem);
display: block;
overflow: visible;
max-height: none;
}
} .yaroo-home-split-contact {
--yaroo-contact-circle-size: clamp(142px, 9.6vw, 206px);
--yaroo-contact-slide-distance: clamp(220px, 34vw, 520px);
width: 100%;
margin: clamp(0.45rem, 1.1vw, 1rem) auto clamp(0.55rem, 1.25vw, 1.15rem);
padding: 0 clamp(12px, 2vw, 32px);
}
.yaroo-home-split-contact__inner {
width: min(96vw, 1780px);
margin: 0 auto;
padding: clamp(0.3rem, 0.65vw, 0.7rem) 0;
text-align: center;
}
.yaroo-home-split-contact__heading {
margin: 0 0 clamp(0.55rem, 1vw, 1rem);
color: var(--orange, #ff7a00);
font-size: clamp(1.15rem, 2.1vw, 2.45rem);
line-height: 1;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 20px rgba(255, 122, 0, 0.18);
}
.yaroo-home-split-contact__actions {
display: grid;
grid-template-columns: auto minmax(120px, auto) auto;
align-items: center;
justify-content: center;
gap: clamp(1.25rem, 6vw, 8.5rem);
}
.yaroo-home-split-contact__circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--yaroo-contact-circle-size);
height: var(--yaroo-contact-circle-size);
border-radius: 999px;
color: #ffffff;
background:
radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.18), transparent 28%),
radial-gradient(circle at 65% 80%, rgba(255, 122, 0, 0.22), transparent 40%),
linear-gradient(145deg, rgba(26, 26, 31, 0.98), rgba(8, 8, 10, 0.98));
border: 1px solid rgba(255, 122, 0, 0.28);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 122, 0, 0.06);
opacity: 0;
text-decoration: none;
transition:
opacity 1080ms cubic-bezier(.16, .78, .22, 1),
transform 1080ms cubic-bezier(.16, .78, .22, 1),
border-color 260ms ease,
box-shadow 260ms ease,
color 260ms ease;
will-change: transform, opacity;
}
.yaroo-home-split-contact__circle svg {
display: block;
width: 38%;
height: 38%;
fill: currentColor;
}
.yaroo-home-split-contact__circle--tiktok {
transform: translateX(calc(var(--yaroo-contact-slide-distance) * -1)) translateY(14px) scale(0.94);
}
.yaroo-home-split-contact__circle--facebook {
transform: translateX(var(--yaroo-contact-slide-distance)) translateY(14px) scale(0.94);
transition-delay: 110ms;
}
.yaroo-home-split-contact__circle.is-visible {
opacity: 1;
transform: translateX(0) translateY(0) scale(1);
}
.yaroo-home-split-contact__circle--disabled.is-visible {
opacity: 0.42;
}
.yaroo-home-split-contact__circle[href]:hover,
.yaroo-home-split-contact__circle[href]:focus-visible {
color: var(--orange, #ff7a00);
border-color: rgba(255, 122, 0, 0.72);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 28px rgba(255, 122, 0, 0.24);
outline: none;
}
.yaroo-home-split-contact__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: clamp(118px, 11vw, 188px);
min-height: clamp(42px, 3.5vw, 58px);
padding: 0.65rem clamp(1.05rem, 2vw, 2rem);
color: #ffffff;
font-size: clamp(1rem, 1.35vw, 1.55rem);
font-weight: 950;
line-height: 1;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
border-radius: 999px;
transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}
.yaroo-home-split-contact__link:hover,
.yaroo-home-split-contact__link:focus-visible {
color: var(--orange, #ff7a00);
text-shadow: 0 0 22px rgba(255, 122, 0, 0.45);
transform: translateY(-1px);
outline: none;
}
.yaroo-home-split-contact__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.yaroo-home-split-contact + .yaroo-home-split-block {
margin-top: clamp(0.55rem, 1.2vw, 1.1rem);
}
@media (prefers-reduced-motion: reduce) {
.yaroo-home-split-contact__circle {
transition: none;
opacity: 1;
transform: none;
}
}
@media (max-width: 920px) {
.yaroo-home-split-contact {
--yaroo-contact-circle-size: clamp(134px, 20.4vw, 180px);
}
.yaroo-home-split-contact__heading {
font-size: clamp(1.05rem, 3.6vw, 1.85rem);
}
.yaroo-home-split-contact__actions {
gap: clamp(0.9rem, 4.5vw, 4.5rem);
}
}
@media (max-width: 680px) {
.yaroo-home-split-contact {
--yaroo-contact-circle-size: clamp(78px, 23vw, 118px);
margin: 0.7rem auto 0.75rem;
padding: 0 10px;
}
.yaroo-home-split-contact__inner {
padding: 0.2rem 0;
}
.yaroo-home-split-contact__heading {
margin-bottom: 0.55rem;
font-size: clamp(0.95rem, 5.2vw, 1.28rem);
letter-spacing: 0.055em;
}
.yaroo-home-split-contact__actions {
grid-template-columns: auto minmax(92px, auto) auto;
gap: clamp(0.45rem, 3.2vw, 0.9rem);
}
.yaroo-home-split-contact__link {
min-width: auto;
min-height: 38px;
padding: 0.55rem 0.7rem;
font-size: clamp(0.82rem, 4vw, 1.05rem);
letter-spacing: 0.045em;
}
} @media (max-width: 680px) {
.yaroo-home-split-contact {
--yaroo-contact-circle-size: clamp(52px, 15.5vw, 68px);
--yaroo-contact-slide-distance: clamp(125px, 44vw, 210px);
margin: 0.42rem auto 0.48rem;
padding: 0 10px;
overflow: hidden;
}
.yaroo-home-split-contact__inner {
width: min(100%, 430px);
padding: 0.05rem 0;
}
.yaroo-home-split-contact__heading {
margin-bottom: 0.38rem;
font-size: clamp(0.86rem, 4.1vw, 1.08rem);
line-height: 1.05;
letter-spacing: 0.05em;
}
.yaroo-home-split-contact__actions {
display: grid;
grid-template-columns: var(--yaroo-contact-circle-size) minmax(74px, auto) var(--yaroo-contact-circle-size);
align-items: center;
justify-content: center;
gap: clamp(0.28rem, 2.6vw, 0.62rem);
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.yaroo-home-split-contact__circle {
width: var(--yaroo-contact-circle-size);
height: var(--yaroo-contact-circle-size);
flex: 0 0 var(--yaroo-contact-circle-size);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 122, 0, 0.06);
}
.yaroo-home-split-contact__circle svg {
width: 42%;
height: 42%;
}
.yaroo-home-split-contact__link {
min-width: 0;
min-height: 32px;
padding: 0.42rem 0.32rem;
font-size: clamp(0.72rem, 3.2vw, 0.9rem);
letter-spacing: 0.04em;
white-space: nowrap;
}
.yaroo-home-split-contact__circle--tiktok {
transform: translateX(calc(var(--yaroo-contact-slide-distance) * -1)) translateY(8px) scale(0.92);
}
.yaroo-home-split-contact__circle--facebook {
transform: translateX(var(--yaroo-contact-slide-distance)) translateY(8px) scale(0.92);
}
}
@media (max-width: 380px) {
.yaroo-home-split-contact {
--yaroo-contact-circle-size: clamp(48px, 15vw, 58px);
}
.yaroo-home-split-contact__actions {
grid-template-columns: var(--yaroo-contact-circle-size) minmax(66px, auto) var(--yaroo-contact-circle-size);
gap: 0.25rem;
}
.yaroo-home-split-contact__link {
font-size: 0.7rem;
padding-left: 0.18rem;
padding-right: 0.18rem;
}
} .yaroo-home-split-block__text,
.yaroo-home-split-block__text * {
text-overflow: clip;
} @media (max-width: 680px) {
.yaroo-home-split-contact__actions {
display: grid;
grid-template-columns: repeat(2, var(--yaroo-contact-circle-size));
grid-template-areas:
"contact contact"
"tiktok facebook";
justify-content: center;
justify-items: center;
align-items: center;
column-gap: clamp(1.2rem, 8vw, 2.4rem);
row-gap: clamp(0.34rem, 2.5vw, 0.62rem);
width: 100%;
margin: 0 auto;
}
.yaroo-home-split-contact__circle--tiktok {
grid-area: tiktok;
}
.yaroo-home-split-contact__circle--facebook {
grid-area: facebook;
}
.yaroo-home-split-contact__link {
grid-area: contact;
min-height: 30px;
padding: 0.28rem 0.42rem 0.08rem;
font-size: clamp(0.82rem, 4vw, 1rem);
white-space: nowrap;
}
}
@media (max-width: 380px) {
.yaroo-home-split-contact__actions {
grid-template-columns: repeat(2, var(--yaroo-contact-circle-size));
column-gap: clamp(0.9rem, 7vw, 1.45rem);
row-gap: 0.32rem;
}
}