── */
/* Figma: white card, image on top, text below */
a.cases-container {
flex-direction: column !important;
width: 100% !important;
height: auto !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 48px !important;
overflow: hidden !important;
margin: 0 !important;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Dark panel / Rive wrapper → moves to top */
a.cases-container > img,
a.cases-container > .rive-panel,
a.cases-container > .card-img-panel {
order: -1 !important;
align-self: auto !important;
width: calc(100% - 16px) !important;
height: auto !important;
aspect-ratio: 707 / 460 !important;
margin: 8px 8px 0 8px !important;
border-radius: 40px !important;
flex-shrink: 0 !important;
display: block !important;
box-sizing: border-box !important;
}
a.cases-container > .card-img-panel {
position: relative !important;
background: #000000 !important;
}
a.cases-container > .card-img-panel img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* White text panel → flows below image */
a.cases-container > .card-text-panel {
width: 100% !important;
height: auto !important;
background: #ffffff !important;
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 24px 24px 32px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
min-width: 0 !important;
}
/* Title group — collapse desktop gap */
a.cases-container .card-text-body {
gap: 0 !important;
}
/* Title */
a.cases-container .card-text-body h3 {
font-size: 34px !important;
font-weight: 400 !important;
letter-spacing: -1.02px !important;
line-height: 1 !important;
margin: 0 0 12px !important;
color: #000 !important;
}
/* Description */
a.cases-container .card-text-body p {
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: -1px !important;
line-height: 1.3 !important;
margin: 0 !important;
opacity: 0.8 !important;
color: #000 !important;
}
/* Tags wrapper */
a.cases-container .card-tags {
margin-top: 24px !important;
gap: 8px !important;
}
/* Tag pill */
a.cases-container .card-tags span {
font-size: 16px !important;
height: 43px !important;
padding: 0 16px !important;
letter-spacing: -1px !important;
border-radius: 84px !important;
background: #efeff1 !important;
color: rgba(0, 0, 0, 0.8) !important;
font-weight: 500 !important;
}
/* ── Case card 2: ── */
div.cases-container {
flex-direction: column !important;
width: 100% !important;
height: auto !important;
border-radius: 48px !important;
overflow: hidden !important;
margin: 0 !important;
padding: 20px 24px 24px !important;
box-sizing: border-box !important;
justify-content: flex-start !important;
align-items: flex-start !important;
position: relative !important;
}
/* Image → top */
div.cases-container > img {
order: -1 !important;
width: 100% !important;
height: 212px !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 0 20px !important;
border-radius: 32px !important;
align-self: auto !important;
flex-shrink: 0 !important;
}
/* Title text */
div.cases-container > p.about-text {
font-size: 34px !important;
font-weight: 500 !important;
max-width: 100% !important;
margin: 0 0 16px !important;
letter-spacing: -1.02px !important;
line-height: 1 !important;
color: #000 !important;
text-align: left !important;
}
/* Tag pills */
div.cases-container > .case-tag {
position: static !important;
display: inline-flex !important;
margin: 0 8px 0 0 !important;
font-size: 16px !important;
height: 43px !important;
padding: 0 16px !important;
border-radius: 84px !important;
background: #efeff1 !important;
color: rgba(0, 0, 0, 0.8) !important;
font-weight: 500 !important;
letter-spacing: -1px !important;
border: none !important;
}
}
/* ══ Breakpoint: ≤ 480px ════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Типографика управляется через clamp() выше — переопределения не нужны */
.mobile-menu-btn {
height: clamp(48px, 14vw, 64px) !important;
font-size: clamp(15px, 4.6vw, 20px) !important;
padding: 0 clamp(16px, 5vw, 24px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ─── Case study page (case-carplaysync.html) ─────────────────────── */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.case-body .mobile-nav-pill {
display: none;
}
/* ── Page layout ── */
.case-body {
overflow-x: hidden !important;
}
.case-main {
padding-top: 96px !important;
padding-bottom: 80px !important;
overflow-x: hidden !important;
}
.cs-container {
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Row gets the 16px side padding — covers all text content */
.cs-row {
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Hero row: tighter gap per Figma */
.cs-section:first-child .cs-row {
gap: 12px !important;
}
/* Phone strips sit outside cs-row — give them direct margins */
.cs-phone-strip {
margin-left: 16px !important;
margin-right: 16px !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box !important;
}
/* Phone panels are flex items inside cs-row, already padded via row */
.cs-phone-panel {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.cs-section + .cs-section {
margin-top: 53px !important;
}
.cs-col-left,
.cs-col-right {
width: 100% !important;
}
/* Remove desktop top padding from right column when stacked */
.cs-col-right {
padding-top: 0 !important;
}
.cs-col-text-stack {
gap: 16px !important;
}
/* ── Typography ── */
.cs-label,
.cs-title {
font-size: 34px !important;
letter-spacing: -1.02px !important;
line-height: 1 !important;
font-weight: 400 !important;
}
.cs-text {
font-size: 20px !important;
letter-spacing: -1px !important;
line-height: 1.3 !important;
width: auto !important;
}
.cs-hero-right .cs-text {
font-size: 20px !important;
}
/* ── Hero right column ── */
.cs-hero-right {
gap: 32px !important;
padding-top: 8px !important;
}
/* ── Meta ── */
.cs-meta {
gap: 32px !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
}
.cs-meta-item {
width: auto !important;
gap: 8px !important;
}
.cs-meta-label {
font-size: 20px !important;
letter-spacing: -1px !important;
line-height: 1.3 !important;
color: rgba(0, 0, 0, 0.6) !important;
opacity: 1 !important;
}
.cs-meta-value {
font-size: 20px !important;
letter-spacing: -1px !important;
line-height: 1.3 !important;
color: rgba(0, 0, 0, 0.8) !important;
}
/* ── Stats ── */
.cs-stats {
gap: 16px !important;
align-items: flex-start !important;
}
.cs-stat {
width: 180px !important;
flex-shrink: 0 !important;
gap: 0 !important;
}
.cs-stat-value {
font-size: 48px !important;
letter-spacing: -1px !important;
line-height: 1.2 !important;
}
.cs-stat-desc {
font-size: 20px !important;
letter-spacing: -1px !important;
line-height: 1.3 !important;
max-width: 100% !important;
}
/* ── Phone strip: 2–3 phones horizontal ── */
.cs-phone-strip {
height: 218px !important;
border-radius: 40px !important;
margin-top: 16px !important;
margin-left: 16px !important;
margin-right: 16px !important;
width: auto !important;
}
/* Hero strip: larger radius and wider top gap */
.cs-section:first-child .cs-phone-strip {
border-radius: 48px !important;
margin-top: 32px !important;
margin-left: 16px !important;
margin-right: 16px !important;
width: auto !important;
}
.cs-phone-strip-inner {
gap: 12px !important;
top: 24px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
.cs-phone-strip-inner .cs-phone:first-child {
margin-left: 0 !important;
}
.cs-phone {
width: 124px !important;
height: 269px !important;
border-radius: 16px !important;
}
/* ── Single phone panel ── */
.cs-phone-panel {
width: 100% !important;
height: 345px !important;
border-radius: 40px !important;
margin-top: 0 !important;
position: relative !important;
}
.cs-phone-single {
width: 137px !important;
height: 297px !important;
border-radius: 16px !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* Rive canvas containers */
.cs-phone-panel > div[style] {
width: 137px !important;
height: 297px !important;
border-radius: 16px !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
.cs-phone-panel > div[style] canvas {
width: 137px !important;
height: 297px !important;
}
/* ── Problems: disable sticky scroll, show both stacked ── */
.cs-problems-wrapper {
height: auto !important;
}
.cs-problems-sticky {
position: static !important;
height: auto !important;
padding: 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
gap: 53px !important;
}
.cs-problem-slide {
position: static !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.cs-problem-slide .cs-col-left {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.cs-problem-slide .cs-phone-panel {
opacity: 1 !important;
transition: none !important;
}
}
@media (max-width: 480px) {
.cs-label,
.cs-title {
font-size: clamp(26px, 8.72vw, 34px) !important;
}
}