/* AntiAgingGreens — style-v2 (authoritative / editorial variant) Direction: scientific reference, not startup template. - Newsreader (serif) headlines + Public Sans body → reads "publication", not "generated" - paper-white surface, near-black ink, accent used sparingly - verdict-badge rating system, numbered footnote citations, hairline rules Fonts are linked in each page . Self-hosting note: see comment at end. */ :root{ --green:#2E6F40; --green-d:#23552f; --green-l:#eef3ee; --ink:#16201a; /* headlines / strong text */ --body:#2c322d; /* body text */ --muted:#6a7269; /* secondary */ --line:#e3e5dd; /* hairlines */ --line-2:#d3d6cc; /* slightly stronger rule */ --bg:#fcfcf9; /* paper */ --paper:#ffffff; /* evidence-rating accents (calm, not loud) */ --no:#7a4b4b; --no-l:#f3ecec; /* not supported / null */ --mod:#8a6312; --mod-l:#f6efe0; /* moderate */ --strong:#2E6F40; --strong-l:#eef3ee; /* strong */ --maxw:680px; --gap:40px; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--sans); color:var(--body); background:var(--bg); font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } .topbar{ height:3px; background:var(--green); } /* ---------- header + nav (a real site has a nav) ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; } header.site{ border-bottom:1px solid var(--line); background:var(--paper); } header.site .wrap{ padding:18px 26px 14px; } .brandrow{ display:flex; align-items:center; gap:12px; } .logo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.2px; color:var(--ink); text-decoration:none; } .logo .mark{ width:22px; height:22px; flex:0 0 22px; } .logo span{ color:var(--green); } .tag{ margin-left:auto; font-size:12.5px; color:var(--muted); letter-spacing:.2px; } nav.main{ margin-top:13px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:2px 22px; } nav.main a{ font-size:13.5px; color:var(--muted); text-decoration:none; letter-spacing:.2px; padding:5px 0 7px; border-bottom:2px solid transparent; transition:color .13s ease, border-color .13s ease; } nav.main a:hover{ color:var(--ink); border-bottom-color:var(--line-2); } nav.main a[aria-current]{ color:var(--green-d); font-weight:700; border-bottom-color:var(--green); } main{ padding:6px 0 90px; } .crumb{ font-size:12.5px; color:var(--muted); letter-spacing:.3px; margin:30px 0 14px; text-transform:uppercase; } .crumb a{ color:var(--muted); text-decoration:none; } .crumb a:hover{ color:var(--green-d); } /* ---------- headings (serif) ---------- */ h1{ font-family:var(--serif); font-weight:560; font-size:38px; line-height:1.18; letter-spacing:-.4px; color:var(--ink); margin:0 0 16px; } h2{ font-family:var(--serif); font-weight:560; font-size:23px; line-height:1.3; color:var(--ink); margin:0 0 14px; letter-spacing:-.2px; } h3{ font-size:15px; font-weight:700; margin:0 0 12px; color:var(--ink); } p{ margin:0 0 17px; } a{ color:var(--green-d); } strong{ color:var(--ink); } /* verdict eyebrow + badge */ .verdict-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; } .verdict{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:5px 11px; border-radius:4px; border:1px solid; } .verdict::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .verdict.no{ color:var(--no); background:var(--no-l); border-color:#e4d3d3; } .verdict.mod{ color:var(--mod); background:var(--mod-l); border-color:#e7d8b8; } .verdict.strong{ color:var(--strong); background:var(--strong-l); border-color:#cfe0d0; } .verdict.emerging{ color:#5f6f2f; background:#eef1e3; border-color:#d8ddc3; } /* trust / review line under H1 */ .trustline{ font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0; margin:0 0 var(--gap); display:flex; flex-wrap:wrap; gap:8px 16px; } .trustline b{ color:var(--body); font-weight:600; } .trustline a{ color:var(--green-d); text-decoration:none; border-bottom:1px solid var(--line-2); } .trustline .sep{ color:var(--line-2); } .eyebrow{ display:block; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green); margin:0 0 8px; } .lead{ font-size:21px; line-height:1.5; color:var(--ink); margin:0 0 var(--gap); } .pull{ font-family:var(--serif); font-size:23px; font-style:italic; line-height:1.42; font-weight:420; color:var(--ink); border-left:2px solid var(--green); padding:2px 0 2px 22px; margin:0 0 var(--gap); } /* ---------- cards / yes-no split ---------- */ .card{ border:1px solid var(--line); border-radius:6px; background:var(--paper); } .split{ display:flex; flex-wrap:wrap; margin:0 0 var(--gap); } .split > div{ flex:1; min-width:240px; padding:22px 24px; } .split > div + div{ border-top:1px solid var(--line); } @media(min-width:560px){ .split > div + div{ border-top:0; border-left:1px solid var(--line); } } .split h3{ font-size:12px; letter-spacing:.6px; text-transform:uppercase; margin:0 0 14px; } .split h3.yes{ color:var(--green); } .split h3.no{ color:var(--no); } .ticks{ list-style:none; padding:0; margin:0; } .ticks li{ position:relative; padding-left:25px; margin:12px 0; font-size:15.5px; line-height:1.5; } .ticks li b{ position:absolute; left:0; top:1px; font-weight:700; } .ticks.pos li b{ color:var(--green); } .ticks.neg li b{ color:var(--no); } .quiet{ font-size:14.5px; color:var(--muted); line-height:1.65; border-left:2px solid var(--line-2); padding-left:18px; margin:0 0 var(--gap); } .quiet strong{ color:var(--ink); } /* ---------- "Where this comes from": provenance + evidence frontier ---------- */ .etrail{ border:1px solid var(--line-2); border-radius:6px; background:var(--paper); padding:24px 24px 8px; margin:0 0 var(--gap); } .etrail > h2{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:0 0 14px; } /* evidence-status meter */ .emeter{ display:flex; gap:6px; margin:0 0 22px; } .emeter .step{ flex:1; min-width:0; text-align:center; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:7px 4px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--muted); } .emeter .step.on{ position:relative; } .emeter .step.on-no{ color:var(--no); background:var(--no-l); border-color:#e4d3d3; } .emeter .step.on-emerging{ color:var(--mod); background:var(--mod-l); border-color:#e7d8b8; } .emeter .step.on-mod{ color:var(--mod); background:var(--mod-l); border-color:#e7d8b8; } .emeter .step.on-strong{ color:var(--strong); background:var(--strong-l); border-color:#cfe0d0; } .etrail-list{ margin:0; } .etrail-list > div{ padding:16px 0; border-top:1px solid var(--line); } .etrail-list > div:first-child{ border-top:0; padding-top:0; } .etrail-list dt{ font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--green-d); margin:0 0 7px; } .etrail-list dd{ margin:0; font-size:16px; line-height:1.6; color:var(--body); } .etrail-list dd strong{ color:var(--ink); } /* ---------- mechanism flow diagram (text/SVG, fully readable) ---------- */ .flow{ margin:0 0 var(--gap); } .flow .steps{ display:flex; flex-direction:column; gap:8px; } @media(min-width:600px){ .flow .steps{ flex-direction:row; align-items:stretch; gap:9px; } } .flow .node{ flex:1; min-width:0; border:1px solid var(--line-2); border-radius:6px; background:var(--paper); padding:13px 15px; } .flow .node .n-k{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:0 0 5px; } .flow .node .n-v{ font-size:14px; font-weight:600; line-height:1.36; color:var(--ink); } .flow .node.stop{ border-color:#e1cccc; background:var(--no-l); } .flow .node.stop .n-v{ color:var(--no); } .flow .arrow{ display:flex; align-items:center; justify-content:center; color:var(--green); font-weight:700; font-size:17px; flex:0 0 auto; } .flow .arrow::after{ content:"\2193"; } @media(min-width:600px){ .flow .arrow{ padding:0 1px; } .flow .arrow::after{ content:"\2192"; } } .flow figcaption.cap{ font-size:13px; color:var(--muted); line-height:1.55; margin:11px 0 0; } /* full-width hairline divider — used sparingly to separate page zones */ .rule{ border:0; border-top:1px solid var(--line); margin:4px 0 var(--gap); } /* ---------- correction note (shown on a page that was materially changed) ---------- Usage: place near the top of the affected section.

Correction, 5 July 2026: what changed and why.

*/ .correction{ border:1px solid #e7d8b8; border-left:3px solid var(--mod); background:var(--mod-l); border-radius:6px; padding:12px 16px; margin:0 0 24px; font-size:14.5px; line-height:1.55; color:var(--body); } .correction b{ color:var(--mod); text-transform:uppercase; letter-spacing:.5px; font-size:11.5px; } /* ---------- contact / generic form ---------- */ .formcard{ border:1px solid var(--line-2); border-radius:6px; background:var(--paper); padding:24px; margin:0 0 var(--gap); } .formcard .field{ margin:0 0 16px; } .formcard label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 6px; } .formcard .hint{ font-weight:400; color:var(--muted); } .formcard input, .formcard select, .formcard textarea{ width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:5px; font-size:15px; font-family:var(--sans); background:var(--paper); color:var(--body); } .formcard textarea{ min-height:140px; resize:vertical; } .formcard button{ background:var(--green); color:#fff; font-weight:700; border:0; padding:12px 24px; border-radius:5px; font-size:15px; cursor:pointer; font-family:var(--sans); } .formcard button:hover{ background:var(--green-d); } /* ---------- verdict-by-outcome (multi-claim topics) ---------- */ .byoutcome{ border:1px solid var(--line-2); border-radius:6px; margin:0 0 var(--gap); } .byoutcome .r{ display:flex; align-items:center; gap:14px; justify-content:space-between; padding:13px 16px; border-top:1px solid var(--line); } .byoutcome .r:first-child{ border-top:0; } .byoutcome .o{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; } .byoutcome .verdict{ flex:0 0 auto; } /* ---------- small-screen passes (nav + meter) ---------- */ @media(max-width:560px){ nav.main{ gap:12px 16px; } nav.main a{ font-size:13px; } .emeter{ flex-wrap:wrap; gap:7px; } .emeter .step{ flex:1 1 calc(50% - 4px); padding:8px 4px; } } /* ---------- at-a-glance: real data table ---------- */ .facts{ margin:0 0 var(--gap); border-top:2px solid var(--ink); } .facts .row{ display:flex; gap:20px; padding:13px 0; border-top:1px solid var(--line); font-size:15px; } .facts .row:first-child{ border-top:0; } .facts .k{ flex:0 0 150px; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; padding-top:2px; } .facts .v{ color:var(--body); } /* ---------- footnote-style sources (like a paper) ---------- */ sup.fn{ font-size:11px; line-height:0; vertical-align:super; } sup.fn a{ text-decoration:none; color:var(--green-d); font-weight:700; padding:0 1px; } .sources{ margin:0 0 var(--gap); } .sources ol{ margin:0; padding:0; list-style:none; counter-reset:src; } .sources li{ position:relative; padding:10px 0 10px 30px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); line-height:1.55; counter-increment:src; } .sources li:first-child{ border-top:0; } .sources li::before{ content:counter(src); position:absolute; left:0; top:10px; font-weight:700; color:var(--ink); font-size:13px; } .sources li em{ color:var(--body); font-style:italic; } .sources a{ color:var(--green-d); } /* ---------- shared components ---------- */ .stdlink{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--green-d); text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:7px 15px; margin:0 0 var(--gap); } .stdlink:hover{ background:var(--green-l); border-color:#cfe0d0; } .stdlink b{ font-weight:700; } .bottomline{ border:1px solid var(--line-2); border-left:3px solid var(--green); border-radius:6px; padding:22px 24px; margin:0 0 var(--gap); background:var(--paper); } .bottomline h2{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--green); margin:0 0 11px; font-weight:700; } .bottomline p{ margin:0; font-size:16.5px; line-height:1.62; color:var(--body); } .bottomline p + p{ margin-top:12px; } .related{ margin:0 0 var(--gap); } .related h2{ font-size:14px; text-transform:uppercase; letter-spacing:.6px; font-family:var(--sans); font-weight:700; color:var(--muted); margin:0 0 4px; } .related ul{ list-style:none; padding:0; margin:0; } .related li{ border-top:1px solid var(--line); } .related a{ display:block; padding:14px 0; color:var(--ink); text-decoration:none; font-size:16px; line-height:1.4; } .related a:hover{ color:var(--green-d); } .related a .ar{ color:var(--green); font-weight:700; margin-right:11px; } .related .soon{ display:block; padding:14px 0; color:var(--muted); font-size:16px; line-height:1.4; border-top:1px solid var(--line); } .related .soon .badge{ font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:3px; padding:1px 6px; margin-left:8px; } /* ---------- email capture ---------- */ .signup{ border:1px solid var(--line-2); border-radius:6px; background:var(--green-l); padding:26px 24px; margin:0 0 var(--gap); } .signup h2{ margin:0 0 6px; } .signup .sub{ color:var(--muted); font-size:14.5px; margin:0 0 16px; } .signup form{ display:flex; gap:10px; flex-wrap:wrap; margin:0; } .signup input{ flex:1; min-width:200px; padding:12px 14px; border-radius:5px; border:1px solid var(--line-2); font-size:15px; font-family:var(--sans); background:var(--paper); } .signup button{ background:var(--green); color:#fff; font-weight:700; border:0; padding:12px 22px; border-radius:5px; font-size:15px; cursor:pointer; font-family:var(--sans); } .signup button:hover{ background:var(--green-d); } .disclaimer{ font-size:12.5px; color:var(--muted); line-height:1.65; margin:0 0 16px; } footer{ font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:20px; line-height:1.7; } footer a{ color:var(--green-d); text-decoration:none; } footer a:hover{ text-decoration:underline; } .footer-nav{ margin:0 0 8px; } .footer-nav a{ margin-right:18px; } /* ---------- rating chip (shared: homepage cards, evidence index) ---------- */ .rate{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:4px 10px; border-radius:4px; border:1px solid; white-space:nowrap; } .rate::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .rate.strong{ color:var(--strong); background:var(--strong-l); border-color:#cfe0d0; } .rate.moderate{ color:var(--mod); background:var(--mod-l); border-color:#e7d8b8; } .rate.emerging{ color:#5f6f2f; background:#eef1e3; border-color:#d8ddc3; } .rate.no{ color:var(--no); background:var(--no-l); border-color:#e4d3d3; } /* ---------- homepage featured answer cards ---------- */ .answers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:18px; margin:0 0 18px; } .answer{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-top:3px solid var(--line-2); border-radius:10px; background:var(--paper); padding:20px 20px 17px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } /* rating-coloured top accent */ .answer.r-no{ border-top-color:var(--no); } .answer.r-moderate{ border-top-color:var(--mod); } .answer.r-emerging{ border-top-color:#5f6f2f; } .answer.r-strong{ border-top-color:var(--strong); } /* gentle hover for every card; a real lift only where it's clickable */ .answer:hover{ border-color:#d3d6cc; box-shadow:0 4px 16px rgba(22,32,26,.05); } .answer.is-live{ cursor:pointer; } .answer.is-live:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(22,32,26,.09); } .answer .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 13px; } .answer .cat{ font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); } .answer h3{ font-family:var(--serif); font-weight:560; font-size:19.5px; line-height:1.25; letter-spacing:-.2px; margin:0 0 9px; } .answer h3 a{ color:var(--ink); text-decoration:none; } .answer.is-live:hover h3 a{ color:var(--green-d); } .answer .note{ font-size:14px; color:var(--muted); line-height:1.52; margin:0 0 16px; } .answer .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:2px; } .answer .status{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); } .answer .status.live{ color:var(--green); font-weight:700; } .answer .go{ font-size:13px; color:var(--green-d); text-decoration:none; font-weight:700; } .answer .stretch{ position:absolute; inset:0; border-radius:10px; z-index:4; } .answer .top, .answer h3, .answer .note, .answer .foot{ position:relative; z-index:2; } .answer h3 a, .answer .go{ position:relative; z-index:2; } .answers-note{ font-size:13px; color:var(--muted); margin:0 0 var(--gap); } /* ---------- evidence-index call-to-action ---------- */ .indexcta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line-2); border-radius:8px; background:var(--green-l); padding:22px 24px; margin:0 0 var(--gap); } .indexcta .t{ font-family:var(--serif); font-size:20px; color:var(--ink); margin:0 0 3px; } .indexcta .s{ font-size:14px; color:var(--muted); margin:0; } .indexcta a.btn{ background:var(--green); color:#fff; font-weight:700; text-decoration:none; padding:11px 20px; border-radius:5px; font-size:14.5px; white-space:nowrap; } .indexcta a.btn:hover{ background:var(--green-d); } /* ---------- prose ---------- */ .prose h2{ margin:36px 0 14px; padding-top:18px; border-top:1px solid var(--line); } .prose h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; } .prose p{ margin:0 0 17px; } .prose ul{ margin:0 0 17px; padding-left:22px; } .prose li{ margin:8px 0; } @media(max-width:540px){ h1{ font-size:31px; } body{ font-size:17px; } .lead{ font-size:19px; } .pull{ font-size:20px; } } /* Print: clean, citable. */ @media print{ .topbar,nav.main,.signup,.stdlink{ display:none; } body{ background:#fff; color:#000; font-size:11pt; } a{ color:#000; } } /* Self-hosting note: Newsreader + Public Sans are open-source (SIL OFL). For zero third-party calls (privacy/GDPR + faster first paint), download the woff2 files into _Website/fonts/ and replace the Google Fonts with @font-face rules. Linked CDN version is fine to ship now. */