Spaces:
Running
Running
File size: 1,787 Bytes
b23f51c cdcf600 2e9dd8e cdcf600 b23f51c 2e9dd8e b23f51c cdcf600 b23f51c 2e9dd8e b23f51c ef1f403 b23f51c cdcf600 b23f51c ef1f403 b23f51c cdcf600 b23f51c cdcf600 b23f51c 2e9dd8e b23f51c ef1f403 cdcf600 b23f51c ef1f403 cdcf600 b23f51c cdcf600 2e9dd8e ef1f403 b23f51c cdcf600 2e9dd8e b23f51c ef1f403 b23f51c ef1f403 b23f51c cdcf600 | 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); }
}
|