/* ============================================================ ROADMAP — dark, "developery" terminal. Horizontal-scrolling development log. Sans (Archivo) + mono (IBM Plex Mono), phosphor on obsidian. No serif, no gilt. Depends on tokens/base/chrome. ============================================================ */ .rm-body{ background:var(--obsidian); color:var(--bone); height:100vh; overflow:hidden; } /* —— terminal backdrop: deep gradient + faint phosphor grid + scanlines —— */ .rm-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 140% at 82% -10%, #16150f 0%, #0A0A0B 58%); } .rm-bg::after{ content:""; position:absolute; inset:0; opacity:.6; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(111,227,176,.035) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(111,227,176,.035) 79px 80px); } .rm-scan{ position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.55) 2px 3px); animation:rmScan 8s linear infinite; } @keyframes rmScan{ from{ background-position:0 0 } to{ background-position:0 -120px } } /* —— horizontal scroller —— */ .rm-scroll{ position:relative; z-index:1; height:100vh; display:flex; flex-wrap:nowrap; align-items:stretch; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--phosphor-dim) transparent; } .rm-scroll:focus-visible{ outline:var(--active) solid var(--phosphor); outline-offset:-3px; } .rm-scroll::-webkit-scrollbar{ height:8px; } .rm-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); } .rm-scroll::-webkit-scrollbar-thumb{ background:var(--phosphor-dim); border-radius:4px; } .rm-scroll > *{ flex:0 0 auto; height:100%; display:flex; flex-direction:column; justify-content:center; justify-content:safe center; /* 'safe' falls back to start on overflow, never clips the top */ padding:calc(58px + var(--s-5)) var(--s-6) var(--s-6); } /* —— reveal (driven by roadmap.js). Hidden ONLY when JS is active (.rm-js on ), so the page is never blank if the script fails; each panel slides up + fades as it enters the horizontal view. —— */ .rm-js .rm-scroll [data-node]{ opacity:0; transform:translateY(26px); transition:opacity 620ms var(--ease-stone), transform 620ms var(--ease-stone); } .rm-js .rm-scroll [data-node].in{ opacity:1; transform:none; } /* —— INTRO —— */ .rm-intro{ width:min(90vw, 600px); } .rm-eyebrow{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.16em; text-transform:uppercase; color:var(--phosphor); text-shadow:0 0 10px var(--phosphor-dim); } .rm-title{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-wide); font-weight:800; font-size:clamp(2.2rem, 4.4vw, 3.6rem); line-height:0.98; letter-spacing:.005em; text-transform:uppercase; color:var(--bone); margin:var(--flow-tight) 0 var(--flow-default); overflow-wrap:break-word; max-width:100%; } .rm-caret{ color:var(--phosphor); font-weight:400; animation:rmBlink 1.05s steps(2,end) infinite; } @keyframes rmBlink{ 50%{ opacity:0 } } .rm-framing{ font-family:var(--f-civic); font-size:var(--t-lead); line-height:1.5; color:rgba(231,225,211,.82); max-width:42ch; } .rm-hint{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.22em; text-transform:uppercase; color:var(--phosphor); margin-top:var(--flow-loose); display:inline-flex; align-items:center; gap:var(--s-2); } .rm-hint-arr{ display:inline-block; animation:rmArr 1.5s var(--ease-stone) infinite; } @keyframes rmArr{ 0%,100%{ transform:translateX(0); opacity:.45 } 50%{ transform:translateX(7px); opacity:1 } } /* —— AT A GLANCE —— */ /* top-anchored (clears the fixed rail) + internally scrollable so figures/release never clip or hide */ .rm-glance{ width:min(92vw, 620px); justify-content:flex-start; overflow-y:auto; } .rm-figs{ display:grid; grid-template-columns:repeat(3, auto); gap:var(--s-5) var(--s-6); margin:var(--flow-default) 0 var(--flow-loose); justify-content:start; } .rm-fig{ display:flex; flex-direction:column; gap:4px; } .rm-fig-n{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:700; font-size:clamp(1.6rem, 3.4vw, 2.4rem); line-height:1; color:var(--phosphor); text-shadow:0 0 14px var(--phosphor-dim); } .rm-fig-l{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); } .rm-glance-note{ font-family:var(--f-civic); font-size:var(--t-body); line-height:1.55; color:rgba(231,225,211,.7); max-width:54ch; } .rm-release{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.05em; color:rgba(231,225,211,.78); margin-top:var(--flow-default); } .rm-k{ color:var(--phosphor); margin-right:var(--s-2); } .rm-release-note{ color:var(--ink-mute); } /* —— ERA DIVIDERS (vertical marker over a thin phosphor line) —— */ .rm-era{ width:104px; padding-left:var(--s-2); padding-right:var(--s-2); align-items:center; justify-content:center; gap:var(--s-3); position:relative; } .rm-era::before{ content:""; position:absolute; left:50%; top:16%; bottom:16%; width:1px; transform:translateX(-50%); background:linear-gradient(180deg, transparent, var(--phosphor-dim) 16%, var(--phosphor-dim) 84%, transparent); } .rm-era-n{ position:relative; z-index:1; font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.2em; color:var(--phosphor); background:var(--obsidian); padding:var(--s-2) 0; } .rm-era-t{ position:relative; z-index:1; writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap; font-family:var(--f-hud); font-variation-settings:var(--vf-hud-wide); font-weight:700; font-size:var(--t-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--bone); background:var(--obsidian); padding:var(--s-3) 0; max-width:none; line-height:1; } /* —— MILESTONE CARDS —— */ /* narrow side padding (vs the panels' --s-6) so the card itself is wide, not a thin ribbon */ .rm-node{ width:520px; padding-left:var(--s-3); padding-right:var(--s-3); } .rm-card{ position:relative; width:100%; background:linear-gradient(180deg, var(--obsidian-raised), #0c0b0a); border:1px solid var(--obsidian-edge); padding:var(--s-5); transition:border-color var(--t-act) var(--ease-stone), transform var(--t-act) var(--ease-stone), box-shadow var(--t-act); } .rm-card::before{ content:""; position:absolute; left:0; top:var(--s-5); width:2px; height:18px; background:var(--phosphor-dim); } .rm-node:hover .rm-card{ border-color:var(--phosphor-dim); transform:translateY(-4px); box-shadow:0 18px 50px -28px rgba(0,0,0,.8); } .rm-node:hover .rm-card::before{ background:var(--phosphor); box-shadow:0 0 10px var(--phosphor-dim); } .rm-q{ font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.16em; text-transform:uppercase; color:var(--phosphor); } .rm-n-t{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:700; font-size:clamp(1.15rem, 1.6vw, 1.45rem); line-height:1.12; color:var(--bone); margin:var(--s-2) 0 var(--flow-tight); } .rm-n-d{ font-family:var(--f-civic); font-size:1.05rem; line-height:1.55; color:rgba(231,225,211,.72); } /* current build — no circle, just a phosphor-lit card + a chip */ .rm-now .rm-card{ border-color:var(--phosphor); box-shadow:0 0 34px -6px rgba(111,227,176,.18); } .rm-now .rm-card::before{ background:var(--phosphor); box-shadow:0 0 12px var(--phosphor-dim); } .rm-now-tag{ font-family:var(--f-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--obsidian); background:var(--phosphor); padding:2px 7px; margin-left:var(--s-2); border-radius:2px; } /* future milestones — dashed, dimmer */ .rm-future .rm-card{ border-style:dashed; } .rm-future .rm-q{ color:var(--phosphor-dim); } /* —— SIGN-UP PANEL —— */ /* top-anchored (clears the fixed rail) + scrollable so the form is never clipped or hidden under the rail */ .rm-end{ width:min(92vw, 560px); justify-content:flex-start; overflow-y:auto; } .rm-end-t{ font-family:var(--f-hud); font-variation-settings:var(--vf-hud-mid); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); line-height:1; text-transform:uppercase; color:var(--bone); margin:var(--flow-tight) 0 var(--flow-default); } .rm-end-d{ font-family:var(--f-civic); font-size:var(--t-lead); line-height:1.5; color:rgba(231,225,211,.8); max-width:44ch; } .rm-enlist{ margin:var(--flow-loose) 0 0; max-width:none; } /* terminal submit button (no gilt foil) */ .rm-end .seal{ background:transparent; border:1px solid var(--phosphor); color:var(--phosphor); box-shadow:none; } .rm-end .seal:hover{ background:var(--phosphor); color:var(--obsidian); box-shadow:0 0 26px rgba(111,227,176,.3); } .rm-end .seal:disabled{ opacity:.5; } .rm-return{ display:inline-block; margin-top:var(--flow-loose); font-family:var(--f-mono); font-size:var(--t-telemetry); letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,211,.6); transition:color var(--t-act); } .rm-return:hover{ color:var(--phosphor); } /* —— HORIZONTAL PROGRESS BAR —— */ .rm-prog{ position:fixed; left:0; right:0; bottom:0; height:2px; z-index:50; background:rgba(255,255,255,.06); pointer-events:none; } .rm-prog-bar{ display:block; height:100%; width:0; background:var(--phosphor); box-shadow:0 0 10px var(--phosphor-dim); transform-origin:left; transition:width 90ms linear; } /* —— RESPONSIVE —— */ @media (max-width:760px){ .rm-scroll > *{ padding:calc(54px + var(--s-4)) var(--s-4) var(--s-5); } .rm-intro, .rm-glance, .rm-end{ width:90vw; } .rm-node{ width:86vw; max-width:360px; } .rm-card{ padding:var(--s-4); } .rm-era{ width:84px; } .rm-figs{ gap:var(--s-4) var(--s-5); } } /* short / landscape viewports: anchor content to the top, tighten, let tall panels scroll internally */ @media (max-height:760px){ .rm-scroll > *{ justify-content:flex-start; padding-top:calc(50px + var(--s-3)); padding-bottom:var(--s-4); } .rm-node, .rm-era{ overflow-y:auto; } .rm-card{ padding:var(--s-4); } .rm-n-d{ font-size:1rem; line-height:1.45; } .rm-era-t{ font-size:0.66rem; letter-spacing:.12em; padding:var(--s-2) 0; } .rm-title{ margin:var(--s-2) 0 var(--flow-tight); } .rm-figs{ margin:var(--s-3) 0 var(--s-4); gap:var(--s-3) var(--s-5); } /* node scrolls (overflow-y) which forces overflow-x to clip — keep the now-card glow inside the padding */ .rm-now .rm-card{ box-shadow:0 0 22px -6px rgba(111,227,176,.16); } } /* —— REDUCED MOTION: everything visible + still —— */ @media (prefers-reduced-motion:reduce){ .rm-js .rm-scroll [data-node]{ opacity:1; transform:none; transition:none; } .rm-scan, .rm-caret, .rm-hint-arr{ animation:none; } .rm-prog-bar{ transition:none; } }