/* hub.css - landing page (enzyme list / pathway map) */ /* Undo the global style.css `html,body{overflow:hidden;height:100%}` lock that is meant for the simulator (full-app) pages: the hub must scroll as a normal DOCUMENT so window.scrollY / native history scroll-restoration / the hub scroll-save script all target the real scrolling element instead of a dead-end 100vh (which silently kept every scroll value at 0 = "back always lands at the top"). */ html{overflow:auto;} body{overflow:visible;height:auto;} #hubTop{padding:34px 24px 10px;max-width:1180px;margin:0 auto;} #hubTop h1{font-size:26px;color:#fff;font-weight:800;} #hubTop h1 span{color:#7fa3d8;font-weight:500;font-size:18px;} #hubTop .src{margin-top:8px;color:#7c92b8;font-size:12.5px;line-height:1.6;max-width:900px;} #hubMain{max-width:1180px;margin:0 auto;padding:10px 24px 60px;} section h2{color:#dce7fb;font-size:16px;margin:30px 0 14px;border-left:4px solid #58c4ff;padding-left:10px;} .featureBlock h2{border-color:#ffd479;} .pathwayBlock h2{border-color:#ffab5e;} /* ---------- enzyme cards ---------- */ .ecard{display:block;background:rgba(13,20,38,.85);border:1px solid #22345a;border-radius:14px; padding:16px 18px;text-decoration:none;color:inherit;position:relative; transition:transform .15s, border-color .15s, box-shadow .15s;} .ecard:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.5);} .ecard.avail{border-color:#2e7d5b;cursor:pointer;} .ecard.avail:hover{border-color:#43c98f;} .ecard.wip{opacity:.78;cursor:default;} .ecard.wip:hover{transform:none;box-shadow:none;border-color:#22345a;} .enum{font-size:10px;font-weight:800;letter-spacing:.14em;color:#5f79a3;margin-bottom:6px;} .ecard h3{color:#fff;font-size:17px;margin-bottom:6px;} .ecard h3 small{color:#8ea4ca;font-weight:500;font-size:12.5px;} .erx{font-size:12.8px;color:#bcd0f2;margin-bottom:7px;font-family:'Consolas',monospace;} .edesc{font-size:11.8px;line-height:1.55;color:#8ea4ca;margin-bottom:8px;} .eec{font-size:10.5px;color:#5f79a3;margin-bottom:10px;} .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em; padding:4px 10px;border-radius:999px;} .badge.on{background:#123d2c;color:#5fe8ab;border:1px solid #2e7d5b;} .badge.off{background:#1a2440;color:#6d84aa;border:1px solid #2a3a5f;} .feature{max-width:720px;} .feature h3{font-size:21px;} .why{font-size:12px;color:#9db1d4;max-width:720px;margin-top:10px;line-height:1.6; border-left:3px solid #ffd479;padding-left:10px;} .erx b.k{color:#58c4ff;} .erx b.p{color:#ffab5e;} /* ---------- pathway flow grid ---------- */ .flow{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;} /* pyruvate gate: Enolase (LEFT) → ▼PEP → PK directly below. From PK, PYRUVATE branches two ways: → right to PDH (aerobic, product Acetyl-CoA to its right) and ↗ up-right to LDH (fermentation END, product lactate to its right — no arrow onward). LDH sits directly above PDH. The ↗ LDH-branch arrow sits at PK's height (middle row) so it reads as coming from PK, not from Enolase. All branch arrows share one consistent style (20px #4a5f88 + identical .mol chip). */ .pkg{flex:1 1 100%;min-width:0;box-sizing:border-box;display:grid; grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) auto; grid-template-rows:auto auto auto; grid-template-areas: "eno b1 ldh lact" "pep diag b2 ." "pk hor pdh ac"; gap:18px 16px;align-items:center;justify-items:center;} .pkg-eno{grid-area:eno;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;} .pkg-pep{grid-area:pep;display:flex;justify-content:center;align-items:center;} .pkg-pk{grid-area:pk;display:flex;flex-direction:column;align-items:center;width:100%;} .pkg-gap.diag{grid-area:diag;display:flex;justify-content:center;align-items:center;} .pkg-gap.hor{grid-area:hor;display:flex;justify-content:center;align-items:center;} .pkg-ldh{grid-area:ldh;display:flex;flex-direction:column;align-items:center;gap:8px;} .pkg-pdh{grid-area:pdh;display:flex;flex-direction:column;align-items:center;gap:8px;} .pkg-lact{grid-area:lact;display:flex;align-items:center;} .pkg-ac{grid-area:ac;display:flex;align-items:center;} .pkg .ecard{flex:none;width:100%;max-width:330px;} .pkg-end{font-size:11.5px;color:#8ea4ca;font-family:'Consolas',monospace;text-align:center;} .pkg-end b{color:#ffb46e;} /* one consistent arrow language for every pkg branch arrow */ .pkg-arrow,.pkg-prod{display:flex;flex-direction:row;align-items:center;gap:5px; color:#4a5f88;font-size:20px;line-height:1;white-space:nowrap;} .pkg-arrow .mol,.pkg-prod .mol{font-size:10.5px;color:#8ea4ca;background:#141f3a; border:1px solid #26395f;border-radius:6px;padding:2px 7px;font-family:monospace;white-space:nowrap;} .pkg-prod.ldarrow .mol{color:#ffb46e;border-color:#5b4a2e;} /* PEP down arrow: linear arrow in the same colour as the chip text (consistent) */ .pkg-pep .arrow i.lin{color:#4a5f88;font-size:20px;line-height:1;} @media(max-width:760px){ .pkg{grid-template-columns:1fr;grid-template-areas: "eno" "pep" "diag" "ldh" "lact" "pk" "hor" "pdh" "ac";} .pkg .arrow{transform:none;min-height:24px;} } .flow .ecard{flex:1 1 250px;max-width:330px;display:flex;flex-direction:column;} .arrow{align-self:center;color:#4a5f88;font-size:20px;text-align:center;min-width:36px; display:flex;flex-direction:column;align-items:center;gap:2px;} .arrow i{font-style:normal;font-size:13px;color:#ffab5e;} .arrow .mol,.arrow.split div.mol{font-size:10.5px;color:#8ea4ca;background:#141f3a; border:1px solid #26395f;border-radius:6px;padding:2px 7px;font-family:monospace;white-space:nowrap;} .rowbreak{flex-basis:100%;height:6px;} .metabolite.start{align-self:center;background:linear-gradient(135deg,#173a63,#12294a); color:#cfe2ff;font-size:12px;font-weight:800;letter-spacing:.08em;padding:12px 14px; border-radius:10px;border:1px solid #2c4a7c;} .endpoint{margin-top:16px;color:#ffb46e;font-size:13px;font-weight:600; font-family:'Consolas',monospace;} /* ---------- TCA cycle block ---------- */ .tcaBlock h2{border-color:#7fe08a;} .tcaBlock .ecard{border-color:#2e7d5b;} .tcaBlock .enum{color:#6fbc7f;} .etcBlock h2{border-color:#58c4ff;} .etcBlock .ecard{border-color:#23507a;} .etcBlock .enum{color:#6fc9ff;} .tcaIn{align-self:center;background:linear-gradient(135deg,#144a2e,#0f2e1e); color:#b9f0cc;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:10px 14px; border-radius:10px;border:1px solid #2e7d5b;max-width:120px;text-align:center;} /* ---------- method note ---------- */ .methodNote{margin-top:40px;background:rgba(11,17,33,.75);border:1px dashed #2a3a5f; border-radius:14px;padding:18px 22px;max-width:900px;} .methodNote h3{color:#dce7fb;font-size:14px;margin-bottom:10px;} .methodNote ol{margin-left:18px;display:flex;flex-direction:column;gap:7px;} .methodNote li{font-size:12px;color:#9db1d4;line-height:1.6;} .methodNote p{margin-top:10px;font-size:11.5px;color:#66809f;} footer{text-align:center;color:#4a5f88;font-size:11px;padding:20px;border-top:1px solid #16233f;} @media(max-width:760px){ .flow{flex-direction:column;} .arrow{transform:rotate(90deg);min-height:30px;} }