/* * ═══════════════════════════════════════════════════════════════ * compare-template.css * Scoped styles for the "Tool A vs Tool B" comparison page template. * * All selectors are prefixed with .ct- (compare-template) to avoid * any conflict with style.css or faq-component.css. * * LOAD ORDER * ────────── * In , link stylesheets in this order: * 1. style.css (shared site styles) * 2. compare-template.css (this file) * 3. faq-component.css (only when FAQ component is pasted in) * * CUSTOM PROPERTIES * ───────────────── * Override these in your own stylesheet after linking this file: * * --ct-accent-a Tool A accent colour (default: #2563eb, blue) * --ct-accent-b Tool B accent colour (default: #4f46e5, indigo) * --ct-text Body text (default: #111827) * --ct-muted Muted / meta text (default: #6b7280) * --ct-border Divider / border (default: #e5e7eb) * --ct-bg-alt Alternate row bg (default: #f9fafb) * --ct-radius Border radius (default: 6px) * --ct-font Font stack (default: system-ui) * ═══════════════════════════════════════════════════════════════ */ /* ── 1. Custom properties ── */ :root { --ct-accent-a: #2563eb; --ct-accent-b: #4f46e5; --ct-text: #111827; --ct-muted: #6b7280; --ct-border: #e5e7eb; --ct-bg-alt: #f9fafb; --ct-radius: 6px; --ct-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ── 2. Base reset for the template ── */ .ct-header, .ct-footer, .ct-article, .ct-sidebar, .ct-layout { box-sizing: border-box; font-family: var(--ct-font); color: var(--ct-text); } /* ── 3. Site header ── */ .ct-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--ct-border); } .ct-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin-inline: auto; padding: 0 1.5rem; height: 3.5rem; gap: 1.5rem; } /* ── 4. Logo ── */ .ct-logo { display: flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 1.0625rem; color: var(--ct-text); text-decoration: none; white-space: nowrap; } .ct-logo:hover { color: var(--ct-accent-a); } .ct-logo:hover .logo-img { opacity: 0.88; } .ct-logo__mark { display: none; } .ct-logo .logo-img { height: 44px; width: auto; max-width: 44px; object-fit: contain; flex-shrink: 0; } .ct-logo .logo-text { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } /* ── 5. Primary navigation ── */ .ct-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .ct-nav a { font-size: 0.875rem; font-weight: 500; color: var(--ct-muted); text-decoration: none; white-space: nowrap; } .ct-nav a:hover, .ct-nav a[aria-current="page"] { color: var(--ct-text); } /* ── 6. Page layout: article + sidebar ── */ .ct-layout { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; max-width: 1200px; margin-inline: auto; padding: 2.5rem 1.5rem 4rem; align-items: start; } /* ── 7. Article column ── */ .ct-article { min-width: 0; /* prevent grid blowout */ } /* ── 8. Breadcrumb ── */ .ct-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 0.8125rem; color: var(--ct-muted); } .ct-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ct-border); } .ct-breadcrumb a { color: var(--ct-muted); text-decoration: none; } .ct-breadcrumb a:hover { color: var(--ct-text); } /* ── 9. Page header ── */ .ct-page-header { margin-bottom: 2.5rem; } .ct-page-header__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .ct-tag { display: inline-block; padding: 0.2em 0.6em; background: #eff6ff; color: var(--ct-accent-a); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--ct-radius); } .ct-updated { font-size: 0.8125rem; color: var(--ct-muted); } .ct-article h1 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; margin: 0 0 0.75rem; color: var(--ct-text); } .ct-standfirst { font-size: 1.0625rem; line-height: 1.6; color: var(--ct-muted); margin: 0 0 1.75rem; max-width: 65ch; } .ct-standfirst a { color: var(--ct-accent-a); text-decoration: none; } .ct-standfirst a:hover { text-decoration: underline; } /* ── 10. VS badge strip ── */ .ct-vs-strip { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; flex-wrap: wrap; } .ct-vs-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 0.75rem 1.25rem; border: 2px solid var(--ct-border); border-radius: var(--ct-radius); text-align: center; } .ct-vs-badge--a { border-color: var(--ct-accent-a); } .ct-vs-badge--b { border-color: var(--ct-accent-b); } .ct-vs-badge__name { font-size: 1rem; font-weight: 700; color: var(--ct-text); } .ct-vs-badge--a .ct-vs-badge__name { color: var(--ct-accent-a); } .ct-vs-badge--b .ct-vs-badge__name { color: var(--ct-accent-b); } .ct-vs-badge__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ct-muted); margin-top: 0.2rem; } .ct-vs-divider { font-size: 1.25rem; font-weight: 800; color: var(--ct-muted); flex-shrink: 0; } /* ── 11. H2 headings ── */ .ct-h2 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 800; line-height: 1.25; margin: 2.5rem 0 0.75rem; color: var(--ct-text); scroll-margin-top: 5rem; /* clear sticky header on anchor jump */ padding-top: 0.25rem; border-top: 2px solid var(--ct-border); } /* First H2 on the page needs no top border */ .ct-page-header + section .ct-h2:first-child, .ct-article > section:first-of-type .ct-h2 { border-top: none; margin-top: 0; } /* ── 12. Body paragraphs ── */ .ct-article p { font-size: 0.9375rem; line-height: 1.7; color: var(--ct-text); margin: 0 0 1rem; max-width: 72ch; } .ct-article a { color: var(--ct-accent-a); text-decoration: none; } .ct-article a:hover { text-decoration: underline; } /* Buttons inside .ct-article must override the generic link colour rule */ .ct-article .ct-btn { color: #fff; } .ct-article .ct-btn:hover { color: #fff; text-decoration: none; } .ct-article .ct-btn--outline { color: var(--ct-accent-b); } .ct-article .ct-btn--outline:hover { color: #fff; text-decoration: none; } /* ── 13. Comparison table ── */ .ct-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0 2rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); } .ct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; min-width: 520px; } .ct-table thead th { padding: 0.6rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--ct-bg-alt); color: var(--ct-muted); border-bottom: 1px solid var(--ct-border); } /* Colour the tool columns */ .ct-table thead th:nth-child(2) { color: var(--ct-accent-a); } .ct-table thead th:nth-child(3) { color: var(--ct-accent-b); } .ct-table tbody tr:nth-child(even) { background: var(--ct-bg-alt); } .ct-table tbody tr:hover { background: #eff6ff; } .ct-table th[scope="row"], .ct-table td { padding: 0.6rem 1rem; text-align: left; color: var(--ct-text); border-bottom: 1px solid var(--ct-border); white-space: normal; } .ct-table tbody tr:last-child th, .ct-table tbody tr:last-child td { border-bottom: none; } .ct-table th[scope="row"] { font-weight: 600; color: var(--ct-muted); width: 30%; } /* ── 14. Bullet lists ── */ .ct-list { margin: 0.5rem 0 1.25rem 0; padding: 0 0 0 1.25rem; } .ct-list li { font-size: 0.9375rem; line-height: 1.65; color: var(--ct-text); margin-bottom: 0.6rem; max-width: 72ch; } /* ── 15. Inline CTA link (after "Who should choose" sections) ── */ .ct-cta-link { display: inline-block; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--ct-accent-a); text-decoration: none; } .ct-cta-link:hover { text-decoration: underline; } /* ── 16. FAQ slot (empty placeholder area) ── */ .ct-faq-slot { margin-top: 0; } .ct-faq-slot__placeholder { font-size: 0.875rem; color: var(--ct-muted); font-style: italic; padding: 1rem; border: 1px dashed var(--ct-border); border-radius: var(--ct-radius); background: var(--ct-bg-alt); max-width: none; } /* ── 17. Verdict section ── */ .ct-verdict { margin-top: 2.5rem; padding-top: 0.25rem; border-top: 2px solid var(--ct-border); } .ct-verdict__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.25rem 0 1rem; } .ct-verdict__col { padding: 1.25rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: var(--ct-bg-alt); } .ct-verdict__col ul { margin: 0.5rem 0 1rem 1.25rem; padding: 0; } .ct-verdict__col li { font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.4rem; color: var(--ct-text); } .ct-verdict__label { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--ct-text); } .ct-verdict__rating { font-size: 0.875rem; color: var(--ct-muted); margin: 0.75rem 0; } /* CTA buttons */ .ct-btn { display: inline-block; padding: 0.55em 1.1em; background: var(--ct-accent-a); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: var(--ct-radius); text-decoration: none; border: 2px solid var(--ct-accent-a); cursor: pointer; } .ct-btn:hover { background: #1d4ed8; border-color: #1d4ed8; } .ct-btn--outline { background: transparent; color: var(--ct-accent-b); border-color: var(--ct-accent-b); } .ct-btn--outline:hover { background: var(--ct-accent-b); color: #fff; } /* Affiliate note */ .ct-affiliate-note { font-size: 0.8125rem; color: var(--ct-muted); font-style: italic; margin-top: 1rem; max-width: none; } /* ── 18. Sidebar ── */ .ct-sidebar { position: sticky; top: 5rem; /* below sticky header */ display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .ct-sidebar__box { padding: 1.25rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: #fff; } .ct-sidebar__title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ct-muted); margin: 0 0 0.75rem; } /* At-a-glance winners */ .ct-winners { margin: 0; padding: 0; } .ct-winners__row { padding: 0.6rem 0; border-bottom: 1px solid var(--ct-border); } .ct-winners__row:last-child { border-bottom: none; } .ct-winners dt { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ct-muted); margin-bottom: 0.2rem; } .ct-winners dd { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; } .ct-winners dd strong { font-size: 0.875rem; color: var(--ct-accent-a); } .ct-winners dd span { font-size: 0.8125rem; color: var(--ct-muted); line-height: 1.4; } /* Table of contents */ .ct-toc__list { margin: 0; padding: 0 0 0 1.1rem; list-style: decimal; } .ct-toc__list li { margin-bottom: 0.35rem; } .ct-toc__list a { font-size: 0.8125rem; color: var(--ct-muted); text-decoration: none; line-height: 1.4; } .ct-toc__list a:hover { color: var(--ct-accent-a); } /* Sidebar link lists */ .ct-sidebar__links { list-style: none; margin: 0; padding: 0; } .ct-sidebar__links li { border-bottom: 1px solid var(--ct-border); } .ct-sidebar__links li:last-child { border-bottom: none; } .ct-sidebar__links a { display: block; padding: 0.45rem 0; font-size: 0.8125rem; color: var(--ct-muted); text-decoration: none; line-height: 1.4; } .ct-sidebar__links a:hover { color: var(--ct-accent-a); } /* ── 19. Site footer ── */ .ct-footer { background: var(--ct-bg-alt); border-top: 1px solid var(--ct-border); margin-top: 3rem; padding: 2.5rem 1.5rem; } .ct-footer__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; max-width: 1200px; margin-inline: auto; align-items: start; } .ct-footer__brand p { font-size: 0.8125rem; color: var(--ct-muted); margin: 0.4rem 0 0; } .ct-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .ct-footer__nav a { font-size: 0.8125rem; color: var(--ct-muted); text-decoration: none; } .ct-footer__nav a:hover { color: var(--ct-text); } .ct-footer__legal { text-align: right; } .ct-footer__legal p { font-size: 0.8125rem; color: var(--ct-muted); margin: 0 0 0.3rem; } .ct-footer__legal a { color: var(--ct-muted); text-decoration: none; } .ct-footer__legal a:hover { color: var(--ct-text); } /* ── 20. Responsive ── */ /* Tablet: collapse sidebar below article */ @media (max-width: 900px) { .ct-layout { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 1.25rem 3rem; } .ct-sidebar { position: static; /* Show sidebar above article on mobile for quick reference */ order: -1; } /* Hide ToC on tablet — redundant when sidebar is not sticky */ .ct-toc { display: none; } .ct-verdict__grid { grid-template-columns: 1fr; } .ct-footer__inner { grid-template-columns: 1fr 1fr; } .ct-footer__legal { text-align: left; grid-column: 1 / -1; } } /* Mobile */ @media (max-width: 600px) { .ct-header__inner { padding: 0 1rem; } .ct-nav ul { gap: 1rem; } .ct-nav a { font-size: 0.8125rem; } .ct-vs-strip { gap: 0.75rem; } .ct-vs-badge { min-width: 100px; padding: 0.6rem 1rem; } .ct-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } .ct-footer__legal { grid-column: auto; } } /* ── 21. Print ── */ @media print { .ct-header, .ct-sidebar, .ct-footer, .ct-btn, .ct-cta-link, .ct-breadcrumb { display: none; } .ct-layout { display: block; padding: 0; } .ct-article a::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; } }