/* 1. CONTAINER & LINE FIX */ ol.tw-border-l-2 { /* Pull the whole timeline left */ margin-left: 0.75rem !important; border-left: 2px solid #e2e8f0 !important; padding-left: 0 !important; } /* 2. ITEM SPACING */ li.tw-relative { list-style: none !important; /* Reduced margin-left to pull text closer to the line */ margin-left: 1.5rem !important; margin-bottom: 3rem !important; position: relative !important; } /* 3. THE DOT (The "Timeline Button") */ .timeline-button { position: absolute; /* Centering the dot exactly on the 2px line */ left: -2.3rem !important; top: -0.2rem; width: 14px !important; height: 14px !important; background: #cbd5e1; border: 3px solid white !important; border-radius: 50%; z-index: 10; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .timeline-button:hover { background: #6b7280; } /* hover only when expanded */ .timeline-button:hover:not(.collapsed) { background: #6b7280; } /* collapsed state */ .timeline-button.collapsed { background: transparent !important; color: #6b7280; } /* 4. TYPOGRAPHY - BOLD & BLOG-SIZED */ /* Heading - Match "Project Timeline" style but smaller */ .tw-text-lg, li h3 { font-size: 1.75rem !important; font-weight: 500 !important; /* Extra bold like your standalone */ color: #111827 !important; margin: 0 0 8px 0 !important; line-height: 1.2 !important; display: block !important; } /* Body Text - Matching normal blog paragraph size */ .tw-text-base, li p { font-size: 1.5rem !important; /* Increased to match main blog text */ line-height: 1.6 !important; color: #4b5563 !important; margin: 0 !important; } /* Date/Time */ .tw-text-sm, time { font-size: 1rem !important; font-weight: 500 !important; color: #9ca3af !important; margin-bottom: 4px !important; display: block !important; } /* 5. BOOTSTRAP RESET */ /* Prevents Bootstrap from adding dots or padding to our timeline list */ li.tw-list-none::before { content: none !important; }