/* ========================================================== SUNDERING TIMELINE — CLEAN CSS PLUG (Lorewalker / Rhome) File: /assets/css/rhome/sundering-timeline.css Purpose: One-page, anchor-driven timeline (NO TOC / NO SIDE NAV) Notes: 3px corners, corrected alignment (rail as spine, not scar) ========================================================== */ /* Attach to the page with: */ body.lw-site.sundering-page{ /* --- Core palette (fits Lorewalker gothic/arcano-steampunk) --- */ --st-void: #0b0712; --st-ink: #e8ddcc; --st-muted: rgba(232, 221, 204, 0.72); --st-parch: #d9cab3; /* Arcane Parchment */ --st-iron: #3e3a45; /* Charcoal Blue */ --st-deep: #2d1b3f; /* Deep Void Purple */ --st-amethyst: #a452ff; /* Electric Amethyst */ --st-lavender: #b38ddb; /* Crystal Lavender */ --st-flame: #d580ff; /* Vivid Violet Flame */ /* --- Surfaces / lines --- */ --st-surface: rgba(12, 7, 18, 0.62); --st-card: rgba(16, 10, 24, 0.70); --st-line: rgba(217, 202, 179, 0.18); --st-line-strong: rgba(217, 202, 179, 0.28); /* --- Effects --- */ --st-shadow: 0 14px 40px rgba(0,0,0,0.55); --st-shadow-soft: 0 10px 26px rgba(0,0,0,0.35); --st-glow: 0 0 0.9rem rgba(164, 82, 255, 0.28); --st-glow-strong: 0 0 1.2rem rgba(213, 128, 255, 0.32); /* --- Geometry (3px corners) --- */ --st-radius: 3px; --st-radius-sm: 3px; --st-gap: clamp(14px, 1.4vw, 20px); --st-max: 1080px; /* --- Timeline geometry --- */ --st-rail-x: 22px; /* rail offset inside .timeline box */ --st-dot: 10px; --st-dot-ring: 18px; --st-year-w: 108px; --st-year-h: 34px; /* --- Alignment correction --- */ --st-gutter: 24px; /* the breathing space between rail and content */ color: var(--st-ink); } /* ---------- Page shell ---------- */ body.lw-site.sundering-page .sundering-wrap{ max-width: var(--st-max); margin: 0 auto; padding: clamp(18px, 2.4vw, 34px) clamp(16px, 2.2vw, 28px) 64px; /* Subtle arcane parchment + void */ background: radial-gradient(1400px 900px at 10% -10%, rgba(164,82,255,0.16), transparent 55%), radial-gradient(900px 600px at 90% 0%, rgba(213,128,255,0.11), transparent 58%), radial-gradient(1200px 900px at 50% 120%, rgba(217,202,179,0.10), transparent 55%); border-radius: var(--st-radius); } /* Headline + kicker */ body.lw-site.sundering-page .sundering-hero{ padding: clamp(18px, 2vw, 26px); background: linear-gradient(180deg, rgba(16,10,24,0.74), rgba(11,7,18,0.52)); border: 1px solid var(--st-line); border-radius: var(--st-radius); box-shadow: var(--st-shadow-soft); } body.lw-site.sundering-page .sundering-hero h1{ margin: 0 0 6px; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(0,0,0,0.55); } body.lw-site.sundering-page .sundering-hero .kicker{ margin: 0; color: var(--st-muted); max-width: 76ch; } body.lw-site.sundering-page .sundering-hero .quote{ margin-top: 14px; padding: 12px 14px; border-left: 3px solid rgba(164,82,255,0.55); background: rgba(0,0,0,0.22); border-radius: var(--st-radius-sm); box-shadow: inset 0 0 0 1px rgba(217,202,179,0.10); } body.lw-site.sundering-page .sundering-hero .quote p{ margin: 0; color: rgba(232,221,204,0.88); } /* ---------- Timeline rail + corrected layout ---------- */ body.lw-site.sundering-page .timeline{ position: relative; padding: 10px 0 0; margin-top: var(--st-gap); /* KEY FIX: shove the entire timeline content right so the rail sits in a gutter */ padding-left: calc(var(--st-rail-x) + var(--st-gutter)); } /* Rail stays where it is (inside .timeline) */ body.lw-site.sundering-page .timeline::before{ content: ""; position: absolute; left: var(--st-rail-x); top: 0; bottom: 0; width: 2px; background: linear-gradient( 180deg, rgba(164,82,255,0.0), rgba(164,82,255,0.35), rgba(217,202,179,0.24), rgba(213,128,255,0.35), rgba(213,128,255,0.0) ); filter: drop-shadow(0 0 10px rgba(164,82,255,0.18)); } /* ---------- Era blocks ---------- */ body.lw-site.sundering-page .era{ margin: 0 0 18px; padding: 14px 14px 2px; border-radius: var(--st-radius); border: 1px solid var(--st-line); background: rgba(16,10,24,0.52); box-shadow: var(--st-shadow-soft); } body.lw-site.sundering-page .era h2{ margin: 0 0 10px; font-size: 1.12rem; letter-spacing: 0.3px; } body.lw-site.sundering-page .era .era-sub{ margin: -6px 0 12px; color: var(--st-muted); font-size: 0.96rem; } body.lw-site.sundering-page .era hr{ border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--st-line-strong), transparent); margin: 10px 0 6px; } /* ---------- Entries ---------- */ body.lw-site.sundering-page .entry{ position: relative; display: grid; grid-template-columns: var(--st-year-w) 1fr; gap: 14px; padding: 12px 12px 12px 0; margin: 10px 0 14px; } @media (max-width: 540px){ body.lw-site.sundering-page .entry{ grid-template-columns: 1fr; padding-left: 0; } } /* Dot + ring aligned to the rail. Because .timeline content is pushed right, the dot must “reach left” into the gutter. */ body.lw-site.sundering-page .entry::before{ content: ""; position: absolute; left: calc((0px - var(--st-gutter)) + var(--st-rail-x) - (var(--st-dot) / 2)); top: 20px; width: var(--st-dot); height: var(--st-dot); border-radius: 999px; background: rgba(217,202,179,0.88); box-shadow: var(--st-glow); } body.lw-site.sundering-page .entry::after{ content: ""; position: absolute; left: calc((0px - var(--st-gutter)) + var(--st-rail-x) - (var(--st-dot-ring) / 2)); top: calc(20px - ((var(--st-dot-ring) - var(--st-dot)) / 2)); width: var(--st-dot-ring); height: var(--st-dot-ring); border-radius: 999px; background: rgba(164,82,255,0.10); box-shadow: inset 0 0 0 1px rgba(164,82,255,0.30), var(--st-glow-strong); } /* Year pill */ body.lw-site.sundering-page .year{ display: inline-flex; align-items: center; justify-content: center; height: var(--st-year-h); padding: 0 10px; border-radius: 3px; /* ← FIX: match everything else */ border: 1px solid rgba(217,202,179,0.20); background: linear-gradient( 180deg, rgba(0,0,0,0.25), rgba(16,10,24,0.55) ); box-shadow: inset 0 0 0 1px rgba(164,82,255,0.12); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; color: rgba(232,221,204,0.92); justify-self: start; } /* Content card */ body.lw-site.sundering-page .entry .card{ border-radius: var(--st-radius); border: 1px solid var(--st-line); background: linear-gradient(180deg, rgba(16,10,24,0.70), rgba(11,7,18,0.64)); padding: 12px 14px; box-shadow: var(--st-shadow-soft); } body.lw-site.sundering-page .entry .card p{ margin: 0 0 10px; color: rgba(232,221,204,0.88); line-height: 1.55; } body.lw-site.sundering-page .entry .card p:last-child{ margin-bottom: 0; } /* Emphasis callout */ body.lw-site.sundering-page .entry .card .emphasis{ padding: 10px 12px; margin: 10px 0; border-left: 3px solid rgba(213,128,255,0.58); background: rgba(213,128,255,0.08); border-radius: var(--st-radius-sm); } /* ---------- Special event variants ---------- */ body.lw-site.sundering-page .entry.is-keystone::before{ background: rgba(213,128,255,0.95); box-shadow: 0 0 18px rgba(213,128,255,0.35); } body.lw-site.sundering-page .entry.is-keystone::after{ background: rgba(213,128,255,0.18); box-shadow: inset 0 0 0 1px rgba(213,128,255,0.45), 0 0 22px rgba(213,128,255,0.28); } body.lw-site.sundering-page .entry.is-keystone .year{ border-color: rgba(213,128,255,0.35); box-shadow: inset 0 0 0 1px rgba(213,128,255,0.22), 0 0 18px rgba(213,128,255,0.18); } body.lw-site.sundering-page .entry.is-keystone .card{ border-color: rgba(213,128,255,0.26); background: linear-gradient(180deg, rgba(213,128,255,0.10), rgba(11,7,18,0.68)); } body.lw-site.sundering-page .entry.is-war::before{ background: rgba(217,202,179,0.95); box-shadow: 0 0 16px rgba(217,202,179,0.20); } body.lw-site.sundering-page .entry.is-war .card{ border-color: rgba(217,202,179,0.22); background: linear-gradient(180deg, rgba(217,202,179,0.06), rgba(11,7,18,0.66)); } body.lw-site.sundering-page .entry.is-war .card .emphasis{ border-left-color: rgba(217,202,179,0.65); background: rgba(217,202,179,0.08); } /* ---------- Anchor targeting ---------- */ body.lw-site.sundering-page .era, body.lw-site.sundering-page .entry{ scroll-margin-top: 90px; } body.lw-site.sundering-page :target{ outline: none; } body.lw-site.sundering-page .entry:target .card, body.lw-site.sundering-page .era:target{ box-shadow: var(--st-shadow), var(--st-glow); border-color: rgba(164,82,255,0.35); } /* ---------- Utility bits ---------- */ body.lw-site.sundering-page .pill{ display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(217,202,179,0.18); background: rgba(0,0,0,0.18); color: rgba(232,221,204,0.86); } body.lw-site.sundering-page .divider{ height: 1px; background: linear-gradient(90deg, transparent, var(--st-line-strong), transparent); margin: 18px 0; } body.lw-site.sundering-page a:focus-visible{ outline: 2px solid rgba(164,82,255,0.65); outline-offset: 3px; border-radius: 3px; }