/* ========================================================= Journey V2 — preview-only, style-only redesign of the Journey page in the approved Home V2 / About V2 / Work V2 / Project Detail V2 / Experience V2 / Education V2 / Publications V2 / Contact V2 visual language. Loaded ONLY by templates/main/journey_v2.html (served at /journey-v2/), alongside static/css/home_v2.css (unmodified, loaded first in that template's for the shared tokens/reset/nav/ footer/preview-flag classes — see home_v2.css for --v2-navy, --v2-orange, --v2-muted, --v2-border, --v2-border-strong, --v2-container, --v2-gutter, --v2-section-padding). Every selector below is prefixed .journey-v2-*, so this file cannot affect Home V2, About V2, Work V2, Project Detail V2, Experience V2, Education V2, Publications V2, Contact V2, or any other page even if it were ever accidentally linked from one. static/css/journey.css (the live /journey/ page's stylesheet) is not touched or loaded here. Three selectors below are NOT prefixed .journey-v2-* on purpose: .journey-section (the page root, required verbatim by static/js/journey.js's document.querySelector(".journey-section")), .journey-modal-dialog, and .journey-panel-title (also queried directly by journey.js). They're only ever styled here in combination with a .journey-v2-* class on the very same element (e.g. ".journey-v2-modal-dialog.journey-modal-dialog"), so they still can't leak onto any other page. ========================================================= */ /* ---------- Hero ---------- */ .journey-v2-hero { padding-top: 64px; padding-bottom: 24px; } .journey-v2-hero-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; color: var(--v2-navy); margin: 16px 0 18px; max-width: 16ch; } .journey-v2-hero-heading-accent { color: var(--v2-orange); } .journey-v2-hero-subtitle { font-size: 17px; line-height: 1.6; color: var(--v2-muted); max-width: 60ch; margin: 0 0 16px; } .journey-v2-hero-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--v2-muted); margin: 0; } .journey-v2-hero-hint-icon { flex-shrink: 0; color: var(--v2-orange); } @media (min-width: 900px) { .journey-v2-hero { padding-top: 88px; padding-bottom: 32px; } .journey-v2-hero-heading { font-size: 48px; max-width: 18ch; } } /* ---------- Map ---------- */ .journey-v2-map-section { padding-bottom: 56px; } .journey-v2-map { position: relative; width: 100%; max-width: 1160px; aspect-ratio: 2 / 1; margin: 4px auto 48px; } .journey-v2-map-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .journey-v2-connector { fill: none; stroke: var(--v2-navy); stroke-width: 1.25; stroke-linecap: round; opacity: 0.22; } .journey-v2-arrowhead { fill: var(--v2-navy); opacity: 0.45; } .journey-v2-arrowhead-accent { fill: var(--v2-orange); } .journey-v2-connector--wave { stroke-width: 1.1; opacity: 0.28; } .journey-v2-connector--dashed { stroke-dasharray: 5 5; opacity: 0.22; } .journey-v2-connector--accent { stroke: var(--v2-orange); stroke-width: 1.5; opacity: 0.75; } .journey-v2-connector--drop { stroke-width: 1.25; opacity: 0.26; } .journey-v2-connector--row { stroke-width: 1.25; opacity: 0.28; } .journey-v2-connector--continuation { stroke: var(--v2-orange); stroke-width: 1.25; stroke-dasharray: 1 5; opacity: 0.55; } /* ---------- Nodes ---------- */ .journey-v2-node { --media-size: 75px; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 128px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; opacity: 0; transition: opacity 450ms ease, transform 200ms ease; } [data-journey-map].is-visible .journey-v2-node { opacity: 1; } .journey-v2-node--primary { --media-size: 86px; } .journey-v2-node--hero { --media-size: 97px; } .journey-v2-node--primary .journey-v2-node-label, .journey-v2-node--hero .journey-v2-node-label { font-size: 13.5px; } .journey-v2-node:nth-of-type(1) { transition-delay: 30ms; } .journey-v2-node:nth-of-type(2) { transition-delay: 90ms; } .journey-v2-node:nth-of-type(3) { transition-delay: 150ms; } .journey-v2-node:nth-of-type(4) { transition-delay: 210ms; } .journey-v2-node:nth-of-type(5) { transition-delay: 270ms; } .journey-v2-node:nth-of-type(6) { transition-delay: 330ms; } .journey-v2-node:nth-of-type(7) { transition-delay: 390ms; } .journey-v2-node:nth-of-type(8) { transition-delay: 450ms; } .journey-v2-node:nth-of-type(9) { transition-delay: 510ms; } .journey-v2-node:nth-of-type(10) { transition-delay: 570ms; } .journey-v2-node:nth-of-type(11) { transition-delay: 630ms; } .journey-v2-node-media { position: relative; width: var(--media-size); height: var(--media-size); border-radius: 50%; background: #ffffff; border: 1.5px solid var(--v2-border); box-shadow: 0 1px 2px rgba(27, 42, 74, 0.05); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .journey-v2-node-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .journey-v2-node-media svg { width: 54%; height: 54%; display: block; } .journey-v2-node-badge { position: absolute; top: -4px; right: -2px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px; background: var(--v2-orange); color: #ffffff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #ffffff; transition: background-color 0.15s ease; } .journey-v2-node-caption { display: flex; flex-direction: column; align-items: center; gap: 3px; } .journey-v2-node-year { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--v2-orange); } .journey-v2-node-label { font-size: 13px; font-weight: 700; color: var(--v2-navy); text-align: center; line-height: 1.3; } /* Kept out of the desktop map (same choice as the old design) — it clutters a layout meant to read at a glance. Resurfaces in the mobile stacked list and always in the modal. */ .journey-v2-node-teaser { display: none; } .journey-v2-node:hover, .journey-v2-node:focus-visible { transform: translate(-50%, calc(-50% - 2px)); } .journey-v2-node:hover .journey-v2-node-media, .journey-v2-node:focus-visible .journey-v2-node-media { border-color: var(--v2-orange); box-shadow: 0 3px 8px rgba(232, 103, 44, 0.12); } .journey-v2-node:hover .journey-v2-node-badge, .journey-v2-node:focus-visible .journey-v2-node-badge { background: #c8551f; } .journey-v2-node:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 6px; border-radius: 8px; } /* Currently-open chapter — set by static/js/journey_v2.js */ .journey-v2-node.is-active .journey-v2-node-media { border-color: var(--v2-orange); box-shadow: 0 0 0 3px rgba(232, 103, 44, 0.14); } .journey-v2-node.is-active .journey-v2-node-label { color: var(--v2-orange); } @media (prefers-reduced-motion: reduce) { .journey-v2-node { transition: none; opacity: 1; } .journey-v2-node-media { transition: none; } } /* ---------- Mobile: stacked list ---------- */ @media (max-width: 767px) { .journey-v2-map { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column; gap: 20px; margin-block: 32px; } .journey-v2-map-connectors { display: none; } .journey-v2-node { position: static; transform: none; width: 100%; flex-direction: row; align-items: center; gap: 14px; text-align: start; padding-block: 12px; border-bottom: 1px solid var(--v2-border); } .journey-v2-node:hover, .journey-v2-node:focus-visible { transform: none; } .journey-v2-node:last-of-type { border-bottom: none; } .journey-v2-node, .journey-v2-node--primary, .journey-v2-node--hero { --media-size: 57px; } .journey-v2-node-media { flex-shrink: 0; } .journey-v2-node-badge { top: -3px; right: auto; left: -3px; } .journey-v2-node-caption { align-items: flex-start; } .journey-v2-node-label, .journey-v2-node--primary .journey-v2-node-label, .journey-v2-node--hero .journey-v2-node-label { text-align: start; font-size: 14.5px; } .journey-v2-node-year { text-align: start; } .journey-v2-node-teaser { display: -webkit-box; text-align: start; font-size: 10.5px; font-weight: 400; color: var(--v2-muted); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } } @media (min-width: 768px) and (max-width: 1023px) { .journey-v2-node { --media-size: 62px; width: 100px; gap: 6px; } .journey-v2-node--primary { --media-size: 73px; } .journey-v2-node--hero { --media-size: 81px; } .journey-v2-node-label { font-size: 11.5px; } } /* ---------- Closing quote ---------- Requalified as p.journey-v2-quote (class + type selector) so it ties home_v2.css's `.home-v2 p { margin: 0; }` on specificity (0,1,1) and wins via source order (this stylesheet loads after home_v2.css) — a bare `.journey-v2-quote { margin: 0 auto 8px }` (0,1,0) was silently losing that tie, so the auto side-margins never applied and the paragraph sat flush left instead of centered beneath the map. */ p.journey-v2-quote { max-width: 620px; margin: 20px auto 8px; padding-inline: 20px; text-align: center; font-size: 16px; font-style: italic; line-height: 1.6; color: var(--v2-muted); } .journey-v2-quote-mark { font-style: normal; color: var(--v2-orange); font-size: 19px; line-height: 0; vertical-align: -2px; } /* ---------- Modal ---------- */ .journey-v2-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .journey-v2-modal[hidden] { display: none; } .journey-v2-modal-overlay { position: absolute; inset: 0; background: rgba(27, 42, 74, 0.45); } .journey-v2-modal-dialog.journey-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: min(82vh, 720px); display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--v2-border); border-radius: 12px; box-shadow: 0 24px 60px rgba(27, 42, 74, 0.16); animation: journey-v2-modal-in 200ms ease; } @keyframes journey-v2-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .journey-v2-modal-dialog.journey-modal-dialog { animation: none; } } .journey-v2-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--v2-border); background: #ffffff; color: var(--v2-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .journey-v2-modal-close:hover { color: var(--v2-orange); border-color: var(--v2-orange); } .journey-v2-modal-body { overflow-y: auto; padding: 44px 32px 28px; } .journey-v2-panel[hidden] { display: none; } .journey-v2-panel-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .journey-v2-panel-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: #ffffff; border: 1.5px solid var(--v2-border); display: flex; align-items: center; justify-content: center; } .journey-v2-panel-icon svg { width: 54%; height: 54%; display: block; } .journey-v2-panel-index { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--v2-orange); margin: 0 0 4px; } .journey-v2-panel-title.journey-panel-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 25px; line-height: 1.25; color: var(--v2-navy); margin: 0; } .journey-v2-narrative { color: var(--v2-muted); font-size: 15px; line-height: 1.65; display: flex; flex-direction: column; gap: 14px; } .journey-v2-narrative blockquote.quote-block { margin-block: 6px; padding-inline-start: 14px; border-inline-start: 2px solid var(--v2-orange); color: var(--v2-navy); font-size: 16px; font-weight: 500; line-height: 1.45; } .journey-v2-transition { margin-top: 18px; color: var(--v2-muted); font-size: 13.5px; font-style: italic; } .journey-v2-transition::before { content: "→ "; color: var(--v2-orange); font-style: normal; } /* ---------- Chapter-specific supporting content ---------- */ .journey-v2-panel-milestones, .journey-v2-stack { margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; } .journey-v2-panel-milestones li, .journey-v2-stack li { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--v2-navy); background: #fafafa; border-inline-start: 3px solid var(--v2-orange); } .journey-v2-pipeline { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; } .journey-v2-pipeline li { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--v2-border); background: #fafafa; font-size: 13px; font-weight: 500; color: var(--v2-navy); } .journey-v2-pipeline li:not(:last-child)::after { content: "→"; margin-inline-start: 8px; color: var(--v2-orange); } .journey-v2-inputs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; } .journey-v2-inputs li { font-size: 12px; color: var(--v2-muted); padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--v2-border); } .journey-v2-dual-track { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 480px) { .journey-v2-dual-track { grid-template-columns: 1fr; } } .journey-v2-track-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--v2-orange); margin-bottom: 8px; } .journey-v2-track ol { display: flex; flex-direction: column; gap: 4px; } .journey-v2-track li { font-size: 13px; color: var(--v2-muted); } a.journey-v2-research-link { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--v2-orange); } a.journey-v2-research-link:hover { text-decoration: underline; } .journey-v2-badge { display: inline-block; margin-top: 14px; padding: 8px 18px; border-radius: 9999px; background: var(--v2-orange); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .journey-v2-convergence-nodes { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .journey-v2-convergence-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .journey-v2-convergence-label { font-size: 14px; color: var(--v2-muted); } .journey-v2-convergence-row .journey-v2-convergence-label:first-of-type { text-align: end; } .journey-v2-convergence-dash { color: var(--v2-muted); font-size: 13px; } .journey-v2-thinking-list { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; } .journey-v2-thinking-list li { font-size: 15px; font-weight: 500; color: var(--v2-navy); padding-inline-start: 14px; border-inline-start: 3px solid var(--v2-orange); } .journey-v2-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; } .journey-v2-tag { font-size: 12px; font-weight: 600; color: var(--v2-muted); background: #fafafa; border: 1px solid var(--v2-border); border-radius: 6px; padding: 3px 9px; } .journey-v2-closing-statement { margin-top: 20px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--v2-navy); } .journey-v2-next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } a.journey-v2-btn { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 11px 22px; border-radius: 9999px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } a.journey-v2-btn--primary { background: var(--v2-navy); color: #ffffff; } a.journey-v2-btn--primary:hover { background: #142038; } a.journey-v2-btn--secondary { background: transparent; border: 1px solid var(--v2-border-strong); color: var(--v2-navy); } a.journey-v2-btn--secondary:hover { border-color: var(--v2-orange); color: var(--v2-orange); } /* ---------- Modal prev/next footer ---------- */ .journey-v2-modal-nav { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 32px; border-top: 1px solid var(--v2-border); } .journey-v2-modal-prev, .journey-v2-modal-next { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--v2-border); background: none; color: var(--v2-navy); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .journey-v2-modal-prev:hover, .journey-v2-modal-next:hover { border-color: var(--v2-orange); color: var(--v2-orange); } .journey-v2-modal-prev:disabled, .journey-v2-modal-next:disabled { opacity: 0.35; cursor: not-allowed; } .journey-v2-modal-position { font-size: 12px; color: var(--v2-muted); } @media (max-width: 480px) { .journey-v2-modal { padding: 0; align-items: flex-end; } .journey-v2-modal-dialog.journey-modal-dialog { max-width: none; max-height: 90vh; border-radius: 12px 12px 0 0; } .journey-v2-modal-body { padding: 32px 20px 20px; } .journey-v2-modal-nav { padding: 14px 20px; } } /* ---------- Hero: stack on narrow screens ---------- */ @media (max-width: 899px) { .journey-v2-hero-heading { max-width: none; } }