/* Organoid Protocol Atlas — global theme (loaded on every Datasette page). Retooled from the CaseStack/epstein-datasette pattern for a science/lab feel. */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); :root { --ink: #0f172a; --paper: #ffffff; --paper-2: #f6f8fa; --paper-3: #eef2f6; --accent: #0e7490; /* aqueous cyan */ --accent-2: #15803d; /* culture green */ --muted: #5b6b7b; --border: #e2e8f0; --good: #15803d; --warn: #b45309; --bad: #b91c1c; --font: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace; --bar: #0f172a; /* top bar — stays dark in both themes */ } /* Dark theme — toggled via /static/atlas.js (data-theme on ) */ html[data-theme="dark"] { --ink: #e6edf3; --paper: #0f1620; --paper-2: #0b1119; --paper-3: #1b2533; --accent: #38bdf8; /* brighter cyan for contrast */ --accent-2: #4ade80; --muted: #93a4b5; --border: #2a3645; --good: #4ade80; --warn: #fbbf24; --bad: #f87171; } html[data-theme="dark"] body { background: var(--paper-2); color: var(--ink); } html[data-theme="dark"] header.hd, html[data-theme="dark"] .ft { background: #060a10 !important; } html[data-theme="dark"] table.rows-and-columns td, html[data-theme="dark"] table.rows-and-columns th { background: var(--paper); color: var(--ink); border-color: var(--border); } html[data-theme="dark"] .apa-badge.ok { background: #052e16; border-color: #14532d; } html[data-theme="dark"] .apa-badge.no { background: #2a0f10; border-color: #7f1d1d; } html[data-theme="dark"] .apa-badge.fig { background: #1e1b3a; border-color: #4c3a8c; color: #c4b5fd; } html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=text], html[data-theme="dark"] select { background: var(--paper-3); color: var(--ink); border-color: var(--border); } /* floating theme toggle (injected by atlas.js) */ .apa-theme-btn { position: fixed; bottom: 18px; right: 18px; z-index: 50; font-family: var(--mono); font-size: .76rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); } .apa-theme-btn:hover { border-color: var(--accent); color: var(--accent); } /* Kill default Datasette chrome so our shell shows through */ body.index header, body.index footer { display: none !important; } header.hd, .ft { background: var(--ink) !important; } body { background: var(--paper-2); color: var(--ink); font-family: var(--font); margin: 0; } .content, .page-wrapper { max-width: 1180px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } code, .col-doi, .col-pmcid { font-family: var(--mono); font-size: 0.85em; } /* Top brand bar injected on every page */ .apa-topbar { display: flex; align-items: center; gap: .6rem; justify-content: center; background: var(--bar); color: #e6edf3; padding: .55rem 1rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } .apa-topbar a { color: #e6edf3; opacity: .85; } .apa-topbar a:hover { opacity: 1; } .apa-topbar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); display: inline-block; } /* ---------- Landing ---------- */ .apa-hero { padding: 3rem 1.5rem 1.5rem; max-width: 1180px; margin: 0 auto; } .apa-kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .apa-hero h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 .6rem; line-height: 1.08; } .apa-hero p.lead { font-size: 1.05rem; color: var(--muted); max-width: 760px; line-height: 1.6; margin: 0; } .apa-pipeline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.6rem 0 .5rem; font-family: var(--mono); font-size: .76rem; } .apa-pipeline .step { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; } .apa-pipeline .arrow { color: var(--accent); font-weight: 600; } .apa-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; max-width: 1180px; margin: 1.5rem auto; padding: 0 1.5rem; } @media (max-width: 820px) { .apa-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .apa-stats { grid-template-columns: repeat(2, 1fr); } } .apa-stat { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; } .apa-stat .n { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; } .apa-stat .l { font-size: .76rem; color: var(--muted); margin-top: .35rem; } .apa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 1180px; margin: 1rem auto 3rem; padding: 0 1.5rem; } .apa-card { display: block; background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 1.2rem; color: inherit; transition: box-shadow .15s, transform .15s; } .apa-card:hover { text-decoration: none; box-shadow: 0 6px 22px rgba(15,23,42,.08); transform: translateY(-2px); } .apa-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; } .apa-card p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; } .apa-card.green { border-left-color: var(--accent-2); } /* ---------- Badges (grounded / license) ---------- */ .apa-badge { font-family: var(--mono); font-size: .68rem; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); } .apa-badge.ok { color: var(--good); border-color: #bbf7d0; background: #f0fdf4; } .apa-badge.no { color: var(--bad); border-color: #fecaca; background: #fef2f2; } .apa-badge.fig { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; } /* --- morphogen-grammar heatmap --- */ .apa-hm-head { max-width: 1100px; margin: 1.5rem auto .4rem; padding: 0 1.2rem; } .apa-hm-head h1 { font-size: 1.7rem; margin: .2rem 0 .4rem; letter-spacing: -.01em; } .apa-sub { color: var(--muted); font-size: .92rem; line-height: 1.55; } .apa-hm-controls { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 .2rem; flex-wrap: wrap; } .apa-hm-controls select { font-family: var(--font); padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); color: var(--ink); } .apa-hm-wrap { max-width: 1100px; margin: .6rem auto 3rem; padding: 0 1.2rem; overflow-x: auto; } .apa-hm { display: grid; grid-template-columns: minmax(120px, 180px) repeat(var(--cols), minmax(64px, 1fr)); gap: 3px; align-items: stretch; } .hm-cell { display: flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 5px; font-size: .82rem; position: relative; } .hm-corner { background: transparent; } .hm-coltext { background: var(--paper-3); color: var(--ink); font-weight: 600; text-transform: capitalize; font-size: .78rem; padding: 4px; text-align: center; } .hm-coltext:hover { background: var(--accent); color: #fff; } .hm-rowtext { background: var(--paper); color: var(--ink); justify-content: flex-start; padding: 0 8px; font-weight: 500; font-size: .8rem; border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-rowtext:hover { border-color: var(--accent); color: var(--accent); } .hm-empty { background: var(--paper-2); border: 1px solid var(--border); } .hm-on { background: color-mix(in srgb, var(--accent) calc(var(--i) * 100%), #ffffff); color: #fff; font-weight: 600; font-family: var(--mono); transition: transform .08s; } .hm-on:hover { transform: scale(1.08); z-index: 2; box-shadow: 0 2px 8px rgba(14,116,144,.35); color: #fff; } .hm-on .hm-n { mix-blend-mode: normal; } .hm-on[style*="--i:0.1"], .hm-on[style*="--i:0.2"], .hm-on[style*="--i:0.3"] { color: var(--ink); } .hm-fig { position: absolute; top: -3px; right: -1px; font-size: .6rem; filter: drop-shadow(0 0 1px #fff); } /* --- Ask the Atlas (grounded Q&A) --- */ .apa-ask-head { max-width: 760px; margin: 1.6rem auto .4rem; padding: 0 1.2rem; } .apa-ask-head h1 { font-size: 1.7rem; margin: .2rem 0 .4rem; letter-spacing: -.01em; } .apa-ask-form { display: flex; gap: .5rem; margin: 1rem 0 .6rem; } .apa-ask-form input { flex: 1; font-family: var(--font); font-size: 1rem; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--ink); } .apa-ask-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .apa-ask-form button { font-family: var(--font); font-weight: 600; padding: 0 20px; border: none; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; } .apa-ask-form button:hover { filter: brightness(1.08); } .apa-ask-examples { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; color: var(--muted); } .apa-ask-examples .ex { font-family: var(--font); font-size: .8rem; color: var(--accent); background: var(--paper-3); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; } .apa-ask-examples .ex:hover { border-color: var(--accent); } .apa-ask-out { max-width: 760px; margin: .4rem auto 3rem; padding: 0 1.2rem; } .apa-ask-loading { color: var(--muted); padding: 1.2rem 0; font-style: italic; } .apa-ask-card { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.3rem; margin-top: .8rem; } .apa-ask-q { font-weight: 600; color: var(--muted); font-size: .9rem; margin-bottom: .6rem; } .apa-ask-a { font-size: 1.02rem; line-height: 1.65; white-space: pre-wrap; } .apa-ask-a .cite { font-family: var(--mono); font-size: .82em; } .apa-ask-model { margin-top: .8rem; font-size: .74rem; color: var(--muted); font-family: var(--mono); } .apa-ask-srch { max-width: 760px; margin: 1.4rem 0 .3rem; font-size: 1rem; } .apa-ask-src { display: grid; gap: .55rem; } .src-row { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: .6rem .8rem; } .src-head { font-weight: 600; } .src-meta { font-weight: 400; color: var(--muted); font-size: .82rem; font-family: var(--mono); margin-left: .4rem; } .src-quote { color: var(--ink); font-size: .9rem; line-height: 1.5; margin: .3rem 0; opacity: .85; } .src-doi { font-family: var(--mono); font-size: .78rem; } /* --- Consensus recipes --- */ .apa-cons-wrap { max-width: 1100px; margin: .6rem auto 3rem; padding: 0 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; align-items: start; } .apa-cons-card { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; } .cons-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; } .cons-head h2 { font-size: 1.15rem; margin: 0; text-transform: capitalize; } .cons-meta { font-size: .74rem; color: var(--muted); font-family: var(--mono); } .cons-warn { color: var(--warn); } .cons-grouplabel { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: .7rem 0 .35rem; } .cons-grouplabel.variable { color: var(--muted); } .cons-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 1.3fr auto; align-items: center; gap: .5rem; padding: 2px 0; font-size: .85rem; } .cons-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cons-bar { position: relative; background: var(--paper-3); border-radius: 4px; height: 16px; overflow: hidden; } .cons-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 4px; } .cons-pct { position: absolute; right: 5px; top: 0; font-size: .68rem; font-family: var(--mono); line-height: 16px; color: var(--ink); } .cons-dose { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-align: right; white-space: nowrap; } .cons-varies { opacity: .7; } /* ---------- Recipe card (protocol row page) ---------- */ .apa-recipe { max-width: 980px; margin: 1.5rem auto; padding: 0 1.5rem; } .apa-recipe h1 { font-size: 1.7rem; margin: .2rem 0 .2rem; } .apa-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: .6rem; margin: 1rem 0; } .apa-axes .ax { background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; } .apa-axes .ax .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .apa-axes .ax .v { font-weight: 600; margin-top: .2rem; } .apa-cocktail { width: 100%; border-collapse: collapse; margin-top: .5rem; } .apa-cocktail th, .apa-cocktail td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; } .apa-cocktail th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .apa-cocktail .quote { font-size: .8rem; color: var(--muted); font-style: italic; } /* In-context evidence highlighter */ .apa-source { max-height: 360px; overflow: auto; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; font-size: .85rem; line-height: 1.7; white-space: pre-wrap; color: var(--ink); } mark.apa-hl { background: #fde68a; color: #1a1a1a; padding: 0 2px; border-radius: 2px; } .apa-foot { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); }