/* 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; } /* The shared site header/footer use .container (1120px from site.css), but this article's content is wider (--supp-container 1180px), so the content overhangs the header/footer. Widen ONLY this article's header/footer container to match the content width, using the same responsive formula. Scoped to body.format-a so the universal site.css / other pages are untouched. */ body.format-a .site-header .container, body.format-a .site-footer .container { width: min(var(--supp-container), calc(100% - 84px)); max-width: none; } @media (max-width: 1050px) { body.format-a .site-header .container, body.format-a .site-footer .container { width: min(var(--supp-container), calc(100% - 48px)); } } @media (max-width: 760px) { body.format-a .site-header .container, body.format-a .site-footer .container { width: min(var(--supp-container), calc(100% - 32px)); } } .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: 21 / 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 { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 18px; border-right: 1px solid var(--supp-line); } .format-e .supp-pick:last-child { border-right: 0; } .format-e .supp-pick-label { display: block; color: var(--supp-green); font-family: var(--supp-font-ui); font-size: 0.66rem; 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; --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 { grid-template-columns: 350px minmax(0, 1fr); gap: 34px; align-items: start; margin-bottom: 26px; } .format-e .supp-kicker { gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .09em; } .format-e .supp-kicker::before { width: 12px; height: 12px; } .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 { max-width: 360px; margin-bottom: 0; font-size: 16.3px; line-height: 1.45; } .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 { width: 100%; margin: var(--supp-format-e-hero-image-offset, 39px) 0 0 auto; height: var(--supp-format-e-hero-image-height, 300px); border: 0; border-radius: 8px; box-shadow: none; } .format-e .supp-hero-media img { height: 100%; aspect-ratio: auto; object-position: center; } .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; } .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)); margin: 18px 0 30px; 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; } } .format-e .supp-pick { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding: 14px 13px; font-size: 12.6px; line-height: 1.34; } .format-e .supp-pick p { margin: 0; } .format-e .supp-pick strong { color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 17px; font-weight: 700; line-height: 1.08; } .format-e .supp-pick-label { margin-bottom: 3px; font-size: 9.8px; font-weight: 900; letter-spacing: .1em; } .format-e .supp-pick .supp-round-icon { width: 38px !important; height: 38px !important; font-size: 14px !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: 12px 13px; } .format-e .supp-table th { font-size: 10.8px; font-weight: 900; } .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 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 12px 0 34px; } .format-e .supp-card-instruction { display: inline-flex; align-items: center; margin: 34px 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; padding: 18px; 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); font-size: 13.4px; line-height: 1.42; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .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 8px; color: var(--supp-green); font-family: var(--supp-font-heading); font-size: 24px; font-weight: 700; line-height: 1.08; letter-spacing: 0; } .format-e .supp-item-card p { margin: 0 0 8px; } .format-e .supp-item-rank { top: 14px; left: 14px; width: 30px; height: 30px; font-size: 13px; } .format-e .supp-product-thumb { width: 78px; height: 78px; margin: 10px 0 14px; } .format-e .supp-product-link { display: inline-flex; margin-top: 4px; font-size: 13px; font-weight: 900; } .format-e .supp-item-detail-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 28px; 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[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 50px 36px 0; } /* Align the propagated header, related-reading shelf, and disclaimer to the content band's LEFT edge only (right edges intentionally stay at the page edge). Scoped to body.format-a so the shared header/footer + other pages are untouched. */ body.format-a .site-header .header-inner { padding-left: var(--format-a-band-offset); padding-right: 50px; } body.format-a .site-header .brand img { width: 30px; height: 30px; } body.format-a .acard-shelf, body.format-a .supp-disclaimer { margin-left: var(--format-a-band-offset); } .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: 6px; } .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: 18px 0 16px; font-size: 58px; font-weight: 700; line-height: .97; 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%; aspect-ratio: 4 / 3; 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: 21 / 9; 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: 58px; height: 58px; margin: 0 0 16px; border-radius: 50%; background: rgba(49, 88, 59, .1); } .format-a .supp-side-icon img { width: 34px; height: 34px; } .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%; aspect-ratio: 16 / 9; } .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-main { gap: 30px; } .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-a .supp-mini-evidence-row p { grid-template-columns: 1fr; gap: 7px; align-items: start; justify-items: start; text-align: left; padding: 0 10px; } /* Collapse the band offset on mobile to match the body content. */ body.format-a .site-header .header-inner { padding-left: 0; padding-right: 0; } body.format-a .acard-shelf, body.format-a .supp-disclaimer { margin-left: 0; } } /* ============================================================ 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; } }