/* timeline.css — the vertical scroll-spine for /timeline.html. * * Timeline-ONLY rules. Everything else — the house tokens (--ink, --accent, * --rule …), the masthead, the theme toggle, the base body type — comes from * site.css, which this page links first. So these rules just reference the * shared tokens and inherit the light/dark flip for free. * * The page overrides site.css's narrow --measure column: the timeline wants * width for its two alternating card columns, so body goes full width and a * .wrap re-centres everything on a generous measure. */ /* Break out of the skinny reading column site.css sets on . */ body { max-width: none; margin: 0; padding: 0; } .wrap { max-width: 1180px; margin-inline: auto; padding: 2.5rem 2rem 5rem; } /* --- Title block ---------------------------------------------------------- */ .title-block { text-align: center; margin: 0.5rem 0 2.4rem; padding-bottom: 1.2rem; border-bottom: 3px double var(--masthead-rule); } .title-block h1 { font-family: var(--font-serif); font-weight: 500; font-size: 2.7rem; line-height: 1.04; letter-spacing: -0.4px; color: var(--ink); margin: 0 0 0.5rem; } .title-block .standfirst { max-width: 40rem; margin: 0.6rem auto 0; color: var(--deck); font-size: 1.12rem; } /* --- The spine ------------------------------------------------------------ */ .timeline { position: relative; margin: 3rem auto 0; } .timeline::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 2px; background: var(--rule); } .node { position: relative; width: 50%; padding: 0 3rem; margin: 0.4rem 0; } .node:nth-child(odd) { left: 0; text-align: right; } .node:nth-child(even) { left: 50%; text-align: left; } /* Dots + status pills + the "you are here" chip are all one accent colour (navy in light, plum in dark); status is carried by the pill's word. */ .dot { position: absolute; top: 1.55rem; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); z-index: 2; } .node:nth-child(odd) .dot { right: -7.5px; } .node:nth-child(even) .dot { left: -7.5px; } .is-upcoming .dot { background: var(--paper); } /* future = a hollow accent ring */ .card { display: inline-block; text-align: left; max-width: 30rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 1.1rem 1.3rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .node:nth-child(odd) .card { margin-left: auto; } .kicker { font-family: var(--font-sans); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem; } .card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.24rem; line-height: 1.18; color: var(--ink-2); margin: 0 0 0.5rem; } .card p { margin: 0; font-size: 0.98rem; color: var(--body); line-height: 1.55; } .pill { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.7rem; color: var(--accent); border: 1px solid currentColor; } /* Era + "you are here" markers straddle the spine, centred, full width. */ .marker { position: relative; width: 100%; text-align: center; margin: 2.2rem 0 1.4rem; z-index: 3; } .marker span { display: inline-block; background: var(--paper); padding: 0.3rem 1rem; font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--rule); border-radius: 999px; } .marker.here span { color: var(--paper); background: var(--accent); border-color: var(--accent); } .tracks { max-width: 40rem; margin: 3.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--rule); text-align: center; color: var(--muted); font-size: 0.95rem; } /* --- Scroll-reveal — progressive enhancement ----------------------------- Cards are visible by default; only when the head script adds `.js` to the root do we hide-then-reveal on scroll. No JS (blocked/off) → all visible. */ .js .node, .js .marker { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .js .node.in, .js .marker.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .node, .js .marker { opacity: 1; transform: none; transition: none; } } /* --- Mobile: spine to the left, single column ----------------------------- */ @media (max-width: 48rem) { .wrap { padding: 2rem 1.1rem 4rem; } .title-block h1 { font-size: 2rem; } .timeline::before { left: 9px; transform: none; } .node, .node:nth-child(odd), .node:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 0 2.4rem; margin: 1.3rem 0; } .node:nth-child(odd) .dot, .node:nth-child(even) .dot { left: 2.5px; right: auto; } .node:nth-child(odd) .card { margin-left: 0; } .card { max-width: 100%; } .marker { text-align: left; } }