/* Real Sports Bookings — SEO content pages ========================================= Layered ON TOP of /hello/landing.css, never instead of it. Load order in every page is: tokens/colors.css → tokens/elevation.css → landing.css → this. landing.css already owns everything shared with the marketing site: .wrap, .eyebrow, .btn, .nav, .brand, .sect, .shead, .cmp (comparison table), .faq, .foot, .badge, .lead/.leadcard, and both breakpoints (900px / 640px). What lives HERE is only what the content pages add on top: .crumbs breadcrumb bar .phero two-column page hero (copy + side card) .sidecard boxed summary that sits beside the hero copy .cards numbered reason/benefit cards .steps horizontal timeline (migration, onboarding) .prose long-form editorial body — guides only .rel related-page links, the internal-linking spine .stick sticky bottom CTA bar .cmpnote small print under a comparison table Keep this file additive. If a rule would be useful to the marketing site too, it belongs in landing.css instead. */ /* ─── Breadcrumbs ─────────────────────────────────────────────────────────── Rendered visibly AND as BreadcrumbList JSON-LD in every page head. If you change the trail here, change the JSON-LD in the same edit — Google drops the rich result when markup and visible text disagree. */ .crumbs{border-bottom:1px solid var(--rsb-border);background:var(--rsb-canvas)} .crumbs .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px} .crumbs a,.crumbs span{font:400 13px Inter,sans-serif;color:var(--rsb-text-muted)} .crumbs a:hover{color:var(--rsb-primary-500)} .crumbs span[aria-current]{color:var(--rsb-text-heading);font-weight:500} .crumbs .sep{color:var(--rsb-neutral-200);user-select:none} /* ─── Page hero ───────────────────────────────────────────────────────────── Narrower and left-aligned, unlike the homepage's centred .hero — these pages are read, not scanned, and a 58px centred headline buries the first sentence. */ .phero{background:var(--rsb-surface);border-bottom:1px solid var(--rsb-border);padding:64px 0 72px} .phero .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start} .phero h1{font:700 44px/1.1 Inter,sans-serif;letter-spacing:-.03em;margin:14px 0 0;text-wrap:balance} .phero .lede{font:400 17px/1.65 Inter,sans-serif;color:var(--rsb-text-body);margin:20px 0 0;max-width:58ch} .phero .ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap} .phero .meta{font:400 13px/1.6 Inter,sans-serif;color:var(--rsb-text-muted);margin:26px 0 0} /* Side card — the "honest summary" box. .tint is the blue-wash variant used on comparison pages where the summary is the most-read thing on the page. */ .sidecard{background:var(--rsb-surface);border:1px solid var(--rsb-border);border-radius:12px;padding:26px} .sidecard.tint{background:var(--rsb-primary-50);border-color:var(--rsb-primary-200)} .sidecard h4{font:600 14px Inter,sans-serif;color:var(--rsb-text-heading);margin:0 0 14px} .sidecard ol,.sidecard ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px} .sidecard li{font:400 14px/1.6 Inter,sans-serif;color:var(--rsb-text-body)} .sidecard li b{color:var(--rsb-text-heading);font-weight:600} .sidecard .foot{font:400 12px/1.55 Inter,sans-serif;color:var(--rsb-text-muted);margin:16px 0 0;border:none;background:none} /* NOTE: .cards / .card and .rel used to live here. They are now shared with the marketing homepage, so they moved to landing.css — which every SEO page already loads before this file, so nothing here changed visually. Keep new rules for those components in landing.css, not here. */ /* ─── Steps / timeline ────────────────────────────────────────────────────── Four-up. The connecting rule is drawn on the container, not per-item, so it never doubles up or dangles past the last step. */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative} .steps::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--rsb-border)} .st{position:relative;padding-top:34px} .st::before{content:"";position:absolute;top:5px;left:0;width:13px;height:13px;border-radius:50%;background:var(--rsb-primary-500);box-shadow:0 0 0 4px var(--rsb-surface)} .sect.alt .st::before{box-shadow:0 0 0 4px var(--rsb-canvas)} .st em{display:block;font:600 11px Inter,sans-serif;font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--rsb-primary-500)} .st b{display:block;font:600 16px Inter,sans-serif;color:var(--rsb-text-heading);margin-top:8px} .st p{font:400 13px/1.6 Inter,sans-serif;color:var(--rsb-text-body);margin:8px 0 0} /* ─── Long-form prose (guides) ────────────────────────────────────────────── 65ch measure. Guides are the only pages with a real reading column. */ .prose{max-width:65ch} .prose h2{font:700 26px/1.25 Inter,sans-serif;margin:52px 0 0;letter-spacing:-.02em;scroll-margin-top:84px} .prose h2:first-child{margin-top:0} .prose h3{font:600 18px/1.35 Inter,sans-serif;margin:32px 0 0} .prose p{font:400 16px/1.75 Inter,sans-serif;color:var(--rsb-text-body);margin:16px 0 0} .prose ul,.prose ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px} .prose li{font:400 16px/1.7 Inter,sans-serif;color:var(--rsb-text-body)} .prose li b,.prose p b{color:var(--rsb-text-heading);font-weight:600} .prose blockquote{margin:28px 0 0;padding:18px 22px;border-left:3px solid var(--rsb-primary-300);background:var(--rsb-canvas);border-radius:0 8px 8px 0} .prose blockquote p{margin:0;font-size:15px} .toc{background:var(--rsb-canvas);border:1px solid var(--rsb-border);border-radius:12px;padding:22px 26px;margin:0 0 44px} .toc b{display:block;font:600 13px Inter,sans-serif;color:var(--rsb-text-heading);margin-bottom:12px} .toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px} .toc li{font:400 14px/1.5 Inter,sans-serif} .byline{display:flex;align-items:center;gap:10px;font:400 13px Inter,sans-serif;color:var(--rsb-text-muted);margin:22px 0 0} .byline b{font-weight:600;color:var(--rsb-text-heading)} /* .rel moved to landing.css — see the note above. */ /* ─── Hub index grids ─────────────────────────────────────────────────────── Cluster landing pages (/solutions/, /compare/, …). Same card as .rel but two-up, since hub entries carry a longer description. */ .hubgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .hubgrid a{display:block;background:var(--rsb-surface);border:1px solid var(--rsb-border);border-radius:12px;padding:26px;transition:border-color .15s ease,box-shadow .15s ease} .hubgrid a:hover{border-color:var(--rsb-primary-300);box-shadow:0 2px 8px rgba(0,0,0,.06);text-decoration:none} .hubgrid b{display:block;font:600 17px/1.35 Inter,sans-serif;color:var(--rsb-text-heading)} .hubgrid span{display:block;font:400 14px/1.65 Inter,sans-serif;color:var(--rsb-text-body);margin-top:9px} /* ─── Comparison table additions ──────────────────────────────────────────── landing.css .cmp is built for the PLAN table: centred cells, 16% fixed widths, five columns. The competitor table is three columns of prose, so it overrides alignment and width here rather than forking the component. */ .cmp.vs td{text-align:left;width:auto;font:400 14px/1.6 Inter,sans-serif;color:var(--rsb-text-body);vertical-align:top} .cmp.vs th[scope=row]{width:20%;font-weight:600;color:var(--rsb-text-heading);vertical-align:top} .cmp.vs thead th{text-align:left} .cmp.vs thead th.us{color:var(--rsb-primary-600)} .cmp.vs td.us{background:var(--rsb-primary-50);color:var(--rsb-text-heading)} /* The verdict badge ("You do", "Their strength") sits on its own line ABOVE the explanation that follows it in the same cell. It must be display:flex, not inline-flex: inline-flex does not break the line, so the badge and the sentence after it render jammed together as "You doContacts, booking history…". align-items keeps the tick centred against the label; width fit-content stops the flex box spanning the cell and swallowing clicks. */ .cmp.vs .yes{display:flex;width:fit-content;align-items:center;gap:6px;font:600 13px Inter,sans-serif;color:var(--rsb-primary-600);margin-bottom:5px} .cmp.vs .yes svg{flex:none} .cmpwrap .cmp.vs{min-width:760px} /* ─── Sticky bottom CTA ───────────────────────────────────────────────────── Hidden under 900px: on a phone it eats a third of the viewport and competes with the in-page form. */ .stick{position:sticky;bottom:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--rsb-border)} .stick .wrap{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px} .stick b{font:600 14px Inter,sans-serif;color:var(--rsb-text-heading)} .stick p{font:400 13px Inter,sans-serif;color:var(--rsb-text-muted);margin:0} .stick .btn{margin-left:auto;flex:none} /* ─── Small print under a table or claim ─────────────────────────────────── Comparison pages MUST carry one of these: what the claim is based on, when it was checked, and the trademark disclaimer. */ .cmpnote{font:400 13px/1.65 Inter,sans-serif;color:var(--rsb-text-muted);margin:18px 0 0;max-width:80ch;text-align:left} /* ─── Responsive ──────────────────────────────────────────────────────────── Mirrors landing.css's two breakpoints so the two files stay legible together. */ @media (max-width:900px){ .phero .wrap{grid-template-columns:1fr;gap:36px} .phero h1{font-size:34px} .cards,.cards.two,.rel,.hubgrid{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr;gap:28px 24px} .steps::before{display:none} .stick{display:none} } @media (max-width:640px){ .phero{padding:44px 0 52px} .phero h1{font-size:28px} .phero .lede{font-size:16px} .phero .ctas{flex-direction:column;align-items:stretch} .steps{grid-template-columns:1fr} .prose h2{font-size:22px} .prose p,.prose li{font-size:15px} .cmpwrap .cmp.vs{min-width:600px} }