/*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Base Styles (Dark Theme) */ /*------------------------------------------------------------------------------------------*/ /* Atkinson Hyperlegible — self-hosted (Braille Institute legibility font). woff2, latin + latin-ext, 400/700 upright+italic. */ @font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latin-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latinext-400.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latin-400italic.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latinext-400italic.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latin-700.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latinext-700.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:700; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latin-700italic.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:700; font-display:swap; src:url("/static/fonts/AtkinsonHyperlegible-latinext-700italic.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Visitor text size. --mh-fs is set by the 🎨 picker's A/A/A row; the data-font attribute is applied pre-paint in each page's snippet so the page never reflows after first render. Unset = 1 = the browser's default 16px root, so nothing moves for existing visitors. */ html { font-size: calc(16px * var(--mh-fs, 1)); } :root[data-font="small"] { --mh-fs: 0.9; } :root[data-font="large"] { --mh-fs: 1.15; } body { max-width: 1600px; font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background-color: #000000; color: #f5f5f5; margin: 0; padding: 0 40px; line-height: 1.7; } /* Article/content text — Atkinson Hyperlegible reads large; 20px / 1.8 line-height for readability (chosen font test #3) */ main { font-size: 1.25rem; line-height: 1.8; } a { color: #00d4ff; text-decoration: none; transition: color 0.2s ease; } a:hover { color: #f39c12; text-decoration: underline; background-color: transparent; } /* External links (leaving myhealthcare.com), no-theme fallback — mirrors the themed rule in skin117.css. target="_blank" is already the site-wide convention for every outbound link, so it doubles as a reliable "is this external" selector. Resting color is the hover color and vice versa, plus a small arrow marker. See skin117.css for the .fv-ext-link/.fv-ext-all note. */ main a[target="_blank"] { color: #f39c12; } main a[target="_blank"]:hover { color: #00d4ff; } main a[target="_blank"]::after { content: "\00a0\2197"; font-size: 0.75em; opacity: 0.75; } main a[target="_blank"].fv-ext-link::after, main a[target="_blank"].fv-ext-all::after { content: none; } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Typography */ /*------------------------------------------------------------------------------------------*/ h1 { color: #00d4ff; font-size: 1.75rem; font-weight: 700; border-bottom: 3px solid #0f3460; padding-bottom: 10px; margin-bottom: 20px; } h2 { color: #e74c3c; font-size: 1.375rem; font-weight: 600; border-left: 4px solid #e74c3c; padding-left: 12px; margin-top: 30px; margin-bottom: 14px; } h3 { color: #2ecc71; font-size: 1.125rem; font-weight: 600; margin-top: 22px; margin-bottom: 10px; } h4 { color: #bb86fc; font-size: 1rem; font-weight: 600; } ul, ol { margin: 0 0 20px 20px; padding-left: 10px; color: #f5f5f5; } li { margin-bottom: 8px; color: #f5f5f5; line-height: 1.6; } p { color: #f5f5f5; margin: 8px 0; line-height: 1.7; } strong { color: #1E90FF !important; /* color: #6495ED !important; */ font-weight: 500; } a strong, strong a { color: #00d4ff !important; } em { color: #aab0b8; } hr { border: none; border-top: 2px solid #2a2a4a; margin: 24px 0; } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Tables */ /*------------------------------------------------------------------------------------------*/ table { width: 100%; border-collapse: collapse; margin: 20px 0; background-color: #16261e; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } caption { caption-side: top; text-align: left; padding: 10px 14px; margin-bottom: 8px; color: #bce8cf; font-size: 0.8125rem; font-style: italic; line-height: 1.5; border-left: 3px solid #1f7a4d; background-color: #0f1f17; border-radius: 4px; } th { background: #1f7a4d; color: #eafff2; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; border-bottom: 2px solid #14532b; } td { padding: 10px 16px; border-bottom: 1px solid #2c4d3a; color: #e6f0ea; font-size: 0.875rem; } tr:nth-child(even) { background-color: #1c3326; } tr:hover { background-color: #244430; } table, th, td { border: 1px solid #2c4d3a; } /*------------------------------------------------------------------------------------------*/ /* Lab Test Range Bars */ /*------------------------------------------------------------------------------------------*/ .range-bar { display: flex; width: 100%; height: 34px; border-radius: 6px; overflow: hidden; margin: 8px 0 16px 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .range-bar .r-low { background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 2px 6px; line-height: 1.2; } .range-bar .r-normal { background: linear-gradient(135deg, #1e8449, #27ae60); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; flex: 2; padding: 2px 6px; line-height: 1.2; } .range-bar .r-high { background: linear-gradient(135deg, #d35400, #e67e22); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 2px 6px; line-height: 1.2; } .range-bar .r-optimal { background: linear-gradient(135deg, #1a6fb5, #2e86c1); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1.5; padding: 2px 6px; line-height: 1.2; border-left: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); } .range-label { font-size: 0.875rem; font-weight: 700; color: #00d4ff; margin: 16px 0 2px 0; } .range-unit { font-size: 0.75rem; color: #888; font-weight: 400; margin-left: 6px; } /* Lab test reference table */ .lab-ref-table td:first-child { font-weight: 600; color: #00d4ff; white-space: nowrap; } .lab-ref-table .cell-low { background-color: #3b1520; color: #f1948a; text-align: center; font-weight: 600; } .lab-ref-table .cell-normal { background-color: #0e3320; color: #82e0aa; text-align: center; font-weight: 600; } .lab-ref-table .cell-high { background-color: #3b2508; color: #f8c471; text-align: center; font-weight: 600; } .lab-ref-table .cell-optimal { background-color: #0a2a4a; color: #85c1e9; text-align: center; font-weight: 600; } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Form Elements */ /*------------------------------------------------------------------------------------------*/ input[type="text"] { width: 750px; height: 40px; padding: 10px 15px; font-size: max(16px, 1.125rem); border: 2px solid #0f3460; border-radius: 6px; background-color: #16213e; color: #e0e0e0; transition: border-color 0.3s ease, box-shadow 0.3s ease; } input[type="text"]:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2); } input[type="submit"] { height: 44px; font-size: 1.125rem; padding: 10px 30px; background: linear-gradient(135deg, #27ae60, #219a52); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s ease, transform 0.1s ease; } input[type="submit"]:hover { background: linear-gradient(135deg, #219a52, #1e8449); transform: translateY(-1px); } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Footer */ /*------------------------------------------------------------------------------------------*/ .footer { text-align: center; margin-top: 50px; padding: 10px 20px; background: linear-gradient(135deg, #0a1628, #0f3460); color: #e0e0e0; font-size: 1rem; font-weight: normal; border-top: 3px solid #00d4ff; } .footer p { margin: 5px 0; color: #e0e0e0 !important; } .footer a { color: #00d4ff !important; text-decoration: none; } .footer a:hover { color: #f39c12 !important; text-decoration: underline; } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Code Blocks */ /*------------------------------------------------------------------------------------------*/ code { background-color: #16213e; padding: 2px 6px; border-radius: 4px; color: #f39c12; font-family: "JetBrains Mono", Consolas, "Courier New", monospace; font-size: 0.9em; border: 1px solid #0f3460; } pre { background-color: #0a1628; padding: 16px; border-radius: 6px; overflow-x: auto; color: #e8edf2; font-family: "JetBrains Mono", Consolas, "Courier New", monospace; line-height: 1.5; border-left: 4px solid #00d4ff; } /*------------------------------------------------------------------------------------------*/ /* MyHealthcare — Video Grid */ /*------------------------------------------------------------------------------------------*/ .video-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin: 20px 0; } .video-item { display: flex; flex-direction: column; background: #16213e; border-radius: 8px; overflow: hidden; border: 1px solid #0f3460; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .video-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 212, 255, 0.15); } .video-item img { max-width: 100%; height: auto; display: block; margin: 0; padding: 0; } .video-item a { text-decoration: none; color: #00d4ff; font-weight: 600; } .video-item a:hover { text-decoration: underline; color: #f39c12; } .video-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a1628; overflow: hidden; } .video-media img, .video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .video-description { margin: 0; padding: 12px 16px; font-size: 0.875rem; color: #b0b8c4; font-weight: 500; line-height: 1.4; } /*------------------------------------------------------------------------------------------*/ /* Mobile Responsive */ /*------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1200px) { body { width: 100%; max-width: 1600px; padding: 0; } main { padding: 12px !important; } table { width: 100% !important; display: block; overflow-x: auto; } img { max-width: 100%; height: auto; } .video-container { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px; } pre { overflow-x: auto; font-size: 0.85em; } } @media screen and (max-width: 900px) { .video-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; } } @media screen and (max-width: 600px) { body { font-size: 0.9375rem; line-height: 1.6; } h1 { font-size: 1.6em; } h2 { font-size: 1.3em; } h3 { font-size: 1.15em; } .video-container { grid-template-columns: 1fr !important; gap: 12px; } .video-description { font-size: 0.9375rem; padding: 14px 16px; } } /*------------------------------------------------------------------------------------------*/ /* Connections bar — horizontal pill-nav for related pages (dark theme) */ .connections-bar { margin: 15px 0 25px 0; padding: 12px 16px; background: #16213e; border-left: 4px solid #00d4ff; border-radius: 4px; } .connections-bar .connections-label { font-weight: 700; color: #5ce1ff; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.06em; margin-right: 10px; } .connections-bar a { display: inline-block; padding: 5px 14px; margin: 3px 4px 3px 0; background: #243b6b; border: 1px solid #4a6aa8; border-radius: 16px; color: #ffffff !important; text-decoration: none; font-size: 0.92em; font-weight: 500; white-space: nowrap; transition: all 0.2s ease; } .connections-bar a:hover { background: #0f3460; color: #5ce1ff !important; border-color: #5ce1ff; } /*------------------------------------------------------------------------------------------*/ /* Editorial Note — warm-amber callout for editorial/research-disclosure asides (dark theme) */ .editorial-note { border-left: 4px solid #f39c12; background: #2a1f0d; padding: 16px 20px; margin: 0 0 24px 0; border-radius: 6px; color: #f5e6cc; } .editorial-note p { margin: 0; color: #f5e6cc; line-height: 1.75; } .editorial-note p + p { margin-top: 10px; } .editorial-note strong { color: #f39c12 !important; } .editorial-note em { color: #ffd089; } .editorial-note a { color: #ffcc66; } .editorial-note a:hover { color: #ffe199; } /*------------------------------------------------------------------------------------------*/ /* 3-column newspaper-flow layout — used by Table of Contents and Connections */ ol.toc-grid, ul.toc-grid, ol.connections-grid, ul.connections-grid { display: block; column-count: 3; column-gap: 40px; padding-left: 1.8em; margin: 0 0 1.5em 0; } ol.toc-grid li, ul.toc-grid li, ol.connections-grid li, ul.connections-grid li { break-inside: avoid; margin: 0 0 8px 0; padding-left: 4px; line-height: 1.45; } @media (max-width: 900px) { ol.toc-grid, ul.toc-grid, ol.connections-grid, ul.connections-grid { column-count: 2; } } @media (max-width: 500px) { ol.toc-grid, ul.toc-grid, ol.connections-grid, ul.connections-grid { column-count: 1; } } /*------------------------------------------------------------------------------------------*/ /* Connections links as pills — the same chip treatment as .connections-bar, so the Connections list at the foot of a page reads as the same component as the sibling row under the

. Applies to Connections only; the TOC keeps its numbered indent. The 3-column newspaper flow above is deliberately kept rather than switched to a flex-wrap cloud: 2,742 entries across 932 pages carry a trailing "— explanation" after the link, and a cloud strands that prose between unrelated pills. In a column the pill leads and its explanation wraps beneath it. No `white-space: nowrap` here, unlike .connections-bar: a column is ~373px at the site's 1200px width, so long labels must wrap rather than overflow. */ ul.connections-grid, ol.connections-grid { list-style: none; padding-left: 0; } ul.connections-grid li > a, ol.connections-grid li > a { display: inline-block; padding: 5px 14px; margin: 0 4px 3px 0; background: #243b6b; border: 1px solid #4a6aa8; border-radius: 16px; /* !important mirrors .connections-bar a — skin117.css sets `html[data-theme] a`, which outranks a bare class selector and would repaint pill text on all themes. */ color: #ffffff !important; text-decoration: none; font-size: 0.92em; font-weight: 500; transition: all 0.2s ease; } ul.connections-grid li > a:hover, ol.connections-grid li > a:hover { background: #0f3460; color: #5ce1ff !important; border-color: #5ce1ff; } /*------------------------------------------------------------------------------------------*/ /* Herb hero image — top-right floated thumbnail with click-to-fullscreen */ .herb-hero { float: right; width: 320px; max-width: 40%; margin: 0 0 16px 24px; cursor: zoom-in; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform .2s ease, box-shadow .2s ease; } .herb-hero:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .herb-hero-figure { float: right; width: 320px; max-width: 40%; margin: 0 0 16px 24px; } .herb-hero-figure .herb-hero { float: none; width: 100%; max-width: 100%; margin: 0; display: block; } .herb-hero-figure figcaption { font-size: 0.85em; color: #666; margin-top: 8px; font-style: italic; text-align: center; } @media (max-width: 600px) { .herb-hero { float: none; width: 100%; max-width: 100%; margin: 0 0 16px 0; } .herb-hero-figure { float: none; width: 100%; max-width: 100%; margin: 0 0 16px 0; } } .herb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; padding: 20px; overflow: hidden; } .herb-lightbox.open { display: flex; } .herb-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 24px rgba(0,0,0,0.5); cursor: zoom-in; transform-origin: center center; touch-action: none; user-select: none; -webkit-user-drag: none; } .herb-lightbox-close { position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; background: #fff; color: #111; border: none; border-radius: 50%; font-size: 32px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 0; font-family: inherit; box-shadow: 0 2px 12px rgba(0,0,0,0.55); transition: background-color .15s ease, transform .15s ease; } .herb-lightbox-close:hover { background: #f1f1f1; transform: scale(1.06); } .herb-lightbox-close:focus-visible { outline: 3px solid #4a90e2; outline-offset: 2px; } body.herb-lightbox-open { overflow: hidden; } /* Horizontal herb slideshow on Herbs landing page (dark theme) */ .herb-slideshow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px 0; } .herb-slide { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #1e2d50; border-radius: 10px; background: #16213e; text-decoration: none; color: inherit; transition: background .25s ease, border-color .25s ease, transform .25s ease; opacity: 0; animation: herbSlideFade .8s ease forwards; } .herb-slide:hover { background: #1e2d50; border-color: #00d4ff; transform: translateY(-2px); } .herb-slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: 6px; } .herb-slide-text { min-width: 0; } .herb-slide-text h3 { margin: 0 0 6px 0; font-size: 1.15em; color: #00d4ff; } .herb-slide-text h3 em { color: #aab0b8; font-weight: normal; font-size: 0.85em; } .herb-slide-text p { margin: 0; font-size: 0.95em; line-height: 1.45; color: #e0e0e0; } @keyframes herbSlideFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .herb-slideshow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .herb-slideshow { grid-template-columns: 1fr; } } /*------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------*/ /* Interactive-visualization call-to-action */ /* Links a content article to the animated /Biology/Visualization/ page that explains its mechanism. */ /* Themed in skin117.css — keep both in sync when editing. */ /*------------------------------------------------------------------------------------------*/ .viz-cta { display: flex; align-items: center; gap: 16px; margin: 22px 0; padding: 16px 18px; background: #16213e; border: 1px solid #0f3460; border-left: 4px solid #00d4ff; border-radius: 8px; text-decoration: none; transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s; } .viz-cta:hover { border-color: #00d4ff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 212, 255, 0.16); } .viz-cta-icon { flex: 0 0 auto; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 1.9em; background: #0a1628; border: 1px solid #0f3460; border-radius: 50%; position: relative; } .viz-cta-icon::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); animation: vizCtaPulse 1.9s infinite; } @keyframes vizCtaPulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } .viz-cta-txt { flex: 1 1 auto; min-width: 0; } .viz-cta-kicker { display: block; color: #5ce1ff; font-weight: 700; text-transform: uppercase; font-size: 0.74em; letter-spacing: 0.09em; margin-bottom: 3px; } .viz-cta-title { display: block; color: #00d4ff; font-weight: 700; font-size: 1.09em; line-height: 1.35; margin-bottom: 3px; } .viz-cta:hover .viz-cta-title { color: #5ce1ff; } .viz-cta-desc { display: block; color: #aab0b8; font-size: 0.93em; line-height: 1.5; } .viz-cta-go { flex: 0 0 auto; color: #2ecc71; font-weight: 700; font-size: 0.9em; white-space: nowrap; } @media (max-width: 700px) { .viz-cta { flex-wrap: wrap; gap: 12px; } .viz-cta-go { flex-basis: 100%; } } /*------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------*/ /* Homepage strip promoting the interactive visualizations. */ /* Generated by web/build-viz-index.py. Also styles "Browse the Health Library" on the homepage; the 137-chip VIZ-STRIP it was written for moved to the top of /Biology/ on 2026-08-23. */ /* Themed in skin117.css — keep both in sync when editing. */ /*------------------------------------------------------------------------------------------*/ .viz-strip { margin: 0 0 30px 0; padding: 18px 20px; background: #16213e; border: 1px solid #0f3460; border-left: 4px solid #00d4ff; border-radius: 8px; } .viz-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .viz-strip h2 { margin: 0; color: #00d4ff; font-size: 1.25em; border: 0; padding: 0; } .viz-strip-all { color: #2ecc71; font-weight: 700; font-size: 0.9em; text-decoration: none; white-space: nowrap; } .viz-strip-all:hover { color: #f39c12; } .viz-strip-lede { margin: 0 0 14px 0; color: #aab0b8; font-size: 0.97em; line-height: 1.5; } .viz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .viz-chip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: #0a1628; border: 1px solid #0f3460; border-radius: 8px; text-decoration: none; transition: border-color 0.15s, transform 0.12s; } .viz-chip:hover { border-color: #00d4ff; transform: translateY(-2px); } .viz-chip-icon { font-size: 1.3em; line-height: 1; flex: 0 0 auto; } .viz-chip-name { color: #e0e0e0; font-size: 0.9em; font-weight: 600; line-height: 1.25; } .viz-chip:hover .viz-chip-name { color: #00d4ff; } @media (max-width: 600px) { .viz-chips { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /*------------------------------------------------------------------------------------------*/ /* ============================================================================ CROSS-LINK CAPSULES (.mh-pills / .mh-pill) ---------------------------------------------------------------------------- Two-tone capsules, split down the middle like a real medicine capsule. Used for every cross-link cluster on the site: herb -> conditions, condition -> herbs, and any future "related topics" row. The LEFT half carries the EVIDENCE TIER as colour. That matters: an undifferentiated list of "herbs for this condition" puts a herb with randomised-trial support next to one with nothing but folklore, and a reader cannot tell them apart. Here they are visibly different at a glance. COLOUR CHOICE IS CONTRAST-DRIVEN, NOT AESTHETIC. Text runs across the seam, so white must be legible on BOTH halves. The obvious bright picks all fail WCAG AA (#34c759 green = 2.22:1, #ffb020 amber = 1.83:1, #ff453a red = 3.41:1). These were computed instead — every one clears 4.5:1 against white: clinical #3d6b4e 6.16:1 right half #2e3648 12.09:1 preliminary #756141 5.93:1 traditional #4a5a73 7.00:1 caution #9c504a 5.74:1 Muted deliberately (2026-07-26, owner: "don't have to be so vibrant") — every hue sits near HALF its original saturation. Note that desaturating DOWNWARD in lightness improved contrast rather than hurting it, so the muted set is both calmer and more legible than the saturated one. Do not "brighten these up" without re-running the contrast maths. The seam is a hard gradient stop at 50%, which reads as a moulded capsule join rather than a fade. Colours are fixed rather than themed, for the same reason the yellow Benefits pill is fixed: they carry meaning, so they must not be repainted by the active theme. Every selector is doubled with `html[data-theme]` because skin117.css's `html[data-theme] a` outranks a plain class selector and would otherwise recolour the text. ========================================================================== */ .mh-pills, html[data-theme] .mh-pills{ list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 8px 0; padding: 14px 16px; background: var(--surface, #16213e); border-left: 4px solid var(--accent, #00d4ff); border-radius: 4px; } .mh-pills > li{ margin: 0; padding: 0; } .mh-pill, html[data-theme] .mh-pill{ display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,.35); color: #ffffff !important; text-decoration: none; font-size: 0.92em; font-weight: 600; line-height: 1.5; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.30); background: linear-gradient(90deg, #4a5a73 0 50%, #2e3648 50% 100%); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .mh-pill:hover, .mh-pill:focus-visible, html[data-theme] .mh-pill:hover{ transform: translateY(-1px); filter: brightness(1.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.38); color: #ffffff !important; } .mh-pill:focus-visible{ outline: 3px solid var(--accent, #00d4ff); outline-offset: 2px; } /* Evidence tiers — left half only; right half stays constant so the row reads as one family of objects rather than four unrelated buttons. */ .mh-pill--clinical, html[data-theme] .mh-pill--clinical{ background: linear-gradient(90deg, #3d6b4e 0 50%, #2e3648 50% 100%); } .mh-pill--preliminary, html[data-theme] .mh-pill--preliminary{ background: linear-gradient(90deg, #756141 0 50%, #2e3648 50% 100%); } .mh-pill--traditional, html[data-theme] .mh-pill--traditional{ background: linear-gradient(90deg, #4a5a73 0 50%, #2e3648 50% 100%); } .mh-pill--caution, html[data-theme] .mh-pill--caution{ background: linear-gradient(90deg, #9c504a 0 50%, #2e3648 50% 100%); } .mh-pills-legend, html[data-theme] .mh-pills-legend{ display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 24px 4px; font-size: .8em; opacity: .9; } .mh-pills-legend span{ display: inline-flex; align-items: center; gap: 7px; } .mh-pills-legend i{ width: 26px; height: 13px; border-radius: 999px; display: inline-block; font-style: normal; border: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); background: linear-gradient(90deg, #4a5a73 0 50%, #2e3648 50% 100%); } .mh-pills-legend .t-clinical i { background: linear-gradient(90deg,#3d6b4e 0 50%,#2e3648 50% 100%); } .mh-pills-legend .t-preliminary i{ background: linear-gradient(90deg,#756141 0 50%,#2e3648 50% 100%); } .mh-pills-legend .t-traditional i{ background: linear-gradient(90deg,#4a5a73 0 50%,#2e3648 50% 100%); } .mh-pills-legend .t-caution i { background: linear-gradient(90deg,#9c504a 0 50%,#2e3648 50% 100%); } @media (max-width: 700px){ .mh-pills, html[data-theme] .mh-pills{ padding: 12px; gap: 8px; } .mh-pill, html[data-theme] .mh-pill { font-size: .88em; padding: 6px 13px; } } @media (prefers-reduced-motion: reduce){ .mh-pill{ transition: none; } .mh-pill:hover{ transform: none; } } /* ============================================================================ MASTHEAD PRINCIPLE (.mh-creed) ---------------------------------------------------------------------------- The Schloendorff quotation at the top of the homepage. This is a standing statement of what the site is for, not a notice — so it must read quieter than the breaking-news strip directly beneath it. Hence no fill, no border box, no animation: just a hairline rule, italic type and a small attribution. Every selector is doubled with `html[data-theme]` because skin117.css sets `html[data-theme] a { color: var(--accent) }` at (0,2,1), which outranks a plain class selector and would otherwise repaint the citation link. That trap cost a broken mobile banner earlier — see web/set-breaking-news.py. ========================================================================== */ .mh-creed, html[data-theme] .mh-creed{ margin: 0 0 18px 0; padding: 16px 20px 14px 20px; border-top: 1px solid var(--border, #2a3550); border-bottom: 1px solid var(--border, #2a3550); text-align: center; } .mh-creed p, html[data-theme] .mh-creed p{ margin: 0; font-style: italic; font-size: 1.12em; line-height: 1.55; color: var(--text, #e8eef8); } .mh-creed cite, html[data-theme] .mh-creed cite{ display: block; margin-top: 8px; font-style: normal; font-size: .8em; letter-spacing: .04em; text-transform: uppercase; opacity: .72; color: var(--text, #e8eef8); } .mh-creed a, html[data-theme] .mh-creed a{ color: inherit !important; text-decoration: none; border-bottom: 1px dotted currentColor; } .mh-creed a:hover, html[data-theme] .mh-creed a:hover{ color: var(--accent, #00d4ff) !important; border-bottom-color: currentColor; } /* The gloss under the citation: why an old consent ruling heads a health library. It is commentary, not a second quotation, so it drops the italic and steps down from 1.12em — otherwise the two paragraphs read as one long quote and the attribution stranded between them looks like a typo. Written `.mh-creed p.mh-creed-note`, not `.mh-creed-note`, on purpose: a bare class is (0,1,0) and would LOSE to `.mh-creed p` at (0,1,1) above, inheriting the very italic it exists to remove. Same reason the themed twin carries the full `html[data-theme] .mh-creed p` prefix — it has to clear (0,2,1). It runs the full width of the quote above it and is deliberately UNCAPPED. It previously carried max-width:70ch as a readable-measure cap, which is what forced it onto three lines and made it read as a narrow column pasted under a full-width quote. Removing the cap is the whole fix: measured across 1280–1920px the gloss is two lines at every size from .95em down. .9em rather than .95em only buys the 1024px band (2 lines instead of 3); from 900px down it is three lines at any size, which is correct — the quote itself goes to two lines there and the whole block is simply narrower. Careful measuring this: body is max-width:1600px and FLUID below that, so a probe that hardcodes a container width measures the wrong thing (an earlier pass forced 1200px and drew the wrong conclusion). The font files must also be served same-origin or Atkinson silently falls back to DejaVu and every number shifts. Probe pattern: web/megamenu-measure.py. */ .mh-creed p.mh-creed-note, html[data-theme] .mh-creed p.mh-creed-note{ margin: 14px auto 0 auto; font-style: normal; font-size: .9em; line-height: 1.6; opacity: .86; /* Justified, so both edges form straight vertical lines and this reads as a paragraph block rather than ragged centred prose. It must override the text-align:center inherited from .mh-creed, which is what left the second line floating as a short centred orphan under a full-width first line. Do NOT add text-wrap:balance here — balance shortens both lines and justify then stretches them back out, opening huge word gaps. */ text-align: justify; } @media (max-width: 700px){ .mh-creed, html[data-theme] .mh-creed{ padding: 13px 12px 11px 12px; } .mh-creed p, html[data-theme] .mh-creed p{ font-size: 1.02em; } .mh-creed cite, html[data-theme] .mh-creed cite{ font-size: .74em; } .mh-creed p.mh-creed-note, html[data-theme] .mh-creed p.mh-creed-note{ font-size: .89em; margin-top: 11px; } }