.roadmap-hero {
background: linear-gradient(135deg, var(--background-darker-1-color), var(--background-darker-3-color));
padding: 120px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.roadmap-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10 50 Q 30 30, 50 50 T 90 50" stroke="%23C4B394" stroke-width="0.5" fill="none" opacity="0.3"/></svg>') repeat;
background-size: 200px 100px;
}
.roadmap-hero h1 {
font-family: var(--font-headings);
font-size: 3rem;
color: var(--text-primary);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.roadmap-hero p {
font-size: 1.3rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.roadmap-container {
padding: 80px 0;
background: var(--background-color);
position: relative;
}
.roadmap-path {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.path-line {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background: linear-gradient(to bottom,
var(--border-accent) 0%,
var(--border-accent) 50%,
rgba(168, 149, 116, 0.3) 50%,
rgba(168, 149, 116, 0.3) 100%);
background-size: 100% 40px;
background-repeat: repeat-y;
transform: translateX(-50%);
z-index: 1;
}
.roadmap-item {
display: flex;
align-items: center;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.roadmap-item:nth-child(even) .milestone-content .milestone-details {
direction: rtl;
text-align: right;
padding-right: 0;
padding-left: 0;
list-style-position: inside;
}
.roadmap-item:nth-child(even) {
flex-direction: row-reverse;
}
.roadmap-item:nth-child(even) .milestone-content {
text-align: right;
padding-right: 60px;
padding-left: 0;
}
.roadmap-item:nth-child(even) .milestone-description {
margin-left: auto;
margin-right: 0;
}
.roadmap-item:not(:nth-child(even)) .milestone-description {
margin-left: 0;
margin-right: auto;
}
.milestone-marker {
width: 80px;
height: 80px;
background: var(--card-bg);
border: 4px solid var(--border-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 5px 20px var(--shadow-medium);
z-index: 3;
}
.milestone-marker .icon {
width: 2rem;
height: 2rem;
display: block;
fill: var(--accent-color);
}
.milestone-marker.completed {
background: var(--success-color);
border-color: var(--success-color);
}
.milestone-marker.completed .icon {
fill: var(--button-text);
}
.milestone-marker.in-progress {
background: var(--info-color);
border-color: var(--info-color);
animation: pulse 2s infinite;
}
.milestone-marker.in-progress .icon {
fill: var(--button-text);
}
@keyframes pulse {
0% { box-shadow: 0 5px 20px var(--shadow-medium); }
50% { box-shadow: 0 5px 30px rgba(184, 134, 11, 0.4); }
100% { box-shadow: 0 5px 20px var(--shadow-medium); }
}
.milestone-content {
flex: 1;
padding-left: 60px;
}
.milestone-year {
display: inline-block;
background: var(--accent-color);
color: var(--button-text);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 10px;
}
.milestone-title {
font-family: var(--font-headings);
font-size: 1.8rem;
color: var(--text-primary);
margin-bottom: 15px;
}
.milestone-description {
width: 46%;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 20px;
}
.milestone-details {
list-style: none;
padding: 0;
}
.milestone-details li {
position: relative;
padding-left: 25px;
margin-bottom: 8px;
color: var(--text-muted);
font-size: 0.95rem;
}
.roadmap-item:nth-child(even) .milestone-details li {
position: relative;
text-align: right;
padding-right: 25px;
padding-left: 0;
direction: ltr;
display: block;
}
.milestone-details li::before {
content: '⚔';
position: absolute;
left: 0;
color: var(--accent-color);
}
.roadmap-item:nth-child(even) .milestone-details li::before {
left: auto;
right: 0;
}
.milestone-details li.completed::before {
content: '✔';
color: var(--success-color);
}
.milestone-badge {
display: inline-block;
background: var(--highlight-bg);
color: var(--accent-color);
padding: 4px 10px;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
margin-top: 10px;
}
.milestone-badge.completed {
color: var(--success-color);
}
.milestone-badge.in-progress {
color: var(--info-color);
}
@media (max-width: 768px) {
.roadmap-hero h1 {
font-size: 2rem;
}
.roadmap-item,
.roadmap-item:nth-child(even) {
flex-direction: column;
}
.milestone-marker {
position: relative;
left: auto;
transform: none;
margin-bottom: 30px;
}
.milestone-description {
width: 100%;
}
.path-line {
display: none;
}
.milestone-content {
padding-left: 32px;
}
.roadmap-item:nth-child(even) .milestone-content {
padding-right: 32px;
}
}
@media (max-width: 420px) {
.milestone-content {
padding-left: 24px;
}
.roadmap-item:nth-child(even) .milestone-content {
padding-right: 24px;
}
}