.yaroo-contact-page {
position: relative;
width: 100%;
min-height: calc(100vh - 140px);
padding: clamp(4.5rem, 7vw, 8rem) clamp(14px, 3vw, 48px) clamp(4rem, 6vw, 7rem);
overflow: hidden;
color: var(--text, #f4f4f5);
background:
radial-gradient(circle at 18% 20%, rgba(255, 122, 0, 0.15), transparent 28%),
radial-gradient(circle at 84% 76%, rgba(255, 122, 0, 0.11), transparent 30%),
linear-gradient(135deg, #08080a 0%, #111116 50%, #08080a 100%);
}
.yaroo-contact-page__glow {
position: absolute;
width: clamp(240px, 26vw, 520px);
height: clamp(240px, 26vw, 520px);
border-radius: 999px;
background: rgba(255, 122, 0, 0.14);
filter: blur(34px);
pointer-events: none;
}
.yaroo-contact-page__glow--left {
top: 12%;
left: -12%;
}
.yaroo-contact-page__glow--right {
right: -13%;
bottom: 2%;
}
.yaroo-contact-page__inner {
position: relative;
z-index: 1;
width: min(1120px, 100%);
margin: 0 auto;
text-align: center;
}
.yaroo-contact-page h1 {
margin: 0 auto clamp(2rem, 3.4vw, 3.35rem);
color: var(--orange, #ff7a00);
font-size: clamp(2.2rem, 5vw, 5.25rem);
line-height: 0.95;
font-weight: 900;
letter-spacing: -0.065em;
text-transform: uppercase;
text-shadow: 0 0 24px rgba(255, 122, 0, 0.2);
}
.yaroo-contact-page__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.9rem, 2vw, 1.4rem);
margin: 0 auto clamp(2.4rem, 4.5vw, 4.5rem);
}
.yaroo-contact-page__card {
position: relative;
display: flex;
min-height: clamp(145px, 12vw, 190px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.42rem;
padding: clamp(1.15rem, 2vw, 1.8rem);
overflow: hidden;
color: #fff;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: clamp(18px, 2vw, 28px);
background:
radial-gradient(circle at 18% 12%, rgba(255, 122, 0, 0.14), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014));
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}
.yaroo-contact-page__card::after {
content: "";
position: absolute;
inset: auto 18% 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 122, 0, 0.7), transparent);
opacity: 0.55;
}
.yaroo-contact-page__card:hover {
transform: translateY(-4px);
border-color: rgba(255, 122, 0, 0.35);
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 122, 0, 0.08);
}
.yaroo-contact-page__card-icon {
display: inline-flex;
width: clamp(48px, 5.4vw, 68px);
height: clamp(48px, 5.4vw, 68px);
align-items: center;
justify-content: center;
color: var(--orange, #ff7a00);
border: 1px solid rgba(255, 122, 0, 0.38);
border-radius: 999px;
background: rgba(255, 122, 0, 0.08);
}
.yaroo-contact-page__card-icon svg {
width: 48%;
height: 48%;
fill: currentColor;
}
.yaroo-contact-page__card-label {
margin-top: 0.25rem;
color: rgba(255, 255, 255, 0.62);
font-size: clamp(0.76rem, 0.9vw, 0.88rem);
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.yaroo-contact-page__card strong {
color: #fff;
font-size: clamp(1.25rem, 2.1vw, 2rem);
line-height: 1.08;
word-break: break-word;
}
.yaroo-contact-page__social-heading {
width: min(780px, 100%);
margin: 0 auto clamp(0.9rem, 1.7vw, 1.35rem);
color: var(--orange, #ff7a00);
font-size: clamp(1.15rem, 2.4vw, 2.15rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.035em;
text-transform: uppercase;
}
.yaroo-contact-page__social {
width: min(780px, 100%);
margin: 0 auto;
padding: clamp(1.05rem, 1.8vw, 1.55rem);
border: 1px solid rgba(255, 122, 0, 0.18);
border-radius: clamp(18px, 2vw, 28px);
background:
radial-gradient(circle at 50% 0%, rgba(255, 122, 0, 0.14), transparent 42%),
rgba(255, 255, 255, 0.035);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}
.yaroo-contact-page__social-links {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.9rem, 2vw, 1.4rem);
flex-wrap: wrap;
}
.yaroo-contact-page__social-link {
display: inline-flex;
min-width: clamp(135px, 16vw, 180px);
height: clamp(54px, 5vw, 70px);
align-items: center;
justify-content: center;
gap: 0.65rem;
color: #fff;
font-size: clamp(0.9rem, 1vw, 1.02rem);
font-weight: 900;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
transition: transform 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.yaroo-contact-page__social-link svg {
width: 1.22em;
height: 1.22em;
fill: currentColor;
}
.yaroo-contact-page__social-link:hover {
transform: translateY(-3px);
color: var(--orange, #ff7a00);
border-color: rgba(255, 122, 0, 0.38);
box-shadow: 0 0 24px rgba(255, 122, 0, 0.16);
}
.yaroo-contact-page__social-link--disabled {
opacity: 0.45;
cursor: not-allowed;
}
.yaroo-contact-page__company {
width: min(780px, 100%);
margin: 0 auto;
padding: clamp(1.4rem, 2.8vw, 2.25rem);
text-align: left;
border: 1px solid rgba(255, 122, 0, 0.18);
border-radius: clamp(18px, 2vw, 28px);
background:
radial-gradient(circle at 12% 0%, rgba(255, 122, 0, 0.13), transparent 38%),
rgba(255, 255, 255, 0.035);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}
.yaroo-contact-page__company-heading {
width: min(780px, 100%);
margin: clamp(2.4rem, 4.5vw, 4.5rem) auto clamp(0.9rem, 1.7vw, 1.35rem);
color: var(--orange, #ff7a00);
font-size: clamp(1.15rem, 2.4vw, 2.15rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.035em;
text-align: center;
text-transform: uppercase;
}
.yaroo-contact-page__company-details {
display: grid;
gap: 0;
margin: 0;
}
.yaroo-contact-page__company-details > div {
display: grid;
grid-template-columns: minmax(110px, 0.34fr) 1fr;
gap: 1rem;
padding: 0.9rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.yaroo-contact-page__company-details > div:first-child {
padding-top: 0;
border-top: 0;
}
.yaroo-contact-page__company-details > div:last-child {
padding-bottom: 0;
}
.yaroo-contact-page__company-details dt {
color: rgba(255, 255, 255, 0.58);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.yaroo-contact-page__company-details dd {
margin: 0;
color: #fff;
font-size: clamp(0.98rem, 1.4vw, 1.16rem);
font-weight: 700;
line-height: 1.35;
}
@media (max-width: 760px) {
.yaroo-contact-page {
min-height: auto;
padding-top: clamp(3.2rem, 15vw, 5.2rem);
}
.yaroo-contact-page__cards {
grid-template-columns: 1fr;
}
.yaroo-contact-page__card {
min-height: 132px;
}
.yaroo-contact-page__social-links {
gap: 0.7rem;
}
.yaroo-contact-page__social-link {
min-width: 132px;
height: 54px;
}
.yaroo-contact-page__company-details > div {
grid-template-columns: 1fr;
gap: 0.35rem;
}
}
@media (max-width: 420px) {
.yaroo-contact-page h1 {
font-size: clamp(2rem, 12vw, 3.2rem);
}
.yaroo-contact-page__card strong {
font-size: clamp(1.05rem, 5.8vw, 1.42rem);
}
.yaroo-contact-page__social-link {
width: 100%;
}
}