/* CG Rankings — front-end styles. All colours are CSS variables so Elementor style controls / theme can override. */ .cgr { --cgr-ink: #1A0A3C; --cgr-muted: #8A84A3; --cgr-accent: #6C47FF; --cgr-accent2: #4A28CC; --cgr-ring-a: #1A0A3C; --cgr-ring-b: #7B5CFF; --cgr-track: #ECE8FB; --cgr-cta: #FF6B6B; --cgr-card: #FFFFFF; --cgr-top-bg: #F8F6FF; --cgr-border: #E6E3F0; --cgr-chip: #EEE9FF; --cgr-chip-text: var(--cgr-accent2); --cgr-pay-bg: #FFFFFF; --cgr-pay-text: var(--cgr-ink); --cgr-pay-border: var(--cgr-border); --cgr-bad-bg: #FDECEC; --cgr-bad-text: #C4322F; --cgr-cta-text: #FFFFFF; --cgr-cta-hover: var(--cgr-cta); --cgr-cta-hover-text: var(--cgr-cta-text); --cgr-primary: var(--cgr-accent); --cgr-primary-text: #FFFFFF; --cgr-primary-hover: var(--cgr-accent2); --cgr-primary-hover-text: #FFFFFF; --cgr-ghost-bg: #FFFFFF; --cgr-ghost-text: var(--cgr-ink); --cgr-ghost-border: var(--cgr-border); --cgr-ghost-hover-border: var(--cgr-ink); --cgr-pill-bg: #FFFFFF; --cgr-pill-text: var(--cgr-ink); --cgr-pill-border: var(--cgr-border); --cgr-pill-active-bg: var(--cgr-ink); --cgr-pill-active-text: #FFFFFF; --cgr-rank: var(--cgr-muted); --cgr-rank-top: var(--cgr-accent); --cgr-star: #FF6B6B; --cgr-star-empty: #E3DEF5; --cgr-side-bg: #FFFFFF; --cgr-side-border: var(--cgr-border); --cgr-heading: var(--cgr-ink); --cgr-label: var(--cgr-muted); --cgr-text: #5B5670; --cgr-radius: 16px; --cgr-gap: 12px; --cgr-ring: 76px; color: var(--cgr-ink); font-size: 14px; line-height: 1.4; box-sizing: border-box; } .cgr *, .cgr *::before, .cgr *::after { box-sizing: inherit; } .cgr [hidden] { display: none !important; } .cgr .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .cgr-empty { padding: 16px; border: 1px dashed #c3c4c7; color: #646970; font-size: 13px; } /* ---------- toolbar / filters ---------- */ .cgr-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .cgr-filters { display: flex; flex-wrap: wrap; gap: 8px; } .cgr-pill { appearance: none; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cgr-pill-border); background: var(--cgr-pill-bg); color: var(--cgr-pill-text); transition: background .15s, color .15s, border-color .15s; } .cgr-pill:hover { border-color: var(--cgr-accent); } .cgr-pill.is-active { background: var(--cgr-pill-active-bg); border-color: var(--cgr-pill-active-bg); color: var(--cgr-pill-active-text); } .cgr-pill:focus-visible, .cgr-btn:focus-visible, .cgr-more__btn:focus-visible, .cgr-arrow:focus-visible, .cgr-dot:focus-visible, .cgr-playpause:focus-visible { outline: 2px solid var(--cgr-accent); outline-offset: 2px; } .cgr-sorted { text-align: right; font-size: 12px; color: var(--cgr-muted); white-space: nowrap; display: flex; flex-direction: column; } .cgr-sorted a, .cgr-sorted strong { color: var(--cgr-accent2); font-weight: 600; text-decoration: none; } /* ---------- shared atoms ---------- */ .cgr-rank { font-weight: 700; font-size: 18px; color: var(--cgr-rank); font-variant-numeric: tabular-nums; } /* Rank ↔ logo spacing: one setting (--cgr-rank-gap) gives the same visible gap in every layout. Each layout declares its own column gap in --_cg; the rank adds whatever is missing on top of it. */ .cgr-rank, .cgr-drow__rank { --_rg: var(--cgr-rank-gap, 22px); min-width: 2ch; flex: 0 0 auto; margin-right: max(0px, calc(var(--_rg) - var(--_cg, 0px))); } .cgr-logo { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; } .cgr-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .cgr-logo__fallback { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 12px; background: var(--cgr-chip); color: var(--cgr-accent2); font-weight: 700; } .cgr-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cgr-ink); } .cgr-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cgr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1; padding: 5px 8px; border: 1px solid var(--cgr-pay-border); border-radius: 6px; background: var(--cgr-pay-bg); color: var(--cgr-pay-text); white-space: nowrap; text-decoration: none; } .cgr-chip--license { background: var(--cgr-chip); border-color: transparent; color: var(--cgr-chip-text); font-weight: 700; border-radius: 999px; padding: 5px 10px; letter-spacing: .02em; } a.cgr-chip--license:hover { background: var(--cgr-accent); color: #fff; } .cgr-chip--badge { background: var(--cgr-ink); color: #fff; border-color: var(--cgr-ink); } .cgr-tagline { margin: 4px 0 0; font-size: 13px; color: var(--cgr-text); } .cgr-chip--bad { background: var(--cgr-bad-bg); border-color: transparent; color: var(--cgr-bad-text); font-weight: 700; border-radius: 999px; padding: 5px 10px; } /* sub-scores: value above label */ .cgr-subs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; } .cgr-sub { display: flex; flex-direction: column-reverse; margin: 0; } .cgr-sub dd { margin: 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .cgr-sub dt { margin: 0; font-size: 12px; color: var(--cgr-muted); } /* score ring */ .cgr-score { flex: 0 0 auto; } .cgr-ring { position: relative; width: var(--cgr-ring); height: var(--cgr-ring); } .cgr-ring svg { width: 100%; height: 100%; display: block; } .cgr-ring__track { fill: none; stroke: var(--cgr-track); stroke-width: 9; } .cgr-ring__bar { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dashoffset: var(--cgr-off); transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); } .cgr.cgr-anim .cgr-ring:not(.is-in) .cgr-ring__bar { stroke-dashoffset: var(--cgr-c); } .cgr-ring__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .cgr-ring__txt b { font-size: calc(var(--cgr-ring) * .29); font-weight: 800; color: var(--cgr-ink); letter-spacing: -.02em; } .cgr-ring__txt small { font-size: calc(var(--cgr-ring) * .13); color: var(--cgr-muted); margin-top: 2px; } /* buttons */ .cgr-actions { display: flex; gap: 8px; flex: 0 0 auto; } .cgr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; } .cgr-btn--ghost { background: var(--cgr-ghost-bg); color: var(--cgr-ghost-text); border: 1px solid var(--cgr-ghost-border); } .cgr-btn--ghost:hover { border-color: var(--cgr-ghost-hover-border); color: var(--cgr-ghost-text); } .cgr-btn--cta { background: var(--cgr-cta); color: var(--cgr-cta-text); border: 1px solid var(--cgr-cta); } .cgr-btn--cta:hover { background: var(--cgr-cta-hover); border-color: var(--cgr-cta-hover); color: var(--cgr-cta-hover-text); transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--cgr-cta); } .cgr-btn--primary { background: var(--cgr-primary); color: var(--cgr-primary-text); border: 1px solid var(--cgr-primary); cursor: pointer; font: inherit; font-weight: 600; } .cgr-btn--primary:hover { background: var(--cgr-primary-hover); border-color: var(--cgr-primary-hover); color: var(--cgr-primary-hover-text); } /* Keep button text colours when the theme / Elementor Site Settings style all links (e.g. ".elementor-kit-5 a"). */ .cgr a.cgr-btn--ghost, .cgr a.cgr-btn--ghost:visited, .cgr a.cgr-btn--ghost:focus { color: var(--cgr-ghost-text); } .cgr a.cgr-btn--ghost:hover { color: var(--cgr-ghost-text); } .cgr a.cgr-btn--cta, .cgr a.cgr-btn--cta:visited, .cgr a.cgr-btn--cta:focus { color: var(--cgr-cta-text); } .cgr a.cgr-btn--cta:hover { color: var(--cgr-cta-hover-text); } .cgr a.cgr-btn--primary, .cgr a.cgr-btn--primary:visited, .cgr a.cgr-btn--primary:focus { color: var(--cgr-primary-text); } .cgr a.cgr-btn--primary:hover { color: var(--cgr-primary-hover-text); } .cgr .cgr-dir__item.is-lead a.cgr-drow__review, .cgr .cgr-dir__item.is-lead a.cgr-drow__review:visited { color: var(--cgr-primary-text); } .cgr .cgr-dir__item.is-lead a.cgr-drow__review:hover { color: var(--cgr-primary-hover-text); } /* ---------- LIST layout ---------- */ .cgr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cgr-gap); } .cgr-item { background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: var(--cgr-radius); overflow: hidden; margin: 0; } .cgr-item--top { border-color: var(--cgr-accent); } .cgr-item--top .cgr-row { background: var(--cgr-top-bg); } .cgr-item--top .cgr-rank { color: var(--cgr-rank-top); } .cgr-toppick { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(90deg, var(--cgr-toppick-a, var(--cgr-accent2)), var(--cgr-toppick-b, var(--cgr-accent))); color: var(--cgr-toppick-text, #fff); font-weight: 700; font-size: 14px; } .cgr-toppick__icon { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; } .cgr-toppick__icon--default { display: grid; place-items: center; background: var(--cgr-cta); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: -.02em; } .cgr-row { display: flex; align-items: center; gap: 14px; --_cg: 14px; padding: 16px 18px; --cgr-ring: 72px; } .cgr-row .cgr-logo { width: 52px; height: 52px; } .cgr-row .cgr-logo { border: 1px solid var(--cgr-border); border-radius: 12px; padding: 6px; background: #fff; } .cgr-body { flex: 1 1 auto; min-width: 0; } .cgr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .cgr-more { text-align: center; margin-top: 24px; } .cgr-more__btn { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--cgr-border); background: #fff; color: var(--cgr-ink); text-decoration: none; } .cgr-more__btn:hover { border-color: var(--cgr-ink); color: var(--cgr-ink); } /* ---------- GRID / compact card ---------- */ .cgr-grid { display: grid; grid-template-columns: repeat(var(--cgr-cols), minmax(0, 1fr)); gap: calc(var(--cgr-gap) * 2); } .cgr-card { position: relative; display: flex; align-items: center; gap: 18px; --_cg: 18px; padding: 22px 26px; height: 100%; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 4px); box-shadow: 0 6px 18px -8px rgba(26, 10, 60, .35); } .cgr-card .cgr-rank { font-size: 20px; } .cgr-card .cgr-name { font-size: 28px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; } .cgr-card .cgr-chip { font-size: 13px; padding: 8px 12px; } .cgr-card .cgr-chip--license { padding: 8px 14px; } .cgr-card .cgr-score { margin-left: auto; } .cgr-card { --cgr-ring: 92px; } .cgr-card .cgr-actions { position: absolute; right: 26px; bottom: 16px; } .cgr-card:has(.cgr-actions) { padding-bottom: 68px; } /* ---------- CAROUSEL ---------- */ .cgr-carousel { position: relative; } .cgr-viewport { overflow: hidden; padding: 8px 0 18px 6px; margin: -8px calc(var(--cgr-gap) * -1) -18px -6px; touch-action: pan-y; } .cgr-track { display: flex; transition: transform .55s cubic-bezier(.22,1,.36,1); will-change: transform; } .cgr-slide { flex: 0 0 calc(100% / var(--cgr-pv, 3)); padding-right: var(--cgr-gap); min-width: 0; } .cgr-carousel .cgr-card { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "rank logo . score" "body body body body" "acts acts acts acts"; align-items: center; gap: 14px 12px; --_cg: 12px; padding: 20px 22px; } .cgr-carousel .cgr-card .cgr-rank { grid-area: rank; } .cgr-carousel .cgr-card .cgr-logo { grid-area: logo; } .cgr-carousel .cgr-card .cgr-score { grid-area: score; } .cgr-carousel .cgr-card .cgr-body { grid-area: body; } .cgr-carousel .cgr-card .cgr-actions { grid-area: acts; position: static; } .cgr-carousel .cgr-card .cgr-actions .cgr-btn { flex: 1 1 0; } .cgr-carousel .cgr-card:has(.cgr-actions) { padding-bottom: 20px; } .cgr-carousel .cgr-card .cgr-name { font-size: 22px; } .cgr-carousel .cgr-card { --cgr-ring: 80px; } .cgr-carousel--detailed .cgr-row { flex-wrap: wrap; } .cgr-carousel__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cgr-progress { flex: 1 1 auto; height: 4px; border-radius: 4px; background: var(--cgr-track); overflow: hidden; } .cgr-progress__fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cgr-accent), var(--cgr-accent2)); transform-origin: left; transform: scaleX(0); } .cgr-countdown { font-size: 12px; color: var(--cgr-muted); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; } .cgr-playpause, .cgr-arrow { appearance: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cgr-border); background: #fff; color: var(--cgr-ink); display: inline-grid; place-items: center; font-size: 22px; line-height: 1; padding: 0; } .cgr-arrow:hover, .cgr-playpause:hover { border-color: var(--cgr-accent); color: var(--cgr-accent); } .cgr-arrow[disabled] { opacity: .35; cursor: default; } .cgr-i-pause, .cgr-i-play { display: block; width: 10px; height: 12px; } .cgr-i-pause { border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .cgr-i-play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; } .cgr-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .cgr-dots { display: flex; gap: 6px; } .cgr-dot { appearance: none; cursor: pointer; width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: var(--cgr-border); transition: width .25s, background .25s; } .cgr-dot[aria-selected="true"] { width: 24px; background: var(--cgr-accent); } /* ---------- footer (compliance) ---------- */ .cgr-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; font-size: 12px; color: var(--cgr-muted); } .cgr-foot a { color: var(--cgr-accent2); } .cgr-rg { display: flex; gap: 8px; align-items: flex-start; } .cgr-age { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--cgr-ink); color: var(--cgr-ink); font-weight: 800; font-size: 10px; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .cgr-grid { grid-template-columns: repeat(var(--cgr-cols-t), minmax(0, 1fr)); } } @media (max-width: 767px) { .cgr-grid { grid-template-columns: repeat(var(--cgr-cols-m), minmax(0, 1fr)); gap: var(--cgr-gap); } .cgr-toolbar { flex-direction: column; } .cgr-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; } .cgr-filters::-webkit-scrollbar { display: none; } .cgr-pill { flex: 0 0 auto; } .cgr-sorted { text-align: left; flex-direction: row; gap: 4px; } } /* Rows and cards adapt to their OWN width (container queries), so they stay readable in narrow columns, 2-column grids on tablets, and on phones. */ .cgr-item, .cgr-cell, .cgr-slide { container-type: inline-size; } .cgr-item { container-name: cgrrow; } .cgr-cell { container-name: cgrcard; min-width: 0; } .cgr-slide { container-name: cgrcard; } @container cgrrow (max-width: 720px) { .cgr-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank logo head score" "chips chips chips chips" "tag tag tag tag" "subs subs subs subs" "acts acts acts acts"; gap: 10px 12px; --_cg: 12px; padding: 16px; --cgr-ring: 60px; } .cgr-row .cgr-body { display: contents; } .cgr-row .cgr-rank { grid-area: rank; font-size: 15px; --_rg: var(--cgr-rank-gap, 18px); } .cgr-row .cgr-logo { grid-area: logo; width: 44px; height: 44px; padding: 4px; } .cgr-row .cgr-head { display: contents; } .cgr-row .cgr-name { grid-area: head; min-width: 0; overflow-wrap: anywhere; font-size: 18px; line-height: 1.2; } .cgr-row .cgr-chips { grid-area: chips; } .cgr-row .cgr-tagline { grid-area: tag; margin: 0; } .cgr-row .cgr-subs { grid-area: subs; display: grid; grid-template-columns: repeat(var(--cgr-subs, 5), minmax(0, 1fr)); gap: 4px; margin: 0; padding: 10px 0; border-top: 1px solid var(--cgr-border); border-bottom: 1px solid var(--cgr-border); text-align: center; } .cgr-row .cgr-sub dt { font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .cgr-row .cgr-score { grid-area: score; } .cgr-row .cgr-actions { grid-area: acts; } .cgr-row .cgr-actions .cgr-btn { flex: 1 1 0; } } @container cgrcard (max-width: 460px) { .cgr-card { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank logo name score" "chips chips chips chips" "tag tag tag tag" "acts acts acts acts"; gap: 10px 12px; --_cg: 12px; align-items: center; padding: 16px; --cgr-ring: 64px; } .cgr-card .cgr-body { display: contents; } .cgr-card .cgr-rank { grid-area: rank; font-size: 16px; --_rg: var(--cgr-rank-gap, 18px); } .cgr-card .cgr-logo { grid-area: logo; width: 40px; height: 40px; } .cgr-card .cgr-name { grid-area: name; margin: 0; min-width: 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; } .cgr-card .cgr-chips { grid-area: chips; } .cgr-card .cgr-chip { font-size: 12px; padding: 6px 9px; } .cgr-card .cgr-tagline { grid-area: tag; margin: 0; } .cgr-card .cgr-score { grid-area: score; margin: 0; } .cgr-card .cgr-actions { grid-area: acts; position: static; width: 100%; } .cgr-card .cgr-actions .cgr-btn { flex: 1 1 0; } .cgr-card:has(.cgr-actions) { padding-bottom: 16px; } .cgr-carousel .cgr-card { grid-template-areas: "rank logo name score" "chips chips chips chips" "tag tag tag tag" "acts acts acts acts"; --cgr-ring: 64px; } .cgr-carousel .cgr-card .cgr-name { font-size: 20px; } } @container cgrcard (max-width: 300px) { /* Very narrow cards (e.g. 3 per view in a narrow column): rank · logo · score on top, name on its own line. */ .cgr-card, .cgr-carousel .cgr-card { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rank logo score" "name name name" "chips chips chips" "tag tag tag" "acts acts acts"; padding: 14px; gap: 8px 10px; --_cg: 10px; --cgr-ring: 56px; } .cgr-card .cgr-score { justify-self: end; } .cgr-card .cgr-rank { font-size: 14px; --_rg: var(--cgr-rank-gap, 16px); } .cgr-card .cgr-name, .cgr-carousel .cgr-card .cgr-name { font-size: 18px; } .cgr-card .cgr-actions { flex-wrap: wrap; } .cgr-card .cgr-actions .cgr-btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .cgr-track, .cgr-ring__bar, .cgr-btn, .cgr-dot { transition: none !important; } } /* ---------- section heading (any CG Rankings layout) ---------- */ .cgr-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 0 0 24px; } .cgr-sechead__title { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--cgr-heading); } .cgr-sechead__more { margin-left: auto; font-size: 17px; font-weight: 500; color: var(--cgr-accent2); text-decoration: none; white-space: nowrap; } .cgr-sechead__more:hover { text-decoration: underline; } .cgr a.cgr-sechead__more, .cgr a.cgr-sechead__more:visited { color: var(--cgr-accent2); } /* ---------- CATEGORY LIST (compact rows) ---------- */ .cgr-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cgr-gap, 16px); } .cgr-citem { margin: 0; container-type: inline-size; container-name: cgrcrow; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 6px); transition: box-shadow .2s; } .cgr-citem:hover { box-shadow: 0 10px 30px -18px rgba(26, 10, 60, .35); } .cgr-crow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "rank logo body lic score act"; align-items: center; column-gap: 28px; --_cg: 28px; padding: 24px 34px; --cgr-ring: 84px; } .cgr-crow__rank { grid-area: rank; font-size: 26px; font-weight: 600; color: var(--cgr-rank); } .cgr-citem.is-lead .cgr-crow__rank { color: var(--cgr-rank-top); } .cgr-crow__logo { grid-area: logo; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; display: grid; } .cgr-crow__logo img { width: 100%; height: 100%; object-fit: cover; } .cgr-crow__logo .cgr-drow__tile { border-radius: 14px; font-size: 20px; } .cgr-crow__body { grid-area: body; min-width: 0; } .cgr-crow__name { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--cgr-heading); } .cgr-crow__note { margin: 6px 0 0; font-size: 17px; line-height: 1.4; color: var(--cgr-muted); } .cgr-crow__lic { grid-area: lic; justify-self: end; font-size: 15px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; gap: 6px; } .cgr-crow__score { grid-area: score; } .cgr-crow__score .cgr-ring__txt b { font-size: calc(var(--cgr-ring) * .3); } .cgr-crow__actions { grid-area: act; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .cgr-crow__actions .cgr-btn { min-height: 56px; padding: 0 28px; font-size: 17px; } .cgr-crow__actions .cgr-cmpbox { flex: 0 0 auto; } .cgr .cgr-citem.is-lead a.cgr-crow__review, .cgr .cgr-citem.is-lead a.cgr-crow__review:visited { color: var(--cgr-primary-text); } @container cgrcrow (max-width: 900px) { .cgr-crow { column-gap: 18px; --_cg: 18px; padding: 20px 22px; --cgr-ring: 72px; } .cgr-crow__logo { width: 60px; height: 60px; } .cgr-crow__name { font-size: 21px; } .cgr-crow__note { font-size: 15px; } .cgr-crow__actions .cgr-btn { min-height: 48px; padding: 0 20px; font-size: 15px; } } @container cgrcrow (max-width: 640px) { .cgr-crow { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank logo body score" "lic lic act act"; row-gap: 14px; column-gap: 12px; --_cg: 12px; padding: 16px 16px; --cgr-ring: 60px; } .cgr-crow__rank { font-size: 17px; --_rg: var(--cgr-rank-gap, 18px); } .cgr-crow__logo { width: 48px; height: 48px; border-radius: 11px; } .cgr-crow__logo .cgr-drow__tile { font-size: 15px; border-radius: 11px; } .cgr-crow__name { font-size: 18px; overflow-wrap: anywhere; } .cgr-crow__note { font-size: 13px; margin-top: 3px; } .cgr-crow__lic { justify-self: start; font-size: 13px; padding: 6px 12px; } .cgr-crow__actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } .cgr-crow__actions .cgr-btn { min-height: 42px; padding: 0 18px; font-size: 14px; } .cgr-crow:not(:has(.cgr-crow__lic)) { grid-template-areas: "rank logo body score" "act act act act"; } } @container cgrcrow (max-width: 380px) { .cgr-crow { grid-template-areas: "rank logo body score" "lic lic lic lic" "act act act act"; } .cgr-crow__actions { justify-content: stretch; } .cgr-crow__actions .cgr-btn { flex: 1 1 0; } } /* =========================================================== SCORE CHANGES */ .cgr-log { --cgr-up: #1A7F4B; --cgr-down: #C2410C; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: var(--cgr-radius); padding: 20px 22px; } .cgr-log__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .cgr-log__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--cgr-ink); } .cgr-log__now { font-size: 13px; color: var(--cgr-muted); } .cgr-log__now b { font-size: 18px; color: var(--cgr-ink); margin-left: 4px; } .cgr-log__now small { font-size: 12px; } .cgr-log__list { list-style: none; margin: 0; padding: 0; } .cgr-log__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--cgr-border); font-size: 14px; } .cgr-log__item:first-child { border-top: 0; } .cgr-log__label { font-weight: 700; min-width: 84px; } .cgr-delta { font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; font-size: 13px; } .cgr-delta--up { color: var(--cgr-up); background: color-mix(in srgb, var(--cgr-up) 12%, transparent); } .cgr-delta--down { color: var(--cgr-down); background: color-mix(in srgb, var(--cgr-down) 12%, transparent); } .cgr-log__to, .cgr-log__on { color: var(--cgr-muted); font-size: 13px; } .cgr-log__note { flex-basis: 100%; font-size: 12px; color: var(--cgr-muted); font-style: italic; } .cgr-log__empty { margin: 8px 0 0; color: var(--cgr-muted); font-size: 13px; } .cgr-log__foot { margin: 10px 0 0; font-size: 12px; } .cgr-log__foot a { color: var(--cgr-accent2); } .cgr-spark { margin: 4px 0 8px; } .cgr-spark svg { width: 100%; height: auto; max-height: 72px; display: block; overflow: visible; } .cgr-spark__line { fill: none; stroke: var(--cgr-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .cgr-spark__dot { fill: var(--cgr-card); stroke: var(--cgr-accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .cgr-spark__pt.is-last .cgr-spark__dot { fill: var(--cgr-accent); } .cgr-spark__hit { fill: transparent; } .cgr-spark__pt:hover .cgr-spark__dot { fill: var(--cgr-accent); } .cgr-spark figcaption { font-size: 11px; color: var(--cgr-muted); margin-top: 2px; } /* =========================================================== METHODOLOGY */ .cgr-meth { --cgr-donut: 340px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; } .cgr-meth--chart-left .cgr-meth__chart { order: -1; } .cgr-meth--chart-top { grid-template-columns: minmax(0, 1fr); } .cgr-meth--chart-top .cgr-meth__chart { order: -1; } .cgr-meth__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cgr-accent); } .cgr-meth__heading { margin: 0 0 14px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--cgr-ink); white-space: pre-line; } .cgr-meth__intro { margin: 0 0 22px; font-size: 16px; color: #5B5670; max-width: 56ch; } .cgr-meth__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .cgr-meth__item { display: grid; grid-template-columns: 14px 1fr auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: default; transition: background .15s, opacity .15s; outline: none; } .cgr-meth__item:hover, .cgr-meth__item:focus-visible, .cgr-meth__item.is-hl { background: var(--cgr-top-bg); } .cgr-meth__item:focus-visible { box-shadow: 0 0 0 2px var(--cgr-accent); } .cgr-meth__swatch { width: 14px; height: 14px; border-radius: 4px; } .cgr-meth__label { font-weight: 700; font-size: 15px; color: var(--cgr-ink); } .cgr-meth__pct { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--cgr-ink); } .cgr-meth__desc { grid-column: 2 / 4; font-size: 13px; color: var(--cgr-muted); margin-top: 2px; } .cgr-meth__formula { margin: 16px 0 0; font-size: 12px; color: var(--cgr-muted); } .cgr-meth__formula strong { color: var(--cgr-ink); } .cgr-meth__link { margin: 14px 0 0; } .cgr-meth__link a { color: var(--cgr-accent2); font-weight: 600; text-decoration: none; } .cgr-meth__chart { position: relative; margin: 0 auto; width: 100%; max-width: var(--cgr-donut); aspect-ratio: 1; } .cgr-donut { width: 100%; height: 100%; display: block; } .cgr-donut__track { fill: none; stroke: var(--cgr-track); stroke-width: 26; } .cgr-donut__seg { fill: none; stroke-width: 26; transition: opacity .2s, stroke-width .2s; cursor: default; } .cgr-meth.has-hl .cgr-donut__seg:not(.is-hl), .cgr-meth.has-hl .cgr-meth__item:not(.is-hl) { opacity: .3; } .cgr-donut__seg.is-hl { stroke-width: 32; } .cgr-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; } .cgr-donut__center b { font-size: calc(var(--cgr-donut) * .17); font-weight: 800; line-height: 1; color: var(--cgr-ink); letter-spacing: -.03em; } .cgr-donut__center small { font-size: 14px; color: var(--cgr-muted); margin-top: 6px; max-width: 50%; } .cgr-anim-donut .cgr-donut { transform: rotate(-30deg) scale(.92); opacity: 0; transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .5s; } .cgr-anim-donut.is-in .cgr-donut { transform: none; opacity: 1; } @media (max-width: 900px) { .cgr-meth { grid-template-columns: minmax(0, 1fr); gap: 28px; --cgr-donut: 280px; } .cgr-meth .cgr-meth__chart { order: -1; } } @media (prefers-reduced-motion: reduce) { .cgr-anim-donut .cgr-donut { transform: none; opacity: 1; transition: none; } } /* =========================================================== CASINO DIRECTORY */ .cgr-dir { --cgr-side-w: 300px; display: grid; grid-template-columns: var(--cgr-side-w) minmax(0, 1fr); gap: 32px; align-items: start; } .cgr-dir--side-right { grid-template-columns: minmax(0, 1fr) var(--cgr-side-w); } .cgr-dir--side-right .cgr-dir__side { order: 2; } .cgr-dir--noside { grid-template-columns: minmax(0, 1fr); } .cgr-dir__fbtn { display: none; } .cgr-dir__main { min-width: 0; container-type: inline-size; container-name: cgrlist; } /* sidebar */ .cgr-dirshell { container-type: inline-size; container-name: cgrdir; } /* Sticky below the site's own sticky header (height measured by JS → --cgr-head-h); scrolls inside when taller than the screen. */ .cgr-dir__side { position: sticky; top: calc(var(--cgr-head-h, 0px) + var(--cgr-sticky, 24px)); max-height: calc(100vh - var(--cgr-head-h, 0px) - var(--cgr-sticky, 24px) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cgr-border) transparent; background: var(--cgr-side-bg); border: 1px solid var(--cgr-side-border); border-radius: calc(var(--cgr-radius) + 4px); padding: 28px; } .cgr-dir__sidehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .cgr-dir__sidetitle { margin: 0; font-size: 20px; font-weight: 700; color: var(--cgr-heading); } .cgr-dir__clear { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--cgr-accent2); cursor: pointer; text-decoration: underline; } .cgr-fg { border: 0; margin: 0; padding: 0 0 20px; } .cgr-fg + .cgr-fg { border-top: 1px solid var(--cgr-side-border); padding-top: 20px; } .cgr-fg__title { display: block; float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cgr-label); } .cgr-fg > .cgr-check:first-of-type { clear: both; } .cgr-check { display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; font-size: 16px; color: var(--cgr-ink); position: relative; } .cgr-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; } .cgr-check__box { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--cgr-border); border-radius: 5px; background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; } .cgr-check input:checked + .cgr-check__box { background: var(--cgr-accent); border-color: var(--cgr-accent); } .cgr-check input:checked + .cgr-check__box::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } .cgr-check input:focus-visible + .cgr-check__box { outline: 2px solid var(--cgr-accent); outline-offset: 2px; } .cgr-check__label { flex: 1 1 auto; } .cgr-check__n { font-size: 12px; color: var(--cgr-muted); font-variant-numeric: tabular-nums; } .cgr-fg--range input[type=range] { width: 100%; accent-color: var(--cgr-accent); margin: 4px 0 6px; } .cgr-fg__out { display: block; font-size: 14px; color: var(--cgr-muted); } .cgr-fg__out b { color: var(--cgr-accent2); font-weight: 600; } .cgr-fg--toggle { padding-bottom: 0; } /* sort box */ .cgr-dir__sortbox { background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 4px); padding: 22px 28px; margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .cgr-dir__sorttitle { flex-basis: 100%; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cgr-label); } .cgr-dir__sorts { display: flex; flex-wrap: wrap; gap: 10px; } .cgr-dir__sorts .cgr-pill { font-size: 15px; padding: 11px 20px; } .cgr-dir__count { margin: 0 0 0 auto; font-size: 13px; color: var(--cgr-muted); } /* rows */ .cgr-dir__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .cgr-dir__item { margin: 0; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 4px); transition: box-shadow .2s; } .cgr-dir__item:hover { box-shadow: 0 10px 30px -18px rgba(26, 10, 60, .35); } .cgr-dir__item.is-lead { background: var(--cgr-top-bg); } .cgr-dir__item.is-lead .cgr-drow__rank { color: var(--cgr-rank-top); } .cgr-dir__item.is-lead .cgr-drow__review { background: var(--cgr-primary); border-color: var(--cgr-primary); color: var(--cgr-primary-text); } .cgr-dir__item.is-lead .cgr-drow__review:hover { background: var(--cgr-primary-hover); border-color: var(--cgr-primary-hover); color: var(--cgr-primary-hover-text); } .cgr-drow { display: grid; grid-template-columns: auto auto minmax(var(--cgr-info-min, 220px), 1fr) auto auto auto; align-items: center; column-gap: var(--cgr-col-gap, 28px); --_cg: var(--cgr-col-gap, 28px); row-gap: 14px; padding: 26px 28px; --cgr-ring: 100px; } .cgr-drow__body { min-width: 0; display: flex; flex-direction: column; gap: var(--cgr-stack-gap, 12px); } .cgr-drow__body .cgr-chips { gap: var(--cgr-chip-gap, 8px); } .cgr-drow__rank { font-size: 26px; font-weight: 600; } .cgr-drow__logo { width: 68px; height: 68px; } .cgr-drow__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .cgr-drow__tile { width: 100%; height: 100%; border-radius: 10px; background: var(--cgr-accent2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; letter-spacing: .02em; } .cgr-drow__head { display: flex; align-items: baseline; gap: 10px; margin: 0; } .cgr-drow__name { font-size: 23px; font-weight: 600; letter-spacing: -.01em; } .cgr-drow__badge { font-size: 12px; font-weight: 700; color: var(--cgr-cta); } .cgr-drow .cgr-chip { font-size: 14px; padding: 7px 12px; border-radius: 8px; } .cgr-drow .cgr-chip--license, .cgr-drow .cgr-chip--bad { border-radius: 999px; padding: 7px 14px; } .cgr-drow__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; color: var(--cgr-muted); } .cgr-drow__stars > a, .cgr-drow__stars > span:not(.cgr-stars) { white-space: nowrap; } .cgr-drow__stars a { color: inherit; text-decoration: none; } .cgr-drow__stars a:hover { color: var(--cgr-accent2); text-decoration: underline; } .cgr-drow__subs { margin: 0; display: grid; gap: var(--cgr-sub-gap, 10px); min-width: 140px; } .cgr-drow__subs > div { display: flex; justify-content: space-between; gap: 24px; } .cgr-drow__subs dt { margin: 0; font-size: 16px; color: var(--cgr-muted); } .cgr-drow__subs dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--cgr-ink); font-variant-numeric: tabular-nums; } .cgr-drow__actions { display: flex; flex-direction: column; gap: 12px; width: 180px; } .cgr-drow__actions .cgr-btn { min-height: 50px; font-size: 16px; width: 100%; } .cgr-drow__nolink { font-size: 13px; line-height: 1.35; color: var(--cgr-bad-text); background: var(--cgr-bad-bg); border-radius: 12px; padding: 10px 12px; text-align: center; } .cgr-dir__item.is-unlicensed { border-style: dashed; } .cgr-dir__item.is-unlicensed .cgr-drow__rank { color: var(--cgr-border); } .cgr-dir__empty { text-align: center; padding: 48px 16px; color: var(--cgr-muted); } /* pagination */ .cgr-dir .cgr-more { margin-top: 36px; } .cgr-dir .cgr-more__btn { padding: 16px 30px; font-size: 16px; } .cgr-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; } .cgr-pager__n { min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--cgr-pill-border); background: var(--cgr-pill-bg); color: var(--cgr-pill-text); text-decoration: none; font-weight: 600; } .cgr-pager__n:hover { border-color: var(--cgr-accent); color: var(--cgr-pill-text); } .cgr-pager__n.is-current { background: var(--cgr-pill-active-bg); border-color: var(--cgr-pill-active-bg); color: var(--cgr-pill-active-text); } .cgr-pager__n[aria-disabled="true"] { opacity: .4; pointer-events: none; } /* stars (shared) */ .cgr-stars { position: relative; display: inline-flex; line-height: 0; flex: 0 0 auto; } .cgr-stars svg { fill: currentColor; margin-right: 2px; flex: 0 0 auto; } .cgr-stars__bg { color: var(--cgr-star-empty); display: inline-flex; } .cgr-stars__fg { color: var(--cgr-star); position: absolute; inset: 0 auto 0 0; overflow: hidden; display: inline-flex; white-space: nowrap; } @media (max-width: 1180px) { .cgr-drow__actions { width: 160px; } } /* Directory: middle widths (tablets, narrow content columns) — slimmer sidebar. */ @container cgrdir (max-width: 1040px) { .cgr-dir { --cgr-side-w: 260px; gap: 24px; } .cgr-dir__side { padding: 22px; } .cgr-check { font-size: 15px; } } /* Directory: not enough room for sidebar + list → "Filters" button opens the filters above the list. */ @container cgrdir (max-width: 860px) { .cgr-dir, .cgr-dir--side-right { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cgr-dir__fbtn { display: inline-flex; align-items: center; gap: 8px; justify-self: start; appearance: none; font: inherit; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cgr-pill-border); background: var(--cgr-pill-bg); color: var(--cgr-pill-text); cursor: pointer; } .cgr-dir__fcount { background: var(--cgr-accent); color: #fff; border-radius: 999px; font-size: 12px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; } .cgr-dir__side { display: none; position: static; max-height: none; overflow: visible; } .cgr-dir__side.is-open { display: block; } .cgr-dir--side-right .cgr-dir__side { order: 0; } .cgr-dir__sortbox { padding: 16px; margin-bottom: 16px; } .cgr-dir__sorts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .cgr-dir__sorts::-webkit-scrollbar { display: none; } .cgr-dir__sorts .cgr-pill { flex: 0 0 auto; font-size: 14px; padding: 9px 16px; } .cgr-dir__count { margin: 0; } .cgr-dir__list { gap: 14px; } } /* Row layouts follow the width of the LIST (not the screen), so a narrow column never squeezes the rows. */ @container cgrlist (max-width: 900px) { .cgr-drow { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "rank logo body score act" "rank logo subs score act"; column-gap: var(--cgr-col-gap, 20px); --_cg: var(--cgr-col-gap, 20px); row-gap: 12px; padding: 22px 24px; --cgr-ring: 88px; } .cgr-drow__rank { grid-area: rank; font-size: 22px; } .cgr-drow__logo { grid-area: logo; width: 60px; height: 60px; } .cgr-drow__body { grid-area: body; } .cgr-drow__score { grid-area: score; } .cgr-drow__actions { grid-area: act; width: 160px; } .cgr-drow__actions .cgr-btn { min-height: 46px; font-size: 15px; } .cgr-drow__name { font-size: 21px; } .cgr-drow__subs { grid-area: subs; display: flex; flex-wrap: wrap; gap: 6px 20px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--cgr-border); } .cgr-drow__subs > div { justify-content: flex-start; gap: 6px; } .cgr-drow__subs dt, .cgr-drow__subs dd { font-size: 14px; } .cgr-drow:not(:has(.cgr-drow__subs)) { grid-template-areas: "rank logo body score act"; } } @container cgrlist (max-width: 700px) { /* Mobile: header line = rank · logo · name · score; everything else full width underneath. */ .cgr-drow { grid-template-columns: auto 48px minmax(0, 1fr) auto; grid-template-areas: "rank logo head score" "chips chips chips chips" "stars stars stars stars" "subs subs subs subs" "act act act act"; column-gap: 12px; --_cg: 12px; row-gap: var(--cgr-stack-gap, 12px); align-items: center; padding: 18px; --cgr-ring: 60px; } .cgr-drow__body { display: contents; } .cgr-drow__rank { grid-area: rank; font-size: 16px; --_rg: var(--cgr-rank-gap, 18px); } .cgr-drow__logo { grid-area: logo; width: 48px !important; height: 48px !important; } .cgr-drow__tile { font-size: 15px; } .cgr-drow__head { grid-area: head; min-width: 0; flex-wrap: wrap; row-gap: 2px; column-gap: 8px; align-items: baseline; } .cgr-drow__name { font-size: 18px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; } .cgr-drow .cgr-chips { grid-area: chips; } .cgr-drow .cgr-chip { font-size: 12px; padding: 5px 9px; } .cgr-drow__stars { grid-area: stars; font-size: 13px; gap: 6px 8px; } .cgr-drow__score { grid-area: score; align-self: center; } .cgr-drow__subs { grid-area: subs; display: grid; grid-template-columns: repeat(var(--cgr-subs, 3), minmax(0, 1fr)); gap: 4px; margin: 0; padding: 10px 0; border-top: 1px solid var(--cgr-border); border-bottom: 1px solid var(--cgr-border); } .cgr-drow__subs > div { flex-direction: column-reverse; align-items: center; gap: 0; } .cgr-drow__subs dt { font-size: 12px; } .cgr-drow__subs dd { font-size: 15px; } .cgr-drow__actions { grid-area: act; flex-direction: row; width: auto !important; gap: 10px; } .cgr-drow__actions .cgr-btn { min-height: 44px; font-size: 15px; flex: 1 1 0; padding: 0 10px; } .cgr-drow__nolink { flex: 1 1 100%; } .cgr-drow, .cgr-drow:not(:has(.cgr-drow__subs)) { grid-template-areas: "rank logo head score" "chips chips chips chips" "stars stars stars stars" "subs subs subs subs" "act act act act"; } .cgr-drow:has(.cgr-why), .cgr-drow:not(:has(.cgr-drow__subs)):has(.cgr-why) { grid-template-areas: "rank logo head score" "chips chips chips chips" "stars stars stars stars" "subs subs subs subs" "why why why why" "act act act act"; } .cgr-drow .cgr-why { grid-area: why; margin: 0; } .cgr-drow__actions .cgr-alt { flex: 1 1 0; min-width: 0; } } @container cgrlist (max-width: 360px) { .cgr-drow { grid-template-columns: auto 40px minmax(0, 1fr) auto; column-gap: 10px; --_cg: 10px; padding: 16px 14px; --cgr-ring: 54px; } .cgr-drow__logo { width: 40px !important; height: 40px !important; } .cgr-drow__rank { font-size: 15px; --_rg: var(--cgr-rank-gap, 16px); } .cgr-drow__name { font-size: 17px; } } @container cgrlist (max-width: 290px) { .cgr-drow__actions { flex-direction: column; } .cgr-drow__actions .cgr-btn { flex: 0 0 auto; width: 100%; } } /* =========================================================== COMPARISON TOOL */ .cgr-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; } .cgr-cmp { container-type: inline-size; container-name: cgrcmp; --cgr-cmp-best: color-mix(in srgb, var(--cgr-accent) 9%, var(--cgr-card)); --cgr-cmp-label: 220px; --cgr-cmp-col: 170px; } .cgr-cmp__head { margin-bottom: 32px; } .cgr-cmp__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cgr-accent2); } .cgr-cmp__title { margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--cgr-heading); } .cgr-cmp__intro { margin: 0; font-size: 18px; color: var(--cgr-text, var(--cgr-muted)); max-width: 70ch; } /* pickers */ .cgr-cmp__pickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; } .cgr-cmp__slot { background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 6px); padding: 18px 22px 22px; min-width: 0; } .cgr-cmp__slothead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .cgr-cmp__slotlabel { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cgr-label, var(--cgr-muted)); } .cgr-cmp__rm { appearance: none; border: 0; background: none; padding: 2px 4px; font-size: 22px; line-height: 1; color: var(--cgr-muted); cursor: pointer; border-radius: 6px; } .cgr-cmp__rm:hover { color: var(--cgr-ink); } .cgr-cmp__rm:focus-visible, .cgr-cmp__add:focus-visible, .cgr-cmp__select:focus-visible, .cgr-cmp__pcard:focus-visible, .cgr-cmp__wrap:focus-visible { outline: 2px solid var(--cgr-accent); outline-offset: 2px; } .cgr-cmp__select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; padding: 0 40px 0 16px; font: inherit; font-size: 17px; font-weight: 500; color: var(--cgr-ink); background: var(--cgr-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; border: 1px solid var(--cgr-border); border-radius: 12px; cursor: pointer; text-overflow: ellipsis; } .cgr-cmp__select:hover { border-color: var(--cgr-accent); } .cgr-cmp__add { appearance: none; min-height: 120px; border: 1.5px dashed var(--cgr-border); border-radius: calc(var(--cgr-radius) + 6px); background: transparent; font: inherit; font-size: 17px; font-weight: 500; color: var(--cgr-muted); cursor: pointer; transition: border-color .15s, color .15s; } .cgr-cmp__add:hover { border-color: var(--cgr-accent); color: var(--cgr-accent2); } .cgr-cmp__add[hidden] { display: none; } /* table */ .cgr-cmp__wrap { overflow-x: auto; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 8px); -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .cgr-cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: calc(var(--cgr-cmp-label) + var(--cgr-cols, 3) * var(--cgr-cmp-col)); font-size: 17px; color: var(--cgr-ink); margin: 0; } .cgr-cmp__table col, .cgr-cmp__table th, .cgr-cmp__table td { border: 0; } .cgr-cmp__table thead th, .cgr-cmp__table thead td { background: var(--cgr-top-bg); padding: 20px 28px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cgr-border); } .cgr-cmp__table .cgr-cmp__corner, .cgr-cmp__table tbody th { width: var(--cgr-cmp-label); position: sticky; left: 0; z-index: 2; } .cgr-cmp__table .cgr-cmp__corner { background: var(--cgr-top-bg); } .cgr-cmp__table tbody th { background: var(--cgr-card); padding: 22px 28px; text-align: left; font-size: 16px; font-weight: 500; color: var(--cgr-muted); vertical-align: middle; border-top: 1px solid var(--cgr-border); } .cgr-cmp__table tbody tr:first-child th, .cgr-cmp__table tbody tr:first-child td { border-top: 0; } .cgr-cmp__table tbody td { position: relative; padding: 22px 28px; vertical-align: middle; border-top: 1px solid var(--cgr-border); overflow-wrap: anywhere; } .cgr-cmp__table td.is-best { background: var(--cgr-cmp-best); } .cgr-cmp__badge { position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cgr-accent2); line-height: 1; } .cgr-cmp__op { font-weight: 400; } .cgr-cmp__op { white-space: normal; } .cgr-cmp__op > span { vertical-align: middle; } .cgr-cmp__oplogo { display: inline-grid; width: 48px; height: 48px; margin-right: 14px; vertical-align: middle; } .cgr-cmp__oplogo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .cgr-cmp__oplogo .cgr-drow__tile { font-size: 16px; } .cgr-cmp__opname { display: inline-flex; flex-direction: column; font-size: 20px; font-weight: 600; color: var(--cgr-heading); line-height: 1.2; } .cgr-cmp__opname small { font-size: 14px; font-weight: 400; color: var(--cgr-muted); margin-top: 2px; } .cgr-cmp__score { font-size: 28px; font-weight: 700; color: var(--cgr-accent2); letter-spacing: -.01em; } .cgr-cmp__star { color: var(--cgr-ink); } .cgr-cmp__sub { margin-left: 4px; font-size: 13px; color: var(--cgr-muted); } .cgr-cmp__na { color: var(--cgr-muted); } .cgr-cmp__muted { font-size: 16px; color: var(--cgr-text, var(--cgr-muted)); } .cgr-cmp__table .cgr-chips { gap: 8px; } .cgr-cmp__table .cgr-chip { font-size: 14px; padding: 6px 12px; border-radius: 8px; } .cgr-cmp__cta td { text-align: center; padding-top: 22px; padding-bottom: 22px; } .cgr-cmp__cta .cgr-btn { width: 100%; min-height: 52px; font-size: 17px; } .cgr-cmp__review { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--cgr-accent2); text-decoration: none; } .cgr-cmp__review:hover { text-decoration: underline; } .cgr a.cgr-cmp__review, .cgr a.cgr-cmp__review:visited { color: var(--cgr-accent2); } .cgr-cmp__note { margin: 14px 0 0; font-size: 14px; color: var(--cgr-muted); } .cgr-cmp__note--terms { margin-top: 4px; } /* popular comparisons */ .cgr-cmp__popular { margin-top: 48px; } .cgr-cmp__ptitle-main { margin: 0 0 18px; font-size: 26px; font-weight: 700; color: var(--cgr-heading); } .cgr-cmp__pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .cgr-cmp__pcard { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 4px); text-decoration: none; color: var(--cgr-ink); transition: border-color .15s, box-shadow .15s; } .cgr-cmp__pcard:hover { border-color: var(--cgr-accent); box-shadow: 0 10px 30px -18px rgba(26, 10, 60, .35); } .cgr-cmp__plogos { display: flex; } .cgr-cmp__plogo { display: inline-grid; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--cgr-card); background: var(--cgr-card); overflow: hidden; } .cgr-cmp__plogo + .cgr-cmp__plogo { margin-left: -8px; } .cgr-cmp__plogo img { width: 100%; height: 100%; object-fit: contain; } .cgr-cmp__plogo .cgr-drow__tile { font-size: 13px; border-radius: 10px; } .cgr-cmp__ptitle { font-size: 17px; font-weight: 600; color: var(--cgr-heading); } .cgr-cmp__pcta { font-size: 14px; font-weight: 600; color: var(--cgr-accent2); } @container cgrcmp (max-width: 980px) { .cgr-cmp__pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cgr-cmp__add { min-height: 72px; } .cgr-cmp__wrap { --cgr-cmp-label: 150px; --cgr-cmp-col: 128px; } .cgr-cmp__table thead th, .cgr-cmp__table thead td, .cgr-cmp__table tbody th, .cgr-cmp__table tbody td { padding-left: 20px; padding-right: 20px; } } /* Phones / narrow columns: each row label becomes a full-width strip, the casinos' values sit side by side under it. */ @container cgrcmp (max-width: 640px) { .cgr-cmp__head { margin-bottom: 22px; } .cgr-cmp__intro { font-size: 16px; } .cgr-cmp__pickers { gap: 10px; margin-bottom: 22px; } .cgr-cmp__slot { padding: 12px 12px 14px; border-radius: calc(var(--cgr-radius) + 2px); } .cgr-cmp__slothead { margin-bottom: 8px; } .cgr-cmp__slotlabel { font-size: 11px; letter-spacing: .12em; } .cgr-cmp__select { min-height: 44px; font-size: 15px; padding-left: 12px; padding-right: 30px; background-position: right 11px center; border-radius: 10px; } .cgr-cmp__add { min-height: 0; font-size: 15px; } .cgr-cmp__wrap { --cgr-cmp-col: 104px; border-radius: calc(var(--cgr-radius) + 4px); } .cgr-cmp__table, .cgr-cmp__table thead, .cgr-cmp__table tbody { display: block; } .cgr-cmp__table { min-width: calc(var(--cgr-cols, 3) * var(--cgr-cmp-col)); font-size: 15px; } .cgr-cmp__table tr { display: grid; grid-template-columns: repeat(var(--cgr-cols, 3), minmax(0, 1fr)); } .cgr-cmp__table .cgr-cmp__corner { display: none; } .cgr-cmp__table thead th { display: block; padding: 14px 10px; border-bottom: 1px solid var(--cgr-border); } .cgr-cmp__table tbody th { grid-column: 1 / -1; position: static; width: auto; padding: 9px 12px 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cgr-label, var(--cgr-muted)); background: var(--cgr-top-bg); border-top: 1px solid var(--cgr-border); } .cgr-cmp__rl { position: sticky; left: 12px; } .cgr-cmp__table tbody tr:first-child th { border-top: 0; } .cgr-cmp__table tbody td { display: block; padding: 20px 10px 12px; border-top: 0; } .cgr-cmp__table tbody td + td { border-left: 1px solid var(--cgr-border); } .cgr-cmp__table thead th + th { border-left: 1px solid var(--cgr-border); } .cgr-cmp__cta th { display: none !important; } .cgr-cmp__cta td { padding: 14px 8px; border-top: 1px solid var(--cgr-border) !important; } .cgr-cmp__oplogo { display: grid; width: 40px; height: 40px; margin: 0 0 8px; } .cgr-cmp__opname { display: flex; font-size: 15px; } .cgr-cmp__opname small { font-size: 11px; } .cgr-cmp__score { font-size: 22px; } .cgr-cmp__badge { top: 6px; left: 10px; right: auto; font-size: 9px; } .cgr-cmp__table .cgr-chips { gap: 4px; } .cgr-cmp__table .cgr-chip { font-size: 11px; padding: 3px 7px; } .cgr-cmp__muted { font-size: 13px; } .cgr-cmp__cta .cgr-btn { min-height: 42px; font-size: 14px; padding: 0 8px; } .cgr-cmp__review { font-size: 13px; margin-top: 10px; } .cgr-cmp__ptitle-main { font-size: 21px; } .cgr-cmp__popular { margin-top: 32px; } .cgr-cmp__pgrid { gap: 12px; } } @container cgrcmp (max-width: 290px) { .cgr-cmp__pickers { grid-template-columns: minmax(0, 1fr); } } /* ---------- comparison tool: v2.5 additions ---------- */ .cgr-cmp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; } .cgr-cmp__switch { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--cgr-ink); cursor: pointer; position: relative; user-select: none; } .cgr-cmp__switch input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; } .cgr-cmp__track { flex: 0 0 auto; position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--cgr-border); transition: background .15s; } .cgr-cmp__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; } .cgr-cmp__switch input:checked + .cgr-cmp__track { background: var(--cgr-accent); } .cgr-cmp__switch input:checked + .cgr-cmp__track::after { transform: translateX(16px); } .cgr-cmp__switch input:focus-visible + .cgr-cmp__track { outline: 2px solid var(--cgr-accent); outline-offset: 2px; } .cgr-cmp__full { font-size: 15px; font-weight: 600; color: var(--cgr-accent2); text-decoration: none; } .cgr-cmp__full:hover { text-decoration: underline; } .cgr a.cgr-cmp__full, .cgr a.cgr-cmp__full:visited { color: var(--cgr-accent2); } .cgr-cmp__full[hidden] { display: none; } .cgr button.cgr-cmp__copy, .cgr button.cgr-cmp__copy:focus { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; appearance: none; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--cgr-ink); background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: 999px; cursor: pointer; text-transform: none; box-shadow: none; } .cgr button.cgr-cmp__copy:hover { background: var(--cgr-card); color: var(--cgr-ink); border-color: var(--cgr-accent); } .cgr button.cgr-cmp__copy.is-done { color: var(--cgr-accent2); border-color: var(--cgr-accent); } .cgr-cmp.is-diff .cgr-cmp__table tbody tr[data-same] { display: none; } .cgr-cmp__table tbody tr[hidden] { display: none; } .cgr-cmp__tested { font-size: inherit; color: var(--cgr-muted); } .cgr-cmp__rl { display: inline; position: relative; } .cgr button.cgr-cmp__info, .cgr button.cgr-cmp__info:focus { display: inline-grid; place-items: center; width: 17px; height: 17px; min-height: 0; margin: 0 0 0 6px; padding: 0; border-radius: 50%; border: 1px solid var(--cgr-border); background: var(--cgr-card); color: var(--cgr-muted); font: 700 11px/1 Georgia, serif; font-style: italic; cursor: help; vertical-align: 1px; text-transform: none; box-shadow: none; } .cgr button.cgr-cmp__info:hover { background: var(--cgr-card); border-color: var(--cgr-accent); color: var(--cgr-accent2); } .cgr-cmp__tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--cgr-ink); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; white-space: normal; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; } .cgr-cmp__info:hover + .cgr-cmp__tip, .cgr-cmp__info:focus + .cgr-cmp__tip { opacity: 1; visibility: visible; transform: none; } .cgr-cmp__table tbody th { overflow: visible; } .cgr-cmp__table tbody th:hover, .cgr-cmp__table tbody th:focus-within { z-index: 6; } .cgr-cmp__table tbody tr:has(th:hover), .cgr-cmp__table tbody tr:has(th:focus-within) { position: relative; z-index: 6; } .cgr-cmp__note a { color: var(--cgr-accent2); font-weight: 600; text-decoration: none; } .cgr-cmp__note a:hover { text-decoration: underline; } .cgr-cmp.is-locked .cgr-cmp__bar { margin-top: 0; } .cgr-cmp__float { position: fixed; z-index: 30; overflow: hidden; background: var(--cgr-top-bg); border: 1px solid var(--cgr-border); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 8px 20px -12px rgba(26, 10, 60, .45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; } .cgr-cmp__float.is-on { opacity: 1; visibility: visible; transform: none; } .cgr-cmp__floatin { display: flex; } .cgr-cmp__fcell { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px 8px 28px; font-size: 15px; font-weight: 600; color: var(--cgr-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cgr-cmp__flogo { flex: 0 0 auto; display: inline-grid; width: 28px; height: 28px; } .cgr-cmp__flogo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } .cgr-cmp__flogo .cgr-drow__tile { font-size: 11px; border-radius: 7px; } .cgr-vs__verdict { margin-top: 32px; } .cgr-vs__related { margin-top: 40px; } /* same-owner disclosure (lists, directory, comparisons) */ .cgr-owner { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--cgr-text, var(--cgr-ink)); background: var(--cgr-top-bg); border: 1px solid var(--cgr-border); border-radius: 10px; } .cgr-owner[hidden] { display: none; } .cgr-owner__i { flex: 0 0 auto; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--cgr-accent2); color: #fff; font: italic 700 11px/1 Georgia, serif; } /* "Compare" tick box on ranking rows / cards / directory rows */ .cgr-actions:has(.cgr-cmpbox) { flex-wrap: wrap; } .cgr-cmpbox { flex: 1 0 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--cgr-muted); cursor: pointer; position: relative; user-select: none; } .cgr-cmpbox input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; } .cgr-cmpbox__box { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--cgr-border); background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; } .cgr-cmpbox input:checked + .cgr-cmpbox__box { background: var(--cgr-accent); border-color: var(--cgr-accent); } .cgr-cmpbox input:checked + .cgr-cmpbox__box::after { content: ''; width: 8px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } .cgr-cmpbox input:focus-visible + .cgr-cmpbox__box { outline: 2px solid var(--cgr-accent); outline-offset: 2px; } .cgr-cmpbox:hover { color: var(--cgr-ink); } .cgr-cmpbox input:checked ~ .cgr-cmpbox__txt { color: var(--cgr-accent2); font-weight: 600; } .cgr-cmpbox.is-full { opacity: .45; cursor: not-allowed; } .cgr-drow__actions .cgr-cmpbox { flex: 0 0 auto; } /* floating tray */ .cgr-tray { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 9990; width: min(760px, calc(100vw - 24px)); transform: translate(-50%, 140%); transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .cgr-tray.is-on { transform: translate(-50%, 0); } .cgr-tray__in { display: flex; align-items: center; gap: 12px 16px; padding: 12px 14px 12px 18px; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: 18px; box-shadow: 0 18px 40px -16px rgba(26, 10, 60, .45); } .cgr-tray__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; } .cgr-tray__item { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--cgr-top-bg); border: 1px solid var(--cgr-border); font-size: 14px; font-weight: 600; color: var(--cgr-ink); } .cgr-tray__item.is-empty { padding: 6px 12px; border-style: dashed; background: transparent; font-weight: 400; color: var(--cgr-muted); } .cgr .cgr-tray__item button, .cgr .cgr-tray__item button:hover, .cgr .cgr-tray__item button:focus { appearance: none; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cgr-muted); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; } .cgr .cgr-tray__item button:hover { background: var(--cgr-border); color: var(--cgr-ink); } .cgr-tray__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .cgr .cgr-tray__clear, .cgr .cgr-tray__clear:hover, .cgr .cgr-tray__clear:focus { appearance: none; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--cgr-muted); text-decoration: underline; cursor: pointer; box-shadow: none; } .cgr-tray__go { min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; } .cgr-tray__hint { font-size: 13px; color: var(--cgr-muted); white-space: nowrap; } @media (max-width: 600px) { .cgr-tray__in { flex-wrap: wrap; padding: 12px; } .cgr-tray__actions { width: 100%; justify-content: space-between; } .cgr-tray__go { flex: 1 1 auto; justify-content: center; } .cgr-tray__item { font-size: 13px; } } @container cgrcmp (max-width: 640px) { .cgr-cmp__bar { gap: 8px 12px; margin-bottom: 10px; } .cgr-cmp__switch { font-size: 14px; } .cgr button.cgr-cmp__copy { padding: 6px 12px; font-size: 13px; } .cgr-cmp__full { order: 3; flex: 1 0 100%; font-size: 14px; } .cgr-cmp__tested { display: block; } .cgr-cmp__sep { display: none; } .cgr-cmp__tip { max-width: 220px; } .cgr-cmp__fcell { padding: 8px 10px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .cgr-tray, .cgr-cmp__float, .cgr-cmp__tip { transition: none; } } /* =========================================================== USER REVIEWS */ .cgr-ur { max-width: 820px; } .cgr-ur__title { margin: 0 0 16px; font-size: 26px; font-weight: 700; color: var(--cgr-heading); } .cgr-ur__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 32px; align-items: center; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: var(--cgr-radius); padding: 22px 24px; margin-bottom: 20px; } .cgr-ur__avg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .cgr-ur__num { display: flex; align-items: baseline; } .cgr-ur__avg b { font-size: 44px; line-height: 1; font-weight: 800; color: var(--cgr-ink); } .cgr-ur__avg small { font-size: 16px; color: var(--cgr-muted); margin-left: 2px; } .cgr-ur__avg > span { font-size: 13px; color: var(--cgr-muted); } .cgr-ur__dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cgr-ur__dist li { display: grid; grid-template-columns: 32px 1fr 36px; align-items: center; gap: 10px; font-size: 13px; color: var(--cgr-muted); } .cgr-ur__bar { height: 8px; border-radius: 99px; background: var(--cgr-star-empty); overflow: hidden; } .cgr-ur__bar i { display: block; height: 100%; background: var(--cgr-star); border-radius: 99px; } .cgr-ur__few, .cgr-ur__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--cgr-muted); } .cgr-ur__list { list-style: none; margin: 0; padding: 0; } .cgr-ur__item { padding: 18px 0; border-top: 1px solid var(--cgr-border); } .cgr-ur__h { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: var(--cgr-ink); } .cgr-ur__text { margin: 6px 0; color: var(--cgr-text); font-size: 15px; line-height: 1.55; } .cgr-ur__meta { margin: 0; font-size: 13px; color: var(--cgr-muted); } .cgr-ur__form { margin-top: 24px; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: var(--cgr-radius); padding: 24px; display: grid; gap: 14px; } .cgr-ur__formtitle { margin: 0; font-size: 20px; font-weight: 700; color: var(--cgr-heading); } .cgr-ur__warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--cgr-bad-bg); color: var(--cgr-bad-text); font-size: 14px; } .cgr-ur__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cgr-ur__rate { border: 0; margin: 0; padding: 0; } .cgr-ur__rate legend { padding: 0; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--cgr-ink); } .cgr-ur__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .cgr-ur__rate input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cgr-ur__rate label { font-size: 32px; line-height: 1; color: var(--cgr-star-empty); cursor: pointer; transition: color .1s; } .cgr-ur__rate input:checked ~ label, .cgr-ur__rate label:hover, .cgr-ur__rate label:hover ~ label { color: var(--cgr-star); } .cgr-ur__rate input:focus-visible + label { outline: 2px solid var(--cgr-accent); outline-offset: 2px; border-radius: 4px; } .cgr-ur__field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cgr-ink); } .cgr-ur__field input, .cgr-ur__field textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 11px 14px; border: 1px solid var(--cgr-border); border-radius: 10px; background: #fff; color: var(--cgr-ink); width: 100%; } .cgr-ur__field input:focus, .cgr-ur__field textarea:focus { outline: 2px solid var(--cgr-accent); outline-offset: 0; border-color: transparent; } .cgr-ur__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cgr-ur__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--cgr-text); } .cgr-ur__check input { margin-top: 2px; accent-color: var(--cgr-accent); } .cgr-ur__check a { color: var(--cgr-accent2); } .cgr-ur__form .cgr-btn--primary { justify-self: start; min-height: 46px; padding: 0 26px; font-size: 15px; } .cgr-ur__msg { margin: 0; font-size: 14px; } .cgr-ur__msg.is-ok { color: #1A7F4B; } .cgr-ur__msg.is-err { color: var(--cgr-bad-text); } @media (max-width: 640px) { .cgr-ur__summary, .cgr-ur__row { grid-template-columns: 1fr; } } /* Filters-only widget (separate from the list) */ .cgr-dir-filters { display: block; } .cgr-dir-filters .cgr-dir__side { position: sticky; top: calc(var(--cgr-head-h, 0px) + var(--cgr-sticky, 24px)); } .cgr-dir--nosticky .cgr-dir__side, .cgr-dir-filters.cgr-dir--nosticky .cgr-dir__side { position: static; max-height: none; overflow: visible; } @media (max-width: 900px) { .cgr-dir-filters .cgr-dir__fbtn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; appearance: none; font: inherit; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cgr-pill-border); background: var(--cgr-pill-bg); color: var(--cgr-pill-text); cursor: pointer; } .cgr-dir-filters .cgr-dir__fcount { background: var(--cgr-accent); color: #fff; border-radius: 999px; font-size: 12px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; } .cgr-dir-filters .cgr-dir__side { display: none; position: static; max-height: none; overflow: visible; } .cgr-dir-filters .cgr-dir__side.is-open { display: block; } } /* Filters-only widget in a narrow column (e.g. 1/4 width on tablets) */ .cgr-dir-filters { container-type: inline-size; container-name: cgrfilters; } @container cgrfilters (max-width: 260px) { .cgr-dir-filters .cgr-dir__side { padding: 16px; } .cgr-dir-filters .cgr-check { font-size: 14px; gap: 8px; } .cgr-dir-filters .cgr-dir__sidetitle { font-size: 17px; } } /* =========================================================== REVIEW SCORECARD */ .cgr-sc { --cgr-ring: 124px; background: var(--cgr-card); border: 1px solid var(--cgr-border); border-radius: calc(var(--cgr-radius) + 6px); padding: 28px 32px; display: grid; gap: 26px; } .cgr-sc__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; } .cgr-sc__logo { width: 84px; height: 84px; } .cgr-sc__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; border: 1px solid var(--cgr-border); background: #fff; padding: 6px; } .cgr-sc__logo .cgr-drow__tile { font-size: 26px; border-radius: 14px; } .cgr-sc__id { display: grid; gap: 10px; min-width: 0; } .cgr-sc__title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--cgr-ink); } .cgr-sc .cgr-chip { font-size: 13px; padding: 6px 11px; border-radius: 8px; } .cgr-sc .cgr-chip--license, .cgr-sc .cgr-chip--bad { border-radius: 999px; padding: 6px 13px; } .cgr-sc__score { display: grid; justify-items: center; gap: 6px; text-align: center; } .cgr-sc__scorelabel { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cgr-muted); } .cgr-sc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-top: 22px; border-top: 1px solid var(--cgr-border); } .cgr-sc__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cgr-muted); } .cgr-sc__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cgr-sc__bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; align-items: center; gap: 12px; font-size: 15px; color: var(--cgr-ink); } .cgr-sc__bars b { text-align: right; font-variant-numeric: tabular-nums; } .cgr-sc__bar { height: 8px; border-radius: 99px; background: var(--cgr-track); overflow: hidden; } .cgr-sc__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cgr-ring-b), var(--cgr-ring-a)); } .cgr-sc__facts { margin: 0; display: grid; gap: 0; } .cgr-sc__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--cgr-border); } .cgr-sc__facts > div:last-child { border-bottom: 0; } .cgr-sc__facts dt { margin: 0; color: var(--cgr-muted); font-size: 14px; } .cgr-sc__facts dd { margin: 0; color: var(--cgr-ink); font-size: 14px; font-weight: 600; text-align: right; } .cgr-sc__pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .cgr-sc__pros, .cgr-sc__cons { border-radius: var(--cgr-radius); padding: 18px 20px; } .cgr-sc__pros { background: #EEF9F3; } .cgr-sc__cons { background: #FFF5EC; } .cgr-sc__pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cgr-sc__pc li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--cgr-ink); line-height: 1.45; } .cgr-sc__ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; margin-top: 1px; } .cgr-sc__pros .cgr-sc__ic { background: #1A7F4B; } .cgr-sc__cons .cgr-sc__ic { background: #C2410C; } .cgr-sc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; } .cgr-sc__actions .cgr-btn { min-height: 52px; padding: 0 28px; font-size: 16px; } .cgr-sc__visit { flex: 0 1 320px; } .cgr-sc__rg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cgr-muted); margin-left: auto; } .cgr-sc__rg a { color: var(--cgr-accent2); } .cgr-sc__tested { margin: 0; font-size: 13px; color: var(--cgr-muted); } .cgr-sc__tested a { color: var(--cgr-accent2); } .cgr-sc .cgr-drow__nolink { margin: 0; } .cgr-sc--stacked .cgr-sc__top { grid-template-columns: auto minmax(0, 1fr); } .cgr-sc--stacked .cgr-sc__score { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 14px; } .cgr-sc--stacked .cgr-sc__grid, .cgr-sc--stacked .cgr-sc__pc { grid-template-columns: minmax(0, 1fr); } .cgr-sc--stacked .cgr-sc__visit { flex-basis: 100%; } .cgr-sc--stacked .cgr-sc__rg { margin-left: 0; } @media (max-width: 760px) { .cgr-sc { padding: 20px; gap: 20px; --cgr-ring: 92px; } .cgr-sc__top { grid-template-columns: auto minmax(0, 1fr); gap: 14px; } .cgr-sc__logo { width: 60px; height: 60px; } .cgr-sc__title { font-size: 22px; } .cgr-sc__score { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; } .cgr-sc__grid, .cgr-sc__pc { grid-template-columns: minmax(0, 1fr); gap: 20px; } .cgr-sc__bars li { grid-template-columns: 84px minmax(0, 1fr) 32px; font-size: 14px; } .cgr-sc__visit, .cgr-sc__actions .cgr-btn { flex: 1 1 100%; } .cgr-sc__rg { margin-left: 0; } } /* sticky Visit bar */ .cgr-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: var(--cgr-card); border-top: 1px solid var(--cgr-border); box-shadow: 0 -8px 24px -12px rgba(26, 10, 60, .35); padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .3s cubic-bezier(.22,1,.36,1); } .cgr-sticky.is-on { transform: none; } .cgr-sticky__in { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; } .cgr-sticky__name { font-weight: 700; color: var(--cgr-ink); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cgr-sticky__score { font-size: 13px; color: var(--cgr-muted); white-space: nowrap; } .cgr-sticky__score b { font-size: 17px; color: var(--cgr-ink); } .cgr-sticky .cgr-btn { min-height: 44px; padding: 0 22px; } .cgr-sticky__x { appearance: none; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--cgr-muted); cursor: pointer; padding: 4px 6px; } .cgr-sticky__rg { display: block; text-align: center; font-size: 11px; color: var(--cgr-muted); margin-top: 4px; } @media (min-width: 1025px) { .cgr-sticky:not(.cgr-sticky--all) { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cgr-sticky { transition: none; } } /* review extras */ .cgr-ur__reply { margin: 10px 0 0 0; padding: 12px 14px; border-left: 3px solid var(--cgr-accent); background: var(--cgr-top-bg); border-radius: 0 10px 10px 0; font-size: 14px; color: var(--cgr-text); } .cgr-ur__reply b { display: block; font-size: 13px; color: var(--cgr-ink); margin-bottom: 4px; } .cgr-ur__helpful { appearance: none; margin-top: 8px; font: inherit; font-size: 13px; color: var(--cgr-muted); background: none; border: 1px solid var(--cgr-border); border-radius: 999px; padding: 4px 12px; cursor: pointer; } .cgr-ur__helpful:hover { border-color: var(--cgr-accent); color: var(--cgr-accent2); } .cgr-ur__helpful[disabled] { opacity: .7; cursor: default; } /* =========================================================== THEME-PROOF BUTTONS Elementor Site Settings → Buttons (and many themes) style every