/* ========================================================================== Bioregulator Peptides — global stylesheet Single source of truth for every page. All layout is expressed as shared component classes; the HTML templates carry NO inline styles (except the image-slot background image, which is genuinely dynamic). ========================================================================== */ /* Fonts: IBM Plex Mono. Helvetica Neue is system-provided. The also adds a Google Fonts ; this @import is a belt-and-braces fallback. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------------------------------------------------------------- Reset -- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: #35576f; color: #fff; } /* --------------------------------------------------------------- Tokens -- */ :root { /* colour */ --ink: #1b232b; /* headings, strong text, dark bg */ --body: #4c545b; /* paragraph copy */ --body-dark: #3f474e; /* darkest body (article prose) */ --body-soft: #5c635e; /* card notes */ --muted: #868d93; /* captions, meta, mono labels */ --muted-2: #6d747a; /* slightly darker muted */ --accent: #35576f; /* eyebrows, links, primary buttons */ --accent-hover: #2b475b; /* primary button hover */ --accent-hover-d: #4a6f8b; /* button hover on dark panels */ --page: #ffffff; /* base background */ --panel: #fbfbfc; /* card hover, credibility strip, filter bar */ --band: #f4f5f6; /* mechanism band, blockquotes, disclaimer */ --img-ph: #eef0f1; /* image placeholder background */ --hairline: #e5e7e9; /* section dividers, card borders */ --border-strong: #1b232b; /* directory heading underline, CTA divider */ --border-input: #cbd0d4; /* ghost button border */ --border-chip: #d8dcdf; /* inactive chip / media border */ /* footer palette (on dark) */ --footer-bg: #1b232b; --footer-text: #c3c9ce; --footer-muted: #8b939a; --footer-label: #6a727a; --footer-rule: #2c353e; /* type */ --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* rhythm */ --rail-max: 1280px; --rail-pad: 56px; /* consistent left/right content edge */ --gap: 24px; --header-h: 81px; /* sticky header height; filter bar / sticky offsets */ } /* --------------------------------------------------------------- Base ---- */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--page); line-height: 1.6; overflow-wrap: break-word; /* never let long tokens push the page sideways */ } strong { font-weight: 600; color: var(--ink); } /* ====================================================== Layout primitives = */ /* Content rail — the single consistent left/right edge on every section. */ .rail { max-width: var(--rail-max); margin: 0 auto; padding: 0 var(--rail-pad); } /* 12-column grid + span/placement helpers (generic; semantic region classes below handle the tricky layouts and their own responsive collapse). */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .col-1 { grid-column-end: span 1; } .col-2 { grid-column-end: span 2; } .col-3 { grid-column-end: span 3; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-9 { grid-column-end: span 9; } .col-10 { grid-column-end: span 10; } .col-11 { grid-column-end: span 11; } .col-12 { grid-column-end: span 12; } .start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; } .start-10 { grid-column-start: 10; } .start-11 { grid-column-start: 11; } .start-12 { grid-column-start: 12; } /* Vertical section rhythm + optional dividers / bands. */ .section { padding: 64px 0; } .section--hero { padding: 70px 0 56px; } .section--tight { padding: 26px 0; } .section-line { border-bottom: 1px solid var(--hairline); } .section-line-t { border-top: 1px solid var(--hairline); } .band { background: var(--band); } .panel-bg { background: var(--panel); } /* ==================================================== Shared typography == */ .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .hero-h1 { font-weight: 700; font-size: clamp(34px, 8vw, 60px); line-height: 1.03; letter-spacing: -.03em; text-wrap: balance; } .page-title { font-weight: 700; font-size: clamp(32px, 7vw, 52px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } .h2 { font-weight: 700; font-size: clamp(24px, 4.5vw, 34px); letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; } .h2--sm { font-size: clamp(22px, 4vw, 28px); } /* Sub-heading within long-form detail articles (evidence sub-sections, FAQ). */ .h3 { font-weight: 700; font-size: clamp(17px, 2.6vw, 20px); letter-spacing: -.01em; line-height: 1.3; margin: 30px 0 8px; } /* FAQ question / answer pair. */ /* FAQ questions are h3 elements so they are real document structure and can carry FAQPage schema, but they keep the lighter question look rather than the full .h3 sub-heading weight. */ .faq-q { font-weight: 600; font-size: 17px; letter-spacing: normal; line-height: 1.5; color: var(--ink); margin: 22px 0 4px; } .lede { font-size: 18px; line-height: 1.62; color: var(--body); text-wrap: pretty; } .body-copy { font-size: 17px; line-height: 1.72; color: var(--body-dark); } .body-copy + .body-copy { margin-top: 18px; } /* ============================================================= Buttons === */ .btn-primary, .btn-ghost, .btn-dark { display: inline-block; padding: 14px 24px; font-size: 14px; font-weight: 600; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; min-height: 44px; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-input); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-dark { background: var(--accent); color: #fff; border-color: var(--accent); padding: 12px 20px; } .btn-dark:hover { background: var(--accent-hover-d); border-color: var(--accent-hover-d); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* =============================================================== Header == */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 20px; } .brand { display: block; line-height: 1.1; } .brand-name { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .brand-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; margin-top: 4px; } .nav { display: flex; align-items: center; gap: 36px; font-size: 15.5px; font-weight: 500; color: #2a323a; } .nav-link { padding: 4px 0; transition: color .14s ease; border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--accent); } .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); } /* Mobile hamburger — hidden on desktop, revealed at the nav breakpoint. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--border-chip); border-radius: 2px; cursor: pointer; } .nav-toggle__bar { display: block; height: 2px; width: 100%; background: var(--ink); transition: transform .18s ease, opacity .18s ease; } /* ================================================================ Hero === */ .hero__inner { align-items: center; } .hero__text { grid-column: 1 / span 7; } .hero__media { grid-column: 8 / span 5; } .hero-h1 + .lede { margin-top: 24px; } /* ========================================================== Image slot === */ .image-slot { position: relative; overflow: hidden; border: 1px solid var(--border-chip); background: var(--img-ph); } .image-slot--4x5 { aspect-ratio: 4 / 5; } /* homepage hero */ .image-slot--5x4 { aspect-ratio: 5 / 4; } /* detail hero */ .image-slot--16x10 { aspect-ratio: 16 / 10; } /* key-page banners/figures */ /* Photo variant: show a true-colour render as-is (no duotone/steel/scrim). */ .image-slot--photo { background: #f6f3ec; border-color: #e5ded0; } .image-slot.image-slot--photo > img { filter: none; } .image-slot.image-slot--photo::before, .image-slot.image-slot--photo::after { display: none; } .image-slot--photo .fig-caption { color: var(--muted); } /* dropped image is duotoned to match the palette */ .image-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); } /* steel-blue colour overlay */ .image-slot::before { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: color; opacity: .6; pointer-events: none; z-index: 1; } /* bottom gradient scrim for caption legibility */ .image-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 28, 35, .4)); mix-blend-mode: multiply; pointer-events: none; z-index: 2; } .fig-caption { position: absolute; left: 16px; bottom: 14px; z-index: 3; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; color: var(--img-ph); pointer-events: none; } /* ====================================================== Credibility strip = */ .credibility__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-top: 26px; padding-bottom: 26px; } .stat { border-left: 2px solid var(--accent); padding-left: 16px; } .stat--soft { border-left-color: var(--border-input); } .stat__num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .stat__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; } /* ===================================================== How-they-work band = */ .mech-head { align-items: end; margin-bottom: 38px; } .mech-head__title { grid-column: 1 / span 6; } .mech-head__intro { grid-column: 7 / span 6; font-size: 16px; line-height: 1.62; color: var(--body); } .eyebrow + .mech-head { margin-top: 14px; } .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .mech-card { background: #fff; border: 1px solid var(--hairline); padding: 26px; transition: border-color .14s ease; } .mech-card:hover { border-color: var(--accent); } .mech-card__num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); } .mech-card__title { font-size: 21px; font-weight: 700; margin: 12px 0 8px; letter-spacing: -.01em; } .mech-card__body { font-size: 14.5px; line-height: 1.55; color: var(--body-soft); } /* ============================================================ Origin ===== */ .origin__title { grid-column: 1 / span 4; } .origin__body { grid-column: 5 / span 8; font-size: 16px; line-height: 1.7; color: var(--body); } .origin__body p + p { margin-top: 18px; } .molecular-motif { margin-top: 22px; display: flex; align-items: center; gap: 12px; } /* ==================================================== Directory heading == */ .dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; border-bottom: 2px solid var(--border-strong); padding-bottom: 14px; } .dir-head__title { font-weight: 700; font-size: clamp(24px, 4.5vw, 30px); letter-spacing: -.02em; } .dir-head__link { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; transition: color .14s ease; } .dir-head__link:hover { color: var(--accent-hover); } /* ============================================================== Cards ==== */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .card { display: flex; flex-direction: column; padding: 22px; background: #fff; border: 1px solid var(--hairline); transition: border-color .14s ease, background .14s ease; } .card:hover { border-color: var(--accent); background: var(--panel); } .card--home { padding: 18px; min-height: 178px; } /* homepage directory preview */ .card--dir { min-height: 212px; } /* Types page */ .card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card__organ { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); } .card__name { font-size: 22px; font-weight: 700; margin: 12px 0 6px; letter-spacing: -.01em; } .card--home .card__name { font-size: 18px; margin: 10px 0 4px; } .card__note { font-size: 13.5px; line-height: 1.45; color: var(--body-soft); } .card--home .card__note { font-size: 12.5px; line-height: 1.42; } .card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; } .card--home .card__foot { padding-top: 12px; } .card__format { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); } .card--home .card__format { font-size: 10px; } .card__chevron { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent); } /* ============================================= Evidence-grade badges ===== */ .badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; white-space: nowrap; } .grade-l3 { background: #e8eef3; color: #35576f; } .grade-l2 { background: #eef0f2; color: #4c545b; } .grade-l1 { background: #f2f3f4; color: #8a9096; } /* =========================================================== Page head == */ .page-head__grid { align-items: end; } .page-head__title { grid-column: 1 / span 6; } .page-head__intro { grid-column: 7 / span 6; font-size: 16.5px; line-height: 1.62; color: var(--body); } .eyebrow + .page-head__grid { margin-top: 20px; } /* =========================================================== Filter bar == */ .filter-bar { position: sticky; top: var(--header-h); z-index: 30; background: var(--panel); border-bottom: 1px solid var(--hairline); } .filter-bar__inner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; padding-bottom: 16px; } .filter-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; } .chip { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 2px; cursor: pointer; background: #fff; color: #3f4750; border: 1px solid var(--border-chip); transition: all .12s ease; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* results + evidence legend row */ .results-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 36px; padding-bottom: 26px; } .count-line { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .legend__item { display: flex; align-items: center; gap: 6px; } .legend__dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .legend__dot--l3 { background: #35576f; } .legend__dot--l2 { background: #93a6b4; } .legend__dot--l1 { background: #cdd3d8; } /* ========================================================== Breadcrumb === */ .breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 34px; } .breadcrumb a { color: var(--accent); } .breadcrumb .is-current { color: var(--ink); } /* ===================================================== Detail hero ======= */ .detail-hero__grid { align-items: center; } .detail-hero__text { grid-column: 1 / span 7; } .detail-hero__media { grid-column: 8 / span 5; } .tag-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid #cdd6db; padding: 5px 10px; border-radius: 2px; } .seq { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--muted); } .grade-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; } .detail-hero__text .hero-h1 { line-height: 1; } .detail-hero__text .lede { font-size: 19px; line-height: 1.55; margin-top: 20px; } /* ==================================================== Detail body ======== */ /* Detail pages share the reading standard: one left-aligned column at the same ~68ch measure as .prose, with the facts/related sidebar as a right-hand rail. Was an 8/4 split whose body ran to ~99ch. Rail padding restored so the article aligns with the detail hero above it; both children pinned to row 1. */ .detail-body { grid-template-columns: minmax(0, 660px) 236px; gap: 72px; justify-content: start; padding: 56px var(--rail-pad) 72px; } .article { grid-column: 1; grid-row: 1; } .sidebar { grid-column: 2; grid-row: 1; } .sidebar__sticky { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; } /* article internals */ .article .eyebrow { display: block; margin-bottom: 12px; } .article .h2 { margin-bottom: 16px; } .article .body-copy { font-size: 19px; line-height: 1.7; margin-bottom: 22px; } .article .body-copy--gap { margin-bottom: 38px; } .article li { font-size: 19px; line-height: 1.7; } .section-break { margin-bottom: 38px; } .blockquote { border-left: 2px solid var(--accent); background: var(--band); padding: 22px 26px; margin-bottom: 38px; } .blockquote p { font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500; } /* evidence rows */ .evidence-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); margin-bottom: 26px; } .evidence-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); } .evidence-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); } .evidence-text { font-size: 15.5px; line-height: 1.6; color: var(--body-dark); } /* references */ .references { border-top: 2px solid var(--border-strong); padding-top: 22px; } .references__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .references ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--body-soft); } /* ==================================================== Sidebar cards ====== */ .facts-card, .toc-card, .related-card { border: 1px solid var(--hairline); padding: 22px; } /* On-page contents nav in the detail sidebar. Long headings wrap rather than overflow the card, and the list scrolls if a page ever grows past ~9 sections. */ .toc-card { margin-bottom: 20px; } .toc-card .toc__list { max-height: 42vh; overflow-y: auto; } .toc-card .toc-link { line-height: 1.35; padding: 4px 0; } .sidebar-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .facts-table { display: block; } .fact-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--img-ph); font-size: 13.5px; } .fact-row__k { color: var(--muted); flex: 0 0 auto; } .fact-row__v { font-weight: 600; text-align: right; } .related-card .sidebar-title { margin-bottom: 14px; } .related-list { display: flex; flex-direction: column; } .related-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--img-ph); transition: color .14s ease; } .related-item:hover { color: var(--accent); } .related-item__name { font-size: 15px; font-weight: 600; } .related-item__organ { font-size: 12.5px; color: var(--muted); } .related-item__chevron { font-family: var(--font-mono); font-size: 14px; color: var(--accent); } /* supplier CTA (dark) */ .supplier-cta { background: var(--ink); color: #fff; padding: 24px; } .supplier-cta__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .supplier-cta__body { font-size: 13.5px; line-height: 1.6; color: #a9b1b8; margin-bottom: 18px; } .supplier-cta .btn-dark { font-size: 13.5px; } /* Full-width primary button inside dark CTAs so the tap target is unmissable. */ .supplier-cta .btn-dark { display: block; text-align: center; width: 100%; } /* Offer badge: the discount code shown as a small coupon. Self-contained, so its own inner padding is fine; its LEFT edge sits flush with the block it lives in. Light by default (sidebar); the dark main CTA overrides colours below. */ .offer-badge { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: 3px; padding: 12px 14px; margin-bottom: 20px; } .offer-badge__pct { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .offer-badge__code { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 2px; letter-spacing: .04em; } .offer-badge__note { font-size: 12px; color: var(--muted-2); width: 100%; } /* Dark context: the main supplier CTA panel. */ .supplier-cta .offer-badge { border-style: dashed; border-color: rgba(255, 255, 255, .35); } .supplier-cta .offer-badge__pct { color: #fff; } .supplier-cta .offer-badge__note { color: #a9b1b8; } /* Above-the-fold offer strip. NOT a box: a rule-separated row so its text sits on the same left grid line as the H1/eyebrow/meta above it, with the button pinned to the rail's right edge. Boxed padding is what knocked it off the grid before. */ .head-offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; max-width: 660px; border-top: 1px solid var(--hairline); } .head-offer__text { font-size: 14px; line-height: 1.55; color: var(--muted-2); max-width: 68ch; } .head-offer__text strong { color: var(--ink); } .head-offer .btn-dark { font-size: 13px; white-space: nowrap; } /* Sticky sidebar offer block. Flush, rule-separated from the contents nav above so every line (eyebrow, name, badge, button) shares the column's left grid line. Was a dark filled box, which both jogged off-grid and looked stranded. */ .toc__offer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hairline); } .toc__offer .sidebar-title { margin-bottom: 10px; } .toc__offer-name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: 8px; } .toc__offer-body { font-size: 13px; line-height: 1.55; color: var(--muted-2); margin-bottom: 16px; } .toc__offer .btn-dark { display: block; text-align: center; width: 100%; font-size: 13px; } .toc__offer-fine { font-size: 11.5px; color: var(--muted); margin-top: 10px; } /* Inline mid-page nudge: a callout in the prose flow. Left accent bar marks it as a deliberate aside (not body copy), text and button share one baseline. */ .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 34px 0; padding: 18px 20px; background: var(--band); border-left: 3px solid var(--accent); } .inline-cta__text { font-size: 14px; line-height: 1.5; color: var(--ink); } .inline-cta__text span { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 3px; } .inline-cta .btn-dark { font-size: 13px; white-space: nowrap; } /* ========================================================== Disclaimer === */ .disclaimer { background: var(--band); border-top: 1px solid var(--hairline); } .disclaimer__inner { padding-top: 26px; padding-bottom: 26px; } .disclaimer p { font-size: 12.5px; line-height: 1.6; color: var(--muted-2); max-width: 110ch; } .disclaimer strong { color: var(--body); } /* ==================================================== Article (Learn) ==== */ .article-head__meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); } .article-head .hero-h1, .article-head .page-title { max-width: 20ch; } .eyebrow + .page-title, .eyebrow + .hero-h1 { margin-top: 26px; } /* Reading layout: a single left-aligned reading column at a comfortable measure (~68ch), with the contents nav as a sticky rail to its right. Replaces the old 12-col split whose prose ran to ~87ch and left an empty trailing column. The prose shares the hero's left edge so headline and body sit on one grid line. */ .reading-grid { grid-template-columns: minmax(0, 660px) 236px; gap: 72px; justify-content: start; padding: 52px var(--rail-pad) 72px; } /* Both pinned to row 1: the TOC is first in source (so it stacks first on mobile) but sits in column 2 on desktop; without an explicit row the prose would be bumped to row 2, leaving the top-left empty. */ .prose { grid-column: 1; grid-row: 1; } .toc { grid-column: 2; grid-row: 1; } .toc__sticky { position: sticky; top: 120px; } .toc__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .toc__list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .toc-link { padding: 8px 0; border-top: 1px solid var(--img-ph); color: var(--body); transition: color .14s ease; } .toc-link:hover { color: var(--accent); } .toc-link.active { color: var(--accent); font-weight: 600; } .prose-lede { font-size: 21px; line-height: 1.6; color: var(--ink); font-weight: 500; margin-bottom: 36px; } .prose h2, .prose .h2 { margin: 8px 0 16px; scroll-margin-top: 110px; } .prose p { font-size: 19px; line-height: 1.7; color: var(--body-dark); } .prose p + p { margin-top: 22px; } .prose li { font-size: 19px; line-height: 1.7; color: var(--body-dark); } .prose .section-break { margin-bottom: 38px; } /* mechanism list (article) */ .mech-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); margin-bottom: 38px; } .mech-list__item { padding: 18px 0; border-bottom: 1px solid var(--hairline); } .mech-list__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; } .mech-list__item p { font-size: 16px; line-height: 1.6; color: var(--body-dark); } .cta-row { margin-top: 44px; padding-top: 26px; border-top: 2px solid var(--border-strong); display: flex; flex-wrap: wrap; gap: 14px; } /* =============================================================== Footer == */ .site-footer { background: var(--footer-bg); color: var(--footer-text); } .site-footer__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding-top: 52px; padding-bottom: 30px; } .footer-brand { grid-column: 1 / span 4; } .footer-brand__name { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .footer-blurb { font-size: 13.5px; line-height: 1.6; color: var(--footer-muted); margin-top: 12px; max-width: 34ch; } .footer-col--learn { grid-column: 6 / span 2; } .footer-col--explore { grid-column: 8 / span 2; } .footer-col--note { grid-column: 10 / span 3; } .footer-col__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--footer-label); margin-bottom: 14px; } .footer-links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; } .footer-links a { transition: color .14s ease; } .footer-links a:hover { color: #fff; } .footer-note { font-size: 13px; line-height: 1.6; color: var(--footer-muted); } .footer-bottom { border-top: 1px solid var(--footer-rule); } .footer-bottom__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 12.5px; color: var(--footer-label); } .footer-bottom__inner .is-mono { font-family: var(--font-mono); } /* ========================================================================== RESPONSIVE — content-led breakpoints. No horizontal page scroll, ever. ========================================================================== */ /* Rail padding steps down so content never touches the screen edge. */ @media (max-width: 900px) { :root { --rail-pad: 32px; } } @media (max-width: 560px) { :root { --rail-pad: 20px; } } @media (max-width: 380px) { :root { --rail-pad: 16px; } } /* ---- 1024: two-column layouts relax, 4-up grids halve ------------------- */ @media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } /* hero stacks: text then media */ .hero__text, .hero__media { grid-column: 1 / -1; } .hero__media { max-width: 520px; } .image-slot--4x5, .image-slot--5x4 { aspect-ratio: 16 / 10; } /* how-they-work heading + intro stack */ .mech-head__title, .mech-head__intro { grid-column: 1 / -1; } .mech-head__intro { margin-top: 14px; } /* origin story stacks */ .origin__title, .origin__body { grid-column: 1 / -1; } .origin__body { margin-top: 22px; } /* page head stacks */ .page-head__title, .page-head__intro { grid-column: 1 / -1; } .page-head__intro { margin-top: 18px; } /* detail hero stacks */ .detail-hero__text, .detail-hero__media { grid-column: 1 / -1; } .detail-hero__media { max-width: 560px; } /* detail body -> single column, sidebar BELOW the article, not sticky */ .detail-body { grid-template-columns: minmax(0, 1fr); } .article, .sidebar { grid-column: 1 / -1; grid-row: auto; } .sidebar { margin-top: 44px; } .sidebar__sticky { position: static; } /* article reading view -> single column, TOC collapses, prose full width. grid-row resets to auto so the two stack instead of overlapping in row 1. */ .reading-grid { grid-template-columns: minmax(0, 1fr); } .toc { grid-column: 1 / -1; grid-row: auto; } .toc__sticky { position: static; } .prose { grid-column: 1 / -1; grid-row: auto; } /* The sidebar offer card exists to ride the scroll on desktop. Once the TOC stacks it is no longer sticky and would just duplicate the hero offer strip ahead of the article's own content, so drop it here. The hero strip, the mid-page inline CTA, and the main supplier CTA still give mobile three well-spaced routes to the offer. */ .toc__offer { display: none; } } /* ---- 820: collapse desktop nav into the mobile menu -------------------- Raised from 760px: between ~761-820px the inline nav crowded the brand tagline (only an ~8-32px gap, the tagline wrapping against "Learn"). Collapsing to the hamburger across the tablet-portrait range keeps a comfortable gap whenever the desktop nav is shown (>=820px). */ @media (max-width: 820px) { .nav-toggle { display: flex; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--hairline); padding: 8px var(--rail-pad) 16px; } .site-header.nav-open .nav { display: flex; } .nav-link { padding: 14px 0; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--hairline); border-top: none; } .nav-link.active { border-bottom-color: var(--hairline); } } /* ---- 768: mechanism cards halve --------------------------------------- */ @media (max-width: 768px) { .mech-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- 640: single-column everything, drop desktop min-heights ---------- */ @media (max-width: 640px) { /* generic 12-col helpers collapse as a safety net */ [class*="col-"] { grid-column: 1 / -1; } [class^="start-"], [class*=" start-"] { grid-column-start: auto; } .card-grid, .mech-grid { grid-template-columns: 1fr; } /* cards become content-height */ .card--home, .card--dir { min-height: 0; } /* credibility 4 stats -> 2x2 */ .credibility__inner { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } /* evidence rows stack (label above text) */ .evidence-row { grid-template-columns: 1fr; gap: 6px; } /* footer columns stack */ .footer-brand, .footer-col--learn, .footer-col--explore, .footer-col--note { grid-column: 1 / -1; } .footer-brand { margin-bottom: 8px; } /* tighten section rhythm */ .section { padding: 48px 0; } .section--hero { padding: 48px 0 40px; } .detail-body { padding: 44px 0 56px; } .reading-grid { padding: 40px 0 56px; } } /* ---- 420: shrink the brand tagline so the header never overflows ------ */ @media (max-width: 420px) { .brand-tag { font-size: 9px; letter-spacing: .04em; } .credibility__inner { grid-template-columns: 1fr; } .facts-card, .related-card, .supplier-cta { padding: 18px; } } /* Keep tables / wide content from ever pushing the page sideways. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }