/* Shared article presentation — THE single owner of the /advice/ article patterns (ADVICE-CSS1, * 2026-08-05). Filename kept as article-infographic.css because it is already deployed and cached; * its scope is every shared article pattern (.infographic-*, .avc-*, .ig-step*, .body-photo), not * infographics alone. * * WHY THIS FILE EXISTS * Eight /advice/ articles each carried their own inline copy of these five rules, in TWO variants * that had already drifted apart (636 vs 629 chars). A ninth copy was about to be added for the * tirzepatide article. One topic, one canonical home — so the rules live here and the articles * link this file. Injected into every article by scripts/gen_advice_index.py, the same generator * that owns the treatments block, so no article has to remember to add the link. * * THE MERGE (converging must not delete — both variants are recorded here) * Variant A (shingles, promethazine, mounjaro-dose-guide, mounjaro-prescription-leeds) WON, because * those are the newest ARTICLE-STYLE1 exemplars and it is the richer of the two: it has the * box-shadow that matches the .hub-card elevation on /advice/, and an explicit title font-weight. * Variant B (pharmacy-first, weight-loss-*, what-to-eat) differed only in: * border-radius 8px (vs 14), padding 28px 24px (vs 26px 22px), margin 40px 0 (vs 36px 0), * no box-shadow, title 18px with no weight (vs 19px/700), * subtitle margin-bottom 24px (vs 22px), caption margin-top 16px (vs 14px). * Those B values are deliberately dropped in favour of A — a consistent elevation scale across the * site beats per-article variation (ui-ux-pro-max §4 elevation-consistent, consistency). * * The colour vars (--border, --dark-teal, --muted) are already declared in every article's :root, * so this file inherits each page's palette rather than re-declaring the brand colours. */ .infographic-wrap { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; margin: 36px 0; box-shadow: 0 6px 26px rgba(10, 46, 54, .06); } .infographic-title { text-align: center; font-family: 'Proxima Nova', sans-serif; font-size: 19px; font-weight: 700; color: var(--dark-teal); margin-bottom: 4px; } .infographic-subtitle { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .infographic-caption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 14px; font-style: italic; } /* Inline SVG charts scale to the card without overflowing it, and keep their aspect ratio so the * page does not jump as they load (ui-ux-pro-max §3 image-dimension / content-jumping). */ .infographic-wrap svg { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* Two-up comparison cards (.avc-*) — the house pattern for "option A vs option B, at a glance", * with the headline figures animated by [data-count-to] in /assets/chart-reveal.js. * MOVED HERE from an inline block in shingles-treatment-72-hours.html (2026-08-05) rather than * writing a second comparison pattern for the tirzepatide article. Both now share this one. * The `avc` prefix is historical (it began life as "antiviral comparison") — kept so the existing * shingles markup keeps working; it is a general two-option comparison, not antiviral-specific. * Collapses to a single column below 520px so the numbers never crush (§5 mobile-first). */ .avc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .avc-card { background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; text-align: center; } .avc-name { font-weight: 800; color: var(--dark-teal); font-size: 15px; margin-bottom: 2px; } .avc-strength { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; } .avc-num { font-size: 38px; font-weight: 800; color: var(--teal); line-height: 1; } .avc-label { font-size: 12px; color: var(--muted); font-weight: 600; margin: 2px 0 12px; } .avc-sub { font-size: 20px; font-weight: 800; color: var(--dark-teal); } .avc-sublabel { font-size: 11.5px; color: var(--muted); } @media (max-width: 520px) { .avc-grid { grid-template-columns: 1fr; } } /* Numbered step sequence (.ig-step*) — the house pattern for "this happens, then this, then this", * revealed one step at a time by [data-seq] in /assets/chart-reveal.js. Written here as ONE owner * for its two consumers (the Pharmacy First consultation journey and the eating-order guide) rather * than as an inline block in each — the mistake that produced nine copies of .infographic-wrap. * The motion is earned: the order IS the content (ui-ux-pro-max §7 motion-meaning). The connector * line is drawn on the badge itself so no extra elements are needed and nothing reflows. */ .ig-steps { display: grid; gap: 0; text-align: left; margin: 0; padding: 0; list-style: none; } .ig-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 0 0 18px; position: relative; } .ig-step:last-child { padding-bottom: 0; } /* Vertical connector: sits behind the badges, stops at the last step. */ .ig-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 34px; bottom: 4px; width: 2px; background: var(--border); } .ig-step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 15px; line-height: 32px; text-align: center; position: relative; z-index: 1; justify-self: center; } .ig-step-t { font-weight: 700; color: var(--dark-teal); font-size: 15.5px; margin: 5px 0 2px; } .ig-step-d { font-size: 14px; color: var(--muted); line-height: 1.55; } /* Headline figure above a step list (e.g. "15–25 minutes"), animated with [data-count-to]. */ .ig-stat { text-align: center; margin-bottom: 22px; } .ig-stat-n { font-size: 38px; font-weight: 800; color: var(--teal); line-height: 1; } .ig-stat-l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; } /* Call to action closing an infographic. Padding keeps it above the 44px touch target (§2). */ .ig-cta { display: inline-block; margin-top: 20px; padding: 13px 24px; border-radius: 999px; background: var(--teal); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s ease-out, transform .2s ease-out; } .ig-cta:hover, .ig-cta:focus-visible { background: var(--dark-teal); transform: translateY(-1px); } .ig-cta-row { text-align: center; } /* In-body editorial photo. MOVED HERE from two byte-identical inline copies (2026-08-05); two more * articles had no copy at all, so the next one would have been written by hand a third time. * The fixed 16/9 aspect-ratio is what stops the page reflowing as the photo loads (§3 CLS). */ .body-photo { margin: 36px 0; } .body-photo img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 4px 14px rgba(10, 46, 54, .10); } .body-photo figcaption { font-size: 13px; color: var(--muted); font-style: italic; font-family: 'Proxima Nova', sans-serif; margin-top: 10px; text-align: center; } /* Breadcrumb TYPOGRAPHY for the /advice/ family only. Converged 2026-08-05 from three copies inside * this one folder: .crumbs font/colour inline in 4 articles, a second .crumbs variant in glossary, * and a separate .breadcrumb class on 6 more (a
with no landmark and no BreadcrumbList JSON-LD, * three of which still LABELLED the link "Blog" while it pointed at /advice/). All 12 pages now use *