paragraphs, unlike -webkit-line-clamp). A soft fade at the bottom signals there is more to read. "Read More" is handled by JS — a popup for page cards, an in-modal slide for modal cards. */ .cmk-review.is-collapsible .cmk-review__text{ position:relative; max-height:11.2em; overflow:hidden; } .cmk-review.is-collapsible .cmk-review__text::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:2.6em; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff); pointer-events:none; } .cmk-review.is-collapsible .cmk-review__text > *:first-child{margin-top:0;} .cmk-review__full{display:none;} .cmk-review__more{ display:inline-block; margin-top:0; font-weight:800; font-size:.86rem; color:var(--cmk-rev-brand); cursor:pointer; background:none; border:0; padding:0; } .cmk-review__more:hover{text-decoration:underline;} /* Policy link at the top of the hero */ .cmk-rpage__herotext .cmk-rpage__policy{display:inline-block;margin:0 0 14px;color:#a9c6e6;font-weight:700;font-size:.9rem;text-decoration:underline;} .cmk-rpage__herotext .cmk-rpage__policy:hover{color:#fff;} /* ===== Show More reveal (large review sets) ===== */ /* Visually-hidden helper (kept in the HTML source for screen readers + AI). */ /* Visible result-count line below the filter bar: tells the visitor how many reviews they are seeing versus how many exist. [1.15.0] */ .cmk-rpage__resultcount{ margin:0 0 18px; font-size:.875rem; line-height:1.4; color:var(--cmk-rev-muted,#5b6472); font-weight:600; } /* Overflow reviews are hidden from sight but remain in the HTML source so AI crawlers and LLMs can read every review. "Show More" reveals them. */ .cmk-rpage__grid .cmk-review[data-overflow]{display:none;} .cmk-rpage__grid.is-expanded .cmk-review[data-overflow]{display:flex;} .cmk-rpage__grid.is-filtering .cmk-review[data-overflow]{display:flex;} .cmk-rpage__grid.is-filtering .cmk-review.is-hidden{display:none;} .cmk-rpage__morewrap{text-align:center;margin:26px 0 4px;} .cmk-rpage__more-btn{ font:inherit; font-weight:800; font-size:1rem; cursor:pointer; color:#fff; background:var(--cmk-rev-ink); border:0; padding:13px 30px; border-radius:999px; transition:background .12s ease,transform .12s ease; } .cmk-rpage__more-btn:hover{background:#1b2c3d;transform:translateY(-1px);} .cmk-rpage__morewrap.is-done{display:none;} /* Crawlable pagination (v1.13.0) --------------------------------------- */ .cmk-rpage__pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:28px 0 8px;} .cmk-rpage__pglink{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:8px 12px;border:1px solid var(--cmk-rev-border);border-radius:10px;background:var(--cmk-rev-bg);color:var(--cmk-rev-ink);font-weight:700;text-decoration:none;line-height:1;} .cmk-rpage__pglink:hover{border-color:var(--cmk-rev-ink);} .cmk-rpage__pglink.is-current{background:var(--cmk-rev-ink);color:#fff;border-color:var(--cmk-rev-ink);cursor:default;} .cmk-rpage__pgdots{color:#8a97a5;padding:0 2px;} .cmk-rpage__subhead{margin:0 0 18px;} .cmk-rpage__subhead .cmk-rpage__title{margin:0 0 6px;} .cmk-rpage__subnote{margin:0;color:#5b6b7b;font-size:.95rem;} a.cmk-rpage__fbtn{text-decoration:none;display:inline-flex;align-items:center;gap:7px;} /* Count badge inside each chip. Subtle pill that sits after the label, muted on inactive chips and inverted on the active (dark) chip. [1.15.0] */ .cmk-rpage__fbtn-label{white-space:nowrap;} .cmk-rpage__fcount{ display:inline-block; min-width:1.4em; padding:1px 6px; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.4; text-align:center; background:rgba(16,24,40,.07); color:var(--cmk-rev-muted,#5b6472); transition:background .12s ease,color .12s ease; } .cmk-rpage__fbtn:hover .cmk-rpage__fcount{background:rgba(16,24,40,.12);} .cmk-rpage__fbtn.is-active .cmk-rpage__fcount{background:rgba(255,255,255,.22);color:#fff;} /* ================================================================== [cmk_reviews_set] — compact strip + "read more" popup modal ================================================================== */ .cmk-set-block, .cmk-set-modal { --cmk-rev-brand:#cf2b34; --cmk-rev-gold:#f5a623; } .cmk-set-block { margin: 1.5em 0; } .cmk-set-block__title { font-size: 1.15rem; margin: 0 0 .75em; font-weight: 700; } .cmk-set-block__morewrap { margin-top: 1em; text-align: center; } .cmk-set-block__more { display: inline-flex; align-items: center; gap: .4em; background: var(--cmk-rev-brand); color: #fff; border: none; border-radius: 999px; padding: .7em 1.5em; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(207,43,52,.28); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .cmk-set-block__more:hover { background: #b21f27; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(207,43,52,.36); } .cmk-set-block__morecount { opacity: .7; font-weight: 500; } /* Modal */ .cmk-set-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 4vh 16px; } .cmk-set-modal.is-open { display: flex; } .cmk-set-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(2px); } .cmk-set-modal__dialog { position: relative; background: #fff; border-radius: 14px; width: min(920px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: cmkSetIn .18s ease; } @keyframes cmkSetIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .cmk-set-modal__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } .cmk-set-modal__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: #111827; } .cmk-set-modal__title::before { content: ''; flex: 0 0 auto; align-self: stretch; width: 5px; min-height: 1.15em; border-radius: 3px; background: var(--cmk-rev-brand); } .cmk-set-modal__title em { font-style: normal; color: var(--cmk-rev-brand); } .cmk-set-modal__close { background: #f3f4f6; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #374151; } .cmk-set-modal__close:hover { background: #e5e7eb; } .cmk-set-modal__body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.cmk-set-modal-open { overflow: hidden; } /* --- v1.9.0: sort bar, panes, metastars, strip --- */ .cmk-set-modal__sort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 20px; border-bottom: 1px solid #e5e7eb; background: #fafbfc; } .cmk-set-modal__sortlabel { flex: 0 0 100%; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #5b6773; margin: 0 0 2px; } .cmk-set-modal__chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .cmk-set-modal__chip { appearance: none; display: inline-flex; align-items: center; gap: .5em; border: 1.5px solid #cfe0f0; background: #fff; color: #1a73c7; border-radius: 999px; padding: .46em .55em .46em 1.05em; font-size: .88rem; font-weight: 700; line-height: 1.05; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease; } .cmk-set-modal__chiptxt { line-height: 1.05; } .cmk-set-modal__chipcount { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 1.55em; height: 1.55em; padding: 0 .42em; border-radius: 999px; background: #1a73c7; color: #fff; font-size: .74rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cmk-set-modal__chip:hover { border-color: #1a73c7; color: #155a9c; background: #f4f9ff; } .cmk-set-modal__chip.is-active { background: var(--cmk-rev-brand); border-color: var(--cmk-rev-brand); color: #fff; box-shadow: 0 2px 8px rgba(207,43,52,.28); } .cmk-set-modal__chip.is-active:hover { color: #fff; background: var(--cmk-rev-brand); border-color: var(--cmk-rev-brand); } .cmk-set-modal__chip.is-active .cmk-set-modal__chipcount { background: #fff; color: var(--cmk-rev-brand); } .cmk-set-modal__pane[hidden] { display: none !important; } .cmk-set-modal__pane { animation: cmkSetIn .16s ease; } .cmk-set-modal__empty { text-align: center; color: #6b7280; font-size: .95rem; padding: 32px 12px; } /* Stars moved into the modal meta row, right after the author name. */ .cmk-review__metastars { display: inline-flex; gap: 1px; line-height: 1; } .cmk-review__metastars .cmk-star { font-size: .92rem; } /* Strip cards: no top stars = shorter card. */ .cmk-review--strip .cmk-review__stars { display: none; } /* ================================================================== */ /* v1.10.0 — "Read More" popup (page cards) + in-modal slide detail */ /* ================================================================== */ /* --- Single-review popup used by [cmk_reviews] / strip cards --- */ .cmk-rev-popup { --cmk-rev-brand:#cf2b34; --cmk-rev-gold:#f5a623; display:none; position:fixed; inset:0; z-index:100001; align-items:center; justify-content:center; padding:20px; } .cmk-rev-popup.is-open { display:flex; } .cmk-rev-popup__backdrop { position:absolute; inset:0; background:rgba(15,26,38,.55); backdrop-filter:blur(2px); } .cmk-rev-popup__dialog { position:relative; background:#fff; border-radius:16px; max-width:560px; width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(15,26,38,.35); animation:cmkSetIn .18s ease; overflow:hidden; } .cmk-rev-popup__hd { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; /* 1.32.0: a little more room above the bigger title, and a hairline rule so the header reads as the dialog's title bar rather than as the first line of the review. */ padding:22px 22px 14px; border-bottom:1px solid #eef1f4; } /* 1.20.0 — the review title now shares this row with the close button instead of sitting in the body underneath it. That removes the band of dead whitespace that used to sit above the title. The title takes whatever width the button leaves (min-width:0 so long words can wrap rather than push the button off the edge), and the button never shrinks. */ .cmk-rev-popup__hdtitle{ flex:1 1 auto; min-width:0; } .cmk-rev-popup__hdtitle .cmk-rev-popup__headline{ margin:0; } .cmk-rev-popup__hd .cmk-rev-popup__close{ flex:0 0 auto; } .cmk-rev-popup__stars { display:flex; gap:2px; line-height:1; } .cmk-rev-popup__stars .cmk-star { font-size:1.15rem; } .cmk-rev-popup__close { background:#f3f4f6; border:none; width:34px; height:34px; min-width:34px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; color:#374151; } .cmk-rev-popup__close:hover { background:#e5e7eb; } .cmk-rev-popup__body { padding:0 24px 8px; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* The headline lives in the header now, so the first thing in the body is the review text. Give it a small top offset only — the header already supplies the breathing room. */ .cmk-rev-popup__body > .cmk-rev-popup__text:first-child{ /* 1.32.0: the header now carries a rule, so the text needs clearance from it rather than the old 2px nudge. */ margin-top:14px; } .cmk-rev-popup__headline { font-size:1.15rem; font-weight:800; color:var(--cmk-rev-ink,#0f1a26); margin:0 0 10px; line-height:1.3; } /* 1.19.0 — the rating badge in the popup headline is a real element again, so it keeps the gold treatment it has on the card and no longer collides with the first word of the title. The gap lives here (not in the markup) so it stays correct when the title wraps. */ .cmk-rev-popup__headline .cmk-review__rating{ margin-right:9px; position:relative; top:-2px; } .cmk-rev-popup__htext{vertical-align:baseline;} /* In the header row the title sits beside a 34px round button, so keep the type a touch tighter than the old body-placed headline and cap it at three lines: past that the title stops being a title and the body text is the thing worth reading. */ .cmk-rev-popup__hdtitle .cmk-rev-popup__headline{ /* 1.32.0 - this was 1.08rem, a hair above the 1rem body text and lighter than the author line at the foot of the dialog, so the title read as a caption instead of the heading of the thing you just opened. clamp() keeps it large on a desktop dialog without overflowing a 360px phone, and the clamp goes from 3 lines to 4 because bigger type wraps sooner. */ font-size:clamp(1.25rem, 1.05rem + 1vw, 1.6rem); font-weight:800; line-height:1.24; letter-spacing:-.01em; color:var(--cmk-rev-ink,#0f1a26); /* 1.32.0 - measured bug, not a style preference. The v1.20.0 test asserts min-width:0 on the wrapper and its comment claims that is what "lets long words wrap instead of shoving the button out". It isn't. min-width:0 only lets the flex item shrink below its intrinsic width; it gives the browser no permission to break a word. Combined with the overflow:hidden below, a single unbreakable word was CLIPPED rather than wrapped - measured at 421px of the title invisible on a 360px phone, and identically at clamp 3, 4 and 5, which is how we know the clamp was never what contained it. .cmk-review__text has carried overflow-wrap since 1.11.x; the popup headline never did. */ overflow-wrap:break-word; word-break:break-word; display:-webkit-box; /* 1.32.0 - 3 -> 4. Measured: at 3, 4 and 5 lines the dialog never exceeds the viewport and the close button never leaves the dialog on 360/390/ 1440px, so the clamp is a readability budget and not a containment one. The headline went from 1.08rem (17.3px) to 20.4px on a phone and 25.6px on desktop, so the same words now need 1.18x-1.48x more lines. 4 keeps about as much of the title readable as 3 did at the old size; keeping 3 would show LESS title than v1.31.0 while the reported complaint was that the title was too hard to read. */ -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } /* The popup lives on
, outside any .cmk-review, so the card's [data-rating] muting rules cannot reach it. Mirror them against the headline's own data-rating so a 4-star popup is grey, not gold. */ .cmk-rev-popup__headline[data-rating="4"] .cmk-review__rating, .cmk-rev-popup__headline[data-rating="3"] .cmk-review__rating, .cmk-rev-popup__headline[data-rating="2"] .cmk-review__rating, .cmk-rev-popup__headline[data-rating="1"] .cmk-review__rating{ background:#f6f8fa; border-color:#e2e8ee; } .cmk-rev-popup__headline[data-rating="4"] .cmk-review__ratingnum, .cmk-rev-popup__headline[data-rating="3"] .cmk-review__ratingnum, .cmk-rev-popup__headline[data-rating="2"] .cmk-review__ratingnum, .cmk-rev-popup__headline[data-rating="1"] .cmk-review__ratingnum{ color:#54606c; } .cmk-rev-popup__headline[data-rating="4"] .cmk-review__rating .cmk-star, .cmk-rev-popup__headline[data-rating="3"] .cmk-review__rating .cmk-star, .cmk-rev-popup__headline[data-rating="2"] .cmk-review__rating .cmk-star, .cmk-rev-popup__headline[data-rating="1"] .cmk-review__rating .cmk-star{ color:#9aa7b2; } .cmk-rev-popup__text { margin:0; font-size:1rem; line-height:1.65; color:#31414f; } .cmk-rev-popup__text p { margin:0 0 12px; } .cmk-rev-popup__text p:last-child { margin-bottom:0; } .cmk-rev-popup__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.85rem; border-top:1px solid #eef1f4; margin:16px 24px 0; padding:14px 0 20px; } /* 1.32.0 - "bold the author line". * * The class this originally styled (.cmk-rev-popup__author) is emitted by no * PHP and no JS in this plugin - it was only ever in this stylesheet, so the * rule did nothing. The class both popups really emit is .cmk-review__author: * the grid popup clones it from the card's meta row, and the band popup now * builds it in bandMetaHTML() by splitting the flat "Author | Date on Source" * string that band_attribution() prints. * * .cmk-review__author is already font-weight:800 globally (see the grid rules * near the top of this file), so making the line read as bold is not a matter * of adding weight - it is a matter of letting the name WIN ITS ROW. It steps * up out of the .85rem meta scale to 1.02rem and keeps full ink, while the * date/source tail beside it is muted and stays small. Scoped to the popup * meta row so nothing on the page behind the dialog is touched. */ .cmk-rev-popup__meta .cmk-review__author { font-weight:800; font-size:1.02rem; line-height:1.35; color:var(--cmk-rev-ink,#0f1a26); letter-spacing:-.005em; } .cmk-rev-popup__meta .cmk-review__date, .cmk-rev-popup__meta .cmk-review__source { font-size:.85rem; color:#5b6a78; } /* --- In-modal slide: grid slides left, detail comes in from right --- */ .cmk-set-modal__stage { position:relative; overflow:hidden; } /* The active grid pane starts at rest; when a review opens it swoops out to the LEFT. It's absolutely positioned so the detail can occupy the same box without a layout jump. */ .cmk-set-modal__stage .cmk-set-modal__pane:not(.cmk-set-modal__detail) { transform:translateX(0); opacity:1; transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease; will-change:transform; } .cmk-set-modal__stage.is-detail .cmk-set-modal__pane:not(.cmk-set-modal__detail) { transform:translateX(-100%); opacity:0; pointer-events:none; position:absolute; inset:0; max-height:100%; overflow:hidden; } /* The detail pane sits off-screen to the RIGHT and swoops in to rest. It is always absolutely positioned within the stage so both directions animate over the same box (no reflow glitch). */ .cmk-set-modal__detail { position:absolute; inset:0; transform:translateX(100%); opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease; will-change:transform; overflow:auto; } .cmk-set-modal__stage.is-detail .cmk-set-modal__detail { transform:translateX(0); opacity:1; pointer-events:auto; } .cmk-set-modal__detail[hidden] { display:none; } .cmk-set-modal__back { display:inline-flex; align-items:center; gap:.4em; background:none; border:0; padding:4px 2px; margin:0 0 16px; font-weight:800; font-size:.9rem; color:var(--cmk-rev-brand); cursor:pointer; } .cmk-set-modal__back:hover { text-decoration:underline; } .cmk-set-modal__back::before { content:"\2190"; font-size:1.15em; line-height:1; position:relative; top:-.06em; } .cmk-set-modal__detail .cmk-rev-popup__headline { font-size:1.3rem; } .cmk-set-modal__detail .cmk-rev-popup__text { font-size:1.02rem; } .cmk-set-modal__detail .cmk-rev-popup__meta { margin-left:0; margin-right:0; } body.cmk-rev-popup-open { overflow:hidden; } /* --- v1.11.0: single-review detail refinements --- */ /* Task D: hide the "Sort Reviews By" bar while a single review is open. */ .cmk-set-modal.is-detail-open .cmk-set-modal__sort { display: none; } /* v1.11.5: On phones the "Sort Reviews By" bar in the reviews modal is compact - smaller label + chips laid out in exactly TWO rows that scroll horizontally (unlimited columns). Placed AFTER the base .cmk-set-modal__chips flex rule so it wins on source order at <=640px (media queries add no specificity). */ @media (max-width:640px){ .cmk-set-modal__sort{padding:10px 14px;} .cmk-set-modal__sortlabel{font-size:.64rem;margin:0 0 4px;} .cmk-set-modal__chips{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-auto-columns:max-content; gap:6px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:4px; } .cmk-set-modal__chip{ font-size:.76rem; padding:.34em .5em .34em .85em; white-space:nowrap; } .cmk-set-modal__chipcount{font-size:.72rem;} } /* The stage's height is locked in JS to the grid's exact height on open (and released on close), so the dialog keeps its full size while viewing one review — no shrink/jump. */ /* Task C: the detail pane is a column with the review first and the "Back to all reviews" button pinned to the BOTTOM. */ .cmk-set-modal__detail { display: flex; flex-direction: column; min-height: 100%; } .cmk-set-modal__detail .cmk-set-modal__detail-content { order: 1; } .cmk-set-modal__detail .cmk-set-modal__back { order: 2; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #eef1f4; align-self: flex-start; } /* ========================================================================== [cmk_reviews_showcase] - the "2025 Format Page A" block 1.21.0 -------------------------------------------------------------------------- Migrated from BT Custom Main 4.5's reviews module. Every value here was read off the live page at /2025-format-page-a/ so the block is visually identical after the migration: brand red #d0272f, the #e8e9eb card rail, 300px cards, 45px avatar discs, #ffc107 stars and the #8b0000 Read More button. Everything is namespaced .cmk-showcase* precisely so it cannot collide with the .cmk-review* grid styles that the rest of the plugin uses. The only shared classes are on the cards themselves, which are intentionally the same .cmk-review figures used everywhere else so the popup keeps working. ========================================================================== */ .cmk-showcase{ --cmk-sc-red:#d0272f; --cmk-sc-line:#e0e0e0; --cmk-sc-rail:#e8e9eb; max-width:1400px; margin:0 auto; padding:20px 0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; /* Keep the whole block below any modal from another plugin on the page. */ position:relative; z-index:0; } .cmk-showcase__title{ margin:0 0 14px; font-size:30px; font-weight:700; line-height:1.1; color:#1a3a5c; border-bottom:3px solid #1a3a5c; padding-bottom:6px; } /* -- top row: header box + praise panel, equal halves ---------------------- */ .cmk-showcase__top{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; align-items:start; } .cmk-showcase__headbox{ background:#fff; border:1px solid var(--cmk-sc-line); border-left:4px solid var(--cmk-sc-red); padding:15px 20px; } .cmk-showcase__headrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; } .cmk-showcase__headtitle{ font-size:1rem; font-weight:600; color:#333; line-height:1.2; text-transform:uppercase; } .cmk-showcase__headdiv{ width:1px; height:20px; background:#ddd; flex:0 0 auto; } .cmk-showcase__logos{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } /* Outlined brand chips. Unknown platforms fall back to the neutral style, so adding a platform in the summary settings can never render an unstyled box. */ .cmk-showcase__logo{ padding:4px 10px; background:#fff; border:2px solid #9aa7b2; border-radius:3px; font-weight:600; font-size:.75rem; line-height:1.2; color:#5a6b7b; white-space:nowrap; } .cmk-showcase__logo--trustpilot{color:#00b67a;border-color:#00b67a;} .cmk-showcase__logo--yelp{color:#d32323;border-color:#d32323;} .cmk-showcase__logo--google{color:#4285f4;border-color:#4285f4;} .cmk-showcase__logo--reddit{color:#ff4500;border-color:#ff4500;} .cmk-showcase__logo--bbb{color:#0b5ea8;border-color:#0b5ea8;} .cmk-showcase__logo--facebook{color:#1877f2;border-color:#1877f2;} /* -- key stats ------------------------------------------------------------ */ .cmk-showcase__stats{ display:flex; gap:20px; align-items:center; padding-top:12px; border-top:1px solid var(--cmk-sc-line); flex-wrap:wrap; } .cmk-showcase__stat{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto; } .cmk-showcase__statnum{ font-weight:700; font-size:1.2rem; color:var(--cmk-sc-red); line-height:1; } .cmk-showcase__statlabel{ font-size:.75rem; color:#666; text-align:center; line-height:1.2; } .cmk-showcase__statdiv{ width:1px; height:30px; background:#ddd; flex:0 0 auto; } /* -- common praise -------------------------------------------------------- */ .cmk-showcase__praise{ background:#fff; border:1px solid var(--cmk-sc-line); padding:15px 20px; } .cmk-showcase__praisetitle{ margin:0 0 12px; font-size:.9rem; font-weight:600; color:#333; text-transform:uppercase; letter-spacing:.5px; line-height:1; } .cmk-showcase__tags{ display:flex; flex-wrap:wrap; gap:8px; } .cmk-showcase__tag{ background:var(--cmk-sc-red); color:#fff; padding:5px 10px; border-radius:3px; font-size:.7rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; line-height:1.2; flex:0 0 auto; } .cmk-showcase__tagcount{ background:rgba(255,255,255,.25); padding:2px 6px; border-radius:10px; font-size:.65rem; font-weight:700; } /* -- the card rail -------------------------------------------------------- */ .cmk-showcase__rail{ background:var(--cmk-sc-rail); border:1px solid var(--cmk-sc-line); padding:30px; position:relative; z-index:0; } .cmk-showcase__track{ display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--cmk-sc-red) #f0f0f0; padding-bottom:15px; margin-bottom:-15px; /* Let the flex items keep their own height rather than stretching to the tallest card, which is what pins Read More to each card's own bottom. */ align-items:stretch; } .cmk-showcase__track::-webkit-scrollbar{height:12px;} .cmk-showcase__track::-webkit-scrollbar-track{background:#f0f0f0;margin-top:8px;} .cmk-showcase__track::-webkit-scrollbar-thumb{background:var(--cmk-sc-red);border-radius:6px;} /* -- cards inside the rail ------------------------------------------------ */ /* These override the grid card defaults for this context only. */ .cmk-showcase .cmk-review--showcase{ min-width:300px; max-width:300px; flex:0 0 300px; background:#fff; border:1px solid var(--cmk-sc-line); border-radius:8px; padding:20px; margin:0; display:flex; flex-direction:column; position:relative; z-index:0; } .cmk-showcase__cardhead{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; } .cmk-showcase__avatar{ width:45px; height:45px; border-radius:50%; background:#e0e0e0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#666; flex:0 0 auto; } /* min-width:0 lets a long name wrap instead of forcing the badge out of the card - the same load-bearing trick as the popup title (RULE 13c). */ .cmk-showcase__who{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; } .cmk-showcase__name{ font-size:.95rem; font-weight:600; color:#333; line-height:1.2; } .cmk-showcase__date{ font-size:.75rem; color:#999; line-height:1.2; } .cmk-showcase__badge{ padding:4px 8px; border-radius:3px; font-size:.65rem; font-weight:700; text-transform:uppercase; color:#fff; white-space:nowrap; background:#5a6b7b; flex:0 0 auto; align-self:flex-start; } .cmk-showcase__badge--trustpilot{background:#00b67a;} .cmk-showcase__badge--yelp{background:#d32323;} .cmk-showcase__badge--google{background:#4285f4;} .cmk-showcase__badge--bbb{background:#0b5ea8;} .cmk-showcase__badge--facebook{background:#1877f2;} .cmk-showcase__badge--site{background:var(--cmk-sc-red);} .cmk-showcase__stars{ display:flex; gap:2px; margin-bottom:12px; line-height:1; } .cmk-showcase__stars .cmk-star{ color:#ffc107; font-size:1rem; } .cmk-showcase .cmk-review--showcase .cmk-review__headline{ margin:0 0 8px; font-size:.95rem; font-weight:700; color:#333; line-height:1.35; } .cmk-showcase .cmk-review--showcase .cmk-review__text{ color:#555; line-height:1.5; font-size:.9rem; margin:0 0 12px; border:0; padding:0; font-style:normal; } .cmk-showcase .cmk-review--showcase .cmk-review__text p{margin:0 0 .6em;} .cmk-showcase .cmk-review--showcase .cmk-review__text p:last-child{margin-bottom:0;} /* Clamp the teaser so every card starts the same height, then let Read More sit at the bottom. margin-top:auto is what pins it (RULE 13a) - flex:1 on a clamped element cannot work, which is the bug 1.19.0 fixed on the grid. */ .cmk-showcase .cmk-review--showcase.is-collapsible .cmk-review__text{ display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; flex:0 1 auto; } .cmk-showcase .cmk-review--showcase .cmk-review__more{ margin-top:auto; align-self:flex-start; background:#8b0000; color:#fff; border:0; padding:10px 24px; border-radius:4px; font-weight:600; font-size:.9rem; line-height:1.2; cursor:pointer; text-align:center; text-decoration:none; } .cmk-showcase .cmk-review--showcase .cmk-review__more:hover, .cmk-showcase .cmk-review--showcase .cmk-review__more:focus{ background:#6b0000; color:#fff; } /* -- responsive ----------------------------------------------------------- */ @media (max-width:900px){ .cmk-showcase__top{grid-template-columns:1fr;} } @media (max-width:768px){ .cmk-showcase__rail{padding:20px 15px;} .cmk-showcase__title{font-size:1.7em;} .cmk-showcase .cmk-review--showcase{ min-width:270px; max-width:270px; flex-basis:270px; } } /* ================================================================== Homepage review band [cmk_reviews_band] v1.22.0 ------------------------------------------------------------------ A faithful port of the hardcoded Divi blurb band that used to live inside #reviewnav on the homepage. Every value here was read off the live page with getComputedStyle before the block was replaced, so this is a migration and not a redesign. Everything is namespaced under .cmk-band so it can never reach the review grid (whose design is frozen by RULE 3) or the showcase. ================================================================== */ .cmk-band { --cmk-band-blue: #1a5a7f; --cmk-band-body: #666; --cmk-band-col: 500px; --cmk-band-gap: 0px; --cmk-band-navbg: #e9e9e9; /* * NOTE: --cmk-band-vw is deliberately NOT declared here. See the * .cmk-band--full block below; declaring it on this element would shadow * the measured value reviews.js sets on and permanently pin the * band to the 100vw fallback. */ position: relative; box-sizing: border-box; margin: 0; padding: 0; } /* * Full bleed (1.24.0). The band lives inside a Divi row that is capped at the * theme's content width, but the homepage design runs the review strip edge to * edge. This breaks it out of any centred container without needing the theme * to cooperate: take the full viewport width, then pull left by exactly half * the difference between that and the container. * * `max-width` is released for the same width because Divi sets max-width on * descendants, which would otherwise silently clamp the breakout back to the * row width. * * --cmk-band-vw is the viewport width EXCLUDING the vertical scrollbar, written * to by reviews.js from documentElement.clientWidth on load, resize and * orientation change. The `100vw` below is ONLY the var() fallback used before * that script runs. It must stay expressed as a fallback ARGUMENT and must never * be promoted to a `--cmk-band-vw: 100vw` declaration on .cmk-band: a custom * property declared on the element shadows the inherited one, the measurement * would be ignored, and the band would render one scrollbar-width too wide and * push a horizontal scrollbar onto the page. That regression shipped briefly * during 1.24.0 development and was caught in browser verification. See RULE 18e. */ .cmk-band--full { width: var(--cmk-band-vw, 100vw); max-width: var(--cmk-band-vw, 100vw); margin-left: calc( 50% - ( var(--cmk-band-vw, 100vw) / 2 ) ); margin-right: calc( 50% - ( var(--cmk-band-vw, 100vw) / 2 ) ); } .cmk-band *, .cmk-band *::before, .cmk-band *::after { box-sizing: border-box; } .cmk-band__title { margin: 0 0 12px; padding: 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--cmk-band-blue); } /* The scroller. The live band was display:flex + overflow-x:scroll on the section itself with 500px columns; that is reproduced here on an inner element so the nav row can sit outside the scrolling area. */ .cmk-band__scroll { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--cmk-band-gap); overflow-x: auto; overflow-y: hidden; padding: 10px 10px 14px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* * Scrollbar hidden, scrolling kept (1.24.0). The strip is driven by the * NAVIGATE arrows, and a visible bar under the cards read as a stray UI * element rather than part of the design. The element stays scrollable by * wheel, trackpad, touch, arrows and keyboard - only the bar is painted * out, which is why overflow stays `auto` and is never set to `hidden`. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge / IE */ } .cmk-band__scroll::-webkit-scrollbar { /* Chrome, Safari, Edge. width/height 0 as well as display:none, because some builds honour only one of the two. */ display: none; width: 0; height: 0; } /* * Automatic stacking (1.25.0). * * Before the script runs, the cards are a flat ordered list inside the * scroller. Give them the column width so the un-packed state is already * readable and roughly the right shape rather than a full-width pile; the * script then wraps them in real .cmk-band__col elements. * * Real column elements are used rather than CSS multi-column or flex * column-wrap because the NAVIGATE arrows measure a column to work out how far * one press should scroll (RULE 16d). Both of those CSS techniques produce * columns with no element to measure, which would silently break the arrows. * See RULE 19. */ .cmk-band__scroll--autostack > .cmk-band__card { flex: 0 0 var(--cmk-band-col); width: var(--cmk-band-col); max-width: var(--cmk-band-col); } /* * A column whose single card is taller than the cap. The cap is a SOFT target: * a card is never squeezed or clipped to meet it, because that would cut a * customer's words off mid-sentence. The column simply grows. See RULE 19c. */ .cmk-band__col--tall { align-self: flex-start; } /* One 500px column holding N stacked cards, exactly as the live rows did. */ .cmk-band__col { flex: 0 0 var(--cmk-band-col); width: var(--cmk-band-col); max-width: var(--cmk-band-col); padding: 10px 5px 0; } /* The quote box: white on a 2px solid blue border, square corners, no shadow. Matches the live computed style byte for byte. */ /* * 1.31.0: a flex COLUMN rather than a block. * * The author/date/source line is the card's footer and the owner wants it at * the bottom of every card, at a consistent height, whether or not that card * has a "Read more" button. As a plain block the footer simply followed the * text, so it floated at a different height on every card and the button * pushed it further down. As a flex column the text takes the free space and * the footer is the last item, so it lands on the bottom edge every time. */ .cmk-band__card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--cmk-band-blue); border-radius: 0; box-shadow: none; padding: 15px 10px 5px; margin: 0 0 13px; } /* Take the slack so the footer below is pushed to the bottom edge. */ .cmk-band__card > .cmk-band__text { flex: 1 1 auto; } /* The footer never shrinks and never absorbs slack - it just sits last. */ .cmk-band__card > .cmk-band__attr { flex: 0 0 auto; margin-top: auto; } .cmk-band__col > .cmk-band__card:last-child { margin-bottom: 0; } /* 1.23.0 - a review flagged "Own column" gets the whole column to itself. The column width is unchanged, so the horizontal rhythm of the strip and the one-column-per-click arrow step both still line up exactly; only the vertical stacking differs. The card is allowed to grow to the full height so a long quote reads as deliberate rather than as a gap. */ .cmk-band__col--solo { display: flex; flex-direction: column; } .cmk-band__col--solo > .cmk-band__card { flex: 1 1 auto; margin-bottom: 0; } .cmk-band__headline { margin: 0; padding: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 20px; text-transform: uppercase; color: var(--cmk-band-blue); } .cmk-band__text { font-size: 14px; font-weight: 500; line-height: 23.8px; color: var(--cmk-band-body); } .cmk-band__text p { margin: 0 0 10px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; } .cmk-band__text p:last-child { margin-bottom: 0; } /* * 1.30.0 - the text clamp that actually fixes the strip height. * * The band was the only review renderer printing a review in full. Real data * runs from 3 to 2101 characters, so one long quote rendered an 848px card, * and because a card is never squeezed or clipped to meet the column cap * (RULE 19c) that single card set the height of the whole strip - 882px * measured, with 562px of dead background under the short columns. * * Clamping the TEXT is what lowers the strip, and it is safe because "Read * more" opens the full review in the popup the grid already uses. This is the * same 1.25.0-era treatment .cmk-review.is-collapsible has always had; the * band simply never got it. The height comes from a custom property so the * clamp="" shortcode attribute can tune it per band without new CSS. */ .cmk-band__card--clamp .cmk-band__text { position: relative; max-height: var(--cmk-band-clamp, 16em); overflow: hidden; } /* * 1.31.0: inside the flex column a clamped block would still be stretched by * flex-grow up to its max-height, which would float the fade away from the * last visible line. Growing is only wanted on UNCLAMPED text. */ .cmk-band__card--clamp > .cmk-band__text { flex: 0 1 auto; } /* Fade the last line so it reads as "there is more" rather than as a mistake. */ .cmk-band__card--clamp .cmk-band__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff ); pointer-events: none; } /* Only shown when the text is genuinely taller than the clamp - reviews.js unhides it, so a short review never gets a pointless "Read more". */ /* * 1.31.0: centred, and sitting ABOVE the attribution rather than after it. * align-self keeps it from stretching to the full card width inside the flex * column, and flex:0 0 auto stops it absorbing the slack that must go to the * text so the footer can reach the bottom. */ .cmk-band__more { display: inline-block; align-self: center; flex: 0 0 auto; margin: 10px 0 4px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--cmk-band-blue); cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; } .cmk-band__more:hover, .cmk-band__more:focus-visible { text-decoration: underline; } .cmk-band__more[hidden] { display: none; } /* The full copy rides along for the popup and must never paint in the card. */ .cmk-band__full { display: none; } /* Attribution line, right aligned, uppercase, black - the old