/* ============================================================ ATLAS GUIDE | COMPARE PAGES v6 "The Duel" /css/compare-v6.css ------------------------------------------------------------ Standalone stylesheet for every /compare/ page. Load it after global.css and header-footer.css. Compare pages no longer need country-v5.css or compare-v5.css. Prefix: cmp- Behaviour: /js/compare.js (data attributes) Per-page theming: set the two side colours on , e.g. Side A is always the first destination in the URL. The hero title sizes itself from the names (see .cmp-title). Optional caps: --cmp-title-max (default 8.25rem). Contents 0 Tokens 11 Watch lists 1 Base 12 Best-for grid 2 Hero 13 Tabs + timeline 3 Section nav 14 Verdict + picker 4 Layout 15 FAQ 5 Section heads 16 Closing + related 6 Rails 17 Sidebar 7 Scorecard 18 Third-party guard 8 Duel cards 19 Motion 9 Tables + chart 20 Responsive 10 Notes + buttons 21 RTL + accessibility ============================================================ */ /* ============================================================ 0 | TOKENS ============================================================ */ :root { --cmp-ink: var(--ag-ink, #2a2420); --cmp-ink-2: #3a332d; --cmp-muted: var(--ag-ink-mid, #5c5248); --cmp-forest: var(--ag-green-600, #2e6b4a); --cmp-deep: var(--ag-green-800, #1a3a2b); --cmp-darkest: var(--ag-green-900, #0d2118); --cmp-gold: var(--ag-gold-500, #c9a85c); --cmp-gold-soft: var(--ag-gold-400, #d9bc80); --cmp-gold-ink: var(--ag-gold-700, #8a6020); --cmp-parchment: var(--ag-parchment, #f5f0e8); --cmp-paper: #fffdf8; --cmp-cream: #fbf6ea; --cmp-line: rgba(26, 58, 43, 0.11); --cmp-line-2: rgba(26, 58, 43, 0.2); /* the two sides of the duel (override per page on ) */ --cmp-a: #2e6b4a; --cmp-b: #245a86; --cmp-shadow: 0 1px 2px rgba(26, 36, 32, 0.04), 0 10px 28px -16px rgba(26, 36, 32, 0.22); --cmp-shadow-lift: 0 2px 4px rgba(26, 36, 32, 0.05), 0 22px 44px -24px rgba(13, 33, 24, 0.42); --cmp-ease: cubic-bezier(0.16, 1, 0.3, 1); --cmp-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --cmp-header: 68px; --cmp-nav-h: 50px; --cmp-offset: calc(var(--cmp-header) + var(--cmp-nav-h) + 18px); --cmp-display: var(--font-display, 'Playfair Display', Georgia, 'Times New Roman', serif); --cmp-body: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); } /* derived side tones, recalculated from whatever --cmp-a / --cmp-b a page sets */ .cmp-page { --cmp-a-tint: color-mix(in srgb, var(--cmp-a) 10%, transparent); --cmp-b-tint: color-mix(in srgb, var(--cmp-b) 10%, transparent); --cmp-a-soft: color-mix(in srgb, var(--cmp-a) 42%, #ffffff); --cmp-b-soft: color-mix(in srgb, var(--cmp-b) 42%, #ffffff); } [data-side="a"] { --side: var(--cmp-a); --side-tint: var(--cmp-a-tint); --side-soft: var(--cmp-a-soft); } [data-side="b"] { --side: var(--cmp-b); --side-tint: var(--cmp-b-tint); --side-soft: var(--cmp-b-soft); } [data-side="both"] { --side: var(--cmp-gold-ink); --side-tint: rgba(201, 168, 92, 0.16); --side-soft: var(--cmp-gold-soft); } /* ============================================================ 1 | BASE ============================================================ */ .cmp-page { margin: 0; font-family: var(--cmp-body); font-size: 1rem; line-height: 1.7; color: var(--cmp-ink); background: var(--cmp-parchment); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cmp-page *, .cmp-page *::before, .cmp-page *::after { box-sizing: border-box; } .cmp-page img { max-width: 100%; height: auto; } main:has(> .cmp-hero, > .hub-hero), .cmp-page main { overflow-x: hidden; overflow-x: clip; } .cmp-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .cmp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* prose links inside the article and sidebar */ .cmp-article :where(p, li, td, dd, figcaption) a, .cmp-card :where(p) a { color: var(--cmp-forest); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(46, 107, 74, 0.35); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; } .cmp-article :where(p, li, td, dd, figcaption) a:hover, .cmp-card :where(p) a:hover { color: var(--cmp-deep); text-decoration-color: var(--cmp-gold); } /* ============================================================ 2 | HERO | two facing atlas plates, one seal ============================================================ */ .cmp-hero { position: relative; padding-top: var(--cmp-header); background: var(--cmp-darkest); color: var(--cmp-parchment); overflow: hidden; isolation: isolate; } .cmp-plates { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(320px, 52vh, 560px); height: clamp(320px, 52svh, 560px); } /* gold neatline around both plates, graduated scale along the top */ .cmp-plates::before { content: ""; position: absolute; z-index: 2; inset: 16px 18px 0; pointer-events: none; border: 1px solid rgba(201, 168, 92, 0.34); border-bottom: 0; background: linear-gradient(var(--cmp-gold), var(--cmp-gold)) 0 0 / 20px 2px no-repeat, linear-gradient(var(--cmp-gold), var(--cmp-gold)) 0 0 / 2px 20px no-repeat, linear-gradient(var(--cmp-gold), var(--cmp-gold)) 100% 0 / 20px 2px no-repeat, linear-gradient(var(--cmp-gold), var(--cmp-gold)) 100% 0 / 2px 20px no-repeat, repeating-linear-gradient(90deg, rgba(201, 168, 92, 0.5) 0 1px, transparent 1px 60px) 0 0 / 100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(201, 168, 92, 0.25) 0 1px, transparent 1px 12px) 0 0 / 100% 4px no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 90%); mask-image: linear-gradient(180deg, #000 50%, transparent 90%); } /* the seam where the two plates meet */ .cmp-plates::after { content: ""; position: absolute; z-index: 2; top: 16px; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background: linear-gradient(180deg, var(--cmp-gold), rgba(201, 168, 92, 0.45)); transform-origin: top; } .cmp-plate { position: relative; margin: 0; overflow: hidden; background: var(--cmp-deep); } .cmp-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 50%); filter: saturate(0.94); } .cmp-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 33, 24, 0.62) 0%, rgba(13, 33, 24, 0.08) 26%, rgba(13, 33, 24, 0.1) 48%, rgba(13, 33, 24, 0.72) 78%, var(--cmp-darkest) 100%); pointer-events: none; } /* coordinates, set like the label on an atlas plate, flanking the seam */ .cmp-plate-cap { position: absolute; z-index: 3; top: 36px; display: grid; gap: 1px; font-family: var(--cmp-display); font-style: italic; font-size: 0.9rem; line-height: 1.35; color: rgba(245, 240, 232, 0.9); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } .cmp-plate--a .cmp-plate-cap { right: 22px; text-align: right; } .cmp-plate--b .cmp-plate-cap { left: 22px; text-align: left; } .cmp-cap-geo { font-size: 0.78rem; color: rgba(245, 240, 232, 0.66); } .cmp-hero-top { position: absolute; z-index: 4; top: calc(var(--cmp-header) + 34px); left: 0; right: 0; } .cmp-crumbs { font-size: 0.8rem; color: rgba(245, 240, 232, 0.7); padding-left: 18px; } .cmp-crumbs a { color: var(--cmp-gold-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .cmp-crumbs a:hover { border-bottom-color: var(--cmp-gold-soft); } .cmp-crumbs span[aria-hidden] { margin: 0 6px; opacity: 0.6; } /* the title straddles the foot of the plates; the "vs" is the seal */ .cmp-hero-head { position: relative; z-index: 3; text-align: center; container-type: inline-size; } /* Auto-fit title. --len (longest name) and --word (longest single word) are set from the names by compare.js, or earlier by the inline snippet after the h1. The size is the largest that fits the half-width column on one line; if that would be small, multi-word names wrap onto two balanced lines at a larger size instead. Never overflows. */ .cmp-title { --len: 10; --word: 10; --col: calc(50cqi - clamp(30px, 5cqi, 64px)); --one: calc(var(--col) / (var(--len) * 0.6)); --two: calc(var(--col) / (max(var(--word), var(--len) / 2 + 1) * 0.6)); --fs: clamp(1.35rem, max(var(--one), min(var(--two), var(--cmp-title-wrap-at, 3rem))), var(--cmp-title-max, 8.25rem)); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--fs) * 0.16); margin: calc(var(--fs) * -0.78) 0 0; font-family: var(--cmp-display); font-size: var(--fs); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: #fff; } .cmp-title-name { min-width: 0; text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 8px 44px rgba(0, 0, 0, 0.5); } .cmp-title-name--a { justify-self: end; text-align: end; } .cmp-title-name--b { justify-self: start; text-align: start; } /* long names on narrow screens: stack above and below the seal */ @container (max-width: 560px) { .cmp-title[data-long] { --col: calc(100cqi - 8px); grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: calc(var(--fs) * 0.14); } .cmp-title[data-long] .cmp-title-name { justify-self: center; text-align: center; } } .cmp-title-vs { display: grid; place-items: center; width: max(48px, calc(var(--fs) * 0.6)); aspect-ratio: 1; border-radius: 50%; font-size: max(15px, calc(var(--fs) * 0.2)); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--cmp-gold-soft); background: radial-gradient(circle at 50% 30%, #24503b 0%, var(--cmp-darkest) 72%); box-shadow: 0 0 0 1px rgba(201, 168, 92, 0.8), 0 0 0 5px var(--cmp-darkest), 0 0 0 6px rgba(201, 168, 92, 0.42), 0 16px 34px -12px rgba(0, 0, 0, 0.75); } .cmp-hero-sub { margin: clamp(14px, 2.2vh, 22px) auto 6px; font-family: var(--cmp-display); font-style: italic; font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); line-height: 1.3; color: var(--cmp-gold-soft); text-wrap: balance; } .cmp-hero-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.82rem; font-weight: 600; color: rgba(245, 240, 232, 0.66); } .cmp-hero-meta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7fd49b; box-shadow: 0 0 0 3px rgba(127, 212, 155, 0.2); } .cmp-hero-brief { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 24px 44px; align-items: start; max-width: 1080px; margin: clamp(22px, 3.4vh, 36px) auto 0; text-align: left; } .cmp-hero-lede { margin: 0; font-size: 1.08rem; line-height: 1.72; color: rgba(245, 240, 232, 0.88); max-width: 56ch; } .cmp-short { position: relative; padding: 20px 22px 18px; border: 1px solid rgba(201, 168, 92, 0.3); border-radius: 18px; background: rgba(26, 58, 43, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.8); } .cmp-short::before { content: ""; position: absolute; top: -1px; left: 22px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cmp-gold); } .cmp-short-label { margin: 0 0 6px; font-family: var(--cmp-display); font-style: italic; font-size: 1.06rem; color: var(--cmp-gold-soft); } .cmp-short p:not(.cmp-short-label) { margin: 0; font-size: 0.95rem; line-height: 1.66; color: rgba(245, 240, 232, 0.92); } .cmp-short p b { color: #fff; } .cmp-short .cmp-railbox { margin-top: 16px; } /* booking strip */ .cmp-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: clamp(24px, 3.6vh, 34px) auto 0; padding: 8px 8px 8px 18px; border: 1px solid rgba(201, 168, 92, 0.28); border-radius: 18px; background: rgba(245, 240, 232, 0.04); } .cmp-hero .cmp-book { margin-bottom: clamp(30px, 5vh, 48px); } .cmp-book-label { font-family: var(--cmp-display); font-style: italic; font-size: 1rem; color: var(--cmp-gold-soft); padding-right: 14px; margin-right: 4px; border-right: 1px dashed rgba(201, 168, 92, 0.45); } .cmp-book-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; text-decoration: none; color: var(--cmp-parchment); background: rgba(245, 240, 232, 0.06); border: 1px solid rgba(245, 240, 232, 0.16); transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--cmp-ease); } .cmp-book-link:hover { background: var(--cmp-gold); border-color: var(--cmp-gold); color: var(--cmp-darkest); transform: translateY(-1px); } .cmp-book-link:active { transform: scale(0.97); } .cmp-book-link.is-primary { background: linear-gradient(135deg, #f3d596, #c9a24b); border-color: transparent; color: var(--cmp-darkest); } .cmp-book-link.is-primary:hover { filter: brightness(1.06); } /* ============================================================ 3 | SECTION NAV ============================================================ */ .cmp-nav { position: sticky; top: var(--cmp-header); z-index: 60; background: rgba(245, 240, 232, 0.9); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--cmp-line-2); } .cmp-nav-inner { display: flex; align-items: center; gap: 18px; } .cmp-nav-track { position: relative; flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .cmp-nav-track::-webkit-scrollbar { display: none; } .cmp-nav-link { position: relative; flex: none; display: block; padding: 14px 12px 13px; font-size: 0.86rem; font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--cmp-muted); text-decoration: none; transition: color 0.2s; } .cmp-nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--cmp-deep); transform: scaleX(0); transition: transform 0.35s var(--cmp-ease); } .cmp-nav-link:hover, .cmp-nav-link.is-active { color: var(--cmp-deep); } .cmp-nav-link.is-active::after { transform: scaleX(1); } .cmp-nav-link:focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: -4px; border-radius: 8px; } .cmp-nav-overall { flex: none; display: none; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600; color: var(--cmp-muted); text-decoration: none; } .cmp-nav-overall b { color: var(--cmp-a); } .cmp-nav-overall .cmp-rail { width: 72px; } /* reading-progress bar removed: the site header already shows one */ .cmp-nav-progress { display: none; } /* ============================================================ 4 | LAYOUT ============================================================ */ .cmp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-block: 40px 16px; } .cmp-article { min-width: 0; font-size: 1.0625rem; } .cmp-section { padding-block: 44px 52px; scroll-margin-top: var(--cmp-offset); border-top: 1px solid var(--cmp-line-2); } .cmp-article > .cmp-section:first-child { border-top: 0; padding-top: 12px; } .cmp-section > p { margin: 16px 0 0; max-width: 70ch; } /* ============================================================ 5 | SECTION HEADS ============================================================ */ .cmp-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: var(--cmp-display); font-style: italic; font-size: 1rem; color: var(--cmp-gold-ink); } .cmp-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--cmp-gold); } .cmp-h2 { margin: 0; max-width: 26ch; font-family: var(--cmp-display); font-size: clamp(1.8rem, 1.15rem + 2.3vw, 2.55rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.022em; color: var(--cmp-deep); text-wrap: balance; } .cmp-answer { margin: 16px 0 0; max-width: 68ch; font-size: 1.1rem; line-height: 1.72; color: var(--cmp-ink-2); } .cmp-answer strong { color: var(--cmp-deep); } .cmp-h3 { margin: 30px 0 0; font-family: var(--cmp-display); font-size: 1.32rem; font-weight: 700; line-height: 1.25; color: var(--cmp-deep); } /* round result: the verdict line under each round's heading */ .cmp-result { display: grid; grid-template-columns: minmax(0, auto) minmax(200px, 1fr); align-items: center; gap: 10px 28px; margin-top: 18px; padding: 14px 18px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 14px; box-shadow: var(--cmp-shadow); } .cmp-result-label { margin: 0; font-family: var(--cmp-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--cmp-deep); } .cmp-result[data-lean^="-"] .cmp-result-label { color: var(--cmp-a); } .cmp-result[data-lean="1"] .cmp-result-label, .cmp-result[data-lean="2"] .cmp-result-label { color: var(--cmp-b); } .cmp-result[data-lean="0"] .cmp-result-label { color: var(--cmp-gold-ink); } /* ============================================================ 6 | RAILS | one component for every verdict on the page data-lean on an ancestor: -2 strong A, -1 lean A, 0 draw, 1 lean B, 2 strong B ============================================================ */ .cmp-railbox { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; line-height: 1; } .cmp-railbox-end.is-a { color: var(--cmp-a); } .cmp-railbox-end.is-b { color: var(--cmp-b); } .cmp-rail { position: relative; display: block; height: 8px; border-radius: 999px; background: rgba(26, 58, 43, 0.1); } .cmp-rail::before { content: ""; position: absolute; inset-inline-start: 50%; top: -4px; bottom: -4px; width: 2px; margin-inline-start: -1px; border-radius: 2px; background: var(--cmp-gold); opacity: 0.8; } .cmp-rail-fill { position: absolute; top: 0; bottom: 0; inset-inline-end: 50%; width: 0; border-radius: 999px; background: var(--cmp-a); transform-origin: right center; transition: transform 1s var(--cmp-ease) calc(min(var(--i, 0), 5) * 60ms + 120ms); } [data-lean="-2"] .cmp-rail-fill { width: 50%; } [data-lean="-1"] .cmp-rail-fill { width: 26%; } [data-lean="1"] .cmp-rail-fill, [data-lean="2"] .cmp-rail-fill { inset-inline-end: auto; inset-inline-start: 50%; background: var(--cmp-b); transform-origin: left center; } [data-lean="1"] .cmp-rail-fill { width: 26%; } [data-lean="2"] .cmp-rail-fill { width: 50%; } [data-lean="0"] .cmp-rail-fill { inset-inline-end: auto; inset-inline-start: 50%; top: -3px; bottom: -3px; width: 16px; margin-inline-start: -8px; background: var(--cmp-gold); box-shadow: 0 0 0 3px rgba(201, 168, 92, 0.22); transform-origin: center; } /* on dark grounds */ .cmp-railbox--dark .cmp-rail, .cmp-card--dark .cmp-rail, .cmp-score tfoot .cmp-rail { background: rgba(245, 240, 232, 0.16); } .cmp-railbox--dark .cmp-railbox-end.is-a, .cmp-card--dark .cmp-railbox-end.is-a, .cmp-score tfoot .cmp-railbox-end.is-a { color: var(--cmp-a-soft); } .cmp-railbox--dark .cmp-railbox-end.is-b, .cmp-card--dark .cmp-railbox-end.is-b, .cmp-score tfoot .cmp-railbox-end.is-b { color: var(--cmp-b-soft); } .cmp-railbox--dark [data-lean] .cmp-rail-fill, .cmp-railbox--dark .cmp-rail-fill, .cmp-card--dark .cmp-rail-fill, .cmp-score tfoot .cmp-rail-fill { filter: brightness(1.35) saturate(0.9); } /* ============================================================ 7 | SCORECARD ============================================================ */ .cmp-score { margin-top: 26px; overflow: hidden; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 20px; box-shadow: var(--cmp-shadow); } .cmp-score table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cmp-score th, .cmp-score td { line-height: 1.35; } .cmp-score col.cmp-col-cat { width: 54%; } .cmp-score thead th { padding: 13px 20px; font-size: 0.8rem; font-weight: 600; text-align: left; color: var(--cmp-muted); background: rgba(26, 58, 43, 0.045); border-bottom: 1px solid var(--cmp-line); } .cmp-ends { display: flex; justify-content: space-between; font-weight: 700; } .cmp-ends .is-a { color: var(--cmp-a); } .cmp-ends .is-b { color: var(--cmp-b); } .cmp-score tbody th, .cmp-score tbody td, .cmp-score tfoot th, .cmp-score tfoot td { padding: 14px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cmp-line); } .cmp-score tbody tr:last-child > * { border-bottom: 0; } .cmp-score tbody tr { transition: background-color 0.2s; } .cmp-score tbody tr:hover { background: var(--cmp-cream); } .cmp-score tbody th a, .cmp-score tbody th > span:first-child { font-family: var(--cmp-display); font-size: 1.06rem; font-weight: 700; line-height: 1.3; color: var(--cmp-deep); text-decoration: none; background: linear-gradient(var(--cmp-gold), var(--cmp-gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--cmp-ease); } .cmp-score tbody th a:hover { background-size: 100% 1px; } .cmp-why { display: block; margin-top: 3px; font-size: 0.84rem; font-weight: 400; line-height: 1.45; color: var(--cmp-muted); } .cmp-score-verdict { display: block; margin-bottom: 8px; font-size: 0.86rem; font-weight: 700; line-height: 1.3; color: var(--cmp-gold-ink); } tr[data-lean^="-"] .cmp-score-verdict { color: var(--cmp-a); } tr[data-lean="1"] .cmp-score-verdict, tr[data-lean="2"] .cmp-score-verdict { color: var(--cmp-b); } .cmp-score-group th { padding: 10px 20px 8px !important; font-family: var(--cmp-display); font-style: italic; font-size: 0.95rem !important; font-weight: 400; color: var(--cmp-gold-ink) !important; background: var(--cmp-cream); } .cmp-score tfoot tr { background: radial-gradient(90% 140% at 100% 0%, rgba(201, 168, 92, 0.18), transparent 60%), linear-gradient(165deg, var(--cmp-deep), var(--cmp-darkest)); color: var(--cmp-parchment); } .cmp-score tfoot th, .cmp-score tfoot td { border-bottom: 0; padding-block: 18px; } .cmp-score tfoot th { font-family: var(--cmp-display); font-size: 1.2rem; color: #fff; } .cmp-score tfoot .cmp-why { color: rgba(245, 240, 232, 0.7); font-family: var(--cmp-body); } .cmp-score tfoot .cmp-score-verdict { color: var(--cmp-gold-soft) !important; font-size: 0.95rem; } /* ============================================================ 8 | DUEL CARDS ============================================================ */ .cmp-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .cmp-side { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 18px; box-shadow: var(--cmp-shadow); transition: opacity 0.8s ease, translate 0.9s var(--cmp-ease), transform 0.35s var(--cmp-ease), border-color 0.3s, box-shadow 0.35s; } .cmp-side:hover { transform: translateY(-3px); border-color: rgba(201, 168, 92, 0.6); box-shadow: var(--cmp-shadow-lift); } .cmp-side.is-winner { border-color: rgba(201, 168, 92, 0.55); } .cmp-side-media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cmp-deep); } .cmp-side-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--cmp-ease); } .cmp-side:hover .cmp-side-media img { transform: scale(1.045); } .cmp-side-tag { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1.4; color: #fff; background: var(--side); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); } .cmp-side-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; } .cmp-side-body h3 { margin: 0; font-family: var(--cmp-display); font-size: 1.28rem; font-weight: 700; line-height: 1.25; color: var(--cmp-deep); } .cmp-side-body p { margin: 0; font-size: 0.95rem; line-height: 1.7; } .cmp-spots { display: grid; gap: 7px; margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--cmp-line-2); font-size: 0.86rem; line-height: 1.5; } .cmp-spots div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 10px; } .cmp-spots dt { color: var(--cmp-muted); } .cmp-spots dd { margin: 0; font-weight: 600; color: var(--cmp-deep); } /* result stamp, pressed onto the plate like an ink mark */ .cmp-stamp { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; font-family: var(--cmp-display); font-style: italic; font-weight: 700; font-size: 0.82rem; line-height: 1.05; text-align: center; color: var(--cmp-deep); background: rgba(255, 253, 248, 0.92); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 5px rgba(255, 253, 248, 0.92), inset 0 0 0 6px currentColor, 0 8px 20px -10px rgba(0, 0, 0, 0.6); transform: rotate(-9deg); transition: opacity 0.3s ease 0.5s, transform 0.6s var(--cmp-spring) 0.5s; } .cmp-stamp--win { color: var(--cmp-darkest); background: var(--cmp-gold-soft); box-shadow: inset 0 0 0 2px var(--cmp-darkest), inset 0 0 0 5px var(--cmp-gold-soft), inset 0 0 0 6px var(--cmp-darkest), 0 8px 20px -10px rgba(0, 0, 0, 0.6); } .cmp-stamp--second { color: var(--cmp-muted); } .cmp-stamp--draw { color: var(--cmp-gold-ink); } /* ============================================================ 9 | TABLES + CHART ============================================================ */ .cmp-table-wrap { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 16px; box-shadow: var(--cmp-shadow); } .cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.92rem; line-height: 1.5; } .cmp-table col.cmp-col-label { width: 30%; } .cmp-table col.cmp-col-month { width: 15%; } .cmp-table col.cmp-col-pick { width: 13%; } .cmp-table th, .cmp-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cmp-line); } .cmp-table thead th { font-size: 0.82rem; font-weight: 700; color: var(--cmp-deep); background: rgba(26, 58, 43, 0.045); } .cmp-table thead th.is-a { color: var(--cmp-a); } .cmp-table thead th.is-b { color: var(--cmp-b); } .cmp-table tbody th { font-weight: 600; color: var(--cmp-muted); } .cmp-table tbody tr:last-child > * { border-bottom: 0; } .cmp-table tbody tr { transition: background-color 0.2s; } .cmp-table tbody tr:hover { background: var(--cmp-cream); } .cmp-table td.win-a, .cmp-table td.win-b { font-weight: 700; color: var(--cmp-deep); } .cmp-table td.win-a { background: var(--cmp-a-tint); box-shadow: inset 3px 0 0 var(--cmp-a); } .cmp-table td.win-b { background: var(--cmp-b-tint); box-shadow: inset 3px 0 0 var(--cmp-b); } .cmp-table tr.is-total > * { font-weight: 700; color: var(--cmp-deep); background: rgba(201, 168, 92, 0.12); border-top: 1px solid rgba(201, 168, 92, 0.4); } .cmp-table small { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 500; color: var(--cmp-muted); } .cmp-section > .cmp-table-note { margin: 10px 2px 0; max-width: none; font-size: 0.82rem; font-style: italic; color: var(--cmp-muted); } /* month ratings */ .cmp-rate { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.6; white-space: nowrap; } .cmp-rate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .cmp-rate--best { color: #1f5a3b; background: rgba(46, 107, 74, 0.13); } .cmp-rate--good { color: #7a5418; background: rgba(201, 168, 92, 0.22); } .cmp-rate--mixed { color: #5c5248; background: rgba(92, 82, 72, 0.1); } .cmp-rate--wet { color: #3f5263; background: rgba(74, 90, 106, 0.13); } .cmp-pick-a { color: var(--cmp-a); font-weight: 700; } .cmp-pick-b { color: var(--cmp-b); font-weight: 700; } .cmp-pick-both { color: var(--cmp-gold-ink); font-weight: 700; } .cmp-table tr.is-sweet > * { background: rgba(201, 168, 92, 0.1); } /* rainfall chart */ .cmp-chart { margin: 24px 0 0; padding: 20px 20px 14px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 18px; box-shadow: var(--cmp-shadow); } .cmp-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; font-size: 0.82rem; font-weight: 600; color: var(--cmp-muted); } .cmp-chart-legend span { display: inline-flex; align-items: center; gap: 7px; } .cmp-chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--side); } .cmp-chart-legend .is-sweet i { background: rgba(201, 168, 92, 0.35); border: 1px solid var(--cmp-gold); } .cmp-chart-plot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 180px; align-items: end; border-bottom: 1px solid var(--cmp-line-2); background: repeating-linear-gradient(to top, transparent 0 44px, rgba(26, 58, 43, 0.06) 44px 45px); } .cmp-bar-col { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; border-radius: 8px 8px 0 0; } .cmp-bar-col.is-sweet { background: rgba(201, 168, 92, 0.16); box-shadow: inset 0 0 0 1px rgba(201, 168, 92, 0.35); } .cmp-bar { width: min(14px, 38%); height: var(--h); border-radius: 4px 4px 0 0; background: var(--cmp-a); transform-origin: bottom; transition: transform 0.9s var(--cmp-ease) calc(var(--i, 0) * 45ms + 100ms); } .cmp-bar--b { background: var(--cmp-b); } .cmp-chart-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 8px; font-size: 0.72rem; font-weight: 600; text-align: center; color: var(--cmp-muted); } .cmp-chart-months .is-sweet { color: var(--cmp-gold-ink); font-weight: 800; } .cmp-chart figcaption { margin-top: 10px; font-size: 0.82rem; font-style: italic; color: var(--cmp-muted); } /* ============================================================ 10 | NOTES + BUTTONS ============================================================ */ .cmp-note { position: relative; margin-top: 24px; padding: 18px 22px 18px 60px; border-radius: 16px; font-size: 0.95rem; line-height: 1.68; color: rgba(245, 240, 232, 0.92); background: radial-gradient(90% 120% at 100% 0%, rgba(201, 168, 92, 0.14), transparent 60%), linear-gradient(165deg, var(--cmp-deep), var(--cmp-darkest)); box-shadow: 0 18px 40px -26px rgba(13, 33, 24, 0.75); } .cmp-note::before { content: ""; position: absolute; left: 22px; top: 21px; width: 22px; height: 22px; background: var(--cmp-gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); } .cmp-note p { margin: 0; } .cmp-note p + p { margin-top: 8px; } .cmp-note strong, .cmp-note b { color: var(--cmp-gold-soft); } .cmp-note a { color: var(--cmp-gold-soft) !important; text-decoration-color: rgba(217, 188, 128, 0.5) !important; } .cmp-note--light { color: var(--cmp-ink-2); background: var(--cmp-cream); border: 1px solid rgba(201, 168, 92, 0.4); box-shadow: none; } .cmp-note--light::before { background: var(--cmp-gold-ink); } .cmp-note--light strong, .cmp-note--light b { color: var(--cmp-deep); } .cmp-note--light a { color: var(--cmp-forest) !important; } .cmp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .cmp-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 999px; font-family: var(--cmp-body); font-size: 0.9rem; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--cmp-ease), box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s; } .cmp-btn[data-side]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--side); box-shadow: 0 0 0 3px var(--side-tint); } .cmp-btn--solid { color: var(--cmp-gold-soft); background: var(--cmp-deep); } .cmp-btn--solid[data-side]::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); background: var(--side-soft); } .cmp-btn--solid:hover { background: var(--cmp-darkest); color: #f3d596; transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(13, 33, 24, 0.75); } .cmp-btn--line { color: var(--cmp-deep); background: var(--cmp-paper); border-color: var(--cmp-line-2); } .cmp-btn--line:hover { border-color: var(--cmp-gold); transform: translateY(-2px); box-shadow: var(--cmp-shadow); } .cmp-btn:active { transform: scale(0.97); } .cmp-btn:focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: 3px; } /* ============================================================ 11 | WATCH LISTS (safety) ============================================================ */ .cmp-watch { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .cmp-watch-card { padding: 20px 22px 22px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-top: 3px solid var(--side); border-radius: 18px; box-shadow: var(--cmp-shadow); } .cmp-watch-card h3 { margin: 0 0 14px; font-family: var(--cmp-display); font-size: 1.22rem; font-weight: 700; line-height: 1.3; color: var(--cmp-deep); } .cmp-watch-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cmp-watch-card li { position: relative; padding-left: 30px; font-size: 0.93rem; line-height: 1.62; } .cmp-watch-card li::before { content: "!"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 0.7rem; font-weight: 800; line-height: 1; color: var(--side); background: var(--side-tint); } .cmp-watch-card li b { color: var(--cmp-deep); } /* ============================================================ 12 | BEST-FOR GRID ============================================================ */ .cmp-personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } .cmp-persona { position: relative; padding: 20px 18px 18px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 16px; box-shadow: var(--cmp-shadow); transition: opacity 0.7s ease, translate 0.8s var(--cmp-ease), transform 0.35s var(--cmp-ease), border-color 0.3s, box-shadow 0.35s; transition-delay: calc(min(var(--i, 0), 2) * 70ms), calc(min(var(--i, 0), 2) * 70ms), 0s, 0s, 0s; } .cmp-persona::before { content: ""; position: absolute; top: -1px; left: 18px; width: 38px; height: 3px; border-radius: 0 0 3px 3px; background: var(--side); } .cmp-persona:hover { transform: translateY(-2px); border-color: rgba(201, 168, 92, 0.55); box-shadow: var(--cmp-shadow-lift); } .cmp-persona h3 { margin: 0; font-family: var(--cmp-display); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--cmp-deep); } .cmp-persona-pick { display: inline-flex; margin: 8px 0 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.6; color: var(--side); background: var(--side-tint); } .cmp-persona p:not(.cmp-persona-pick) { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--cmp-ink-2); } /* ============================================================ 13 | TABS + TIMELINE ============================================================ */ .cmp-tabs { margin-top: 24px; } .cmp-tablist { position: relative; display: inline-flex; gap: 4px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--cmp-line); border-radius: 14px; background: rgba(26, 58, 43, 0.05); } .cmp-tablist::-webkit-scrollbar { display: none; } .cmp-tab { position: relative; z-index: 1; flex: none; appearance: none; margin: 0; padding: 10px 16px; border: 0; border-radius: 10px; font-family: var(--cmp-body); font-size: 0.9rem; font-weight: 600; white-space: nowrap; color: var(--cmp-muted); background: transparent; cursor: pointer; transition: color 0.25s, background-color 0.25s; } .cmp-tab:hover { color: var(--cmp-deep); } .cmp-tab[aria-selected="true"] { color: var(--cmp-gold-soft); background: var(--cmp-deep); } .cmp-tablist.has-ind .cmp-tab[aria-selected="true"] { background: transparent; } .cmp-tab:focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: 2px; } .cmp-tab-ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 10px; background: var(--cmp-deep); box-shadow: 0 6px 14px -8px rgba(13, 33, 24, 0.7); transition: transform 0.45s var(--cmp-ease), width 0.45s var(--cmp-ease); } .cmp-tabpanel { margin-top: 16px; padding: 24px 26px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 20px; box-shadow: var(--cmp-shadow); } .cmp-tabpanel[hidden] { display: none; } .cmp-panel-title { margin: 0 0 16px; font-family: var(--cmp-display); font-size: 1.2rem; color: var(--cmp-deep); } .cmp-tabs.is-enhanced .cmp-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cmp-tabpanel.is-entering { animation: cmp-panel 0.45s var(--cmp-ease); } .cmp-timeline { list-style: none; margin: 0; padding: 0; } .cmp-timeline li { position: relative; margin-left: 8px; padding: 0 0 22px 30px; } .cmp-timeline li::after { content: ""; position: absolute; left: 0; top: 12px; bottom: -6px; width: 2px; background: repeating-linear-gradient(180deg, rgba(201, 168, 92, 0.65) 0 5px, transparent 5px 10px); } .cmp-timeline li:last-child { padding-bottom: 0; } .cmp-timeline li:last-child::after { content: none; } .cmp-timeline li::before { content: ""; position: absolute; z-index: 1; left: -6px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--cmp-paper); border: 3px solid var(--side, var(--cmp-forest)); box-shadow: 0 0 0 4px var(--side-tint, rgba(46, 107, 74, 0.1)); } .cmp-tl-when { font-family: var(--cmp-display); font-style: italic; font-weight: 700; font-size: 1rem; color: var(--cmp-gold-ink); } .cmp-timeline p { margin: 3px 0 0; font-size: 0.94rem; line-height: 1.68; } /* ============================================================ 14 | VERDICT + PICKER ============================================================ */ .cmp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .cmp-verdict-card { position: relative; padding: 24px 24px 22px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-top: 4px solid var(--side); border-radius: 20px; box-shadow: var(--cmp-shadow); } .cmp-verdict-card.is-overall { color: rgba(245, 240, 232, 0.9); background: radial-gradient(100% 80% at 100% 0%, rgba(201, 168, 92, 0.18), transparent 60%), linear-gradient(165deg, var(--cmp-deep), var(--cmp-darkest)); border-color: rgba(201, 168, 92, 0.35); border-top-color: var(--cmp-gold); } .cmp-verdict-for { margin: 0 0 2px; font-family: var(--cmp-display); font-style: italic; font-size: 0.98rem; color: var(--cmp-gold-ink); } .cmp-verdict-card.is-overall .cmp-verdict-for { color: var(--cmp-gold-soft); } .cmp-verdict-card h3 { margin: 0 0 8px; font-family: var(--cmp-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--cmp-deep); } .cmp-verdict-card.is-overall h3 { color: #fff; } .cmp-verdict-card > p { margin: 0; font-size: 0.94rem; line-height: 1.65; } .cmp-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .cmp-checks li { position: relative; padding-left: 28px; font-size: 0.93rem; line-height: 1.55; } .cmp-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--side-tint); } .cmp-checks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 9px; border: solid var(--side); border-width: 0 2px 2px 0; transform: rotate(45deg); } .cmp-verdict-card.is-overall .cmp-checks li::before { background: rgba(245, 240, 232, 0.12); } .cmp-verdict-card.is-overall .cmp-checks li::after { border-color: var(--cmp-gold-soft); } .cmp-picker { margin-top: 28px; padding: 26px 26px 24px; scroll-margin-top: var(--cmp-offset); background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 22px; box-shadow: var(--cmp-shadow); } .cmp-picker[hidden] { display: none; } .cmp-picker h3 { margin: 0; font-family: var(--cmp-display); font-size: 1.4rem; font-weight: 700; color: var(--cmp-deep); } .cmp-picker-hint { margin: 6px 0 0; font-size: 0.93rem; color: var(--cmp-muted); } .cmp-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .cmp-pick { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; margin: 0; padding: 8px 15px 8px 11px; appearance: none; border: 1px solid var(--cmp-line-2); border-radius: 999px; font-family: var(--cmp-body); font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--cmp-deep); background: var(--cmp-parchment); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--cmp-ease); } .cmp-pick::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cmp-line-2); background: var(--cmp-paper) no-repeat center / 11px 11px; transition: background-color 0.2s, border-color 0.2s, transform 0.35s var(--cmp-spring); } .cmp-pick:hover { border-color: var(--cmp-gold); } .cmp-pick:active { transform: scale(0.96); } .cmp-pick[aria-pressed="true"] { color: var(--cmp-parchment); background: var(--cmp-deep); border-color: var(--cmp-deep); } .cmp-pick[aria-pressed="true"]::before { border-color: var(--cmp-gold); background-color: var(--cmp-gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%230d2118' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: scale(1.08); } .cmp-pick:focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: 2px; } .cmp-picker-out { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--cmp-line-2); } .cmp-meter-ends { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; } .cmp-meter-ends .is-a { color: var(--cmp-a); } .cmp-meter-ends .is-b { color: var(--cmp-b); } .cmp-meter { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cmp-a-tint), rgba(26, 58, 43, 0.07) 50%, var(--cmp-b-tint)); box-shadow: inset 0 0 0 1px var(--cmp-line); } .cmp-meter::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--cmp-gold); opacity: 0.7; } .cmp-meter-slide { position: absolute; inset: 0; transform: translateX(calc(var(--pos, 0) * 48%)); transition: transform 0.75s var(--cmp-spring); } .cmp-meter-needle { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--cmp-gold); border: 3px solid var(--cmp-paper); box-shadow: 0 0 0 1px rgba(138, 96, 32, 0.45), 0 4px 12px rgba(13, 33, 24, 0.28); } .cmp-picker-result { margin: 16px 0 0; font-family: var(--cmp-display); font-size: 1.22rem; font-weight: 700; line-height: 1.35; color: var(--cmp-deep); } .cmp-picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; } .cmp-picker-actions .cmp-btn[hidden] { display: none; } .cmp-linkbtn { appearance: none; padding: 6px 2px; border: 0; background: none; font-family: var(--cmp-body); font-size: 0.86rem; font-weight: 600; color: var(--cmp-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cmp-linkbtn:hover { color: var(--cmp-deep); } .cmp-linkbtn[hidden] { display: none; } /* ============================================================ 15 | FAQ ============================================================ */ .cmp-faq-list { display: grid; gap: 10px; margin-top: 22px; } .cmp-acc { overflow: hidden; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.25s; } .cmp-acc[open] { border-color: var(--cmp-line-2); box-shadow: var(--cmp-shadow); } .cmp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px 15px 20px; list-style: none; cursor: pointer; transition: background-color 0.2s; } .cmp-acc summary::-webkit-details-marker { display: none; } .cmp-acc summary:hover { background: var(--cmp-cream); } .cmp-acc summary:focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: -2px; } .cmp-acc-q { margin: 0; font-family: var(--cmp-body); font-size: 0.99rem; font-weight: 700; line-height: 1.4; color: var(--cmp-deep); } .cmp-acc summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cmp-line-2); font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--cmp-deep); transition: transform 0.35s var(--cmp-ease), background-color 0.2s, border-color 0.2s, color 0.2s; } .cmp-acc summary:hover::after { border-color: var(--cmp-gold); } .cmp-acc[open] summary::after { transform: rotate(45deg); background: var(--cmp-deep); border-color: var(--cmp-deep); color: var(--cmp-gold-soft); } .cmp-acc[open] > summary { border-bottom: 1px dashed var(--cmp-line-2); } .cmp-acc-body { padding: 16px 20px 20px; } .cmp-acc-body p { margin: 0; font-size: 0.96rem; line-height: 1.7; } .cmp-acc-anim { overflow: hidden; } /* ============================================================ 16 | CLOSING + RELATED ============================================================ */ .cmp-closing { position: relative; margin: 12px 0 0; padding: 44px 44px 40px; overflow: hidden; border-radius: 24px; color: rgba(245, 240, 232, 0.9); background: radial-gradient(90% 90% at 100% 0%, rgba(201, 168, 92, 0.16), transparent 60%), linear-gradient(160deg, var(--cmp-deep), var(--cmp-darkest)); } .cmp-closing::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201, 168, 92, 0.28); border-radius: 14px; pointer-events: none; } .cmp-closing .cmp-h2 { color: #fff; } .cmp-closing p { position: relative; margin: 14px 0 0; max-width: 62ch; font-family: var(--cmp-display); font-size: 1.12rem; line-height: 1.75; } .cmp-closing .cmp-cta-row { position: relative; } .cmp-related { padding: 40px 0 64px; } .cmp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 18px; } .cmp-related-grid a { display: grid; gap: 2px; padding: 15px 18px; text-decoration: none; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 14px; box-shadow: var(--cmp-shadow); transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.3s var(--cmp-ease); } .cmp-related-kind { font-size: 0.76rem; font-weight: 600; color: var(--cmp-muted); transition: color 0.25s; } .cmp-related-name { font-family: var(--cmp-display); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--cmp-deep); transition: color 0.25s; } .cmp-related-grid a:hover { background: var(--cmp-deep); border-color: var(--cmp-deep); transform: translateY(-2px); } .cmp-related-grid a:hover .cmp-related-name { color: #fff; } .cmp-related-grid a:hover .cmp-related-kind { color: var(--cmp-gold-soft); } /* ============================================================ 17 | SIDEBAR ============================================================ */ .cmp-aside { min-width: 0; } .cmp-aside-inner { position: sticky; top: var(--cmp-offset); display: grid; gap: 14px; max-height: calc(100vh - var(--cmp-offset) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .cmp-aside-inner::-webkit-scrollbar { display: none; } .cmp-card { padding: 18px 18px 16px; background: var(--cmp-paper); border: 1px solid var(--cmp-line); border-radius: 16px; box-shadow: var(--cmp-shadow); } .cmp-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--cmp-display); font-size: 1.08rem; font-weight: 700; color: var(--cmp-deep); } .cmp-card-title::after { content: ""; flex: 1; height: 1px; background: var(--cmp-line-2); } .cmp-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; } .cmp-card--dark { color: rgba(245, 240, 232, 0.88); background: radial-gradient(120% 80% at 100% 0%, rgba(201, 168, 92, 0.16), transparent 60%), linear-gradient(165deg, var(--cmp-deep), var(--cmp-darkest)); border-color: rgba(201, 168, 92, 0.3); } .cmp-card--dark .cmp-card-title { color: #fff; } .cmp-card--dark .cmp-card-title::after { background: rgba(201, 168, 92, 0.35); } .cmp-card-verdict { display: block; margin-bottom: 12px; font-family: var(--cmp-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--cmp-gold-soft); } .cmp-card--dark .cmp-railbox { margin-bottom: 14px; } .cmp-card--dark a { color: var(--cmp-gold-soft) !important; } .cmp-linklist { display: grid; gap: 6px; } .cmp-linklist a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.87rem; font-weight: 600; line-height: 1.35; text-decoration: none; color: var(--cmp-deep); background: var(--cmp-parchment); border: 1px solid var(--cmp-line); border-radius: 10px; transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--cmp-ease); } .cmp-linklist a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--side, var(--cmp-gold)); } .cmp-linklist a:hover { border-color: var(--cmp-gold); background: var(--cmp-paper); transform: translateX(2px); } /* ============================================================ 18 | THIRD-PARTY GUARD Emerald / Stay22 widgets that land inside a grid span the full row instead of squeezing into a column. ============================================================ */ .cmp-duel > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-watch > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-personas > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-verdict > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-hero-brief > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-related-grid > :not([class^="cmp-"]):not([class*=" cmp-"]), .cmp-layout > :not([class^="cmp-"]):not([class*=" cmp-"]) { grid-column: 1 / -1; max-width: 100%; } /* ============================================================ 19 | MOTION The hero is the one choreographed load moment. Everything else moves because it carries meaning: rails fill towards the winner, stamps land on the result, duel cards arrive from their own side, rainfall bars rise month by month. compare.js adds .cmp-motion to only when motion is allowed, and marks anything already on screen as shown, so nothing is ever hidden without JS. ============================================================ */ @keyframes cmp-plate-a { from { clip-path: inset(0 0 0 36%); } to { clip-path: inset(0 0 0 0); } } @keyframes cmp-plate-b { from { clip-path: inset(0 36% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes cmp-settle { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes cmp-seam { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes cmp-seal { from { opacity: 0; transform: scale(0.4) rotate(-110deg); } to { opacity: 1; transform: none; } } @keyframes cmp-from-a { from { transform: translateX(-0.32em); } to { transform: none; } } @keyframes cmp-from-b { from { transform: translateX(0.32em); } to { transform: none; } } @keyframes cmp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmp-grow { from { transform: scaleX(0); } } @keyframes cmp-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cmp-plate--a { animation: cmp-plate-a 1.2s var(--cmp-ease) both; } .cmp-plate--b { animation: cmp-plate-b 1.2s var(--cmp-ease) both; } .cmp-plate img { animation: cmp-settle 2.2s var(--cmp-ease) both; } .cmp-plates::before { animation: cmp-fade 1s ease 0.4s both; } .cmp-plates::after { animation: cmp-seam 1s var(--cmp-ease) 0.2s both; } .cmp-plate-cap, .cmp-hero-top { animation: cmp-fade 0.8s ease 0.6s both; } .cmp-title-vs { animation: cmp-seal 0.8s var(--cmp-spring) 0.35s both; } .cmp-title-name--a { animation: cmp-from-a 1s var(--cmp-ease) 0.15s both; } .cmp-title-name--b { animation: cmp-from-b 1s var(--cmp-ease) 0.15s both; } .cmp-hero-sub { animation: cmp-rise 0.7s var(--cmp-ease) 0.55s both; } .cmp-hero-meta { animation: cmp-rise 0.7s var(--cmp-ease) 0.62s both; } .cmp-hero-lede { animation: cmp-rise 0.7s var(--cmp-ease) 0.72s both; } .cmp-short { animation: cmp-rise 0.7s var(--cmp-ease) 0.8s both; } .cmp-hero .cmp-book { animation: cmp-rise 0.7s var(--cmp-ease) 0.9s both; } .cmp-short .cmp-rail-fill { animation: cmp-grow 1.1s var(--cmp-ease) 1.15s both; } /* scroll-driven states (only with .cmp-motion on ) */ .cmp-motion [data-reveal]:not(.is-in) .cmp-rail-fill { transform: scaleX(0); } .cmp-motion [data-reveal]:not(.is-in) .cmp-stamp { opacity: 0; transform: scale(1.6) rotate(-24deg); } .cmp-motion .cmp-side[data-reveal][data-side="a"]:not(.is-in) { opacity: 0; translate: -28px 0; } .cmp-motion .cmp-side[data-reveal][data-side="b"]:not(.is-in) { opacity: 0; translate: 28px 0; } .cmp-motion .cmp-persona[data-reveal]:not(.is-in) { opacity: 0; translate: 0 16px; } .cmp-motion [data-reveal]:not(.is-in) .cmp-bar { transform: scaleY(0); } .cmp-duel > .cmp-side[data-side="b"] { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; } /* phones: cards are stacked, so they rise into place instead of sliding in from the sides (a sideways offset would widen the page) */ @media (max-width: 760px) { .cmp-motion .cmp-side[data-reveal][data-side="a"]:not(.is-in), .cmp-motion .cmp-side[data-reveal][data-side="b"]:not(.is-in), [dir="rtl"] .cmp-motion .cmp-side[data-reveal][data-side="a"]:not(.is-in), [dir="rtl"] .cmp-motion .cmp-side[data-reveal][data-side="b"]:not(.is-in) { translate: 0 18px; } } /* generic fade-up for any future element: data-reveal="fade" */ :where([data-reveal~="fade"]) { transition: opacity 0.7s ease, translate 0.8s var(--cmp-ease); } .cmp-motion [data-reveal~="fade"]:not(.is-in) { opacity: 0; translate: 0 16px; } /* ============================================================ 20 | RESPONSIVE ============================================================ */ @media (min-width: 1100px) { .cmp-nav-overall { display: inline-flex; } } @media (max-width: 1100px) { .cmp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .cmp-aside { margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--cmp-line-2); } .cmp-aside-inner { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; } } @media (max-width: 900px) { .cmp-hero-brief { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .cmp-hero-brief .cmp-short { order: -1; } .cmp-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .cmp-plates { height: clamp(250px, 70vw, 440px); } .cmp-plates::before { display: none; } .cmp-plates::after { top: 0; } .cmp-plate-cap { display: none; } .cmp-hero-top { top: calc(var(--cmp-header) + 14px); } .cmp-crumbs { padding-left: 0; font-size: 0.76rem; } .cmp-duel, .cmp-watch, .cmp-verdict { grid-template-columns: minmax(0, 1fr); } .cmp-result { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cmp-section { padding-block: 36px 42px; } .cmp-closing { padding: 34px 24px 30px; } } @media (max-width: 600px) { .cmp-article { font-size: 1rem; } .cmp-answer { font-size: 1.04rem; } .cmp-personas { grid-template-columns: minmax(0, 1fr); } .cmp-book { flex-wrap: nowrap; justify-content: flex-start; width: auto; overflow-x: auto; scrollbar-width: none; padding: 8px 8px 8px 14px; border-radius: 16px; } .cmp-book::-webkit-scrollbar { display: none; } .cmp-book > * { flex: none; } .cmp-short { padding: 18px 18px 16px; } .cmp-score thead th, .cmp-score tbody th, .cmp-score tbody td, .cmp-score tfoot th, .cmp-score tfoot td { padding-inline: 14px; } .cmp-score col.cmp-col-cat { width: 50%; } .cmp-why { font-size: 0.8rem; } .cmp-table th, .cmp-table td { padding: 10px 11px; } .cmp-table { font-size: 0.86rem; } .cmp-table col.cmp-col-label { width: 31%; } .cmp-table col.cmp-col-month { width: 25%; } .cmp-table col.cmp-col-pick { width: 17%; } .cmp-table--months th, .cmp-table--months td { padding-inline: 8px; } .cmp-table--months tbody th { font-size: 0.8rem; } .cmp-chart { padding: 16px 12px 12px; } .cmp-chart-plot { height: 150px; gap: 2px; } .cmp-chart-months { gap: 2px; font-size: 0.66rem; } .cmp-bar { width: min(10px, 40%); } .cmp-bar-col { gap: 2px; } .cmp-tablist { display: flex; width: 100%; } .cmp-tab { flex: 1 0 auto; padding: 10px 12px; } .cmp-tabpanel { padding: 20px 16px; border-radius: 16px; } .cmp-picker { padding: 22px 18px 20px; } .cmp-note { padding: 54px 18px 18px; } .cmp-note::before { top: 20px; left: 18px; } .cmp-stamp { width: 62px; height: 62px; font-size: 0.76rem; } .cmp-related-grid { grid-template-columns: 1fr 1fr; } .cmp-nav-link { padding-inline: 11px; } } /* ============================================================ 21 | RTL + ACCESSIBILITY ============================================================ */ [dir="rtl"] .cmp-plate--a { animation-name: cmp-plate-b; } [dir="rtl"] .cmp-plate--b { animation-name: cmp-plate-a; } [dir="rtl"] .cmp-title-name--a { animation-name: cmp-from-b; } [dir="rtl"] .cmp-title-name--b { animation-name: cmp-from-a; } [dir="rtl"] .cmp-rail-fill { transform-origin: left center; } [dir="rtl"] [data-lean="1"] .cmp-rail-fill, [dir="rtl"] [data-lean="2"] .cmp-rail-fill { transform-origin: right center; } [dir="rtl"] .cmp-plate--a .cmp-plate-cap { right: auto; left: 22px; text-align: left; } [dir="rtl"] .cmp-plate--b .cmp-plate-cap { left: auto; right: 22px; text-align: right; } [dir="rtl"] .cmp-crumbs { padding-left: 0; padding-right: 18px; } [dir="rtl"] .cmp-hero-brief { text-align: right; } [dir="rtl"] .cmp-motion .cmp-side[data-reveal][data-side="a"]:not(.is-in) { translate: 28px 0; } [dir="rtl"] .cmp-motion .cmp-side[data-reveal][data-side="b"]:not(.is-in) { translate: -28px 0; } .cmp-page :focus-visible { outline: 2px solid var(--cmp-gold); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { .cmp-page *, .cmp-page *::before, .cmp-page *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* ============================================================ ADDENDUM | duel cards without a photo ============================================================ */ .cmp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 0; } .cmp-side-head .cmp-side-tag { position: static; box-shadow: none; } .cmp-side-head .cmp-stamp { position: static; width: auto; height: auto; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; box-shadow: inset 0 0 0 1.5px currentColor; transform: none; } .cmp-side-head .cmp-stamp--win { box-shadow: none; } .cmp-motion [data-reveal]:not(.is-in) .cmp-side-head .cmp-stamp { transform: scale(1.3); } .cmp-side-head + .cmp-side-body { padding-top: 14px; } /* ============================================================ ADDENDUM | overall draw, pros and cons lists ============================================================ */ .cmp-nav-overall[data-lean="0"] b, .cmp-card--dark[data-lean="0"] .cmp-card-verdict { color: var(--cmp-gold-soft); } .cmp-nav-overall[data-lean="0"] b { color: var(--cmp-gold-ink); } .cmp-list-head, .cmp-verdict-card > .cmp-list-head { margin: 20px 0 0; font-family: var(--cmp-display); font-style: italic; font-size: 1rem; color: var(--cmp-gold-ink); } .cmp-list-head + .cmp-checks { margin-top: 10px; } .cmp-checks--minus li::before { background: rgba(92, 82, 72, 0.1); } .cmp-checks--minus li::after { content: "\00d7"; left: 0; top: 3px; width: 18px; height: 18px; border: 0; transform: none; font-size: 0.95rem; font-weight: 800; line-height: 18px; text-align: center; color: var(--cmp-muted); }