/* ========================================================================== "Alternative to" comparison pages — the feature table (Filtru column highlighted + Recommended chip), the pull-quote under it, and small print. ========================================================================== */ .compare-section { max-width: 860px; margin-inline: auto; text-align: center; } .compare-section .method-lede { margin-inline: auto; } /* App icons — App Store artwork is square; round it like iOS does. */ .app-badge { display: block; width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Competitor icon + full App Store name above "First, some honesty." */ .honesty-app { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; } .honesty-app .app-badge { width: 72px; height: 72px; } .honesty-app__name { font-size: 0.92rem; font-weight: 600; color: var(--color-muted); } /* The "switch" visual above the comparison table: their icon, a curved arrow, Filtru's icon. Decorative (the heading right below says the same thing). */ .vs-switch { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 26px); margin-bottom: clamp(24px, 4vw, 36px); } .vs-switch .app-badge { width: clamp(56px, 8vw, 72px); height: clamp(56px, 8vw, 72px); } .vs-switch__arrow { width: clamp(72px, 14vw, 120px); height: auto; color: var(--color-faint); flex: 0 1 auto; } /* The inner scroll region handles the table's width; clip the section so the clipped remainder can never widen the page itself (same trick as .founder). */ #compare { overflow-x: clip; } /* Wide tables scroll inside their own region on narrow screens. position: relative matters: the cells' visually-hidden screen-reader spans are absolutely positioned, and without a positioned ancestor they'd resolve against , escape this region's clipping, and widen the whole page. */ .compare-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: clamp(28px, 4vw, 44px); } .compare-scroll:focus-visible { outline: 3px solid var(--color-accent); } .compare-table { width: 100%; min-width: 640px; /* separate (not collapse) so the Filtru column's corner cells can carry border-radius — collapsed tables ignore radii on cells. */ border-collapse: separate; border-spacing: 0; text-align: left; font-size: 1.02rem; line-height: 1.45; } .compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); vertical-align: top; } .compare-table thead th { font-size: 1.06rem; font-weight: 800; color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); vertical-align: middle; } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; } /* Column proportions: feature label / them / Filtru. */ .compare-table .col-feature { width: 30%; } .compare-table tbody th { font-weight: 700; color: var(--color-text); font-size: 0.98rem; } .compare-table td { color: var(--color-body); } .compare-table td.col-them { color: var(--color-muted); } /* Filtru column — the recommended pick, lifted in emerald: a semi-opaque bright fill with a prominent border (the chip below matches). */ .compare-table { --rec: #10b981; /* emerald */ --rec-bright: #34d399; /* border highlight */ --rec-ink: #04130d; /* text on solid emerald */ } .compare-table td.col-filtru, .compare-table th.col-filtru { background: rgba(16, 185, 129, 0.13); border-left: 2px solid rgba(52, 211, 153, 0.55); border-right: 2px solid rgba(52, 211, 153, 0.55); animation: rec-pulse 3.2s ease-in-out infinite; } .compare-table thead th.col-filtru { border-top: 2px solid rgba(52, 211, 153, 0.55); border-radius: 14px 14px 0 0; animation-name: rec-pulse-top; } .compare-table tbody tr:last-child .col-filtru { border-bottom: 2px solid rgba(52, 211, 153, 0.55); border-radius: 0 0 14px 14px; animation-name: rec-pulse-bottom; } /* The whole column breathes: background + its emerald edges pulse in sync. Cells share one clock (same duration, page-load start), and the header/last cells get variants covering the top/bottom caps they alone own. The row hairlines (border-bottom on inner cells) are deliberately untouched. */ @keyframes rec-pulse { 0%, 100% { background-color: rgba(16, 185, 129, 0.09); border-left-color: rgba(52, 211, 153, 0.42); border-right-color: rgba(52, 211, 153, 0.42); } 50% { background-color: rgba(16, 185, 129, 0.20); border-left-color: rgba(52, 211, 153, 0.85); border-right-color: rgba(52, 211, 153, 0.85); } } @keyframes rec-pulse-top { 0%, 100% { background-color: rgba(16, 185, 129, 0.09); border-left-color: rgba(52, 211, 153, 0.42); border-right-color: rgba(52, 211, 153, 0.42); border-top-color: rgba(52, 211, 153, 0.42); } 50% { background-color: rgba(16, 185, 129, 0.20); border-left-color: rgba(52, 211, 153, 0.85); border-right-color: rgba(52, 211, 153, 0.85); border-top-color: rgba(52, 211, 153, 0.85); } } @keyframes rec-pulse-bottom { 0%, 100% { background-color: rgba(16, 185, 129, 0.09); border-left-color: rgba(52, 211, 153, 0.42); border-right-color: rgba(52, 211, 153, 0.42); border-bottom-color: rgba(52, 211, 153, 0.42); } 50% { background-color: rgba(16, 185, 129, 0.20); border-left-color: rgba(52, 211, 153, 0.85); border-right-color: rgba(52, 211, 153, 0.85); border-bottom-color: rgba(52, 211, 153, 0.85); } } @media (prefers-reduced-motion: reduce) { .compare-table td.col-filtru, .compare-table th.col-filtru { animation: none; } } .compare-app { display: inline-flex; align-items: center; gap: 8px; } .compare-app img { border-radius: 7px; } .compare-rec { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--rec, #10b981); color: var(--rec-ink, #04130d); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* Yes / no / partial marks — text glyphs, neutral (colour is not the only signal: each mark also has visually-hidden text for screen readers). */ .compare-mark { font-weight: 800; margin-right: 6px; } .compare-mark--yes::before { content: "✓"; color: var(--color-text); } .compare-mark--no::before { content: "✕"; color: var(--color-faint); } .compare-mark--partial::before { content: "±"; color: var(--color-muted); } /* Pull-quote under the table. */ .compare-quote { max-width: 560px; margin: 34px auto 0; text-align: center; } .compare-quote blockquote { margin: 0; font-size: 1.22rem; line-height: 1.5; color: var(--color-body); } .compare-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 600; font-size: 0.92rem; color: var(--color-muted); } .compare-quote .stars { display: block; font-size: 0.85rem; margin-bottom: 8px; } /* Small print under the compare-more links. */ .compare-disclaimer { margin-top: 34px; max-width: 72ch; color: var(--color-faint); font-size: 0.88rem; line-height: 1.6; } .compare-disclaimer a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; } /* "Still not convinced?" — the homepage's quiet doorway into the comparison pages. Same shape as the YES list, deliberately smaller and dimmer so it reads as a footnote, not a section. */ .compare-teaser { padding-block: clamp(30px, 4vw, 56px) clamp(48px, 6vw, 84px); } .compare-teaser h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); max-width: none; } .compare-teaser .band > p { font-size: 0.98rem; line-height: 1.6; color: var(--color-muted); max-width: 56ch; } .teaser-list { list-style: none; max-width: 560px; margin: 18px auto 0; text-align: center; } .teaser-list li { font-size: 0.95rem; font-weight: 600; color: var(--color-body); } .teaser-q { display: inline-block; padding: 10px 2px; border-bottom: 1px solid var(--color-border); } .teaser-list li:last-child .teaser-q { border-bottom: 0; } .teaser-list a { color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 3px; }