File: /var/www/html/wp-content/themes/thegem-elementor/css/ethnic-case-study-single.css
.ethnic-case-study {
color: #14213d;
background:
radial-gradient(circle at top left, rgba(227, 241, 255, 0.68), transparent 34%),
radial-gradient(circle at top right, rgba(255, 236, 232, 0.72), transparent 34%),
#f7f9fc;
}
.ethnic-case-study .container {
width: 100%;
max-width: 1500px;
padding-inline: 28px;
box-sizing: border-box;
}
.ethnic-case-study__section {
padding: 42px 0;
}
.ethnic-case-study__hero {
padding: 34px 0 44px;
}
.ethnic-case-study__hero-shell,
.ethnic-case-study__overview-grid,
.ethnic-case-study__challenge-layout,
.ethnic-case-study__solution-layout,
.ethnic-case-study__delivery-grid,
.ethnic-case-study__cta {
display: grid;
gap: 28px;
}
.ethnic-case-study__editor-content {
padding: 30px 32px;
border: 1px solid rgba(20, 33, 61, 0.08);
border-radius: 28px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 22px 46px rgba(18, 34, 66, 0.06);
}
.ethnic-case-study__editor-content > :first-child {
margin-top: 0;
}
.ethnic-case-study__editor-content > :last-child {
margin-bottom: 0;
}
.ethnic-case-study__editor-content h2,
.ethnic-case-study__editor-content h3,
.ethnic-case-study__editor-content h4 {
color: #14213d;
line-height: 1.12;
letter-spacing: -0.03em;
}
.ethnic-case-study__editor-content h2 {
margin: 0 0 18px;
font-size: clamp(28px, 3vw, 42px);
}
.ethnic-case-study__editor-content h3 {
margin: 24px 0 14px;
font-size: 28px;
}
.ethnic-case-study__editor-content h4 {
margin: 20px 0 12px;
font-size: 22px;
}
.ethnic-case-study__editor-content p,
.ethnic-case-study__editor-content li {
color: #566681;
font-size: 17px;
line-height: 1.8;
}
.ethnic-case-study__editor-content ul,
.ethnic-case-study__editor-content ol {
margin: 0 0 18px 20px;
padding: 0;
}
.ethnic-case-study__editor-content .elementor-widget:last-child,
.ethnic-case-study__editor-content .elementor-element:last-child {
margin-bottom: 0;
}
.ethnic-case-study__hero-shell {
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
align-items: center;
padding: 38px;
border: 1px solid rgba(20, 33, 61, 0.08);
border-radius: 34px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96)),
#fff;
box-shadow: 0 28px 64px rgba(18, 34, 66, 0.08);
}
.ethnic-case-study__back-link,
.ethnic-case-study__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2f6bff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.ethnic-case-study__back-link::before {
content: "\2190";
font-size: 16px;
}
.ethnic-case-study__eyebrow,
.ethnic-case-study__section-kicker,
.ethnic-case-study__card-kicker {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
color: #2f6bff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ethnic-case-study__section-kicker,
.ethnic-case-study__card-kicker {
margin-bottom: 14px;
}
.ethnic-case-study__hero-copy h1,
.ethnic-case-study__section-head h2,
.ethnic-case-study__cta h2 {
margin: 0;
color: #14213d;
line-height: 1.04;
letter-spacing: -0.04em;
}
.ethnic-case-study__hero-copy h1 {
margin-top: 18px;
font-size: clamp(42px, 5vw, 72px);
}
.ethnic-case-study__subtitle,
.ethnic-case-study__prose p,
.ethnic-case-study__summary-item span,
.ethnic-case-study__detail-card p,
.ethnic-case-study__goal-card p,
.ethnic-case-study__pillar-card p,
.ethnic-case-study__feature-card p,
.ethnic-case-study__result-card p,
.ethnic-case-study__impact-card p,
.ethnic-case-study__related-card p,
.ethnic-case-study__timeline-step p,
.ethnic-case-study__cta p {
margin: 0;
color: #566681;
font-size: 18px;
line-height: 1.75;
}
.ethnic-case-study__subtitle {
max-width: 58ch;
margin-top: 18px;
}
.ethnic-case-study__meta-grid,
.ethnic-case-study__result-grid,
.ethnic-case-study__impact-grid,
.ethnic-case-study__feature-grid,
.ethnic-case-study__related-grid,
.ethnic-case-study__stack-grid,
.ethnic-case-study__goal-grid,
.ethnic-case-study__card-grid {
display: grid;
gap: 18px;
}
.ethnic-case-study__meta-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 28px;
}
.ethnic-case-study__meta-card,
.ethnic-case-study__summary-card,
.ethnic-case-study__detail-card,
.ethnic-case-study__goal-card,
.ethnic-case-study__pillar-card,
.ethnic-case-study__feature-card,
.ethnic-case-study__stack-card,
.ethnic-case-study__delivery-card,
.ethnic-case-study__result-card,
.ethnic-case-study__impact-card,
.ethnic-case-study__related-card,
.ethnic-case-study__cta {
border: 1px solid rgba(20, 33, 61, 0.08);
border-radius: 26px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 20px 44px rgba(18, 34, 66, 0.06);
}
.ethnic-case-study__meta-card {
padding: 18px 18px 20px;
}
.ethnic-case-study__meta-card span,
.ethnic-case-study__summary-item span {
display: block;
margin-bottom: 8px;
color: #6a7b98;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ethnic-case-study__meta-card strong,
.ethnic-case-study__summary-item strong {
color: #14213d;
font-size: 18px;
line-height: 1.3;
}
.ethnic-case-study__hero-actions,
.ethnic-case-study__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-case-study__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 26px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.ethnic-case-study__button:hover,
.ethnic-case-study__button:focus-visible {
transform: translateY(-1px);
}
.ethnic-case-study__button--primary {
background: #e7ff5f;
color: #14213d;
box-shadow: 0 18px 38px rgba(194, 226, 72, 0.22);
}
.ethnic-case-study__button--ghost {
border-color: rgba(20, 33, 61, 0.12);
background: rgba(255, 255, 255, 0.84);
color: #14213d;
}
.ethnic-case-study__button--ghost:hover,
.ethnic-case-study__button--ghost:focus-visible {
border-color: rgba(47, 107, 255, 0.22);
color: #2f6bff;
}
.ethnic-case-study__hero-visual {
position: relative;
min-height: 100%;
}
.ethnic-case-study__hero-media {
overflow: hidden;
border-radius: 30px;
box-shadow: 0 28px 56px rgba(18, 34, 66, 0.14);
}
.ethnic-case-study__hero-media img,
.ethnic-case-study__hero-media video {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #0f172a;
}
.ethnic-case-study__stack-tag {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ethnic-case-study__section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.ethnic-case-study__section-head h2,
.ethnic-case-study__cta h2 {
font-size: clamp(30px, 3vw, 48px);
}
.ethnic-case-study__section-lead {
max-width: 66ch;
margin: 18px 0 0;
color: #566681;
font-size: 18px;
line-height: 1.75;
}
.ethnic-case-study__overview-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
align-items: start;
}
.ethnic-case-study__prose {
display: grid;
gap: 18px;
}
.ethnic-case-study__prose--compact {
align-content: start;
}
.ethnic-case-study__summary-card,
.ethnic-case-study__delivery-card {
padding: 26px;
}
.ethnic-case-study__summary-card h3 {
margin: 0 0 18px;
color: #14213d;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.03em;
}
.ethnic-case-study__summary-list {
display: grid;
gap: 16px;
}
.ethnic-case-study__summary-item {
padding-top: 16px;
border-top: 1px solid rgba(20, 33, 61, 0.08);
}
.ethnic-case-study__summary-item:first-child {
padding-top: 0;
border-top: 0;
}
.ethnic-case-study__engagement-summary,
.ethnic-case-study__delivery-flow {
display: grid;
gap: 22px;
}
.ethnic-case-study__engagement-summary {
margin-bottom: 28px;
}
.ethnic-case-study__engagement-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ethnic-case-study__engagement-summary-item,
.ethnic-case-study__phase-spotlight {
border: 1px solid rgba(20, 33, 61, 0.08);
border-radius: 28px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96)),
#fff;
box-shadow: 0 20px 44px rgba(18, 34, 66, 0.06);
}
.ethnic-case-study__engagement-summary-item {
padding: 22px 24px 24px;
}
.ethnic-case-study__engagement-summary-item span,
.ethnic-case-study__phase-panel-index {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
color: #2f6bff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ethnic-case-study__engagement-summary-item strong {
display: block;
margin-top: 16px;
color: #14213d;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.03em;
}
.ethnic-case-study__phase-spotlight {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
padding: 26px 30px;
}
.ethnic-case-study__phase-spotlight-copy {
min-height: 168px;
}
.ethnic-case-study__phase-panel {
display: none;
gap: 14px;
}
.ethnic-case-study__phase-panel.is-active {
display: grid;
}
.ethnic-case-study__phase-panel[hidden] {
display: none !important;
}
.ethnic-case-study__phase-panel h3 {
margin: 0;
color: #14213d;
font-size: clamp(30px, 3vw, 46px);
line-height: 1.04;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-case-study__phase-panel p,
.ethnic-case-study__phase-instruction {
margin: 0;
color: #566681;
font-size: 18px;
line-height: 1.72;
}
.ethnic-case-study__phase-instruction {
max-width: 22ch;
padding-bottom: 4px;
color: #6a7b98;
}
.ethnic-case-study__flow-scroller {
overflow-x: auto;
padding: 0 4px 14px;
scrollbar-width: thin;
}
.ethnic-case-study__flow-track {
display: inline-flex;
align-items: flex-start;
min-width: 100%;
}
.ethnic-case-study__flow-phase {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
width: calc(var(--phase-bubble-size) + 14px);
padding-top: 42px;
}
.ethnic-case-study__phase-orbit {
position: absolute;
left: 50%;
width: calc(var(--phase-bubble-size) + 36px);
height: calc(var(--phase-bubble-size) * 0.56);
transform: translateX(-50%);
}
.ethnic-case-study__flow-phase--bottom {
margin-top: 18px;
padding-bottom: 84px;
}
.ethnic-case-study__phase-orbit--top {
top: 0;
}
.ethnic-case-study__phase-orbit--bottom {
top: calc(var(--phase-bubble-size) * 0.92);
}
.ethnic-case-study__phase-orbit svg {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.ethnic-case-study__phase-orbit path {
fill: none;
stroke: #ffc225;
stroke-width: 12;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 8px 14px rgba(255, 194, 37, 0.22));
}
.ethnic-case-study__phase-dot {
position: absolute;
left: 50%;
z-index: 4;
width: 34px;
height: 34px;
padding: 0;
border: 2px solid #2f6bff;
border-radius: 50%;
background: #fff;
box-shadow: 0 12px 28px rgba(18, 34, 66, 0.12);
transform: translateX(-50%);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
cursor: pointer;
}
.ethnic-case-study__phase-dot--top {
top: 2px;
}
.ethnic-case-study__phase-dot--bottom {
top: calc((var(--phase-bubble-size) * 1.48) - 20px);
}
.ethnic-case-study__phase-dot::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffc225;
transform: translate(-50%, -50%);
transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.ethnic-case-study__phase-dot:hover,
.ethnic-case-study__phase-dot:focus-visible,
.ethnic-case-study__flow-phase.is-active .ethnic-case-study__phase-dot {
border-color: #124dce;
box-shadow: 0 18px 36px rgba(18, 34, 66, 0.16);
transform: translateX(-50%) translateY(-3px);
}
.ethnic-case-study__phase-dot:hover::before,
.ethnic-case-study__phase-dot:focus-visible::before,
.ethnic-case-study__flow-phase.is-active .ethnic-case-study__phase-dot::before {
background: #2f6bff;
box-shadow: 0 0 0 5px rgba(255, 194, 37, 0.28);
transform: translate(-50%, -50%) scale(1.04);
}
.ethnic-case-study__phase-dot:focus-visible {
outline: none;
}
.ethnic-case-study__phase-bubble {
position: relative;
overflow: hidden;
z-index: 2;
display: grid;
align-content: center;
justify-items: center;
gap: 10px;
width: var(--phase-bubble-size);
height: var(--phase-bubble-size);
padding: 22px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 24%, rgba(143, 177, 255, 0.24), transparent 34%),
linear-gradient(160deg, #183a67 0%, #0e5da8 52%, #093f7b 100%);
box-shadow: 0 24px 52px rgba(12, 59, 116, 0.24);
text-align: center;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ethnic-case-study__phase-bubble::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: inherit;
}
.ethnic-case-study__phase-number {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ethnic-case-study__phase-bubble strong {
position: relative;
z-index: 1;
display: block;
max-width: 10ch;
margin: 0;
color: #ffffff;
font-size: clamp(18px, 1.5vw, 24px);
line-height: 1.08;
letter-spacing: -0.04em;
text-wrap: balance;
}
.ethnic-case-study__flow-phase.is-active .ethnic-case-study__phase-bubble {
transform: translateY(-8px);
box-shadow: 0 32px 62px rgba(12, 59, 116, 0.28);
}
.ethnic-case-study__phase-connector {
position: relative;
flex: 0 0 var(--phase-connector-width);
align-self: flex-start;
z-index: 1;
width: var(--phase-connector-width);
height: 170px;
margin-inline: -6px;
}
.ethnic-case-study__phase-connector svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.ethnic-case-study__phase-connector path {
fill: none;
stroke: #ffc225;
stroke-width: 12;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 8px 14px rgba(255, 194, 37, 0.22));
}
.ethnic-case-study__phase-connector--up {
margin-top: 0;
}
.ethnic-case-study__phase-connector--down {
margin-top: 0;
}
.ethnic-case-study__phase-connector-dot {
position: absolute;
left: 50%;
z-index: 2;
width: 30px;
height: 30px;
border: 2px solid #2f6bff;
border-radius: 50%;
background: #fff;
box-shadow: 0 12px 28px rgba(18, 34, 66, 0.12);
transform: translate(-50%, -50%);
pointer-events: none;
}
.ethnic-case-study__phase-connector-dot::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffc225;
transform: translate(-50%, -50%);
}
.ethnic-case-study__phase-connector-dot--up {
top: 44.7%;
}
.ethnic-case-study__phase-connector-dot--down {
top: 90.6%;
}
.ethnic-case-study__challenge-layout {
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
align-items: start;
}
.ethnic-case-study__challenge-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 36px;
border-top: 1px solid rgba(20, 33, 61, 0.12);
}
.ethnic-case-study__challenge-column {
padding: 34px 30px 10px;
border-left: 1px solid rgba(20, 33, 61, 0.12);
}
.ethnic-case-study__challenge-column:first-child {
border-left: 0;
}
.ethnic-case-study__challenge-column h3 {
margin: 0 0 18px;
color: #14213d;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.22;
letter-spacing: -0.03em;
}
.ethnic-case-study__challenge-column p {
margin: 0;
color: #566681;
font-size: 18px;
line-height: 1.72;
}
.ethnic-case-study__card-grid--challenge,
.ethnic-case-study__feature-grid,
.ethnic-case-study__stack-grid,
.ethnic-case-study__related-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-case-study__detail-card,
.ethnic-case-study__goal-card,
.ethnic-case-study__pillar-card,
.ethnic-case-study__feature-card,
.ethnic-case-study__stack-card,
.ethnic-case-study__result-card,
.ethnic-case-study__impact-card,
.ethnic-case-study__related-card {
padding: 24px;
}
.ethnic-case-study__detail-card h3,
.ethnic-case-study__goal-card h3,
.ethnic-case-study__pillar-card h3,
.ethnic-case-study__feature-card h3,
.ethnic-case-study__stack-card h3,
.ethnic-case-study__timeline-step h3,
.ethnic-case-study__result-card h3,
.ethnic-case-study__impact-card h3,
.ethnic-case-study__related-card h3 {
margin: 0 0 12px;
color: #14213d;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.03em;
}
.ethnic-case-study__goal-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ethnic-case-study__goal-board {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 18px;
margin-top: 34px;
}
.ethnic-case-study__goal-panel {
position: relative;
overflow: hidden;
display: grid;
align-content: start;
gap: 18px;
min-height: 260px;
padding: 28px;
border: 1px solid rgba(20, 33, 61, 0.08);
border-radius: 28px;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.88), transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
box-shadow: 0 18px 42px rgba(18, 34, 66, 0.08);
}
.ethnic-case-study__goal-panel::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #2f6bff 0%, #8fb1ff 100%);
opacity: 0.95;
}
.ethnic-case-study__goal-panel:nth-child(1) {
grid-column: span 4;
grid-row: span 2;
min-height: 100%;
background:
radial-gradient(circle at top right, rgba(231, 255, 95, 0.34), transparent 34%),
linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.97));
}
.ethnic-case-study__goal-panel:nth-child(2),
.ethnic-case-study__goal-panel:nth-child(3),
.ethnic-case-study__goal-panel:nth-child(4),
.ethnic-case-study__goal-panel:nth-child(5) {
grid-column: span 4;
}
.ethnic-case-study__goal-panel:nth-child(2)::before {
background: linear-gradient(90deg, #2f6bff 0%, #89b1ff 100%);
}
.ethnic-case-study__goal-panel:nth-child(3)::before {
background: linear-gradient(90deg, #00a894 0%, #66d8c8 100%);
}
.ethnic-case-study__goal-panel:nth-child(4)::before {
background: linear-gradient(90deg, #5d46ff 0%, #9a8cff 100%);
}
.ethnic-case-study__goal-panel:nth-child(5)::before {
background: linear-gradient(90deg, #f46c25 0%, #ffb07b 100%);
}
.ethnic-case-study__goal-chip {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 36px;
padding: 0 14px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
color: #2f6bff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
}
.ethnic-case-study__goal-watermark {
position: absolute;
right: 20px;
top: 18px;
color: rgba(20, 33, 61, 0.05);
font-size: clamp(54px, 6vw, 86px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.06em;
pointer-events: none;
}
.ethnic-case-study__goal-panel h3 {
position: relative;
z-index: 1;
max-width: 12ch;
margin: 0;
color: #14213d;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.15;
letter-spacing: -0.04em;
}
.ethnic-case-study__goal-panel p {
position: relative;
z-index: 1;
max-width: 28ch;
margin: 0;
color: #566681;
font-size: 18px;
line-height: 1.78;
}
.ethnic-case-study__goal-card {
position: relative;
overflow: hidden;
}
.ethnic-case-study__goal-index,
.ethnic-case-study__feature-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 18px;
border-radius: 14px;
background: rgba(47, 107, 255, 0.08);
color: #2f6bff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
}
.ethnic-case-study__delivery-grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
align-items: start;
}
.ethnic-case-study__pillar-list {
display: grid;
gap: 18px;
}
.ethnic-case-study__section--solution {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 28px 0 34px;
}
.ethnic-case-study__solution-band {
display: flex;
align-items: center;
min-height: min(calc(100vh - 110px), 860px);
box-sizing: border-box;
background: #0b1220;
padding: 52px 0 56px;
}
.ethnic-case-study__section--solution .container {
max-width: 1720px;
padding-inline: 36px;
}
.ethnic-case-study__solution-shell {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
gap: 38px;
align-items: center;
}
.ethnic-case-study__solution-header .ethnic-case-study__section-kicker {
min-height: 34px;
margin-bottom: 16px;
padding: 0 16px;
border: 1px solid rgba(132, 164, 255, 0.34);
border-radius: 12px;
background: rgba(132, 164, 255, 0.06);
color: #c8d8ff;
letter-spacing: 0.18em;
}
.ethnic-case-study__solution-header h2 {
margin: 0;
max-width: 11ch;
color: #ffffff;
font-size: clamp(34px, 3.6vw, 58px);
line-height: 1.03;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-case-study__solution-story {
display: grid;
gap: 12px;
margin-top: 26px;
}
.ethnic-case-study__solution-story-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ethnic-case-study__solution-story-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ethnic-case-study__solution-story-item p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
line-height: 1.72;
}
.ethnic-case-study__solution-board {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-content: center;
}
.ethnic-case-study__solution-pillar {
position: relative;
overflow: hidden;
display: grid;
gap: 14px;
min-height: 184px;
padding: 22px 22px 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
#161f2d;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
}
.ethnic-case-study__solution-pillar::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #84a4ff 0%, #d4ff68 100%);
}
.ethnic-case-study__solution-pillar:nth-child(1) {
grid-column: span 1;
}
.ethnic-case-study__solution-pillar:nth-child(2)::before {
background: linear-gradient(90deg, #66d8c8 0%, #8fd7ff 100%);
}
.ethnic-case-study__solution-pillar:nth-child(3)::before {
background: linear-gradient(90deg, #f7a35c 0%, #ffd59f 100%);
}
.ethnic-case-study__solution-pillar:nth-child(4)::before {
background: linear-gradient(90deg, #b993ff 0%, #8fb1ff 100%);
}
.ethnic-case-study__solution-pillar-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
}
.ethnic-case-study__solution-pillar h3 {
margin: 0;
max-width: 13ch;
color: #ffffff;
font-size: clamp(22px, 1.8vw, 30px);
line-height: 1.12;
letter-spacing: -0.04em;
}
.ethnic-case-study__solution-pillar p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 15px;
line-height: 1.7;
}
.ethnic-case-study__section--solution .ethnic-case-study__solution-header h2,
.ethnic-case-study__section--solution .ethnic-case-study__solution-pillar h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none;
}
.ethnic-case-study__section--solution .ethnic-case-study__solution-story-item p,
.ethnic-case-study__section--solution .ethnic-case-study__solution-pillar p {
color: rgba(255, 255, 255, 0.9) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}
.ethnic-case-study__section--solution .ethnic-case-study__solution-story-index,
.ethnic-case-study__section--solution .ethnic-case-study__solution-pillar-index,
.ethnic-case-study__section--solution .ethnic-case-study__section-kicker {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.ethnic-case-study__stack-card {
display: grid;
gap: 16px;
}
.ethnic-case-study__stack-strip {
display: flex;
flex-wrap: wrap;
gap: 28px 40px;
align-items: center;
}
.ethnic-case-study__stack-item {
--stack-fg: #2f6bff;
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 72px;
padding: 0;
}
.ethnic-case-study__stack-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.ethnic-case-study__stack-brand img {
max-width: 82px;
max-height: 58px;
object-fit: contain;
}
.ethnic-case-study__stack-brand-mask {
width: 54px;
height: 54px;
background: var(--stack-fg);
-webkit-mask-image: var(--stack-icon);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: var(--stack-icon);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.ethnic-case-study__stack-brand-mark {
color: var(--stack-fg);
font-size: 16px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ethnic-case-study__stack-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-case-study__stack-tag {
border-color: rgba(47, 107, 255, 0.14);
background: rgba(47, 107, 255, 0.06);
color: #2957cd;
}
.ethnic-case-study__timeline {
position: relative;
display: grid;
gap: 20px;
padding-left: 14px;
}
.ethnic-case-study__timeline::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 24px;
width: 1px;
background: rgba(20, 33, 61, 0.12);
}
.ethnic-case-study__timeline-step {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ethnic-case-study__timeline-index {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(47, 107, 255, 0.16);
color: #2f6bff;
font-size: 16px;
font-weight: 700;
box-shadow: 0 10px 22px rgba(18, 34, 66, 0.08);
}
.ethnic-case-study__result-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-case-study__result-card strong {
display: block;
margin-bottom: 10px;
color: #2f6bff;
font-size: clamp(28px, 3vw, 42px);
line-height: 1;
letter-spacing: -0.04em;
}
.ethnic-case-study__impact-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 20px;
}
.ethnic-case-study__gallery-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
grid-template-areas:
"main side-a"
"main side-b";
gap: 18px;
}
.ethnic-case-study__gallery-card {
position: relative;
overflow: hidden;
border-radius: 28px;
background: #fff;
box-shadow: 0 22px 46px rgba(18, 34, 66, 0.08);
}
.ethnic-case-study__gallery-card--1 {
grid-area: main;
}
.ethnic-case-study__gallery-card--2 {
grid-area: side-a;
}
.ethnic-case-study__gallery-card--3 {
grid-area: side-b;
}
.ethnic-case-study__gallery-card img,
.ethnic-case-study__gallery-card video {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
background: #0f172a;
}
.ethnic-case-study__gallery-card--1 img,
.ethnic-case-study__gallery-card--1 video {
aspect-ratio: 16 / 12;
}
.ethnic-case-study__gallery-card figcaption {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
color: #14213d;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
backdrop-filter: blur(12px);
}
.ethnic-case-study__related-card,
.ethnic-case-study__feature-card,
.ethnic-case-study__goal-card,
.ethnic-case-study__result-card,
.ethnic-case-study__impact-card {
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ethnic-case-study__related-card:hover,
.ethnic-case-study__related-card:focus-within,
.ethnic-case-study__feature-card:hover,
.ethnic-case-study__feature-card:focus-within,
.ethnic-case-study__goal-card:hover,
.ethnic-case-study__goal-card:focus-within,
.ethnic-case-study__result-card:hover,
.ethnic-case-study__result-card:focus-within,
.ethnic-case-study__impact-card:hover,
.ethnic-case-study__impact-card:focus-within {
transform: translateY(-4px);
border-color: rgba(47, 107, 255, 0.16);
box-shadow: 0 28px 54px rgba(18, 34, 66, 0.11);
}
.ethnic-case-study__link {
margin-top: 8px;
}
.ethnic-case-study__link::after {
content: "\2192";
font-size: 16px;
transition: transform 0.2s ease;
}
.ethnic-case-study__link:hover::after,
.ethnic-case-study__link:focus-visible::after {
transform: translateX(3px);
}
.ethnic-case-study__cta {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
padding: 34px;
background:
radial-gradient(circle at top right, rgba(255, 236, 232, 0.7), transparent 34%),
rgba(255, 255, 255, 0.96);
}
@media (max-width: 1260px) {
.ethnic-case-study__meta-grid,
.ethnic-case-study__result-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__engagement-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__goal-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-case-study__goal-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__goal-panel,
.ethnic-case-study__goal-panel:nth-child(1),
.ethnic-case-study__goal-panel:nth-child(2),
.ethnic-case-study__goal-panel:nth-child(3),
.ethnic-case-study__goal-panel:nth-child(4),
.ethnic-case-study__goal-panel:nth-child(5) {
grid-column: span 1;
grid-row: span 1;
min-height: 250px;
}
.ethnic-case-study__challenge-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__challenge-column:nth-child(2n + 1) {
border-left: 0;
}
.ethnic-case-study__card-grid--challenge,
.ethnic-case-study__feature-grid,
.ethnic-case-study__stack-grid,
.ethnic-case-study__related-grid,
.ethnic-case-study__impact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__hero-shell,
.ethnic-case-study__overview-grid,
.ethnic-case-study__challenge-layout,
.ethnic-case-study__delivery-grid,
.ethnic-case-study__cta {
grid-template-columns: 1fr;
}
.ethnic-case-study__solution-shell {
grid-template-columns: 1fr;
gap: 36px;
}
.ethnic-case-study__solution-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-case-study__hero-visual {
order: -1;
}
}
@media (max-width: 991px) {
.ethnic-case-study .container {
padding-inline: 22px;
}
.ethnic-case-study__section,
.ethnic-case-study__hero {
padding: 28px 0;
}
.ethnic-case-study__hero-shell,
.ethnic-case-study__editor-content,
.ethnic-case-study__cta {
padding: 24px;
border-radius: 24px;
}
.ethnic-case-study__phase-spotlight {
grid-template-columns: 1fr;
align-items: start;
padding: 24px;
border-radius: 24px;
}
.ethnic-case-study__phase-spotlight-copy {
min-height: 0;
}
.ethnic-case-study__phase-instruction {
max-width: none;
padding-bottom: 0;
}
.ethnic-case-study__flow-track {
--phase-bubble-size: 134px !important;
--phase-connector-width: 70px !important;
}
.ethnic-case-study__flow-phase {
padding-top: 36px;
}
.ethnic-case-study__flow-phase--bottom {
padding-bottom: 50px;
}
.ethnic-case-study__phase-connector {
height: 144px;
}
.ethnic-case-study__phase-connector-dot {
width: 28px;
height: 28px;
}
.ethnic-case-study__solution-band {
min-height: 0;
padding: 68px 0 72px;
}
.ethnic-case-study__section--solution {
padding: 24px 0 30px;
}
.ethnic-case-study__section--solution .container {
padding-inline: 22px;
}
.ethnic-case-study__section-head {
align-items: start;
flex-direction: column;
}
.ethnic-case-study__challenge-row {
grid-template-columns: 1fr;
margin-top: 24px;
}
.ethnic-case-study__challenge-column,
.ethnic-case-study__challenge-column:nth-child(2n + 1) {
padding: 24px 0;
border-left: 0;
border-top: 1px solid rgba(20, 33, 61, 0.1);
}
.ethnic-case-study__challenge-column:first-child {
border-top: 0;
}
.ethnic-case-study__goal-board {
grid-template-columns: 1fr;
margin-top: 24px;
}
.ethnic-case-study__goal-panel,
.ethnic-case-study__goal-panel:nth-child(1),
.ethnic-case-study__goal-panel:nth-child(2),
.ethnic-case-study__goal-panel:nth-child(3),
.ethnic-case-study__goal-panel:nth-child(4),
.ethnic-case-study__goal-panel:nth-child(5) {
min-height: 0;
}
.ethnic-case-study__goal-grid,
.ethnic-case-study__card-grid--challenge,
.ethnic-case-study__feature-grid,
.ethnic-case-study__stack-grid,
.ethnic-case-study__related-grid,
.ethnic-case-study__result-grid,
.ethnic-case-study__impact-grid {
grid-template-columns: 1fr;
}
.ethnic-case-study__solution-board {
grid-template-columns: 1fr;
}
.ethnic-case-study__solution-pillar:nth-child(1) {
grid-column: span 1;
}
.ethnic-case-study__gallery-grid {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"side-a"
"side-b";
}
.ethnic-case-study__stack-strip {
gap: 22px 28px;
}
.ethnic-case-study__stack-item {
width: 84px;
height: 64px;
}
}
@media (max-width: 640px) {
.ethnic-case-study .container {
padding-inline: 16px;
}
.ethnic-case-study__section--solution .container {
padding-inline: 16px;
}
.ethnic-case-study__section--solution {
padding: 20px 0 26px;
}
.ethnic-case-study__engagement-summary-grid {
grid-template-columns: 1fr;
}
.ethnic-case-study__subtitle,
.ethnic-case-study__prose p,
.ethnic-case-study__editor-content p,
.ethnic-case-study__editor-content li,
.ethnic-case-study__section-lead,
.ethnic-case-study__summary-item span,
.ethnic-case-study__detail-card p,
.ethnic-case-study__goal-card p,
.ethnic-case-study__pillar-card p,
.ethnic-case-study__feature-card p,
.ethnic-case-study__result-card p,
.ethnic-case-study__impact-card p,
.ethnic-case-study__related-card p,
.ethnic-case-study__timeline-step p,
.ethnic-case-study__cta p,
.ethnic-case-study__phase-panel p,
.ethnic-case-study__phase-instruction {
font-size: 16px;
}
.ethnic-case-study__button {
width: 100%;
}
.ethnic-case-study__meta-grid {
grid-template-columns: 1fr;
}
.ethnic-case-study__detail-card,
.ethnic-case-study__goal-card,
.ethnic-case-study__pillar-card,
.ethnic-case-study__feature-card,
.ethnic-case-study__stack-card,
.ethnic-case-study__delivery-card,
.ethnic-case-study__result-card,
.ethnic-case-study__impact-card,
.ethnic-case-study__related-card {
padding: 22px;
}
.ethnic-case-study__detail-card h3,
.ethnic-case-study__goal-card h3,
.ethnic-case-study__pillar-card h3,
.ethnic-case-study__feature-card h3,
.ethnic-case-study__challenge-column h3,
.ethnic-case-study__stack-card h3,
.ethnic-case-study__timeline-step h3,
.ethnic-case-study__result-card h3,
.ethnic-case-study__impact-card h3,
.ethnic-case-study__related-card h3,
.ethnic-case-study__summary-card h3 {
font-size: 22px;
}
.ethnic-case-study__stack-item {
width: 68px;
height: 52px;
}
.ethnic-case-study__engagement-summary-item,
.ethnic-case-study__phase-spotlight {
padding: 20px 22px;
border-radius: 24px;
}
.ethnic-case-study__engagement-summary-item strong {
font-size: 20px;
}
.ethnic-case-study__phase-panel h3 {
font-size: 30px;
}
.ethnic-case-study__flow-track {
--phase-bubble-size: 118px !important;
--phase-connector-width: 54px !important;
}
.ethnic-case-study__flow-phase {
width: calc(var(--phase-bubble-size) + 12px);
padding-top: 36px;
}
.ethnic-case-study__flow-phase--bottom {
padding-bottom: 42px;
}
.ethnic-case-study__phase-dot {
width: 30px;
height: 30px;
}
.ethnic-case-study__phase-dot--bottom {
top: calc((var(--phase-bubble-size) * 1.48) - 18px);
}
.ethnic-case-study__phase-dot::before {
width: 8px;
height: 8px;
}
.ethnic-case-study__phase-bubble {
padding: 18px;
}
.ethnic-case-study__phase-number {
min-width: 48px;
min-height: 30px;
font-size: 11px;
}
.ethnic-case-study__phase-bubble strong {
font-size: 16px;
}
.ethnic-case-study__phase-connector {
height: 122px;
}
.ethnic-case-study__phase-connector path {
stroke-width: 10;
}
.ethnic-case-study__phase-connector-dot {
width: 24px;
height: 24px;
}
.ethnic-case-study__phase-connector-dot::before {
width: 7px;
height: 7px;
}
.ethnic-case-study__stack-brand img {
max-width: 60px;
max-height: 42px;
}
.ethnic-case-study__stack-brand-mask {
width: 42px;
height: 42px;
}
.ethnic-case-study__challenge-column p {
font-size: 16px;
}
.ethnic-case-study__goal-panel {
padding: 24px;
gap: 16px;
}
.ethnic-case-study__goal-panel h3 {
font-size: 24px;
}
.ethnic-case-study__goal-panel p {
font-size: 16px;
}
.ethnic-case-study__goal-watermark {
right: 16px;
top: 14px;
font-size: 56px;
}
.ethnic-case-study__solution-band {
height: auto;
padding: 56px 0 60px;
}
.ethnic-case-study__solution-header h2 {
font-size: 36px;
}
.ethnic-case-study__solution-story-item {
grid-template-columns: 1fr;
gap: 12px;
}
.ethnic-case-study__solution-story-index {
width: 40px;
height: 40px;
}
.ethnic-case-study__solution-story-item p,
.ethnic-case-study__solution-pillar p {
font-size: 16px;
}
.ethnic-case-study__solution-pillar {
min-height: 0;
padding: 22px;
gap: 14px;
}
.ethnic-case-study__solution-pillar h3 {
font-size: 26px;
}
}