/* ============================================================================ CV Warehouse — Brand & Typography System ---------------------------------------------------------------------------- One shared layer, loaded last in on all 40 pages (EN + /ar). It does four things and nothing else: 1. Declares the canonical colour and type tokens (the single source of truth — every page's own CSS has been collapsed onto these values). 2. Repairs typography defects no page-level CSS covers: form controls losing the brand font, Arabic base sizing, focus rings, selection. 3. Fixes the remaining WCAG AA contrast failures found by measurement. 4. Holds the responsive floors so type never collapses on small screens. It deliberately contains NO layout, NO component styling and almost no !important — page CSS keeps ownership of its own design. Palette (measured contrast on the surface each colour is intended for): Red #C62828 5.62:1 on paper primary CTA, links, active nav Red deep #9D1A22 7.72:1 on paper hover / pressed / gradient end Red bright #E8483F — gradient highlight, large type, on-dark accents. NEVER small white text on it (3.87:1). Red tint #FFA294 9.4:1 on ink red text on dark surfaces Error #A31F1F 7.4:1 on paper form errors, critical severity Navy #1D3A5C · #16304D · #0F2338 secondary, panels, charts Ink #0B0E17 · #141C2B · #20242F headings, dark sections Body #4A5468 7.6:1 on paper paragraph text Muted #5B6678 5.81:1 on paper captions — faintest text allowed Paper #FFFFFF · #FBFAF8 · #F6F4F0 · #F0EDE7 · #E6E0D6 (rule) Success #146B3F 6.55:1 on paper ticks, pass states Success (dark) #2FAE6E 6.46:1 on ink the same role on dark surfaces Gold #FED43F — dark or red surfaces ONLY Gold mid #E0A828 — gradient midpoint Gold deep #8A6A14 5.06:1 on paper gold that works on light ============================================================================ */ :root { /* ── Brand ─────────────────────────────────────────────────────────── */ --cvw-red: #C62828; --cvw-red-deep: #9D1A22; --cvw-red-bright: #E8483F; --cvw-red-tint: #FFA294; --cvw-error: #A31F1F; /* ── Secondary ─────────────────────────────────────────────────────── */ --cvw-navy: #1D3A5C; --cvw-navy-deep: #16304D; --cvw-navy-darkest: #0F2338; /* ── Ink / dark surfaces ───────────────────────────────────────────── */ --cvw-ink: #0B0E17; --cvw-ink-2: #141C2B; --cvw-ink-3: #20242F; /* ── Text ──────────────────────────────────────────────────────────── */ --cvw-text: #4A5468; --cvw-muted: #5B6678; /* ── Light surfaces ────────────────────────────────────────────────── */ --cvw-card: #FFFFFF; --cvw-paper: #FBFAF8; --cvw-paper-alt: #F6F4F0; --cvw-surface-3: #F0EDE7; --cvw-rule: #E6E0D6; /* ── Semantic ──────────────────────────────────────────────────────── */ --cvw-success: #146B3F; --cvw-success-on-dark:#2FAE6E; --cvw-gold: #FED43F; --cvw-gold-mid: #E0A828; --cvw-gold-deep: #8A6A14; --cvw-warning: #8A6A14; /* ── Type ──────────────────────────────────────────────────────────── */ --cvw-font-display: 'Bricolage Grotesque', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cvw-font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cvw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --cvw-font-arabic: 'Cairo', 'Figtree', 'Segoe UI', Tahoma, sans-serif; /* Ceilings the whole site honours, so 20 pages read as one product. H1 62 / H2 44 / H3 30 / body 16 · 1.6 (1.7 for long-form prose). */ --cvw-h1-max: 62px; --cvw-h2-max: 44px; --cvw-h3-max: 30px; --cvw-lh-body: 1.6; --cvw-lh-long: 1.7; } /* ============================================================================ 1 · FONT INHERITANCE Form controls do not inherit font-family from body. Without this, buttons and inputs render in Arial (and timers in Courier) on 8 pages — measured. font-size is deliberately NOT forced here: mobile-polish.css already lifts touch inputs to 16px, and page CSS owns control sizing. ========================================================================== */ button, input, select, textarea, optgroup, ::file-selector-button { font-family: inherit; font-style: inherit; letter-spacing: inherit; } /* Elements that opt into the mono face keep it. */ [class*="mono"], [class*="countdown"], [class*="timer"], [class*="digits"], .wpm, .cpm, code, kbd, samp, pre { font-feature-settings: 'tnum' 1; } /* Numeric readouts should not jitter as they count. */ [data-count], [class*="stat-n"], [class*="-num"], [class*="counter"], [class*="price"], [class*="score"], [class*="timer"], [class*="countdown"] { font-variant-numeric: tabular-nums; } /* ============================================================================ 2 · TEXT RENDERING ========================================================================== */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { text-wrap: balance; } p, li, figcaption, blockquote { text-wrap: pretty; } /* ============================================================================ 3 · ARABIC Cairo is the single Arabic face (Tajawal, Amiri-as-UI and IBM Plex Sans Arabic are gone). Cairo's glyphs run optically smaller than Figtree's and Arabic needs more leading than Latin, so the RTL base is nudged one step — the same value on every Arabic page instead of five different ones. Amiri survives on the homepage only, for the scriptural pull-quote. ========================================================================== */ /* Bilingual stacks, not replacements: font fallback resolves per glyph, so Latin words inside Arabic copy keep Figtree and Bricolage while every Arabic character falls through to Cairo. Brand names and prices stay on brand. */ html[dir="rtl"] body, html[lang="ar"] body { font-family: 'Figtree', 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: 16.5px; line-height: var(--cvw-lh-long); } html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6), html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) { font-family: 'Bricolage Grotesque', 'Cairo', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; /* negative tracking damages Arabic joins */ line-height: 1.35; } /* Latin numerals, prices and codes inside Arabic copy stay in the mono face. */ html[dir="rtl"] :is(.mono, code, kbd, samp, [class*="mono"]) { font-family: var(--cvw-font-mono); } /* ============================================================================ 4 · FOCUS, SELECTION, ACCENTS One visible focus ring in brand red across the whole site. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--cvw-red); outline-offset: 2px; border-radius: 4px; } /* On red or dark chrome the ring inverts so it stays visible. */ :where(.site-nav, footer, [class*="promo"], [data-theme="dark"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #FFFFFF; } ::selection { background: rgba(198,40,40, .16); color: var(--cvw-ink); } ::-moz-selection { background: rgba(198,40,40, .16); color: var(--cvw-ink); } input[type="checkbox"], input[type="radio"], progress, input[type="range"] { accent-color: var(--cvw-red); } /* ============================================================================ 5 · CONTRAST REPAIRS (measured WCAG 2.1 AA failures) Each rule below replaces a colour that was measured under 4.5:1 for text or 3:1 for large text / meaningful graphics on its real background. ========================================================================== */ /* 5.1 Base link colour. Four pages defined no `a` rule at all, so every bare link — including the whole mega-menu — rendered in the browser default #0000EE. :where() carries zero specificity, so this restores the site convention without overriding a single page's own link styling. */ :where(a[href]) { color: inherit; } /* 5.1b Mega-menu hierarchy was inverted: the link title was muted #5B6678 while its secondary description sat in near-black. */ .nav-dropdown .nd-title, .nav-dropdown .mega-link .nd-title { color: var(--cvw-ink); font-weight: 600; } .nav-dropdown .nd-desc, .nav-dropdown .mega-link .nd-desc { color: var(--cvw-muted); font-weight: 400; } /* 5.2 Success green needs a lighter step on dark surfaces (2.94:1 → 6.46:1) and the deep step on light ones. Scoped per surface, never blanket. */ .rm-num, .ba-card.ba-after .ba-tag, .ai-good-check { color: var(--cvw-success-on-dark) !important; } .ba-card.ba-before .ba-tag { color: var(--cvw-muted) !important; } /* 5.3 Gold is a dark-surface colour. On light it measures 1.43:1, so star ratings and figures sitting on white take the deep gold instead. */ .t-star, .t-stars .t-star, .wh-stat-num.on-light, .rating-stars--light .star { color: var(--cvw-gold-deep); } /* 5.4 Muted greys that fell below the readable minimum on light backgrounds. */ .trust-logo, .tf-chip, .gratuity-lbl { color: var(--cvw-muted); } /* The same trust strip is used on light bands and inside the dark footer. Inside the footer it takes the footer's own muted token, which is AA on ink. */ footer .footer-trust-strip-label, footer .footer-trust-strip a, footer .footer-trust-strip p, footer .footer-legal, footer .fine { color: var(--fw-muted, #9AA7C2); } /* 5.4b Icon buttons kept white glyphs from an earlier dark-console design; the console renders on paper now, so they were white on white. */ .icon-btn, .console .icon-btn { color: var(--cvw-ink); } /* 5.5 Small footer text on ink was 3.32:1; the footer's own muted token is already AA on that ground, so use it. */ footer .fine, footer small, footer [class*="legal"], footer [class*="copyright"] { color: var(--fw-muted, #9AA7C2); } /* 5.6 White label on the mint statistic gradient was 1.70:1. */ .stat-em { color: var(--cvw-ink); } /* ============================================================================ 5b · ONE BRAND, TWENTY PAGES Tool and calculator pages keep their own accent — that is deliberate — but the chrome a visitor recognises (nav, footer, buttons, links) stays red on every page. The nav, footer and primary CTA tokens are already red at source; these are the last selection states that were still indigo. ========================================================================== */ .mkt-tab.active, .cl-tab-btn.active, .pcs-btn.active { background: var(--cvw-red); border-color: var(--cvw-red); color: #FFFFFF; box-shadow: 0 4px 16px rgba(198,40,40, .22); } /* the page sets this one with !important, so it must be matched */ .cl-skip, .cl-skip:focus { background: var(--cvw-red) !important; color: #FFFFFF; } .skip-link:focus { background: var(--cvw-red); color: #FFFFFF; } /* ============================================================================ 5c · ONE LOGO LOCKUP The mark rendered at four different sizes across the site — 38px on sixteen pages, 35px on two, and 48px with a 398px wordmark on the cover-letter page. The logo is the one element a visitor recognises before anything else, so it is pinned to a single size at each breakpoint. ========================================================================== */ .site-nav .nav-logo-icon-wrap { width: 38px; height: 38px; flex: none; } .site-nav .nav-logo-icon, .site-nav .nav-logo-icon-wing { width: 38px; height: 38px; object-fit: contain; } .site-nav .nav-logo-word img { height: 22px; width: auto; } @media (max-width: 640px) { .site-nav .nav-logo-icon-wrap { width: 28px; height: 28px; } .site-nav .nav-logo-icon, .site-nav .nav-logo-icon-wing { width: 28px; height: 28px; } .site-nav .nav-logo-word img { height: 16px; } } /* ============================================================================ 6 · RESPONSIVE FLOORS Type must not fall below readable sizes on phones, and headings must not overflow. Sizes only ever move up here, never down. NOTE ON THE RULES THAT USED TO BE HERE (fixed 9 September 2026) --------------------------------------------------------------------------- This block used to floor type with two very broad rules: p, li, td, th, ... , [class*="-text"] { font-size: max(1em, 12px) } [class*="tag"], [class*="label"], ... { font-size: max(1em, 11px) } Inside `font-size`, `1em` resolves against the PARENT's size, not the element's own. So `max(1em, 11px)` can never floor an element at 11px: it either leaves it at the parent's size or, where the parent is larger, RAISES it to the parent's size. Because both rules sit at (0,1,0) specificity in a file loaded after every page's own CSS, they beat the page and every matching element was resized to whatever its parent happened to be. Measured effect on the LinkedIn Authority page: 70+ elements. Every section eyebrow and micro-label jumped to 16px, and `.hero-eyebrow-line` — a span inside the

— rendered at 44.8px instead of 15px, outweighing the headline on every phone. The intent ("some were rendering at 8.5px") was real, so it is kept, but as an explicit list. Every class below was measured at ≤640px across all 20 English pages and both language twins with the broken rules disabled, and every one of them renders under 10.5px everywhere it is used — so a flat 11px can only ever raise it. Classes that are small in one place and large in another (`js-price-inline` 9.5→16px, `.low`/`.medium`/`.critical` 9→12.8px) are deliberately NOT in this list: a flat floor would shrink their larger uses. If you add a new micro-label under 10px, add its class here rather than reaching for a broad selector. ========================================================================== */ @media (max-width: 640px) { /* Homepage: plan tables, service flow, trust strip */ .th-badge, .svc-flow-step-n, .plan-flag, .cvw-trust-browser-url, .ps-n, .po-label, .svc-stat-l, .svc-flow-label, .pg-val, .cell-value, .cell-note, .tf-pct, /* AutoPilot: dashboard mock, spec captions, status chips */ .b-tag, .hv-live, .spec-cap, .ss-l, .tm-label, .cvw-sample, .c-status, .st-view, .st-sent, .st-ver, /* CV Distribution */ .cp-more-arrow, .currency-live-badge, /* Recruiter Magnet */ .otw-pill, /* IQ test */ .start-gate-privacy, .role-cat-header, .hero-stat-label, .hero-card-badge, .domain-difficulty, .lesson-badge, /* Organization Health Check */ .product-tag, .ohc-opt, .severity-tag, .ohc-proj-k, .ohc-step-meta, .ohc-why-k, .symptom-count, .js-picked, .symptom-all-btn, /* Affiliate programme */ .gf-k, .step-tag, .note-k { /* !important because most of these are set by a compound page selector (`.trust-header .th-badge`) that outranks a single class here, so without it the floor silently does nothing. It is safe on this list and only on this list: every class was measured never to exceed 10.5px anywhere, so 11px can only raise. Do not add a class here without measuring it first. */ font-size: 11px !important; } /* Long words and URLs wrap instead of forcing a horizontal scroll. */ h1, h2, h3, h4, p, li, td, a { overflow-wrap: anywhere; word-break: normal; } /* Slide-in panels start 40px to the right of their resting position, which shows as a brief sideways scroll on a phone. `clip` (not `hidden`) trims it without turning
into a scroll container, so sticky still works. */ main { overflow-x: clip; } /* One page pinned its nav logo at flex:0 0 auto, so a 370px wordmark pushed the menu button off a 390px screen and the whole page scrolled sideways. */ .site-nav .nav-inner { min-width: 0; } .site-nav .nav-logo { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 58px); overflow: hidden; } .site-nav .nav-logo-word img { max-width: 100%; } /* Tight display tracking becomes damaging at small sizes. */ h1, h2 { letter-spacing: -0.02em; } } @media (max-width: 400px) { h1 { letter-spacing: -0.015em; } } /* Tables and code never push the page sideways. */ @media (max-width: 900px) { pre, table { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================================ 7 · LAST-MILE TYPE REPAIRS Rules that live inside shared component classes, fixed here so a single edit covers every page that uses them. ========================================================================== */ /* Countdown digits fell back to the UA monospace (Courier New). */ .countdown, .countdown-item, .countdown-separator, .countdown-label { font-family: var(--cvw-font-mono); } /* One heading ceiling that lives in a shared component class. */ .final-cta h2 { font-size: clamp(2rem, 4.4vw, var(--cvw-h2-max)); } /* ============================================================================ 8 · SCROLLBAR The document scrollbar was styled on two pages out of forty — a LinkedIn-blue gradient (#0A66C2) running the full height of a red-branded site — and left to the browser default on the other thirty-eight. It is now one brand rail everywhere, in two scales: 11px for the page, 8px for scrollers inside components, so an inner rail never shouts as loudly as the page's own. `background-clip: padding-box` behind a transparent border is what gives the thumb its inset look without hardcoding the track colour into the border. Components that deliberately hide their scrollbar (the quick-nav strips, the tab rails) are scoped selectors and still win. ========================================================================== */ /* Firefox and any browser on the standard properties. */ html { scrollbar-color: var(--cvw-red) var(--cvw-surface-3); scrollbar-width: thin; } /* Scrollers inside components — the quieter 8px scale. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--cvw-surface-3); } ::-webkit-scrollbar-corner { background: var(--cvw-surface-3); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cvw-red-bright) 0%, var(--cvw-red) 55%, var(--cvw-red-deep) 100%); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--cvw-red) 0%, var(--cvw-red-deep) 100%); background-clip: padding-box; border: 2px solid transparent; } /* The page's own scrollbar — the 11px scale. */ html::-webkit-scrollbar { width: 11px; height: 11px; } html::-webkit-scrollbar-track { background: var(--cvw-surface-3); } html::-webkit-scrollbar-thumb { border-radius: 8px; }