/* * Timeline stylesheet — v7 visual port. * * Class hooks (set by src/client/timeline.ts): * .timeline-viewport / .timeline-track / .timeline-axis * .timeline-dot .timeline-dot--work .timeline-dot--author * .timeline-dot--hagiography * .timeline-label (child of dot, hover-revealed) * .timeline-marker .timeline-marker__caption * .timeline-zoom .timeline-zoom__in .timeline-zoom__out * #star-container .star * * Visual treatment ported from /tmp/katalog-v7/katalog site v 7/timeline.html. */ /* ── Page chrome ─────────────────────────────────────────────────── */ body.timeline-page { font-family: 'Adobe Jenson Pro', 'Crimson Text', 'Times New Roman', serif; /* Layered: top backdrop gradient over the dark base. Drawn directly on so stars + dots (in higher z-index layers) paint on top. */ background: radial-gradient( ellipse at center top, rgba(15, 10, 45, 0.98) 0%, rgba(10, 7, 30, 0.85) 55%, rgba(5, 5, 10, 0) 100% ) top left / 100% 19vh no-repeat, linear-gradient(135deg, #0f0e1a 0%, #1a1525 50%, #0f0e1a 100%); background-attachment: fixed, fixed; color: #ffffff; margin: 0; height: 100vh; overflow: hidden; } body.timeline-page--saint { background-size: 100% 27vh, auto; } /* Saint info modal centered on screen */ #saintInfoModal, #timelineInfoModal { display: none; } #saintInfoModal.open, #timelineInfoModal.open { display: flex; align-items: center; justify-content: center; } #saintInfoModal .info-modal-content, #timelineInfoModal .info-modal-content { margin: 0; } /* ── Timeline legend ─────────────────────────────────────────────── */ .timeline-info-button { top: 1rem; right: 1rem; } .timeline-legend-content { max-width: 480px; padding: 28px 32px; max-height: 80vh; overflow-y: auto; } .timeline-legend-text { color: #e0dcff; font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; font-family: 'Adobe Jenson Pro', Georgia, serif; } .timeline-legend-text p { margin: 0 0 0.75rem 0; } .timeline-legend-text p:last-child { margin-bottom: 0; } .timeline-legend-heading { margin: 0 0 1rem 0; color: #ffffff; font-size: 1.5rem; text-align: center; letter-spacing: 2px; } .timeline-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .timeline-legend__row { display: flex; align-items: center; gap: 0.85rem; color: #e0dcff; font-size: 1.05rem; } .timeline-legend__dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); } .timeline-legend__dot--saint { width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.6); } .timeline-legend__dot--council { width: 22px; height: 22px; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; font-weight: 700; } .timeline-legend__label { color: #ffffff; } /* ── Stars ───────────────────────────────────────────────────────── */ #star-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .star { position: absolute; background: white; border-radius: 50%; opacity: 0.8; animation: twinkle var(--duration, 3s) infinite ease-in-out; will-change: transform, opacity; } @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Floating chrome (logo + title) sits over the timeline */ .timeline-chrome { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 500; pointer-events: none; text-align: center; } .timeline-logo-link { display: inline-block; pointer-events: auto; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; } .timeline-logo-link:hover { transform: translateY(-2px); filter: drop-shadow(0 0 24px rgba(184, 180, 255, 0.7)); } /* Translucent purple gradient backdrop behind the floating logo so it stays readable against stars and labels. Soft radial fade — no hard rectangle. */ .timeline-chrome--saint { pointer-events: auto; } .timeline-back { position: fixed; bottom: 2.25rem; left: 1rem; color: #ffffff; background: linear-gradient(135deg, #3732ad 0%, #4c76c8 100%); text-decoration: none; font-size: 0.95rem; padding: 0 1.1rem; height: 50px; display: inline-flex; align-items: center; border-radius: 25px; border: 1px solid #b8b4ff; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(107, 141, 214, 0.3); z-index: 600; } .timeline-back:hover { background: linear-gradient(135deg, #4c76c8 0%, #6b8dd6 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107, 141, 214, 0.5); } .timeline-logo { max-height: 130px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 18px rgba(124, 119, 255, 0.45)); } .timeline-title { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: #b8b4ff; } /* Saint-timeline header extras */ .saint-header { position: relative; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; padding: 1rem 1rem 0.5rem; text-align: center; pointer-events: auto; } .saint-header__hero { position: relative; display: block; width: min(1200px, 100%); min-height: 170px; margin: 0 auto; } .saint-description { margin: 0; padding: 0 0.75rem; color: #ffd8d2; font-size: 0.92rem; line-height: 1.45; text-align: left; max-width: 100%; min-width: 0; overflow-wrap: break-word; word-break: break-word; background: transparent; border: 0; box-shadow: none; } @media (min-width: 769px) { .timeline-page--saint .saint-header__hero { display: block; max-width: min(1200px, 96vw); min-height: 170px; overflow: visible; } .timeline-page--saint .saint-description--flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: clamp(1rem, 2.4vw, 2rem); width: 100%; margin: 0 auto; } .timeline-page--saint .saint-description__text { margin: 0; padding: 0; color: #ffd8d2; font-size: 0.92rem; line-height: 1.5; text-align: left; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .timeline-page--saint .saint-description__text--before { grid-column: 1; text-align: right; justify-self: end; } .timeline-page--saint .saint-description__text--after { grid-column: 3; text-align: left; } .timeline-page--saint .saint-portrait--flow { grid-column: 2; grid-row: 1; justify-self: center; width: 140px; height: 170px; border-radius: 6px; border: 2px solid #c0392b; object-fit: cover; box-shadow: 0 0 16px rgba(192, 57, 43, 0.55), 0 0 28px rgba(231, 76, 60, 0.3); margin: 0; } .timeline-page--saint .saint-description:not(.saint-description--flow) { text-align: center; } .timeline-page--saint .timeline-viewport { margin-top: -10vh; height: 90vh; } } @media (max-width: 768px) { .timeline-page--saint .saint-description--flow { display: block; } .timeline-page--saint .saint-description__text { display: none; } .timeline-page--saint .saint-portrait--flow { display: block; margin: 0 auto 0.75rem; } } .saint-portrait { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #c0392b; box-shadow: 0 0 16px rgba(192, 57, 43, 0.55), 0 0 28px rgba(231, 76, 60, 0.3); margin: 0 auto 0.2rem; display: block; } .saint-name { font-size: 1.6rem; font-weight: 600; color: #ffffff; margin: 0.1rem 0 0.3rem; text-align: center; } [hidden] { display: none; } /* ── Viewport + track ────────────────────────────────────────────── */ .timeline-viewport { position: relative; width: 100vw; /* Leave a 10vh band at the top for the chrome gradient + logo. */ margin-top: 10vh; height: 90vh; overflow-x: auto; overflow-y: hidden; background: transparent; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; z-index: 1; } .timeline-viewport:active { cursor: grabbing; } .timeline-track { position: relative; height: 100%; min-width: 100%; } /* ── Axis (SVG) ──────────────────────────────────────────────────── */ .timeline-axis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } /* The main axis line: thick, gradient, glowing. * SVG strokes can't easily carry a horizontal gradient without . * Use a thicker stroke + drop-shadow filter to approximate the v7 look. */ .timeline-axis__line { stroke: #6b8dd6; stroke-width: 6; filter: drop-shadow(0 0 8px rgba(107, 141, 214, 0.75)) drop-shadow(0 0 18px rgba(124, 119, 255, 0.5)); } .timeline-axis__tick-line { stroke: #b8b4ff; stroke-width: 1.5; opacity: 0.8; } .timeline-axis__tick-label { fill: #b8b4ff; font-family: inherit; font-size: 14px; font-weight: 500; text-anchor: middle; dominant-baseline: hanging; paint-order: stroke; stroke: rgba(0, 0, 0, 0.6); stroke-width: 2px; } .timeline-axis__tick--first .timeline-axis__tick-label, .timeline-axis__tick--current .timeline-axis__tick-label { font-size: 16px; font-weight: 600; fill: #ffffff; } .timeline-axis__tick--current .timeline-axis__tick-line { stroke: #ffffff; stroke-width: 2.5; opacity: 1; } .timeline-axis__tick--current .timeline-axis__tick-label { fill: #ffffff; font-weight: 600; } /* ── Dots ────────────────────────────────────────────────────────── */ /* * Per-dot color contract (set by JS via element.style.setProperty): * --dot-fill, --dot-border, --dot-glow, --dot-text * Fallbacks here keep dots visible if JS hasn't set them. */ .timeline-dot { position: absolute; box-sizing: border-box; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; z-index: 10; } /* Keep timeline dots anchored on axis center even though global button:hover styles elsewhere apply transform rules. Specific dot-type hovers can still override this later (work/cluster/council scaling rules). */ .timeline-dot:hover { transform: translate(-50%, -50%); } /* Standard work dot — color comes from category config */ .timeline-dot--work { width: 22px; height: 22px; background: var(--dot-fill, #7899e1); border: 2.5px solid var(--dot-border, #4d6db0); box-shadow: 0 0 12px var(--dot-glow, rgba(120, 153, 225, 0.6)), inset 0 0 6px rgba(255, 255, 255, 0.18); } .timeline-dot--work:hover { transform: translate(-50%, -50%) scale(1.12); border-color: #ffffff; box-shadow: 0 0 20px 6px var(--dot-glow, rgba(184, 180, 255, 1)), inset 0 0 8px rgba(255, 255, 255, 0.4); z-index: 20; } /* Cluster dot — like work dot but slightly larger, with a count badge */ .timeline-dot--cluster { width: 26px; height: 26px; background: var(--dot-fill, #7899e1); border: 2.5px solid var(--dot-border, #4d6db0); box-shadow: 0 0 14px var(--dot-glow, rgba(120, 153, 225, 0.7)), inset 0 0 6px rgba(255, 255, 255, 0.2); color: #ffffff; font-family: inherit; padding: 0; cursor: pointer; z-index: 12; display: inline-flex; align-items: center; justify-content: center; } .timeline-dot--cluster:hover { transform: translate(-50%, -50%) scale(1.1); border-color: #ffffff; box-shadow: 0 0 22px 6px var(--dot-glow, rgba(184, 180, 255, 1)), inset 0 0 8px rgba(255, 255, 255, 0.4); z-index: 25; } .timeline-dot__badge { font-size: 12px; font-weight: 700; line-height: 1; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); pointer-events: none; } /* Author dot: larger, red glow, hosts a portrait img */ .timeline-dot--author { width: 74px; height: 74px; background: #2a0808; border: 2px solid #c0392b; box-shadow: 0 0 10px rgba(192, 57, 43, 0.7), 0 0 22px rgba(231, 76, 60, 0.4); overflow: hidden; z-index: 15; } .timeline-dot--author:hover { border-color: #ff6b6b; box-shadow: 0 0 16px rgba(255, 107, 107, 0.9), 0 0 32px rgba(192, 57, 43, 0.6); } .timeline-dot--author img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none; } /* ── Permanent labels (children of dots) ───────────────────────────── */ .timeline-label { position: absolute; left: 50%; transform: translateX(calc(-50% + var(--label-shift, 0px))); background: linear-gradient(135deg, #1a1525 0%, #0f0e1a 100%); color: #ffffff; padding: 6px 12px; border-radius: 6px; font-size: 1.05rem; font-weight: 500; /* Labels are now clickable — hand off the click to the wrapping dot. */ pointer-events: auto; cursor: pointer; border: 1px solid var(--dot-border, #7c77ff); /* Drop shadow + glow matching the dot's own glow color. */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px var(--dot-glow, rgba(124, 119, 255, 0.45)); z-index: 30; /* Width must fit a ~22-char line (≈220px text + 24px padding + border). pre preserves \n inserted by wrapLabel() and disables auto-wrapping so the browser doesn't fragment lines further. */ max-width: 320px; white-space: pre; text-align: center; line-height: 1.2; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .timeline-label:hover { border-color: #ffffff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 8px var(--dot-glow, rgba(124, 119, 255, 0.5)); } .timeline-label__text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .timeline-label__connector { position: absolute; /* Counter-shift so the connector stays anchored on the dot's center even when the label box has been shifted to stay on screen. */ left: calc(50% - var(--label-shift, 0px)); width: 2px; background: var(--dot-fill, #7c77ff); box-shadow: 0 0 6px var(--dot-glow, rgba(124, 119, 255, 0.6)); transform: translateX(-50%); pointer-events: none; } /* Desktop placement: dynamic tiers driven by --label-tier custom property. * tier 0 = 16px above the dot * tier N = 16px + N*40px above the dot (--above class set when tier >= 0) * tier -N = 16px + N*40px below the dot (--below class set when tier < 0) * Connector spans the full distance from label edge to the dot. */ .timeline-label--above { bottom: calc(100% + 16px + var(--label-tier, 0) * 40px); } .timeline-label--above .timeline-label__connector { top: 100%; height: calc(16px + var(--label-tier, 0) * 40px); } .timeline-label--below { /* For below tiers, --label-tier is negative (-1, -2, ...). abs(tier) = -tier. Extra 15px push so below-labels don't crowd the year-tick labels under the axis. */ top: calc(100% + 31px + (-1 * var(--label-tier, -1) - 1) * 40px); } .timeline-label--below .timeline-label__connector { bottom: 100%; height: calc(31px + (-1 * var(--label-tier, -1) - 1) * 40px); } /* Hover lift — slightly raise the dot's label */ .timeline-dot:hover .timeline-label { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), 0 0 12px var(--dot-glow, rgba(124, 119, 255, 0.5)); } .timeline-dot--author .timeline-label { background: linear-gradient(135deg, #2a0808 0%, #1a0505 100%); color: #ff9999; border-color: #c0392b; } .timeline-dot--author .timeline-label__connector { background: #c0392b; box-shadow: 0 0 6px rgba(231, 76, 60, 0.7); } /* ── Cluster popover ───────────────────────────────────────────────── */ .timeline-popover { position: absolute; transform: translate(calc(-50% + var(--popover-shift, 0px)), calc(-100% - 24px + var(--popover-shift-y, 0px))); min-width: 240px; max-width: 340px; /* Bound by the admin "Max Vertical %" setting; cap at 320px regardless. */ max-height: min(320px, var(--timeline-max-vh, 60vh)); overflow-y: auto; background: linear-gradient(135deg, #2a2540 0%, #14101e 100%); color: #ffffff; border: 1px solid var(--dot-border, #7c77ff); border-radius: 8px; padding: 0.6rem 0.85rem 0.7rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 18px var(--dot-glow, rgba(124, 119, 255, 0.4)); z-index: 200; font-size: 1.1rem; pointer-events: auto; } .timeline-popover__close { position: absolute; top: 4px; right: 6px; background: transparent; border: 0; color: #b8b4ff; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px; } .timeline-popover__close:hover { color: #ffffff; } .timeline-popover__heading { font-weight: 600; /* Neutral — not tinted by category. */ color: #ffffff; margin: 0 1.6rem 0.4rem 0; font-size: 1.05rem; } .timeline-popover__list { list-style: none; margin: 0; padding: 0; } .timeline-popover__list li { padding: 0.25rem 0; border-top: 1px solid rgba(124, 119, 255, 0.18); line-height: 1.35; } .timeline-popover__list li:first-child { border-top: 0; } .timeline-popover__list a { /* Inherit the category color set inline on the parent

. */ color: inherit; text-decoration: underline; } .timeline-popover__list a:hover { filter: brightness(1.25); } .timeline-popover__meta { /* Soft neutral so it doesn't compete with the category-colored title. */ color: #9c98c4; font-size: 0.95rem; } .timeline-popover__category { list-style: none; margin: 0.5rem 0 0.15rem; padding: 0.1rem 0; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; /* Color comes from inline style set per category. */ border-bottom: 1px solid currentColor; } .timeline-popover__category:first-child { margin-top: 0; } /* ── Image markers ───────────────────────────────────────────────── */ .timeline-marker { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 14; pointer-events: none; } .timeline-marker img { width: 110px; height: 110px; object-fit: contain; opacity: 0.72; filter: drop-shadow(0 0 8px rgba(124, 119, 255, 0.4)); } .timeline-marker__caption { margin-top: 4px; font-size: 0.95rem; font-style: italic; color: #b8b4ff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .timeline-marker__year { margin-top: 10px; font-size: 0.95rem; font-weight: 600; color: #ffffff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* ── Zoom controls ───────────────────────────────────────────────── */ .timeline-zoom { position: fixed; bottom: 2.25rem; right: 1.25rem; display: flex; flex-direction: row; gap: 0.5rem; z-index: 200; } .timeline-zoom button { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #3732ad 0%, #4c76c8 100%); color: #ffffff; border: 1px solid #b8b4ff; font-family: inherit; font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(55, 50, 173, 0.4); padding: 0; } .timeline-zoom button:hover { background: linear-gradient(135deg, #4c76c8 0%, #6b8dd6 100%); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(107, 141, 214, 0.55); border-color: #ffffff; } .timeline-zoom button:active { transform: translateY(0); } /* ── Empty / no-script states ────────────────────────────────────── */ .timeline-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #b8b4ff; font-style: italic; font-size: 1.1rem; text-align: center; padding: 1rem 1.5rem; background: rgba(26, 21, 37, 0.6); border: 1px dashed #3732ad; border-radius: 8px; } .timeline-noscript { max-width: 720px; margin: 1rem auto; padding: 1rem; text-align: center; background: rgba(26, 21, 37, 0.7); border: 1px solid #3732ad; border-radius: 8px; color: #b8b4ff; } /* ── Saint dot (≥ saint_threshold works) ─────────────────────────── */ .timeline-dot--saint { width: 51px; height: 51px; background: var(--dot-fill, #c0392b); border: 2px solid var(--dot-border, #c0392b); box-shadow: 0 0 10px rgba(192, 57, 43, 0.7), 0 0 22px rgba(231, 76, 60, 0.4); z-index: 15; cursor: pointer; border-radius: 50%; } .timeline-dot--saint img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none; } .timeline-dot--saint .timeline-label { background: linear-gradient(135deg, #2a0808 0%, #1a0505 100%); color: #ff9999; border-color: #c0392b; } .timeline-dot--saint .timeline-label__connector { background: #c0392b; box-shadow: 0 0 6px rgba(231, 76, 60, 0.7); } .timeline-dot--saint:hover { border-color: #ff6b6b; box-shadow: 0 0 16px rgba(255, 107, 107, 0.9), 0 0 32px rgba(192, 57, 43, 0.6); } /* When a saint is also a cluster (merged with neighbors), keep saint silhouette but show the count badge from the cluster styling. */ .timeline-dot--saint.timeline-dot--cluster .timeline-dot__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1a0505; border: 1px solid #c0392b; display: inline-flex; align-items: center; justify-content: center; } /* ── Council dot (gold cross, fixed top tier desktop / right of axis mobile) ─── */ .timeline-dot--council { position: absolute; width: 30px; height: 30px; cursor: pointer; z-index: 200; transform: translate(-50%, -50%); transition: transform 0.3s ease, filter 0.3s ease; background: transparent; border: 0; border-radius: 0; } .timeline-dot--council::before, .timeline-dot--council::after { content: ''; position: absolute; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%); border: 2px solid #ffaa00; box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.3); box-sizing: border-box; } .timeline-dot--council::before { width: 30px; height: 7px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .timeline-dot--council::after { width: 7px; height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .timeline-dot--council:hover { filter: brightness(1.15); transform: translate(-50%, -50%) scale(1.1); } .timeline-council-label { /* Sit just above the gold cross. */ background: linear-gradient(135deg, #3a3320 0%, #2a2015 100%); color: #ffd700; border-color: #d4af37; bottom: calc(100% + 8px); top: auto; left: 50%; transform: translateX(-50%); } .timeline-council-label .timeline-label__connector { background: #d4af37; box-shadow: 0 0 6px rgba(255, 215, 0, 0.7); width: 2px; top: 100%; height: 12px; } /* ── Mobile: rotate to vertical layout ───────────────────────────── */ @media (max-width: 768px) { .timeline-back { top: auto; bottom: 2rem; left: 0.5rem; font-size: 0.85rem; padding: 0 0.95rem; height: 46px; } .timeline-logo { max-height: 70px; } .timeline-title { font-size: 0.78rem; letter-spacing: 3px; } .saint-portrait { width: 84px; height: 84px; } .saint-portrait--large { width: 140px; height: 170px; border-radius: 6px; border: 2px solid #c0392b; object-fit: cover; box-shadow: 0 0 12px rgba(192, 57, 43, 0.5); } .saint-name { font-size: 1.3rem; } .timeline-page--saint .timeline-viewport { margin-top: 2vh; height: 93vh; } .timeline-page--saint .saint-header { padding: 0.5rem 1rem 0.25rem; gap: 0.2rem; } .timeline-page--saint .saint-header__hero { display: flex; flex-direction: column; gap: 0.45rem; max-width: 94vw; min-height: 0; } .timeline-page--saint .saint-header__hero > .saint-portrait, .timeline-page--saint .saint-header__hero > .saint-portrait--large { position: static; float: none; shape-outside: none; left: auto; top: auto; transform: none; } .timeline-page--saint .saint-description--flow > .saint-portrait--flow { float: none; shape-outside: none; shape-margin: 0; position: static; left: auto; top: auto; transform: none; margin: 0 auto 0.45rem; display: block; } .timeline-page--saint .saint-description--flow::before, .timeline-page--saint .saint-description--flow::after { content: none; } .timeline-page--saint .saint-description { column-count: 1; column-gap: normal; text-align: center; font-size: 0.84rem; padding: 0; } body.timeline-page { background-size: 100% 100vh, auto; } body.timeline-page--saint { background-size: 100% 100vh, auto; } .timeline-viewport { width: 100vw; /* Flush below the 12vh gradient. */ margin-top: 12vh; height: 88vh; overflow-x: hidden; overflow-y: auto; } .timeline-track { width: 100%; height: auto; min-height: 100%; } .timeline-axis { width: 100%; } /* Vertical (mobile): labels appear ABOVE the dot by default; a few early-year dots flip BELOW (.timeline-label--mobile-below). */ .timeline-label, .timeline-label--above, .timeline-label--below, .timeline-label--mobile { bottom: auto; top: auto; left: 50%; transform: translateX(-50%); max-width: 60vw; margin: 0; bottom: calc(100% + 4px); } .timeline-label__connector { top: 100%; left: 50%; right: auto; bottom: auto; width: 2px; height: 8px; transform: translateX(-50%); } /* Mobile: flipped below the dot (used for very-early-year items). */ .timeline-label--mobile-below { bottom: auto; top: calc(100% + 4px); } .timeline-label--mobile-below .timeline-label__connector { top: auto; bottom: 100%; } /* Council label (mobile): sit to the right of the cross since the cross sits to the right of the axis. */ .timeline-council-label { bottom: auto; top: 50%; left: calc(100% + 12px); transform: translateY(-50%); } .timeline-council-label .timeline-label__connector { top: 50%; left: auto; right: 100%; width: 12px; height: 1px; transform: translateY(-50%); } .timeline-popover { /* Center on the viewport instead of next-to-dot. */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 32px); max-height: var(--timeline-max-vh, 60vh); width: 90vw; } /* Mobile tick labels: bigger and stroked black for legibility against the line. */ .timeline-axis__tick-label { font-size: 16px; } .timeline-axis__tick--first .timeline-axis__tick-label, .timeline-axis__tick--current .timeline-axis__tick-label { font-size: 18px; } .timeline-zoom { bottom: 2rem; right: 0.75rem; } .timeline-zoom button { width: 46px; height: 46px; font-size: 1.4rem; } .timeline-marker img { width: 70px; height: 70px; } } /* Very-small-screen cap so the saint portrait can't crowd out the timeline. */ /* ── Saint/Council bands (desktop) ───────────────────────────────── */ .timeline-dot--band { position: absolute; transform: translate(-50%, -50%); } .timeline-dot--saint-cluster { width: 70px; height: 70px; background: radial-gradient(circle at 35% 30%, #ff6b6b 0%, #c0392b 55%, #6b1a14 100%); border: 3px solid #ffb4a8; box-shadow: 0 0 14px rgba(192, 57, 43, 0.85), 0 0 28px rgba(231, 76, 60, 0.55); color: #fff; z-index: 16; appearance: none; -webkit-appearance: none; padding: 0; margin: 0; font: inherit; line-height: 1; } .timeline-dot--saint-cluster .timeline-dot__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); pointer-events: none; } .timeline-dot--council-cluster { width: 44px; height: 44px; background: transparent; border: 0; border-radius: 50%; z-index: 200; appearance: none; -webkit-appearance: none; padding: 0; margin: 0; font: inherit; line-height: 1; } .timeline-dot--council-cluster:hover { filter: brightness(1.15); transform: translate(-50%, -50%) scale(1.1); background: transparent; } .timeline-dot--council-cluster:focus-visible { outline: 2px solid #ffed4e; outline-offset: 4px; } .timeline-dot--council-cluster::before, .timeline-dot--council-cluster::after { content: ''; position: absolute; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%); border: 2px solid #ffaa00; box-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 22px rgba(255, 215, 0, 0.4); box-sizing: border-box; } .timeline-dot--council-cluster::before { width: 44px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .timeline-dot--council-cluster::after { width: 10px; height: 44px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .timeline-dot--council-cluster .timeline-dot__badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #1a1505; border: 1px solid #d4af37; color: #ffd700; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } /* Labels on band dots (saints/councils): sit just above (saints) or below (councils via --below modifier) the dot, ignore the work-tier offsets. */ .timeline-dot--band .timeline-label { position: absolute; left: 50%; transform: translateX(calc(-50% + var(--label-shift, 0px))); bottom: calc(100% + 8px); top: auto; } .timeline-dot--band .timeline-label__connector { display: none; } .timeline-dot--band .timeline-label--below { bottom: auto; top: calc(100% + 8px); } /* Council band labels: gold tint matching the council cross. */ .timeline-dot--council .timeline-label { background: linear-gradient(135deg, #3a3320 0%, #2a2015 100%); color: #ffd700; border-color: #d4af37; } .timeline-dot--council-cluster .timeline-label { background: linear-gradient(135deg, #3a3320 0%, #2a2015 100%); color: #ffd700; border-color: #d4af37; } /* ── Mobile rails (councils LEFT, saints RIGHT) ──────────────────── */ .timeline-mobile-rail { position: fixed; top: 12vh; bottom: 0; width: 56px; z-index: 25; pointer-events: none; overflow: visible; } .timeline-mobile-rail--councils { left: 8px; } .timeline-mobile-rail--saints { right: 8px; } .timeline-mobile-rail .timeline-dot--rail { pointer-events: auto; } .timeline-mobile-rail .timeline-dot--saint { width: 44px; height: 44px; } .timeline-mobile-rail .timeline-dot--saint-cluster { width: 52px; height: 52px; } .timeline-mobile-rail .timeline-dot--council, .timeline-mobile-rail .timeline-dot--council-cluster { width: 36px; height: 36px; } .timeline-mobile-rail .timeline-dot--council::before { width: 36px; height: 8px; } .timeline-mobile-rail .timeline-dot--council::after { width: 8px; height: 36px; } /* No labels in the mobile rails. */ .timeline-mobile-rail .timeline-label { display: none; } /* ── Mobile two-step nav popup ──────────────────────────────────── */ .timeline-mobile-nav-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; padding: 14px 22px; border-radius: 10px; font-size: 1.05rem; font-weight: 600; text-align: center; max-width: 80vw; cursor: pointer; user-select: none; } .timeline-mobile-nav-popup--council { background: linear-gradient(135deg, #3a3320 0%, #1a1505 100%); color: #ffd700; border: 2px solid #d4af37; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 215, 0, 0.35); } .timeline-mobile-nav-popup--saint { background: linear-gradient(135deg, #3a1818 0%, #1a0505 100%); color: #e74c3c; border: 2px solid #c0392b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(231, 76, 60, 0.4); }