Spaces:
Running
Running
| /* layout.css, page-wide structural primitives: | |
| tab-lede (paragraph below banner), default vertical section rhythm, | |
| part dividers (DEMO / MODEL signposts), section eyebrow / title / | |
| lede / takeaway typography, and the .section--two-col layout that | |
| parks narrative in a sticky rail next to the demo. */ | |
| /* --- Tab lede ------------------------------------------------------------ | |
| Short narrative paragraph that opens each tab. Treated as an editorial | |
| "lede" (the deck under a magazine headline): one design accent (a thin | |
| green left-rail that echoes the green caret in the wordmark above) plus a | |
| typographic step-up to make it clearly *the entry point* rather than just | |
| the first body paragraph. | |
| Structure: | |
| .tab-lede , outer wrapper, centers the block at page width | |
| .tab-lede__rail , green left-rail + padding + max-width on the text | |
| .tab-lede__eyebrow, small mono "§ Intro" label up top | |
| p , the lede text itself (large, light, dark ink) | |
| --------------------------------------------------------------------------- */ | |
| .tab-lede { | |
| max-width: 1200px; margin: 56px auto 0; | |
| padding: 0 32px; | |
| } | |
| .tab-lede__rail { | |
| /* The accent. 3px is just thick enough to read as a deliberate rail and | |
| not a stray border; the green matches --green / the wordmark caret. */ | |
| border-left: 3px solid #317f3f; | |
| padding: 4px 0 4px 22px; | |
| max-width: 820px; | |
| } | |
| .tab-lede__eyebrow { | |
| display: block; | |
| font-family: "JetBrains Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.22em; | |
| text-transform: uppercase; | |
| color: #317f3f; | |
| margin-bottom: 12px; | |
| } | |
| .tab-lede p { | |
| margin: 0; | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 19px; | |
| font-weight: 300; | |
| line-height: 1.5; | |
| letter-spacing: -0.005em; | |
| color: #2d2d2a; | |
| max-width: 760px; | |
| } | |
| /* Release-hero figure (pareto frontier). Sits below the lede rail, | |
| left-aligned with the text column so the figure feels anchored to the | |
| announcement rather than floating. Caption mirrors the secondary-note | |
| typography for visual continuity. */ | |
| .tab-lede__figure { | |
| margin: 28px 0 0; | |
| max-width: 640px; | |
| padding: 0; | |
| } | |
| .tab-lede__figure img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| border: 1px solid var(--hairline); | |
| } | |
| .tab-lede__figure figcaption { | |
| margin-top: 10px; | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 13px; | |
| line-height: 1.55; | |
| color: #5b5b56; | |
| } | |
| /* Secondary "navigator" paragraph that follows the lede. Drops a step | |
| in size + weight + saturation so the eye reads it as a follow-up / | |
| table of contents rather than another full lede paragraph; the inline | |
| §X references are styled as chip anchors (below) to keep it scannable. */ | |
| .tab-lede p + p.tab-lede__note { | |
| margin-top: 14px; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #5b5b56; | |
| } | |
| /* Inline chip anchors for the §1..§7 section references. Mono + warm | |
| green border so they read as deliberate "jump-to" markers within | |
| the prose. Subtle by default, fill in on hover/focus. */ | |
| .lede-chip { | |
| display: inline-block; | |
| padding: 0 6px; | |
| font-family: "JetBrains Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| color: #1f5024; | |
| background: rgba(49, 127, 63, 0.06); | |
| border: 1px solid rgba(49, 127, 63, 0.35); | |
| border-radius: 3px; | |
| text-decoration: none; | |
| vertical-align: 1px; /* nudge up so it sits on the baseline of 14px prose */ | |
| line-height: 1.4; | |
| transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; | |
| } | |
| .lede-chip:hover, | |
| .lede-chip:focus-visible { | |
| background: rgba(49, 127, 63, 0.16); | |
| border-color: #317f3f; | |
| color: #1f1f1d; | |
| outline: none; | |
| } | |
| /* --- Sections --- */ | |
| section { | |
| border-bottom: 1px solid #eee; | |
| padding: 64px 0; | |
| } | |
| section:last-of-type { border-bottom: none; } | |
| /* --- Part dividers (DEMO / MODEL) --- */ | |
| .part-divider { | |
| text-align: center; | |
| padding: 80px 32px 48px; | |
| border-top: 1px solid #eee; | |
| border-bottom: 1px solid #eee; | |
| background: linear-gradient(to bottom, rgba(49,127,63,0.04), transparent); | |
| } | |
| .part-divider .part-eyebrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: #317f3f; | |
| letter-spacing: 4px; text-transform: uppercase; | |
| margin-bottom: 6px; | |
| } | |
| .part-divider h2 { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 26px; font-weight: 300; letter-spacing: -0.3px; | |
| margin-bottom: 8px; | |
| } | |
| .part-divider p { | |
| color: #666; font-size: 13px; max-width: 580px; margin: 0 auto; | |
| } | |
| .section-num { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: #317f3f; | |
| letter-spacing: 2px; text-transform: uppercase; | |
| margin-bottom: 8px; | |
| } | |
| .section-title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 22px; font-weight: 400; letter-spacing: -0.3px; | |
| margin-bottom: 24px; | |
| color: #1f1f1d; | |
| } | |
| .lede { | |
| color: #444; font-size: 14px; margin-bottom: 32px; | |
| max-width: 640px; | |
| } | |
| .takeaway { | |
| margin-top: 32px; | |
| padding: 16px 20px; border-left: 3px solid #317f3f; | |
| background: #f4f8f4; color: #333; | |
| font-size: 13px; max-width: 640px; | |
| } | |
| .takeaway strong { | |
| font-family: "JetBrains Mono", monospace; | |
| font-weight: 500; letter-spacing: 1px; text-transform: uppercase; | |
| font-size: 10px; color: #317f3f; display: block; margin-bottom: 4px; | |
| } | |
| /* Two-subsection takeaway: each <p> is its own labeled block (Try it / | |
| What to look for) sitting inside the same card. */ | |
| .takeaway p { margin: 0 0 14px; } | |
| .takeaway p:last-child { margin-bottom: 0; } | |
| /* === Two-column section layout ========================================= | |
| The default layout stacks vertically: title → lede → demo → takeaway. | |
| For demo-heavy sections that means narrative and visualization never | |
| share visual space, by the time the visitor is mid-demo, the lede | |
| is scrolled away. .section--two-col places the eyebrow + title + | |
| lede in a sticky rail on the left and stacks the demo + takeaway | |
| in the right column. Narration stays in view while the visitor | |
| scrolls through the demo; the takeaway then appears right under | |
| the demo, on the right column, as a "now that you've played with | |
| it…" debrief, same flow on both the Demo and Model tabs. | |
| Layout math: container.wide is 1200px max with 32px padding => | |
| 1136px usable. 280px rail + 28px gap + 828px right column. Below | |
| 960px the right column gets squeezed under ~620px (280 + 28 + ~620 | |
| ≈ 928px usable inside a ~960px viewport), which is the point where | |
| the demos (gene tracks, SVG bars, 3D viewers) start clipping or | |
| becoming unreadable. We collapse to single-column and unstick the | |
| rail there so the narrative stacks above the demo + takeaway. */ | |
| .section--two-col { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| column-gap: 28px; | |
| align-items: start; | |
| /* Land cleanly under the sticky header on anchor jumps (#folding). */ | |
| scroll-margin-top: 104px; | |
| } | |
| .section--two-col .section-narrative { | |
| position: sticky; | |
| /* Sticky header is ~88px tall (title + tab strip on its border); | |
| +16px so the rail doesn't kiss the underline. */ | |
| top: 104px; | |
| align-self: start; | |
| /* Cap on short viewports so a tall narrative still fits without | |
| pushing demo content off-screen. The narrative scrolls inside | |
| its own track if it ever overflows. */ | |
| max-height: calc(100vh - 120px); | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| } | |
| /* The 640px cap on .lede exists to keep line length readable in the | |
| single-column layout. Inside a 280px rail that cap is moot, drop | |
| it so the text fills the rail. */ | |
| .section--two-col .section-narrative .lede { | |
| max-width: none; | |
| font-size: 13px; | |
| margin-bottom: 0; | |
| } | |
| /* Right column: demo stacked over takeaway, flex-column with a clear | |
| visual beat between them. */ | |
| .section--two-col .section-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| min-width: 0; /* let inner svg/canvas shrink instead of overflowing */ | |
| } | |
| .section--two-col .demo { | |
| margin: 0; /* default 24px y-margin is for single-column rhythm */ | |
| } | |
| .section--two-col .takeaway { | |
| margin: 0; /* gap on section-body handles vertical rhythm */ | |
| max-width: none; /* fill the right column rather than capping at 640 */ | |
| } | |
| @media (max-width: 960px) { | |
| .section--two-col { | |
| grid-template-columns: 1fr; | |
| row-gap: 16px; | |
| } | |
| .section--two-col .section-narrative { | |
| position: static; | |
| max-height: none; | |
| overflow: visible; | |
| } | |
| } | |
| /* --- "Try it" / "What you can do here" callout. Drops in above an | |
| interactive widget to spell out the affordances in one line. Subtle | |
| green-edge card so the reader sees it as a hint, not a heading. --- */ | |
| .widget-howto { | |
| margin: 0 0 12px; | |
| padding: 8px 12px; | |
| background: #f4f8f4; | |
| border-left: 2px solid var(--green); | |
| font-size: 12px; line-height: 1.55; | |
| color: #3a4a3d; | |
| display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; | |
| } | |
| .widget-howto__label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 600; | |
| color: var(--green); | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| flex: 0 0 auto; | |
| } | |
| .widget-howto__body { flex: 1 1 0; min-width: 0; } | |
| .widget-howto__body kbd { | |
| font-family: inherit; | |
| background: rgba(31, 31, 29, 0.06); | |
| border-radius: 3px; | |
| padding: 1px 5px; | |
| } | |