/* ── comp_adv_1 — editorial comparison listicle ───────────────────────────── Authored 2026-09-03 from the reference snapshot (docs/product/template_imports/comp_adv_1/). Poppins on an off-white paper ground, one 46rem column, green grade chips and buttons. RTL contract (lp/constants_locales.RTL_READY_TEMPLATES): everything before the [dir="rtl"] block uses LOGICAL properties only — margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end — so dir="rtl" on flips the layout for free. The RTL block holds the genuine exceptions (grades and dates stay left-to-right). */ :root { --ca1-bg: #f7f6f3; --ca1-surface: #ffffff; --ca1-ink: #1a1a1a; --ca1-muted: #6b7280; --ca1-rule: #e5e7eb; --ca1-accent: #12b76a; --ca1-accent-dark: #0e9f5c; --ca1-danger: #d0342c; --ca1-warn-bg: #fff8e1; --ca1-warn-border: #f5c542; --ca1-warn-ink: #9a6a12; } html { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ca1-ink); background: var(--ca1-bg); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-block-start: 5rem; } body { margin: 0; font-size: 15px; line-height: 1.7; } .ca1 img { max-width: 100%; height: auto; display: block; } .ca1 a { color: inherit; text-decoration: none; } .ca1 a:focus-visible, .ca1 button:focus-visible { outline: 2px solid var(--ca1-accent); outline-offset: 2px; } /* ── Advertorial strip + header ── */ .ca1-adv-strip { text-align: center; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #777; padding: .55rem .75rem; background: #efeeea; } .ca1-header { background: var(--ca1-surface); border-block-end: 1px solid var(--ca1-rule); position: relative; z-index: 20; } .ca1-header-inner { max-width: 46rem; margin-inline: auto; min-height: 4.5rem; padding: .5rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ca1-logo img { max-height: 2.75rem; width: auto; } .ca1-logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; } .ca1-actions { display: flex; align-items: center; gap: .9rem; } .ca1-disclosure-link { font: inherit; font-size: .75rem; color: var(--ca1-muted); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } .ca1-toc { position: relative; } .ca1-toc-toggle { width: 2.5rem; height: 2.5rem; border: 1px solid var(--ca1-rule); border-radius: .5rem; background: var(--ca1-surface); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem; cursor: pointer; padding: 0; } .ca1-toc-bar { display: block; width: 1.1rem; height: 2px; background: var(--ca1-ink); border-radius: 2px; } .ca1-toc-menu { display: none; position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); min-width: 13rem; background: var(--ca1-surface); border: 1px solid var(--ca1-rule); border-radius: .6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: .5rem 0; z-index: 30; } .ca1-toc.is-open .ca1-toc-menu { display: block; } .ca1-toc-menu a { display: block; padding: .55rem 1rem; font-size: .875rem; font-weight: 500; } .ca1-toc-menu a:hover { background: #f3f4f6; } .ca1-disclosure { max-width: 46rem; margin-inline: auto; padding: 0 1.25rem; } .ca1-disclosure[hidden] { display: none; } .ca1-disclosure-inner { background: #fbfaf7; border: 1px solid var(--ca1-rule); border-radius: .5rem; padding: .8rem 1rem; font-size: .8125rem; color: #555; margin-block-start: .9rem; } .ca1-disclosure-inner p { margin: 0; } /* ── Column + type ── */ .ca1-main { max-width: 46rem; margin-inline: auto; padding: 1.75rem 1.25rem 3rem; } .ca1 h1 { font-size: 2rem; line-height: 1.2; font-weight: 700; margin: 0 0 .75rem; letter-spacing: -.01em; } .ca1 h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 2.25rem 0 .9rem; } .ca1 h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.6rem 0 .6rem; } .ca1 p { margin: 0 0 1rem; } .ca1 ul, .ca1 ol { margin: 0 0 1.1rem; padding-inline-start: 1.4rem; } .ca1 li { margin: .3rem 0; } .ca1 strong { font-weight: 700; } /* ── Hero ── */ .ca1-deck { font-size: 1.125rem; line-height: 1.4; font-weight: 600; color: var(--ca1-muted); margin: 0 0 .9rem; } .ca1-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .8125rem; color: var(--ca1-muted); margin: 0 0 1rem; } .ca1-hero-meta strong { color: var(--ca1-ink); font-weight: 600; } .ca1-trust { color: var(--ca1-accent-dark); font-weight: 600; } /* The hero is a BAND, not a full-height photo: an uncapped 1444x770 hero pushed the opening line below the fold (operator report 2026-09-04). `aspect-ratio` + `object-fit: cover` crop it to a predictable strip; the max-height is the belt for very narrow columns. */ .ca1-hero-img { border-radius: .5rem; margin-block-end: 1.25rem; width: 100%; aspect-ratio: 16 / 7; max-height: 22rem; object-fit: cover; object-position: center; } /* Images inside a lifted section (How we tested) — same treatment as the review-block images, which are bounded by the column width alone. */ .ca1-section-img { border-radius: .5rem; margin: 0 0 1rem; width: 100%; } .ca1-lede { font-weight: 700; font-size: 1.0625rem; line-height: 1.55; margin-block-end: 1.1rem; } /* ── Criteria / ✅ / ❌ blocks ── */ .ca1-list-lead { margin: 0 0 .6rem; } .ca1-criteria-list li { margin: .55rem 0; } .ca1-feature-list { margin: 0 0 .5rem; } .ca1-check-item, .ca1-x-item { margin: 0 0 1.1rem; } .ca1-check-item strong, .ca1-x-item strong { display: block; margin-block-end: .1rem; } .ca1-check-item p, .ca1-x-item p { margin: 0; } /* ── Ranked cards ── */ .ca1-rankings-heading { text-align: center; font-size: 1.125rem; margin: 2.5rem 0 .25rem; } .ca1-divider { border: 0; border-block-start: 1px solid var(--ca1-rule); margin: 2rem 0; } .ca1-card-title { margin: 0 0 1rem; font-size: 1.375rem; line-height: 1.3; } .ca1-card-title .ca1-rank-link { text-transform: uppercase; letter-spacing: .01em; } .ca1-card-title a.ca1-rank-link { color: var(--ca1-danger); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .ca1-card-subtitle { font-weight: 600; } .ca1-trophy { font-size: 1.1em; } .ca1-card-img { border-radius: .5rem; margin-block-end: 1rem; width: 100%; } .ca1-rating { display: flex; align-items: center; gap: .6rem; font-weight: 700; text-transform: uppercase; font-size: .8125rem; letter-spacing: .04em; margin: 0 0 .9rem; } .ca1-grade { display: inline-block; min-width: 2.6rem; text-align: center; background: var(--ca1-accent); color: #fff; font-weight: 700; font-size: .9375rem; padding: .15rem .55rem; border-radius: .3rem; letter-spacing: .02em; text-transform: none; } .ca1-pc-title { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; margin: 1rem 0 .4rem; } .ca1-pro-list, .ca1-con-list { list-style: none; padding-inline-start: 0; margin-block-end: .8rem; } .ca1-pro-list li, .ca1-con-list li { position: relative; padding-inline-start: 1.2rem; font-size: .9375rem; margin: .35rem 0; } .ca1-pro-list li::before, .ca1-con-list li::before { content: "–"; position: absolute; inset-inline-start: 0; color: var(--ca1-muted); } .ca1-con-list a { color: var(--ca1-danger); text-decoration: underline; } .ca1-verdict p:last-child { margin-block-end: .4rem; } .ca1-verdict a { color: var(--ca1-accent-dark); text-decoration: underline; } /* Buttons are scoped `.ca1 a.ca1-btn` so they outrank the `.ca1 a { color: inherit }` reset above. Written as `.ca1-btn { color: #fff }` alone they lost the cascade and rendered near-black text on the green fill — the operator report of 2026-09-04. */ .ca1 a.ca1-btn, .ca1-btn { display: inline-block; background: var(--ca1-accent); color: #fff; font-weight: 700; font-size: .9375rem; padding: .8rem 1.6rem; border-radius: .35rem; margin: .6rem 0 1.1rem; transition: background .15s ease; } .ca1 a.ca1-btn:hover, .ca1-btn:hover { background: var(--ca1-accent-dark); color: #fff; } .ca1 a.ca1-btn--secondary, .ca1-btn--secondary { background: var(--ca1-surface); color: var(--ca1-accent-dark); border: 2px solid var(--ca1-accent); } .ca1 a.ca1-btn--secondary:hover, .ca1-btn--secondary:hover { background: #ecfdf5; color: var(--ca1-accent-dark); } .ca1-btn--wide { display: block; text-align: center; font-size: 1.0625rem; padding: 1rem 1.6rem; max-width: 22rem; margin-inline: auto; } .ca1-update { background: var(--ca1-warn-bg); border: 1px solid var(--ca1-warn-border); border-radius: .4rem; padding: .75rem 1rem; font-size: .9rem; margin: 1rem 0 .5rem; } .ca1-update strong { color: var(--ca1-warn-ink); } .ca1-update a { text-decoration: underline; color: var(--ca1-accent-dark); } /* ── Winner recap + full review ── */ .ca1-winner-img { max-width: 16rem; border-radius: .5rem; margin-block-end: 1rem; } .ca1-review-block { margin-block-end: .5rem; } .ca1-review-img { border-radius: .5rem; margin-block-end: 1rem; } /* ── FAQ ── */ .ca1-faq { margin-block-start: 2.5rem; } .ca1-faq-item { border-block-end: 1px solid var(--ca1-rule); } .ca1-faq-q { cursor: pointer; font-weight: 700; padding: .9rem 0; padding-inline-end: 1.8rem; list-style: none; position: relative; } .ca1-faq-q::-webkit-details-marker { display: none; } .ca1-faq-q::after { content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: .7rem; font-size: 1.25rem; color: var(--ca1-muted); } .ca1-faq-item[open] .ca1-faq-q::after { content: "–"; } .ca1-faq-a { padding: 0 0 1rem; font-size: .9375rem; } .ca1-faq-a p:last-child { margin: 0; } .ca1-faq-a a { color: var(--ca1-accent-dark); text-decoration: underline; } /* ── Where can I buy (the long review's closing steps) ── */ .ca1-buy-steps ol { padding-inline-start: 1.4rem; } .ca1-buy-steps li { margin: .5rem 0; } /* ── Sticky mobile CTA ────────────────────────────────────────────────── Mobile only, by request. `hidden` is toggled by the script; the attribute selector keeps it out of the flow until the trigger has scrolled past, so there is no flash on load. Logical properties throughout so RTL flips it. */ .ca1-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 900; display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--ca1-surface); border-block-start: 1px solid var(--ca1-rule); box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); } .ca1-sticky[hidden] { display: none; } .ca1-sticky-img { width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: .35rem; object-fit: cover; } .ca1-sticky-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; } .ca1-sticky-name { font-weight: 700; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ca1-sticky-grade { flex: 0 0 auto; background: var(--ca1-accent); color: #fff; font-weight: 700; font-size: .75rem; padding: .1rem .4rem; border-radius: .25rem; } .ca1 a.ca1-sticky-cta, .ca1-sticky-cta { flex: 0 0 auto; background: var(--ca1-accent); color: #fff; font-weight: 700; font-size: .875rem; padding: .6rem 1rem; border-radius: .35rem; white-space: nowrap; } .ca1-sticky-close { flex: 0 0 auto; background: none; border: 0; color: var(--ca1-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .2rem .3rem; } /* Desktop keeps the article uninterrupted — the owner asked for mobile. */ @media (min-width: 641px) { .ca1-sticky { display: none; } } /* ── Final CTA ── */ .ca1-final-cta { margin: 2rem 0 .5rem; } /* ── Reader comments ── */ .ca1-comments { margin-block-start: 2.5rem; } .ca1-comment { display: flex; gap: .9rem; padding: 1rem 0; border-block-end: 1px solid var(--ca1-rule); } .ca1-comment-avatar { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e5e7eb; color: #374151; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9375rem; } .ca1-comment-body { min-width: 0; } .ca1-comment-name { font-weight: 700; font-size: .9375rem; } .ca1-comment-meta { font-size: .75rem; color: var(--ca1-muted); margin-block-end: .35rem; } .ca1-comment-text { font-size: .9375rem; margin: 0; } /* ── Author card ── */ .ca1-author { display: flex; gap: 1rem; align-items: flex-start; background: var(--ca1-surface); border: 1px solid var(--ca1-rule); border-radius: .6rem; padding: 1rem 1.2rem; margin-block-start: 2.5rem; } .ca1-author img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: 0 0 3.5rem; } .ca1-author-name { font-weight: 700; margin: 0; } .ca1-author-role { color: var(--ca1-muted); font-size: .8125rem; margin: 0 0 .4rem; } .ca1-author-bio p { margin: 0; font-size: .9rem; } @media (max-width: 640px) { .ca1 h1 { font-size: 1.6rem; } .ca1 h2 { font-size: 1.2rem; } .ca1-card-title { font-size: 1.2rem; } .ca1-deck { font-size: 1rem; } .ca1-hero-img { aspect-ratio: 3 / 2; max-height: 15rem; } /* room for the sticky bar so it never covers the footer's last line */ .site-footer { padding-block-end: 5.5rem; } .ca1-header-inner { min-height: 3.75rem; } .ca1-logo img { max-height: 2.25rem; } } /* ── lpgen shared chrome: site footer + exit-intent modal ────────────── Copied from static/editorial/editorial.css so the shared partials (_footer_menu/_footer_below_menu, editorial exit_intent) render identically across all website templates. */ .site-footer { background: #0f1f2b; color: #aaaaaa; padding: 3rem 1.25rem 2rem; font-family: "Open Sans", "Inter", sans-serif; font-size: .8125rem; line-height: 1.85; margin-block-start: 3rem; } .site-footer .footer-inner { max-width: 50rem; margin-inline: auto; text-align: center; } .site-footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 2rem; margin-block-end: 1.25rem; } .site-footer .footer-links a { color: #cccccc; font-weight: 600; font-size: .8125rem; text-decoration: none; transition: color 0.15s ease; } .site-footer .footer-links a:hover { color: #ffffff; } .site-footer .footer-disclaimer { color: #8a97a3; font-size: .75rem; margin-block-start: .75rem; line-height: 1.6; } .site-footer .footer-disclaimer a { color: #cccccc; } .site-footer .footer-disclaimer strong { color: #cccccc; } .exit-intent { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999; align-items: center; justify-content: center; padding: 2rem; } .exit-intent--open { display: flex; } .exit-intent-card { background: #fff; max-width: 35rem; width: 100%; border-radius: 0.6rem; padding: 0; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.35); display: flex; flex-direction: row; position: relative; } .exit-intent-close { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.8rem; background: rgba(0,0,0,0.06); border: none; color: #1f2937; width: 1.75rem; height: 1.75rem; font-size: 1.125rem; line-height: 1; cursor: pointer; border-radius: 50%; } .exit-intent-image { flex: 1; min-width: 0; } .exit-intent-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .exit-intent-body { flex: 1.2; padding: 1.5rem 1.4rem; display: flex; flex-direction: column; justify-content: center; } .exit-intent-heading { font-family: "Open Sans", "Inter", sans-serif; font-size: 1.875rem; font-weight: 800; color: #1f2937; margin: 0 0 0.5rem; text-decoration: underline; } .exit-intent-subheading { font-family: "Open Sans", "Inter", sans-serif; font-size: 1rem; line-height: 1.5; color: #4b5563; margin: 0 0 .9rem; } .exit-intent-offer { font-family: "Open Sans", "Inter", sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.3; color: #1f2937; margin: 0 0 .9rem; } .exit-intent-cta { display: block; text-align: center; padding: .9rem 1rem; background-color: var(--ca1-accent); color: #fff; font-family: "Open Sans", "Inter", sans-serif; font-size: 1.0625rem; font-weight: 800; text-decoration: none; border-radius: 0.4rem; } .exit-intent-fineprint { font-family: "Open Sans", "Inter", sans-serif; font-size: .6875rem; color: #6b7280; text-align: center; margin-block-start: 0.5rem; } @media (max-width: 640px) { .exit-intent-card { flex-direction: column; } } /* ── RTL exceptions ───────────────────────────────────────────────────── Everything above follows reading order through logical properties. The only things that must NOT flip are the letter grades ("A+", "B-") and the machine-formatted date, which stay left-to-right inside an RTL line. */ [dir="rtl"] .ca1-grade, [dir="rtl"] .ca1-hero-meta time { direction: ltr; unicode-bidi: isolate; }