/* Supplete Article Format System — A to E Starter CSS based on the visual mockups: A Calm Editorial Explainer B Decision Guide C Myth-Busting Article D Research-Led Magazine Feature E List / Roundup / Ranking Format Usage idea: ... or: ... This file intentionally avoids bright blue as the main palette. It uses a warm cream / sage / gold editorial system. */ /* ============================================================ 1. Design tokens ============================================================ */ :root { --supp-bg: #fbfaf5; --supp-bg-soft: #f6f3ea; --supp-surface: #ffffff; --supp-surface-soft: #f8f6ef; --supp-surface-green: #eef3e8; --supp-text: #1f2420; --supp-text-soft: #5d655d; --supp-muted: #8a9388; --supp-green: #315f3d; --supp-green-2: #4f7a55; --supp-green-soft: #e9f1e4; --supp-green-pale: #f3f7ef; --supp-gold: #c79a2d; --supp-gold-soft: #f7efdc; --supp-amber: #d28b19; --supp-amber-soft: #fff5df; --supp-red: #9f3a2e; --supp-red-soft: #f8e8e4; --supp-line: #e4ddcf; --supp-line-green: #d7e2cf; --supp-shadow: 0 18px 45px rgba(44, 38, 28, 0.07); --supp-shadow-soft: 0 8px 24px rgba(44, 38, 28, 0.055); --supp-radius-sm: 10px; --supp-radius-md: 16px; --supp-radius-lg: 24px; --supp-radius-xl: 32px; --supp-container: 1180px; --supp-readable: 760px; --supp-font-body: "Nunito", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --supp-font-heading: "Gilda Display", Georgia, "Times New Roman", serif; --supp-font-ui: Inter, "Segoe UI", system-ui, sans-serif; } /* ============================================================ 2. Base page ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.supp-format-page { margin: 0; background: radial-gradient(circle at top left, rgba(49, 95, 61, 0.06), transparent 32%), linear-gradient(180deg, #fffdf8 0%, var(--supp-bg) 42%, #f8f5ed 100%); color: var(--supp-text); font-family: var(--supp-font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Scoped to article main content so propagated site header/footer links keep their shared site.css styling (was bleeding green into the propagated nav). */ body.supp-format-page main a { color: var(--supp-green); text-decoration: underline; text-underline-offset: 2px; } body.supp-format-page main a:hover { text-decoration: underline; text-underline-offset: 3px; } .supp-page { width: min(var(--supp-container), calc(100% - 40px)); margin: 0 auto; padding: 30px 0 64px; } /* ── Standard medical disclaimer (end of every article) ────── */ .supp-disclaimer { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--supp-line); color: var(--supp-text-soft); } .supp-disclaimer h2 { margin: 0 0 8px; font-family: var(--supp-font-ui); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--supp-text-soft); } .supp-disclaimer p { margin: 0; font-size: 0.9rem; line-height: 1.55; } .supp-readwidth { max-width: var(--supp-readable); } .supp-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .supp-kicker::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: url("/asset-pack/assets/icons/line/core-line-17-scales-compare.webp") center/contain no-repeat; box-shadow: inset 0 0 0 1px rgba(49, 95, 61, 0.22); } .supp-meta-dot { display: inline-block; width: 4px; height: 4px; margin: 0 6px; border-radius: 50%; background: var(--supp-muted); } .supp-h1, .supp-page h1 { margin: 12px 0 16px; font-family: var(--supp-font-heading); font-size: clamp(2.3rem, 5vw, 4.75rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; color: var(--supp-text); } .supp-standfirst { max-width: 62ch; margin: 0 0 24px; color: var(--supp-text-soft); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; } .supp-gold-rule { width: 74px; height: 3px; margin: 22px 0; border-radius: 999px; background: var(--supp-gold); } .supp-author { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-family: var(--supp-font-ui); font-size: 0.88rem; } .supp-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .supp-author strong { display: block; color: var(--supp-text); } .supp-author span { display: block; color: var(--supp-text-soft); font-size: 0.82rem; } .supp-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 70px); align-items: center; margin-bottom: 34px; } .supp-hero-media { position: relative; overflow: hidden; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-lg); background: var(--supp-surface-soft); box-shadow: var(--supp-shadow-soft); } .supp-hero-media img, .supp-image img, .supp-split-media img { display: block; width: 100%; height: auto; object-fit: cover; } .supp-hero-media img { aspect-ratio: 4 / 3; } .supp-image { overflow: hidden; margin: 26px 0; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: var(--supp-surface-soft); } .supp-image img { aspect-ratio: 16 / 9; } .supp-caption, .supp-image-caption { padding: 11px 15px; border-top: 1px solid var(--supp-line); background: #fffdf8; color: var(--supp-text-soft); font-size: 0.9rem; font-style: italic; } .supp-card, .supp-panel { border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.82); box-shadow: var(--supp-shadow-soft); } .supp-main { margin-top: 24px; } .supp-main h2 { margin: 42px 0 12px; font-family: var(--supp-font-heading); font-size: clamp(1.55rem, 2.3vw, 2.35rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; } .supp-main h3 { margin: 28px 0 8px; font-family: var(--supp-font-heading); font-size: 1.35rem; font-weight: 500; line-height: 1.2; } .supp-main p { margin: 0 0 15px; } .supp-main ul, .supp-main ol { margin: 0 0 16px 1.2rem; } .supp-main li { margin: 6px 0; } .supp-check-list, .supp-icon-list { list-style: none; padding: 0; margin: 14px 0; } .supp-check-list li, .supp-icon-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 9px 0; align-items: start; } .supp-check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: var(--supp-green); background: var(--supp-green-soft); font-size: 0.75rem; font-weight: 800; } .supp-x-list { list-style: none; padding: 0; margin: 14px 0; } .supp-x-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 9px 0; } .supp-x-list li::before { content: "×"; color: var(--supp-amber); font-weight: 800; } .supp-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--supp-green); color: #fff !important; font-family: var(--supp-font-ui); font-weight: 700; box-shadow: 0 12px 24px rgba(49, 95, 61, 0.18); } .supp-button:hover { background: #244f31; text-decoration: none !important; } /* ============================================================ 3. Shared reusable blocks ============================================================ */ .supp-answer-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 34px; margin: 28px 0; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-lg); background: var(--supp-surface); box-shadow: var(--supp-shadow); } .supp-answer-icon, .supp-round-icon { display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--supp-green-soft); color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 1.9rem; font-weight: 800; } .supp-answer-card h2, .supp-answer-card h3 { margin: 0 0 8px; color: var(--supp-green); font-size: 1.35rem; } .supp-evidence-strip { display: grid; grid-template-columns: 210px 1fr auto; gap: 26px; align-items: center; padding: 20px 24px; margin: 22px 0 34px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: linear-gradient(90deg, var(--supp-surface-soft), var(--supp-gold-soft)); } .supp-evidence-label { color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .supp-evidence-level { display: inline-flex; align-items: center; gap: 10px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 1.65rem; } .supp-note-card, .supp-side-card { padding: 22px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.72); box-shadow: var(--supp-shadow-soft); } .supp-note-card h3, .supp-side-card h3 { margin: 0 0 12px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .supp-takeaway { padding: 20px 24px; margin: 24px 0; border: 1px solid var(--supp-line-green); border-radius: var(--supp-radius-md); background: var(--supp-green-pale); } .supp-takeaway strong { color: var(--supp-green); } .supp-quote { margin: 30px 0; padding: 22px 28px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.68); font-family: var(--supp-font-heading); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.35; } .supp-quote::before { content: "“"; color: var(--supp-green); font-size: 2.3rem; line-height: 0; margin-right: 12px; } .supp-grid-2, .supp-grid-3, .supp-grid-4 { display: grid; gap: 18px; margin: 24px 0; } .supp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .supp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .supp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .supp-grid-card { padding: 22px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.76); box-shadow: var(--supp-shadow-soft); } .supp-grid-card h3, .supp-grid-card h4 { margin: 0 0 10px; color: var(--supp-green); } .supp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; margin: 34px 0; } .supp-split.reverse .supp-split-media { order: 2; } .supp-split-media { overflow: hidden; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: var(--supp-surface-soft); } .supp-split-media img { aspect-ratio: 4 / 3; } .supp-bottom-line { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 30px; margin: 38px 0 16px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-lg); background: linear-gradient(90deg, var(--supp-green-pale), #fffdf7); box-shadow: var(--supp-shadow-soft); } .supp-bottom-line h2, .supp-bottom-line h3 { margin: 0 0 6px; color: var(--supp-green); } .supp-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: #fff; font-size: 0.94rem; } .supp-table th, .supp-table td { padding: 14px 16px; border-bottom: 1px solid var(--supp-line); text-align: left; vertical-align: middle; } .supp-table th { background: var(--supp-surface-soft); color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .supp-table tr:last-child td { border-bottom: 0; } .supp-stars { color: var(--supp-gold); letter-spacing: 0.08em; } /* ============================================================ 4. Format A — Calm Editorial Explainer ============================================================ */ .format-a .supp-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; } .format-a .supp-article-flow { max-width: 760px; } .format-a .supp-side-rail { display: flex; flex-direction: column; gap: 130px; padding-top: 110px; } .format-a .supp-section-number { color: var(--supp-green); font-family: var(--supp-font-heading); } /* ============================================================ 5. Format B — Decision Guide ============================================================ */ .format-b .supp-verdict-card { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 28px; padding: 28px 36px; margin: 30px 0 24px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-lg); background: var(--supp-surface); box-shadow: var(--supp-shadow); } .format-b .supp-verdict-divider { width: 1px; height: 100%; background: var(--supp-line); } .format-b .supp-verdict-good h2, .format-b .supp-verdict-good h3 { color: var(--supp-green); } .format-b .supp-verdict-caution h2, .format-b .supp-verdict-caution h3 { color: var(--supp-amber); } .format-b .supp-verdict-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; } .format-b .supp-verdict-heading h2, .format-b .supp-verdict-heading h3 { margin: 0; font-size: 1.65rem; } .format-b .supp-tradeoff-strip { display: grid; grid-template-columns: 210px repeat(3, minmax(0, 1fr)); gap: 20px; align-items: center; padding: 22px 26px; margin: 24px 0; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.76); } .format-b .supp-tradeoff-strip h3 { margin: 0; color: var(--supp-green); } .format-b .supp-step-list { counter-reset: step; list-style: none; padding: 0; margin: 16px 0; } .format-b .supp-step-list li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin: 13px 0; } .format-b .supp-step-list li::before { content: counter(step); display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--supp-green); color: #fff; font-family: var(--supp-font-ui); font-size: 0.82rem; font-weight: 800; } /* ============================================================ 6. Format C — Myth-Busting Article ============================================================ */ body.format-c { --supp-container: 1210px; --format-c-cream: #fffefd; --format-c-paper: #ffffff; --format-c-paper-soft: #fdfbf7; --format-c-card-bg: #fff; --format-c-line: #e7e1d5; --format-c-ink: #242624; --format-c-shadow: 0 16px 42px rgba(45, 39, 29, .055); background: radial-gradient(circle at 12% 10%, rgba(207, 177, 107, .018), transparent 30%), radial-gradient(circle at 88% 4%, rgba(49, 95, 61, .018), transparent 28%), linear-gradient(180deg, #fffefd 0%, #fffdfb 52%, #fdfcf7 100%); color: var(--format-c-ink); } body.format-c .supp-site-header, .format-c .supp-page, body.format-c .supp-footer { width: min(var(--supp-container), calc(100% - 84px)); } body.format-c .supp-site-header { height: 88px; padding: 0; } body.format-c .supp-brand img { width: 222px; } body.format-c .supp-site-nav { gap: 43px; margin-left: 28px; font-size: 13px; font-weight: 800; } body.format-c .supp-site-nav a { position: relative; color: var(--format-c-ink); } body.format-c .supp-site-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 1px; background: var(--supp-green); } body.format-c .supp-site-icons { gap: 16px; } body.format-c .supp-site-icons a { width: 27px; height: 27px; border: 0; border-radius: 0; background: transparent; } body.format-c .supp-site-icons img { width: 24px; height: 24px; } .format-c .supp-page { padding: 26px 0 22px; } .format-c .supp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 42px; align-items: stretch; margin: 16px 0 34px; } .format-c .supp-hero > div:first-child { display: flex; min-height: 540px; flex-direction: column; } .format-c .supp-kicker { gap: 12px; margin-top: 27px; color: var(--supp-green); font-size: 11.5px; font-weight: 900; letter-spacing: .11em; } .format-c .supp-kicker::before { width: 15px; height: 15px; border: 0; border-radius: 0; background: url("/asset-pack/assets/icons/line/core-line-01-leaf-botanical.webp") center / contain no-repeat; box-shadow: none; } .format-c .supp-kicker-mark { color: #9c9f98; font-size: 13.5px; line-height: 1; } .format-c .supp-meta-dot { width: 16px; height: 16px; margin: 0 2px; border: 1px solid rgba(36, 37, 35, .45); background: transparent; } .format-c .supp-meta-dot::after { content: ""; display: block; width: 2px; height: 5px; margin: 3px auto 0; border-radius: 99px; background: rgba(36, 37, 35, .55); } .format-c .supp-h1 { max-width: 600px; margin: 38px 0 23px; color: #242523; font-size: 48px; font-weight: 640; line-height: 1.08; letter-spacing: 0; } .format-c .supp-gold-rule { width: 68px; height: 3px; margin: 0 0 22px; background: var(--supp-gold); } .format-c .supp-standfirst { max-width: none; margin: 0; color: #414841; font-size: 20.2px; font-weight: 700; line-height: 1.48; } .format-c .supp-opening-copy { display: grid; gap: 16px; max-width: 650px; margin: 0; } .format-c .supp-opening-copy p:not(.supp-standfirst) { margin: 0; color: #414841; font-size: 20.2px; font-weight: 700; line-height: 1.48; } .format-c .supp-hero-media.overlay-quote .supp-photo-quote, .format-c .supp-hero-media .supp-photo-quote { position: absolute; right: 20px; bottom: 0; width: 257px; min-height: 192px; padding: 34px 34px 28px; border-radius: 13px; background: linear-gradient(135deg, #245432, #13331f); color: #fff; font-family: var(--supp-font-heading); font-size: 24px; line-height: 1.25; box-shadow: 0 17px 35px rgba(27, 47, 31, .18); } .format-c .supp-hero-media .supp-photo-quote::before { content: "\201c"; display: block; margin-bottom: 12px; color: #f2e4ba; font-family: Georgia, serif; font-size: 34px; line-height: .4; } .format-c .supp-hero-media .supp-photo-quote::after { content: ""; display: block; width: 43px; height: 2px; margin-top: 12px; background: var(--supp-gold); } .format-c .supp-hero-media { width: 100%; margin: 0; border: 0; border-radius: 12px; box-shadow: none; aspect-ratio: 1 / 1; } .format-c .supp-hero-media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } .format-c .supp-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; min-height: 116px; margin-top: auto; border: 1.5px solid rgba(49, 95, 61, .28); border-radius: 13px; background: transparent; box-shadow: 0 10px 28px rgba(63, 55, 42, .035); overflow: hidden; } .format-c .supp-trust-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; padding: 20px 17px; border-right: 1.5px solid #cfc4a9; } .format-c .supp-trust-item:last-child { border-right: 0; } .format-c .supp-trust-item span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #f1f2e9; } .format-c .supp-trust-item img { width: 34px; height: 34px; object-fit: contain; } .format-c .supp-trust-item p { margin: 0; color: #4f554f; font-size: 14.2px; line-height: 1.35; } .format-c .supp-trust-item strong { color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 14.2px; font-weight: 900; } .format-c .supp-myth-intro { position: relative; display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 66px; align-items: center; min-height: 168px; padding: 30px 244px 28px 42px; margin: 35px 0 24px; border: 1.5px solid #cfc4a9; border-radius: 14px; background: radial-gradient(circle at 118px 50%, rgba(49, 95, 61, .13), transparent 31%), linear-gradient(90deg, rgba(236, 243, 231, .96) 0%, rgba(249, 251, 247, .98) 44%, #fff 78%); box-shadow: var(--format-c-shadow); overflow: hidden; } .format-c .supp-myth-intro::after { content: ""; position: absolute; right: -34px; top: 50%; width: 324px; height: 384px; transform: translateY(-50%); opacity: .3; background: url("/asset-pack/assets/icons/filled-green/19-droplet-hydration.webp") center / contain no-repeat; } .format-c .supp-myth-intro-icon { position: relative; display: grid; place-items: center; justify-self: center; align-self: center; width: 118px; height: 118px; border: 1.5px solid rgba(49, 95, 61, .28); border-radius: 50%; background: transparent; } .format-c .supp-myth-intro-icon .supp-myth-intro-brain { width: 180px; height: 180px; transform: translate(-32px, -40px); object-fit: contain; } .format-c .supp-myth-intro-icon .supp-myth-intro-x { position: absolute; right: -49px; bottom: -48px; width: 124px; height: 124px; opacity: 1; filter: drop-shadow(0 0 0 #fffefd) drop-shadow(0 2px 4px rgba(34, 62, 41, .16)); object-fit: contain; } .format-c .supp-myth-intro-icon::after { content: none; } .format-c .supp-myth-intro h2 { margin: 0 0 11px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 29px; font-weight: 700; letter-spacing: 0; } .format-c .supp-myth-intro p { max-width: 690px; margin: 0; color: #4d524d; font-size: 17.3px; font-weight: 700; line-height: 1.62; } .format-c .supp-myth-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; min-height: 195px; height: auto; margin: 8px 4px; border: 1.5px solid #cfc4a9; border-radius: 10px; background: var(--format-c-card-bg); box-shadow: 0 8px 24px rgba(63, 55, 42, .025); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .format-c .supp-myth-row:hover { border-color: rgba(49, 88, 59, .28); background: rgba(247, 242, 232, .76); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 8px 20px rgba(62, 54, 39, .06), 0 0 0 2px rgba(49, 88, 59, .05), 0 0 20px rgba(49, 88, 59, .08), inset 0 0 0 1px rgba(255, 255, 255, .76); transform: translateY(-1px); } .format-c .supp-myth-row.is-expanded { border-color: rgba(49, 88, 59, .5); background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(49, 88, 59, .08), 0 8px 22px rgba(49, 88, 59, .12), 0 0 0 3px rgba(49, 88, 59, .08), 0 0 22px rgba(49, 88, 59, .13), inset 0 0 0 1px rgba(255, 255, 255, .82); transform: translateY(-1px); } .format-c .supp-myth-row:focus-visible { outline: none; border-color: rgba(49, 88, 59, .52); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 9px 24px rgba(62, 54, 39, .06), 0 0 0 3px rgba(49, 88, 59, .14), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-c .supp-myth-row.is-expanded { z-index: 3; overflow: visible; } .format-c .supp-myth-row.is-expanded::after { content: ""; position: absolute; left: 83.333%; bottom: -17px; z-index: 4; width: 0; height: 0; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 17px solid #cfc4a9; transform: translateX(-50%); pointer-events: none; } .format-c .supp-myth-row:hover .supp-fact-cell { background: rgba(247, 242, 232, .76); } .format-c .supp-myth-row.is-expanded .supp-fact-cell { background: rgba(255, 255, 255, .94); } .format-c .supp-myth-number { position: relative; display: grid; grid-column: 1; grid-row: 1; place-items: center; align-self: start; justify-self: start; width: 54px; height: 54px; margin-left: 24px; margin-top: 34px; background: var(--format-c-cream); border-radius: 50%; color: #5f4619; font-family: var(--supp-font-heading); font-size: 26px; font-weight: 800; line-height: 1; } .format-c .supp-myth-number::before { content: ""; position: absolute; inset: 0; border: 3px solid rgba(31, 76, 45, .86); border-radius: 50%; background: var(--format-c-cream); z-index: -1; } .format-c .supp-myth-number::after { content: none; } .format-c .supp-myth-number { isolation: isolate; z-index: 1; } .format-c .supp-myth-cell, .format-c .supp-fact-cell, .format-c .supp-evidence-cell { min-width: 0; padding: 20px 26px; } .format-c .supp-fact-cell { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; padding-left: 12px; padding-right: 44px; background: var(--format-c-card-bg); border-left: 1.5px solid #cfc4a9; border-right: 1.5px solid #cfc4a9; align-items: start; } .format-c .supp-fact-icon { display: grid; place-items: center; width: 80px; height: 80px; border: 0; border-radius: 50%; } .format-c .supp-fact-icon img { width: 80px; height: 80px; object-fit: contain; } .format-c .supp-myth-cell { position: relative; grid-column: 1; grid-row: 1; padding-left: 96px; padding-right: 76px; } .format-c .supp-fact-cell { grid-column: 2; } .format-c .supp-evidence-cell { grid-column: 3; } .format-c .supp-myth-cell > img { position: absolute; right: 24px; bottom: 22px; width: 45px; height: 45px; object-fit: contain; } .format-c .supp-myth-cell p, .format-c .supp-fact-cell p, .format-c .supp-evidence-cell p { margin: 0; color: #20251f; font-size: 16.5px; font-weight: 650; line-height: 1.5; } .format-c .supp-cell-label { display: block; margin-bottom: 12px; color: #214b2d; font-family: var(--supp-font-ui); font-size: 16px; font-weight: 900; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; } .format-c .supp-myth-cell .supp-cell-label { color: #9b6f16; } .format-c .supp-evidence-cell p { color: #354036; font-size: 15.6px; line-height: 1.48; } .format-c .supp-evidence-cell a, .format-c .supp-evidence-cell .supp-myth-expand-hint { display: inline-flex; margin-top: 11px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 13.2px; font-weight: 900; } .format-c .supp-evidence-cell .supp-myth-expand-hint { pointer-events: none; } .format-c .supp-myth-row.is-expanded .supp-myth-expand-hint::after { content: " open"; } .format-c .supp-myth-detail-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr); gap: 28px; padding: 24px 28px; margin: 18px 4px 22px; border: 1.5px solid #cfc4a9; border-radius: 10px; background: var(--format-c-card-bg); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 9px 24px rgba(62, 54, 39, .06), 0 0 0 3px rgba(49, 88, 59, .055), 0 0 24px rgba(49, 88, 59, .09), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-c .supp-myth-detail-panel[hidden] { display: none; } .format-c .supp-myth-detail-label { display: inline-flex; margin: 0 0 8px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .format-c .supp-myth-detail-panel h3 { margin: 0 0 9px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 29px; font-weight: 700; line-height: 1.08; } .format-c .supp-myth-detail-panel p { margin: 0 0 12px; color: #303832; font-size: 14.8px; line-height: 1.5; } .format-c .supp-myth-detail-panel ul { margin: 0; padding-left: 18px; color: #303832; font-size: 14px; line-height: 1.5; } .format-c .supp-myth-detail-panel li { margin: 7px 0; } .format-c .supp-myth-detail-meta { display: grid; gap: 10px; align-content: start; } .format-c .supp-myth-detail-meta span { display: block; box-sizing: border-box; min-height: 60px; padding: 12px 14px; border: 1.5px solid #cfc4a9; border-radius: 8px; background: var(--format-c-card-bg); color: #303832; font-size: 13.2px; line-height: 1.36; } .format-c .supp-myth-detail-meta strong { display: block; margin-bottom: 2px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.6px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .format-c .supp-myth-detail-close { justify-self: start; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--supp-green); font: inherit; font-weight: 900; cursor: pointer; } .format-c .supp-reality-check { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 0; row-gap: 12px; align-items: start; min-height: 0; padding: 19px 24px 20px 27px; margin: 32px 4px 22px; border: 1.5px solid #cfc4a9; border-radius: 14px; background: transparent; box-shadow: var(--format-c-shadow); } .format-c .supp-reality-heading { grid-column: 1 / -1; align-self: start; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; } .format-c .supp-reality-heading span { display: grid; place-items: center; width: 44px; height: 44px; } .format-c .supp-reality-heading img { width: 42px; height: 42px; object-fit: contain; } .format-c .supp-reality-heading h2 { margin: 0 0 4px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 27px; font-weight: 650; } .format-c .supp-reality-heading p { margin: 0; color: #4e554e; font-size: 14.8px; line-height: 1.4; } .format-c .supp-reality-check > p { position: relative; min-height: 72px; margin: 0; padding: 13px 20px 0 62px; border-left: 0; color: #2e372f; font-size: 13.9px; font-weight: 620; line-height: 1.42; } .format-c .supp-reality-check > p:nth-of-type(n+2) { padding-left: 76px; border-left: 1.5px solid #cfc4a9; } .format-c .supp-reality-check > p br { display: none; } .format-c .supp-reality-check > p img { position: absolute; left: 3px; top: 1px; width: 44px; height: 44px; margin: 0; object-fit: contain; } .format-c .supp-reality-check > p:nth-of-type(n+2) img { left: 24px; } .format-c .supp-reality-check > p strong { display: block; margin-bottom: 1px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 17px; font-weight: 700; line-height: 1.12; } .format-c .supp-reality-check .supp-button { grid-column: 5; grid-row: 2; align-self: center; justify-self: stretch; min-height: 78px; padding: 0 20px; border-radius: 11px; font-size: 15.5px; font-weight: 800; line-height: 1.35; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 9px 18px rgba(37, 73, 46, .12); } .format-c .supp-bottom-line { grid-template-columns: 174px minmax(0, 1fr) 195px; gap: 30px; align-items: center; min-height: 200px; padding: 24px 36px 24px 31px; margin: 20px 4px 18px; border: 1.5px solid #cfc4a9; border-radius: 12px; background: transparent; box-shadow: var(--format-c-shadow); } .format-c .supp-bottom-line .supp-bottom-cta { justify-self: stretch; align-self: center; min-height: 88px; padding: 0 22px; border-radius: 11px; font-size: 16.2px; font-weight: 800; line-height: 1.35; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 9px 18px rgba(37, 73, 46, .12); } .format-c .supp-bottom-plant { display: grid; place-items: center; width: 138px; height: 138px; border-radius: 50%; background: #f1eddf; } .format-c .supp-bottom-plant img { width: 134px; height: 134px; object-fit: contain; } .format-c .supp-bottom-line h2 { margin: 0 0 15px; color: var(--format-c-ink); font-family: var(--supp-font-heading); font-size: 34px; font-weight: 500; } .format-c .supp-bottom-line .supp-check-list { margin: 0; } .format-c .supp-bottom-line .supp-check-list li { grid-template-columns: 21px minmax(0, 1fr); gap: 11px; margin: 7px 0; color: #2a302a; font-size: 16px; line-height: 1.42; } .format-c .supp-bottom-line .supp-check-list li::before { width: 17px; height: 17px; border: 1px solid rgba(49, 95, 61, .45); background: transparent; color: var(--supp-green); font-size: 10px; } .format-c .supp-bottom-line .supp-note-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; align-items: start; min-height: 128px; margin: 0; padding: 22px 24px; border: 1.5px solid var(--format-c-line); border-radius: 10px; background: rgba(250, 250, 242, .84); box-shadow: none; } .format-c .supp-bottom-line .supp-note-card span { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f2eedf; } .format-c .supp-bottom-line .supp-note-card img { width: 26px; height: 26px; object-fit: contain; } .format-c .supp-bottom-line .supp-note-card h3 { margin: 0 0 8px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; } .format-c .supp-bottom-line .supp-note-card p { grid-column: 2; margin: 0; color: #343934; font-size: 15.2px; line-height: 1.55; } .format-c .supp-template-label { margin-top: 23px; color: #7e7766; font-family: var(--supp-font-heading); font-size: 17px; font-weight: 500; letter-spacing: .02em; } .format-c .supp-template-label::before, .format-c .supp-template-label::after { display: none; } body.format-c .supp-footer { align-items: center; margin-top: 34px; padding: 32px 0 30px; border-color: var(--format-c-line); color: #575c56; } body.format-c .supp-footer-brand { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: center; } body.format-c .supp-footer-brand img { width: 217px; grid-row: 1; grid-column: 1 / -1; margin-bottom: 0; } body.format-c .supp-footer-brand p { grid-column: 1 / -1; max-width: 310px; color: #4f554f; font-size: 13px; line-height: 1.45; } body.format-c .supp-footer > div:last-child { color: #333933; font-family: var(--supp-font-ui); font-size: 12.6px; font-weight: 600; white-space: nowrap; } /* ============================================================ 7. Format D — Research-Led Magazine Feature ============================================================ */ body.format-d { --supp-container: 812px; --supp-section-extend: 54px; --supp-text: #242523; --supp-text-soft: #4e554e; --supp-green: #31583b; --supp-gold: #c18d20; --supp-line: #ded6c8; --supp-bg: #fffdf8; --supp-bg-soft: #fbfaf4; --supp-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif; background: radial-gradient(circle at 13% 8%, rgba(49, 88, 59, 0.038), transparent 28%), linear-gradient(180deg, #fffefa 0%, #fffdf8 42%, #fbfaf4 100%); font-size: 13px; line-height: 1.46; overflow-x: hidden; } .format-d .supp-page { width: min(var(--supp-container), calc(100% - 128px)); padding: 0 0 10px; } .format-d .supp-h1 { width: 332px; margin: 17px 0 13px; font-size: 46px; font-weight: 700; line-height: 0.98; letter-spacing: -0.01em; } .format-d .supp-h1 span { display: block; white-space: nowrap; } .format-d .supp-kicker { gap: 9px; font-size: 9.4px; letter-spacing: .09em; } .format-d .supp-kicker::before { width: 11px; height: 11px; } .format-d .supp-meta-dot { width: 3px; height: 3px; margin: 0 7px; } .format-d .supp-gold-rule { width: 46px; height: 2px; margin: 16px 0 17px; } .format-d .supp-standfirst { width: 232px; margin-bottom: 23px; font-size: 14.2px; line-height: 1.45; } .format-d .supp-author { gap: 10px; margin-top: 0; font-size: 10.5px; line-height: 1.25; } .format-d .supp-author img { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(44, 38, 28, .12); } .format-d .supp-author span { font-size: 10px; } .format-d .supp-hero { width: calc(100dvw - max(64px, (100dvw - var(--supp-container)) / 2)); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; align-items: start; margin-bottom: 19px; } .format-d .supp-hero > div:first-child { position: relative; z-index: 2; padding-top: 34px; } .format-d .supp-hero-media { transform: translateX(-42px); width: calc(100% + 42px); height: 376px; margin: 0; border: 0; border-radius: 0; box-shadow: none; } .format-d .supp-hero-media::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 48%; background: linear-gradient(90deg, #fffefa 0%, rgba(255, 253, 248, 0.96) 18%, rgba(255, 253, 248, 0.72) 34%, rgba(255, 253, 248, 0.18) 58%, rgba(255, 253, 248, 0) 100%); pointer-events: none; } .format-d .supp-hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-position: center; } .format-d .supp-hero-quote-card { position: absolute; z-index: 2; left: 0; bottom: 5px; width: 206px; min-height: 153px; padding: 23px 20px 18px; border-radius: 10px; background: rgba(248, 246, 239, 0.93); box-shadow: 0 14px 34px rgba(44, 38, 28, .08); font-family: var(--supp-font-heading); font-size: 15px; line-height: 1.4; } .format-d .supp-hero-quote-card::before { content: "“"; position: absolute; left: 10px; top: -24px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3f6f49; color: #fff; font-family: Georgia, serif; font-size: 33px; line-height: 1; } .format-d .supp-hero-quote-card p { margin: 0 0 12px; } .format-d .supp-feature-intro { align-items: start; margin: 38px 0 40px; } .format-d .supp-image { align-self: start; height: var(--supp-feature-intro-image-height, 260px); } .format-d .supp-image img { height: 100%; } .format-d .supp-hero-quote-card strong { color: #3f6f49; font-family: var(--supp-font-ui); font-size: 11px; font-weight: 800; } .format-d .supp-evidence-ladder { position: relative; display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); gap: 0; align-items: center; min-height: 94px; padding: 10px 12px; margin: 0 0 24px; border: 1px solid #e3dccf; border-radius: 8px; background: rgba(255, 255, 255, 0.66); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 7px 18px rgba(62, 54, 39, .052), 0 0 18px rgba(62, 54, 39, .055), inset 0 0 0 1px rgba(255, 255, 255, .72); } .format-d .supp-evidence-ladder, .format-d .supp-feature-intro, .format-d .supp-quote, .format-d .supp-main, .format-d .supp-reference-box { width: calc(100% + var(--supp-section-extend)); } .format-d .supp-evidence-ladder::before { content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: 15px; background: radial-gradient(closest-side, rgba(78, 69, 48, .095), rgba(78, 69, 48, 0)); filter: blur(3px); pointer-events: none; } .format-d .supp-ladder-label { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 69px; padding: 0 20px 0 12px; border-right: 1px solid var(--supp-line); color: #3f6f49; font-family: var(--supp-font-ui); font-size: 10.2px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; } .format-d .supp-ladder-label small { display: block; margin-top: 12px; color: var(--supp-text-soft); font-size: 9.7px; line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal; } .format-d .supp-ladder-step { position: relative; z-index: 1; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 69px; padding: 9px 12px; border-radius: 8px; background: transparent; } .format-d .supp-ladder-step:not(:last-child)::after { content: "›"; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); color: #3f6f49; font-size: 19px; opacity: .75; } .format-d .supp-ladder-step span, .format-d .supp-mechanism > span, .format-d .supp-study-grid .supp-grid-card > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #eee9db; } .format-d .supp-ladder-step span { color: #3f6f49; } .format-d .supp-ladder-step img, .format-d .supp-mechanism img, .format-d .supp-study-grid img { width: 17px; height: 17px; object-fit: contain; } .format-d .supp-ladder-step strong { display: block; margin-bottom: 4px; font-family: var(--supp-font-heading); font-size: 12.4px; line-height: 1.14; color: #3f6f49; white-space: nowrap; } .format-d .supp-ladder-step small { display: block; color: #3f473f; font-size: 9.1px; line-height: 1.28; } .format-d .supp-ladder-step.is-active { width: 112px; justify-self: end; grid-template-columns: 28px minmax(0, 1fr); margin-left: 11px; padding: 8px 9px; background: #f3f0e7; box-shadow: inset 0 0 0 1px #ddd5c4; } .format-d .supp-ladder-step.is-active span { width: 27px; height: 27px; } .format-d .supp-ladder-step.is-active strong { font-size: 10.6px; white-space: normal; } .format-d .supp-ladder-step.is-active small { font-size: 8.2px; } .format-d .supp-feature-intro { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: stretch; margin: 25px 0 21px; } .format-d .supp-feature-intro h2 { margin: 4px 0 16px; font-family: var(--supp-font-heading); font-size: 29px; font-weight: 700; line-height: 1.07; letter-spacing: -0.02em; } .format-d .supp-feature-intro p { margin: 0 0 9px; width: 292px; font-size: 11.2px; line-height: 1.42; } .format-d .supp-image { width: 100%; height: 100%; align-self: stretch; margin: 0; border: 0; border-radius: 8px; box-shadow: none; } .format-d .supp-image img { height: 100%; aspect-ratio: auto; object-position: center; } .format-d .supp-quote { position: relative; display: block; min-height: 58px; margin: 0 0 17px; padding: 18px 80px 14px 160px; border-radius: 7px; background: rgba(255, 255, 255, .52); font-size: 18px; line-height: 1.18; } .format-d .supp-quote::before { content: "“"; position: absolute; left: 120px; top: 50%; transform: translateY(-38%); margin: 0; color: var(--supp-green); font-size: 43px; line-height: .7; } .format-d .supp-quote::after { content: ""; position: absolute; left: 226px; bottom: 13px; width: 45px; height: 2px; background: var(--supp-gold); } .format-d .supp-main { margin-top: 0; } .format-d .supp-main h2 { margin: 21px 0 5px; font-size: 24.5px; line-height: 1.08; letter-spacing: -0.02em; } .format-d .supp-main > p { max-width: 700px; margin: 0 0 16px; font-size: 11.5px; line-height: 1.48; } .format-d .supp-mechanism-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; margin: 16px 0 20px; } .format-d .supp-mechanism { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; } .format-d .supp-mechanism > span { width: 48px; height: 48px; } .format-d .supp-mechanism img { width: 25px; height: 25px; } .format-d .supp-mechanism h3, .format-d .supp-study-grid .supp-grid-card h3 { margin: 0 0 5px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 14.4px; font-weight: 500; line-height: 1.16; } .format-d .supp-mechanism p, .format-d .supp-study-grid .supp-grid-card p { margin: 0; font-size: 10.2px; line-height: 1.45; color: #303832; } .format-d .supp-study-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 5px 0 21px; } .format-d .supp-study-grid .supp-grid-card { min-height: 101px; padding: 10px 13px 9px; border-radius: 5px; box-shadow: none; } .format-d .supp-study-grid .supp-grid-card > span { width: 27px; height: 27px; margin-bottom: 7px; } .format-d .supp-study-grid img { width: 15px; height: 15px; } .format-d .supp-split { grid-template-columns: minmax(0, 1.44fr) minmax(0, .84fr); gap: 38px; align-items: center; margin: 21px 0 21px; } .format-d .supp-split-media { margin: 0; border: 0; border-radius: 8px; } .format-d .supp-split-media img { height: 207px; aspect-ratio: auto; object-position: center; } .format-d .supp-split h2 { margin-top: 0; font-size: 25px; } .format-d .supp-split p { font-size: 10.5px; line-height: 1.5; } .format-d .supp-check-list { margin-top: 10px; font-size: 10.5px; line-height: 1.35; } .format-d .supp-check-list li { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin: 8px 0; } .format-d .supp-check-list li::before { width: 14px; height: 14px; background: var(--supp-green); color: #fff; font-size: 9px; } .format-d .supp-text-link { display: inline-flex; margin-top: 8px; color: var(--supp-green); font-size: 11px; font-weight: 800; } .format-d .supp-reference-box { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; padding: 13px 22px; margin-top: 14px; border: 1px solid var(--supp-line); border-radius: 7px; background: rgba(255, 255, 255, 0.58); color: var(--supp-text-soft); font-size: 6.7px; line-height: 1.3; } .format-d .supp-reference-box h2, .format-d .supp-newsletter h3 { margin: 0 0 6px; color: var(--supp-text); font-family: var(--supp-font-heading); font-size: 13.3px; font-weight: 500; } .format-d .supp-newsletter, .format-d .supp-newsletter input, .format-d .supp-newsletter button { font-size: 8.5px; } .format-d .supp-reference-box ol { margin: 0; padding-left: 12px; } .format-d .supp-reference-box li { margin: 2px 0; } .format-d .supp-newsletter { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 6px; } .format-d .supp-newsletter h3, .format-d .supp-newsletter p { grid-column: 1 / -1; } .format-d .supp-newsletter p { margin: 0 0 5px; } .format-d .supp-newsletter label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .format-d .supp-newsletter input, .format-d .supp-newsletter button { width: 100%; height: 24px; border: 1px solid #cfc6b8; border-radius: 3px; font: inherit; } .format-d .supp-newsletter input { padding: 0 8px; background: rgba(255, 255, 255, .7); } .format-d .supp-newsletter button { border-color: var(--supp-green); background: var(--supp-green); color: #fff; cursor: pointer; } /* ============================================================ 8. Format E — List / Roundup / Ranking ============================================================ */ .format-e .supp-picks-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: hidden; margin: 30px 0 22px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: var(--supp-surface); box-shadow: var(--supp-shadow-soft); } .format-e .supp-pick { /* Icons were removed; cards are now a single text column with larger, more readable type than the original 0.66rem label / default body text. */ display: block; padding: 20px 20px 22px; border-right: 1px solid var(--supp-line); } .format-e .supp-pick > .supp-round-icon { /* Defensive: if any legacy markup still ships an icon, hide it. */ display: none; } .format-e .supp-pick p { margin: 0; color: var(--supp-text); font-size: 15px; font-weight: 500; line-height: 1.45; } .format-e .supp-pick strong { display: block; margin: 4px 0 6px; color: var(--supp-text); font-family: var(--supp-font-heading); font-size: 19px; font-weight: 800; line-height: 1.2; } .format-e .supp-pick:last-child { border-right: 0; } .format-e .supp-pick-label { display: block; margin-bottom: 2px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .format-e .supp-filter-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0; } .format-e .supp-filter-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 22px; border: 1px solid var(--supp-line); border-radius: 10px; background: var(--supp-surface-soft); color: var(--supp-text-soft); font-family: var(--supp-font-ui); font-weight: 700; } .format-e .supp-filter-chip.is-active { background: var(--supp-green); border-color: var(--supp-green); color: #fff; } .format-e .supp-ranking-table { margin: 24px 0 28px; } .format-e .supp-rank-badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--supp-surface-soft); color: var(--supp-green); font-weight: 800; } .format-e .supp-score { display: inline-flex; min-width: 68px; justify-content: center; padding: 6px 10px; border-radius: 9px; background: var(--supp-green-pale); color: var(--supp-green); font-weight: 800; } .format-e .supp-item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 28px 0; } .format-e .supp-item-card { position: relative; padding: 24px; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-md); background: rgba(255, 255, 255, 0.8); box-shadow: var(--supp-shadow-soft); } .format-e .supp-item-rank { position: absolute; top: 16px; left: 16px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--supp-green); color: #fff; font-size: 0.84rem; font-weight: 800; } .format-e .supp-product-thumb { width: 88px; height: 88px; margin: 12px 0 16px; border-radius: 50%; object-fit: cover; box-shadow: var(--supp-shadow-soft); } .format-e .supp-pro-con { margin-top: 16px; font-size: 0.88rem; } .format-e .supp-choose-panel { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px; margin: 34px 0; border: 1px solid var(--supp-line); border-radius: var(--supp-radius-lg); background: linear-gradient(90deg, var(--supp-green-pale), #fffdf8); } .format-e .supp-choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* ============================================================ 9. Responsive ============================================================ */ @media (max-width: 1050px) { .supp-hero, .format-a .supp-main, .format-d .supp-hero, .format-d .supp-feature-intro, .supp-split, .supp-bottom-line { grid-template-columns: 1fr; } .format-a .supp-side-rail { gap: 20px; padding-top: 0; } .supp-grid-4, .format-d .supp-study-grid, .format-e .supp-item-grid, .format-e .supp-picks-strip, .format-e .supp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .format-d .supp-hero-quote-card { position: static; width: auto; margin: 16px; } .format-d .supp-evidence-ladder { grid-template-columns: 1fr 1fr; } .format-d .supp-ladder-label { border-right: 0; border-bottom: 1px solid var(--supp-line); grid-column: 1 / -1; } .format-c .supp-myth-row { grid-template-columns: 72px 1fr; height: auto; min-height: 195px; } .format-c .supp-evidence-cell { grid-column: 2 / -1; } .format-c .supp-reality-check { grid-template-columns: 1fr 1fr; } .format-c .supp-reality-heading, .format-c .supp-reality-check .supp-button { grid-column: 1 / -1; grid-row: auto; } .format-c .supp-reality-check .supp-button { justify-self: start; width: min(100%, 220px); } .format-c .supp-bottom-line { grid-template-columns: 138px minmax(0, 1fr) 195px; } .format-c .supp-bottom-line .supp-bottom-cta { grid-column: 3; justify-self: stretch; width: 100%; } .format-c .supp-myth-detail-panel { grid-template-columns: 1fr; } .format-b .supp-tradeoff-strip { grid-template-columns: 1fr 1fr; } .format-e .supp-choose-panel { grid-template-columns: 1fr; } } @media (max-width: 720px) { body.supp-format-page { font-size: 15px; } .supp-page { width: min(100% - 24px, var(--supp-container)); padding-top: 18px; } .supp-h1, .supp-page h1 { font-size: clamp(2rem, 12vw, 3rem); } .supp-answer-card, .format-c .supp-myth-intro, .format-b .supp-verdict-card { grid-template-columns: 1fr; padding: 22px; } .format-b .supp-verdict-divider { width: 100%; height: 1px; } .supp-evidence-strip, .supp-grid-2, .supp-grid-3, .supp-grid-4, .format-c .supp-trust-strip, .format-d .supp-study-grid, .format-e .supp-item-grid, .format-e .supp-picks-strip, .format-e .supp-choice-grid, .format-b .supp-tradeoff-strip { grid-template-columns: 1fr; } .format-e .supp-pick { border-right: 0; border-bottom: 1px solid var(--supp-line); } .format-e .supp-pick:last-child { border-bottom: 0; } .format-c .supp-myth-row { grid-template-columns: 1fr; } .format-c .supp-myth-number, .format-c .supp-myth-cell, .format-c .supp-fact-cell, .format-c .supp-evidence-cell { grid-column: auto; grid-row: auto; } .format-c .supp-reality-check { grid-template-columns: 1fr; } .format-c .supp-myth-row.is-expanded::after { display: none; } .format-c .supp-myth-detail-panel { margin: 12px 4px 18px; padding: 20px; } .format-c .supp-bottom-line { grid-template-columns: 1fr; } .format-c .supp-bottom-line .supp-bottom-cta { justify-self: stretch; width: 100%; } .supp-table { display: block; overflow-x: auto; white-space: nowrap; } .supp-bottom-line { text-align: left; } } /* ============================================================ 10. Demo header/footer helpers for these standalone templates Replace with /en/shared_site_elements/site.css in production if needed. ============================================================ */ .supp-site-header { width: min(var(--supp-container), calc(100% - 40px)); margin: 0 auto; padding: 24px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .supp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--supp-green) !important; font-family: var(--supp-font-heading); font-size: 2rem; text-decoration: none !important; } .supp-brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--supp-line-green); border-radius: 50%; font-family: var(--supp-font-ui); font-size: 1.05rem; } .supp-site-nav { display: flex; align-items: center; gap: 30px; font-family: var(--supp-font-ui); font-size: 0.92rem; font-weight: 650; } .supp-site-icons { display: flex; gap: 14px; color: var(--supp-text); font-size: 1.15rem; } .supp-template-label { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0 0; color: var(--supp-muted); font-family: var(--supp-font-ui); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; } .supp-template-label::before, .supp-template-label::after { content: ""; width: min(220px, 22vw); height: 1px; background: var(--supp-line); } .supp-footer { width: min(var(--supp-container), calc(100% - 40px)); margin: 32px auto 0; padding: 28px 0; border-top: 1px solid var(--supp-line); display: grid; grid-template-columns: 1fr auto; gap: 28px; color: var(--supp-text-soft); font-size: 0.9rem; } .supp-hero-media.overlay-quote .supp-photo-quote, .supp-hero-media .supp-photo-quote { position: absolute; right: 24px; bottom: 24px; max-width: 290px; padding: 22px 24px; border-radius: 18px; background: var(--supp-green); color: #fff; font-family: var(--supp-font-heading); font-size: 1.45rem; line-height: 1.25; box-shadow: var(--supp-shadow-soft); } .supp-mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; border-top: 1px solid var(--supp-line); } .supp-mini-metrics > div { padding: 14px 16px 0 0; border-right: 1px solid var(--supp-line); } .supp-mini-metrics > div:last-child { border-right: 0; } .supp-mini-metrics strong { display: block; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 1.65rem; } .supp-product-name { display: flex; align-items: center; gap: 12px; } .supp-table-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; box-shadow: var(--supp-shadow-soft); } .supp-product-link { display: inline-flex; margin-top: 10px; color: var(--supp-green); font-weight: 750; } @media (max-width: 760px) { .supp-site-header { flex-wrap: wrap; } .supp-site-nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; font-size: 0.82rem; } .supp-site-icons { margin-left: auto; } .supp-footer { grid-template-columns: 1fr; } .supp-hero-media.overlay-quote .supp-photo-quote, .supp-hero-media .supp-photo-quote { position: static; max-width: none; margin: 14px; } .supp-mini-metrics { grid-template-columns: 1fr; } .supp-mini-metrics > div { border-right: 0; border-bottom: 1px solid var(--supp-line); padding: 12px 0; } } /* ============================================================ 11. Added brand asset helpers (complete pack) ============================================================ */ .supp-brand img { display: block; width: 260px; height: auto; } .supp-brand { gap: 0; } .supp-site-icons img { width: 19px; height: 19px; opacity: .9; } .supp-site-icons a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--supp-line); border-radius: 50%; background: rgba(255,255,255,.7); } .supp-footer-brand img { display: block; width: min(100%, 430px); height: auto; margin-bottom: 10px; } .supp-footer-brand p { margin: 0; } body.format-d .supp-site-header { width: min(860px, calc(100% - 80px)); height: 67px; padding: 0; gap: 20px; } body.format-d .supp-brand img { width: 153px; } body.format-d .supp-site-nav { gap: 34px; margin-left: 38px; color: var(--supp-text); font-size: 10.3px; font-weight: 800; } body.format-d .supp-site-nav a { position: relative; color: var(--supp-text); text-decoration: none; } body.format-d .supp-site-nav a::first-letter { letter-spacing: 0; } body.format-d .supp-site-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 1px; background: var(--supp-green); } body.format-d .supp-site-icons { gap: 13px; } body.format-d .supp-site-icons a { width: 19px; height: 19px; border: 0; border-radius: 0; background: transparent; } body.format-d .supp-header-icon { position: relative; display: block; width: 18px; height: 18px; color: #202420; } body.format-d .supp-header-icon-search::before { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border: 1.4px solid currentColor; border-radius: 50%; } body.format-d .supp-header-icon-search::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 7px; height: 1.4px; border-radius: 999px; background: currentColor; transform: rotate(45deg); transform-origin: center; } body.format-d .supp-header-icon-user::before { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 6px; border: 1.35px solid currentColor; border-radius: 50%; } body.format-d .supp-header-icon-user::after { content: ""; position: absolute; left: 3px; bottom: 2px; width: 12px; height: 8px; border: 1.35px solid currentColor; border-radius: 50% 50% 45% 45%; } body.format-d .supp-header-icon-bag::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border: 1.35px solid currentColor; border-radius: 1px; } body.format-d .supp-header-icon-bag::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 7px; border: 1.35px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; } body.format-d .supp-footer { width: min(812px, calc(100% - 128px)); display: grid; grid-template-columns: 180px 1fr 150px; gap: 28px; align-items: start; margin: 8px auto 0; padding: 0 0 8px; border-top: 0; font-size: 8.2px; line-height: 1.2; } body.format-d .supp-footer-brand img { width: 128px; margin-bottom: 7px; } body.format-d .supp-footer-brand p { color: var(--supp-text-soft); } body.format-d .supp-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } body.format-d .supp-footer-nav strong, body.format-d .supp-footer-nav a { display: block; } body.format-d .supp-footer-nav strong { margin-bottom: 5px; color: var(--supp-text); font-weight: 800; } body.format-d .supp-footer-nav a { margin: 2px 0; color: var(--supp-text-soft); text-decoration: none; } body.format-d .supp-footer-social { display: flex; gap: 17px; justify-content: flex-end; padding-top: 27px; } body.format-d .supp-footer-social a { color: var(--supp-text); font-size: 12px; text-decoration: none; } body.format-d .supp-footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; width: 100%; min-height: 31px; padding: 0 max(64px, calc((100dvw - 812px) / 2)); border-top: 1px solid var(--supp-line); color: var(--supp-text-soft); font-family: var(--supp-font-ui); font-size: 8.5px; } body.format-d .supp-footer-bottom span:nth-child(2) { color: var(--supp-text); font-size: 10px; } body.format-d .supp-footer-bottom span:last-child { display: flex; justify-content: flex-end; gap: 27px; } body.format-d .supp-footer-bottom a { color: inherit; text-decoration: none; } body.format-d { --supp-container: 940px; --supp-section-extend: 118px; background: radial-gradient(circle at 13% 8%, rgba(49, 88, 59, 0.006), transparent 29%), linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #fffefd 100%); font-size: 14px; } .format-d .supp-page { width: min(var(--supp-container), calc(100% - 96px)); margin-left: max(64px, calc((100% - var(--supp-container)) / 2)); margin-right: auto; } .format-d .supp-h1 { width: 358px; font-size: 46px; } .format-d .supp-kicker { font-size: 10px; } .format-d .supp-standfirst { width: 260px; font-size: 15.6px; } .format-d .supp-author { font-size: 11.5px; } .format-d .supp-author span { font-size: 10.8px; } .format-d .supp-hero { grid-template-columns: 315px minmax(0, 1fr); width: calc(100dvw - max(48px, (100dvw - var(--supp-container)) / 2)); } .format-d .supp-hero-media::before { background: linear-gradient(90deg, #fffefd 0%, rgba(255, 253, 250, 0.96) 18%, rgba(255, 253, 250, 0.72) 34%, rgba(255, 253, 250, 0.18) 58%, rgba(255, 253, 250, 0) 100%); } .format-d .supp-hero-quote-card { font-size: 16px; } .format-d .supp-hero-quote-card strong { font-size: 11.8px; } .format-d .supp-ladder-label { font-size: 11px; } .format-d .supp-ladder-label small { font-size: 10.4px; } .format-d .supp-ladder-step strong { max-width: 88px; font-size: 14.7px; line-height: 1.05; white-space: normal; text-wrap: balance; } .format-d .supp-ladder-step small { font-size: 10.8px; line-height: 1.2; } .format-d .supp-ladder-step.is-active { width: 124px; } .format-d .supp-ladder-step.is-active strong { max-width: 68px; font-size: 12px; line-height: 1.06; } .format-d .supp-ladder-step.is-active small { font-size: 9.4px; line-height: 1.14; } .format-d .supp-feature-intro { grid-template-columns: 315px minmax(0, 1fr); } .format-d .supp-feature-intro h2 { font-size: 32px; } .format-d .supp-feature-intro p { width: 315px; font-size: 13.2px; } .format-d .supp-quote { font-size: 20px; } .format-d .supp-main h2 { font-size: 27px; } .format-d .supp-main > p { max-width: 790px; font-size: 12.8px; } .format-d .supp-mechanism h3, .format-d .supp-study-grid .supp-grid-card h3 { font-size: 16px; } .format-d .supp-mechanism p, .format-d .supp-study-grid .supp-grid-card p { font-size: 11.6px; } .format-d .supp-study-grid .supp-grid-card { min-height: 132px; } .format-d .supp-split h2 { font-size: 28px; } .format-d .supp-split p, .format-d .supp-check-list { font-size: 11.8px; } .format-d .supp-text-link { font-size: 12px; } .format-d .supp-reference-box { font-size: 7.8px; } .format-d .supp-reference-box h2, .format-d .supp-newsletter h3 { font-size: 15px; } .format-d .supp-newsletter, .format-d .supp-newsletter input, .format-d .supp-newsletter button { font-size: 9.4px; } body.format-d .supp-site-header { width: min(914px, calc(100% - 80px)); } body.format-d .supp-site-nav { font-size: 11.2px; } body.format-d .supp-footer { width: min(var(--supp-container), calc(100% - 96px)); font-size: 9.2px; } body.format-d .supp-footer-social a { font-size: 13px; } body.format-d .supp-footer-bottom { font-size: 9.2px; } body.format-d .supp-footer-bottom span:nth-child(2) { font-size: 11px; } .format-d .supp-hero-quote-card { width: 218px; padding-right: 22px; } .format-d .supp-evidence-ladder { width: calc(100% + 118px); grid-template-columns: 178px repeat(5, minmax(0, 1fr)); } .format-d .supp-ladder-label { padding-right: 24px; } .format-d .supp-ladder-step strong { max-width: 108px; } .format-d .supp-ladder-step.is-active { width: 124px; } .format-d .supp-ladder-step.is-active strong { max-width: 72px; font-size: 12.8px; } .format-d .supp-ladder-step.is-active small { font-size: 9.8px; } .format-d .supp-feature-intro { align-items: start; margin: 38px 0 40px; } .format-d .supp-image { align-self: start; height: var(--supp-feature-intro-image-height, 260px); } @media (max-width: 720px) { .supp-brand img { width: 210px; } } .format-d .supp-quote { font-weight: 600; } .format-d .supp-quote::before { content: ""; left: 112px; top: 50%; width: 28.5px; height: 28.5px; transform: translateY(-50%); background: url("/asset-pack/assets/decorative/core-filled-green-18-quote-marks-filled.webp") center / contain no-repeat; color: transparent; font-size: 0; line-height: 0; } .format-d .supp-quote::after { left: 160px; } .format-d .supp-main h2, .format-d .supp-split h2 { font-size: 32px; font-weight: 700; line-height: 1.07; letter-spacing: 0; } .format-d .supp-main h2 { margin: 34px 0 9px; } .format-d .supp-main > p, .format-d .supp-split p, .format-d .supp-check-list { font-size: 13.2px; line-height: 1.48; } .format-d .supp-mechanism-grid { gap: 40px; margin: 22px 0 38px; } .format-d .supp-mechanism h3, .format-d .supp-study-grid .supp-grid-card h3 { font-size: 17px; font-weight: 700; line-height: 1.14; } .format-d .supp-mechanism p, .format-d .supp-study-grid .supp-grid-card p { font-size: 12.6px; line-height: 1.44; } .format-d .supp-study-grid { gap: 10px; margin: 18px 0 34px; } .format-d .supp-study-grid .supp-grid-card { min-height: 148px; padding: 12px 13px 12px; } .format-d .supp-split { margin: 34px 0 30px; } .format-d .supp-split h2 { margin-bottom: 10px; } .format-d .supp-check-list { margin-top: 18px; } .format-d .supp-check-list li { margin: 11px 0; } .format-d .supp-text-link { margin-top: 14px; font-size: 13px; } body.format-d { font-size: 15.4px; } body.format-d .supp-site-nav { font-size: 12.3px; } .format-d .supp-kicker { font-size: 11px; } .format-d .supp-h1 { width: 420px; font-size: 51px; } .format-d .supp-standfirst { width: 315px; font-size: 16.3px; } .format-d .supp-author { font-size: 12.7px; } .format-d .supp-author span { font-size: 11.9px; } .format-d .supp-author img { width: 37px; height: 37px; } .format-d .supp-hero-quote-card { left: 54px; bottom: 18px; width: 240px; min-height: 168px; padding: 25px 24px 20px; font-size: 16.7px; } .format-d .supp-hero-quote-card strong { font-size: 12.4px; } .format-d .supp-hero { grid-template-columns: 345px minmax(0, 1fr); width: calc(100dvw - max(48px, (100dvw - var(--supp-container)) / 2) - 8px); } .format-d .supp-evidence-ladder { grid-template-columns: 182px repeat(5, minmax(0, 1fr)); min-height: 103px; padding: 11px 13px; } .format-d .supp-ladder-label { font-size: 12.1px; } .format-d .supp-ladder-label small { font-size: 11.4px; } .format-d .supp-ladder-step { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; min-height: 76px; padding: 10px 13px; } .format-d .supp-ladder-step span { width: 34px; height: 34px; } .format-d .supp-ladder-step img { width: 19px; height: 19px; } .format-d .supp-ladder-step strong { max-width: 118px; font-size: 16.2px; } .format-d .supp-ladder-step small { font-size: 11.9px; } .format-d .supp-ladder-step.is-active { width: 136px; grid-template-columns: 31px minmax(0, 1fr); } .format-d .supp-ladder-step.is-active span { width: 30px; height: 30px; } .format-d .supp-ladder-step.is-active strong { max-width: 79px; font-size: 14px; } .format-d .supp-ladder-step.is-active small { font-size: 10.8px; } .format-d .supp-feature-intro { grid-template-columns: 346px minmax(0, 1fr); gap: 35px; margin: 42px 0 44px; } .format-d .supp-feature-intro h2, .format-d .supp-main h2, .format-d .supp-split h2 { font-size: 35.2px; } .format-d .supp-feature-intro p { width: 346px; font-size: 14.5px; } .format-d .supp-quote { min-height: 64px; padding: 20px 88px 15px 176px; font-size: 22px; } .format-d .supp-quote::before { left: 123px; width: 31.4px; height: 31.4px; } .format-d .supp-quote::after { left: 176px; } .format-d .supp-main h2 { margin: 37px 0 10px; } .format-d .supp-main > p, .format-d .supp-split p, .format-d .supp-check-list { font-size: 14.5px; } .format-d .supp-mechanism-grid { gap: 44px; margin: 24px 0 42px; } .format-d .supp-mechanism { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; } .format-d .supp-mechanism > span { width: 53px; height: 53px; } .format-d .supp-mechanism img { width: 28px; height: 28px; } .format-d .supp-mechanism h3, .format-d .supp-study-grid .supp-grid-card h3 { font-size: 18.7px; } .format-d .supp-mechanism p, .format-d .supp-study-grid .supp-grid-card p { font-size: 13.9px; } .format-d .supp-study-grid { gap: 11px; margin: 20px 0 37px; } .format-d .supp-study-grid .supp-grid-card { min-height: 163px; padding: 13px 14px; border-radius: 8px; } .format-d .supp-study-grid .supp-grid-card > span { width: 30px; height: 30px; } .format-d .supp-study-grid img { width: 17px; height: 17px; } .format-d .supp-split { gap: 42px; margin: 37px 0 33px; } .format-d .supp-split-media img { height: var(--supp-split-image-height, 228px); } .format-d .supp-check-list { margin-top: 20px; } .format-d .supp-check-list li { grid-template-columns: 22px minmax(0, 1fr); gap: 9px; margin: 12px 0; } .format-d .supp-check-list li::before { width: 15.5px; height: 15.5px; font-size: 10px; } .format-d .supp-text-link { margin-top: 15px; font-size: 14.3px; } .format-d .supp-reference-box { grid-template-columns: minmax(0, 1fr) 275px; gap: 24px; padding: 14px 24px; margin-top: 15px; font-size: 8.6px; } .format-d .supp-reference-box h2, .format-d .supp-newsletter h3 { font-size: 16.5px; } .format-d .supp-newsletter, .format-d .supp-newsletter input, .format-d .supp-newsletter button { font-size: 10.3px; } body.format-d .supp-footer, body.format-d .supp-footer-bottom { font-size: 10.1px; } body.format-d .supp-footer-bottom span:nth-child(2) { font-size: 12.1px; } .format-d .supp-hero-media::before { width: 54%; background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 20%, rgba(255, 254, 253, 0.78) 42%, rgba(255, 254, 253, 0.28) 68%, rgba(255, 254, 253, 0) 100%); } .format-d .supp-hero-media { transform: translateX(-70px); width: calc(100% + 70px); height: 451px; } .format-d .supp-hero-quote-card { left: 82px; bottom: 8px; } .format-d .supp-split { align-items: start; } .format-d .supp-split h2 { margin: 0 0 10px; } .format-d .supp-reference-box { font-size: 9.6px; line-height: 1.36; } .format-d .supp-reference-box h2, .format-d .supp-newsletter h3 { font-size: 18px; } .format-d .supp-newsletter, .format-d .supp-newsletter input, .format-d .supp-newsletter button { font-size: 11.2px; } body.format-e { --supp-container: 940px; /* Align the shared site.css header/footer (.container reads --site-container, default 1120px) to this page's 940px content column so the bar doesn't spread wider than the article. Inherits to header/footer; mobile is unaffected since .container caps at 100% - 32px. */ --site-container: 940px; --supp-text: #242523; --supp-text-soft: #4e554e; --supp-green: #31583b; --supp-gold: #c18d20; --supp-line: #ded6c8; --supp-bg: #fffefd; --supp-bg-soft: #fbfaf4; --supp-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif; background: radial-gradient(circle at 13% 8%, rgba(49, 88, 59, 0.006), transparent 29%), linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #fffefd 100%); font-size: 15.4px; line-height: 1.46; overflow-x: hidden; } body.format-e .supp-site-header, body.format-e .supp-footer { width: min(var(--supp-container), calc(100% - 96px)); } body.format-e .supp-site-header { padding: 21px 0 16px; } body.format-e .supp-site-nav { gap: 28px; font-size: 12.3px; font-weight: 700; } body.format-e .supp-brand img { width: 210px; } body.format-e .supp-site-icons { gap: 12px; } body.format-e .supp-site-icons a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(49, 88, 59, .16); border-radius: 999px; background: rgba(255, 255, 255, .62); } body.format-e .supp-site-icons img { width: 16px; height: 16px; } .format-e .supp-page { width: min(var(--supp-container), calc(100% - 96px)); padding: 0 0 36px; } .format-e .supp-hero { /* 50/50 split — text and hero image share the row equally. The image column scales up with the page width, and the image frame below is locked to a 4:3 aspect ratio (via aspect-ratio) so the picture stays the same shape at every breakpoint. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; align-items: start; margin: 33px 0 26px; } .format-e .supp-kicker { /* Match Template 5B's clean meta strip: no leading icon, '+' separators, small CSS clock before the reading time. Items wrap as whole tokens so we never split a date across lines. */ flex-wrap: wrap; row-gap: 4px; gap: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; } .format-e .supp-kicker > span:not(.supp-kicker-mark):not(.supp-clock-icon) { white-space: nowrap; } .format-e .supp-kicker::before { display: none; } .format-e .supp-kicker-mark { color: var(--supp-green); font-size: 11px; line-height: 1; } .format-e .supp-clock-icon { position: relative; display: inline-block; width: 13px; height: 13px; border: 1.5px solid rgba(36, 37, 35, .55); border-radius: 50%; } .format-e .supp-clock-icon::before, .format-e .supp-clock-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; background: rgba(36, 37, 35, .65); transform-origin: 50% 0; } .format-e .supp-clock-icon::before { height: 4px; transform: translate(-50%, -1px); } .format-e .supp-clock-icon::after { height: 3px; transform: translate(-50%, -1px) rotate(125deg); } .format-e .supp-h1 { margin: 17px 0 16px; padding-bottom: 6px; font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: 0; } .format-e .supp-standfirst { /* Longer standfirst (≈35–55 words / two short sentences) — let it use the wider text column instead of being capped at 360px. */ max-width: 620px; margin-bottom: 0; font-size: 16.3px; line-height: 1.5; } .format-e .supp-author { gap: 10px; margin-top: 0; font-size: 12.7px; line-height: 1.25; } .format-e .supp-author img { width: 37px; height: 37px; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(44, 38, 28, .12); } .format-e .supp-author span { font-size: 11.9px; } .format-e .supp-hero-media { /* Hero image now takes the full 50% column. We lock the FRAME to a 4:3 aspect ratio so the picture stays the same shape at every width — height is no longer pinned to the text-block height. Source images aren't forced to 4:3; object-fit: cover lets them zoom slightly to fill the frame. */ width: 100%; margin: var(--supp-format-e-hero-image-offset, 0) 0 0 auto; aspect-ratio: 4 / 3; height: auto; border: 0; border-radius: 8px; box-shadow: none; overflow: hidden; } .format-e .supp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: auto; } .format-e .supp-editorial-intro, .format-e .supp-freeform-section { width: 100%; max-width: none; box-sizing: border-box; margin: 32px 0 26px; padding: 0 4px 0 22px; border-left: 3px solid rgba(49, 88, 59, .42); } .format-e .supp-editorial-intro h2, .format-e .supp-freeform-section h2 { margin: 0 0 12px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 34px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } /* Secondary heading used INSIDE the editorial-intro section to introduce the ranking-criteria explainer block. Same visual weight as the main intro H2 so the two read as sibling chapter headings within the same green section. */ .format-e .supp-editorial-intro .supp-editorial-subheading, .format-e .supp-freeform-section .supp-editorial-subheading, .format-e .supp-ranking-table > h2, .format-e h2#format-e-item-grid-heading { margin: 28px 0 12px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 34px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } .format-e .supp-editorial-intro p, .format-e .supp-freeform-section p { margin: 0 0 13px; color: var(--supp-text); font-size: 15.2px; line-height: 1.58; } .format-e .supp-editorial-intro p:last-child, .format-e .supp-freeform-section p:last-child { margin-bottom: 0; } .format-e .supp-summary-box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; align-items: stretch; width: 100%; margin: 22px 0 34px; } .format-e .supp-summary-box { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; row-gap: 8px; align-content: start; min-height: 164px; padding: 16px 15px 17px; border: 1px solid #e3dccf; border-radius: 8px; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 7px 18px rgba(62, 54, 39, .052), 0 0 18px rgba(62, 54, 39, .055), inset 0 0 0 1px rgba(255, 255, 255, .72); } .format-e .supp-summary-box span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; align-self: center; margin: 0; border: 1px solid rgba(49, 88, 59, .22); border-radius: 999px; color: var(--supp-green); background: rgba(247, 242, 232, .72); font-family: var(--supp-font-ui); font-size: 10.8px; font-weight: 900; } .format-e .supp-summary-box h3 { align-self: center; margin: 0; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 23px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } .format-e .supp-summary-box p { grid-column: 1 / -1; margin: 0; font-size: 13.2px; line-height: 1.45; overflow-wrap: anywhere; } .format-e .supp-picks-strip { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); grid-template-rows: auto auto 1fr; grid-auto-flow: column; margin: 36px 0 48px; border: 1px solid #e3dccf; border-radius: 8px; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 7px 18px rgba(62, 54, 39, .052), 0 0 18px rgba(62, 54, 39, .055), inset 0 0 0 1px rgba(255, 255, 255, .72); } @media (max-width: 720px) { .format-e .supp-picks-strip { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } } .format-e .supp-pick { /* Refined Format E variant — each card is a subgrid spanning the strip's three row tracks (label / name / desc) so the three slots align row-by-row across all cards and content sits at the TOP of each row. */ display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; padding: 14px 13px; font-size: 12.6px; line-height: 1.34; } @media (max-width: 720px) { .format-e .supp-pick { display: block; grid-row: auto; } } .format-e .supp-pick p { margin: 0; } .format-e .supp-pick strong, .format-e .supp-pick .supp-pick-name { align-self: start; margin: 0 0 14px; color: var(--supp-text); font-family: var(--supp-font-heading); font-size: 17px; font-weight: 900; line-height: 1.15; } .format-e .supp-pick-label { align-self: start; margin: 0 0 6px; font-size: 9.8px; font-weight: 900; letter-spacing: .1em; } .format-e .supp-pick-desc { align-self: start; margin: 0; } .format-e .supp-pick .supp-round-icon { display: none !important; } .format-e .supp-filter-row { gap: 10px; margin: 20px 0; } .format-e .supp-filter-chip { min-height: 36px; padding: 0 16px; border-radius: 8px; background: rgba(255, 255, 255, .68); font-size: 12.4px; font-weight: 800; } .format-e .supp-ranking-table { margin: 22px 0 32px; } .format-e .supp-ranking-table tbody tr { transition: background .18s ease, box-shadow .18s ease; } .format-e .supp-ranking-table tbody tr.is-linked-hover { background: rgba(247, 242, 232, .76); box-shadow: inset 3px 0 0 rgba(49, 88, 59, .48), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(49, 88, 59, .12); } .format-e .supp-ranking-table tbody tr.is-linked-hover .supp-rank-badge, .format-e .supp-ranking-table tbody tr.is-linked-hover .supp-score { background: rgba(49, 88, 59, .12); } .format-e .supp-table { border-radius: 8px; font-size: 13.2px; line-height: 1.35; } .format-e .supp-table th, .format-e .supp-table td { padding: 8px 13px; } .format-e .supp-table th { font-size: 10.8px; font-weight: 900; } .format-e .supp-table td:nth-child(1), .format-e .supp-table td:nth-child(2) { font-weight: 800; } .format-e .supp-table th:nth-child(3), .format-e .supp-table td:nth-child(3) { min-width: 170px; } .format-e .supp-product-name { font-weight: 800; } .format-e .supp-table-thumb { width: 34px; height: 34px; } .format-e .supp-rank-badge { width: 30px; height: 30px; font-size: 13px; } .format-e .supp-score { min-width: 68px; padding: 6px 9px; border-radius: 8px; font-size: 12.8px; font-weight: 900; } .format-e .supp-item-grid { /* Responsive: 2 cols mobile → 3 cols tablet → 4 cols desktop. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 34px; } @media (min-width: 720px) { .format-e .supp-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .format-e .supp-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .format-e h2#format-e-item-grid-heading { margin: 52px 0 4px; } .format-e .supp-card-instruction { display: inline-flex; align-items: center; margin: 10px 0 0; padding: 8px 12px 7px; border: 1px solid rgba(49, 88, 59, .2); border-left: 3px solid rgba(49, 88, 59, .56); border-radius: 8px; color: var(--supp-green); background: linear-gradient(90deg, rgba(247, 242, 232, .92), rgba(255, 255, 255, .74)); box-shadow: 0 1px 2px rgba(62, 54, 39, .035), 0 7px 18px rgba(62, 54, 39, .045), inset 0 0 0 1px rgba(255, 255, 255, .72); font-family: var(--supp-font-ui); font-size: 12.9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .format-e .supp-item-card { position: relative; /* Rich card: stacked vertical sections — head (round product photo + form name + BEST FOR label + tagline), meta column (4 line-art stat items), pros/cons column, View Details footer. The article itself is a flex column; the head section internally is a 2-col grid (thumb left, identity right). The green rank badge is absolutely positioned over the top-left of the thumb. Card width is sized for a 4-col grid. */ display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid #e3dccf; border-radius: 12px; background: rgba(255, 255, 255, .82); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 7px 18px rgba(62, 54, 39, .052), 0 0 18px rgba(62, 54, 39, .055), inset 0 0 0 1px rgba(255, 255, 255, .72); font-size: 12.6px; line-height: 1.4; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .format-e .supp-item-head { display: flex; padding-left: 32px; /* clear the absolutely positioned rank badge */ min-height: 70px; /* equalize divider y across cards regardless of h2 wrap */ } .format-e .supp-product-thumb { /* Product photo hidden — testing a text-only card layout. */ display: none; } .format-e .supp-item-head-text { min-width: 0; display: flex; flex-direction: column; flex: 1; } .format-e .supp-item-label { /* "BEST FOR" caption hidden per design feedback — the tagline reads clearly on its own under the form name. */ display: none; } .format-e .supp-item-best-for { margin: 0; margin-top: auto; /* pin tagline to bottom of head area (just above divider) */ margin-left: -32px; /* cancel head padding-left so tagline aligns to card edge */ align-self: flex-start; text-align: left; color: var(--supp-green, #31583b); font-family: var(--supp-font-ui); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; } .format-e .supp-item-meta { list-style: none; margin: 0; padding: 12px 0 4px; border-top: 1px solid rgba(62, 54, 39, .09); display: flex; flex-direction: column; gap: 8px; } .format-e .supp-item-meta li { /* Compact one-line row: icon — "Label: Value". Icon is absolutely positioned so it can be visually larger without dictating row height (row height is driven purely by text line-height). */ position: relative; display: block; padding-left: 40px; margin-left: -12px; font-size: 12.6px; line-height: 1.25; } .format-e .supp-meta-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 38px; height: 38px; object-fit: contain; opacity: .85; pointer-events: none; } .format-e .supp-meta-label { /* Inline label, normal case — reads as "Evidence Quality: ★★★★★". */ display: inline; color: var(--supp-muted, #7a766c); font-family: var(--supp-font-ui); font-size: 12.6px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: inherit; } .format-e .supp-meta-label::after { content: ":"; margin-right: 4px; color: var(--supp-muted, #7a766c); } .format-e .supp-meta-value { display: inline; margin: 0; color: var(--supp-text); font-size: 12.6px; font-weight: 600; } .format-e .supp-meta-value.supp-stars { color: #c8a04a; font-size: 13.2px; letter-spacing: 1px; font-weight: 600; } .format-e .supp-item-proscons { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(62, 54, 39, .09); } .format-e .supp-item-pros, .format-e .supp-item-cons { min-width: 0; } .format-e .supp-proscons-label { display: block; margin-bottom: 4px; font-family: var(--supp-font-ui); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .format-e .supp-item-pros .supp-proscons-label { color: var(--supp-green, #31583b); } .format-e .supp-item-cons .supp-proscons-label { color: #a3635a; } .format-e .supp-item-pros p, .format-e .supp-item-cons p { margin: 0; color: var(--supp-text); font-size: 13px; line-height: 1.4; } .format-e .supp-product-link-arrow { margin-left: 4px; display: inline-block; transition: transform .18s ease; } .format-e .supp-item-card:hover .supp-product-link-arrow { transform: translateX(3px); } .format-e .supp-item-card:hover { border-color: rgba(49, 88, 59, .28); background: rgba(247, 242, 232, .76); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 8px 20px rgba(62, 54, 39, .06), 0 0 0 2px rgba(49, 88, 59, .05), 0 0 18px rgba(49, 88, 59, .08), inset 0 0 0 1px rgba(255, 255, 255, .76); transform: translateY(-1px); } .format-e .supp-item-card.is-table-hover:not(.is-expanded) { border-color: rgba(49, 88, 59, .32); background: rgba(247, 242, 232, .76); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 8px 20px rgba(62, 54, 39, .06), 0 0 0 2px rgba(49, 88, 59, .06), 0 0 18px rgba(49, 88, 59, .09), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-e .supp-item-card:focus-visible { outline: none; box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 7px 18px rgba(62, 54, 39, .052), 0 0 18px rgba(62, 54, 39, .055), 0 0 0 3px rgba(49, 88, 59, .14), inset 0 0 0 1px rgba(255, 255, 255, .72); } .format-e .supp-item-card.is-expanded { z-index: 3; border-color: rgba(49, 88, 59, .5); background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(49, 88, 59, .08), 0 8px 22px rgba(49, 88, 59, .12), 0 0 0 3px rgba(49, 88, 59, .08), 0 0 22px rgba(49, 88, 59, .13), inset 0 0 0 1px rgba(255, 255, 255, .82); } .format-e .supp-item-card.is-expanded::before, .format-e .supp-item-card.is-expanded::after { content: ""; position: absolute; left: 50%; z-index: 4; width: 0; height: 0; transform: translateX(-50%); pointer-events: none; } .format-e .supp-item-card.is-expanded::before { bottom: -17px; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 17px solid rgba(49, 88, 59, .22); } .format-e .supp-item-card.is-expanded::after { bottom: -18px; border-right: 13px solid transparent; border-left: 13px solid transparent; border-bottom: 15px solid rgba(255, 255, 255, .86); } .format-e .supp-item-card h2 { margin: 0 0 2px; color: var(--supp-text); font-family: var(--supp-font-heading); font-size: 17px; font-weight: 800; line-height: 1.18; letter-spacing: 0; word-break: normal; overflow-wrap: normal; } .format-e .supp-item-rank { /* Align the badge's LEFT edge with the card content (the tagline below it, which sits at the card's padding-left of 14px) and vertically CENTER it on the h2 top text row: card padding-top (14) + h2 half-line-height (~10) − half badge (12) = 12px. */ top: 12px; left: 14px; width: 24px; height: 24px; font-size: 11.8px; z-index: 2; box-shadow: 0 1px 3px rgba(49, 88, 59, .22); } .format-e .supp-product-thumb-REMOVED { width: 64px; height: 64px; margin: 0; border-radius: 50%; object-fit: cover; background: #f4ecd9; box-shadow: 0 2px 6px rgba(62, 54, 39, .12), inset 0 0 0 1px rgba(255, 255, 255, .9); } .format-e .supp-product-link { display: inline-flex; align-self: flex-end; margin-top: auto; /* pin to card bottom regardless of pros/cons length */ padding: 4px 2px 0; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 12.8px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .format-e .supp-item-detail-panel { grid-column: 1 / -1; display: block; /* Grow naturally with content up to ~75% of the viewport (or 900px on big screens), then scroll. Short panels stay short; medium panels get full breathing room; very long panels are capped with an internal scrollbar. */ max-height: min(75vh, 900px); overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px; border: 1px solid rgba(49, 88, 59, .38); border-radius: 8px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 9px 24px rgba(62, 54, 39, .06), 0 0 0 3px rgba(49, 88, 59, .06), 0 0 24px rgba(49, 88, 59, .1), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-e .supp-item-detail-panel .supp-item-detail-body { width: 100%; } .format-e .supp-item-detail-section { margin-top: 18px; } .format-e .supp-item-detail-section h4 { margin: 0 0 6px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 17px; font-weight: 700; line-height: 1.2; } .format-e .supp-item-detail-sources ul { list-style: none; padding-left: 0; } .format-e .supp-item-detail-sources li { margin: 6px 0; font-size: 13.4px; line-height: 1.45; } .format-e .supp-item-detail-panel[hidden] { display: none; } .format-e .supp-item-detail-panel h3 { margin: 0 0 8px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 30px; font-weight: 700; line-height: 1.08; } .format-e .supp-item-detail-panel p { margin: 0 0 12px; font-size: 14.3px; line-height: 1.48; } .format-e .supp-item-detail-panel ul { margin: 0; padding-left: 18px; font-size: 13.6px; line-height: 1.48; } .format-e .supp-item-detail-panel li { margin: 7px 0; } .format-e .supp-item-detail-meta { display: grid; gap: 10px; align-content: start; } .format-e .supp-item-detail-meta span { display: block; padding: 12px 14px; border: 1px solid var(--supp-line); border-radius: 8px; background: rgba(243, 247, 239, .72); font-size: 13px; line-height: 1.36; } .format-e .supp-item-detail-meta strong { display: block; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.6px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .format-e .supp-item-detail-close { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--supp-green); font: inherit; font-weight: 900; cursor: pointer; } .format-e .supp-wrapup-section { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); gap: 28px; align-items: start; padding: 26px 28px; margin: 36px 0 20px; border: 1px solid #e3dccf; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(247, 242, 232, .74)); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 8px 22px rgba(62, 54, 39, .055), 0 0 18px rgba(62, 54, 39, .045), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-e .supp-wrapup-label { display: inline-flex; margin: 0 0 9px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .format-e .supp-wrapup-section h2 { margin: 0 0 12px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 32px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } .format-e .supp-wrapup-copy p { margin: 0 0 12px; font-size: 14.7px; line-height: 1.55; } .format-e .supp-wrapup-copy p:last-child { margin-bottom: 0; } .format-e .supp-wrapup-points { display: grid; gap: 12px; } .format-e .supp-wrapup-points p { margin: 0; padding: 14px 15px; border: 1px solid rgba(49, 88, 59, .16); border-radius: 8px; background: rgba(255, 255, 255, .68); font-size: 13.4px; line-height: 1.42; } .format-e .supp-wrapup-points strong { display: block; margin: 0 0 3px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 18px; font-weight: 700; } @media (max-width: 720px) { .format-e .supp-wrapup-section { grid-template-columns: 1fr; padding: 22px; } } body.format-e .supp-footer { padding: 24px 0; font-size: 10.1px; } /* ============================================================ Format A final — User query answer article ============================================================ */ body.format-a { --supp-container: 1260px; --supp-readable: 720px; --format-a-band: 1105px; --format-a-band-offset: 38px; --supp-text: #242523; --supp-text-soft: #4f574f; --supp-green: #31583b; --supp-line: #e4ddcf; --format-a-paper: #fffefa; --format-a-paper-warm: #fbf7ed; --format-a-paper-green: #eef6eb; --supp-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif; background: radial-gradient(circle at 12% 8%, rgba(49, 88, 59, .022), transparent 28%), linear-gradient(180deg, #fffefd 0%, #fffdfa 48%, #fffdf8 100%); font-size: 15.4px; line-height: 1.5; overflow-x: hidden; } body.format-a .supp-site-header { width: min(var(--supp-container), calc(100% - 84px)); justify-content: flex-start; gap: 0; padding: 24px 0 20px; } body.format-a .supp-brand, body.format-a .supp-brand img { width: 236px; height: auto; } body.format-a .supp-site-nav { gap: 38px; margin-left: 130px; font-size: 13.3px; font-weight: 800; } body.format-a .supp-site-nav a { position: relative; color: var(--supp-text); text-decoration: none; } body.format-a .supp-site-nav a:nth-child(2)::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -13px; height: 1px; background: var(--supp-green); } body.format-a .supp-site-icons a { width: 22px; height: 22px; border: 0; border-radius: 0; background: transparent; } body.format-a .supp-site-icons { margin-left: auto; } body.format-a .supp-site-icons img { width: 21px; height: 21px; } .format-a .supp-page { width: min(var(--supp-container), calc(100% - 84px)); padding: 0 0 36px; } .format-a .supp-hero { grid-template-columns: minmax(500px, 560px) minmax(0, 1fr); gap: 64px; align-items: start; margin: 34px 0 34px; } .format-a .supp-hero > div:first-child { padding-left: var(--format-a-band-offset); padding-top: 48px; } .format-a .supp-kicker { gap: 9px; font-size: 10.4px; font-weight: 900; letter-spacing: .09em; } .format-a .supp-kicker::before { width: 12px; height: 12px; border: 0; background: url("/asset-pack/assets/icons/line/leaf.svg") center / contain no-repeat; } .format-a .supp-kicker-arrow { color: var(--supp-green); font-size: 12px; line-height: 1; } .format-a .supp-clock-icon { position: relative; display: inline-block; width: 13px; height: 13px; border: 1.5px solid rgba(36, 37, 35, .55); border-radius: 50%; } .format-a .supp-clock-icon::before, .format-a .supp-clock-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; background: rgba(36, 37, 35, .65); transform-origin: 50% 0; } .format-a .supp-clock-icon::before { height: 4px; transform: translate(-50%, -1px) rotate(0deg); } .format-a .supp-clock-icon::after { height: 3px; transform: translate(-50%, -1px) rotate(125deg); } .format-a .supp-h1 { max-width: 540px; margin: 28px 0 16px; font-size: 66px; font-weight: 700; line-height: .95; letter-spacing: 0; } .format-a .supp-gold-rule { width: 58px; height: 2px; margin: 18px 0 18px; } .format-a .supp-standfirst { max-width: 500px; margin-bottom: 22px; font-size: 18px; line-height: 1.5; } .format-a .supp-author { margin-top: 18px; font-size: 12.2px; line-height: 1.34; } .format-a .supp-author img { width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 5px 15px rgba(62, 54, 39, .14); } .format-a .supp-hero-media { justify-self: end; width: 100%; height: 480px; margin: 0; border-radius: 8px; box-shadow: none; } .format-a .supp-hero-media img { height: 100%; aspect-ratio: auto; object-position: center; } .format-a .supp-fast-answer { width: min(var(--format-a-band), 100% - var(--format-a-band-offset)); grid-template-columns: 185px minmax(0, 1fr); gap: 22px; align-items: center; min-height: 158px; padding: 20px 34px; margin: 28px 0 24px var(--format-a-band-offset); border-radius: 14px; background: var(--format-a-paper); box-shadow: 0 1px 2px rgba(62, 54, 39, .045), 0 6px 18px rgba(62, 54, 39, .045), 0 0 14px rgba(62, 54, 39, .035), inset 0 0 0 1px rgba(255, 255, 255, .76); } .format-a .supp-fast-answer .supp-answer-icon { position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin-top: 0; border-radius: 50%; background: rgba(49, 88, 59, .08); } .format-a .supp-fast-answer .supp-answer-icon img { display: none; } .format-a .supp-fast-answer .supp-answer-icon::before { content: "✓"; position: absolute; z-index: 2; top: 25px; left: 50%; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--supp-green); font-size: 28px; line-height: 1; transform: translateX(-50%); } .format-a .supp-fast-answer .supp-answer-icon::after { content: ""; position: absolute; left: 50%; bottom: 13px; width: 62px; height: 50px; background: url("/asset-pack/assets/icons/line/leaf.svg") center / contain no-repeat; opacity: .24; transform: translateX(-50%); } .format-a .supp-answer-label { display: inline-flex; margin: 0 0 7px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .format-a .supp-fast-answer h2 { margin: 0 0 10px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 28px; font-weight: 700; line-height: 1.12; letter-spacing: 0; } .format-a .supp-fast-answer p { max-width: 780px; margin: 0; font-size: 16.1px; line-height: 1.5; } .format-a .supp-answer-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; } .format-a .supp-answer-points li { margin: 0; padding: 12px 13px; border: 1px solid rgba(49, 88, 59, .16); border-radius: 8px; background: rgba(247, 242, 232, .56); font-size: 12.5px; line-height: 1.34; } .format-a .supp-answer-points strong, .format-a .supp-answer-points span { display: block; } .format-a .supp-answer-points strong { margin-bottom: 3px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.4px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .format-a .supp-qa-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; } .format-a .supp-qa-snapshot article { min-height: 142px; padding: 16px 15px; border: 1px solid #e3dccf; border-radius: 8px; background: rgba(255, 255, 255, .74); box-shadow: 0 1px 2px rgba(62, 54, 39, .04), 0 7px 18px rgba(62, 54, 39, .05), inset 0 0 0 1px rgba(255, 255, 255, .72); } .format-a .supp-qa-snapshot span { display: block; margin: 0 0 8px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.2px; font-weight: 900; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; } .format-a .supp-qa-snapshot strong { display: block; margin: 0 0 6px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 24px; font-weight: 700; line-height: 1.05; } .format-a .supp-qa-snapshot p { margin: 0; font-size: 12.8px; line-height: 1.42; } .format-a .supp-evidence-strip { width: min(var(--format-a-band), 100% - var(--format-a-band-offset)); grid-template-columns: 230px 205px minmax(0, 1fr); gap: 26px; min-height: 82px; margin: 28px 0 50px var(--format-a-band-offset); padding: 16px 28px; border-radius: 10px; background: var(--format-a-paper-warm); } .format-a .supp-evidence-label { position: relative; min-height: 48px; padding-right: 28px; border-right: 1px solid var(--supp-line); } .format-a .supp-evidence-label::after { content: "i"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 8px; border: 1px solid rgba(49, 88, 59, .52); border-radius: 50%; color: var(--supp-green); font-size: 9px; line-height: 1; text-transform: none; } .format-a .supp-evidence-level { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; line-height: 1; } .format-a .supp-evidence-level::before { content: ""; width: 42px; height: 42px; background: url("/asset-pack/assets/icons/line/core-line-17-scales-compare.webp") center / contain no-repeat; border-radius: 50%; background: rgba(49, 88, 59, .08) url("/asset-pack/assets/icons/line/leaf.svg") center / 24px 24px no-repeat; } .format-a .supp-evidence-strip p { margin: 0; font-size: 14.8px; line-height: 1.38; } .format-a .supp-evidence-strip a { color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 11.2px; font-weight: 800; white-space: nowrap; } .format-a .supp-main { width: min(var(--format-a-band), 100% - var(--format-a-band-offset)); display: grid; grid-template-columns: minmax(0, 650px) 300px; gap: 135px; align-items: start; margin: 0 0 0 var(--format-a-band-offset); } .format-a .supp-article-flow { max-width: none; } .format-a .supp-main h2 { margin: 36px 0 10px; color: var(--supp-text); font-family: var(--supp-font-heading); font-size: 34px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } .format-a .supp-main h2:first-child { margin-top: 0; } .format-a .supp-section-number { color: var(--supp-text); font-size: 1em; font-variant-numeric: lining-nums; } .format-a .supp-main p, .format-a .supp-main li { font-size: 15.4px; line-height: 1.54; } .format-a .supp-qa-callout { margin: 18px 0 24px; padding: 15px 17px; border: 1px solid rgba(49, 88, 59, .18); border-left: 3px solid rgba(49, 88, 59, .52); border-radius: 8px; background: rgba(247, 242, 232, .68); font-size: 14px; line-height: 1.5; } .format-a .supp-qa-callout strong { color: var(--supp-green); } .format-a .supp-image { margin: 24px 0 28px; border-radius: 8px; } .format-a .supp-image img { aspect-ratio: 16 / 4.4; object-fit: cover; } .format-a .supp-image-caption { display: none; } .format-a .supp-mini-evidence-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 20px 0 14px; } .format-a .supp-mini-evidence-row p { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; padding: 0 16px; border-right: 1px solid var(--supp-line); font-size: 12.8px; line-height: 1.38; } .format-a .supp-mini-evidence-row p:first-child { padding-left: 0; } .format-a .supp-mini-evidence-row p:last-child { padding-right: 0; border-right: 0; } .format-a .supp-mini-evidence-row img { width: 27px; height: 27px; } .format-a .supp-source-note { margin: 8px 0 28px; color: var(--supp-text-soft); font-size: 12.1px !important; } .format-a .supp-plain-list { list-style: none; padding: 0; margin: 13px 0 28px; } .format-a .supp-plain-list li { position: relative; margin: 7px 0; padding-left: 16px; } .format-a .supp-plain-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--supp-green); } .format-a .supp-qa-steps { counter-reset: qa-step; display: grid; gap: 10px; padding: 0; margin: 18px 0 26px; list-style: none; } .format-a .supp-qa-steps li { counter-increment: qa-step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 15px; border: 1px solid rgba(49, 88, 59, .14); border-radius: 8px; background: rgba(255, 255, 255, .7); } .format-a .supp-qa-steps li::before { content: counter(qa-step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--supp-green); background: rgba(49, 88, 59, .1); font-family: var(--supp-font-ui); font-size: 12px; font-weight: 900; } .format-a .supp-qa-steps strong { color: var(--supp-green); } .format-a .supp-side-rail { display: flex; flex-direction: column; gap: 168px; padding-top: 0; } .format-a .supp-side-card { padding: 27px; border-radius: 8px; background: var(--format-a-paper); box-shadow: 0 1px 2px rgba(62, 54, 39, .04), 0 7px 18px rgba(62, 54, 39, .045), inset 0 0 0 1px rgba(255, 255, 255, .72); } .format-a .supp-side-card:nth-child(2) { width: 348px; background: var(--format-a-paper-green); } .format-a .supp-side-card h3 { margin: 0 0 16px; font-size: 14px; line-height: 1.25; } .format-a .supp-side-card p, .format-a .supp-side-card li, .format-a .supp-side-card a { font-size: 14.5px; line-height: 1.5; } .format-a .supp-side-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin: 0 0 16px; border-radius: 50%; background: rgba(49, 88, 59, .1); } .format-a .supp-side-icon img { width: 24px; height: 24px; } .format-a .supp-quick-facts dl { display: grid; gap: 9px; margin: 0; } .format-a .supp-quick-facts dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(49, 88, 59, .12); } .format-a .supp-quick-facts dl div:last-child { padding-bottom: 0; border-bottom: 0; } .format-a .supp-quick-facts dt, .format-a .supp-quick-facts dd { margin: 0; font-size: 12.2px; line-height: 1.32; } .format-a .supp-quick-facts dt { color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .format-a .supp-quick-facts dd { font-weight: 800; } .format-a .supp-qa-finisher { width: min(var(--format-a-band), 100% - var(--format-a-band-offset)); grid-template-columns: 76px minmax(0, 1fr) auto; gap: 22px; padding: 24px 26px; margin: 34px 0 16px var(--format-a-band-offset); border-radius: 8px; } .format-a .supp-qa-finisher .supp-round-icon { width: 62px; height: 62px; } .format-a .supp-qa-finisher .supp-round-icon img { width: 34px; height: 34px; } .format-a .supp-qa-finisher h2 { margin: 0 0 5px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 27px; font-weight: 700; letter-spacing: 0; } .format-a .supp-qa-finisher p { margin: 0; max-width: 650px; font-size: 14.7px; line-height: 1.48; } .format-a .supp-button { min-height: 42px; padding: 0 17px; border-radius: 8px; font-size: 12.4px; } @media (max-width: 1050px) { .format-a .supp-page { width: min(var(--supp-container), calc(100% - 48px)); } .format-a .supp-hero, .format-a .supp-main, .format-a .supp-qa-finisher { grid-template-columns: 1fr; } .format-a .supp-hero { gap: 28px; } .format-a .supp-side-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .format-a .supp-side-card:nth-child(2) { width: 100%; } .format-a .supp-qa-finisher .supp-button { justify-self: start; } } @media (max-width: 760px) { body.format-a .supp-site-header { width: min(var(--supp-container), calc(100% - 32px)); } body.format-a .supp-brand, body.format-a .supp-brand img { width: 180px; } body.format-a .supp-site-nav { margin-left: 0; gap: 10px; } .format-a .supp-page { width: min(var(--supp-container), calc(100% - 32px)); padding-top: 8px; } .format-a .supp-hero > div:first-child { padding-left: 0; padding-top: 0; } .format-a .supp-hero-media { width: 100%; height: 270px; } .format-a .supp-h1 { font-size: 42px; } .format-a .supp-fast-answer, .format-a .supp-evidence-strip { width: 100%; grid-template-columns: 1fr; min-height: 0; margin-left: 0; padding: 22px; } .format-a .supp-fast-answer .supp-answer-icon { width: 96px; height: 96px; } .format-a .supp-fast-answer .supp-answer-icon::before { top: 22px; width: 42px; height: 42px; font-size: 25px; } .format-a .supp-fast-answer .supp-answer-icon::after { width: 56px; height: 44px; bottom: 12px; } .format-a .supp-main, .format-a .supp-qa-finisher { width: 100%; margin-left: 0; } .format-a .supp-answer-points, .format-a .supp-qa-snapshot, .format-a .supp-grid-3, .format-a .supp-side-rail { grid-template-columns: 1fr; } .format-a .supp-side-rail { display: grid; } } /* ============================================================ Format B final — Decision guide ============================================================ */ body.format-b { --supp-container: 1260px; --supp-text: #242523; --supp-text-soft: #4f574f; --supp-green: #31583b; --supp-gold: #c18d20; --supp-amber: #d79518; --supp-line: #ded6c8; --supp-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif; --format-b-paper: #fffefa; --format-b-paper-soft: #fbf8f0; background: radial-gradient(circle at 12% 8%, rgba(49, 88, 59, .024), transparent 28%), linear-gradient(180deg, #fffefd 0%, #fffdfa 48%, #fffdf8 100%); color: var(--supp-text); font-size: 15.3px; line-height: 1.5; overflow-x: hidden; } body.format-b .supp-site-header, body.format-b .supp-footer, .format-b .supp-page { width: min(var(--supp-container), calc(100% - 84px)); } body.format-b .supp-site-header { justify-content: flex-start; gap: 0; padding: 25px 0 20px; } body.format-b .supp-brand, body.format-b .supp-brand img { width: 236px; height: auto; } body.format-b .supp-site-nav { gap: 38px; margin-left: 130px; font-size: 13.2px; font-weight: 800; } body.format-b .supp-site-nav a { position: relative; color: var(--supp-text); text-decoration: none; } body.format-b .supp-site-nav a:nth-child(2)::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -13px; height: 1px; background: var(--supp-green); } body.format-b .supp-site-icons { margin-left: auto; gap: 14px; } body.format-b .supp-site-icons a { width: 22px; height: 22px; border: 0; border-radius: 0; background: transparent; } body.format-b .supp-site-icons img { width: 23px; height: 23px; object-fit: contain; } .format-b .supp-page { padding: 0 0 38px; } .format-b .supp-hero { --format-b-hero-gap: 72px; grid-template-columns: minmax(0, calc(50% - var(--format-b-hero-gap))) minmax(0, 1fr); gap: var(--format-b-hero-gap); align-items: stretch; justify-content: space-between; margin: 33px 0 34px; } .format-b .supp-kicker { gap: 10px; font-size: 10.5px; font-weight: 900; letter-spacing: .09em; } .format-b .supp-kicker::before { width: 16px; height: 16px; border: 0; border-radius: 0; background: url("/asset-pack/assets/icons/line/scales.svg") center / contain no-repeat; box-shadow: none; } .format-b .supp-kicker-mark { color: var(--supp-green); font-size: 11px; line-height: 1; } .format-b .supp-clock-icon { position: relative; display: inline-block; width: 13px; height: 13px; border: 1.5px solid rgba(36, 37, 35, .55); border-radius: 50%; } .format-b .supp-clock-icon::before, .format-b .supp-clock-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; background: rgba(36, 37, 35, .65); transform-origin: 50% 0; } .format-b .supp-clock-icon::before { height: 4px; transform: translate(-50%, -1px); } .format-b .supp-clock-icon::after { height: 3px; transform: translate(-50%, -1px) rotate(125deg); } .format-b .supp-h1 { max-width: 510px; margin: 30px 0 24px; font-size: 66px; font-weight: 700; line-height: .98; letter-spacing: 0; } .format-b .supp-standfirst { max-width: 560px; margin-bottom: 26px; color: var(--supp-text-soft); font-size: 18px; line-height: 1.5; } .format-b .supp-intro-section { width: 100%; max-width: none; margin: 26px 0 24px; padding: 0 0 2px; } .format-b .supp-intro-section p { margin: 0; color: var(--supp-green); font-size: 18.2px; line-height: 1.62; } .format-b .supp-author { gap: 12px; margin-top: 0; font-size: 12.8px; line-height: 1.3; } .format-b .supp-author img { width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 5px 15px rgba(62, 54, 39, .14); } .format-b .supp-author span { font-size: 12px; } .format-b .supp-hero-media { position: relative; align-self: stretch; justify-self: end; width: 100%; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 14px; box-shadow: none; overflow: hidden; } .format-b .supp-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; } .format-b .supp-verdict-card, .format-b .supp-grid-card, .format-b .supp-card, .format-b .supp-tradeoff-strip, .format-b .supp-bottom-line { border-color: var(--supp-line); border-radius: 10px; background: var(--format-b-paper); box-shadow: 0 1px 2px rgba(62, 54, 39, .04), 0 8px 20px rgba(62, 54, 39, .045), inset 0 0 0 1px rgba(255, 255, 255, .75); } .format-b .supp-verdict-card { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 36px; min-height: 185px; padding: 28px 44px; margin: 30px 0 28px; } .format-b .supp-verdict-divider { background: var(--supp-line); } .format-b .supp-verdict-good, .format-b .supp-verdict-caution { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 26px; align-items: start; } .format-b .supp-verdict-heading { display: contents; } .format-b .supp-verdict-heading .supp-answer-icon { grid-row: 1 / span 2; width: 70px; height: 70px; font-size: 36px; } .format-b .supp-verdict-heading h2 { align-self: center; margin: 0 0 7px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: 0; } .format-b .supp-verdict-caution .supp-verdict-heading h2 { color: var(--supp-amber); } .format-b .supp-verdict-caution .supp-answer-icon { background: var(--supp-amber-soft) !important; color: var(--supp-amber) !important; } .format-b .supp-verdict-heading .supp-answer-icon { overflow: hidden; background: transparent !important; color: transparent !important; font-size: 0; } .format-b .supp-verdict-heading .supp-answer-icon img { display: block; width: 300px; height: 300px; max-width: none; object-fit: contain; transform: translate(-115px, -122px); } .format-b .supp-verdict-card ul { grid-column: 2; margin: 0; } .format-b .supp-check-list li, .format-b .supp-x-list li { margin: 9px 0; font-size: 14.5px; line-height: 1.4; } .format-b .supp-check-list li::before { background: transparent; color: var(--supp-green); font-size: 13px; } .format-b .supp-x-list li::before { color: var(--supp-amber); font-size: 15px; } .format-b .supp-grid-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 22px 0; } .format-b .supp-decision-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 22px 0; grid-template-areas: "compare test" "paragraph paragraph" "evidence safety"; } .format-b .supp-grid-2 > * { width: 100%; min-width: 0; } .format-b .supp-decision-layout > * { width: 100%; min-width: 0; } .format-b .supp-decision-layout .supp-compare-card { grid-area: compare; } .format-b .supp-decision-layout .supp-test-card { grid-area: test; } .format-b .supp-decision-layout .supp-mid-article-paragraph { grid-area: paragraph; margin: 8px 0 6px; } .format-b .supp-decision-layout .supp-evidence-card { grid-area: evidence; } .format-b .supp-decision-layout .supp-safety-card { grid-area: safety; } .format-b .supp-decision-layout.supp-comparison-expanded { grid-template-areas: "compare compare" "paragraph paragraph" "evidence test" "safety test"; } @supports selector(:has(*)) { .format-b .supp-decision-layout:has(.supp-table thead th:nth-child(6)) { grid-template-areas: "compare compare" "paragraph paragraph" "evidence test" "safety test"; } } .format-b .supp-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .format-b .supp-fit-card { position: relative; min-height: 248px; padding: 30px 34px 26px 118px; } .format-b .supp-card-icon, .format-b .supp-strip-icon, .format-b .supp-tip-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(49, 88, 59, .09); } .format-b .supp-card-icon { position: absolute; left: 34px; top: 28px; } .format-b .supp-card-icon-warm { background: rgba(215, 149, 24, .12); } .format-b .supp-card-icon img, .format-b .supp-strip-icon img, .format-b .supp-tip-icon img { width: 39px; height: 39px; object-fit: contain; } .format-b .supp-card-icon-warm img { filter: invert(55%) sepia(79%) saturate(746%) hue-rotate(357deg) brightness(91%) contrast(89%); } .format-b .supp-grid-card h2, .format-b .supp-card h2, .format-b .supp-bottom-line h2 { margin: 0 0 18px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 31px; font-weight: 700; line-height: 1.1; letter-spacing: 0; } .format-b .supp-tradeoff-strip { grid-template-columns: 250px repeat(3, minmax(0, 1fr)); gap: 26px; min-height: 94px; padding: 20px 28px; margin: 26px 0; } .format-b .supp-tradeoff-strip h3 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 30px; font-weight: 700; letter-spacing: 0; } .format-b .supp-tradeoff-strip p { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; color: var(--supp-text); font-size: 14.1px; line-height: 1.38; } .format-b .supp-tradeoff-strip p img { width: 33px; height: 33px; object-fit: contain; } .format-b .supp-compare-card, .format-b .supp-test-card { padding: 26px 28px; } .format-b .supp-test-card { display: flex; flex-direction: column; } .format-b .supp-compare-card { position: relative; } .format-b .supp-table-note { position: absolute; top: 31px; right: 30px; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 10.4px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .format-b .supp-table { border-radius: 0; border-left: 0; border-right: 0; background: transparent; font-size: 13.3px; } .format-b .supp-decision-layout.supp-comparison-expanded .supp-table { table-layout: fixed; } .format-b .supp-decision-layout.supp-comparison-expanded .supp-table th:first-child, .format-b .supp-decision-layout.supp-comparison-expanded .supp-table td:first-child { width: 205px; } @supports selector(:has(*)) { .format-b .supp-decision-layout:has(.supp-table thead th:nth-child(5)) .supp-table { table-layout: fixed; } .format-b .supp-decision-layout:has(.supp-table thead th:nth-child(5)) .supp-table th:first-child, .format-b .supp-decision-layout:has(.supp-table thead th:nth-child(5)) .supp-table td:first-child { width: 205px; } } .format-b .supp-table th, .format-b .supp-table td { padding: 12px 11px; } .format-b .supp-table th { background: transparent; color: var(--supp-green); font-size: 10.8px; } .format-b .supp-table td:first-child { display: flex; align-items: center; gap: 12px; min-width: 0; } .format-b .supp-table-icon { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; } .format-b .supp-table-icon img { width: 24px; height: 24px; object-fit: contain; } .format-b .supp-stars { color: var(--supp-green); font-size: 16px; letter-spacing: .05em; white-space: nowrap; } .format-b .supp-table-source, .format-b .supp-source-note { margin: 14px 0 0; color: var(--supp-text-soft); font-size: 13.2px; line-height: 1.5; } .format-b .supp-evidence-card .supp-source-note { margin-left: -88px; max-width: calc(100% + 88px); text-align: left; } .format-b .supp-info-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 7px; border: 1px solid rgba(49, 88, 59, .5); border-radius: 50%; color: var(--supp-green); font-size: 10px; font-weight: 800; } .format-b .supp-step-list { margin: 18px 0 22px; } .format-b .supp-step-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; margin: 12px 0; font-size: 14.4px; line-height: 1.46; } .format-b .supp-step-list li::before { width: 25px; height: 25px; background: var(--supp-green); font-size: 11.5px; } .format-b .supp-takeaway { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: center; margin: auto 0 0; padding: 18px 20px; border-radius: 10px; background: var(--format-b-paper-soft); font-size: 14.4px; line-height: 1.42; } .format-b .supp-takeaway strong { color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 23px; font-weight: 700; } .format-b .supp-evidence-card, .format-b .supp-safety-card { position: relative; min-height: 190px; padding: 28px 30px 24px 118px; } .format-b .supp-card-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; } .format-b .supp-evidence-card h2, .format-b .supp-safety-card h2 { margin-bottom: 16px; } .format-b .supp-card-header a, .format-b .supp-safety-card a { color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 13.8px; font-weight: 800; white-space: nowrap; } .format-b .supp-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 12px; } .format-b .supp-mini-metrics > div { padding: 0 20px; border-right: 1px solid var(--supp-line); color: var(--supp-text); font-size: 14.2px; line-height: 1.38; } .format-b .supp-mini-metrics > div:first-child { padding-left: 0; } .format-b .supp-mini-metrics > div:last-child { padding-right: 0; border-right: 0; } .format-b .supp-mini-metrics strong { display: block; margin-bottom: 2px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 33px; font-weight: 700; line-height: 1; } .format-b .supp-safety-card p { max-width: 310px; margin: 0 0 22px; font-size: 15.6px; line-height: 1.55; } .format-b .supp-bottom-line { grid-template-columns: 112px minmax(0, 1fr) 270px; gap: 34px; min-height: 170px; padding: 28px 36px; margin: 28px 0 28px; background: linear-gradient(90deg, #fbfbf3, #fdfbf4); } .format-b .supp-bottom-line .supp-round-icon { width: 92px; height: 92px; background: var(--format-b-paper); box-shadow: inset 0 0 0 1px var(--supp-line); } .format-b .supp-bottom-line .supp-round-icon img { width: 61px; height: 61px; object-fit: contain; } .format-b .supp-bottom-line p { max-width: 520px; margin: 0; font-size: 15.2px; line-height: 1.5; } .format-b .supp-bottom-actions { display: grid; gap: 18px; justify-items: start; } .format-b .supp-button { min-width: 226px; min-height: 54px; border-radius: 10px; box-shadow: none; } .format-b .supp-secondary-link { color: var(--supp-green); font-size: 14px; font-weight: 700; } .format-b .supp-template-label { margin-top: 24px; color: #6d716a; font-family: var(--supp-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .42em; } @media (max-width: 1050px) { body.format-b .supp-site-header, body.format-b .supp-footer, .format-b .supp-page { width: min(var(--supp-container), calc(100% - 48px)); } body.format-b .supp-site-nav { margin-left: 40px; } .format-b .supp-hero, .format-b .supp-verdict-card, .format-b .supp-grid-2, .format-b .supp-decision-layout, .format-b .supp-bottom-line { grid-template-columns: 1fr; } .format-b .supp-decision-layout, .format-b .supp-decision-layout.supp-comparison-expanded, .format-b .supp-decision-layout:has(.supp-table thead th:nth-child(6)) { grid-template-areas: "compare" "test" "paragraph" "evidence" "safety"; } .format-b .supp-hero-media { position: static; justify-self: start; width: 100%; aspect-ratio: 1 / 1; } .format-b .supp-hero-media img { position: static; aspect-ratio: 1 / 1; } .format-b .supp-verdict-divider { display: none; } .format-b .supp-tradeoff-strip { grid-template-columns: 1fr; } } @media (max-width: 760px) { body.format-b .supp-site-header, body.format-b .supp-footer, .format-b .supp-page { width: min(var(--supp-container), calc(100% - 32px)); } body.format-b .supp-brand, body.format-b .supp-brand img { width: 180px; } body.format-b .supp-site-nav { margin-left: 0; gap: 10px; } .format-b .supp-h1 { font-size: 45px; } .format-b .supp-hero-media { width: 100%; height: auto; } .format-b .supp-verdict-card, .format-b .supp-fit-card, .format-b .supp-compare-card, .format-b .supp-test-card, .format-b .supp-evidence-card, .format-b .supp-safety-card, .format-b .supp-bottom-line { padding: 24px; } .format-b .supp-grid-2 > *, .format-b .supp-decision-layout > *, .format-b .supp-card, .format-b .supp-grid-card { min-width: 0; max-width: 100%; } .format-b .supp-verdict-good, .format-b .supp-verdict-caution, .format-b .supp-fit-card, .format-b .supp-evidence-card, .format-b .supp-safety-card { grid-template-columns: 1fr; padding-left: 24px; } .format-b .supp-card-icon, .format-b .supp-verdict-heading .supp-answer-icon { position: static; margin-bottom: 16px; } .format-b .supp-verdict-heading { display: block; } .format-b .supp-verdict-card ul { grid-column: auto; } .format-b .supp-table-note { position: static; margin: -10px 0 14px; } .format-b .supp-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; font-size: 11.6px; } .format-b .supp-mini-metrics { grid-template-columns: 1fr; gap: 12px; } .format-b .supp-mini-metrics > div { padding: 0; border-right: 0; } .format-b .supp-evidence-card .supp-source-note { margin-left: 0; max-width: 100%; } .format-b .supp-bottom-actions, .format-b .supp-button { width: 100%; } } @media (max-width: 1050px) { body.format-c .supp-site-header, body.format-c .supp-footer, .format-c .supp-page { width: min(var(--supp-container), calc(100% - 48px)); } body.format-c .supp-site-header { height: auto; min-height: 88px; } body.format-c .supp-site-nav { margin-left: 0; gap: 28px; } .format-c .supp-hero { grid-template-columns: 1fr; } .format-c .supp-hero-media { justify-self: center; width: min(540px, 100%); } .format-c .supp-trust-strip { max-width: 100%; } .format-c .supp-myth-intro { padding-right: 42px; } .format-c .supp-bottom-line { gap: 22px; } } @media (max-width: 720px) { body.format-c .supp-site-header, body.format-c .supp-footer, .format-c .supp-page { width: min(var(--supp-container), calc(100% - 32px)); } body.format-c .supp-brand img { width: 180px; } body.format-c .supp-site-nav { gap: 10px; font-size: 11px; } .format-c .supp-h1 { font-size: 44px; } .format-c .supp-standfirst { font-size: 17px; } .format-c .supp-hero-media { width: 100%; } .format-c .supp-hero-media .supp-photo-quote { position: absolute; right: 14px; bottom: 0; max-width: none; width: min(257px, calc(100% - 28px)); min-height: 0; margin: 0; padding: 22px; font-size: 19px; } .format-c .supp-trust-item { border-right: 0; border-bottom: 1px solid var(--format-c-line); } .format-c .supp-trust-item:last-child { border-bottom: 0; } .format-c .supp-myth-intro { padding: 22px; } .format-c .supp-myth-intro::after { display: none; } .format-c .supp-myth-cell, .format-c .supp-fact-cell, .format-c .supp-evidence-cell { padding: 20px 22px; } .format-c .supp-fact-cell { border-left: 0; border-right: 0; } .format-c .supp-reality-check > p { border-left: 0; margin-top: 16px; padding: 0 0 0 64px; } .format-c .supp-reality-check > p:nth-of-type(n+2) { padding-left: 64px; border-left: 0; } .format-c .supp-reality-check > p img, .format-c .supp-reality-check > p:nth-of-type(n+2) img { left: 0; } .format-c .supp-reality-check .supp-button, .format-c .supp-bottom-line .supp-note-card { width: 100%; } .format-c .supp-bottom-line { grid-template-columns: 1fr; } .format-c .supp-bottom-line .supp-bottom-cta { grid-column: 1; justify-self: stretch; width: 100%; } .format-c .supp-bottom-plant { width: 112px; height: 112px; } .format-c .supp-bottom-plant img { width: 78px; height: 78px; } } /* ============================================================ Format E — mobile-only corrections (≤720px). The base .format-e rules use higher specificity than the generic mobile collapses earlier in this file, so the hero stayed two-up and the H1 stayed 46px on phones. These rules are scoped inside a mobile media query and match the base specificity so they win by source order WITHOUT altering desktop. ============================================================ */ @media (max-width: 720px) { .format-e .supp-page { /* Desktop keeps wide 48px gutters; on phones those waste screen space. Tighten to a slim 10px each side so content uses nearly the full width. */ width: min(var(--supp-container), calc(100% - 20px)); } .format-e .supp-hero { /* Stack the text block above the hero image — no more 50/50 squeeze. */ grid-template-columns: 1fr; gap: 20px; margin: 22px 0 24px; } .format-e .supp-h1 { /* Scale the headline down and let it wrap naturally instead of one word per line. */ font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.12; margin: 12px 0 14px; } .format-e .supp-standfirst { font-size: 16px; line-height: 1.5; } .format-e .supp-hero-media { /* Full-width image below the text, capped so it doesn't dominate. */ width: 100%; max-width: 100%; margin: 0; } /* Product comparison cards: keep two side by side but reclaim space. Tighten the gap and card padding, and shrink text a touch so the content (dose ranges, taglines) fits without awkward wrapping. */ .format-e .supp-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .format-e .supp-item-card { padding: 12px 11px 11px; font-size: 11.8px; } /* Re-align the rank badge to the tighter mobile card padding so its left edge still matches the tagline (11px) and it stays centered on the h2. */ .format-e .supp-item-rank { top: 10px; left: 11px; } /* Remove the line-art icons in front of Evidence / Absorption / etc. on mobile so the label + value have the full row width. */ .format-e .supp-meta-icon { display: none; } .format-e .supp-item-meta li { padding-left: 0; margin-left: 0; font-size: 11.8px; } .format-e .supp-meta-label, .format-e .supp-meta-value { font-size: 11.8px; } .format-e .supp-meta-value.supp-stars { font-size: 12.4px; letter-spacing: .5px; } /* Ranking table: freeze the Rank + Supplement-form columns so the form name is always visible, and let the remaining columns scroll. Cells now wrap (instead of nowrap) so each column can be much narrower and more columns fit on screen at once. Scrolling moves from the (the generic mobile rule) up to the

wrapper so sticky cells anchor to the viewport edge. */ .format-e .supp-ranking-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Keep the heading + intro paragraph fixed to the left edge so only the table scrolls horizontally (they are siblings of the table inside the scroll container). */ .format-e .supp-ranking-table > h2, .format-e .supp-ranking-table > p { position: sticky; left: 0; width: 100%; } .format-e .supp-table { display: table; table-layout: fixed; width: 484px; overflow: visible; white-space: normal; } .format-e .supp-table th, .format-e .supp-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: middle; padding: 8px 9px; font-size: 11.6px; } .format-e .supp-table th { font-size: 9.5px; letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Per-column widths (table-layout: fixed makes these authoritative). */ .format-e .supp-table th:nth-child(1), .format-e .supp-table td:nth-child(1) { width: 44px; padding-left: 4px; padding-right: 4px; text-align: center; } .format-e .supp-table th:nth-child(2), .format-e .supp-table td:nth-child(2) { width: 114px; } .format-e .supp-table th:nth-child(3), .format-e .supp-table td:nth-child(3) { width: 96px; min-width: 0; } .format-e .supp-table th:nth-child(4), .format-e .supp-table td:nth-child(4) { width: 78px; padding-right: 16px; } .format-e .supp-table th:nth-child(5), .format-e .supp-table td:nth-child(5) { width: 84px; } .format-e .supp-table th:nth-child(6), .format-e .supp-table td:nth-child(6) { width: 100px; } /* Keep the star rating on one line within its column. */ .format-e .supp-table td.supp-stars { white-space: nowrap; } /* Freeze columns 1 (Rank) and 2 (Supplement form). The second column's left offset equals the first column's width. */ .format-e .supp-table th:nth-child(1), .format-e .supp-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; } .format-e .supp-table th:nth-child(2), .format-e .supp-table td:nth-child(2) { position: sticky; left: 44px; z-index: 2; box-shadow: 1px 0 0 var(--supp-line); } /* Opaque backgrounds so scrolling content passes cleanly behind the frozen columns. */ .format-e .supp-table td:nth-child(1), .format-e .supp-table td:nth-child(2) { background: #fff; } .format-e .supp-table th:nth-child(1), .format-e .supp-table th:nth-child(2) { background: var(--supp-surface-soft); z-index: 3; } }