/* * GeneOps brand — distributable stylesheet. * * DO NOT EDIT THIS FILE DIRECTLY. Edit the sources under * app/assets/stylesheets/canonical/ or .../provisional/ and run * scripts/build-css.sh to regenerate. * * Source of truth: Figma file tOzBDGYo4PbpYMSKFoXwk5. * Token export: docs/figma-export/ */ @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=DM+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap"); /* ============================================================== */ /* canonical/ — Mikael-derived design system */ /* ============================================================== */ /* --- canonical/settings/tokens-primitive.css --- */ /* * Primitive tokens — Layer 1. * * Raw values exactly as exported from Mikael's Figma file via the * Design Tokens Manager plugin (2026-05-19). The export lives at * `docs/figma-export/` and is the source of truth. * * Naming convention mirrors Figma: * `Color/Pink/600` -> `--color-pink-600` * `Spacing/16` -> `--spacing-16` * `Corner Radius/lg` -> `--corner-radius-lg` * `font/Size/14` -> `--font-size-14` * * Transparency variants from the export use `_NN%` in Figma; here they * become `-NN` suffixes (e.g. `Color/grey/950_50%` -> `--color-grey-950-50`). * * Nothing in the FORMAL section is invented. Values outside the formal * export — gene-attribute fills, ad-hoc widths, derived stroke weights — * sit in a clearly labeled AD-HOC section at the bottom and are flagged * in NOTES.md for Mikael's review. */ :root { /* ===================================================================== FORMAL TOKENS — from Mikael's Core.Core.tokens.json (2026-05-19) ===================================================================== */ /* ---------- White ---------- */ --color-white-solid: #ffffff; --color-white-0-2: #ffffff01; /* `Color/white/0.2%` — near-transparent overlay */ /* ---------- Greyscale ramp (full 11-step) ---------- */ --color-grey-50: #fafafa; --color-grey-100: #f4f4f6; --color-grey-200: #e1e1e5; --color-grey-300: #c4c4ca; --color-grey-400: #9a9aa2; --color-grey-500: #6a6a71; --color-grey-600: #505058; --color-grey-700: #3f3f46; --color-grey-800: #26262b; --color-grey-900: #1f1f23; --color-grey-950: #17171c; /* Transparency aliases used by `Background/Button-Base` in both themes */ --color-grey-50-50: #fafafa80; --color-grey-50-0: #fafafa00; --color-grey-950-50: #17171c80; --color-grey-950-0: #17171c00; /* ---------- Brand Orange (full 11-step) ---------- */ --color-orange-50: #fff6f2; --color-orange-100: #ffe9db; --color-orange-200: #ffd1b4; --color-orange-300: #ffb182; --color-orange-400: #ff8b4a; --color-orange-500: #ff6b24; --color-orange-600: #ff5005; /* primary brand orange */ --color-orange-700: #cd3c01; --color-orange-800: #912901; --color-orange-900: #5b1901; --color-orange-950: #360e01; /* ---------- Brand Pink (full 11-step) ---------- */ --color-pink-50: #fff0f7; --color-pink-100: #ffdbee; --color-pink-200: #ffb6de; --color-pink-300: #ff86c7; --color-pink-400: #ff51a5; --color-pink-500: #ff2d8b; --color-pink-600: #ff0f6f; /* primary brand pink */ --color-pink-700: #cc0352; --color-pink-800: #8f0239; --color-pink-900: #5a0124; --color-pink-950: #350115; /* ---------- Brand Gradient ---------- From `color.styles.tokens.json`: 90° linear (= CSS `to right`), Pink/600 → Orange/600, with a hover variant Orange/600 → Pink/500. */ --brand-gradient: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600)); --brand-gradient-hover: linear-gradient(to right, var(--color-orange-600), var(--color-pink-500)); /* ---------- Type families ---------- */ --font-family-display: "DM Sans", system-ui, sans-serif; --font-family-body: "Source Sans 3", system-ui, sans-serif; --font-family-mono: "DM Mono", ui-monospace, monospace; /* ---------- Type weights ---------- */ --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; /* ---------- Letter spacing ---------- */ --font-letter-spacing-tight: -0.5px; --font-letter-spacing-normal: 0; --font-letter-spacing-wide: 0.5px; --font-letter-spacing-wider: 2px; /* ---------- Type sizes ---------- */ --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-size-18: 18px; --font-size-20: 20px; --font-size-24: 24px; --font-size-32: 32px; --font-size-60: 60px; --font-size-100: 100px; /* ---------- Spacing scale ---------- */ --spacing-0: 0; --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-80: 80px; /* ---------- Corner radius ---------- */ --corner-radius-xs: 4px; --corner-radius-sm: 8px; --corner-radius-md: 16px; --corner-radius-lg: 32px; --corner-radius-full: 9999px; /* ---------- Stroke weight ---------- */ --stroke-weight-0-5: 0.5px; --stroke-weight-1: 1px; --stroke-weight-2: 2px; /* ---------- Layout widths ---------- */ --width-740: 740px; --width-1296: 1296px; /* ===================================================================== AD-HOC VALUES — NOT in Mikael's formal variable export --------------------------------------------------------------------- These were captured by the original per-node Figma extraction and are still referenced by demo/landing markup and a few utility classes. They are NOT design-system tokens — they're ad-hoc fills/measurements from individual frames. Flagged in NOTES.md for Mikael's review: keep, promote to formal tokens, or remove. ===================================================================== */ /* Gene-attribute palette — five hue families used in light-frame fills. Not part of Mikael's variable collection. NOTES.md #3 / #4. */ --color-spring-green-30: #009966; --color-spring-green-37: #00bc7d; --color-spring-green-42: #00d492; --color-spring-green-15-40: #004f3b66; --color-spring-green-15-60: #004f3b99; --color-cyan-24: #00786f; --color-cyan-29: #009689; --color-cyan-42: #00d5be; --color-cyan-9-40: #002c2266; --color-cyan-10-40: #022f2e66; --color-cyan-18-30: #0b4f4a4d; --color-cyan-37-20: #00bba733; --color-azure-66: #51a2ff; --color-azure-33-40: #1c398e66; --color-violet-76: #a684ff; --color-violet-35-40: #4d179a66; /* Ad-hoc gene-attribute oranges (lowercase `color/orange/...` in Figma, distinct from brand Orange above). Numeric suffixes don't collide today, but the namespace conflation is risky. NOTES.md #4. */ --color-orange-gene-50: #ffba00; --color-orange-gene-25-40: #7b330666; /* Convenience black — not in the variable export, used by some monochrome SVG overlays. */ --color-black-solid: #000000; /* Derived widths used by demo/landing — half-card derivations from the 1296px container with various gutter assumptions. Not formal tokens. */ --width-320: 320px; --width-584: 584px; /* (1296 - 2*48 - 32) / 2 */ --width-672: 672px; --width-896: 896px; } /* --- canonical/settings/tokens-semantic.css --- */ /* * Semantic tokens — Layer 2. * * Role-based names (Background/Surface 1, Text/Primary, etc.) mapped to * primitives. Two themes — dark (default, GeneOps brand) and light — * straight from Mikael's `Color.Dark.tokens.json` and * `Color.Light.tokens.json` (see docs/figma-export/). * * Theme selection: * -> dark theme (default) * -> light theme * -> explicit dark * * Every value here comes from the export. Nothing invented. */ :root, .theme-dark { /* ---------- Background ---------- */ --background-base: var(--color-grey-950); /* #17171c */ --background-surface-1: var(--color-grey-900); /* #1f1f23 */ --background-surface-2: var(--color-grey-800); /* #26262b */ --background-hover: var(--color-grey-700); /* #3f3f46 */ --background-button-base: var(--color-grey-950-50); /* #17171c80 */ /* ---------- Text ---------- */ --text-primary: var(--color-grey-50); /* #fafafa */ --text-secondary: var(--color-grey-400); /* #9a9aa2 */ --text-tertiary: var(--color-grey-500); /* #6a6a71 */ --text-disabled: var(--color-grey-700); /* #3f3f46 */ --text-light: var(--color-grey-50); /* #fafafa */ --text-hover: var(--color-grey-200); /* #e1e1e5 */ --text-protective: #7c86ff; /* literal in Mikael's export */ --text-risk-factor: var(--color-orange-600); /* #ff5005 */ /* ---------- Border ---------- */ --border-strong: var(--color-grey-500); /* #6a6a71 */ --border-default: var(--color-grey-700); /* #3f3f46 */ --border-subtle: var(--color-grey-800); /* #26262b */ /* ---------- Symbol ---------- */ --symbol-default: var(--color-grey-400); /* #9a9aa2 */ --symbol-hover: var(--color-grey-200); /* #e1e1e5 */ --symbol-disabled: var(--color-grey-600); /* #505058 */ --symbol-strong: var(--color-grey-50); /* #fafafa */ --symbol-light: var(--color-grey-50); /* #fafafa */ /* ---------- Effect ---------- */ --effect-button-shadow: var(--color-pink-800); /* #8f0239 */ } .theme-light { /* ---------- Background ---------- */ --background-base: var(--color-grey-50); /* #fafafa */ --background-surface-1: var(--color-grey-100); /* #f4f4f6 */ --background-surface-2: var(--color-grey-200); /* #e1e1e5 */ --background-hover: var(--color-grey-300); /* #c4c4ca */ --background-button-base: var(--color-grey-50-50); /* #fafafa80 */ /* ---------- Text ---------- */ --text-primary: var(--color-grey-950); /* #17171c */ --text-secondary: var(--color-grey-500); /* #6a6a71 */ --text-tertiary: var(--color-grey-400); /* #9a9aa2 */ --text-disabled: var(--color-grey-200); /* #e1e1e5 */ --text-light: var(--color-grey-50); /* #fafafa */ --text-hover: var(--color-grey-700); /* #3f3f46 */ --text-protective: #7c86ff; /* literal in Mikael's export */ --text-risk-factor: var(--color-orange-600); /* #ff5005 */ /* ---------- Border ---------- */ --border-strong: var(--color-grey-500); /* #6a6a71 */ --border-default: var(--color-grey-300); /* #c4c4ca */ --border-subtle: var(--color-grey-200); /* #e1e1e5 */ /* ---------- Symbol ---------- */ --symbol-default: var(--color-grey-500); /* #6a6a71 */ --symbol-hover: var(--color-grey-700); /* #3f3f46 */ --symbol-disabled: var(--color-grey-400); /* #9a9aa2 */ --symbol-strong: var(--color-grey-950); /* #17171c */ --symbol-light: var(--color-grey-50); /* #fafafa */ /* ---------- Effect ---------- */ --effect-button-shadow: var(--color-pink-200); /* #ffb6de */ } /* --- canonical/objects/layout.css --- */ /* * Layout objects — Layer 2 (ITCSS objects). * * Token-bound structural primitives: container, section, stacks, * rows, clusters, grids, measures, alignment, padding/margin shorthands, * borders, and small reset helpers. No color decisions beyond * border-subtle. Mikael-derived. */ /* ---------- Container ---------- */ /* Figma frame: centered 1296px container with 48px side padding. */ .container { width: 100%; max-width: var(--width-1296); margin-inline: auto; padding-inline: var(--spacing-48); box-sizing: border-box; } /* ---------- Section spacing ---------- */ .section { padding-block: var(--spacing-80); } .section--tight { padding-block: var(--spacing-48); } /* ---------- Surface card ---------- */ /* Figma "Background+Border" treatment: surface-1 fill, 32px padding, lg radius. */ .surface-card { background-color: var(--background-surface-1); padding: var(--spacing-32); border-radius: var(--corner-radius-lg); } .surface-card--unpadded { padding: 0; overflow: hidden; } .surface-card--padded-48 { padding: var(--spacing-48); } .surface-card--surface-2 { background-color: var(--background-surface-2); } /* ---------- Vertical stacks ---------- */ .stack { display: flex; flex-direction: column; align-items: flex-start; } .stack-2 { display: flex; flex-direction: column; gap: var(--spacing-2); } .stack-4 { display: flex; flex-direction: column; gap: var(--spacing-4); } .stack-8 { display: flex; flex-direction: column; gap: var(--spacing-8); } .stack-12 { display: flex; flex-direction: column; gap: var(--spacing-12); } .stack-16 { display: flex; flex-direction: column; gap: var(--spacing-16); } .stack-24 { display: flex; flex-direction: column; gap: var(--spacing-24); } .stack-32 { display: flex; flex-direction: column; gap: var(--spacing-32); } .stack-48 { display: flex; flex-direction: column; gap: var(--spacing-48); } .stack-80 { display: flex; flex-direction: column; gap: var(--spacing-80); } .stack-center { align-items: center; } /* ---------- Horizontal clusters (wrap) ---------- */ .cluster-4 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); } .cluster-8 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); } .cluster-12 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); } .cluster-16 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16); } .cluster-24 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24); } .cluster-32 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-32); } /* ---------- Horizontal rows (no wrap) ---------- */ .row-8 { display: flex; align-items: center; gap: var(--spacing-8); } .row-12 { display: flex; align-items: center; gap: var(--spacing-12); } .row-16 { display: flex; align-items: center; gap: var(--spacing-16); } .row-24 { display: flex; align-items: center; gap: var(--spacing-24); } .row-32 { display: flex; align-items: center; gap: var(--spacing-32); } .row-48 { display: flex; align-items: center; gap: var(--spacing-48); } .row-between { justify-content: space-between; } .row-end { justify-content: flex-end; } .row-grow > * { flex: 1 1 0; min-width: 0; } /* ---------- Grids ---------- */ .grid-2-32 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32); } .grid-3-32 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-32); } .grid-4-32 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-32); } .grid-2-16 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); } /* ---------- Width constraints (formal Figma widths) ---------- */ .measure-740 { max-width: var(--width-740); width: 100%; } .measure-1296 { max-width: var(--width-1296); width: 100%; } /* ---------- Text alignment + transform ---------- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; } .normal-case { text-transform: none; } .no-underline { text-decoration: none; } /* ---------- Flex item alignment ---------- */ .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .justify-center { justify-content: center; } .self-start { align-self: flex-start; } .self-center { align-self: center; } .grow { flex: 1 0 0; min-width: 0; } /* ---------- Position ---------- */ .relative { position: relative; } /* ---------- Reset ---------- */ .list-reset { list-style: none; padding-left: 0; } .mx-auto { margin-inline: auto; } /* ---------- Padding shorthands ---------- */ .pt-8 { padding-top: var(--spacing-8); } .pt-12 { padding-top: var(--spacing-12); } .pb-32 { padding-bottom: var(--spacing-32); } .pl-32 { padding-left: var(--spacing-32); } .padded-16 { padding: var(--spacing-16); } .padded-24 { padding: var(--spacing-24); } .padded-48 { padding: var(--spacing-48); } /* Single-line text truncation. min-width: 0 so it can shrink inside flex. */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ---------- Margin shorthands ---------- */ .mt-2 { margin-top: var(--spacing-2); } /* ---------- Border helpers ---------- */ .bordered-left { border-left: var(--stroke-weight-1) solid var(--border-subtle); } /* --- canonical/objects/typography.css --- */ /* * Typography composites — Layer 3. * * One class per Figma typography composite (Headline/xxl, Body/md, etc.). * Class names mirror the Figma name verbatim, lowercased with `/` and * spaces converted to `-`. * * Values come straight from Mikael's `text.styles.tokens.json` export. * Line-heights are unit-less ratios matching the export's percentages * (100% -> 1, 115% -> 1.15, 125% -> 1.25, 133% -> 1.33). */ /* Universal border-box — without this, padding on full-width elements * (like .site-footer) overflows the viewport. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--background-base); color: var(--text-primary); font-family: var(--font-family-body); font-size: var(--font-size-16); line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sticky footer: paired with `.site-footer { margin-top: auto }` so the footer sits at the viewport bottom on short pages and just under the last section on long ones. */ min-height: 100vh; display: flex; flex-direction: column; } /* Margin reset: the design system controls vertical rhythm via stack/ gap tokens, not UA defaults. */ h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding-left: 0; } /* Links inherit color and decoration from their surroundings — the design system styles links explicitly via .link-inline / .button etc. */ a { color: inherit; text-decoration: inherit; } /* Buttons strip UA chrome by default so any */ .action-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8); width: 40px; height: 40px; border: 0; border-radius: var(--corner-radius-full); background-color: var(--background-surface-2); color: var(--symbol-default); cursor: pointer; } .action-button:hover { background-color: var(--background-hover); color: var(--symbol-hover); } .action-button__icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .action-button__icon > svg { width: 100%; height: 100%; display: block; } .action-button__tooltip { position: absolute; /* Figma: top:10, left:40 default, left:48 hover. 10 isn't in the scale (closest --spacing-12); 40 isn't either (closest --spacing-48, which happens to also match the hover position so the tooltip no longer animates 8px right on hover — see NOTES.md). */ top: var(--spacing-12); left: var(--spacing-48); display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-4) var(--spacing-8); border-radius: var(--corner-radius-xs); background-color: var(--background-surface-2); font-family: var(--font-family-body); font-weight: var(--font-weight-600); font-size: var(--font-size-12); line-height: 1; letter-spacing: var(--font-letter-spacing-wide); color: var(--text-secondary); text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; } .action-button:hover .action-button__tooltip { opacity: 1; left: var(--spacing-48); color: var(--text-primary); } /* --- canonical/components/button.css --- */ /* * Button — component set 23:1936. * * 3 sizes (lg/md/sm) × 3 styles (filled/outline/grey) × hover. * * Markup: * * Optional icons are siblings of `.button__label`: * …svg… * * The label is wrapped in a span so the Outline variant can apply a * background-clip:text gradient to the text without affecting the * button background. * * No transitions — Figma's variant matrix only defines two states * (Default, Hover). Smooth transitions, if wanted, must be specified * by Mikael. See NOTES.md, open question 8. */ .button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--corner-radius-xs); cursor: pointer; font-family: var(--font-family-display); font-weight: var(--font-weight-500); letter-spacing: var(--font-letter-spacing-tight); text-decoration: none; white-space: nowrap; background: none; } .button__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .button__icon > svg { width: 100%; height: 100%; display: block; } .button__label { display: inline-block; line-height: 1; } /* ---------- Sizes ---------- */ .button--lg { height: 64px; padding: 0 var(--spacing-48); gap: var(--spacing-16); font-size: var(--font-size-20); } .button--lg .button__icon { width: 24px; height: 24px; } .button--md { height: 48px; padding: 0 var(--spacing-32); gap: var(--spacing-12); font-size: var(--font-size-16); } .button--md .button__icon { width: 20px; height: 20px; } .button--sm { height: 32px; padding: 0 var(--spacing-16); gap: var(--spacing-8); font-size: var(--font-size-14); } .button--sm .button__icon { width: 16px; height: 16px; } /* ---------- Block ---------- */ /* Stretch to the container width. Combines with any size modifier; the button's inline-flex + justify-content: center keeps the label (and icon) centered. */ .button--block { display: flex; width: 100%; } /* ---------- Filled ---------- */ /* Set color on the button itself so .button__icon (which uses currentColor via mask-image) matches the label text color. */ .button--filled { background-image: var(--brand-gradient); color: var(--text-light); } .button--filled .button__label { color: inherit; } .button--filled:hover { background-image: var(--brand-gradient-hover); } .button--filled.button--lg:hover { filter: drop-shadow(0 0 18px var(--effect-button-shadow)); } .button--filled.button--md:hover { filter: drop-shadow(0 0 14px var(--effect-button-shadow)); } .button--filled.button--sm:hover { filter: drop-shadow(0 0 10px var(--effect-button-shadow)); } /* ---------- Outline ---------- */ .button--outline { background-color: var(--background-button-base); border: var(--stroke-weight-1) solid var(--color-pink-600); } .button--outline .button__label { background-image: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .button--outline:hover { border-color: var(--color-orange-600); } .button--outline:hover .button__label { background-image: var(--brand-gradient-hover); } /* Only the Large + Outline + Hover variant has the wide glow. */ .button--outline.button--lg:hover { box-shadow: 0 0 36px 0 var(--effect-button-shadow); } /* ---------- Grey ---------- */ .button--grey { background-color: var(--background-surface-2); color: var(--text-primary); } .button--grey .button__label { color: inherit; } .button--grey:hover { background-color: var(--background-hover); } /* Outline buttons: icon color cannot use background-clip:text trick; set it to the rest-state pink so it matches the gradient text closely. */ .button--outline { color: var(--color-pink-600); } .button--outline:hover { color: var(--color-orange-600); } /* --- canonical/components/gene-chip.css --- */ /* * Gene Chip — component set 70:2462. * * Markup: * * rs2802292 * * * …svg… * FOXO3 * * * …svg… * GT * * * * * The 8px corner radius is a literal value in Figma — it's NOT in the * `Corner Radius/*` token scale (which only defines 4 / 32 / 9999). * See NOTES.md, open question 9. */ .gene-chip { display: inline-flex; align-items: flex-start; justify-content: flex-end; gap: var(--spacing-4); padding: var(--spacing-8) var(--spacing-12); border-radius: var(--corner-radius-sm); border: var(--stroke-weight-1) solid var(--border-subtle); background: transparent; } .gene-chip:hover, .gene-chip--hover { border-color: transparent; background-color: var(--background-hover); } .gene-chip__rsid { font-family: var(--font-family-display); font-weight: var(--font-weight-600); font-size: var(--font-size-14); line-height: 1.149999976158142; letter-spacing: var(--font-letter-spacing-normal); color: var(--text-primary); } .gene-chip__groups { display: inline-flex; align-items: flex-start; gap: var(--spacing-8); } .gene-chip__group { display: inline-flex; align-items: center; justify-content: flex-end; } .gene-chip__icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .gene-chip__icon > svg { width: 100%; height: 100%; display: block; } .gene-chip__text { font-family: var(--font-family-mono); font-weight: var(--font-weight-500); font-size: var(--font-size-12); line-height: 1; letter-spacing: var(--font-letter-spacing-normal); color: var(--text-secondary); text-align: right; } /* --- canonical/components/recommendation-card.css --- */ /* * Recommendation Card — node 70:2696. * * Outer width is rendered fluid (100%). The Figma instance is 1134px * wide, but that's demo data, not the card's intrinsic geometry. * * PROTECTIVE now binds to --text-protective. PATHOGENIC is the Figma * literal #8fa97c (handled "as to prefer" per Mikael until the * recommendations page is finished and the formal pathogenic-status * tokens land). */ .recommendation-card { display: flex; align-items: stretch; width: 100%; background-color: var(--background-surface-1); border-radius: var(--corner-radius-lg); overflow: clip; } .recommendation-card__inner { display: flex; align-items: flex-start; gap: var(--spacing-32); padding: var(--spacing-32); flex: 1 0 0; min-width: 0; } .recommendation-card__rail { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--spacing-16); flex-shrink: 0; } .recommendation-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-12); flex: 1 0 0; min-width: 0; } .recommendation-card__meta-row { display: flex; align-items: center; gap: var(--spacing-8); width: 100%; flex-wrap: wrap; } .recommendation-card__category { font-family: var(--font-family-body); font-weight: var(--font-weight-600); font-size: var(--font-size-14); line-height: 1; letter-spacing: var(--font-letter-spacing-wider); color: var(--text-primary); text-transform: uppercase; flex: 1 0 0; min-width: 0; } .recommendation-card__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); width: 100%; } .recommendation-card__title { font-family: var(--font-family-display); font-weight: var(--font-weight-700); font-size: var(--font-size-20); line-height: 1.149999976158142; letter-spacing: var(--font-letter-spacing-tight); color: var(--text-primary); margin: 0; } .recommendation-card__body { font-family: var(--font-family-body); font-weight: var(--font-weight-400); font-size: var(--font-size-16); line-height: 1.25; letter-spacing: var(--font-letter-spacing-normal); color: var(--text-secondary); width: 100%; } .recommendation-card__body p { margin: 0; } .recommendation-card__body p + p { margin-top: var(--spacing-8); } .recommendation-card__footer { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; /* Figma: 6px. Not in the spacing scale (closest --spacing-8). */ padding-top: var(--spacing-8); width: 100%; } .recommendation-card__footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); width: 100%; } .recommendation-card__effect-caption { font-family: var(--font-family-body); font-weight: var(--font-weight-600); font-size: var(--font-size-12); line-height: 1; letter-spacing: var(--font-letter-spacing-wide); text-transform: uppercase; text-align: right; } .recommendation-card__effect-caption > .from { color: var(--text-tertiary); display: block; } .recommendation-card__effect-caption > .target { color: var(--text-secondary); display: block; } /* ---------- Status pill ---------- */ .status-pill { display: inline-flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-2) var(--spacing-8); border-radius: var(--corner-radius-xs); font-family: var(--font-family-body); font-weight: var(--font-weight-600); font-size: var(--font-size-14); line-height: 1; letter-spacing: var(--font-letter-spacing-wider); text-transform: uppercase; } .status-pill__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .status-pill__icon > svg { width: 100%; height: 100%; display: block; } .status-pill--benign { color: var(--text-secondary); } .status-pill--protective { color: var(--text-protective); } .status-pill--pathogenic { color: #8fa97c; } /* not in figma — pathogenic awaiting formal token */ .status-pill--risk-factor { color: var(--text-risk-factor); } /* `.evidence-pill` was a duplicate of the generic `.pill` (see utilities.css). Use `.pill` directly instead. */ /* ============================================================== */ /* provisional/ — gem-owned, awaiting Figma blessing */ /* ============================================================== */ /* --- provisional/settings/status-palette.css --- */ /* * Note: app-owned color contract. * * Status: the brand gem only ships `.status-pill --benign|--protective| * --pathogenic|--risk-factor` (clinical-significance vocabulary) and has * no general semantic status palette. Consumers need 7 tones across at * least 13 vocabulary axes (clinical, evidence, synthesis, concern, * autopilot-run-status, autopilot-post-status, autopilot-content-type, * autopilot-reply-class, analytics-event, action-status, snp-effect, * consequence, offspring-analysis). All vocabularies fold cleanly onto * these 7 tones via the badge mapping (see provisional/objects/badge.css). * * Migrate when: the gem ships --status-{critical,warning,caution, * positive,info,accent,neutral}-{surface,text} tokens authored by Mikael. * Provisional tokens here then alias to the gem and disappear. * * Authority — surfaces bind to Mikael's primitives (no literal hex). * Where Mikael has shipped a tinted-surface primitive (spring-green- * 15-40, cyan-*-30/40, azure-33-40, violet-35-40, orange-gene-25-40) * we use it. Where he hasn't (the warm reds for critical/warning) we * use his pink/orange ramps at deep/dark steps. * * Text uses --text-primary in both themes (grey-950 in light, grey-50 * in dark) for uniform high-contrast readability. The colored tone * lives in the surface; pairing it with a same-family saturated text * (azure-66 on azure-33-40, etc.) collapsed contrast badly. Round-2 * Q1c asks Mikael whether he wants saturated colored text restored * once he ships explicit text variants matched to each surface. */ :root, .theme-dark { /* Critical — pathogenic, high-risk, failure, critical-concern, increased-effect, absent/high (snp-card). */ --status-critical-surface: var(--color-pink-950); --status-critical-text: var(--text-primary); /* Warning — likely-pathogenic, warning-concern, decreased-effect, reduced/poor (snp-card), repost (autopilot), promotional (replies). */ --status-warning-surface: var(--color-orange-900); --status-warning-text: var(--text-primary); /* Caution — risk-factor, caution-concern, moderate-evidence, intermediate (action), altered-effect, upload (analytics), pending/partial (autopilot). */ --status-caution-surface: var(--color-orange-gene-25-40); --status-caution-text: var(--text-primary); /* Positive — protective, established-evidence, cited-synthesis, normal/beneficial (action), guaranteed (offspring), signup (analytics), posted/success (autopilot). */ --status-positive-surface: var(--color-spring-green-15-40); --status-positive-text: var(--text-primary); /* Info — strong-evidence, fast/rapid (snp-card), running (autopilot), login (analytics), post (autopilot type), other (reply class), guideline marker. */ --status-info-surface: var(--color-azure-33-40); --status-info-text: var(--text-primary); /* Accent — slow (snp-card), thread (autopilot type), payment (analytics), carrier (offspring), hypothetical-synthesis (collapsed from indigo). */ --status-accent-surface: var(--color-violet-35-40); --status-accent-text: var(--text-primary); /* Neutral — benign, default, preliminary-evidence, skipped (autopilot), page-view (analytics). */ --status-neutral-surface: var(--color-grey-800); --status-neutral-text: var(--text-primary); /* Panel surfaces — used by provisional/objects/panel.css. Dark-mode panel contrasts against --background-base (grey-950) by stepping up to surface-1 (grey-900). */ --panel-surface: var(--color-grey-900); --panel-surface-admin: var(--color-grey-800); --panel-surface-subtle: color-mix(in srgb, var(--color-grey-900) 50%, transparent); --panel-border: var(--color-grey-700); } .theme-light { /* Light-mode status palette. All text uses --text-primary (grey-950) for uniform high-contrast readability against the tinted surfaces. */ --status-critical-surface: var(--color-pink-100); --status-critical-text: var(--text-primary); --status-warning-surface: var(--color-orange-100); --status-warning-text: var(--text-primary); --status-caution-surface: var(--color-orange-gene-25-40); --status-caution-text: var(--text-primary); --status-positive-surface: var(--color-spring-green-15-40); --status-positive-text: var(--text-primary); --status-info-surface: var(--color-azure-33-40); --status-info-text: var(--text-primary); --status-accent-surface: var(--color-violet-35-40); --status-accent-text: var(--text-primary); --status-neutral-surface: var(--color-grey-200); --status-neutral-text: var(--text-primary); /* Panel surfaces — light mode. */ --panel-surface: var(--color-white-solid); --panel-surface-admin: var(--color-white-solid); --panel-surface-subtle: var(--color-grey-50); --panel-border: var(--color-grey-200); } /* --- provisional/objects/admin-table.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies the 5 admin-table clones (admin-autopilot-{show, * runs, replies, queue}-table + analytics-events-table) into a single * .admin-table primitive that styles its descendant thead/tbody/th/td * elements via element selectors. Eliminates ~50 per-page sub-element * classes. * * Cell-variation slot classes: * td (default): px-4 py-2 + body text color * td.is-muted: time/position cells (gray + whitespace-nowrap) * td.is-mono: short mono-id cells (font-mono text-xs) * td.is-mono-truncate: long mono-prop cells (truncate + max-w-xs) * tr.is-align-top: rows whose cells should align to top * * Migrate when: gem ships a generic data-table primitive. */ .admin-table { width: 100%; font-size: var(--font-size-14); & thead { background-color: var(--background-surface-1); } & th { text-align: left; padding: var(--spacing-8) var(--spacing-16); color: var(--text-secondary); font-weight: var(--font-weight-500); } & tbody > tr + tr { border-top: var(--stroke-weight-1) solid var(--border-subtle); } & tbody tr:hover { background-color: var(--background-hover); } & tr.is-align-top { vertical-align: top; } & td { padding: var(--spacing-8) var(--spacing-16); color: var(--text-primary); &.is-muted { color: var(--text-tertiary); white-space: nowrap; } &.is-mono, &.is-mono-truncate { font-family: var(--font-family-mono); font-size: var(--font-size-12); color: var(--text-tertiary); } &.is-mono-truncate { max-width: 20rem; /* Note: bespoke truncate width */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &.is-wide { max-width: 28rem; /* Note: bespoke wide cell */ } } } /* --- provisional/objects/back-link.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies 11+ per-page back-link classes (each repeating the * same `inline-flex items-center gap-1 text-sm` recipe with one of two * color families) into a single .back-link primitive plus a .back-link-icon * slot. Two tones cover the families: * - default: prominent teal — remapped to brand pink-600 * - --muted: gray-500/400 hover:gray-700/300 * - --muted-to-teal: gray-500/400 hover:teal-700/400 (MFA pages) * * Migrate when: gem ships a link-back / breadcrumb-back primitive. */ .back-link { display: inline-flex; align-items: center; gap: var(--spacing-4); font-size: var(--font-size-14); color: var(--text-secondary); &:hover { color: var(--text-primary); } &.back-link--muted, &.back-link--muted-to-teal { color: var(--text-tertiary); } &.back-link--muted:hover { color: var(--text-primary); } } html.theme-dark .back-link { color: var(--text-secondary); } html.theme-dark .back-link:hover { color: var(--text-primary); } .back-link-icon { width: 1rem; height: 1rem; } /* --- provisional/objects/badge.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies 24 distinct badge classes across 15 component files * (~110 ERB callsites) into a single .badge primitive with a small, * orthogonal modifier set. Replaces the per-vocabulary classes * (.clinical-badge--*, .evidence-badge--*, .snp-card-status-badge--*, * .admin-autopilot-runs-status-badge--*, etc.) that proliferated as * sibling components evolved. * * The brand gem ships only `.status-pill --benign|--protective| * --pathogenic|--risk-factor` (clinical-significance vocabulary). * This primitive covers 13+ vocabulary axes via 7 semantic tones. * * Tones bind to --status-{tone}-{surface,text} (see settings/_colors.css). * * Migrate when: gem ships a generic badge/pill primitive with the same * tone axes. .badge here aliases to the gem class, then disappears. * The corresponding tokens in settings/_colors.css migrate alongside. */ .badge { display: inline-block; padding: var(--spacing-2) var(--spacing-8); /* py-0.5 px-2 */ border-radius: var(--corner-radius-sm); font-size: var(--font-size-12); /* text-xs */ line-height: 1rem; font-weight: var(--font-weight-500); /* medium */ background-color: var(--status-neutral-surface); color: var(--status-neutral-text); /* Tones */ &.badge--critical { background-color: var(--status-critical-surface); color: var(--status-critical-text); } &.badge--warning { background-color: var(--status-warning-surface); color: var(--status-warning-text); } &.badge--caution { background-color: var(--status-caution-surface); color: var(--status-caution-text); } &.badge--positive { background-color: var(--status-positive-surface); color: var(--status-positive-text); } &.badge--info { background-color: var(--status-info-surface); color: var(--status-info-text); } &.badge--accent { background-color: var(--status-accent-surface); color: var(--status-accent-text); } &.badge--neutral { background-color: var(--status-neutral-surface); color: var(--status-neutral-text); } /* Shape modifiers */ &.badge--pill { border-radius: var(--corner-radius-full); } &.badge--sm { padding: var(--spacing-2) var(--spacing-4); } /* px-1.5 py-0.5 */ } /* --- provisional/objects/container.css --- */ /* objects/_container.css — bounded-width content containers. * * The vertical's ERB uses two container patterns that don't match * brand's `.container` (1296px max + 48px gutter): * - `max-w-6xl mx-auto px-4` (72rem max + 16px gutter) — generic chrome * - `max-w-3xl mx-auto px-4` (48rem max + 16px gutter) — narrow reading width * * Both ship here as named classes so ERB can stop reaching for Tailwind * utilities to assemble them. * * Note: replace when geneops-brand ships a `.container-{wide,narrow}` * size system that covers the 1152px and 768px tiers. */ .container-wide, .container-narrow { width: 100%; margin-inline: auto; padding-inline: var(--spacing-16); box-sizing: border-box; } .container-wide { max-width: var(--width-1296); } /* replaces `max-w-6xl mx-auto px-4` */ .container-narrow { max-width: 48rem; /* Note: 768px tier, not in brand width tokens */ } /* replaces `max-w-3xl mx-auto px-4` */ /* --- provisional/objects/disclosure.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies the
/ disclosure pattern (custom * marker hidden, hover surface, chevron rotation on open, show-when- * open/closed inverse pair) used in actions-results, category-show, * and other expandable sections. Uses native CSS `details[open] > * summary` selectors to scope behavior — nesting is handled correctly * (each summary's chevron/toggles respond to its own parent details). * * Migrate when: gem ships a disclosure primitive. */ .disclosure-summary { cursor: pointer; list-style: none; user-select: none; transition: background-color 0.15s ease; &::-webkit-details-marker { display: none; } &:hover { background-color: var(--background-hover); } } .disclosure-chevron { width: 1.25rem; height: 1.25rem; color: var(--symbol-disabled); transition: transform 0.2s ease; flex-shrink: 0; /* SVGs default to baseline alignment which puts the chevron above the text in non-flex containers (the section-summary toggle row). In flex containers (sub-summary), align-items: center wins and this is a no-op. */ vertical-align: middle; &.disclosure-chevron--sm { width: 1rem; height: 1rem; } } details[open] > summary .disclosure-chevron { transform: rotate(180deg); } /* Show/hide inverse pair — meant for spans inside . */ .disclosure-show-when-open { display: none; } .disclosure-show-when-closed { display: inline; } details[open] > summary .disclosure-show-when-open { display: inline; } details[open] > summary .disclosure-show-when-closed { display: none; } /* --- provisional/objects/form.css --- */ /* objects/_form.css — form structural primitives. * * Replaces the per-page *-form / *-field-label / *-field-input / *-submit * recipes repeated across auth, mfa, invite, connection-share, and * upload forms. Apply on the element directly; tone/color overrides * stay page-local. * * Field label/help styling lives in objects/_text.css (.text-label, * .text-fine-print, .text-sm). This file owns the inputs and submit. * * Note: belongs in the brand gem (universal form chrome every * vertical needs). Move when gem ships an equivalent. */ /* Vertical stack of fields. Mirrors brand's .stack-N but with a fixed * default form-cadence; opt into a tighter cadence with .form-stack--sm. */ .form-stack > * + * { margin-top: var(--spacing-24); } .form-stack--sm > * + * { margin-top: var(--spacing-16); } /* One field row — label above, input below. */ .form-field { display: block; & > label { display: block; margin-bottom: var(--spacing-8); } & > label.is-tight { margin-bottom: var(--spacing-4); } } /* The input itself — full-width padded bordered surface. */ .form-input { width: 100%; padding: var(--spacing-12) var(--spacing-16); border: var(--stroke-weight-1) solid var(--border-default); border-radius: var(--corner-radius-sm); background-color: var(--background-surface-1); color: var(--text-primary); &::placeholder { color: var(--text-tertiary); } &:focus { outline: none; box-shadow: 0 0 0 2px var(--color-pink-600); border-color: var(--color-pink-600); } /* Compact variant for inline forms (mfa-show disable, invite). */ &.form-input--sm { padding: var(--spacing-8) var(--spacing-12); } /* Code-entry variant — centered monospace with letter-spacing * (used by totp + mfa-setup verify). */ &.form-input--code { text-align: center; font-size: var(--font-size-18); line-height: 1.75rem; letter-spacing: 0.1em; font-family: var(--font-family-mono); } } /* Full-width submit button — composes on top of brand .button. * Apply as `class="button button--md button--filled form-submit"`. */ .form-submit { width: 100%; cursor: pointer; } /* --- provisional/objects/link-inline.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies 20+ in-prose teal link classes across components into * a single .link-inline primitive with two hover idioms: * - default: text-teal-700 → brand pink-600 * - --darken: teal-700 hover:teal-900 → pink-600 hover:pink-800 * * Migrate when: gem ships a generic inline-link primitive. */ .link-inline { color: var(--text-primary); text-decoration: none; &:hover { text-decoration: underline; } &.link-inline--darken:hover { text-decoration: none; color: var(--text-hover); } } html.theme-dark .link-inline { color: var(--text-primary); } html.theme-dark .link-inline--darken:hover { color: var(--text-hover); } /* --- provisional/objects/notice.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies notice/banner card recipes (border-2 + colored leading * icon + tone-cascading title/text/link/dismiss children) across * shared/_genome_notices (3 toned variants) + account-show notices/ * banners/flash + page-legal-notice + account-confirm-destroy-warning * into a single .notice primitive with --{warn,info,danger,success, * accent,brand} tone modifiers that cascade to slot children. * * Tones bind to --status-{tone}-{surface,text} (see settings/_colors.css) * — same palette as .badge, so the two primitives stay visually * coherent across the app. * * The brand gem ships no notice/banner equivalent. * * Migrate when: gem ships a notice/alert primitive with matching * tone + slot model. .notice here aliases to the gem class, then * disappears. */ .notice { background-color: var(--panel-surface); border: var(--stroke-weight-2) solid var(--panel-border); border-radius: var(--corner-radius-sm); /* was 0.5rem (8px), off-scale → sm */ padding: var(--spacing-16); margin-bottom: var(--spacing-24); /* Size variant. */ &.notice--lg { padding: var(--spacing-16); border-radius: var(--corner-radius-md); margin-bottom: var(--spacing-0); } /* Tone borders + base text color (cascades to slot children below). * Tones bind to the shared --status-*-{surface,text} palette. We use * the tone's text color for both border and base copy — surface is * reserved for cascading slot children. */ &.notice--warn { border-color: var(--status-warning-text); color: var(--status-warning-text); } &.notice--info { border-color: var(--status-info-text); color: var(--status-info-text); } &.notice--danger { border-color: var(--status-critical-text); color: var(--status-critical-text); } &.notice--success { border-color: var(--status-positive-text); color: var(--status-positive-text); } &.notice--accent { border-color: var(--status-accent-text); color: var(--status-accent-text); } } /* Slots — color is inherited from the notice tone (above). */ .notice-row { display: flex; align-items: flex-start; gap: var(--spacing-12); } .notice-icon { width: 1.25rem; height: 1.25rem; margin-top: var(--spacing-2); flex-shrink: 0; } .notice-body { flex: 1; } .notice-title { font-size: var(--font-size-14); font-weight: var(--font-weight-500); } .notice-text { font-size: var(--font-size-14); margin-top: var(--spacing-4); } .notice-actions { display: flex; align-items: center; gap: var(--spacing-16); margin-top: var(--spacing-8); } .notice-link { display: inline-block; font-size: var(--font-size-14); font-weight: var(--font-weight-500); text-decoration: underline; } .notice-dismiss { font-size: var(--font-size-14); } /* --- provisional/objects/panel.css --- */ /* * Note: app-owned structural primitive. * * Status: unifies 40+ distinct section-card classes across 30+ component * files into a single .panel primitive with an orthogonal modifier set * (size, surface, state, accent border). Replaces the per-page named * variants (.account-show-card, .connections-index-card, .payments-new-card, * .insights-widget, etc.) that proliferated as sibling pages were built. * * The brand gem ships .surface-card with a fixed padding/radius; this * primitive covers the broader padding scale (xs/sm/md/lg/xl plus * responsive sm: breakpoints) and the admin-vs-vertical dark-surface * fork. * * Surface tokens bind to --panel-{surface,surface-admin,surface-subtle, * border} (see settings/_colors.css). Accent borders route through the * shared --status-*-text palette so they stay in sync with notice/badge. * * Migrate when: gem ships a panel primitive with matching size + * surface + clickable modifiers. .panel here aliases to the gem class, * then disappears. The corresponding tokens in settings/_colors.css * migrate alongside. */ .panel { background-color: var(--panel-surface); border: var(--stroke-weight-1) solid var(--panel-border); border-radius: var(--corner-radius-md); } /* Size modifiers — control padding only. */ .panel--xs { padding: var(--spacing-12); } .panel--sm { padding: var(--spacing-16); } .panel--md { padding: var(--spacing-16); } .panel--lg { padding: var(--spacing-24); } .panel--xl { padding: var(--spacing-32); } /* Responsive size modifiers (p-N base → sm:p-N at ≥640px). */ .panel--responsive-md { padding: var(--spacing-16); } .panel--responsive-lg { padding: var(--spacing-16); } .panel--responsive-xl { padding: var(--spacing-32); } @media (min-width: 640px) { .panel--responsive-md { padding: var(--spacing-24); } .panel--responsive-lg { padding: var(--spacing-32); } .panel--responsive-xl { padding: var(--spacing-32); } } /* Surface variants. */ .panel--admin { background-color: var(--panel-surface-admin); } .panel--subtle { background-color: var(--panel-surface-subtle); } /* Radius variant. */ .panel--radius-lg { border-radius: var(--corner-radius-sm); } /* was 0.5rem (8px), off-scale → sm */ /* State variants. */ .panel--flush { padding: var(--spacing-0); overflow: hidden; } .panel--elevated { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .panel--clickable { display: block; transition: box-shadow 0.15s ease-out; } .panel--clickable:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } /* Accent borders (notice-card pattern — full-card variant of .notice). * Tones route through the same --status-*-text palette as .notice. */ .panel--accent-info, .panel--accent-warn, .panel--accent-success, .panel--accent-danger { border-width: var(--stroke-weight-2); } .panel--accent-info { border-color: var(--status-info-text); } .panel--accent-warn { border-color: var(--status-warning-text); } .panel--accent-success { border-color: var(--status-positive-text); } .panel--accent-danger { border-color: var(--status-critical-text); } /* Slot children — apply on descendants of .panel. Collapses the ~60 * per-page *-card-{title,header,split,description,subtitle} recipes. */ .panel-title { font-size: var(--font-size-18); font-weight: var(--font-weight-600); line-height: 1.4; margin-bottom: var(--spacing-16); /* Inside .panel-header / .panel-split the wrapper owns the spacing. */ .panel-header &, .panel-split & { margin-bottom: var(--spacing-0); } } .panel-subtitle { color: var(--text-secondary); margin-top: var(--spacing-4); } .panel-description { color: var(--text-secondary); margin-bottom: var(--spacing-16); } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-16); } .panel-split { display: flex; align-items: center; justify-content: space-between; } /* --- provisional/objects/prose.css --- */ /* objects/_prose.css — minimal prose ruleset. * * Replaces @tailwindcss/typography's `.prose` plugin output (which was * being absorbed via @apply in 13 component classes). Hand-written to * cover the rich-text needs of: * - legal-body (terms/privacy pages) * - agent-doc-prose, message-assistant-bubble (agent chat) * - actions-{list,interaction,consolidated,simple}-prose (action cards) * - reader-card-{article,preview-prose} (paper reader) * - snp-show-{body,preview,genotype-card-explanation}-prose * - category-intro-prose * * Apply by adding `prose` (+ `prose-sm` for the small variant) to the * element's HTML class attribute. Component classes layer color/spacing * overrides on top. * * Note: replace when geneops-brand ships a `.prose` primitive. */ .prose { color: var(--text-primary); /* Width is controlled by the surrounding container (e.g. .measure-740, .app-main); .prose itself doesn't constrain. The previous 65ch cap was making text-heavy pages render at ~520px regardless of wrapper. */ font-size: var(--font-size-16); line-height: 1.75; & p, & ul, & ol, & blockquote { margin-block: 1.25em; } & h1, & h2, & h3, & h4 { font-weight: var(--font-weight-700); line-height: 1.25; margin-top: 1.5em; margin-bottom: 0.5em; } & h1 { font-size: 2.25em; } & h2 { font-size: 1.5em; } & h3 { font-size: 1.25em; } & h4 { font-size: 1em; } & a { color: var(--text-primary); text-decoration: underline; font-weight: var(--font-weight-500); &:hover { color: var(--text-secondary); } } & strong { font-weight: var(--font-weight-600); } & em { font-style: italic; } & ul, & ol { padding-left: 1.625em; } & ul { list-style-type: disc; } & ol { list-style-type: decimal; } & li { margin-block: 0.5em; } & li::marker { color: var(--text-tertiary); } & code { font-family: var(--font-family-mono); font-size: 0.875em; background-color: var(--background-surface-1); padding: 0.125em 0.375em; border-radius: var(--corner-radius-sm); } & pre { background-color: var(--color-grey-900); color: var(--color-grey-100); padding: 1em; border-radius: var(--corner-radius-sm); /* was 0.5rem (8px), off-scale → sm */ overflow-x: auto; font-size: 0.875em; line-height: 1.5; & code { background: transparent; padding: var(--spacing-0); color: inherit; font-size: inherit; border-radius: 0; } } & blockquote { border-left: 4px solid var(--border-subtle); padding-left: 1em; font-style: italic; color: var(--text-secondary); } & hr { border: 0; border-top: var(--stroke-weight-1) solid var(--border-subtle); margin-block: 2em; } & > :first-child { margin-top: var(--spacing-0); } & > :last-child { margin-bottom: var(--spacing-0); } /* Tables — minimal markdown-shaped table styling. Used by legal pages (privacy/terms) and any other long-form content that may include a table. Borders use semantic tokens so the dark fork is automatic. */ & table { width: 100%; border-collapse: collapse; font-size: var(--font-size-14); margin-block: 1.25em; } & thead th { text-align: left; font-weight: var(--font-weight-500); padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) 0; border-bottom: var(--stroke-weight-1) solid var(--border-default); } & tbody td { padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) 0; color: var(--text-secondary); border-bottom: var(--stroke-weight-1) solid var(--border-subtle); } & tbody tr:last-child td { border-bottom: 0; } & thead th:last-child, & tbody td:last-child { padding-right: 0; } /* Definition lists — used for label/value rows (e.g. legal contact). */ & dl { margin-block: 1.25em; display: flex; flex-direction: column; gap: var(--spacing-8); } & dl > div { display: flex; gap: var(--spacing-16); } & dt { color: var(--text-tertiary); width: 8rem; flex-shrink: 0; font-size: var(--font-size-14); } & dd { font-size: var(--font-size-14); } } /* Small variant — used for inline help text, chat messages, card-embedded prose. */ .prose-sm { font-size: var(--font-size-14); line-height: 1.7; & h1 { font-size: 2em; } & h2 { font-size: 1.375em; } & h3 { font-size: 1.125em; } & h4 { font-size: 1em; } & p, & ul, & ol, & blockquote { margin-block: 1.14em; } & li { margin-block: 0.4em; } } /* --- provisional/objects/responsive-overlay.css --- */ /* objects/_responsive-overlay.css — responsive overrides for brand utilities. * * The geneops-brand gem ships desktop-only — no @media rules anywhere * except .headline-xxl. The vertical adapts brand fixed-grid utilities * for narrow viewports. Breakpoints: * - 3-up grids reflow at 1024px (three cards crush before that) * - 2-up grids and rows reflow at 768px * - Stacked cards tighten to 16px gap on mobile (matches container edge) * - .headline-xl/lg + section padding step down below 640px */ /* 3-up grids reflow earlier — three cards crush before 1024px. */ @media (max-width: 1023px) { .grid-3-32 { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); } } /* Tablet and below — collapse remaining multi-col grids to 1 column, allow horizontal rows to wrap, shrink container padding so cards don't touch the viewport edge. Stacked-card gap drops to 16px to match Mikael's mobile rhythm. */ @media (max-width: 767px) { .container { padding-inline: var(--spacing-16); } .grid-2-32, .grid-4-32 { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); } .row-8, .row-12, .row-16, .row-24, .row-32, .row-48 { flex-wrap: wrap; } .padded-48 { padding: var(--spacing-24); } .surface-card { padding: var(--spacing-24); } .bordered-left { border-left: 0; border-top: var(--stroke-weight-1) solid var(--border-subtle); } /* Anchored pills — drop absolute positioning so they push content down instead of clipping. Specifically the "Early bird pricing" pill on the Lifetime card (card-anchor--top-right-inset) overlaps the headline below ~600px. */ .card-anchor--top-right-inset { position: static; white-space: normal; align-self: flex-start; } /* Stats row: 2 per row on mobile instead of 1 (the brand's wrap-24-48 utility otherwise collapses to a single column on narrow viewports). */ .flex-wrap-24-48 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); justify-items: center; padding-block: var(--spacing-32); } /* Surface-card row layouts (CTA banner): stack vertically on mobile. */ .surface-card.row-32 { flex-direction: column; align-items: stretch; } /* List bullets: keep icon + text inline so long text wraps under the text column. */ li.row-8, li.row-12, li.row-16 { flex-wrap: nowrap; & > .icon { flex-shrink: 0; } } } /* Phone — brand 0.3.0 owns .headline-xxl responsive scaling (100→60→32). The vertical still tightens secondary headlines and section padding below 640. */ @media (max-width: 639px) { .headline-xl { font-size: var(--font-size-32); line-height: 1.1; } .headline-lg { font-size: var(--font-size-32); line-height: 1.15; } .subtitle-lg { font-size: var(--font-size-18); line-height: 1.4; } .hero { padding-top: calc(var(--spacing-80) + var(--spacing-24)); padding-bottom: var(--spacing-48); } .section { padding-block: var(--spacing-48); } .section--tight { padding-block: var(--spacing-32); } } /* --- provisional/utilities/animate-highlight.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: brief amber flash applied to newly saved/updated docs in the * agent workspace. Light + dark keyframe variants. * * Migrate when: gem ships an equivalent attention-flash animation token. */ @keyframes highlight-flash { 0% { background-color: var(--color-amber-100); } 100% { background-color: transparent; } } @keyframes highlight-flash-dark { 0% { background-color: color-mix(in srgb, var(--color-amber-900) 40%, transparent); } 100% { background-color: transparent; } } .animate-highlight { animation: highlight-flash 2s ease-out; } .dark .animate-highlight { animation-name: highlight-flash-dark; } /* --- provisional/utilities/drag-active.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: drag-and-drop visual feedback for the genome upload dropzone. * Light + dark variants. * * Migrate when: gem ships a `.drop-target--active` primitive (or * equivalent --background-drop-active / --border-drop-active tokens). */ .drag-active { border-color: var(--color-blue-400); background-color: var(--color-blue-50); } .dark .drag-active { border-color: var(--color-blue-500); background-color: color-mix(in srgb, var(--color-blue-900) 30%, transparent); } /* --- provisional/utilities/input-gradient-focus.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: replaces focus:ring-* on form inputs with the brand's * pink→orange gradient border (same two-layer background-clip trick as * .bordered-gradient-brand). The inner fill follows the input's surface * via --input-fill, which flips between light and html.theme-dark. * * Migrate when: gem ships a `--focus-gradient` token set or a * `.input--gradient-focus` primitive. */ .input-gradient-focus { --input-fill: var(--color-white-solid); } html.theme-dark .input-gradient-focus { --input-fill: var(--color-grey-800); } .input-gradient-focus:focus, .input-gradient-focus:focus-visible { border-color: transparent; background-image: linear-gradient(var(--input-fill), var(--input-fill)), var(--brand-gradient); background-origin: border-box; background-clip: padding-box, border-box; } /* --- provisional/utilities/logo-mono.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: mask-based currentColor logo render used by the logo strip * (`.logo-mono` applied to -like elements with mask-image:url("…")). * * Migrate when: gem ships an equivalent currentColor logo primitive. */ .logo-mono { display: inline-block; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* --- provisional/utilities/nav-progressive-blur.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: progressive backdrop blur for the fixed top nav. Mirrors the * brand's `.site-nav::before` blur effect (12px backdrop-filter on a * pseudo-element masked top-opaque → bottom-transparent) but without * the PNG tint — the vertical wants pure blur, no color overlay. * `position` is intentionally omitted so the element's own `fixed` wins; * the pseudo's `absolute` resolves against the nav as a positioned * ancestor. * * Migrate when: brand exposes a tint-less variant of the same effect. */ .nav-progressive-blur { isolation: isolate; } .nav-progressive-blur::before { content: ""; position: absolute; inset: var(--spacing-0); bottom: -5rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%); mask-image: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%); pointer-events: none; z-index: -1; } /* --- provisional/utilities/object-utilities.css --- */ /* * Generic display/visibility utilities not yet in the Mikael-blessed * canonical set. Most of these formerly lived in the home vertical's * objects/_utilities.css. Promote individually as Mikael adds them to * Figma. Duplicates of canonical (.text-center, .uppercase, .truncate, * .grow, .no-underline) were dropped on migration. */ .hidden { display: none; } /* Align-items override modifiers for canonical .row-N (which defaults to center). Parallels canonical's .row-between / .row-end. */ .row-start { align-items: flex-start; } .row-baseline { align-items: baseline; } .row-center { justify-content: center; } .shrink-0 { flex-shrink: 0; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-80 { opacity: 0.8; } /* Responsive hide. `-sm-` breakpoint is 40rem; `-lg-` is 64rem. `-down` hides at and below; `-up` hides at and above. */ @media (max-width: 39.99rem) { .hidden-sm-down { display: none; } } @media (min-width: 40rem) { .hidden-sm-up { display: none; } } @media (max-width: 63.99rem) { .hidden-lg-down { display: none; } } @media (min-width: 64rem) { .hidden-lg-up { display: none; } } /* --- provisional/utilities/scrollbar-hidden.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: two names for the same behavior coexist (`.scrollbar-hidden` from * the legacy app/assets/stylesheets/application.css and `.scrollbar-hide` * from app/assets/tailwind/application.css). Different callsites use each. * * Migrate when: gem ships a `.scrollbar-hide` utility, OR phase-3 * consolidation picks one name and the markup is updated to match. */ .scrollbar-hidden, .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } /* --- provisional/utilities/sidenote.css --- */ /* * Note: app-owned utility — gem has no equivalent. * * Status: Tufte-style sidenotes for the annotated article / paper view. * The .sidenote-ref inline marker is visible at all viewports; the * .sidenote body floats into the right margin only at >=64rem. * * Migrate when: gem ships a sidenote object/component (unlikely — this * is content-specific and may live here long-term). */ .sidenote-ref { color: var(--color-teal-700); font-weight: var(--font-weight-600); font-size: var(--font-size-12); margin-left: 1px; cursor: default; } .dark .sidenote-ref { color: var(--color-teal-400); } .sidenote { display: none; } @media (min-width: 64rem) { .annotated-prose { padding-right: 10rem; } .sidenote { display: block; float: right; clear: right; width: 9rem; margin: var(--spacing-0) -10rem var(--spacing-12) var(--spacing-8); font-size: var(--font-size-12); line-height: 1.4; color: var(--color-gray-500); & sup { color: var(--color-teal-700); font-weight: var(--font-weight-600); margin-right: var(--spacing-2); } & a { color: var(--color-teal-700); word-break: break-all; &:hover { color: var(--color-teal-900); } } } .dark .sidenote { color: var(--color-gray-400); } .dark .sidenote sup, .dark .sidenote a { color: var(--color-teal-400); } .dark .sidenote a:hover { color: var(--color-teal-300); } .sidenote-annotation { display: block; margin-top: var(--spacing-2); color: var(--color-gray-500); } .dark .sidenote-annotation { color: var(--color-gray-400); } } /* --- provisional/utilities/turbo-frame.css --- */ /* utilities/_turbo-frame.css — Dim turbo-frame contents while loading. * * Targets the framework's own attribute selector, not a utility class. * Loaded last to override any per-frame styling on the dimmed state. */ turbo-frame[busy] { opacity: 0.4; pointer-events: none; transition: opacity 0.15s ease-out; }