/*!************************************************************************************************************************************************************************************************************************************************!*\
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/timeline/style.scss ***!
|
\************************************************************************************************************************************************************************************************************************************************/
|
main {
|
--gap: 0;
|
}
|
main section:last-of-type {
|
margin-bottom: 0;
|
}
|
#at-a-glance {
|
padding: 0 10vw;
|
--gap: 0;
|
}
|
#at-a-glance img {
|
width: 100%;
|
height: auto;
|
border: 2px solid rgb(var(--action-0));
|
}
|
#at-a-glance h3 {
|
font-size: var(--txt-x-small);
|
}
|
#at-a-glance .before img {
|
border-right-width: 1px;
|
border-left: 0;
|
border-top: 0;
|
}
|
#at-a-glance .after img {
|
border-left-width: 1px;
|
border-right: 0;
|
border-bottom: 0;
|
}
|
.timeline-point.timeline-point {
|
--lineWidth: 1px;
|
--gap: 2rem;
|
padding: 0;
|
margin: 0;
|
background-color: rgb(var(--base));
|
max-width: 100vw;
|
position: relative;
|
overflow: hidden;
|
}
|
.timeline-point.timeline-point img {
|
width: 40%;
|
border-radius: 4px;
|
position: sticky;
|
padding: 0.5rem;
|
}
|
.timeline-point.timeline-point .info {
|
padding: 1rem 0.5rem 0.5rem;
|
width: 60%;
|
position: relative;
|
}
|
.timeline-point.timeline-point .info h2 {
|
margin: 0 0 0.5rem;
|
font-size: var(--txt-medium);
|
position: relative;
|
}
|
.timeline-point.timeline-point .info h2 .icon {
|
--w: 2.5rem;
|
transform: rotate(-90deg);
|
position: absolute;
|
left: -2.5rem;
|
top: 0.25rem;
|
background-color: rgb(var(--action-100));
|
}
|
.timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
|
content: "";
|
display: block;
|
position: absolute;
|
left: 45%;
|
height: 100%;
|
width: var(--lineWidth);
|
background-color: rgb(var(--action-0));
|
}
|
.timeline-point.timeline-point::before {
|
height: 1rem;
|
}
|
.timeline-point.timeline-point::after {
|
top: 4rem;
|
}
|
.timeline-point.timeline-point#before-treatment::before, .timeline-point.timeline-point:last-of-type::after {
|
display: none;
|
}
|
@media (min-width: 768px) {
|
#at-a-glance h3 {
|
font-size: var(--txt-x-large);
|
}
|
.timeline-point.timeline-point {
|
--gap: 4rem;
|
}
|
.timeline-point.timeline-point img {
|
width: 50%;
|
}
|
.timeline-point.timeline-point .info {
|
width: 50%;
|
padding: 25vh 1rem 1rem;
|
}
|
.timeline-point.timeline-point .info h2 .icon {
|
--w: 4rem;
|
left: -6.15rem;
|
top: 0;
|
}
|
.timeline-point.timeline-point .info a {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
.timeline-point.timeline-point .info time {
|
text-transform: uppercase;
|
font-size: var(--txt-x-small);
|
}
|
.timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
|
left: calc(50% + 2rem);
|
}
|
.timeline-point.timeline-point::before {
|
height: calc(25vh - 2rem);
|
}
|
.timeline-point.timeline-point::after {
|
top: calc(25vh + 6rem);
|
}
|
}
|
|
/*# sourceMappingURL=style-index.css.map*/
|
