/* ══════════════════════════════════════════════════════════════════════════ articles.css — the article library's layout, on top of site.css. The "Rail" design the user picked from five rendered candidates (2026-09-01): a sticky meta rail (hero stat, date, on-this-page) beside a reading column; figures, promo cards and the signup panel run wide, only paragraphs hold a reading measure. Violet is the colour of FACTS (stats, figure marks, the rail stat); buttons are ink. Light page on purpose — site.css is a light system and these sit beside /vs and /features. ⚠️ site.css does NOT define --acc; only app-v2.css does, and article pages don't load that. Every accent token these pages need is defined here. */ .art :is(h1,h2,h3) { font-family: var(--f-display); letter-spacing: -.02em } :root { --a-acc: #6D28D9; --a-acc-soft: #F7F4FE; --a-acc-tint: #EFE9FD; --a-acc-line: #C9B8F5; --a-line: #E7E0F5; --a-dark: #17142B; --a-on-dark: #F3EFFF; --a-on-dark-2:#B9AFD6; --a-acc-dark: #B49CFF; } /* ── one accent per category — "too purple" was the review ──────────────── Every component reads the --a-acc family, so recolouring a page is one class on (and on hub cards/sections). ⚠️ The SVG figure SHAPES are baked at build time from CAT_PAL in build-articles.mjs — these values and that map must move together. Brand violet stays on exactly two things, pinned below: the promo cards and the signup panel. */ .art--body { --a-acc:#6D28D9; --a-acc-soft:#F7F4FE; --a-acc-tint:#EFE9FD; --a-acc-line:#C9B8F5 } .art--food { --a-acc:#C2410C; --a-acc-soft:#FEF5EC; --a-acc-tint:#FDE8D8; --a-acc-line:#F5B48A } .art--training { --a-acc:#2563EB; --a-acc-soft:#F0F5FE; --a-acc-tint:#DBE9FD; --a-acc-line:#A3C3F9 } .art--recovery { --a-acc:#0E8A66; --a-acc-soft:#EDF8F3; --a-acc-tint:#D3F0E4; --a-acc-line:#8FD8BC } .art--cardio { --a-acc:#D62F5D; --a-acc-soft:#FDF1F4; --a-acc-tint:#FADCE5; --a-acc-line:#F2A3BB } .art--mind { --a-acc:#0E7490; --a-acc-soft:#EEF7FA; --a-acc-tint:#D3ECF3; --a-acc-line:#93CEE0 } .art--cycles { --a-acc:#C2417F; --a-acc-soft:#FCF1F7; --a-acc-tint:#F7DCEA; --a-acc-line:#EBA6CB } .art--compare { --a-acc:#4338CA; --a-acc-soft:#F2F2FE; --a-acc-tint:#E2E1FC; --a-acc-line:#B1AFF6 } /* ── head ─────────────────────────────────────────────────────────────── */ .art-shell { width: min(1260px, calc(100% - 48px)); margin-inline: auto } @media (max-width: 700px) { .art-shell { width: calc(100% - 32px) } } .art-kicker { margin: 40px 0 0; font: 800 12px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--a-acc); } .art-head h1 { margin: 16px 0 0; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; font-weight: 900; max-width: 24ch; } .art-dek { margin: 18px 0 0; max-width: 70ch; font-size: 19px; line-height: 1.6; color: var(--sub) } /* ── the grid: rail + column ──────────────────────────────────────────── */ .art-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px; margin-top: 48px } .art-rail { position: sticky; top: 28px; align-self: start; font-size: 13.5px } .art-rail .r-block { padding: 16px 0; border-top: 1px solid var(--a-line) } .art-rail .r-lab { font: 800 10.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); } .art-rail .r-v { margin-top: 8px; font-weight: 650; color: var(--sub) } .art-rail .r-toc a { display: block; margin-top: 10px; color: var(--mut); text-decoration: none; font-weight: 600 } .art-rail .r-toc a:hover { color: var(--a-acc) } /* The article's one number, at the top of the rail — the reason to read. */ .r-stat { padding: 20px 18px; border-radius: 16px; background: var(--a-acc-soft); border: 1px solid var(--a-line); margin-bottom: 6px } .r-stat b { display: block; font: 900 30px/1 var(--f-display); color: var(--a-acc); letter-spacing: -.02em } .r-stat span { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--sub) } .art-col > p, .art-col section > p { font-size: 17.5px; line-height: 1.75; color: var(--sub); margin: 24px 0 0; max-width: 70ch } .art-col p b { color: var(--ink) } .art-col h2 { margin: 52px 0 0; font-size: 24px; font-weight: 800; scroll-margin-top: 24px } .art-col h2 + p { margin-top: 16px } /* ── figures ──────────────────────────────────────────────────────────── */ .art-fig { margin: 40px 0 0; padding: 36px 40px 28px; border-radius: 20px; border: 1px solid var(--a-line); background: #fff } .art-fig svg { width: 100%; height: auto; display: block } .art-fig figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mut) } /* SVG type — classes, so the generators stay free of font attributes. The paint-order halo is what keeps a label legible when it must cross a stroke (bend annotations, legends near a low series). */ .fg-lab { font: 600 14px var(--f-text, -apple-system, system-ui, sans-serif); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round } .fg-val { font: 800 14px var(--f-display); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round } .fg-mut { font: 600 12.5px -apple-system, system-ui, sans-serif; fill: var(--mut); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round } .fg-acc { font: 800 13px var(--f-display); fill: var(--a-acc); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round } /* ── stats row ────────────────────────────────────────────────────────── */ .art-stats { display: flex; gap: 14px; margin: 28px 0 0 } .art-stats .s { flex: 1; padding: 20px 16px 18px; border-radius: 16px; background: var(--a-acc-soft); text-align: center } .art-stats .s b { display: block; font: 900 24px/1 var(--f-display); color: var(--a-acc) } .art-stats .s span { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--mut) } /* ── the in-app promo ("ad") card ───────────────────────────────────── A phone capture and one claim, tied to the article's topic. Tinted and bordered so it reads as an aside, never as part of the argument. */ /* Pinned to brand violet on purpose — the ad stays Heala-coloured while the article around it wears its category. */ .art-promo { margin: 44px 0 0; display: grid; grid-template-columns: minmax(0,1fr) 168px; gap: 28px; align-items: center; padding: 26px 30px; border-radius: 20px; background: #F7F4FE; border: 1px solid #E7E0F5; } .art-promo.flip { grid-template-columns: 168px minmax(0,1fr) } .art-promo.flip .p-copy { order: 2 } .art-promo .p-eyebrow { font: 800 10.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #6D28D9 } .art-promo h3 { margin: 10px 0 0; font-size: 20px; font-weight: 800 } .art-promo p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--sub) } .art-promo a { display: inline-block; margin-top: 14px; font: 800 13.5px/1 var(--f-display); color: #6D28D9; text-decoration: none } .art-promo a:hover { text-decoration: underline } .art-promo .p-shot { margin: -40px 0; } .art-promo .p-shot img { width: 168px; height: auto; display: block; border-radius: 22px; border: 5px solid var(--a-dark); box-shadow: 0 14px 34px rgba(23,20,43,.22); } /* ── quote note ───────────────────────────────────────────────────────── */ .art-note { margin: 44px 0 0; padding: 22px 28px; border-radius: 16px; background: var(--a-acc-soft); border: 1px dashed var(--a-acc-line); font-size: 15px; line-height: 1.6; color: var(--sub); } .art-note b { color: var(--a-acc); font-family: var(--f-display) } /* ── steps ────────────────────────────────────────────────────────────── */ .art-li { display: flex; gap: 14px; margin-top: 20px; max-width: 70ch } .art-li i { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--a-acc-tint); font: 800 13px/28px var(--f-display); font-style: normal; color: var(--a-acc); text-align: center; } .art-li b { font-family: var(--f-display); font-size: 16px } .art-li p { margin: 3px 0 0 !important; font-size: 15px !important } /* ── sources ──────────────────────────────────────────────────────────── */ .art-src { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--a-line); font-size: 13px; line-height: 1.7; color: var(--mut) } .art-src b { display: block; font: 800 10.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px } .art-src a { color: var(--mut) } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .art-faq { margin-top: 8px } .art-faq details { border-top: 1px solid var(--a-line); padding: 4px 0 } .art-faq summary { cursor: pointer; padding: 14px 0; font: 800 16px/1.4 var(--f-display); color: var(--ink); list-style: none } .art-faq summary::-webkit-details-marker { display: none } .art-faq summary::after { content: "+"; float: right; color: var(--a-acc); font-weight: 800 } .art-faq details[open] summary::after { content: "–" } .art-faq details p { margin: 0 0 16px !important; font-size: 15px !important; line-height: 1.65 !important } /* ── the signup panel — the "more about signing up" block ─────────────── */ .art-join { margin: 64px 0 0; border-radius: 24px; background: var(--a-dark); padding: 48px 48px 44px; color: var(--a-on-dark) } .art-join .j-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center } .art-join .j-kicker { font: 800 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--a-acc-dark) } .art-join h2 { margin: 12px 0 0 !important; font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--a-on-dark) } .art-join .j-sub { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--a-on-dark-2); max-width: 52ch } .art-join .j-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none } .art-join .j-perks li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(180,156,255,.35); background: rgba(180,156,255,.12); font-size: 13px; font-weight: 650; color: var(--a-on-dark); } .art-join .j-perks b { color: var(--a-acc-dark); font-family: var(--f-display) } .art-join .j-cta { text-align: center } .art-join .j-cta a { display: inline-block; font: 800 16px/1 var(--f-display); background: var(--a-on-dark); color: var(--a-dark); text-decoration: none; padding: 17px 34px; border-radius: 999px; } .art-join .j-cta span { display: block; margin-top: 12px; font-size: 12.5px; color: var(--a-on-dark-2) } /* ── related ──────────────────────────────────────────────────────────── */ .art-rel { margin: 56px 0 0 } .art-rel b.h { display: block; font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut) } .art-rel ul { margin: 14px 0 0; padding: 0; list-style: none } .art-rel li { border-top: 1px solid var(--a-line) } .art-rel a { display: block; padding: 14px 0; text-decoration: none } .art-rel a b { font-family: var(--f-display); font-size: 16px; color: var(--ink) } .art-rel a:hover b { color: var(--a-acc) } .art-rel a span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--mut) } /* ── hub page ─────────────────────────────────────────────────────────── */ .hub-hero { margin-top: 44px; max-width: 62ch } .hub-hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; font-weight: 900 } .hub-hero p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--sub) } .hub-cat { margin-top: 56px } .hub-cat > h2 { font-size: 21px; font-weight: 800; padding-bottom: 12px; border-bottom: 2px solid var(--a-acc); max-width: none } .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 18px } .hub-card { display: block; text-decoration: none; padding: 22px 24px 20px; border-radius: 18px; border: 1px solid var(--a-line); background: #fff; transition: border-color .15s ease, transform .15s ease; } .hub-card:hover { border-color: var(--a-acc-line); transform: translateY(-2px) } /* The number and what it counts, together — a bare "41" on a card was the review ("what does these numbers mean?"). The stat is meaningless without its label; on the article page the rail always shows both. */ .hub-card .c-stat { display: flex; align-items: baseline; gap: 8px; font: 900 22px/1 var(--f-display); color: var(--a-acc) } .hub-card .c-stat i { font: 600 11.5px/1.35 var(--f-text, -apple-system, system-ui, sans-serif); font-style: normal; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .hub-card b.t { display: block; margin-top: 10px; font-family: var(--f-display); font-size: 17px; line-height: 1.3; color: var(--ink) } .hub-card span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } /* ── responsive ───────────────────────────────────────────────────────── */ @media (max-width: 940px) { .art-grid { grid-template-columns: 1fr; gap: 8px } .art-rail { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 24px; align-items: center } .art-rail .r-toc, .art-rail .r-block { display: none } .r-stat { margin-bottom: 0 } .art-join .j-grid { grid-template-columns: 1fr; gap: 28px } .art-join { padding: 36px 28px } .art-promo, .art-promo.flip { grid-template-columns: 1fr; gap: 20px } .art-promo .p-copy { order: 0 !important } .art-promo .p-shot { margin: 0; display: flex; justify-content: center } .art-fig { padding: 24px 20px 20px } .art-stats { flex-direction: column } }