94 lines
2.3 KiB
CSS
94 lines
2.3 KiB
CSS
.header {
|
|
max-width: 720px;
|
|
margin: 0 auto 52px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.step {
|
|
position: relative;
|
|
padding: 30px 28px 32px;
|
|
border-radius: var(--r-lg);
|
|
background: linear-gradient(180deg, var(--hive-900) 0%, var(--hive-950) 100%);
|
|
border: 1px solid var(--line-soft);
|
|
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.step:hover {
|
|
border-color: var(--honey-line);
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-honey);
|
|
}
|
|
|
|
/* Flow connector: a honey chevron seated in the gap before every step after
|
|
the first, so the three cards read as one sequence (01 → 02 → 03).
|
|
Each step is wrapped in a <Reveal> div, so the chevron hangs off the reveal
|
|
wrapper (the actual grid cell), not the inner .step card. */
|
|
.steps > :global(.reveal) {
|
|
position: relative;
|
|
}
|
|
.steps > :global(.reveal) + :global(.reveal)::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 51px;
|
|
left: -22px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: no-repeat center / contain
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%23e9a52c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
opacity: 0.75;
|
|
z-index: 2;
|
|
}
|
|
|
|
.stepNumber {
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--honey-500);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--honey-line);
|
|
background: var(--honey-wash);
|
|
box-shadow: 0 0 20px rgba(233, 165, 44, 0.12);
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.stepTitle {
|
|
font-size: var(--text-h3);
|
|
font-weight: 600;
|
|
color: var(--hive-50);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.stepBody {
|
|
font-size: var(--text-small);
|
|
line-height: 1.65;
|
|
color: var(--hive-300);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.steps {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Chevrons point downward when the flow stacks vertically. */
|
|
.steps > :global(.reveal) + :global(.reveal)::before {
|
|
top: -21px;
|
|
left: 30px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|