/* ================================================================== Single Condition template (single-condition.php) Design-faithful port of TopicDetail.jsx (condition-anxiety.html). Loads on top of program.css, the hero, sticky CTA, levels strip and contact band reuse the shared .fv-pl-* classes; only the condition-only body sections live here, scoped under .fv-cd. Tokens come from colors_and_type.css. ================================================================== */ .fv-cd * { box-sizing: border-box; } /* ---------------- Signs you might notice ---------------- */ .fv-cd-signs { margin-top: 0; } .fv-cd-signs-title { margin: 0 0 8px; } .fv-cd-signs-sub { color: var(--ink-600); margin: 0 0 22px; max-width: 560px; } .fv-cd-signs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fv-cd-sign { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; } .fv-cd-sign-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--clay-100); color: var(--clay-600); display: flex; align-items: center; justify-content: center; } .fv-cd-sign-text { color: var(--ink-700); } /* Optional prose below the signs grid (signs_note WYSIWYG). */ .fv-cd-signs-note { margin-top: 22px; } /* ---------------- How we help ---------------- */ .fv-cd-how { margin-top: 40px; } .fv-cd-how-title { margin: 0 0 18px; } /* ---------------- At a glance (sidebar card) ---------------- */ .fv-cd-glance { background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius-lg); padding: 24px 26px; } .fv-cd-glance-label { margin-bottom: 14px; } .fv-cd-glance-list { display: flex; flex-direction: column; gap: 13px; } .fv-cd-glance-row { display: flex; gap: 11px; align-items: flex-start; } .fv-cd-glance-icon { flex: none; margin-top: 2px; color: var(--sage-600); } .fv-cd-glance-icon svg { width: 17px; height: 17px; } /* Tight line-height so the label / value pair reads as one compact unit, without it they inherit the page's ~1.75 body leading and drift apart. */ .fv-cd-glance-k { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink-800); } .fv-cd-glance-v { font-size: 14px; line-height: 1.4; color: var(--ink-600); } /* ---------------- Topic-detail body section (Elementor template 268) ---------------- The section carries no background of its own, so the tint shows through, and that tint is --linen, which the direction switcher retints (#FEF9F4 default, #F5FAF6 sage, #FEF8F0 golden). The design puts the detail body on --bg-page (#FFFFFF). Painted as a literal #fff, NOT a token: the body must stay white under every direction, and a token could be pulled into a [data-fv-theme] block later. This is the deliberate exception to the usual "bind section backgrounds to a token" rule. `.elementor` prefix + the two-class :has() argument put this at (0,4,0) so it clears the generated post-268.css rules at (0,3,0), which load after this file, same ordering trap as the column-stacking rule below. */ .fv-cd-topic-body, .elementor .elementor-section:has(> .elementor-container > .fv-cd-aside) { background: #fff; } /* Vertical rhythm: the template ships 80px desktop / 56px below 767px. Step it down at the DESIGN's breakpoints (980 / 600) so the spacing changes in step with the column stacking rather than at Elementor's unrelated 767. */ @media (max-width: 980px) { .elementor .elementor-section:has(> .elementor-container > .fv-cd-aside) { padding-top: 56px; padding-bottom: 56px; } } @media (max-width: 600px) { .elementor .elementor-section:has(> .elementor-container > .fv-cd-aside) { padding-top: 40px; padding-bottom: 40px; } } /* Nested-sticky aside in the Elementor two-column body, mirrors condition-anxiety.html. The CTA + At a Glance live in ONE aside widget (.fv-pl-aside), so the whole aside pins together and both cards stay visible while the row scrolls. The aside COLUMN's widget-wrap is switched to block flow (Elementor's flex-wrap makes a sticky child collapse its line), then the aside WIDGET is sticky, its parent (.elementor-widget-wrap) fills the column height, giving full-row travel. The inner .fv-pl-cta is sticky too (program.css), so once the aside reaches the bottom of the row and releases, the CTA stays pinned while the At a Glance card scrolls up beneath it. NOTE: `display:block` MUST be !important, Elementor's frontend.min.css sets `.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap{display:flex}` (specificity 0,3,0), which out-ranks a plain `.fv-cd-aside > …` (0,2,0) and silently reverts the wrap to flex, collapsing the sticky. The mobile reset is likewise flagged so it still wins on small screens. */ .fv-cd-aside > .elementor-widget-wrap { display: block !important; } .fv-cd-aside .elementor-widget-fox-topic-aside { position: sticky; top: 100px; } @media (max-width: 980px) { /* Stack the body/aside row at the DESIGN's breakpoint, not Elementor's. Elementor only collapses columns to 100% at its mobile breakpoint (767px), but page.css stacks .detail-grid at 980px, so 768-980px otherwise renders a cramped two-column row with the sticky already switched off by the resets below. Mirrors Elementor's own ≤767 rule; .elementor-container is already flex-wrap:wrap, so width:100% is all that's needed to wrap. The leading `.elementor` is load-bearing: the column's width comes from `.elementor-268 .elementor-element.elementor-element-59e96ee{width:38%}` in the generated post-268.css (0,3,0) under `@media (min-width:768px)`. Without the extra class this rule ties at (0,3,0) and loses on source order, since post-268.css is enqueued after condition.css. */ .elementor .elementor-container:has(> .fv-cd-aside) > .elementor-column { width: 100%; } .fv-cd-aside > .elementor-widget-wrap { display: flex !important; } .fv-cd-aside .elementor-widget-fox-topic-aside { position: static; } /* `relative`, NOT `static`: un-sticking is the only goal here, but the CTA's ::before glow is `position:absolute; inset:0` (program.css:119), so the card must stay a containing block. Under `static` the glow resolves against the nearest positioned ancestor (.elementor-widget-wrap) and paints full-bleed past the card's rounded corners, and the card's own `overflow:hidden` can't clip it, since an abspos box is only clipped by ancestors in its containing block chain. Desktop escapes this only because `sticky` is itself positioned. top/z-index MUST be reset with it: the base rule (program.css:115) sets `top:100px; z-index:2` for the sticky, and `static` silently ignored both. `relative` honours them, leaving them live drops the card 100px onto the At a Glance card below and paints it on top. */ .fv-cd-aside .fv-pl-cta { position: relative; top: auto; z-index: auto; } } /* ---------------- Related care grid ---------------- */ .fv-cd-related { background: var(--cream); } .fv-cd-related-inner { max-width: 1200px; margin: 0 auto; padding: 96px 28px; } .fv-cd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .fv-cd-related-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .fv-cd-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .fv-cd-related-photo { height: 168px; overflow: hidden; background: var(--sage-mist); } .fv-cd-related-photo img { width: 100%; height: 100%; object-fit: cover; } .fv-cd-related-photo--blank { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--sage-100), var(--navy-50)); } .fv-cd-related-photo--blank img { width: 46px; height: 46px; object-fit: contain; opacity: 0.5; } .fv-cd-related-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } /* Kit-proof (see program.css .fv-pl-heading-title): bare-h3 kit rule must not restyle the card title. */ .fv-cd-related-grid .fv-cd-related-name { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-900); line-height: 1.3; } .fv-cd-related-more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--accent); font-weight: 600; font-size: 14.5px; } .fv-cd-related-more svg { color: var(--accent); } /* ---------------- Responsive ---------------- */ @media (max-width: 980px) { .fv-cd-related-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .fv-cd-signs-grid { grid-template-columns: 1fr; } .fv-cd-related-inner { padding: 64px 20px; } .fv-cd-related-grid { grid-template-columns: 1fr; } } /* Related substances: icon chip instead of stock photo (2026-07-15). Same 168px media box; pale sage field + circular chip, mirroring the /substances/ hub cards. Tint recipe turns the black stroke SVG sage-800. */ .fv-cd-related-photo--icon { display: flex; align-items: center; justify-content: center; background: var(--sage-50, #F4F9F6); } .fv-cd-related-photo--icon .fv-cd-related-iconchip { width: 76px; height: 76px; border-radius: 50%; background: var(--sage-100, #E7F0EA); display: flex; align-items: center; justify-content: center; } .fv-cd-related-photo--icon .fv-cd-related-iconchip img { width: 34px; height: 34px; object-fit: contain; filter: invert(32%) sepia(12%) saturate(900%) hue-rotate(112deg) brightness(94%) contrast(90%); }