/* ========================================================================== spread-bet.co.uk site stylesheet (3 September 2026 design pack, B-band) ========================================================================== WHERE THIS RUNS. On every document. Native pages link it from src/layouts/SiteLayout.astro; the captured WordPress documents get the link from scripts/migrations/t4-site-chrome.mjs, last in after the theme bundle and the progressive-enhancement stylesheet, so cascade order beats the theme without !important on the ordinary rules. TWO KINDS OF DOCUMENT SHARE IT. The rebuilt pages carry body.sb-native and no theme CSS at all, so everything they render is styled here. The captured pages keep their theme CSS for their own content and take only the chrome (header, breadcrumb strip, footer) and a handful of overrides from this file. Every rule below is either prefixed sb- (ours) or names a theme class it is deliberately overriding, with the reason beside it. TOKENS are the design pack's, anchored to the logo: ink #1f2a3b, navy #2d394e, paper #f4f5f8, card #fff, rule #d9dde5, muted #5b6575, link #a8474b (the coral darkened for text contrast), coral #cb6064 for the one primary handoff, green #4f7a4b for positive values, #a33a3f for negative. Type is IBM Plex Sans 400/500/600, self-hosted, tabular figures on. ========================================================================== */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --sb-ink: #1f2a3b; --sb-navy: #2d394e; --sb-paper: #f4f5f8; --sb-card: #ffffff; --sb-rule: #d9dde5; --sb-rule-soft: #e9ecf1; --sb-muted: #5b6575; --sb-link: #a8474b; --sb-coral: #cb6064; --sb-coral-dark: #b2545a; --sb-green: #4f7a4b; --sb-green-tint: #eef5ed; --sb-neg: #a33a3f; --sb-warn: #8a3a3e; --sb-warn-bg: #faf0f0; --sb-focus: #cb6064; --sb-tint: #e9eef6; --sb-r: 8px; --sb-r-lg: 10px; --sb-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sb-wrap: 1180px; --sb-header-h: 64px; } /* ---------- the chrome, on every document ---------- */ .sbh, footer.new_footer, section.breadcrumbs { font-family: var(--sb-font); font-size: 15px; line-height: 1.45; color: var(--sb-ink); letter-spacing: 0; text-transform: none; box-sizing: border-box; } .sbh *, footer.new_footer *, section.breadcrumbs * { box-sizing: border-box; } .sbh ul, footer.new_footer ul { list-style: none; margin: 0; padding: 0; } .sbh li, footer.new_footer li { list-style: none; margin: 0; padding: 0; } .sbh a, footer.new_footer a { text-decoration: none; } /* The header: white, sticky, one row. */ .sbh { position: sticky; top: 0; z-index: 40; background: var(--sb-card); border-bottom: 1px solid var(--sb-rule); } .sbh-in { max-width: var(--sb-wrap); margin: 0 auto; padding: 0 20px; min-height: var(--sb-header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sbh-logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; } .sbh-logo img { display: block; width: auto; height: 36px; } @media (min-width: 1024px) { .sbh-logo img { height: 40px; } } /* Desktop nav: in the DOM at every width, shown from 1024px. */ .sbh-nav { display: none; } @media (min-width: 1024px) { .sbh-nav { display: block; } } .sbh-list { display: flex; align-items: stretch; gap: 2px; } .sbh-item { position: relative; display: flex; align-items: stretch; } .sbh-link { display: inline-flex; align-items: center; gap: 5px; min-height: var(--sb-header-h); padding: 0 11px; font-weight: 500; font-size: 14.5px; color: var(--sb-ink); white-space: nowrap; position: relative; } @media (min-width: 1200px) { .sbh-link { padding: 0 14px; font-size: 15px; } } .sbh-link::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 12px; height: 2px; border-radius: 2px; background: var(--sb-coral); transform: scaleX(0); transform-origin: center; transition: transform .18s ease-out; } .sbh-item:hover .sbh-link::after, .sbh-item:focus-within .sbh-link::after, .sbh-item.is-current .sbh-link::after { transform: scaleX(1); } .sbh-item.is-current .sbh-link { color: var(--sb-navy); } .sbh-chev { flex: none; opacity: .7; transition: transform .18s; } .sbh-item:hover .sbh-chev, .sbh-item:focus-within .sbh-chev { transform: rotate(180deg); } .sbh-drop { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 268px; padding-top: 4px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s; } .sbh-item:nth-last-child(-n+3) .sbh-drop { left: auto; right: 0; } .sbh-item:hover .sbh-drop, .sbh-item:focus-within .sbh-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .sbh-drop-list { background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: var(--sb-r-lg); box-shadow: 0 14px 34px rgba(31, 42, 59, .14); padding: 8px 0; } .sbh-drop-link { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 44px; font-size: 14.5px; font-weight: 500; color: var(--sb-ink); border-left: 3px solid transparent; transition: background-color .15s, border-left-color .15s; } .sbh-drop-link:hover, .sbh-drop-link:focus-visible, .sbh-drop-link[aria-current="page"] { background: var(--sb-paper); border-left-color: var(--sb-coral); } .sbh-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--sb-rule); border-radius: 7px; background: var(--sb-card); overflow: hidden; } .sbh-tile img { width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block; } .sbh-glyph { display: block; width: 100%; height: 100%; padding: 3px; color: var(--sb-navy); } .sbh-drop-link:hover .sbh-glyph { color: var(--sb-coral-dark); } /* The mobile menu: a details element, so it opens with scripting off. */ .sbh-mobile { position: static; } @media (min-width: 1024px) { .sbh-mobile { display: none; } } .sbh-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--sb-rule); border-radius: var(--sb-r); font-weight: 600; font-size: 14px; color: var(--sb-ink); background: var(--sb-card); } .sbh-toggle::-webkit-details-marker { display: none; } .sbh-mobile[open] .sbh-toggle { background: var(--sb-paper); } .sbh-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 35; background: var(--sb-card); border-bottom: 1px solid var(--sb-rule); box-shadow: 0 16px 32px rgba(31, 42, 59, .12); padding: 8px 20px 18px; } .sbh-panel-list li { border-bottom: 1px solid var(--sb-rule-soft); } .sbh-panel-list a { display: block; padding: 12px 4px; min-height: 44px; font-weight: 600; font-size: 15.5px; color: var(--sb-ink); } .sbh-panel-list a[aria-current="page"] { color: var(--sb-coral-dark); } .sbh-panel-cta { display: flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 46px; border-radius: var(--sb-r); background: var(--sb-ink); color: #fff; font-weight: 600; } /* The breadcrumb strip, in flow under the header on every document. The theme positioned it absolutely inside its fixed header; that is undone here because the header it sat in no longer exists. */ section.breadcrumbs { position: static !important; top: auto !important; left: auto !important; width: auto !important; z-index: auto !important; background: var(--sb-paper) !important; border-top: 0 !important; border-bottom: 1px solid var(--sb-rule-soft); color: var(--sb-muted) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; } section.breadcrumbs .container--center { max-width: var(--sb-wrap); margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; min-height: 36px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } section.breadcrumbs .container--center::-webkit-scrollbar { display: none; } section.breadcrumbs a { color: var(--sb-muted) !important; font-weight: 500 !important; } section.breadcrumbs a:hover { color: var(--sb-ink) !important; text-decoration: underline; } section.breadcrumbs .breadcrumb_last { color: var(--sb-ink); font-weight: 500; } /* The footer. */ footer.new_footer { background: var(--sb-ink); color: #c9d0dc; margin-top: 48px; padding: 0 !important; } .sbf-in { max-width: var(--sb-wrap); margin: 0 auto; padding: 44px 20px 28px; display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 640px) { .sbf-in { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .sbf-in { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } } .sbf-brand img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .95; } .sbf-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; max-width: 38ch; color: #c9d0dc; } .sbf-brand .sbf-addr { font-size: 12.5px; color: #98a3b4; } .sbf-h { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; } .sbf-col a { display: inline-flex; align-items: center; min-height: 34px; color: #c9d0dc; font-size: 14.5px; } .sbf-col a:hover { color: #fff; text-decoration: underline; } .sbf-foot { border-top: 1px solid rgba(255, 255, 255, .12); } .sbf-foot > * { max-width: var(--sb-wrap); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } footer.new_footer .footer-profiles { margin: 0; padding-top: 18px; text-align: left; } footer.new_footer .footer-profiles__label { color: #98a3b4; font-size: 12px; letter-spacing: .06em; margin: 0 0 4px; text-transform: uppercase; } footer.new_footer .footer-profiles__list { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-start; } footer.new_footer .footer-profiles__list a { color: #e4e9f0; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; } footer.new_footer .footer-profiles__list a:hover { text-decoration: none; } footer.new_footer .footer-menu { padding-top: 8px; } footer.new_footer .footer-menu ul { display: flex; flex-wrap: wrap; gap: 4px 18px; } footer.new_footer .footer-menu a { color: #c9d0dc; font-size: 13.5px; min-height: 36px; display: inline-flex; align-items: center; } footer.new_footer .footer-menu a:hover { color: #fff; } .sbf-legal { margin: 0; padding-top: 14px; padding-bottom: 28px; font-size: 12.5px; line-height: 1.5; color: #98a3b4; max-width: 84ch; } /* ---------- overrides for the captured (theme) documents ---------- Each one names the theme rule it cancels. The header is no longer fixed, so the padding the theme reserved under it is empty space; the 2px navy top border was the theme's, not ours. */ body { border-top: 0 !important; } main > section.content { padding-top: 0 !important; } .wp-theme-comforex .back-top { display: none; } /* ========================================================================== Native pages (body.sb-native): base and shared components ========================================================================== */ .sb-native, .sb-native body { margin: 0; } body.sb-native { font-family: var(--sb-font); font-size: 17px; line-height: 1.55; color: var(--sb-ink); background: var(--sb-paper); -webkit-text-size-adjust: 100%; font-feature-settings: 'tnum' 1, 'kern' 1; } .sb-native *, .sb-native *::before, .sb-native *::after { box-sizing: border-box; } .sb-native img { max-width: 100%; height: auto; } .sb-native a { color: var(--sb-link); text-decoration-thickness: 1px; text-underline-offset: .15em; } .sb-native a:hover { text-decoration-thickness: 2px; } .sb-native :focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 3px; border-radius: 2px; } .sb-native h1, .sb-native h2, .sb-native h3, .sb-native h4 { font-family: var(--sb-font); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--sb-ink); } .sb-native h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); } .sb-native h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); } .sb-native h3 { font-size: 1.125rem; } .sb-native p { margin: 0 0 1em; } .sb-native b, .sb-native strong { font-weight: 600; } .sb-native small { font-size: .875rem; } .sb-native ul, .sb-native ol { margin: 0 0 1em; padding-left: 1.25rem; } .sb-native li { margin-bottom: .35em; } .sb-native table { border-collapse: collapse; width: 100%; } .sb-native .vh, .sb-native .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sb-skip { position: absolute; left: -999px; top: 8px; background: var(--sb-ink); color: #fff; padding: .5rem .75rem; z-index: 99; border-radius: 4px; } .sb-skip:focus { left: 8px; } .sb-wrap { width: min(var(--sb-wrap), 100% - 2.5rem); margin-inline: auto; } .sb-wrap.narrow { width: min(860px, 100% - 2.5rem); } .sb-sec { padding: clamp(2.25rem, 4.5vw, 4rem) 0; } .sb-sec.alt { background: var(--sb-card); border-top: 1px solid var(--sb-rule); border-bottom: 1px solid var(--sb-rule); } .sb-two { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 900px) { .sb-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .sb-lead { font-size: 1.08rem; } .sb-eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted); margin: 0 0 .4rem; } .sb-muted { color: var(--sb-muted); } .sb-car { font-size: .875rem; color: var(--sb-muted); margin: 0; } .sb-note { font-size: .85rem; color: var(--sb-muted); line-height: 1.5; } /* Buttons and chips. */ .sb-btn-p { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 1.1rem; border-radius: 6px; background: var(--sb-ink); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid var(--sb-ink); } .sb-btn-p:hover { background: var(--sb-navy); color: #fff; } .sb-btn-coral { background: var(--sb-coral); border-color: var(--sb-coral); color: #fff; } .sb-btn-coral:hover { background: var(--sb-coral-dark); border-color: var(--sb-coral-dark); } .sb-btn-s { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border-radius: 6px; border: 1.5px solid var(--sb-ink); color: var(--sb-ink); background: var(--sb-card); font-weight: 600; font-size: .92rem; text-decoration: none; } .sb-btn-s:hover { background: var(--sb-paper); } .sb-chip { font: inherit; font-size: .84rem; font-weight: 600; min-height: 40px; padding: 0 .85rem; border: 1px solid #b9c1cd; border-radius: 999px; background: #fff; color: var(--sb-ink); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; } .sb-chip[aria-pressed="true"] { background: var(--sb-ink); color: #fff; border-color: var(--sb-ink); } .sb-pill { font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--sb-tint); color: var(--sb-navy); white-space: nowrap; } .sb-pill.coral { background: var(--sb-coral); color: #fff; } .sb-pill.green { background: var(--sb-green-tint); color: var(--sb-green); } /* Cards and tables. */ .sb-card { background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: var(--sb-r-lg); padding: 1.1rem 1.25rem; } .sb-table-wrap { overflow-x: auto; background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: var(--sb-r); } .sb-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--sb-card); } .sb-table th, .sb-table td { padding: .6rem .7rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sb-rule); } .sb-table thead th { font-size: .78rem; color: var(--sb-muted); font-weight: 600; background: #fafbfc; white-space: nowrap; } .sb-table tbody tr:last-child td, .sb-table tbody tr:last-child th { border-bottom: 0; } .sb-table tr[hidden] { display: none; } .sb-native .sb-band .sb-table thead th { background: var(--sb-navy); color: #fff; } /* The details FAQ. */ .sb-faq { border-top: 1px solid var(--sb-rule); } .sb-faq:last-of-type { border-bottom: 1px solid var(--sb-rule); } .sb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; min-height: 44px; } .sb-faq summary::-webkit-details-marker { display: none; } .sb-faq summary h3 { margin: 0; font-size: 1.1rem; } .sb-faq summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--sb-muted); flex: none; width: 1.5rem; text-align: center; } .sb-faq[open] summary::after { content: '\2212'; } .sb-faq > div { padding: 0 0 .75rem; } /* The byline strip. */ .sb-byline { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: .92rem; margin: .5rem 0 .25rem; } .sb-byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .sb-byline p { margin: 0; } .sb-fact { font-size: .78rem; font-weight: 600; color: var(--sb-green); border: 1px solid #cfe0cd; background: #f1f7f0; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; } .sb-aff { font-size: .8rem; color: var(--sb-muted); margin: 0; } .sb-band .sb-byline, .sb-band .sb-aff, .sb-band .sb-byline a { color: #c4ccd9; } .sb-band .sb-byline a { color: #fff; } .sb-band .sb-fact { color: #dff3dc; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } .sb-changed { font-size: .82rem; color: var(--sb-muted); } .sb-changed summary { cursor: pointer; font-weight: 600; display: inline; } .sb-band .sb-changed { color: #c4ccd9; } .sb-band .sb-changed summary { color: #fff; } /* The ink band hero (B-band). */ .sb-band { background: var(--sb-ink); color: #fff; padding: clamp(1.5rem, 3vw, 2.5rem) 0; } .sb-band h1, .sb-band h2, .sb-band .sb-lead { color: #fff; } .sb-band .sb-lead { color: #d6dbe4; } .sb-band .sb-crumb, .sb-band .sb-crumb a { color: #c4ccd9; } .sb-band .sb-car { color: #aab4c3; } .sb-band a { color: #fff; } /* Jump chips. */ .sb-jump { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--sb-rule); border-bottom: 1px solid var(--sb-rule); font-size: .85rem; } .sb-jump span { font-weight: 600; color: var(--sb-muted); margin-right: .25rem; } .sb-jump a { text-decoration: none; color: var(--sb-ink); border: 1px solid var(--sb-rule); border-radius: 999px; padding: .3rem .7rem; background: var(--sb-card); min-height: 36px; display: inline-flex; align-items: center; } .sb-jump a:hover { border-color: var(--sb-ink); } /* Related pages grid and the author card. */ .sb-nodes { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: 0; margin: 0; list-style: none; } .sb-nodes li { list-style: none; margin: 0; } .sb-nodes a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--sb-rule); border-radius: var(--sb-r); background: var(--sb-card); color: var(--sb-ink); text-decoration: none; font-weight: 500; line-height: 1.3; } .sb-nodes a:hover { border-color: var(--sb-ink); } .sb-nodes small { color: var(--sb-muted); font-weight: 400; } .sb-author { display: flex; gap: 1rem; align-items: flex-start; background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: var(--sb-r); padding: 1rem; } .sb-author img { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; } .sb-author p { margin: .25rem 0 0; font-size: .95rem; } /* The risk panel and loss line. */ .sb-risk { background: var(--sb-warn-bg); border-top: 1px solid #e6c9c5; border-bottom: 1px solid #e6c9c5; } .sb-risk h2 { color: var(--sb-warn); } .sb-loss { font-size: .95rem; padding: .75rem 1rem; border-left: 4px solid var(--sb-warn); background: var(--sb-warn-bg); } /* The topical entry grid, whose markup scripts/topical-entry-grid.mjs owns. */ .sb-native .topical-entry-grid { border-top: 1px solid var(--sb-rule); margin: 40px auto 0; max-width: var(--sb-wrap); padding: 24px 20px 8px; } .sb-native .topical-entry-grid > p { color: var(--sb-muted); font-size: 13px; letter-spacing: .04em; margin: 0 0 12px; text-transform: uppercase; } .sb-native .topical-entry-grid ul { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; margin: 0; padding: 0; } .sb-native .topical-entry-grid li { margin: 0; } .sb-native .topical-entry-grid a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; font-weight: 500; } /* The press strip (CFB AU pattern): navy band, five linked placements, one verbalised sentence. */ .sb-press { background: var(--sb-navy); border-bottom: 1px solid var(--sb-navy); color: #fff; } .sb-press-in { padding: 26px 0 22px; } .sb-press-h { text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.55); margin: 0; } ul.press-strip { display: grid; grid-template-columns: 1fr 1fr; margin: 1.25rem 0 0; padding: 0; list-style: none; } ul.press-strip li { height: 58px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.06); list-style: none; margin: 0; } ul.press-strip li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06); } ul.press-strip li:nth-last-child(-n+2) { border-bottom: none; } @media (min-width: 900px) { ul.press-strip { grid-template-columns: repeat(5, 1fr); margin-top: 20px; } ul.press-strip li { border-bottom: none; } ul.press-strip li:nth-child(odd) { border-right: none; } ul.press-strip li:not(:last-child) { border-right: 1px solid rgba(255,255,255,.06); } } .press-link { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 2px; padding: .25rem .5rem; min-height: 44px; text-decoration: none; } .press-link .lg-text { font-weight: 600; font-size: 1.3rem; color: #fff; opacity: .62; letter-spacing: -0.01em; transition: opacity .18s; } .press-link:hover .lg-text, .press-link:focus-visible .lg-text { opacity: 1; } .press-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; } .sb-press .press-line { text-align: center; max-width: none; margin: 1.25rem auto 0; font-size: .95rem; color: rgba(255,255,255,.75); } /* The proof numbers band. */ .sb-stats-band { background: var(--sb-ink); color: #fff; } .sb-stats-band .sb-wrap { padding: 1.75rem 0; } .sb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 760px) { .sb-stats { grid-template-columns: repeat(4, 1fr); } } .sb-stats li { list-style: none; margin: 0; } .sb-stats b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; } .sb-stats span { display: block; font-size: .9rem; color: #aab4c3; margin-top: .25rem; max-width: 22ch; } /* Score ring and rank pill (reviews, listing cards). */ .sb-ring { width: 92px; height: 92px; border-radius: 50%; border: 5px solid var(--sb-coral); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: rgba(255,255,255,.06); flex: none; } .sb-ring b { font-size: 2rem; font-weight: 600; } .sb-ring small { font-size: .72rem; color: #c4ccd9; } .sb-ring.sm { width: 72px; height: 72px; border-width: 4px; background: var(--sb-paper); color: var(--sb-ink); } .sb-ring.sm b { font-size: 1.5rem; } .sb-ring.sm small { color: var(--sb-muted); } .sb-ring.xs { width: 44px; height: 44px; border-width: 3px; background: var(--sb-paper); color: var(--sb-ink); } .sb-ring.xs b { font-size: 1.05rem; } .sb-rankpill { font-size: .8rem; font-weight: 600; background: var(--sb-coral); color: #fff; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; } /* Broker mark tiles. */ .sb-mark { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--sb-rule); border-radius: 8px; overflow: hidden; flex: none; } .sb-mark img { display: block; object-fit: contain; width: 100%; height: 100%; padding: 3px; } .sb-mark.wide { width: auto; max-width: 120px; padding: 4px 8px; } .sb-mark.wide img { width: auto; height: 100%; padding: 0; } /* Platform tiles. */ .sb-pfs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; padding: 0; list-style: none; } .sb-pfs li { list-style: none; margin: 0; } .sb-pf { font-size: .72rem; font-weight: 600; border: 1px solid var(--sb-rule); border-radius: 4px; padding: .12rem .4rem; background: var(--sb-paper); white-space: nowrap; color: var(--sb-ink); display: inline-flex; align-items: center; gap: .25rem; } .sb-pf img { width: 14px; height: 14px; } @media (prefers-reduced-motion: no-preference) { .sb-native a, .sb-native button, .sb-native summary, .sb-native input, .sb-native select { transition: background-color .18s, border-color .18s, color .18s; } } @media (prefers-reduced-motion: reduce) { .sbh *, .sb-native * { transition: none !important; animation: none !important; } } /* ==================================================================== */ /* Review pages (3 September 2026 review layout) */ /* ==================================================================== */ body.sb-review .post-content__top { background: var(--sb-ink, #1f2a3b); color: #fff; padding: clamp(1.5rem, 3vw, 2.5rem) 0 1.75rem; } body.sb-review .post-content__top h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); margin: 0 0 .4em; max-width: none; } .rv-hero-g { display: grid; gap: .75rem 3rem; grid-template-columns: 1fr; grid-template-areas: "head" "tiles" "lead" "by"; } .rv-hg-head { grid-area: head; } .rv-hg-lead { grid-area: lead; } .rv-hg-by { grid-area: by; } .rv-hg-tiles { grid-area: tiles; } @media (min-width: 960px) { .rv-hero-g { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "head tiles" "lead tiles" "by tiles"; align-items: start; } } .rv-hero-line { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 .5rem; } .rv-hero-logo { height: 36px; width: auto; background: #fff; padding: 4px 8px; border-radius: 6px; } body.sb-review .post-content__top .sb-ring { color: #fff; background: rgba(255, 255, 255, .06); } body.sb-review .post-content__top .sb-ring small { color: #c4ccd9; } body.sb-review .post-content__top .sb-lead p { color: #d6dbe4; font-size: 1.08rem; max-width: none; margin: 0 0 .75rem; } body.sb-review .post-content__top .sb-lead p strong { color: #fff; } body.sb-review .post-content__top .sb-lead a { color: #fff; } .rv-fca { color: #c4ccd9; font-size: .9rem; margin: .25rem 0 0; } body.sb-review .post-content__top .sb-byline p, body.sb-review .post-content__top .sb-byline a { color: #fff; } body.sb-review .post-content__top .sb-byline img { border-radius: 50%; } body.sb-review .post-content__top .sb-changed { color: #c4ccd9; font-size: .85rem; margin: .4rem 0 0; max-width: 62ch; } body.sb-review .post-content__top .sb-changed summary { color: #fff; cursor: pointer; font-weight: 600; } body.sb-review .post-content__top .sb-changed p { color: #c4ccd9; margin: .4rem 0 0; } body.sb-review .post-content__top .sb-aff p { color: #c4ccd9; font-size: .82rem !important; margin: .5rem 0 0; } body.sb-review .post-content__top .sb-aff a { color: #fff; } .rv-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .rv-tiles li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: .7rem .85rem; margin: 0; } .rv-tiles span { display: block; font-size: .75rem; color: #aab4c3; } .rv-tiles b { display: block; font-size: 1.05rem; margin-top: .15rem; color: #fff; } .rv-tiles small { font-weight: 400; color: #c4ccd9; font-size: .78rem; } .rv-hero-img { margin: 0; } .rv-hero-img img { display: block; width: 100%; height: auto; max-width: 466px; border-radius: 8px; } /* rail + main */ .rv-body { display: grid; gap: 2rem; padding: 1.5rem 0 2.5rem; } .rv-rail { display: grid; gap: 1rem; align-content: start; } .rv-main { min-width: 0; } @media (min-width: 1000px) { .rv-body { grid-template-columns: minmax(0, 1fr) 260px; } .rv-rail { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; align-self: start; } .rv-main { grid-column: 1; grid-row: 1; } } .rv-rail-card { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem; display: grid; justify-items: center; gap: .4rem; text-align: center; } .rv-rail-name { font-size: 1.1rem; } .rv-rail-rank { font-size: .82rem; color: var(--sb-muted, #5b6575); } .rv-rail-card .sb-btn-p, .rv-rail-card .sb-btn-s { width: 100%; justify-content: center; } .rv-rail-card .sb-loss { font-size: .75rem; color: var(--sb-muted, #5b6575); margin: .25rem 0 0; } .rv-rail-nav { font-size: .85rem; } .rv-rail-nav p { font-weight: 600; color: var(--sb-muted, #5b6575); margin: 0 0 .4rem; } .rv-rail-nav a { display: inline-block; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 999px; padding: .3rem .7rem; margin: 0 .3rem .4rem 0; background: var(--sb-card, #fff); color: var(--sb-ink, #1f2a3b); text-decoration: none; } .rv-rail-nav a:hover { color: var(--sb-link, #a8474b); } @media (min-width: 1000px) { .rv-rail-nav { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: .75rem 1rem; } .rv-rail-nav a { display: block; border: 0; border-top: 1px solid var(--sb-rule, #d9dde5); border-radius: 0; padding: .3rem 0; margin: 0; background: transparent; } } .rv-main .entry-content { padding: 1.5rem 0; border-top: 1px solid var(--sb-rule, #d9dde5); scroll-margin-top: 5rem; } .rv-main > .entry-content:first-child { border-top: 0; padding-top: 0; } .rv-main .entry-content h2.header-sideline, .rv-main .entry-content > h2 { font-size: 1.5rem; margin: 0 0 .6em; } .rv-main h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; } .rv-main p { max-width: 70ch; } .rv-main blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid var(--sb-coral, #cb6064); background: var(--sb-card, #fff); border-radius: 0 8px 8px 0; } .rv-main blockquote p { margin: 0; } .rv-main ul, .rv-main ol { padding-left: 1.25rem; margin: 0 0 1em; } .rv-main table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .75rem 0 1.25rem; background: var(--sb-card, #fff); } .rv-main th, .rv-main td { border: 1px solid var(--sb-rule, #d9dde5); padding: .5rem .6rem; text-align: left; vertical-align: top; } .rv-main thead th { background: #fafbfc; font-size: .8rem; color: var(--sb-muted, #5b6575); } .rv-main .pricing-table-container, .rv-main .cfbk-table-wrap { overflow-x: auto; } .rv-main .sb-table-wrap { border: 0; background: transparent; overflow-x: auto; border-radius: 0; } .rv-main p[style*="font-size:13px"], .rv-main .sb-muted { font-size: .85rem; color: var(--sb-muted, #5b6575); } .rv-verdict { font-size: 1.1rem; } .rv-main .sb-faq summary h3 { margin: 0; } .rv-main .yt-facade { border-radius: 8px; } /* score bars */ .rv-sbars td:last-child { white-space: nowrap; } .rv-bar { display: inline-block; vertical-align: middle; width: min(180px, 42vw); height: 10px; background: #e6e9ef; border-radius: 999px; overflow: hidden; margin-right: .6rem; } .rv-bar i { display: block; height: 100%; background: var(--sb-green, #4f7a4b); border-radius: 999px; } .rv-bar-v { font-weight: 600; vertical-align: middle; } /* the cost tool */ .rv-cost { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1.25rem; margin: .75rem 0 0; } .rv-cost-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; } .rv-cost-head h3 { margin: 0; font-size: 1.2rem; } .rv-cost-in { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; max-width: 420px; margin: .5rem 0 1rem; } .rv-cost .f label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; } .rv-cost .f input { font: inherit; font-size: 1rem; min-height: 44px; padding: .45rem .65rem; border: 1px solid #b9c1cd; border-radius: 6px; background: #fff; color: var(--sb-ink, #1f2a3b); width: 100%; } .rv-main .rv-cost-table { margin: 0; font-size: .9rem; } .rv-main .rv-cost-table th, .rv-main .rv-cost-table td { text-align: right; white-space: nowrap; border: 0; border-bottom: 1px solid var(--sb-rule, #d9dde5); } .rv-main .rv-cost-table th[scope="row"], .rv-main .rv-cost-table thead th:first-child { text-align: left; } .rv-cost-table td[data-f="cost"] { font-weight: 600; color: var(--sb-green, #4f7a4b); } .rv-cost-table tr.is-above td[data-f="cost"] { color: var(--sb-neg, #a33a3f); } .rv-cost-table tr.rv-cost-avg th, .rv-cost-table tr.rv-cost-avg td { background: #fafbfc; } .rv-cost-foot { font-size: .8rem; color: var(--sb-muted, #5b6575); margin: .75rem 0 0; max-width: none; } /* pros and cons */ .rv-pc { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .rv-pc { grid-template-columns: 1fr 1fr; } } .rv-pc-col { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem 1.1rem; } .rv-pc-col h3 { margin: 0 0 .5rem; font-size: 1rem; } .rv-pros h3 { color: var(--sb-green, #4f7a4b); } .rv-cons h3 { color: var(--sb-neg, #a33a3f); } .rv-pc-col ul { list-style: none; padding: 0; margin: 0; } .rv-pc-col li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; } .rv-pros li::before { content: "\2713"; position: absolute; left: 0; color: var(--sb-green, #4f7a4b); font-weight: 700; } .rv-cons li::before { content: "\2715"; position: absolute; left: 0; color: var(--sb-neg, #a33a3f); font-weight: 700; } /* licence list */ .rv-main .rv-lic-block { padding-top: 0; border-top: 0; } .rv-lic { margin: 0 0 .75rem; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; background: var(--sb-card, #fff); padding: .25rem 1.1rem; } .rv-lic div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--sb-rule, #d9dde5); font-size: .9rem; } .rv-lic div:last-child { border-bottom: 0; } .rv-lic dt { color: var(--sb-muted, #5b6575); } .rv-lic dd { margin: 0; font-weight: 600; text-align: right; } /* head-to-head, log, ratings */ .rv-h2h td.rv-lead-cell { font-weight: 600; background: #fafbfc; } .rv-log time { white-space: nowrap; font-weight: 600; } /* the closing call to action */ .rv-main .rv-open { background: var(--sb-paper, #f4f5f8); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1.25rem; margin-top: 1rem; } .rv-cta-row { margin: 1rem 0 .5rem; } .rv-open .sb-loss { font-size: .85rem; margin: .25rem 0; } /* alternatives */ .rv-alts { display: grid; gap: 1rem; margin: 1rem 0; } @media (min-width: 900px) { .rv-alts { grid-template-columns: repeat(3, 1fr); } } .rv-alt { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem; } .rv-alt h3 { margin: 0 0 .5rem; font-size: 1.05rem; } .rv-alt-score { display: block; font-size: .85rem; color: var(--sb-muted, #5b6575); font-weight: 400; } .rv-alt-mark img { height: 36px; width: auto; margin: .25rem 0 .5rem; } .rv-alt ul { padding-left: 1.1rem; font-size: .92rem; } .rv-alt .sb-loss { font-size: .78rem; } /* related pages + author */ .rv-related { background: var(--sb-paper, #f4f5f8); border-top: 1px solid var(--sb-rule, #d9dde5); padding: 2rem 0; } .rv-related h2 { font-size: 1.35rem; margin: 0 0 1rem; } .rv-related-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .rv-related-grid li { margin: 0; } .rv-related-grid a { display: block; background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: .9rem 1rem; text-decoration: none; color: var(--sb-ink, #1f2a3b); min-height: 44px; } .rv-related-grid a:hover { border-color: var(--sb-navy, #2d394e); } .rv-related-grid b { display: block; } .rv-related-grid small { display: block; color: var(--sb-muted, #5b6575); margin-top: .2rem; } .sb-native .author-wrapper { padding: 2rem 0; } .sb-native .author-wrapper h2 { font-size: 1.35rem; margin: 0 0 .75rem; } /* the mobile action bar */ .rv-mbar { display: none; } @media (max-width: 999px) { .rv-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: .75rem; padding: .5rem .9rem; background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); box-shadow: 0 -6px 20px rgba(31, 42, 59, .12); } body.sb-review { padding-bottom: 72px; } } .rv-mbar-t { flex: 1; min-width: 0; line-height: 1.2; } .rv-mbar-t b { display: block; font-size: .95rem; } .rv-mbar-t small { display: block; font-size: .68rem; color: var(--sb-muted, #5b6575); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-mbar .sb-btn-p { min-height: 40px; padding: 0 .9rem; background: var(--sb-coral, #cb6064); } .rv-rail-card .sb-loss, .rv-open .sb-loss, .rv-alt .sb-loss { background: transparent; border: 0; padding: 0; } /* ==================================================================== */ /* Listing pages (platforms family + the reviews directory) */ /* ==================================================================== */ body.sb-listing .post-content__top { background: var(--sb-ink, #1f2a3b); color: #fff; padding: clamp(1.5rem, 3vw, 2.5rem) 0 1.75rem; } body.sb-listing .post-content__top h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); margin: 0 0 .5em; max-width: none; } .ls-hero-g { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 960px) { .ls-hero-g { grid-template-columns: minmax(0, 1fr) 380px; } } body.sb-listing .post-content__top .sb-lead p { color: #d6dbe4; font-size: 1.08rem; max-width: none; margin: 0 0 .75rem; } body.sb-listing .post-content__top .sb-lead p strong { color: #fff; } body.sb-listing .post-content__top .sb-lead a { color: #fff; } body.sb-listing .post-content__top .sb-lead p.risk-band, body.sb-listing .post-content__top .sb-lead p[data-fs] { border-left: 3px solid var(--sb-coral, #cb6064); padding-left: .75rem; color: #c4ccd9; font-size: .95rem; } body.sb-listing .post-content__top .sb-byline p, body.sb-listing .post-content__top .sb-byline a { color: #fff; } body.sb-listing .post-content__top .sb-byline img { border-radius: 50%; } body.sb-listing .post-content__top .sb-changed { color: #c4ccd9; font-size: .85rem; margin: .4rem 0 0; max-width: 70ch; } body.sb-listing .post-content__top .sb-changed summary { color: #fff; cursor: pointer; font-weight: 600; } body.sb-listing .post-content__top .sb-changed .comp-fee-des { color: #c4ccd9; margin: .4rem 0 0; } body.sb-listing .post-content__top .sb-aff p { color: #c4ccd9; font-size: .82rem !important; margin: .5rem 0 0; } body.sb-listing .post-content__top .sb-aff a { color: #fff; } .ls-hero-img { margin: 0; } .ls-hero-img img { display: block; width: 100%; height: auto; max-width: 466px; border-radius: 8px; } /* the hero card */ .ls-card { background: var(--sb-card, #fff); color: var(--sb-ink, #1f2a3b); border: 1px solid var(--sb-rule, #d9dde5); border-top: 5px solid var(--sb-coral, #cb6064); border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); } .ls-card-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; } .ls-card-top img { height: 36px; width: auto; } .ls-card-top b { font-size: 1.15rem; } .ls-card-top .sb-pill { margin-left: auto; } .ls-card p { margin: 0 0 .5rem; font-size: .92rem; color: var(--sb-muted, #5b6575); } .ls-card p.ls-card-for { color: var(--sb-navy, #2d394e); font-weight: 600; } .ls-card .sb-ring { margin: 0 auto; } .ls-card dl { margin: .5rem 0; border-top: 1px solid var(--sb-rule, #d9dde5); } .ls-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--sb-rule, #d9dde5); font-size: .88rem; } .ls-card dt { color: var(--sb-muted, #5b6575); } .ls-card dd { margin: 0; font-weight: 600; text-align: right; } .ls-card-links { display: flex; gap: .6rem 1rem; flex-wrap: wrap; align-items: center; margin: .75rem 0 .25rem; } .ls-card .sb-car { margin: .5rem 0 0; font-size: .78rem; } body.sb-listing .post-content__top .bg-snap { box-shadow: 0 16px 40px rgba(0, 0, 0, .3); border-top: 5px solid var(--sb-coral, #cb6064); } /* jump chips */ .sb-native nav.toc-chips { margin: 1rem 0 0; padding: 0; } .sb-native nav.toc-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .sb-native nav.toc-chips li { list-style: none; margin: 0; } .sb-native nav.toc-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 999px; background: var(--sb-card, #fff); color: var(--sb-ink, #1f2a3b); text-decoration: none; font-size: .88rem; font-weight: 600; } .sb-native nav.toc-chips a:hover { border-color: var(--sb-navy, #2d394e); color: var(--sb-link, #a8474b); } .sb-native nav.toc-chips .toc-chips__label { display: none; } /* the prose column */ .ls-main { padding: 1.5rem 0 2.5rem; } .ls-body { min-width: 0; } .ls-body h2, .ls-body .header-sideline { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin: 2rem 0 .6em; scroll-margin-top: 5rem; } .ls-body > h2:first-child, .ls-body > .entry-content:first-child h2:first-child { margin-top: 0; } .ls-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 5rem; } .ls-body p { max-width: 74ch; } .ls-body [id] { scroll-margin-top: 5rem; } .ls-body .entry-content { margin: 0 0 1.5rem; } .ls-body .feature-header-des p, .ls-body p.risk-band { max-width: 74ch; } .ls-body p.risk-band { background: var(--sb-card, #fff); border-left: 4px solid var(--sb-coral, #cb6064); padding: .75rem 1rem; border-radius: 0 8px 8px 0; } .ls-body ul, .ls-body ol { padding-left: 1.25rem; margin: 0 0 1em; } .ls-body table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .75rem 0 1.25rem; background: var(--sb-card, #fff); } .ls-body th, .ls-body td { border: 1px solid var(--sb-rule, #d9dde5); padding: .5rem .6rem; text-align: left; vertical-align: top; } .ls-body thead th { background: #fafbfc; font-size: .8rem; color: var(--sb-muted, #5b6575); } .ls-body th span { display: inline; } .ls-body .pricing-table-container, .ls-body .cfbk-table-wrap, .ls-body .table-wrap { overflow-x: auto; } .ls-body p[style*="font-size:13px"], .ls-body .sb-muted { font-size: .85rem; color: var(--sb-muted, #5b6575); } .ls-body .best-cfdtp-btn, .ls-body .best-cfdtp-btn-area a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 1rem; background: var(--sb-ink, #1f2a3b); color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: .92rem; } .ls-body .best-cfdtp-btn:hover { background: var(--sb-navy, #2d394e); } .ls-body .best-cfdtp-btn-area { margin: .75rem 0 .5rem; } .ls-body .yt-facade { border-radius: 8px; } /* the theme-shaped FAQ block, without the theme */ .ls-body .faq-container .faq-item { border-top: 1px solid var(--sb-rule, #d9dde5); padding: .25rem 0; } .ls-body .faq-container .faq-item:last-child { border-bottom: 1px solid var(--sb-rule, #d9dde5); } .ls-body .faq-container .faq-item h3 { margin: 0; padding: .9rem 0; font-size: 1.05rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 44px; } .ls-body .faq-container .faq-item h3::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--sb-muted, #5b6575); flex: none; width: 1.5rem; text-align: center; } .ls-body .faq-container .faq-item.active_faq h3::after { content: "\2212"; } .ls-body .faq-container .faq-item .collapse { padding: 0 0 .75rem; } .ls-body .faq-container .faq-item .collapse p { margin: 0 0 .6em; } /* the directory cards on /reviews/ */ .ls-body .rv-cards { display: grid; gap: .9rem; grid-template-columns: 1fr; margin: 0 0 1.25rem; } @media (min-width: 760px) { .ls-body .rv-cards { grid-template-columns: 1fr 1fr; } } .ls-body .rv-cards .best-cfdtp-item { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem 1.1rem; } .ls-body .rv-cards .best-cfdtp-item ul { font-size: .9rem; margin: 0; padding-left: 1.1rem; } .ls-body .rv-cards h4.rv-name { font-size: 1.05rem; margin: 0; } .ls-body .rv-cards .rv-card--retired { background: var(--sb-paper, #f4f5f8); } .ls-body .rv-cards .best-cfdtp-item-inner span.rv-logo { background: #fff; } .ls-body [data-directory-controls] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; } .ls-body [data-directory-controls] button { font: inherit; font-size: .85rem; font-weight: 600; min-height: 40px; padding: 0 .85rem; border: 1px solid #b9c1cd; border-radius: 999px; background: var(--sb-card, #fff); color: var(--sb-ink, #1f2a3b); cursor: pointer; } .ls-body [data-directory-controls] button[aria-pressed="true"] { background: var(--sb-ink, #1f2a3b); color: #fff; border-color: var(--sb-ink, #1f2a3b); } /* the money page's own blocks, on the new ground */ .ls-body .sb-cards .sb-card { border-radius: 10px; } .ls-body #spreads_table_main th, .ls-body #spreads_table_main td { vertical-align: middle; } .ls-body .cfbk-controls__lead { font-size: .9rem; color: var(--sb-muted, #5b6575); margin: 0 0 .5rem; } .ls-body .sb-owners li { list-style: none; } .ls-body .sb-owners { padding-left: 0; } .ls-body .demo-card dl { margin: 0; } .ls-body .app-test-table th[scope="row"] { font-weight: 600; } .ls-body .cb-tight { background: var(--sb-green-tint, #eef5ed); } /* ==================================================================== */ /* The homepage (HOMEPAGE.md, 3 September 2026) */ /* ==================================================================== */ .hm-sec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; } .hm-sec h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 .5em; } .hm-lead { font-size: 1.05rem; max-width: none; margin: 0 0 1.25rem; } .sb-home .sb-eyebrow { margin-bottom: .25rem; } /* hero */ .hm-hero { background: var(--sb-card, #fff); padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--sb-rule, #d9dde5); } .hm-hero-in { display: grid; gap: 1.5rem 3rem; align-items: start; } @media (min-width: 960px) { .hm-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); } .hm-hero-copy { grid-column: 1; grid-row: 1; } .hm-hero-rt { grid-column: 1; grid-row: 2; } .hm-hero .hm-pic { grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-height: 260px; } .hm-stats { grid-column: 1 / -1; } } .hm-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); max-width: 14ch; margin: 0 0 .3em; line-height: 1.1; } .hm-tag { font-weight: 600; color: var(--sb-link, #a8474b); margin: 0 0 .6rem; font-size: 1.02rem; } .hm-rt-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); max-width: 40ch; margin: 0 0 1rem; } .hm-rt-sw { position: relative; } .hm-rt-sw > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .hm-sits { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; } .hm-sits label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid #b9c1cd; border-radius: 999px; background: var(--sb-card, #fff); color: var(--sb-ink, #1f2a3b); font-weight: 600; font-size: .92rem; cursor: pointer; position: relative; } .hm-sits label:hover { border-color: var(--sb-ink, #1f2a3b); } .hm-ans { display: none; } .hm-ans p { font-size: 1rem; max-width: none; margin: 0 0 .9rem; } .hm-rt-sw input:nth-of-type(1):checked ~ .hm-answers .hm-ans:nth-child(1), .hm-rt-sw input:nth-of-type(2):checked ~ .hm-answers .hm-ans:nth-child(2), .hm-rt-sw input:nth-of-type(3):checked ~ .hm-answers .hm-ans:nth-child(3) { display: block; } .hm-rt-sw input:nth-of-type(1):checked ~ .hm-sits label:nth-child(1), .hm-rt-sw input:nth-of-type(2):checked ~ .hm-sits label:nth-child(2), .hm-rt-sw input:nth-of-type(3):checked ~ .hm-sits label:nth-child(3) { background: var(--sb-ink, #1f2a3b); color: #fff; border-color: var(--sb-ink, #1f2a3b); } .hm-rt-sw input:nth-of-type(1):focus-visible ~ .hm-sits label:nth-child(1), .hm-rt-sw input:nth-of-type(2):focus-visible ~ .hm-sits label:nth-child(2), .hm-rt-sw input:nth-of-type(3):focus-visible ~ .hm-sits label:nth-child(3) { outline: 3px solid var(--sb-coral, #cb6064); outline-offset: 3px; } .hm-mini { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .hm-mini { grid-template-columns: repeat(3, 1fr); } } .hm-mini li { margin: 0; } .hm-mini a { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .9rem; border-radius: 8px; background: var(--sb-paper, #f4f5f8); border: 1px solid var(--sb-rule, #d9dde5); color: var(--sb-ink, #1f2a3b); text-decoration: none; font-weight: 600; line-height: 1.3; font-size: .9rem; height: 100%; } .hm-mini a:hover { border-color: var(--sb-ink, #1f2a3b); } .hm-mini small { color: var(--sb-muted, #5b6575); font-weight: 400; } .hm-pic { margin: 0; border-radius: 10px; overflow: hidden; background: var(--sb-ink, #1f2a3b); } .hm-pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .hm-hero .hm-pic { aspect-ratio: 3 / 2; } .hm-stats { list-style: none; margin: .5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--sb-rule, #d9dde5); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; } @media (min-width: 760px) { .hm-stats { grid-template-columns: repeat(4, 1fr); } } .hm-stats li { margin: 0; } .hm-stats b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; font-weight: 600; } .hm-stats span { display: block; font-size: .9rem; color: var(--sb-muted, #5b6575); margin-top: .25rem; max-width: 22ch; } /* the tool */ .hm-tool { background: var(--sb-paper, #f4f5f8); } .hm-tool-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .hm-tool-link { font-weight: 600; font-size: .95rem; } .hm-tool .sb-car { margin-top: .75rem; } /* the brokers */ .hm-brokers { background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); } .hm-logo-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); margin: 1.25rem 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { .hm-logo-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) { .hm-logo-grid { grid-template-columns: repeat(7, 1fr); } } .hm-logo-grid li { margin: 0; } .hm-logo-grid a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; padding: .9rem .6rem .8rem; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; background: #fff; text-decoration: none; color: var(--sb-ink, #1f2a3b); height: 100%; min-height: 118px; text-align: center; } .hm-logo-grid a:hover { border-color: var(--sb-ink, #1f2a3b); } .hm-logo-grid img { height: 36px; width: auto; max-width: 100%; object-fit: contain; } .hm-logo-grid b { font-size: .92rem; } .hm-logo-grid small { color: var(--sb-muted, #5b6575); font-size: .78rem; } /* the rules */ .hm-rules { background: var(--sb-paper, #f4f5f8); } .hm-rule-cards { display: grid; gap: .9rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; } @media (min-width: 640px) { .hm-rule-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .hm-rule-cards { grid-template-columns: repeat(4, 1fr); } } .hm-rule-cards li { margin: 0; background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1.1rem 1.2rem; border-top: 4px solid var(--sb-navy, #2d394e); } .hm-rule-cards h3 { font-size: 1.05rem; margin: 0 0 .4rem; } .hm-rule-cards p { font-size: .95rem; margin: 0; max-width: none; } .hm-rules-band { height: clamp(180px, 30vw, 380px); } /* trust, method */ .hm-trust { background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); } .hm-trust-method { margin-top: 1.5rem; } .hm-trust-method p { max-width: none; } .hm-founders { display: grid; gap: .75rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; } .hm-founders li { margin: 0; } .hm-founders a { display: flex; gap: .8rem; align-items: flex-start; text-decoration: none; color: inherit; padding: .75rem; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; background: var(--sb-card, #fff); } .hm-founders a:hover b { text-decoration: underline; } .hm-founders img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; } .hm-founders span { font-size: .92rem; line-height: 1.4; } .hm-founders b { display: block; font-size: 1rem; } .hm-facts { margin: 0; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; background: var(--sb-card, #fff); padding: .25rem 1.25rem; align-self: start; } .hm-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sb-rule, #d9dde5); } .hm-facts div:last-child { border-bottom: 0; } .hm-facts dt { color: var(--sb-muted, #5b6575); font-size: .95rem; } .hm-facts dd { margin: 0; font-weight: 600; text-align: right; } .hm-score { background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); border-bottom: 1px solid var(--sb-rule, #d9dde5); } .hm-figure { margin: 0; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem; background: var(--sb-card, #fff); } .hm-figure img { width: 100%; height: auto; display: block; } .hm-figure figcaption { font-size: .875rem; color: var(--sb-muted, #5b6575); margin-top: .75rem; } /* the handoff strip */ .hm-rank { background: var(--sb-paper, #f4f5f8); } .hm-rank-card { background: var(--sb-card, #fff); border: 1px solid var(--sb-rule, #d9dde5); border-left: 5px solid var(--sb-coral, #cb6064); border-radius: 10px; padding: 1.25rem 1.5rem; } .hm-rank-lead { font-size: 1.1rem; max-width: none; margin: 0 0 .75rem; } .hm-rank-lead a { font-weight: 600; } .hm-rank-risk { margin: 0 0 .5rem; max-width: none; } .hm-rank-card .sb-car { margin: 0; } /* faqs, risk, entry */ .hm-faqs { background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); } .hm-faqs .sb-faq > div p { max-width: none; } .sb-home .sb-risk { background: var(--sb-warn-bg, #fdf6f5); } .hm-entry { background: var(--sb-card, #fff); border-top: 1px solid var(--sb-rule, #d9dde5); } .hm-entry h2 { font-size: 1.35rem; margin-bottom: 1rem; } /* fixes after the first homepage render, 3 Sep 2026 */ .sb-native .sb-press h2.sb-press-h { color: rgba(255, 255, 255, .55); } .hm-pic { min-width: 0; max-width: 100%; } .hm-hero-in { overflow: hidden; } .hm-hero-in > * { min-width: 0; } /* the breadcrumb strip wraps on a phone rather than clipping */ .sb-native section.breadcrumbs .container--center > span { white-space: normal; overflow: visible; text-overflow: clip; display: inline; } /* the header logo keeps its size on native pages, where .sb-native img { height: auto } used to win */ .sb-native .sbh-logo img { height: 34px; width: auto; max-width: 200px; } @media (max-width: 760px) { .sb-native .sbh-logo img { height: 30px; } } .sb-native .sbh-in { align-items: center; } /* review: the pictures under the third-party ratings table (3 Sep 2026) */ .rv-ratings-figure { margin: 1.25rem 0 0; border: 1px solid var(--sb-rule, #d9dde5); border-radius: 10px; padding: 1rem; background: var(--sb-card, #fff); } .rv-ratings-figure img { width: 100%; height: auto; display: block; max-width: 800px; margin: 0 auto; } .rv-ratings-figure figcaption { font-size: .875rem; color: var(--sb-muted, #5b6575); margin-top: .75rem; }