Spaces:
Running
Running
File size: 1,787 Bytes
035ec20 6e94481 adfa6d0 6e94481 035ec20 adfa6d0 035ec20 6e94481 035ec20 adfa6d0 035ec20 39e9c8d 035ec20 6e94481 035ec20 39e9c8d 035ec20 6e94481 035ec20 6e94481 035ec20 adfa6d0 035ec20 39e9c8d 6e94481 035ec20 39e9c8d 6e94481 035ec20 6e94481 adfa6d0 39e9c8d 035ec20 6e94481 adfa6d0 035ec20 39e9c8d 035ec20 39e9c8d 035ec20 6e94481 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | /* CognitiveTimeline.css - Refined for Scientific Elegance */
.timeline-container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0;
}
.timeline-row {
display: flex;
gap: 24px;
position: relative;
animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.timeline-row::before {
content: '';
position: absolute;
left: 65px; /* Alignment with dot */
top: 12px;
bottom: -24px;
width: 1px;
background-color: #eee;
z-index: 1;
}
.timeline-row:last-child::before {
display: none;
}
.timeline-time {
width: 55px;
font-size: 0.65rem;
color: #bbb;
font-family: var(--font-mono);
padding-top: 4px;
text-align: right;
}
.timeline-dot-wrap {
width: 20px;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
.timeline-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 8px;
background-color: #ccc;
box-shadow: 0 0 0 4px white;
}
.timeline-content {
flex: 1;
padding: 0 0 16px 0;
transition: transform 0.3s ease;
}
.timeline-content:hover {
transform: translateX(8px);
}
.phase-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.phase-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.phase-icon .material-icons {
font-size: 18px;
}
.phase-title {
font-size: 0.7rem;
font-weight: 700;
color: #1a1a1a;
letter-spacing: -0.01em;
}
.phase-desc {
font-size: 0.8rem;
color: #666;
line-height: 1.5;
}
.timeline-empty {
color: #bbb;
font-size: 0.9rem;
text-align: center;
padding: 80px 0;
font-weight: 500;
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
|