npm - @kendawson-online/vantl - Versions diffs - 2.0.6 → 2.1.0 - Mend

@kendawson-online/vantl 2.0.6 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +48 -24
package/dist/images/alert.svg +50 -0
package/dist/images/arrow-left.svg +1 -0
package/dist/images/arrow-right.svg +1 -0
package/dist/images/missing-image.svg +29 -0
package/dist/timeline.min.css +1 -1
package/dist/timeline.min.css.map +1 -1
package/dist/timeline.min.js +1 -1
package/dist/timeline.min.js.map +1 -1
package/package.json +27 -13
package/src/css/timeline.css +895 -175
package/src/images/alert.svg +0 -0
package/src/images/missing-image.svg +0 -0
package/src/images/spinner.gif +0 -0

package/README.md CHANGED Viewed

@@ -1,14 +1,6 @@
 # Vantl - Vanilla Timeline
-Vantl is a lightweight, responsive timeline library created with vanilla Javascript for creating beautiful horizontal and vertical timelines with zero dependencies. Inspired by [timeline](https://github.com/squarechip/timeline) originally created by [squarechip](https://github.com/squarechip) in 2018.
-<table align="center">
-  <tr>
-    <td><img src="demo/assets/img/horizontal-screenshot.png" width="650"></td>
-  </tr>
-</table>
-<br/>
+Vantl is a lightweight, responsive timeline library created with vanilla Javascript for creating beautiful horizontal and vertical timelines with zero dependencies. Inspired by [timeline](https://github.com/squarechip/timeline) originally created by [squarechip](https://github.com/squarechip) in 2018. You can load your timeline data via a variety of methods and, you can include multiple timelines on a single page.
 ## Features
@@ -35,14 +27,14 @@ Load stylesheet and Javascript functions to your document via CDN links:
 <html>
 <head>
   <!-- load stylesheet -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.css">
 </head>
 <body>
   <!-- your timeline will go here -->
   <!-- load functions -->
-  <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
 </body>
 </html>
 ````
@@ -87,7 +79,7 @@ Add one line of code at the bottom to initialize your timeline. It goes after th
 ````html
   <!-- load functions -->
-  <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
   <!-- initialize the timeline -->
   <script>
@@ -100,7 +92,7 @@ Add one line of code at the bottom to initialize your timeline. It goes after th
 <br/>
-### <a href="demo/basic-example.html" target="_blank">View A Basic HTML Example (With Source Code)</a> 👀
+### <a href="https://kendawson.online/vantl/demo/bare-bones-example.html" target="_blank">View A Basic HTML Example (With Source Code)</a> 👀
 <br/><br/>
@@ -110,7 +102,7 @@ Note: if you're using <a href="https://jquery.com" target="_blank">jQuery</a> in
 ````html
     <!-- load functions -->
-    <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
     <!-- initialize timeline with jQuery -->
     <script>
@@ -151,11 +143,11 @@ Here are the available data attributes:
 | `data-mode` | string | `'vertical'` | Layout mode: `'vertical'` or `'horizontal'` |
 | `data-min-width` | number | `600` | Minimum viewport width (px) to maintain horizontal mode |
 | `data-max-width` | number | `600` | Maximum viewport width (px) to maintain vertical mode |
-| `data-visible-items` | number | `3` | Number of items in horizontal viewport |
 | `data-move-items` | number | `1` | Items to scroll per navigation click (horizontal) |
 | `data-start-index` | number | `0` | Initial item index (horizontal mode) |
 | `data-horizontal-start-position` | string | `'top'` | First item alignment in horizontal layout: `'top'` or `'bottom'` |
 | `data-vertical-start-position` | string | `'left'` | First item alignment in vertical layout: `'left'` or `'right'` |
+| `data-same-side-nodes` | string|boolean | `false` | If set, forces all nodes to the same side. Accepts `'top'`/`'bottom'` (horizontal) or `'left'`/`'right'` (vertical). Use `data-same-side-nodes="true"` to follow the orientation-specific start position (`data-horizontal-start-position` / `data-vertical-start-position`). |
 | `data-vertical-trigger` | string | `'15%'` | Scroll trigger distance: percentage or px (e.g., `'20%'` or `'150px'`) |
 | `data-rtl-mode` | boolean | `false` | Right to left mode: `true` or `false` (only works in horizontal mode and overrides `startIndex` setting) |
 | `data-node-color` | string | — | Node circle color (hex/rgb/hsl) |
@@ -185,12 +177,11 @@ It's a lightweight text format stored in a file with a `.json` extension. It's e
 {
   "timelineName": "Timeline Title",
   "layoutMode": "horizontal",
-  "visibleItems": 5,
   "minWidth": 700,
   "maxWidth": "",
   "nodeColor": "",
   "lineColor": "",
-  "navColor": "",
+  "navColor": ""
 }
 ````
@@ -222,9 +213,9 @@ Here are some examples of JSON files you can use as templates to build your own
 🗓️ **A NOTE ABOUT DATES IN JSON** 🗓️
-If there are dates stored in these JSON files (e.g. the `lastupdated` field), they're stored in a special format named ISO 8601. The vanilla timeline app expects dates to be in this format.
+Dates stored in JSON data files (e.g. the `lastupdated` field) are stored in a special format called ISO 8601. The vanilla timeline app expects dates to be in this specific format.
-There is a [demo page](demo/time.html) included which displays this date format for you. This page also teaches you how to generate the ISO 8601 timestamp in the developer console of your web browser. Open the [demo/time.html](demo/time.html) file in your browser to see a current ISO 8601 timestamp. You can copy/paste this date string directly into your JSON timelines.
+There is a [demo page](https://kendawson.online/vantl/demo/time.html) which displays dates in this format for you. The page also teaches you how to generate ISO 8601 timestamps in the developer console of your own web browser. Open the [demo/time.html](https://kendawson.online/vantl/demo/time.html) file in a browser to see a current ISO 8601 timestamp. You can copy/paste this date string directly to your JSON timelines.
 ----
@@ -300,8 +291,7 @@ timeline(document.querySelectorAll('.timeline'), {
 ```javascript
 // vanilla Javascript
 timeline(document.querySelectorAll('.timeline'), {
-  mode: 'horizontal',
-  visibleItems: 3,
+  mode: 'horizontal'
 });
@@ -321,11 +311,11 @@ All options can be set via JavaScript API, data attributes, or with JSON config.
 | `mode` | string | `'vertical'` | Layout mode: `'vertical'` or `'horizontal'` |
 | `minWidth` | number | `600` | Min viewport width (px) to maintain horizontal mode |
 | `maxWidth` | number | `600` | Max viewport width (px) to maintain vertical mode |
-| `visibleItems` | number | `3` | Number of items in horizontal viewport |
 | `moveItems` | number | `1` | Items to scroll per navigation click (horizontal) |
 | `startIndex` | number | `0` | Initial item index (horizontal mode) |
 | `horizontalStartPosition` | string | `'top'` | First item alignment: `'top'` or `'bottom'` |
 | `verticalStartPosition` | string | `'left'` | First item alignment: `'left'` or `'right'` |
+| `sameSideNodes` | string|boolean | `false` | Force all nodes to the same side. Accepted literal values: `'top'`, `'bottom'`, `'left'`, `'right'`. Use `true` to follow the orientation-specific start position (`horizontalStartPosition` / `verticalStartPosition`). |
 | `verticalTrigger` | string | `'15%'` | Scroll trigger distance: percentage or px (e.g., `'20%'` or `'150px'`) |
 | `rtlMode` | boolean | `false` | Right-to-left mode (horizontal) |
 | `nodeColor` | string | — | Node circle color (hex/rgb/hsl) |
@@ -353,8 +343,8 @@ Override the auto-detected image path:
 loadDataFromJson('/data/timeline.json', '#myTimeline');
 // Clear cache
-clearTimelineCache();             // Clear all
-clearTimelineCache('timelineId'); // Clear specific
+clearTimelineCache();                         // Clear all cached JSON timelines
+clearTimelineCache('/data/my-timeline.json'); // Clear cache for specific JSON URL
 // Navigate to node (horizontal mode)
 navigateTimelineToNodeIndex(containerElement, 5);
@@ -371,6 +361,27 @@ closeTimelineModal();
  - [API Documentation](API-Documentation.md)
  - [Development Documentation](Development.md)
+<br/>
+### Optional SwiperJS add-on (not bundled or supported)
+- [SwiperJS](https://swiperjs.com) is a third-party library; Vantl only ships an adapter. You must bring Swiper yourself and consult the Swiper docs for setup and features.
+- Resolution order when `useSwiper` is enabled: `options.swiperCdn` (ESM URL) → installed `swiper` package (dynamic import) → `window.Swiper` from a UMD CDN. If none are found, Vanilla Timeline falls back to its built-in carousel controls.
+- Enable with `data-use-swiper="true"` (or boolean `true`) in HTML or `useSwiper: 'true' | 'auto' | true` in JS. Pass Swiper options via `swiperOptions`.
+- Build warning about unresolved `swiper` is expected when you have not installed it; either ignore, mark it external (e.g., `external: ['swiper']`), or install Swiper to silence the warning.
+UMD CDN example (provides `window.Swiper`):
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.css">
+<script src="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.js"></script>
+<script src="dist/timeline.min.js"></script>
+<script>
+  timeline(document.querySelectorAll('.timeline'), { useSwiper: 'auto' });
+  // Swiper-specific options: { swiperOptions: { loop: true } }
+</script>
+```
 ## Browser Support
 - Chrome/Edge (2018+)
@@ -403,6 +414,19 @@ You can report issues and open pull requests on GitHub:
 [MIT License](LICENSE)
+---
+**Note (optional Swiper integration):**
+You may see a Rollup warning during `npm run build` similar to:
+```
+(!) Unresolved dependencies
+swiper (imported by "src/adapters/swiper-adapter.js")
+```
+This is expected when Swiper is optional (not installed) because the adapter attempts to load Swiper at runtime via an ESM CDN, dynamic import, or `window.Swiper` (UMD). The build still completes; if you want Rollup to stop warning, add `external: ['swiper']` to `rollup.config.js`, or install `swiper` locally to include it in the bundle.
 ## Credits

package/dist/images/alert.svg ADDED Viewed

@@ -0,0 +1,50 @@
+<?xml version="1.0" ?>
+<svg width="800px" height="800px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" id="_x3C_Layer_x3E_" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

package/dist/images/arrow-left.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="7.8" height="14"><path fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6.8 1L1 7l5.8 6"/></svg>

package/dist/images/arrow-right.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="7.8" height="14"><path fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1 13l5.8-5.9L1 1"/></svg>

package/dist/images/missing-image.svg ADDED Viewed

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g transform="translate(1 1)">
+	<polygon style="fill:#CCCCCC;" points="272.655,449.207 502.172,449.207 502.172,60.793 272.655,60.793 	"/>
+	<polygon style="fill:#FFFFFF;" points="7.828,449.207 237.345,449.207 237.345,60.793 7.828,60.793 	"/>
+	<polygon style="fill:#E2E3E5;" points="34.31,449.207 475.69,449.207 475.69,60.793 34.31,60.793 	"/>
+	<path style="fill:#E0E0E0;" d="M167.607,198.503c0,22.069-17.655,40.607-40.607,40.607s-39.724-18.538-39.724-40.607
+		s17.655-40.607,40.607-40.607S167.607,175.552,167.607,198.503"/>
+	<path style="fill:#F0F0F0;" d="M141.124,198.503c0,22.069-12.359,40.607-27.366,40.607s-26.483-18.538-26.483-40.607
+		s12.359-40.607,27.366-40.607S141.124,175.552,141.124,198.503"/>
+	<g>
+		<path style="fill:#B6B6B6;" d="M502.172,458.034H7.828c-5.297,0-8.828-3.531-8.828-8.828V60.793c0-5.297,3.531-8.828,8.828-8.828
+			h494.345c5.297,0,8.828,3.531,8.828,8.828v388.414C511,454.503,507.469,458.034,502.172,458.034z M16.655,440.379h476.69V69.621
+			H16.655V440.379z"/>
+		<path style="fill:#B6B6B6;" d="M127.883,247.055c-27.366,0-49.434-22.069-49.434-49.434s22.069-49.434,49.434-49.434
+			s49.434,22.069,49.434,49.434S154.366,247.055,127.883,247.055z M127.883,166.724c-17.655,0-31.779,14.124-31.779,31.779
+			s14.124,31.779,31.779,31.779s31.779-14.124,31.779-31.779S144.655,166.724,127.883,166.724z"/>
+		<path style="fill:#B6B6B6;" d="M60.793,405.069c-2.648,0-5.297-0.883-7.062-2.648c-3.531-3.531-2.648-8.828,0.883-12.359
+			l150.069-132.414c3.531-2.648,8.828-2.648,12.359,0l97.103,97.103c3.531,3.531,3.531,8.828,0,12.359
+			c-3.531,3.531-8.828,3.531-12.359,0l-90.924-90.924L66.972,403.303C65.207,404.186,62.559,405.069,60.793,405.069z"/>
+		<path style="fill:#B6B6B6;" d="M259.414,321.207c-1.766,0-4.414-0.883-6.179-2.648c-3.531-3.531-3.531-8.828-0.883-12.359
+			l92.69-101.517c1.766-1.766,3.531-2.648,6.179-2.648c2.648,0,4.414,0.883,6.179,2.648l105.931,97.103
+			c3.531,3.531,3.531,8.828,0.883,12.359c-3.531,3.531-8.828,3.531-12.359,0.883l-98.869-91.807l-86.51,95.338
+			C263.828,320.324,262.062,321.207,259.414,321.207z"/>
+	</g>
+</g>
+</svg>

package/dist/timeline.min.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.timeline{--timeline-line-color:#ddd;--timeline-node-color:#ddd;--timeline-node-bg:#fff;--timeline-nav-color:#fff;--timeline-nav-border:#ddd;box-sizing:border-box;overflow-x:hidden;position:relative}.timeline__heading{color:#333;font-size:2rem;font-weight:700;margin:0 0 60px;text-align:center}.timeline *,.timeline :after,.timeline :before{box-sizing:inherit}.timeline:not(.timeline--horizontal):before{background-color:var(--timeline-line-color);bottom:0;content:"";left:50%;margin-left:-2px;position:absolute;top:0;width:4px;z-index:1}.timeline__wrap{overflow:hidden;position:relative;z-index:2}.timeline--horizontal .timeline__wrap{overflow:visible}.timeline__item{font-size:1rem;padding:10px 40px 10px 0;position:relative;width:50%;z-index:2}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content{display:flex;flex-direction:column;max-height:200px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image{flex-shrink:0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content>div{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content h3{flex-shrink:0;margin:0 0 6px;text-align:center}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content p{flex:1;margin-bottom:0;min-height:0;overflow:hidden}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image{height:auto;margin:0 auto 12px;max-height:100px;object-fit:cover;width:100px}.timeline__item:after{background-color:var(--timeline-node-bg);border:4px solid var(--timeline-node-color);border-radius:50%;content:"";height:20px;position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;z-index:1}.timeline__item.animated{animation-duration:1s;animation-fill-mode:both;opacity:0}.timeline__item.fadeIn{animation-name:fadeIn}.timeline__item--active .timeline__content{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.05)}.timeline__item--left{left:0}.timeline__item--right{left:50%;padding:10px 0 10px 40px}.timeline__item--right:after{left:-10px}.timeline__item--right .timeline__content:before{border:10px solid transparent;border-left:none;border-right:12px solid #ccc;left:-12px}.timeline__item--right .timeline__content:after{border:9px solid transparent;border-left:none;border-right:11px solid #fff;left:-10px}.timeline__content{background-color:#fff;border:1px solid #ccc;border-radius:10px;color:#333;display:block;padding:20px;position:relative}.timeline__image{border-radius:8px;display:block;height:auto;margin-bottom:12px;max-width:100%;width:100%}.timeline--horizontal .timeline__image{height:100px;margin:0 auto 8px;object-fit:cover;width:100px}.timeline__content:after,.timeline__content:before{content:"";height:0;position:absolute;top:50%;transform:translateY(-50%);width:0}.timeline__content:before{border-bottom:10px solid transparent;border-left:12px solid #ccc;border-top:10px solid transparent;right:-12px;z-index:1}.timeline__content:after{border-bottom:9px solid transparent;border-left:11px solid #fff;border-top:9px solid transparent;right:-10px;z-index:2}.timeline__content h2{font-size:20px;font-weight:700;margin:0 0 10px}.timeline__content h3{font-size:18px;font-weight:700;margin:0 0 10px}.timeline__content p{font-size:15px;line-height:1.5;margin-bottom:10px}.timeline--horizontal{font-size:0;overflow-x:hidden;overflow-y:visible;padding:0 60px;white-space:nowrap}.timeline--horizontal .timeline-divider{background-color:var(--timeline-line-color);display:block;height:4px;left:40px;position:absolute;right:40px;transform:translateY(-50%);z-index:1}.timeline--horizontal .timeline__items{transition:all .8s;will-change:transform}.timeline--horizontal .timeline__item{display:inline-block;left:0;padding:0 0 40px;position:relative;transition:none;vertical-align:top;white-space:normal;width:200px}.timeline--horizontal .timeline__item .timeline__content{min-height:180px;padding:12px}.timeline--horizontal .timeline__item .timeline__content h3{font-size:18px;font-weight:700;margin:0 0 8px}.timeline--horizontal .timeline__item .timeline__content p{font-size:11px;line-height:1.4;margin-bottom:0}.timeline--horizontal .timeline__item:after{left:50%;right:auto;top:100%;transform:translate(-50%,-50%)}.timeline--horizontal .timeline__item .timeline__item__inner{display:table;height:100%;width:100%}.timeline--horizontal .timeline__item .timeline__content__wrap{display:table-cell;margin:0;padding:0;vertical-align:bottom}.timeline--horizontal .timeline__item .timeline__content:before{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ccc;left:50%;right:auto;top:100%;transform:translateX(-50%)}.timeline--horizontal .timeline__item .timeline__content:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;left:50%;right:auto;top:100%;transform:translateX(-50%)}.timeline--horizontal .timeline__item--bottom{padding:40px 0 0}.timeline--horizontal .timeline__item--bottom:after{top:0}.timeline--horizontal .timeline__item--bottom .timeline__content__wrap{vertical-align:top}.timeline--horizontal .timeline__item--bottom .timeline__content:before{border:12px solid transparent;border-bottom:12px solid #ccc;border-top:none;bottom:100%;top:auto}.timeline--horizontal .timeline__item--bottom .timeline__content:after{border:10px solid transparent;border-bottom:10px solid #fff;border-top:none;bottom:100%;top:auto}.timeline-nav-button{background-color:var(--timeline-nav-color);border:3px solid var(--timeline-nav-border);border-radius:50px;box-shadow:0 2px 4px rgba(0,0,0,.1);box-sizing:border-box;cursor:pointer;display:block;height:40px;outline:none;position:absolute;text-indent:-9999px;top:50%;transform:translateY(-50%);transition:all .3s ease;width:40px;z-index:10}.timeline-nav-button:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.15)}.timeline-nav-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none;user-select:none}.timeline-nav-button:before{display:none}.timeline-nav-button svg{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.timeline-nav-button--prev{left:10px}.timeline-nav-button--next{right:10px}.timeline--mobile{padding:0}.timeline--mobile:before{left:10px!important;margin:0!important}.timeline--mobile .timeline__item{left:0;margin-bottom:20px;padding-left:40px;padding-right:0;width:100%}.timeline--mobile .timeline__item .timeline__content{align-items:flex-start;display:flex;flex-direction:row;gap:6px;max-height:100px;padding:12px}.timeline--mobile .timeline__item .timeline__image{border-radius:6px;flex-shrink:0;height:80px;margin:0;object-fit:cover;width:80px}.timeline--mobile .timeline__item .timeline__content>div{flex:1;min-width:0}.timeline--mobile .timeline__item .timeline__content h3{font-size:16px;margin:0 0 6px}.timeline--mobile .timeline__item .timeline__content p{font-size:13px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis}.timeline--mobile .timeline__item:after{left:2px;margin:0}.timeline--mobile .timeline__item .timeline__content:before{border:12px solid transparent;border-left:none;border-right-color:#ccc;left:-12px}.timeline--mobile .timeline__item .timeline__content:after{border:10px solid transparent;border-left:none;border-right-color:#fff;left:-10px}@keyframes fadeIn{0%{opacity:0;top:70px}to{opacity:1;top:0}}@keyframes liftUp{0%{top:0}to{top:-15px}}.timeline-modal-overlay{background-color:rgba(0,0,0,.85);height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;width:100%;z-index:9998}.timeline-modal-overlay.timeline-modal-show{opacity:1;visibility:visible}.timeline-modal{background-color:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);left:50%;max-height:90vh;max-width:900px;opacity:0;overflow:hidden;position:fixed;top:50%;transform:translate(-50%,-50%) scale(.7);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;visibility:hidden;width:90%;z-index:9999}.timeline-modal.timeline-modal-show{opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible}.timeline-modal__content{max-height:90vh;overflow-x:hidden;overflow-y:auto;padding:40px 40px 80px}.timeline-modal__content::-webkit-scrollbar{width:8px}.timeline-modal__content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}.timeline-modal__content::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.timeline-modal__content::-webkit-scrollbar-thumb:hover{background:#555}.timeline-modal__image{border-radius:8px;display:block;height:auto;margin:0 auto 20px;max-width:100%;width:auto}.timeline-modal__title{color:#333;font-size:28px;font-weight:700;margin:0 0 20px}.timeline-modal__text{color:#555;font-size:16px;line-height:1.6}.timeline-modal__text p{margin-bottom:15px}.timeline-modal__divider{border:0;border-top:1px solid #ddd;margin:30px 0}.timeline-modal__close-bottom{background-color:#333;border:none;border-radius:6px;color:#fff;cursor:pointer;display:block;font-size:16px;margin:30px auto 0;padding:12px 40px;transition:background-color .2s ease}.timeline-modal__close-bottom:hover{background-color:#555}.timeline-modal__close{align-items:center;background-color:rgba(0,0,0,.6);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:24px;height:40px;justify-content:center;line-height:1;position:absolute;right:20px;top:20px;transition:background-color .2s ease,transform .2s ease;width:40px}.timeline-modal__close:hover{background-color:rgba(0,0,0,.8);transform:scale(1.1)}.timeline-modal__close:before{content:"×"}.timeline__item{cursor:pointer;transition:transform .2s ease}.timeline__item:hover .timeline__content{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.timeline__loader-overlay{background-color:#fff;inset:0;position:fixed;z-index:10000}.timeline__loader,.timeline__loader-overlay{align-items:center;display:flex;justify-content:center}.timeline__loader{padding:20px}.timeline__loader-spinner{display:block;height:auto;max-width:100%;object-fit:contain;width:120px}.timeline__error{align-items:center;background-color:#f9f9f9;border:2px solid #e0e0e0;border-radius:12px;display:flex;flex-direction:column;justify-content:center;margin:20px auto;max-width:600px;min-height:300px;padding:60px 20px;text-align:center}.timeline__error-icon{height:auto;margin-bottom:24px;max-width:100%;opacity:.8;width:200px}.timeline__error-title{color:#d32f2f;font-size:24px;font-weight:700;margin:0 0 16px}.timeline__error-message{color:#555;font-size:16px;line-height:1.6;margin:0 0 16px}.timeline__error-solution{background-color:#fff3cd;border:1px solid #ffc107;border-radius:6px;color:#333;font-size:15px;line-height:1.6;margin:0 0 12px;padding:12px 16px}.timeline__error-solution strong{color:#856404}.timeline__error-details{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;color:#666;font-family:Courier New,monospace;font-size:13px;line-height:1.5;margin:12px 0 0;max-width:100%;overflow-x:auto;padding:8px 12px}.timeline__error-details strong{color:#333}
+.timeline{--timeline-line-color:#ddd;--timeline-node-color:#ddd;--timeline-node-bg:#fff;--timeline-nav-color:#fff;--timeline-nav-border:#ddd;--timeline-active-outline-color:#000;--timeline-h-node-width:200px;--timeline-h-node-min-height:180px;--timeline-h-image-size:100px;--timeline-h-title-font-size:18px;--timeline-h-text-font-size:11px;--timeline-same-side-gap:20px;box-sizing:border-box;overflow-x:hidden;position:relative}.timeline:not(.timeline--loaded){opacity:0;pointer-events:none;visibility:hidden}.timeline__date{color:#333;font-size:.95rem;font-weight:700;margin-bottom:8px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__date{text-align:center}.timeline__heading{color:#333;font-size:1.1rem;font-weight:700;margin:0 0 8px}.timeline__title{color:#333;font-size:1.25rem;font-weight:700;margin:0 0 18px;opacity:0;position:relative;text-align:center;transition:opacity .5s ease-in-out,visibility .5s ease-in-out;visibility:hidden;z-index:0}.timeline__title--visible{opacity:1;visibility:visible}.timeline__image{border-radius:4px;display:block;height:auto;margin-bottom:8px;max-width:100%;width:auto}.timeline__summary{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#555;display:-webkit-box;font-size:.9rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.timeline__modal-content{color:#333;display:none;font-size:1rem;line-height:1.6}.timeline__modal-content p{margin-bottom:12px}.timeline__modal-content p:last-child{margin-bottom:0}.timeline *,.timeline :after,.timeline :before{box-sizing:inherit}.timeline:not(.timeline--horizontal):before{background-color:var(--timeline-line-color);bottom:0;content:"";left:50%;margin-left:-2px;position:absolute;top:0;width:4px;z-index:1}.timeline__wrap{overflow:hidden;position:relative;z-index:2}.timeline--horizontal .timeline__wrap{overflow-x:hidden;overflow-y:visible}.timeline__item{font-size:1rem;padding:10px 40px 10px 0;position:relative;width:50%;z-index:2}.timeline--mobile{padding:0}.timeline--mobile:before{left:10px!important;margin:0!important}.timeline--mobile .timeline__item{left:0;margin-bottom:20px;padding-left:40px;padding-right:0;width:100%}.timeline--same-side:not(.timeline--horizontal) .timeline__item{margin-bottom:var(--timeline-same-side-gap)}.timeline--same-side:not(.timeline--horizontal) .timeline__item:last-child{margin-bottom:0}.timeline--mobile .timeline__item:after{left:2px;margin:0;right:auto;transform:translateY(-50%)}.timeline--mobile .timeline__content{align-items:start;background-color:#fff;border:1px solid #ccc;border-radius:10px;column-gap:8px;display:grid;grid-template-columns:60px 70px 5px 1fr;grid-template-rows:auto auto;min-height:auto;padding:8px;position:relative;row-gap:4px}.timeline--mobile .timeline__content.no-summary{align-items:center;column-gap:12px;display:grid;grid-template-columns:80px 110px 5px 1fr;grid-template-rows:auto;row-gap:0}.timeline--mobile .timeline__content.no-image.no-summary{grid-template-columns:110px 1fr}.timeline--mobile .timeline__content.no-summary .timeline__image{grid-column:1;grid-row:1;height:80px;margin:0;object-fit:cover;width:80px}.timeline--mobile .timeline__content.no-summary .timeline__date{align-self:center;grid-column:2;grid-row:1;margin:0;white-space:nowrap}.timeline--mobile .timeline__content.no-summary .timeline__heading{align-self:center;grid-column:4;grid-row:1;line-height:1.2;margin:0}.timeline--mobile .timeline__content:before{border:10px solid transparent;border-left:none;border-right:12px solid #ccc;content:"";height:0;left:-12px;position:absolute;top:50%;transform:translateY(-50%);width:0;z-index:1}.sr-only{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.timeline--mobile .timeline__content:after{border:9px solid transparent;border-left:none;border-right:10px solid #fff;content:"";height:0;left:-10px;position:absolute;top:50%;transform:translateY(-50%);width:0;z-index:2}.timeline--mobile .timeline__image{border-radius:4px;grid-column:1;grid-row:1/span 2;height:60px;margin:0;object-fit:cover;width:60px}.timeline--mobile .timeline__date{align-self:center;color:#333;font-size:.9rem;font-weight:700;grid-column:2;grid-row:1/span 2;padding-right:8px;padding-top:0;white-space:nowrap}.timeline--mobile .timeline__heading{color:#333;font-size:.9rem;font-weight:700;grid-column:4;grid-row:1;line-height:1.2;margin:0;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline--mobile .timeline__summary{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#555;display:-webkit-box;font-size:.8rem;grid-column:4;grid-row:2;line-height:1.2;min-width:0;overflow:hidden}.timeline--mobile .timeline__heading,.timeline--mobile .timeline__summary{padding-left:6px}.timeline--mobile .timeline__content:not(:has(.timeline__image)){grid-template-columns:70px 5px 1fr}.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__date{align-self:center;grid-column:1;grid-row:1/span 2}.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__heading{grid-column:3;grid-row:1}.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__summary{grid-column:3;grid-row:2}.timeline--mobile .timeline__content.no-image{grid-template-columns:70px 5px 1fr}.timeline--mobile .timeline__content.no-image .timeline__date{align-self:center;grid-column:1;grid-row:1/span 2}.timeline--mobile .timeline__content.no-image .timeline__heading{grid-column:3;grid-row:1}.timeline--mobile .timeline__content.no-image .timeline__summary{grid-column:3;grid-row:2}@media (min-width:768px){.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item{padding:10px 40px 10px 0;width:50%}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item:after{left:auto;right:-10px;transform:translateY(-50%)}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left{left:0;padding:10px 40px 10px 0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right{left:50%;padding:10px 0 10px 40px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right:after{left:-10px;right:auto}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left .timeline__content:before{border-bottom:10px solid transparent;border-left:12px solid #ccc;border-top:10px solid transparent;left:auto;right:-12px;z-index:1}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left .timeline__content:after{border-bottom:9px solid transparent;border-left:11px solid #fff;border-top:9px solid transparent;left:auto;right:-10px;z-index:2}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right .timeline__content:before{border:10px solid transparent;border-left:none;border-right:12px solid #ccc;left:-12px;right:auto;z-index:1}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right .timeline__content:after{border:9px solid transparent;border-left:none;border-right:11px solid #fff;left:-10px;right:auto;z-index:2}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content{display:flex;flex-direction:column;gap:8px;max-height:none;padding:16px;position:relative}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))){align-items:center;column-gap:16px;display:grid;gap:0;grid-template-columns:100px 120px 1fr;padding:16px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))){grid-template-columns:120px 1fr}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__image{grid-column:1;height:100px;margin:0;object-fit:cover;width:100px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__date{align-self:center;grid-column:2;margin:0;white-space:nowrap}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__heading{align-self:center;grid-column:3;line-height:1.2;margin:0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:after,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:before{content:"";height:0;position:absolute;top:50%;transform:translateY(-50%);width:0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__image{height:auto;margin-bottom:0;max-width:100%}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__summary{-webkit-line-clamp:3;font-size:.95rem}}@media (min-width:1200px){.timeline--horizontal .timeline__content{align-items:center;display:flex;flex-direction:column;gap:8px;padding:12px;text-align:center}.timeline--horizontal .timeline__date{font-size:.95rem;font-weight:700;order:2}.timeline--horizontal .timeline__heading{font-size:1rem;margin:0;order:3}.timeline--horizontal .timeline__image{height:var(--timeline-h-image-size);margin-bottom:0;object-fit:cover;order:1;width:var(--timeline-h-image-size)}.timeline--horizontal .timeline__summary{-webkit-line-clamp:2;font-size:.85rem;order:4}}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image{height:auto;margin:0 auto 12px;max-height:100px;object-fit:cover;width:100px}.timeline__item:after{background-color:var(--timeline-node-bg);border:4px solid var(--timeline-node-color);border-radius:50%;content:"";height:20px;position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;z-index:1}.timeline__item.animated{animation-duration:1s;animation-fill-mode:both;opacity:0}.timeline__item.fadeIn{animation-name:fadeIn}.timeline__item--active .timeline__content{border-color:var(--timeline-active-outline-color);box-shadow:0 4px 12px rgba(0,0,0,.15)}.timeline__item--active:after{background-color:var(--timeline-node-color)}.timeline__item--left{left:0}.timeline__item--right{left:50%;padding:10px 0 10px 40px}.timeline__item--right:after{left:-10px}.timeline__item--right .timeline__content:before{border:10px solid transparent;border-left:none;border-right:12px solid #ccc;left:-12px}.timeline__item--right .timeline__content:after{border:9px solid transparent;border-left:none;border-right:11px solid #fff;left:-10px}.timeline__content{background-color:#fff;border:1px solid #ccc;border-radius:10px;color:#333;display:block;padding:20px;position:relative;z-index:2}@media (min-width:768px){.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))){align-items:center;column-gap:16px;display:grid;grid-template-columns:100px 120px 1fr;padding:16px;row-gap:0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))){grid-template-columns:120px 1fr}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__image,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__image{grid-column:1;height:100px;margin:0;object-fit:cover;width:100px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__date,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__date{align-self:center;grid-column:2;margin:0;white-space:nowrap}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__heading,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__heading{align-self:center;grid-column:3;line-height:1.2;margin:0}}.timeline__content:after,.timeline__content:before{content:"";height:0;position:absolute;top:50%;transform:translateY(-50%);width:0}.timeline__content:before{border-bottom:10px solid transparent;border-left:12px solid #ccc;border-top:10px solid transparent;right:-12px;z-index:1}.timeline__content:after{border-bottom:9px solid transparent;border-left:11px solid #fff;border-top:9px solid transparent;right:-10px;z-index:2}.timeline__content h2{font-size:20px;font-weight:700;margin:0 0 10px}.timeline__content h3{font-size:18px;font-weight:700;margin:0 0 10px}.timeline__content p{font-size:15px;line-height:1.5;margin-bottom:10px}.timeline--horizontal{font-size:0;overflow:hidden;padding:0 60px}.timeline--horizontal .timeline__wrap{overflow:hidden;position:relative;white-space:nowrap;z-index:2}.timeline--horizontal .timeline-divider{background-color:var(--timeline-line-color);display:block;height:4px;left:40px;position:absolute;right:40px;transform:translateY(-50%);z-index:1}.timeline--horizontal .timeline__items{transition:all .8s;will-change:transform}.timeline--horizontal .timeline__item{display:inline-block;left:0;padding:0 0 60px;position:relative;transition:none;vertical-align:top;white-space:normal;width:var(--timeline-h-node-width)}.timeline--same-side.timeline--horizontal .timeline__item{margin-right:var(--timeline-same-side-gap)}.timeline--same-side.timeline--horizontal .timeline__item:last-child{margin-right:0}.timeline--same-side.timeline--horizontal .timeline__item--top{padding:0 0 60px;vertical-align:bottom}.timeline--same-side.timeline--horizontal .timeline__item--bottom{padding:60px 0 0;vertical-align:top}.timeline--horizontal .timeline__item .timeline__content{min-height:var(--timeline-h-node-min-height);padding:12px}.timeline--horizontal .timeline__item .timeline__content h3{font-size:var(--timeline-h-title-font-size);font-weight:700;margin:0 0 8px}.timeline--horizontal .timeline__item .timeline__content p{font-size:var(--timeline-h-text-font-size);line-height:1.4;margin-bottom:0}.timeline--horizontal .timeline__item:after{left:50%;right:auto;top:100%;transform:translate(-50%,-50%)}.timeline--same-side.timeline--horizontal .timeline__item--top:after{top:calc(100% - 30px)}.timeline--same-side.timeline--horizontal .timeline__item--bottom:after{top:30px}.timeline--horizontal .timeline__item .timeline__item__inner{display:table;height:100%;width:100%}.timeline--horizontal .timeline__item .timeline__content__wrap{display:table-cell;margin:0;padding:0;vertical-align:bottom}.timeline--horizontal .timeline__item .timeline__content:before{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ccc;left:50%;right:auto;top:100%;transform:translateX(-50%)}.timeline--horizontal .timeline__item .timeline__content:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;left:50%;right:auto;top:100%;transform:translateX(-50%)}.timeline--horizontal .timeline__item--bottom{padding:60px 0 0}.timeline--horizontal .timeline__item--bottom:after{top:0}.timeline--horizontal .timeline__item--bottom .timeline__content__wrap{vertical-align:top}.timeline--horizontal .timeline__item--bottom .timeline__content:before{border:12px solid transparent;border-bottom:12px solid #ccc;border-top:none;bottom:100%;top:auto}.timeline--horizontal .timeline__item--bottom .timeline__content:after{border:10px solid transparent;border-bottom:10px solid #fff;border-top:none;bottom:100%;top:auto}.timeline--horizontal .timeline__item.timeline__item--active .timeline__content:before{border-top-color:var(--timeline-active-outline-color)}.timeline--horizontal .timeline__item.timeline__item--active .timeline__content:after{border-left-width:11px;border-right-width:11px;border-top-width:11px}.timeline--horizontal .timeline__item--bottom.timeline__item--active .timeline__content:before{border-bottom-color:var(--timeline-active-outline-color)}.timeline--horizontal .timeline__item--bottom.timeline__item--active .timeline__content:after{border-bottom-width:11px;border-left-width:11px;border-right-width:11px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--active.timeline__item--left .timeline__content:before{border-left-color:var(--timeline-active-outline-color)}.timeline--mobile .timeline__item--active .timeline__content:before,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--active.timeline__item--right .timeline__content:before{border-right-color:var(--timeline-active-outline-color)}.timeline-nav-button{background-color:var(--timeline-nav-color);border:3px solid var(--timeline-nav-border);border-radius:50px;box-shadow:0 2px 4px rgba(0,0,0,.1);box-sizing:border-box;cursor:pointer;display:block;height:40px;outline:none;position:absolute;text-indent:-9999px;top:50%;transform:translateY(-50%);transition:all .3s ease;width:40px;z-index:10}.timeline-nav-button:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.15)}.timeline-nav-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none;user-select:none}.timeline-nav-button.timeline-nav-button--at-end,.timeline-nav-button.timeline-nav-button--at-start{cursor:not-allowed;opacity:.5}.timeline-nav-button.timeline-nav-button--at-end:hover,.timeline-nav-button.timeline-nav-button--at-start:hover{box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-50%)}.timeline-nav-button:before{display:none}.timeline-nav-button svg{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.timeline-nav-button--prev{left:10px}.timeline-nav-button--next{right:10px}@keyframes fadeIn{0%{opacity:0;top:70px}to{opacity:1;top:0}}@keyframes liftUp{0%{top:0}to{top:-15px}}.timeline-modal-overlay{background-color:rgba(0,0,0,.85);height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;width:100%;z-index:9998}.timeline-modal-overlay.timeline-modal-show{opacity:1;visibility:visible}.timeline-modal{background-color:#fff;border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;left:50%;max-height:90vh;max-width:900px;opacity:0;overflow:hidden;position:fixed;top:50%;transform:translate(-50%,-50%) scale(.7);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;visibility:hidden;width:90%;z-index:9999}.timeline-modal.timeline-modal-show{opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible}.timeline-modal__content{flex:1 1 auto;max-height:90vh;min-height:0;overflow-x:hidden;overflow-y:auto;padding:40px}.timeline-modal__image{border-radius:0;display:block;height:auto;margin:0 auto 20px;max-width:100%;width:auto}.timeline-modal__title{color:#333;font-size:28px;font-weight:700;margin:0 0 20px}.timeline-modal__text{color:#555;font-size:16px;line-height:1.6}.timeline-modal__text p{margin-bottom:15px}.timeline-modal__divider{border:0;border-top:1px solid #ddd;margin:30px 0}.timeline-modal__close-bottom{background-color:#333;border:none;border-radius:0;color:#fff;cursor:pointer;display:inline-block;font-size:16px;padding:12px 40px;transition:background-color .2s ease}.timeline-modal__close-bottom:hover{background-color:#555}.timeline-modal__footer{background:#fff;border-top:1px solid #ddd;flex:0 0 auto;padding:16px 24px;text-align:center}.timeline-modal__close{align-items:center;background-color:rgba(0,0,0,.6);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:24px;height:40px;justify-content:center;line-height:1;position:absolute;right:20px;top:20px;transition:background-color .2s ease,transform .2s ease;width:40px}.timeline-modal__close:hover{background-color:rgba(0,0,0,.8);transform:scale(1.1)}.timeline-modal__close:before{content:"×"}@media (max-width:768px){.timeline-modal{border-radius:0;height:100%;left:0;max-height:100%;max-width:100%;top:0;transform:scale(.95);width:100%}.timeline-modal.timeline-modal-show{transform:scale(1)}.timeline-modal__content{max-height:100%;padding:60px 20px 20px}.timeline-modal__close{background-color:rgba(0,0,0,.7);border-radius:50%;font-size:28px;height:48px;right:10px;top:10px;width:48px}.timeline-modal__close:hover{background-color:rgba(0,0,0,.9)}}.timeline__item{cursor:pointer;transition:transform .2s ease}.timeline__item:hover .timeline__content{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.timeline--horizontal .timeline__item:hover .timeline__content{transform:none}.timeline__error{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:12px;display:flex;flex-direction:column;justify-content:center;margin:20px auto;max-width:600px;padding:24px 16px;text-align:center}.timeline__error-icon{height:auto;margin-bottom:24px;max-width:100%;opacity:.8;width:200px}.timeline.timeline--error .timeline-divider,.timeline.timeline--error .timeline-nav-button,.timeline.timeline--error .timeline__items,.timeline.timeline--error .timeline__wrap,.timeline.timeline--error:before{display:none!important}.timeline__error-title{color:#d32f2f;font-size:24px;font-weight:700;margin:0 0 16px}.timeline__error-message{color:#555;font-size:16px;line-height:1.6;margin:0 0 16px}.timeline__error-solution{background-color:#fff3cd;border:1px solid #ffc107;border-radius:6px;color:#333;font-size:15px;line-height:1.6;margin:0 0 12px;padding:12px 16px}@media (max-width:1024px){.timeline--horizontal{--timeline-h-node-width:180px;--timeline-h-node-min-height:160px;--timeline-h-image-size:90px}}@media (max-width:768px){.timeline--horizontal{--timeline-h-node-width:160px;--timeline-h-node-min-height:140px;--timeline-h-image-size:80px;--timeline-h-title-font-size:16px;--timeline-h-text-font-size:10px}.timeline--horizontal .timeline__summary{display:none}}@media (max-width:640px){.timeline--horizontal{--timeline-h-node-width:140px;--timeline-h-node-min-height:120px;--timeline-h-image-size:70px;--timeline-h-title-font-size:14px;padding:0 40px}.timeline--horizontal .timeline__summary{display:none}}@media (max-width:480px){.timeline--horizontal{--timeline-h-node-width:120px;--timeline-h-node-min-height:100px;--timeline-h-image-size:60px;--timeline-h-title-font-size:13px;padding:0 30px}.timeline--horizontal .timeline__heading{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:12px;line-height:1.2;margin:0 0 4px;overflow:hidden}.timeline--horizontal .timeline__summary{display:none}}@media (max-width:360px){.timeline--horizontal{--timeline-h-node-width:100px;--timeline-h-node-min-height:90px;--timeline-h-image-size:50px;--timeline-h-title-font-size:11px;padding:0 20px}.timeline--horizontal .timeline__heading{-webkit-line-clamp:1;font-size:11px}}@media (max-width:420px){.timeline--mobile .timeline__summary{display:none}.timeline--mobile .timeline__content{grid-template-columns:60px 70px 1fr}.timeline--mobile .timeline__heading{grid-column:3}}@media (max-width:360px){.timeline--mobile .timeline__image{display:none}.timeline--mobile .timeline__content{grid-template-columns:70px 1fr;grid-template-rows:auto auto}.timeline--mobile .timeline__date{align-self:center;grid-column:1;grid-row:1/span 2}.timeline--mobile .timeline__heading{grid-column:2;grid-row:1}.timeline--mobile .timeline__summary{display:block;grid-column:2;grid-row:2}}@media (max-width:320px){.timeline--mobile .timeline__heading,.timeline--mobile .timeline__image,.timeline--mobile .timeline__summary{display:none}.timeline--mobile .timeline__content{grid-template-columns:1fr;padding:6px}.timeline--mobile .timeline__date{align-self:center;grid-column:1;grid-row:1}}.timeline__error-solution strong{color:#856404}.timeline__error-details{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;color:#666;font-family:Courier New,monospace;font-size:13px;line-height:1.5;margin:12px 0 0;max-width:100%;overflow-x:auto;padding:8px 12px}.timeline__error-details strong{color:#333}@media (min-width:768px){.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))){align-items:center;column-gap:16px;display:grid!important;grid-template-columns:100px 120px 1fr;padding:16px;row-gap:0}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))){grid-template-columns:120px 1fr}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__image,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__image{grid-column:1;height:100px;margin:0;object-fit:cover;width:100px}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__date,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__date{align-self:center;grid-column:2;margin:0;white-space:nowrap}.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__heading,.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__heading{align-self:center;grid-column:3;line-height:1.2;margin:0}}
 /*# sourceMappingURL=timeline.min.css.map */

package/dist/timeline.min.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["timeline.css"],"names":[],"mappings":"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","file":"timeline.min.css","sourcesContent":[".timeline {\n box-sizing: border-box;\n position: relative;\n overflow-x: hidden;\n \n /* CSS Custom Properties for dynamic colors /\n --timeline-line-color: #DDD;\n --timeline-node-color: #DDD;\n --timeline-node-bg: #FFF;\n --timeline-nav-color: #FFF;\n --timeline-nav-border: #DDD;\n}\n\n/ Timeline heading /\n.timeline__heading {\n font-size: 2rem;\n font-weight: 700;\n margin: 0 0 60px;\n text-align: center;\n color: #333;\n}\n\n.timeline ,\n.timeline ::before,\n.timeline ::after {\n box-sizing: inherit;\n}\n\n.timeline:not(.timeline--horizontal)::before {\n background-color: var(--timeline-line-color);\n bottom: 0;\n content: '';\n left: 50%;\n margin-left: -2px;\n position: absolute;\n top: 0;\n width: 4px;\n z-index: 1;\n}\n\n.timeline__wrap {\n overflow: hidden;\n position: relative;\n z-index: 2;\n}\n\n.timeline--horizontal .timeline__wrap {\n overflow: visible;\n}\n\n.timeline__item {\n font-size: 1rem;\n padding: 10px 40px 10px 0;\n position: relative;\n width: 50%;\n z-index: 2;\n}\n\n/* Vertical timeline (not mobile) - side-by-side layout /\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content {\n max-height: 200px;\n display: flex;\n flex-direction: column;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image {\n flex-shrink: 0;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content > div {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content h3 {\n text-align: center;\n margin: 0 0 6px;\n flex-shrink: 0;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__content p {\n margin-bottom: 0;\n overflow: hidden;\n flex: 1;\n min-height: 0;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image {\n width: 100px;\n height: auto;\n max-height: 100px;\n object-fit: cover;\n margin: 0 auto 12px;\n}\n\n.timeline__item::after {\n background-color: var(--timeline-node-bg);\n border: 4px solid var(--timeline-node-color);\n border-radius: 50%;\n content: '';\n height: 20px;\n position: absolute;\n right: -10px;\n transform: translateY(-50%);\n top: 50%;\n width: 20px;\n z-index: 1;\n}\n\n.timeline__item.animated {\n animation-duration: 1s;\n animation-fill-mode: both;\n opacity: 0;\n}\n\n.timeline__item.fadeIn {\n animation-name: fadeIn;\n}\n\n/ Active state for deep linking /\n.timeline__item--active .timeline__content {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.timeline__item--left {\n left: 0;\n}\n\n.timeline__item--right {\n left: 50%;\n padding: 10px 0 10px 40px;\n}\n\n.timeline__item--right::after {\n left: -10px;\n}\n\n.timeline__item--right .timeline__content::before {\n border-bottom: 10px solid transparent;\n border-right: 12px solid #CCC;\n border-left: none;\n border-top: 10px solid transparent;\n left: -12px;\n}\n\n.timeline__item--right .timeline__content::after {\n border-bottom: 9px solid transparent;\n border-right: 11px solid #FFF;\n border-left: none;\n border-top: 9px solid transparent;\n left: -10px;\n}\n\n.timeline__content {\n background-color: #FFF;\n border: 1px solid #CCC;\n border-radius: 10px;\n color: #333;\n display: block;\n padding: 20px;\n position: relative;\n}\n\n/ Image styling - fluid to fit content box /\n.timeline__image {\n width: 100%;\n height: auto;\n max-width: 100%;\n border-radius: 8px;\n margin-bottom: 12px;\n display: block;\n}\n\n/ Horizontal timeline images - square thumbnails /\n.timeline--horizontal .timeline__image {\n width: 100px;\n height: 100px;\n object-fit: cover;\n margin: 0 auto 8px;\n}\n\n.timeline__content::before,\n.timeline__content::after {\n content: '';\n height: 0;\n position: absolute;\n transform: translateY(-50%);\n top: 50%;\n width: 0;\n}\n\n.timeline__content::before {\n border-bottom: 10px solid transparent;\n border-left: 12px solid #CCC;\n border-top: 10px solid transparent;\n right: -12px;\n z-index: 1;\n}\n\n.timeline__content::after {\n border-bottom: 9px solid transparent;\n border-left: 11px solid #FFF;\n border-top: 9px solid transparent;\n right: -10px;\n z-index: 2;\n}\n\n.timeline__content h2 {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 10px;\n}\n\n.timeline__content h3 {\n font-size: 18px;\n font-weight: 700;\n margin: 0 0 10px;\n}\n\n.timeline__content p {\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 10px;\n}\n\n.timeline--horizontal {\n font-size: 0;\n padding: 0 60px;\n overflow-x: hidden;\n overflow-y: visible;\n white-space: nowrap;\n}\n\n.timeline--horizontal .timeline-divider {\n background-color: var(--timeline-line-color);\n display: block;\n height: 4px;\n left: 40px;\n position: absolute;\n transform: translateY(-50%);\n right: 40px;\n z-index: 1;\n}\n\n.timeline--horizontal .timeline__items {\n transition: all 0.8s;\n will-change: transform;\n}\n\n.timeline--horizontal .timeline__item {\n display: inline-block;\n left: 0;\n padding: 0 0 40px;\n position: relative;\n transition: none;\n vertical-align: top;\n white-space: normal;\n width: 200px;\n}\n\n.timeline--horizontal .timeline__item .timeline__content {\n padding: 12px;\n min-height: 180px;\n}\n\n.timeline--horizontal .timeline__item .timeline__content h3 {\n font-size: 18px;\n font-weight: 700;\n margin: 0 0 8px;\n}\n\n.timeline--horizontal .timeline__item .timeline__content p {\n font-size: 11px;\n line-height: 1.4;\n margin-bottom: 0;\n}\n\n.timeline--horizontal .timeline__item::after {\n left: 50%;\n right: auto;\n transform: translate(-50%, -50%);\n top: 100%;\n}\n\n.timeline--horizontal .timeline__item .timeline__item__inner {\n display: table;\n height: 100%;\n width: 100%;\n}\n\n.timeline--horizontal .timeline__item .timeline__content__wrap {\n display: table-cell;\n margin: 0;\n padding: 0;\n vertical-align: bottom;\n}\n\n.timeline--horizontal .timeline__item .timeline__content::before {\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n border-top: 12px solid #CCC;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n top: 100%;\n}\n\n.timeline--horizontal .timeline__item .timeline__content::after {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 10px solid #FFF;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n top: 100%;\n}\n\n.timeline--horizontal .timeline__item--bottom {\n padding: 40px 0 0;\n}\n\n.timeline--horizontal .timeline__item--bottom::after {\n top: 0;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {\n vertical-align: top;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content::before {\n border-bottom: 12px solid #CCC;\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n border-top: none;\n bottom: 100%;\n top: auto;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content::after {\n border-bottom: 10px solid #FFF;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: none;\n bottom: 100%;\n top: auto;\n}\n\n.timeline-nav-button {\n background-color: var(--timeline-nav-color);\n border: 3px solid var(--timeline-nav-border);\n border-radius: 50px;\n box-sizing: border-box;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: block;\n height: 40px;\n outline: none;\n position: absolute;\n text-indent: -9999px;\n transform: translateY(-50%);\n top: 50%;\n width: 40px;\n z-index: 10;\n transition: all 0.3s ease;\n}\n\n.timeline-nav-button:hover {\n transform: translateY(-50%) scale(1.15);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.timeline-nav-button:disabled {\n opacity: .5;\n pointer-events: none;\n cursor: not-allowed;\n user-select: none;\n}\n\n.timeline-nav-button::before {\n display: none;\n}\n\n.timeline-nav-button svg {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.timeline-nav-button--prev {\n left: 10px;\n}\n\n.timeline-nav-button--next {\n right: 10px;\n}\n\n.timeline--mobile {\n padding: 0;\n}\n\n.timeline--mobile::before {\n left: 10px !important;\n margin: 0 !important;\n}\n\n.timeline--mobile .timeline__item {\n left: 0;\n padding-left: 40px;\n padding-right: 0;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.timeline--mobile .timeline__item .timeline__content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: 6px;\n padding: 12px;\n max-height: 100px;\n}\n\n.timeline--mobile .timeline__item .timeline__image {\n width: 80px;\n height: 80px;\n object-fit: cover;\n flex-shrink: 0;\n margin: 0;\n border-radius: 6px;\n}\n\n.timeline--mobile .timeline__item .timeline__content > div {\n flex: 1;\n min-width: 0;\n}\n\n.timeline--mobile .timeline__item .timeline__content h3 {\n font-size: 16px;\n margin: 0 0 6px;\n}\n\n.timeline--mobile .timeline__item .timeline__content p {\n font-size: 13px;\n line-height: 1.4;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.timeline--mobile .timeline__item::after {\n left: 2px;\n margin: 0;\n}\n\n.timeline--mobile .timeline__item .timeline__content::before {\n left: -12px;\n border-bottom: 12px solid transparent;\n border-right: 12px solid #CCC;\n border-left: none;\n border-top: 12px solid transparent;\n}\n\n.timeline--mobile .timeline__item .timeline__content::after {\n left: -10px;\n border-bottom: 10px solid transparent;\n border-right: 10px solid #FFF;\n border-left: none;\n border-top: 10px solid transparent;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n top: 70px;\n }\n 100% {\n opacity: 1;\n top: 0px;\n }\n}\n\n@keyframes liftUp {\n 0% {\n top: 0px;\n }\n 100% {\n top: -15px;\n }\n}\n\n/ Modal Styles /\n.timeline-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.85);\n z-index: 9998;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.timeline-modal-overlay.timeline-modal-show {\n opacity: 1;\n visibility: visible;\n}\n\n.timeline-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.7);\n width: 90%;\n max-width: 900px;\n max-height: 90vh;\n background-color: #FFF;\n border-radius: 12px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;\n}\n\n.timeline-modal.timeline-modal-show {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, -50%) scale(1);\n}\n\n.timeline-modal__content {\n padding: 40px 40px 80px 40px;\n max-height: 90vh;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/ Fix scrollbar overflow on rounded corners /\n.timeline-modal__content::-webkit-scrollbar {\n width: 8px;\n}\n\n.timeline-modal__content::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 0 12px 12px 0;\n}\n\n.timeline-modal__content::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n}\n\n.timeline-modal__content::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n.timeline-modal__image {\n width: auto;\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n margin: 0 auto 20px;\n display: block;\n}\n\n.timeline-modal__title {\n font-size: 28px;\n font-weight: 700;\n margin: 0 0 20px;\n color: #333;\n}\n\n.timeline-modal__text {\n font-size: 16px;\n line-height: 1.6;\n color: #555;\n}\n\n.timeline-modal__text p {\n margin-bottom: 15px;\n}\n\n.timeline-modal__divider {\n border: 0;\n border-top: 1px solid #ddd;\n margin: 30px 0;\n}\n\n.timeline-modal__close-bottom {\n display: block;\n margin: 30px auto 0;\n padding: 12px 40px;\n background-color: #333;\n color: #fff;\n border: none;\n border-radius: 6px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n\n.timeline-modal__close-bottom:hover {\n background-color: #555;\n}\n\n.timeline-modal__close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: #FFF;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.timeline-modal__close:hover {\n background-color: rgba(0, 0, 0, 0.8);\n transform: scale(1.1);\n}\n\n.timeline-modal__close::before {\n content: '×';\n}\n\n/ Make timeline items clickable /\n.timeline__item {\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.timeline__item:hover .timeline__content {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/ Loading spinner styles /\n.timeline__loader-overlay {\n position: fixed;\n inset: 0;\n background-color: #ffffff;\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.timeline__loader {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n}\n\n.timeline__loader-spinner {\n width: 120px;\n max-width: 100%;\n height: auto;\n display: block;\n object-fit: contain;\n}\n\n/ Error display styles */\n.timeline__error {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 300px;\n padding: 60px 20px;\n text-align: center;\n background-color: #f9f9f9;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n margin: 20px auto;\n max-width: 600px;\n}\n\n.timeline__error-icon {\n width: 200px;\n max-width: 100%;\n height: auto;\n margin-bottom: 24px;\n opacity: 0.8;\n}\n\n.timeline__error-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 16px;\n color: #d32f2f;\n}\n\n.timeline__error-message {\n font-size: 16px;\n line-height: 1.6;\n margin: 0 0 16px;\n color: #555;\n}\n\n.timeline__error-solution {\n font-size: 15px;\n line-height: 1.6;\n margin: 0 0 12px;\n color: #333;\n background-color: #fff3cd;\n border: 1px solid #ffc107;\n border-radius: 6px;\n padding: 12px 16px;\n}\n\n.timeline__error-solution strong {\n color: #856404;\n}\n\n.timeline__error-details {\n font-size: 13px;\n line-height: 1.5;\n margin: 12px 0 0;\n color: #666;\n font-family: 'Courier New', monospace;\n background-color: #f5f5f5;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 8px 12px;\n max-width: 100%;\n overflow-x: auto;\n}\n\n.timeline__error-details strong {\n color: #333;\n}\n"]}
1	+ {"version":3,"sources":["timeline.css"],"names":[],"mappings":"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","file":"timeline.min.css","sourcesContent":[".timeline {\n box-sizing: border-box;\n position: relative;\n overflow-x: hidden;\n \n /* CSS Custom Properties for dynamic colors /\n --timeline-line-color: #DDD;\n --timeline-node-color: #DDD;\n --timeline-node-bg: #FFF;\n --timeline-nav-color: #FFF;\n --timeline-nav-border: #DDD;\n / Outline color for the active/current item (defaults to black when no nodeColor is configured) /\n --timeline-active-outline-color: #000;\n \n / CSS Custom Properties for responsive horizontal layout dimensions /\n --timeline-h-node-width: 200px;\n --timeline-h-node-min-height: 180px;\n --timeline-h-image-size: 100px;\n --timeline-h-title-font-size: 18px;\n --timeline-h-text-font-size: 11px;\n\n / Gap for same-side layouts (applies when sameSideNodes is enabled) /\n --timeline-same-side-gap: 20px;\n}\n\n/ Hide timeline by default to prevent flash of unstyled/incorrectly-styled content.\n The timeline engine will add the .timeline--loaded class after layout is complete,\n and the fade-in will make the transition smooth. /\n.timeline:not(.timeline--loaded) {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}\n\n/ Semantic node field styles /\n.timeline__date {\n font-size: 0.95rem;\n font-weight: 700;\n color: #333;\n margin-bottom: 8px;\n}\n\n/ Vertical (non-mobile) cards: center date above the centered image /\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__date {\n text-align: center;\n}\n\n.timeline__heading {\n font-size: 1.1rem;\n font-weight: 700;\n margin: 0 0 8px 0;\n color: #333;\n}\n\n/ Page-level timeline title (from JSON timelineName) /\n/ Hidden by default to prevent jump; revealed with timeline fade-in /\n.timeline__title {\n font-size: 1.25rem;\n font-weight: 700;\n margin: 0 0 18px 0;\n color: #333;\n text-align: center;\n position: relative;\n z-index: 0;\n opacity: 0;\n visibility: hidden;\n transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out;\n}\n\n/ Show title when visible class is added by JS /\n.timeline__title--visible {\n opacity: 1;\n visibility: visible;\n}\n\n.timeline__image {\n display: block;\n width: auto;\n height: auto;\n max-width: 100%;\n border-radius: 4px;\n margin-bottom: 8px;\n}\n\n/ Summary truncation with line-clamp (3 lines) /\n.timeline__summary {\n font-size: 0.9rem;\n line-height: 1.4;\n color: #555;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ Modal content hidden by default /\n.timeline__modal-content {\n display: none;\n font-size: 1rem;\n line-height: 1.6;\n color: #333;\n}\n\n.timeline__modal-content p {\n margin-bottom: 12px;\n}\n\n.timeline__modal-content p:last-child {\n margin-bottom: 0;\n}\n\n.timeline ,\n.timeline ::before,\n.timeline ::after {\n box-sizing: inherit;\n}\n\n.timeline:not(.timeline--horizontal)::before {\n background-color: var(--timeline-line-color);\n bottom: 0;\n content: '';\n left: 50%;\n margin-left: -2px;\n position: absolute;\n top: 0;\n width: 4px;\n z-index: 1;\n}\n\n.timeline__wrap {\n overflow: hidden;\n position: relative;\n z-index: 2;\n}\n\n.timeline--horizontal .timeline__wrap {\n /* Clip items horizontally (past nav buttons) but allow vertical overflow /\n overflow-x: hidden;\n overflow-y: visible;\n}\n\n.timeline__item {\n font-size: 1rem;\n padding: 10px 40px 10px 0;\n position: relative;\n width: 50%;\n z-index: 2;\n}\n\n/ Mobile layout: vertical timeline, left-aligned, stacked items /\n.timeline--mobile {\n padding: 0;\n}\n\n.timeline--mobile::before {\n left: 10px !important;\n margin: 0 !important;\n}\n\n.timeline--mobile .timeline__item {\n left: 0;\n padding-left: 40px;\n padding-right: 0;\n width: 100%;\n margin-bottom: 20px;\n}\n\n/ Gap between items when same-side vertical layout is active (includes mobile) /\n.timeline--same-side:not(.timeline--horizontal) .timeline__item {\n margin-bottom: var(--timeline-same-side-gap);\n}\n\n.timeline--same-side:not(.timeline--horizontal) .timeline__item:last-child {\n margin-bottom: 0;\n}\n\n.timeline--mobile .timeline__item::after {\n left: 2px;\n margin: 0;\n right: auto;\n transform: translateY(-50%);\n}\n\n.timeline--mobile .timeline__content {\n background-color: #FFF;\n border: 1px solid #CCC;\n border-radius: 10px;\n padding: 8px;\n position: relative;\n display: grid;\n / columns: image \| date \| spacer \| content /\n grid-template-columns: 60px 70px 5px 1fr;\n grid-template-rows: auto auto;\n column-gap: 8px;\n row-gap: 4px;\n align-items: start;\n min-height: auto;\n}\n\n/ Mobile + no-summary: keep image/date/heading in one row and center-align them /\n.timeline--mobile .timeline__content.no-summary {\n align-items: center;\n column-gap: 12px;\n display: grid;\n / image \| date \| spacer \| heading /\n grid-template-columns: 80px 110px 5px 1fr;\n grid-template-rows: auto;\n row-gap: 0;\n}\n\n.timeline--mobile .timeline__content.no-image.no-summary {\n grid-template-columns: 110px 1fr;\n}\n\n.timeline--mobile .timeline__content.no-summary .timeline__image {\n grid-column: 1;\n grid-row: 1;\n width: 80px;\n height: 80px;\n margin: 0;\n object-fit: cover;\n}\n\n.timeline--mobile .timeline__content.no-summary .timeline__date {\n grid-column: 2;\n grid-row: 1;\n margin: 0;\n white-space: nowrap;\n align-self: center;\n}\n\n.timeline--mobile .timeline__content.no-summary .timeline__heading {\n grid-column: 4;\n grid-row: 1;\n margin: 0;\n align-self: center;\n line-height: 1.2;\n}\n\n/ Triangle pointers for mobile left-aligned layout /\n.timeline--mobile .timeline__content::before {\n content: '';\n position: absolute;\n height: 0;\n width: 0;\n border-bottom: 10px solid transparent;\n border-right: 12px solid #CCC;\n border-left: none;\n border-top: 10px solid transparent;\n left: -12px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n/ Visually-hidden helper for accessibility (screen-reader only) /\n.sr-only {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.timeline--mobile .timeline__content::after {\n content: '';\n position: absolute;\n height: 0;\n width: 0;\n border-bottom: 9px solid transparent;\n border-right: 10px solid #FFF;\n border-left: none;\n border-top: 9px solid transparent;\n left: -10px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n}\n\n.timeline--mobile .timeline__image {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 4px;\n grid-column: 1;\n grid-row: 1 / span 2;\n margin: 0;\n}\n\n.timeline--mobile .timeline__date {\n font-size: 0.9rem;\n font-weight: 700;\n color: #333;\n grid-column: 2;\n grid-row: 1 / span 2;\n white-space: nowrap;\n padding-top: 0;\n align-self: center;\n padding-right: 8px;\n}\n\n.timeline--mobile .timeline__heading {\n font-size: 0.9rem;\n font-weight: 700;\n margin: 0;\n color: #333;\n grid-column: 4;\n grid-row: 1;\n min-width: 0;\n line-height: 1.2;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.timeline--mobile .timeline__summary {\n font-size: 0.8rem;\n line-height: 1.2;\n color: #555;\n -webkit-line-clamp: 2;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n grid-column: 4;\n grid-row: 2;\n min-width: 0;\n}\n\n/ Ensure a small internal gap between the date column and the text column\n so the separation remains visible on narrow screens. /\n.timeline--mobile .timeline__heading,\n.timeline--mobile .timeline__summary {\n padding-left: 6px;\n}\n\n/ Collapse to two+spacer columns when no image is present /\n.timeline--mobile .timeline__content:not(:has(.timeline__image)) {\n / date \| spacer \| content /\n grid-template-columns: 70px 5px 1fr;\n}\n\n.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__date {\n grid-column: 1;\n grid-row: 1 / span 2;\n align-self: center;\n}\n\n.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__heading {\n grid-column: 3;\n grid-row: 1;\n}\n\n.timeline--mobile .timeline__content:not(:has(.timeline__image)) .timeline__summary {\n grid-column: 3;\n grid-row: 2;\n}\n\n/ JS fallback: when image is absent, add .no-image to the content element\n Mirror the :has() rules so older browsers work when demo JS adds .no-image /\n.timeline--mobile .timeline__content.no-image {\n / date \| spacer \| content /\n grid-template-columns: 70px 5px 1fr;\n}\n.timeline--mobile .timeline__content.no-image .timeline__date {\n grid-column: 1;\n grid-row: 1 / span 2;\n align-self: center;\n}\n.timeline--mobile .timeline__content.no-image .timeline__heading {\n grid-column: 3;\n grid-row: 1;\n}\n.timeline--mobile .timeline__content.no-image .timeline__summary {\n grid-column: 3;\n grid-row: 2;\n}\n\n/ Vertical layout: side-by-side alternating /\n@media (min-width: 768px) {\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item {\n width: 50%;\n padding: 10px 40px 10px 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item::after {\n right: -10px;\n left: auto;\n transform: translateY(-50%);\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left {\n left: 0;\n padding: 10px 40px 10px 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right {\n left: 50%;\n padding: 10px 0 10px 40px;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right::after {\n left: -10px;\n right: auto;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left .timeline__content::before {\n border-bottom: 10px solid transparent;\n border-left: 12px solid #CCC;\n border-top: 10px solid transparent;\n right: -12px;\n left: auto;\n z-index: 1;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--left .timeline__content::after {\n border-bottom: 9px solid transparent;\n border-left: 11px solid #FFF;\n border-top: 9px solid transparent;\n right: -10px;\n left: auto;\n z-index: 2;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right .timeline__content::before {\n border-bottom: 10px solid transparent;\n border-right: 12px solid #CCC;\n border-left: none;\n border-top: 10px solid transparent;\n left: -12px;\n right: auto;\n z-index: 1;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--right .timeline__content::after {\n border-bottom: 9px solid transparent;\n border-right: 11px solid #FFF;\n border-left: none;\n border-top: 9px solid transparent;\n left: -10px;\n right: auto;\n z-index: 2;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n max-height: none;\n position: relative;\n }\n\n / When there is no summary present, lay out image / date / heading in a single row\n for vertical (desktop) timelines. Use :has() where available and provide a\n JS-friendly fallback using the `.no-summary` class (can be added by script). /\n / Treat \"no summary\" as: no summary node or summary node is empty/whitespace (JS adds .no-summary fallback too) /\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))),\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary {\n display: grid;\n grid-template-columns: 100px 120px 1fr;\n column-gap: 16px;\n gap: 0;\n align-items: center;\n padding: 16px;\n }\n\n / If image is absent and no summary, collapse to two columns: [date][heading] /\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))),\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary {\n grid-template-columns: 120px 1fr;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__image {\n grid-column: 1;\n width: 100px;\n height: 100px;\n object-fit: cover;\n margin: 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__date {\n grid-column: 2;\n margin: 0;\n white-space: nowrap;\n align-self: center;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content .timeline__heading {\n grid-column: 3;\n margin: 0;\n align-self: center;\n line-height: 1.2;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content::before,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content::after {\n content: '';\n height: 0;\n position: absolute;\n transform: translateY(-50%);\n top: 50%;\n width: 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__image {\n max-width: 100%;\n height: auto;\n margin-bottom: 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__summary {\n font-size: 0.95rem;\n -webkit-line-clamp: 3;\n }\n}\n\n/ Horizontal layout: carousel with fixed card width /\n@media (min-width: 1200px) {\n .timeline--horizontal .timeline__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: 8px;\n padding: 12px;\n }\n\n .timeline--horizontal .timeline__date {\n order: 2;\n font-weight: bold;\n font-size: 0.95rem;\n }\n\n .timeline--horizontal .timeline__heading {\n order: 3;\n font-size: 1rem;\n margin: 0;\n }\n\n .timeline--horizontal .timeline__image {\n order: 1;\n width: var(--timeline-h-image-size);\n height: var(--timeline-h-image-size);\n object-fit: cover;\n margin-bottom: 0;\n }\n\n .timeline--horizontal .timeline__summary {\n order: 4;\n font-size: 0.85rem;\n -webkit-line-clamp: 2;\n }\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item .timeline__image {\n width: 100px;\n height: auto;\n max-height: 100px;\n object-fit: cover;\n margin: 0 auto 12px;\n}\n\n.timeline__item::after {\n background-color: var(--timeline-node-bg);\n border: 4px solid var(--timeline-node-color);\n border-radius: 50%;\n content: '';\n height: 20px;\n position: absolute;\n right: -10px;\n transform: translateY(-50%);\n top: 50%;\n width: 20px;\n z-index: 1;\n}\n\n.timeline__item.animated {\n animation-duration: 1s;\n animation-fill-mode: both;\n opacity: 0;\n}\n\n.timeline__item.fadeIn {\n animation-name: fadeIn;\n}\n\n/ Active state for current/deep-linked node /\n.timeline__item--active .timeline__content {\n border-color: var(--timeline-active-outline-color);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/ Fill the dot for active node /\n.timeline__item--active::after {\n background-color: var(--timeline-node-color);\n}\n\n.timeline__item--left {\n left: 0;\n}\n\n.timeline__item--right {\n left: 50%;\n padding: 10px 0 10px 40px;\n}\n\n.timeline__item--right::after {\n left: -10px;\n}\n\n.timeline__item--right .timeline__content::before {\n border-bottom: 10px solid transparent;\n border-right: 12px solid #CCC;\n border-left: none;\n border-top: 10px solid transparent;\n left: -12px;\n}\n\n.timeline__item--right .timeline__content::after {\n border-bottom: 9px solid transparent;\n border-right: 11px solid #FFF;\n border-left: none;\n border-top: 9px solid transparent;\n left: -10px;\n}\n\n.timeline__content {\n background-color: #FFF;\n border: 1px solid #CCC;\n border-radius: 10px;\n color: #333;\n display: block;\n padding: 20px;\n position: relative;\n z-index: 2;\n}\n\n/ Vertical (desktop) layout: when summary is absent or empty, lay out items in one row /\n@media (min-width: 768px) {\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))),\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary {\n display: grid;\n grid-template-columns: 100px 120px 1fr;\n column-gap: 16px;\n row-gap: 0;\n align-items: center;\n padding: 16px;\n }\n\n / No image: collapse to two columns /\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))),\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary {\n grid-template-columns: 120px 1fr;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__image,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__image {\n grid-column: 1;\n width: 100px;\n height: 100px;\n object-fit: cover;\n margin: 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__date,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__date {\n grid-column: 2;\n margin: 0;\n white-space: nowrap;\n align-self: center;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__heading,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__heading {\n grid-column: 3;\n margin: 0;\n align-self: center;\n line-height: 1.2;\n }\n}\n\n/ Image styling handled in responsive sections above /\n\n.timeline__content::before,\n.timeline__content::after {\n content: '';\n height: 0;\n position: absolute;\n transform: translateY(-50%);\n top: 50%;\n width: 0;\n}\n\n.timeline__content::before {\n border-bottom: 10px solid transparent;\n border-left: 12px solid #CCC;\n border-top: 10px solid transparent;\n right: -12px;\n z-index: 1;\n}\n\n.timeline__content::after {\n border-bottom: 9px solid transparent;\n border-left: 11px solid #FFF;\n border-top: 9px solid transparent;\n right: -10px;\n z-index: 2;\n}\n\n.timeline__content h2 {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 10px;\n}\n\n.timeline__content h3 {\n font-size: 18px;\n font-weight: 700;\n margin: 0 0 10px;\n}\n\n.timeline__content p {\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 10px;\n}\n\n.timeline--horizontal {\n font-size: 0;\n padding: 0 60px;\n overflow: hidden;\n}\n\n.timeline--horizontal .timeline__wrap {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n z-index: 2;\n}\n\n.timeline--horizontal .timeline-divider {\n background-color: var(--timeline-line-color);\n display: block;\n height: 4px;\n left: 40px;\n position: absolute;\n transform: translateY(-50%);\n right: 40px;\n z-index: 1;\n}\n\n.timeline--horizontal .timeline__items {\n transition: all 0.8s;\n will-change: transform;\n}\n\n.timeline--horizontal .timeline__item {\n display: inline-block;\n left: 0;\n padding: 0 0 60px;\n position: relative;\n transition: none;\n vertical-align: top;\n white-space: normal;\n width: var(--timeline-h-node-width);\n}\n\n/ Gap between items when same-side horizontal layout is active /\n.timeline--same-side.timeline--horizontal .timeline__item {\n margin-right: var(--timeline-same-side-gap);\n}\n\n.timeline--same-side.timeline--horizontal .timeline__item:last-child {\n margin-right: 0;\n}\n\n/ Same-side top mode: nodes below the timeline /\n.timeline--same-side.timeline--horizontal .timeline__item--top {\n padding: 0 0 60px;\n vertical-align: bottom;\n}\n\n/ Same-side bottom mode: nodes above the timeline /\n.timeline--same-side.timeline--horizontal .timeline__item--bottom {\n padding: 60px 0 0;\n vertical-align: top;\n}\n\n.timeline--horizontal .timeline__item .timeline__content {\n padding: 12px;\n min-height: var(--timeline-h-node-min-height);\n}\n\n.timeline--horizontal .timeline__item .timeline__content h3 {\n font-size: var(--timeline-h-title-font-size);\n font-weight: 700;\n margin: 0 0 8px;\n}\n\n.timeline--horizontal .timeline__item .timeline__content p {\n font-size: var(--timeline-h-text-font-size);\n line-height: 1.4;\n margin-bottom: 0;\n}\n\n.timeline--horizontal .timeline__item::after {\n left: 50%;\n right: auto;\n transform: translate(-50%, -50%);\n top: 100%;\n}\n\n/ Same-side layouts: position dots on the divider line /\n.timeline--same-side.timeline--horizontal .timeline__item--top::after {\n / Top mode: divider is at bottom of item minus 30px padding zone /\n top: calc(100% - 30px);\n}\n\n.timeline--same-side.timeline--horizontal .timeline__item--bottom::after {\n / Bottom mode: divider is at 30px from top /\n top: 30px;\n}\n\n.timeline--horizontal .timeline__item .timeline__item__inner {\n display: table;\n height: 100%;\n width: 100%;\n}\n\n.timeline--horizontal .timeline__item .timeline__content__wrap {\n display: table-cell;\n margin: 0;\n padding: 0;\n vertical-align: bottom;\n}\n\n.timeline--horizontal .timeline__item .timeline__content::before {\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n border-top: 12px solid #CCC;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n top: 100%;\n}\n\n.timeline--horizontal .timeline__item .timeline__content::after {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 10px solid #FFF;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n top: 100%;\n}\n\n.timeline--horizontal .timeline__item--bottom {\n padding: 60px 0 0;\n}\n\n.timeline--horizontal .timeline__item--bottom::after {\n top: 0;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {\n vertical-align: top;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content::before {\n border-bottom: 12px solid #CCC;\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n border-top: none;\n bottom: 100%;\n top: auto;\n}\n\n.timeline--horizontal .timeline__item--bottom .timeline__content::after {\n border-bottom: 10px solid #FFF;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: none;\n bottom: 100%;\n top: auto;\n}\n\n/ Active pointer/arrow outline should match the active outline color /\n.timeline--horizontal .timeline__item.timeline__item--active .timeline__content::before {\n border-top-color: var(--timeline-active-outline-color);\n}\n\n/ Make the active pointer look integrated with the card (avoid a thick \"seam\" line) /\n.timeline--horizontal .timeline__item.timeline__item--active .timeline__content::after {\n border-left-width: 11px;\n border-right-width: 11px;\n border-top-width: 11px;\n}\n\n.timeline--horizontal .timeline__item--bottom.timeline__item--active .timeline__content::before {\n border-bottom-color: var(--timeline-active-outline-color);\n}\n\n.timeline--horizontal .timeline__item--bottom.timeline__item--active .timeline__content::after {\n border-left-width: 11px;\n border-right-width: 11px;\n border-bottom-width: 11px;\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--active.timeline__item--left .timeline__content::before {\n border-left-color: var(--timeline-active-outline-color);\n}\n\n.timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__item--active.timeline__item--right .timeline__content::before {\n border-right-color: var(--timeline-active-outline-color);\n}\n\n.timeline--mobile .timeline__item--active .timeline__content::before {\n border-right-color: var(--timeline-active-outline-color);\n}\n\n.timeline-nav-button {\n background-color: var(--timeline-nav-color);\n border: 3px solid var(--timeline-nav-border);\n border-radius: 50px;\n box-sizing: border-box;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: block;\n height: 40px;\n outline: none;\n position: absolute;\n text-indent: -9999px;\n transform: translateY(-50%);\n top: 50%;\n width: 40px;\n z-index: 10;\n transition: all 0.3s ease;\n}\n\n.timeline-nav-button:hover {\n transform: translateY(-50%) scale(1.15);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.timeline-nav-button:disabled {\n opacity: .5;\n pointer-events: none;\n cursor: not-allowed;\n user-select: none;\n}\n\n/ Visual disabled state for at-start and at-end classes (no actual disabled attribute) /\n.timeline-nav-button.timeline-nav-button--at-start,\n.timeline-nav-button.timeline-nav-button--at-end {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.timeline-nav-button.timeline-nav-button--at-start:hover,\n.timeline-nav-button.timeline-nav-button--at-end:hover {\n transform: translateY(-50%);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.timeline-nav-button::before {\n display: none;\n}\n\n.timeline-nav-button svg {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.timeline-nav-button--prev {\n left: 10px;\n}\n\n.timeline-nav-button--next {\n right: 10px;\n}\n\n/ Mobile layout styles handled in responsive sections above /\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n top: 70px;\n }\n 100% {\n opacity: 1;\n top: 0px;\n }\n}\n\n@keyframes liftUp {\n 0% {\n top: 0px;\n }\n 100% {\n top: -15px;\n }\n}\n\n/ Modal Styles /\n.timeline-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.85);\n z-index: 9998;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.timeline-modal-overlay.timeline-modal-show {\n opacity: 1;\n visibility: visible;\n}\n\n.timeline-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.7);\n width: 90%;\n max-width: 900px;\n max-height: 90vh;\n background-color: #FFF;\n border-radius: 0;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;\n}\n\n.timeline-modal.timeline-modal-show {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, -50%) scale(1);\n}\n\n.timeline-modal__content {\n padding: 40px;\n max-height: 90vh;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1 1 auto;\n min-height: 0;\n}\n\n/ Use user-agent/default scrollbar styling so OS/browser controls decide width /\n\n.timeline-modal__image {\n width: auto;\n max-width: 100%;\n height: auto;\n border-radius: 0;\n margin: 0 auto 20px;\n display: block;\n}\n\n.timeline-modal__title {\n font-size: 28px;\n font-weight: 700;\n margin: 0 0 20px;\n color: #333;\n}\n\n.timeline-modal__text {\n font-size: 16px;\n line-height: 1.6;\n color: #555;\n}\n\n.timeline-modal__text p {\n margin-bottom: 15px;\n}\n\n.timeline-modal__divider {\n border: 0;\n border-top: 1px solid #ddd;\n margin: 30px 0;\n}\n\n.timeline-modal__close-bottom {\n display: inline-block;\n padding: 12px 40px;\n background-color: #333;\n color: #fff;\n border: none;\n border-radius: 0;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n\n.timeline-modal__close-bottom:hover {\n background-color: #555;\n}\n\n.timeline-modal__footer {\n border-top: 1px solid #ddd;\n padding: 16px 24px;\n background: #fff;\n text-align: center;\n flex: 0 0 auto;\n}\n\n.timeline-modal__close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 4px;\n color: #FFF;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.timeline-modal__close:hover {\n background-color: rgba(0, 0, 0, 0.8);\n transform: scale(1.1);\n}\n\n.timeline-modal__close::before {\n content: '×';\n}\n\n/ Fullscreen modals on small screens (medium and below) /\n@media (max-width: 768px) {\n .timeline-modal {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n top: 0;\n left: 0;\n transform: scale(0.95);\n border-radius: 0;\n }\n \n .timeline-modal.timeline-modal-show {\n transform: scale(1);\n }\n \n .timeline-modal__content {\n max-height: 100%;\n padding: 60px 20px 20px; / More top padding for close button /\n }\n \n .timeline-modal__close {\n top: 10px;\n right: 10px;\n width: 48px;\n height: 48px;\n font-size: 28px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.7);\n }\n \n .timeline-modal__close:hover {\n background-color: rgba(0, 0, 0, 0.9);\n }\n}\n\n/ Make timeline items clickable /\n.timeline__item {\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.timeline__item:hover .timeline__content {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/ Horizontal mode: keep hover shadow, but don't translate cards upward.\n This avoids node-1 clipping without impacting divider/dot layout. /\n.timeline--horizontal .timeline__item:hover .timeline__content {\n transform: none;\n}\n\n/ Error UI /\n.timeline__error {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 24px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n margin: 20px auto;\n max-width: 600px;\n background: #fff;\n}\n\n.timeline__error-icon {\n width: 200px;\n max-width: 100%;\n height: auto;\n margin-bottom: 24px;\n opacity: 0.8;\n}\n\n/ Hide timeline decorations when showing error UI inside the timeline container /\n.timeline.timeline--error::before,\n.timeline.timeline--error .timeline-divider,\n.timeline.timeline--error .timeline-nav-button {\n display: none !important;\n}\n.timeline.timeline--error .timeline__items,\n.timeline.timeline--error .timeline__wrap {\n display: none !important;\n}\n\n.timeline__error-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 16px;\n color: #d32f2f;\n}\n\n.timeline__error-message {\n font-size: 16px;\n line-height: 1.6;\n margin: 0 0 16px;\n color: #555;\n}\n\n.timeline__error-solution {\n font-size: 15px;\n line-height: 1.6;\n margin: 0 0 12px;\n color: #333;\n background-color: #fff3cd;\n border: 1px solid #ffc107;\n border-radius: 6px;\n padding: 12px 16px;\n}\n\n/ Responsive horizontal timeline scaling for smaller screens /\n/ Medium screens (tablets in landscape, small laptops) /\n@media (max-width: 1024px) {\n .timeline--horizontal {\n --timeline-h-node-width: 180px;\n --timeline-h-node-min-height: 160px;\n --timeline-h-image-size: 90px;\n }\n}\n\n/ Small screens (tablets in portrait, large phones in landscape) /\n@media (max-width: 768px) {\n .timeline--horizontal {\n --timeline-h-node-width: 160px;\n --timeline-h-node-min-height: 140px;\n --timeline-h-image-size: 80px;\n --timeline-h-title-font-size: 16px;\n --timeline-h-text-font-size: 10px;\n }\n / Hide summary text on smaller screens to save space /\n .timeline--horizontal .timeline__summary {\n display: none;\n }\n}\n\n/ Very small screens (phones in landscape) /\n@media (max-width: 640px) {\n .timeline--horizontal {\n --timeline-h-node-width: 140px;\n --timeline-h-node-min-height: 120px;\n --timeline-h-image-size: 70px;\n --timeline-h-title-font-size: 14px;\n padding: 0 40px;\n }\n / Keep summary hidden /\n .timeline--horizontal .timeline__summary {\n display: none;\n }\n}\n\n/ Extra small screens (small phones in landscape) /\n@media (max-width: 480px) {\n .timeline--horizontal {\n --timeline-h-node-width: 120px;\n --timeline-h-node-min-height: 100px;\n --timeline-h-image-size: 60px;\n --timeline-h-title-font-size: 13px;\n padding: 0 30px;\n }\n / Show only image and date - hide heading and summary /\n .timeline--horizontal .timeline__heading {\n font-size: 12px;\n margin: 0 0 4px;\n line-height: 1.2;\n -webkit-line-clamp: 2;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n .timeline--horizontal .timeline__summary {\n display: none;\n }\n}\n\n/ Ultra-compact mode for tiny screens /\n@media (max-width: 360px) {\n .timeline--horizontal {\n --timeline-h-node-width: 100px;\n --timeline-h-node-min-height: 90px;\n --timeline-h-image-size: 50px;\n --timeline-h-title-font-size: 11px;\n padding: 0 20px;\n }\n / Show only image and date /\n .timeline--horizontal .timeline__heading {\n font-size: 11px;\n -webkit-line-clamp: 1;\n }\n}\n\n/ Micro-screen responsive rules (progressive column hiding)\n 1) <=420px: hide summary (keep Image \| Date \| Heading)\n 2) <=360px: hide image (Date \| Heading/Summary)\n 3) <=320px: compact mode - show only date\n/\n@media (max-width: 420px) {\n .timeline--mobile .timeline__summary {\n display: none;\n }\n .timeline--mobile .timeline__content {\n grid-template-columns: 60px 70px 1fr;\n }\n\n / On this breakpoint the flexible content column becomes column 3 /\n .timeline--mobile .timeline__heading {\n grid-column: 3;\n }\n}\n\n@media (max-width: 360px) {\n .timeline--mobile .timeline__image {\n display: none;\n }\n .timeline--mobile .timeline__content {\n grid-template-columns: 70px 1fr;\n grid-template-rows: auto auto;\n }\n .timeline--mobile .timeline__date {\n grid-column: 1;\n grid-row: 1 / span 2;\n align-self: center;\n }\n .timeline--mobile .timeline__heading {\n grid-column: 2;\n grid-row: 1;\n }\n .timeline--mobile .timeline__summary {\n display: block;\n grid-column: 2;\n grid-row: 2;\n }\n}\n\n@media (max-width: 320px) {\n .timeline--mobile .timeline__heading,\n .timeline--mobile .timeline__summary,\n .timeline--mobile .timeline__image {\n display: none;\n }\n .timeline--mobile .timeline__content {\n grid-template-columns: 1fr;\n padding: 6px;\n }\n .timeline--mobile .timeline__date {\n grid-column: 1;\n grid-row: 1;\n align-self: center;\n }\n}\n\n.timeline__error-solution strong {\n color: #856404;\n}\n\n.timeline__error-details {\n font-size: 13px;\n line-height: 1.5;\n margin: 12px 0 0;\n color: #666;\n font-family: 'Courier New', monospace;\n background-color: #f5f5f5;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 8px 12px;\n max-width: 100%;\n overflow-x: auto;\n}\n\n.timeline__error-details strong {\n color: #333;\n}\n\n/ Final override: ensure vertical no-summary cards stay in a single row (after base .timeline__content rules) */\n@media (min-width: 768px) {\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) {\n display: grid !important;\n grid-template-columns: 100px 120px 1fr;\n column-gap: 16px;\n row-gap: 0;\n align-items: center;\n padding: 16px;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-image.no-summary,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__image)):not(:has(.timeline__summary:not(:empty))) {\n grid-template-columns: 120px 1fr;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__image,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__image {\n grid-column: 1;\n width: 100px;\n height: 100px;\n object-fit: cover;\n margin: 0;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__date,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__date {\n grid-column: 2;\n margin: 0;\n white-space: nowrap;\n align-self: center;\n }\n\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content.no-summary .timeline__heading,\n .timeline:not(.timeline--horizontal):not(.timeline--mobile) .timeline__content:has(.timeline__heading):not(:has(.timeline__summary:not(:empty))) .timeline__heading {\n grid-column: 3;\n margin: 0;\n align-self: center;\n line-height: 1.2;\n }\n}\n"]}