182 lines
3.5 KiB
CSS
182 lines
3.5 KiB
CSS
/* ==========================================================================
|
|
Timeline Page Specific Styles
|
|
========================================================================== */
|
|
|
|
/**
|
|
* This file contains styles used exclusively on the Timeline & Milestones page.
|
|
*
|
|
* 1. Timeline container and line
|
|
* 2. Timeline items and markers
|
|
* 3. Timeline content (text and images)
|
|
* 4. Mobile Styles for Timeline
|
|
*/
|
|
|
|
/* 1. Timeline container and line */
|
|
.timeline-section {
|
|
padding: 96px 0;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.timeline-banner {
|
|
max-width: 1280px;
|
|
margin: 0 auto 96px;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.timeline-banner img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 16px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.timeline-container {
|
|
position: relative;
|
|
max-width: 1110px;
|
|
margin: 0 auto;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
/* Navpična črta je bila odstranjena z izbrisom pravila .timeline-container::before */
|
|
|
|
|
|
/* 2. Timeline items and markers */
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: 88px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.timeline-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: 40px;
|
|
top: 6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
background-color: #FA7850;
|
|
z-index: 2; /* Ensure markers are above the line */
|
|
}
|
|
|
|
.timeline-marker.milestone {
|
|
width: 12px;
|
|
height: 12px;
|
|
top: 8px;
|
|
border-radius: 50%;
|
|
background-color: #D0D5DD;
|
|
transform: translateX(-50%) rotate(0deg);
|
|
}
|
|
|
|
/* 3. Timeline content */
|
|
.timeline-entry {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-content .timeline-year,
|
|
.timeline-content .timeline-date {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
color: #FA7850;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
.timeline-content .timeline-year {
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
}
|
|
.timeline-content .timeline-date {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.timeline-content h2, .timeline-content h3 {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
color: #101828;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
.timeline-content h3 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.timeline-content p {
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
color: #667085;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
.timeline-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.timeline-content ul {
|
|
list-style-type: none;
|
|
padding-left: 24px;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.timeline-content li {
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
color: #667085;
|
|
margin-bottom: 0.5em;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-content li::before {
|
|
content: '•';
|
|
color: #FA7850;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
width: 1em;
|
|
margin-left: -1em;
|
|
position: absolute;
|
|
left: -12px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Mobile Timeline Styles
|
|
========================================================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.timeline-section {
|
|
padding: 64px 0;
|
|
}
|
|
|
|
.timeline-banner {
|
|
padding: 0 24px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.timeline-container {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.timeline-item {
|
|
padding-left: 56px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.timeline-marker,
|
|
.timeline-marker.milestone {
|
|
left: 24px;
|
|
}
|
|
|
|
.timeline-content h2 {
|
|
font-size: 24px;
|
|
}
|
|
.timeline-content h3 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.timeline-content p, .timeline-content li {
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
}
|
|
} |