/* ========================================================================== SLYNUMBER vs comparison pages Built from Figma "SLYNUMBER Website" — "SLYNUMBER vs Talkatone Landing_Page" (node 700-52). Shared by every /compare/slynumber-vs-* page, so keep the copy out of here and the selectors competitor-agnostic. Loaded from the CMS page , i.e. BEFORE the Webflow theme sheet, so every rule is scoped under `.cmp-page` to outrank the theme's base classes. Design tokens (mirrors homepage.css): Primary accent #7045f0 · Light accent #efeaff · Cherry #cd3437 Body gray #6f7180 · Meta gray #a1a1a6 · Page bg #f3f3f3 Heading gradient 90deg #7248f1 → #836ef9 47% → #ad87ff Type: Montserrat (loaded globally via critical-css) ========================================================================== */ .cmp-page { --cmp-accent: #7045f0; --cmp-accent-light: #efeaff; --cmp-cherry: #cd3437; --cmp-them: #0170c7; /* the competitor's own brand blue, for its score + bars */ --cmp-ink: #000; --cmp-muted: #6f7180; --cmp-meta: #a1a1a6; --cmp-stroke: #b7b7b7; --cmp-card-line: #e0e0e0; --cmp-row-line: #e6e8e4; --cmp-track: #ebebeb; --cmp-bg: #f3f3f3; background: var(--cmp-bg); color: var(--cmp-ink); font-family: Montserrat, 'Montserrat Fallback', sans-serif; overflow: hidden; } /* -------------------------------------------------------------------------- Layout primitives — the Figma content column is 1209px wide, with the text/panel blocks constrained to 901px inside it. -------------------------------------------------------------------------- */ .cmp-page .cmp-container { width: 100%; max-width: 1257px; /* 1209 + 2 × 24 gutter */ margin: 0 auto; padding: 0 24px; } .cmp-page .cmp-narrow { width: 100%; max-width: 901px; margin: 0 auto; } .cmp-page .cmp-section { padding: 40px 0; } /* Typography ---------------------------------------------------------------- */ .cmp-page .cmp-eyebrow { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmp-accent); } .cmp-page .cmp-h1 { margin: 0; max-width: 700px; font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; text-align: center; color: var(--cmp-ink); } .cmp-page .cmp-h2 { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-align: center; color: var(--cmp-ink); } .cmp-page .cmp-h2.is-sm { font-size: 32px; } .cmp-page .cmp-h2.is-lg { font-size: 48px; line-height: 53px; letter-spacing: -0.04em; } .cmp-page .cmp-lead { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; color: var(--cmp-muted); } .cmp-page .cmp-note { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.5; text-align: center; color: var(--cmp-muted); } .cmp-page .cmp-gradient { background-image: linear-gradient(90deg, #7248f1, #836ef9 47%, #ad87ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cmp-page .cmp-accent { color: var(--cmp-accent); } .cmp-page .cmp-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 24px; max-width: 900px; } .cmp-page .cmp-head:last-child { margin-bottom: 0; } /* Buttons ------------------------------------------------------------------- */ .cmp-page .cmp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .cmp-page .cmp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 12px 26px; border-radius: 25px; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .cmp-page .cmp-btn-primary { background: var(--cmp-accent); border: 0.2px solid var(--cmp-accent); color: #fff; } .cmp-page .cmp-btn-primary:hover { background: #5e36d6; border-color: #5e36d6; } .cmp-page .cmp-btn-ghost { background: #fff; border: 0.2px solid var(--cmp-stroke); color: var(--cmp-ink); } .cmp-page .cmp-btn-ghost:hover { background: #f3f3f3; } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ .cmp-page .cmp-hero { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 0 20px; } .cmp-page .cmp-hero .cmp-lead { max-width: 901px; } .cmp-page .cmp-hero-img { display: block; width: 100%; max-width: 901px; aspect-ratio: 901 / 352; height: auto; border-radius: 25px; object-fit: cover; object-position: center 22%; } /* Pages whose hero art is a wide product composition rather than a purpose-built 901x352 crop: render at the asset's own ratio so nothing gets clipped. */ .cmp-page .cmp-hero-img.is-uncropped { aspect-ratio: auto; height: auto; object-fit: contain; object-position: center; } /* -------------------------------------------------------------------------- KEY TAKEAWAYS -------------------------------------------------------------------------- */ .cmp-page .cmp-takeaways { background: #fff; border-radius: 20px; padding: 30px 30px 40px; } .cmp-page .cmp-takeaways-title { margin: 0 0 6px; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--cmp-ink); } .cmp-page .cmp-takeaway { display: flex; gap: 20px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--cmp-row-line); } .cmp-page .cmp-takeaway:first-of-type { border-top: 0; } .cmp-page .cmp-takeaway-icon { flex: none; display: block; width: 24px; height: 24px; margin-top: 1px; } .cmp-page .cmp-takeaway-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--cmp-ink); } .cmp-page .cmp-takeaway-body { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--cmp-muted); } /* -------------------------------------------------------------------------- SCOREBOARD — "1 : 7 features included standard" -------------------------------------------------------------------------- */ .cmp-page .cmp-scoreboard { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; padding: 30px 40px; border-radius: 20px; } /* Figma sizes the card at 169px around a 149px caption. Real Montserrat runs a few px wider than that, and translated captions wider still, so the card is allowed to grow instead of breaking the caption onto a second line. */ .cmp-page .cmp-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 169px; max-width: 200px; padding: 10px; background: #fff; border: 1px solid #e6e6e6; border-radius: 15px; } .cmp-page .cmp-score-num { margin: 0; font-size: 56px; font-weight: 800; line-height: 1.2; } .cmp-page .cmp-score-num.is-them { color: var(--cmp-them); } .cmp-page .cmp-score-num.is-us { color: var(--cmp-accent); } .cmp-page .cmp-score-logo { display: block; width: 136px; height: 44px; object-fit: contain; } /* Competitor wordmark. Pages that ship a committed logo use .cmp-score-logo directly; pages that take the logo from their Strapi compare entry wrap the placeholder in .cmp-score-logo-slot, where a styled competitor name stands in until a logo is uploaded so the card is never blank. The injected img carries width="231" and .image-13 (10px theme margins) — both tamed here. */ .cmp-page .cmp-score-logo-slot { display: flex; align-items: center; justify-content: center; width: 136px; height: 44px; } .cmp-page .cmp-score-logo-slot img { display: block; width: auto; height: auto; max-width: 136px; max-height: 44px; margin: 0; object-fit: contain; } .cmp-page .cmp-score-name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-align: center; color: var(--cmp-them); } .cmp-page .cmp-score-logo-slot:has(img) .cmp-score-name { display: none; } .cmp-page .cmp-score-caption { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.2; text-align: center; color: var(--cmp-meta); } .cmp-page .cmp-score-vs { margin: 0; font-size: 20px; font-weight: 600; color: var(--cmp-muted); } /* -------------------------------------------------------------------------- METERS — per-feature bars, competitor vs SLYNUMBER -------------------------------------------------------------------------- */ .cmp-page .cmp-meters { background: #fff; border-radius: 20px; padding: 0 28px; margin: 24px auto 0; } .cmp-page .cmp-meter-row { display: flex; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cmp-card-line); } .cmp-page .cmp-meter-row.is-head { align-items: flex-start; padding: 20px 0 16px; } .cmp-page .cmp-meter-row:last-child { border-bottom: 0; } .cmp-page .cmp-meter-label { flex: none; width: 280px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--cmp-ink); } .cmp-page .cmp-meter-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .cmp-page .cmp-meter-colhead { flex: 1 1 0; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; text-align: center; color: var(--cmp-meta); } .cmp-page .cmp-meter-colhead.is-us { color: var(--cmp-accent); } .cmp-page .cmp-meter-track { width: 100%; height: 8px; border-radius: 5px; background: var(--cmp-track); overflow: hidden; } .cmp-page .cmp-meter-fill { display: block; height: 8px; border-radius: 5px; } .cmp-page .cmp-meter-fill.is-full { width: 100%; background: var(--cmp-accent); } .cmp-page .cmp-meter-fill.is-partial { width: 52%; background: var(--cmp-cherry); } .cmp-page .cmp-meter-fill.is-them { width: 100%; background: var(--cmp-them); } .cmp-page .cmp-meter-fill.is-limited { width: 52%; background: var(--cmp-cherry); } .cmp-page .cmp-meter-state { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; letter-spacing: 0.02em; color: var(--cmp-stroke); } .cmp-page .cmp-meter-state.is-included { color: var(--cmp-accent); } .cmp-page .cmp-meter-state.is-paid { color: var(--cmp-cherry); } .cmp-page .cmp-meter-state.is-them { color: var(--cmp-them); } .cmp-page .cmp-meter-state.is-limited { color: var(--cmp-cherry); } .cmp-page .cmp-legend { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; padding-top: 18px; } .cmp-page .cmp-legend-item { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; font-weight: 400; color: var(--cmp-muted); } .cmp-page .cmp-legend-dot { flex: none; width: 9px; height: 9px; border-radius: 3px; } .cmp-page .cmp-legend-dot.is-none { background: var(--cmp-meta); } .cmp-page .cmp-legend-dot.is-paid { background: var(--cmp-cherry); } .cmp-page .cmp-legend-dot.is-included { background: var(--cmp-accent); } /* -------------------------------------------------------------------------- GUARANTEES — icon list beside a product photo -------------------------------------------------------------------------- */ .cmp-page .cmp-guarantees-grid { display: grid; grid-template-columns: 536fr 628fr; gap: 45px; align-items: center; } .cmp-page .cmp-guarantees-list { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 20px 30px; background: #fff; border: 0.5px solid var(--cmp-stroke); border-radius: 30px; } .cmp-page .cmp-guarantee { display: flex; gap: 30px; align-items: center; padding: 15px 0; } .cmp-page .cmp-guarantee-badge { flex: none; display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; background: var(--cmp-bg); border-radius: 10px; } .cmp-page .cmp-guarantee-eyebrow { margin: 0; font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: -0.04em; color: var(--cmp-muted); } .cmp-page .cmp-guarantee-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 32px; letter-spacing: -0.04em; color: var(--cmp-ink); } .cmp-page .cmp-guarantee-title.is-accent { color: var(--cmp-accent); } .cmp-page .cmp-guarantee-body { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -0.02em; color: var(--cmp-muted); } .cmp-page .cmp-guarantees-img { display: block; width: 100%; aspect-ratio: 628 / 565; height: auto; border: 0.5px solid var(--cmp-stroke); border-radius: 30px; object-fit: cover; object-position: 80% center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* -------------------------------------------------------------------------- CARD GRID — used by "Where a real number matters most", call handling, and "Why people switch" -------------------------------------------------------------------------- */ .cmp-page .cmp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .cmp-page .cmp-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--cmp-card-line); border-radius: 14px; } .cmp-page .cmp-card-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--cmp-ink); } .cmp-page .cmp-card-body { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--cmp-muted); } /* -------------------------------------------------------------------------- SPLIT — photo beside a big heading and a ruled list -------------------------------------------------------------------------- */ .cmp-page .cmp-split { display: grid; grid-template-columns: 548fr 606fr; gap: 35px; align-items: center; } .cmp-page .cmp-split-img { display: block; width: 100%; aspect-ratio: 548 / 719; height: auto; border-radius: 40px; object-fit: cover; } .cmp-page .cmp-split-content { display: flex; flex-direction: column; gap: 20px; } .cmp-page .cmp-split-content .cmp-h2 { text-align: left; max-width: 650px; } .cmp-page .cmp-rule-list { display: flex; flex-direction: column; gap: 9px; } .cmp-page .cmp-rule-item { display: flex; flex-direction: column; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--cmp-stroke); } .cmp-page .cmp-rule-item:last-child { border-bottom: 0; } .cmp-page .cmp-rule-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 32px; letter-spacing: -0.04em; color: var(--cmp-ink); } .cmp-page .cmp-rule-body { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.4; color: var(--cmp-muted); } /* -------------------------------------------------------------------------- BANNER — full-bleed photo with a white headline (mirrors .hp-ix-banner) -------------------------------------------------------------------------- */ .cmp-page .cmp-banner { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1208 / 428; padding: 35px 24px; border-radius: 40px; overflow: hidden; } .cmp-page .cmp-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cmp-page .cmp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(102, 102, 102, 0) 54%, rgba(0, 0, 0, 0.3) 90%); } .cmp-page .cmp-banner .cmp-h2 { position: relative; z-index: 1; max-width: 640px; color: #fff; } .cmp-page .cmp-banner-accent { color: var(--cmp-accent-light); } /* -------------------------------------------------------------------------- Scroll reveal (progressive enhancement — visible without JS) -------------------------------------------------------------------------- */ .cmp-page .cmp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .cmp-page .cmp-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cmp-page .cmp-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Tablet -------------------------------------------------------------------------- */ @media screen and (max-width: 991px) { .cmp-page .cmp-h1 { font-size: 42px; } .cmp-page .cmp-h2 { font-size: 30px; } .cmp-page .cmp-h2.is-sm { font-size: 27px; } .cmp-page .cmp-h2.is-lg { font-size: 38px; line-height: 44px; } .cmp-page .cmp-takeaways-title { font-size: 30px; } .cmp-page .cmp-guarantees-grid { grid-template-columns: 1fr; gap: 32px; } .cmp-page .cmp-guarantees-img { max-width: 628px; justify-self: center; } .cmp-page .cmp-split { grid-template-columns: 1fr; gap: 32px; } .cmp-page .cmp-split-img { max-width: 548px; justify-self: center; } /* Meters: label above the two bars so 280px doesn't crush the tracks */ .cmp-page .cmp-meters { padding: 0 20px; } .cmp-page .cmp-meter-row { flex-wrap: wrap; gap: 12px 24px; } .cmp-page .cmp-meter-label { width: 100%; } .cmp-page .cmp-meter-row.is-head .cmp-meter-label { display: none; } } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { .cmp-page .cmp-section { padding: 32px 0; } .cmp-page .cmp-h1 { font-size: 32px; } .cmp-page .cmp-h2 { font-size: 25px; } .cmp-page .cmp-h2.is-sm { font-size: 23px; } .cmp-page .cmp-h2.is-lg { font-size: 30px; line-height: 36px; } .cmp-page .cmp-takeaways-title { font-size: 25px; } .cmp-page .cmp-takeaways { padding: 24px 20px 28px; } .cmp-page .cmp-hero { padding-top: 24px; } /* Drop the 901/352 crop on phones — at this width the asset's own ratio keeps both app screens whole instead of slicing the edges off each phone. */ .cmp-page .cmp-hero-img { aspect-ratio: 1802 / 831; object-position: center; border-radius: 18px; } .cmp-page .cmp-cta-row .cmp-btn { flex: 1 1 auto; } .cmp-page .cmp-cards { grid-template-columns: 1fr; gap: 16px; } .cmp-page .cmp-scoreboard { gap: 20px; padding: 20px 0; } .cmp-page .cmp-score { min-width: 140px; max-width: 170px; } .cmp-page .cmp-score-num { font-size: 44px; } .cmp-page .cmp-score-logo { width: 110px; height: 36px; } .cmp-page .cmp-score-logo-slot { width: 110px; height: 36px; } .cmp-page .cmp-score-logo-slot img { max-width: 110px; max-height: 36px; } .cmp-page .cmp-score-name { font-size: 17px; } .cmp-page .cmp-guarantee { flex-direction: column; align-items: flex-start; gap: 16px; } .cmp-page .cmp-guarantees-list { padding: 16px 20px; } .cmp-page .cmp-guarantee-eyebrow, .cmp-page .cmp-guarantee-title { line-height: 1.3; } .cmp-page .cmp-split-img { border-radius: 24px; } .cmp-page .cmp-rule-title { font-size: 18px; line-height: 1.35; } .cmp-page .cmp-banner { aspect-ratio: auto; min-height: 320px; border-radius: 24px; } } @media screen and (max-width: 479px) { .cmp-page .cmp-container { padding: 0 16px; } .cmp-page .cmp-h1 { font-size: 28px; } .cmp-page .cmp-scoreboard { flex-wrap: nowrap; gap: 12px; } .cmp-page .cmp-score { flex: 1 1 0; min-width: 0; max-width: none; padding: 10px 6px; } .cmp-page .cmp-score-logo { width: 100%; height: 32px; } .cmp-page .cmp-score-logo-slot { width: 100%; height: 32px; } .cmp-page .cmp-score-logo-slot img { max-width: 100%; max-height: 32px; } .cmp-page .cmp-score-name { font-size: 15px; } .cmp-page .cmp-meter-col { gap: 4px; } } /* ========================================================================== COMPARE HUB — /compare index page (Figma "Compare page", node 868-69) Rendered by Slynumber Express Server/views/header/compare.ejs. Lists the compares that are live in Strapi as a 3-up card grid, then reuses the .cmp-banner photo band and adds the "Your number without borders" CTA. Competitor logos are local files in /images/compare/logos/ (from Figma), each card sets --logo-bg / --logo-w inline from the template's LOGOS map. ========================================================================== */ /* Display heading: 72/79 ExtraBold (hub h1) */ .cmp-page .cmp-display { margin: 0; font-size: 72px; font-weight: 800; line-height: 79px; letter-spacing: -0.04em; text-align: center; color: var(--cmp-ink); } /* Hub sections stack with a 60px rhythm (Figma: grid → banner → footer CTA) */ .cmp-page .cmp-hub-section { padding: 0 0 60px; } .cmp-page .cmp-hub-section.is-last { padding-bottom: 0; } /* footer partial adds its own top gap */ /* Hero ---------------------------------------------------------------------- */ .cmp-page .cmp-hub-hero { display: flex; flex-direction: column; align-items: center; gap: 35px; padding: 195px 0 80px; /* fixed navbar ends at y=125; Figma h1 at y=195; ~80px of air between the lead copy and the cards */ text-align: center; } .cmp-page .cmp-hub-hero .cmp-display { max-width: 750px; } /* Figma headline box; the design's copy wraps to two lines here */ .cmp-page .cmp-hub-lead { margin: 0; max-width: 697px; font-size: 18px; font-weight: 400; line-height: 31px; letter-spacing: -0.04em; text-align: center; color: #4f505b; } /* Card grid ----------------------------------------------------------------- */ .cmp-page .cmp-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; width: 100%; max-width: 1143px; /* 3 × 365 + 2 × 24 */ margin: 0 auto; padding: 0; list-style: none; } .cmp-page .cmp-hub-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; /* the theme pads every
  • (4px 0 4px 6px) — that would inset the logo band */ background: #fff; border: 0; border-radius: 30px; overflow: hidden; } /* Figma draws the 1px #e6e8e4 stroke INSIDE the card, over the logo band, so the band runs to the card's outer edge and is clipped at the full 30px radius. A border would inset the band by 1px, so paint the stroke as an overlay instead. */ .cmp-page .cmp-hub-card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cmp-row-line); border-radius: inherit; pointer-events: none; } /* Logo lockup: fixed 103px band, brand colour behind a centred wordmark. The wordmark keeps the exact width it has in Figma (--logo-w) and only shrinks on very narrow cards; taller-than-band art (Dingtone, Verizon) is centred and cropped exactly as in the design. */ .cmp-page .cmp-hub-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 103px; overflow: hidden; background: var(--logo-bg, #e7e7e7); } .cmp-page .cmp-hub-logo img { display: block; width: var(--logo-w, 200px); max-width: 86%; height: auto; flex: none; } /* Competitor without a local logo yet: show its name as a wordmark */ .cmp-page .cmp-hub-logo-name { padding: 0 24px; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-align: center; color: #1b1f1c; } .cmp-page .cmp-hub-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; padding: 20px 24px 32px 35px; text-align: left; } .cmp-page .cmp-hub-title { margin: 0; font-size: 20px; font-weight: 550; /* Figma: Rubik Medium — Montserrat is a variable font, 550 matches its stroke weight */ line-height: 24px; letter-spacing: -0.01em; text-align: left; color: var(--cmp-ink); } .cmp-page .cmp-hub-desc { margin: 10px 0 0; max-width: 268px; /* Figma's CardContent text column — wraps the sentence to two lines as designed */ font-size: 14px; font-weight: 400; line-height: 21px; text-align: left; color: #6b7570; } .cmp-page .cmp-hub-link { margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 550; line-height: 1.2; color: var(--cmp-accent); text-decoration: underline; text-underline-position: from-font; } .cmp-page .cmp-hub-link:hover { color: #5e36d6; } .cmp-page .cmp-hub-link:focus-visible { outline: 2px solid var(--cmp-accent); outline-offset: 3px; border-radius: 4px; } .cmp-page .cmp-hub-empty { margin: 0; padding: 24px 0; text-align: center; color: var(--cmp-muted); } /* Hub — tablet */ @media screen and (max-width: 991px) { .cmp-page .cmp-display { font-size: 54px; line-height: 60px; } .cmp-page .cmp-hub-hero { padding-top: 160px; gap: 24px; } .cmp-page .cmp-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Hub — mobile */ @media screen and (max-width: 767px) { .cmp-page .cmp-display { font-size: 40px; line-height: 46px; } .cmp-page .cmp-hub-section { padding-bottom: 40px; } .cmp-page .cmp-hub-hero { padding-top: 140px; padding-bottom: 32px; } .cmp-page .cmp-hub-lead { font-size: 16px; line-height: 26px; } .cmp-page .cmp-hub-grid { grid-template-columns: 1fr; gap: 16px; } } @media screen and (max-width: 479px) { .cmp-page .cmp-display { font-size: 32px; line-height: 38px; } .cmp-page .cmp-hub-hero { padding-top: 120px; } .cmp-page .cmp-hub-body { padding: 18px 24px 28px; } .cmp-page .cmp-hub-card { border-radius: 24px; } }