.process-timeline,
#matrimonial-process {
--primary-color: #000;
--bg-white: #fff;
--line-color: #d7d7d7;
--line-color-alpha: rgba(215, 215, 215, 0.5);
--shadow-sm: 0 0.375rem 0.9375rem rgba(0, 0, 0, 0.1);
--shadow-md: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.15);
--shadow-lg: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.15);
--shadow-hover: -0.5rem 0.5rem 1.25rem rgba(0, 0, 0, 0.2), 0.25rem -0.25rem 0.625rem rgba(255, 255, 255, 0.7);
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-bg-alt: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.25);
--glass-border-alt: rgba(255, 255, 255, 0.2);
--border-radius-sm: 0.75rem;
--border-radius-lg: 1rem;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1.25rem;
--spacing-lg: 1.875rem;
--spacing-xl: 2.5rem;
--spacing-2xl: 3.75rem;
position: relative;
width: 100%;
max-width: 950px;
margin: var(--spacing-2xl) auto;
font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--primary-color);
}
.process-timeline .timeline,
#matrimonial-process .timeline {
position: relative;
display: block;
}
.process-timeline .timeline-line,
#matrimonial-process .timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 0.1875rem;
background: var(--line-color);
transform: translateX(-50%);
z-index: 0;
}
.process-timeline .timeline-step,
#matrimonial-process .timeline-step {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1.75rem;
height: 1.75rem;
background: var(--primary-color);
color: var(--bg-white);
font-weight: 700;
font-size: 0.9rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.process-timeline .timeline-step::after,
#matrimonial-process .timeline-step::after {
content: attr(data-step);
}
.process-timeline .timeline-item,
#matrimonial-process .timeline-item {
position: relative;
width: 50%;
padding: var(--spacing-xl) 0;
}
.process-timeline .timeline-item.left,
#matrimonial-process .timeline-item.left {
left: 0;
}
.process-timeline .timeline-item.right,
#matrimonial-process .timeline-item.right {
left: 50%;
}
.process-timeline .circle,
#matrimonial-process .circle {
position: relative;
width: 12.5rem;
height: 12.5rem;
background: var(--bg-white);
border-radius: 50%;
box-shadow: -0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1),
0.125rem -0.125rem 0.3125rem rgba(255, 255, 255, 0.5);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 2;
cursor: pointer;
overflow: hidden;
}
.process-timeline .circle:hover,
#matrimonial-process .circle:hover {
transform: translateY(-0.375rem);
box-shadow: var(--shadow-hover);
}
.process-timeline .circle-content,
#matrimonial-process .circle-content {
max-width: 100%;
padding: 0 0.625rem;
box-sizing: border-box;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-family: inherit;
}
.process-timeline .circle-content img,
#matrimonial-process .circle-content img {
width: 3.75rem;
margin-bottom: 0.75rem;
}
.process-timeline .circle-content h3,
#matrimonial-process .circle-content h3 {
font-size: 1rem;
margin-bottom: var(--spacing-xs);
line-height: 1.2;
font-weight: 400;
font-family: inherit;
}
.process-timeline .circle-content .item-tagline,
#matrimonial-process .circle-content .item-tagline {
display: none;
font-size: 0.875rem;
line-height: 1.3;
margin: var(--spacing-xs) 0 0;
font-family: inherit;
} .process-timeline .popup,
#matrimonial-process .popup {
position: absolute;
width: 26.25rem;
background: var(--bg-white);
box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-lg);
padding: 1rem 1.5rem;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(-12px);
filter: blur(4px);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
font-size: 0.9rem;
line-height: 1.5;
z-index: 3;
font-family: inherit;
}
.process-timeline .popup::before,
#matrimonial-process .popup::before {
content: attr(data-tagline);
display: block;
color: #800020;
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 8px;
font-family: inherit;
} .process-timeline .timeline-item.left .popup[data-align="right"],
#matrimonial-process .timeline-item.left .popup[data-align="right"] {
left: calc(100% + 2.5rem);
top: 50%;
transform: translateY(-50%) translateX(-12px);
}
.process-timeline .timeline-item.left .popup[data-align="right"].is-visible,
#matrimonial-process .timeline-item.left .popup[data-align="right"].is-visible {
transform: translateY(-50%) translateX(0);
} .process-timeline .timeline-item.right .popup[data-align="left"],
#matrimonial-process .timeline-item.right .popup[data-align="left"] {
right: calc(100% + 2.5rem);
top: 50%;
transform: translateY(-50%) translateX(12px);
}
.process-timeline .timeline-item.right .popup[data-align="left"].is-visible,
#matrimonial-process .timeline-item.right .popup[data-align="left"].is-visible {
transform: translateY(-50%) translateX(0);
} .process-timeline .popup.is-visible,
#matrimonial-process .popup.is-visible {
opacity: 1;
pointer-events: auto;
filter: blur(0);
} .process-timeline .circle:hover + .popup,
#matrimonial-process .circle:hover + .popup {
opacity: 1;
pointer-events: auto;
filter: blur(0);
transform: translateY(-50%) translateX(0);
} @media (max-width: 768px) {
.process-timeline .timeline-line,
#matrimonial-process .timeline-line {
width: 0.125rem;
background: var(--line-color-alpha);
}
.process-timeline .timeline-step,
#matrimonial-process .timeline-step {
display: none;
}
.process-timeline .timeline-item,
#matrimonial-process .timeline-item {
width: 100%;
left: 0 !important;
padding: var(--spacing-md) 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.process-timeline .circle,
#matrimonial-process .circle {
width: 13.75rem;
height: 13.75rem;
background: var(--glass-bg);
backdrop-filter: blur(0.625rem);
border: 0.0625rem solid var(--glass-border);
box-shadow: var(--shadow-md);
margin: 0 auto var(--spacing-md);
cursor: default;
}
.process-timeline .circle:hover,
#matrimonial-process .circle:hover {
transform: none;
box-shadow: var(--shadow-md);
}
.process-timeline .circle-content .item-tagline,
#matrimonial-process .circle-content .item-tagline {
display: none;
}
.process-timeline .popup,
#matrimonial-process .popup {
position: relative !important;
width: 90%;
max-width: 25rem;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
filter: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
background: var(--glass-bg-alt);
backdrop-filter: blur(0.75rem);
border: 0.0625rem solid var(--glass-border-alt);
box-shadow: var(--shadow-sm);
border-radius: var(--border-radius-sm);
padding: 0.75rem 1rem;
margin: 0 auto 1.875rem;
font-size: 0.85rem;
transition: none !important;
}
.process-timeline .popup::before,
#matrimonial-process .popup::before {
display: block;
}
} @media (prefers-reduced-motion: reduce) {
.process-timeline .popup,
#matrimonial-process .popup {
transition: opacity 0.2s ease !important;
filter: none !important;
transform: translateY(-50%) !important;
}
.process-timeline .popup.is-visible,
#matrimonial-process .popup.is-visible {
opacity: 1;
}
}