/* type.css — the one type system for jackpmedia.com. Loaded last in . 6 sizes · 3 text colours + 2 accents · 2 weights · letter-spacing only on UPPERCASE labels. Ad mock-ups (.fbpost .ttpost .lipost .cv) keep their own styling — they are pictures of ads, not site text. */ :root { --fs-display: clamp(36px, 5.2vw, 64px); /* page title (h1) */ --fs-h2: clamp(28px, 3.2vw, 40px); /* section title, big stat numbers */ --fs-h3: clamp(20px, 1.7vw, 22px); /* card / sub-section title */ --fs-body: clamp(17px, 1.4vw, 19px); /* running text */ --fs-ui: 15px; /* buttons, nav, tabs, chips */ --fs-small: 14px; /* captions, labels, footnotes, tables */ --text: #FFFFFF; /* headings */ --text-mute: #B9B9E4; /* body text */ --text-dim: rgba(185, 185, 228, 0.72); /* captions, footnotes, labels */ --muted: var(--text-dim); /* accents: --pink (kicker label, primary button), --accent-lt (links) */ } h1 { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.02em; font-weight: 500; margin-left: 0; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; } h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; font-weight: 500; } p, li, dd { font-size: var(--fs-body); line-height: 1.65; } figcaption, small, caption { font-size: var(--fs-small); line-height: 1.55; color: var(--text-dim); } strong, b { font-weight: 500; } .btn, .nav a, .nav-drop-trigger, .ch-tab, .chip, .cl-chip, .lab-chip, .tab, summary { font-size: var(--fs-ui); } .nav-drop-menu a { font-size: var(--fs-ui); } .nav-drop-menu a em, .nav-group-label { font-size: var(--fs-small); color: var(--text-dim); } .table th, .table td, table th, table td { font-size: var(--fs-small); } .table thead th, .nav-group-label { letter-spacing: 0.06em; } /* the caption under an ad mock-up: one caption, one colour */ .feed-cap { font-size: var(--fs-small); line-height: 1.55; color: var(--text-dim); } .feed-cap b { color: var(--text-mute); font-weight: 500; } .feed-cap span { opacity: 1; color: var(--text-dim); } /* mock-ups read as pictures placed on the page, not as page text */ .fbpost, .ttpost, .lipost { box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(0, 0, 0, .38); } /* mock-ups keep their own weights */ .fbpost b, .fbpost strong, .ttpost b, .lipost b, .cv b { font-weight: 600; } /* base size for text that has no role of its own (bare links, loose lines) */ body { font-size: var(--fs-body); } th { font-weight: 500; } /* ===== ONE text colour for the whole site: #EDEDF7 (contrast 16.6:1 on the page, 14.9:1 on cards). Hierarchy comes from size and weight only. Pink stays only as decoration (kicker rule, button border). Ad mock-ups keep their own colours — they are pictures of ads. */ :root { --ink: #EDEDF7; --text: var(--ink); --text-mute: var(--ink); --text-dim: var(--ink); --muted: var(--ink); } body, h1:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h2:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h3:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h4:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), p:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), li:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), dd:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), dt:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), td:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), th:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), caption:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), figcaption:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), small:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), summary:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), label:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .kicker:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .num:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .feed-cap:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .feed-cap b:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .feed-cap span:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink); } .feed-cap span, figcaption, small { opacity: 1; } /* links: same colour, marked by an underline, not by a hue */ a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(237, 237, 247, .45); } a:hover { color: var(--ink); text-decoration-color: var(--ink); } .nav a, .nav-drop-trigger, .nav-drop-menu a, .btn, .ch-tab, .legal-links a, a.cl-card, [data-contact-cta] { text-decoration: none; } .btn-primary, .btn-ghost, .btn-primary:hover, .btn-ghost:hover { color: var(--ink); } .ch-tab[aria-selected="true"], .ch-tab.is-active { color: var(--ink); } /* test rows */ .bd-head h3 { font-size: var(--fs-h3); line-height: 1.3; } .bd-head .k { font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--ink); } .bd-head p { font-size: var(--fs-small); color: var(--text-dim); } /* ===== reading measure ===== body copy 45–75 characters per line; nothing narrower than ~28 */ details p, details li, .legal-body p, .legal-body li { max-width: 36em !important; } /* home "six steps": 6 columns of 170px gave 14–20 characters a line → 3 columns, 2 on tablets */ ol[style*="minmax(min(100%, 150px)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 32px !important; } @media (max-width: 900px) { ol[style*="minmax(min(100%, 150px)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 520px) { ol[style*="minmax(min(100%, 150px)"] { grid-template-columns: 1fr !important; } } /* ===== legal pages: a document, not a landing page ===== Same tokens, one step down: h1 = section size, h2 = card-title size, h3 = body size (semi-bold). Still 1 colour, still h1 → h2 → h3; nothing new added to the scale. */ .legal h1 { font-size: var(--fs-h2) !important; line-height: 1.15; } .legal-body h2 { font-size: var(--fs-h3) !important; line-height: 1.3; font-weight: 600; margin: 40px 0 10px; } .legal-body h3 { font-size: var(--fs-body) !important; line-height: 1.45; font-weight: 600; margin: 24px 0 6px; } .legal-body p, .legal-body li { font-size: var(--fs-body); } /* =================================================================== TONE & RHYTHM (v2) — one hue, three brightnesses. Replaces "everything #EDEDF7": near-white body text on navy glares (16.6:1) and flattens the hierarchy. Reference: Linear — headings bright, body muted (~6–10:1), captions dimmer. =================================================================== */ :root { --ink-hi: #F2F2FA; /* headings, key figures, links — 17.3:1 */ --ink: #B4B7D1; /* body — 9.8:1 on page, 8.8:1 on cards */ --ink-lo: #8E91B1; /* captions, labels, footnotes — 6.3:1 */ --text: var(--ink-hi); --text-mute: var(--ink); --text-dim: var(--ink-lo); --muted: var(--ink-lo); } body, p:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), li:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), dd:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), td:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink) !important; } h1:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h2:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h3:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h4:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), th:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), strong:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), b:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .fig:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .num:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), summary:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-hi) !important; } /* small text = captions/labels → dim; uppercase labels stay dim too */ [style*="--fs-small"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), figcaption:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), small:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .feed-cap:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), dt:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .dash-orig:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .kicker:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), p[style*="text-transform: uppercase"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), span[style*="text-transform: uppercase"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-lo) !important; } .feed-cap b:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink) !important; } /* big stat numbers in bands stay bright even if sized small elsewhere */ .band .num:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .band [class*="num"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-hi) !important; } /* links: bright + underline */ a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-hi) !important; text-decoration-color: rgba(242, 242, 250, .35); } .nav a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .nav-drop-trigger:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .nav-drop-menu a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink) !important; } .nav a:hover:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .nav-drop-menu a:hover:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-hi) !important; } .site-footer:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .site-footer p:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .site-footer a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .legal-links a:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-lo) !important; } .btn:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .btn-primary:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), .btn-ghost:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), [data-contact-cta]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { color: var(--ink-hi) !important; } /* ad mock-ups and the dashboard keep their own colours */ .dash p { color: #1C1E2E !important; } .dash p.dash-s { color: #6B7089 !important; } /* weight: headings a touch firmer so they separate from body without colour */ h1, h2 { font-weight: 600; letter-spacing: -0.022em; } h3 { font-weight: 600; letter-spacing: -0.01em; } /* measure: nothing runs past ~68 characters */ p, li, figcaption, dd { max-width: 68ch; } .dash p, .fbpost p, .ttpost p, .lipost p, .cv p { max-width: none; } /* rhythm: one section spacing, one heading→text spacing */ section[style*="padding: clamp"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { padding-top: clamp(72px, 8vw, 112px) !important; } section[style*="border-top: 1px solid var(--line)"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { margin-top: clamp(72px, 8vw, 112px) !important; } h2:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { margin-bottom: 0 !important; } h2 + p:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), h2 + div > p:first-child:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { margin-top: 20px !important; } p + p { margin-top: 16px; } /* case-study: sections are h2s inside one
— same rhythm as elsewhere */ h2[style*="margin-top: clamp(40px:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), 6vw:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *), 64px)"]:not(:is(.fbpost, .ttpost, .lipost, .cv, .dash, .lf-back, [style*="#1c1e21"], [style*="aspect-ratio: 9 / 16"], [style*="background: #fff"]) *) { margin-top: clamp(72px, 8vw, 112px) !important; } /* footer legal links: small print */ .site-footer .legal-links, .site-footer .legal-links a { font-size: 11px !important; letter-spacing: 0.01em; } /* legal pages: small-print document scale */ .legal h1 { font-size: clamp(26px, 2.6vw, 32px) !important; } .legal header p { font-size: 13px !important; } .legal-body h2 { font-size: 17px !important; margin: 32px 0 8px !important; } .legal-body h3 { font-size: 15px !important; margin: 20px 0 4px !important; } .legal-body p, .legal-body li, .legal-body dd { font-size: 15px !important; line-height: 1.6 !important; } .legal-body table, .legal-body th, .legal-body td, .legal-body .note, .legal-body small, .legal-body summary { font-size: 13px !important; } /* legal pages: one more step down */ .legal h1 { font-size: clamp(22px, 2vw, 26px) !important; } .legal header p { font-size: 12px !important; } .legal-body h2 { font-size: 15px !important; margin: 28px 0 6px !important; } .legal-body h3 { font-size: 13px !important; margin: 16px 0 4px !important; } .legal-body p, .legal-body li, .legal-body dd { font-size: 13px !important; line-height: 1.6 !important; } .legal-body table, .legal-body th, .legal-body td, .legal-body .note, .legal-body small, .legal-body summary { font-size: 12px !important; }