/* ============================================================ Readability — both languages Measured before writing: across the eight pages the English site had 398 text elements under 15px and 244 lighter than weight 600, with the smallest at 10.6px. That is a design drawn for a large bright screen, and it asks too much of everyone else. This raises the floor for the whole site. It loads after the component stylesheets so it can lift their weights, and before css/i18n.css so the Arabic layer — which needs a little more again, the script being finer — still has the last word. Sizes here are relative, so raising the root raises everything keyed to it in one move rather than by touching a hundred rules. ============================================================ */ /* 16px → 16.64px. Enough to feel easier without reflowing anything; verified for horizontal overflow from 320px to 1920px on every page. Arabic overrides this with its own, slightly larger value. */ :root { font-size: 104%; } /* ---------- weight: body copy ---------- 600, not 500, and the reason matters. The site uses the system font stack — Segoe UI on Windows, system-ui elsewhere — which offers two usable faces, not nine. Measured: 300, 400 and 500 all render the same glyphs at the same width, and 600 through 900 all render the bold face. Segoe UI genuinely has no Medium. So `font-weight: 500` is a no-op here: it asks for a face that does not exist and gets Regular. 600 is the first value that actually changes what you see. */ p, li, dd, dt, td, th, figcaption, blockquote { font-weight: 600; } /* Small print — card subtitles, chips, tags, meta lines, notes, hints, labels. This is the 11–14px band, where a light weight stops being a style choice and starts being an obstacle. */ [class*="__sub"], [class*="__meta"], [class*="__tag"], [class*="__chip"], [class*="__note"], [class*="__hint"], [class*="__label"], [class*="__stamp"], [class*="eyebrow"], [class*="kicker"], small { font-weight: 700; } /* ---------- size: the floor ---------- */ /* The smallest labels on the site. 0.82rem is 13.6px at the new root — small enough to stay a label, large enough to read. */ .orb__eyebrow, [class*="eyebrow"], [class*="kicker"], [class*="__stamp"], .nav__tagline, .pf-card__status, .pf-card__tags li, .pf-skill h3, .xp-card__badge, .cred-col__title, .act__stage, .act__dok, .regs__hint, .blog__modlink button, .mod__signout { font-size: 0.82rem; } /* The next band up: captions, chip labels, the facts under the hero. */ .orb__hint, .orb__hint span, .orb__motion, .grail__head p, .grail__name, .band__item span, .lead-split__facts li, .invite__note, .session-card__cta { font-size: 0.88rem; font-weight: 700; } .band__item strong { font-weight: 800; } /* ---------- contrast ---------- */ /* The faintest of the three greys carries most of the small text. A step brighter costs the design nothing and is the difference between reading it and guessing at it. */ :root { --ink-faint: #a3b2d0; } /* ---------- the rest, found by measuring ---------- These are the elements still under 13.5px or lighter than weight 500 after the rules above: bare inline elements the paragraph rule does not reach, and a handful of named small labels. Listed rather than caught by a blanket selector, so each one is a decision. */ span, time, option, label, button, input, select, textarea { font-weight: 600; } .field__hint, .post__topic, .pf-card__tags li, .cred-item span, .pf-stat span { font-size: 0.82rem; font-weight: 700; } .post__seed { font-size: 0.8rem; } .ib-card .lead { font-size: 0.85rem; } .blog__modlink button { font-weight: 700; } /* ---------- room to shrink ---------- Raising the base size raised every rem-based padding with it, and at 320px the experience cards no longer fit. Two things are needed and only one of them is obvious. A long word — "Instructional", "International" — cannot break, so it sets a floor on how narrow its box may be. overflow-wrap lets such a word break visually but does NOT lower that intrinsic minimum, so on its own the card still refused to shrink and hung off the screen edge. Flex and grid children default to min-width:auto, meaning "never narrower than my content"; setting it to 0 is what actually lets them fit. Both together. Language-neutral: Arabic needed this first, English needs it now that its type is larger too. */ body { overflow-wrap: break-word; } .xp-card, .xp-card__top, .xp-card__top > *, .card > *, [class*="__grid"] > *, [class*="__row"] > * { min-width: 0; } /* On the narrowest phones the padding itself is the constraint: 2rem of card padding around 1.8rem of inner padding leaves too little room once the base size goes up. */ @media (max-width: 480px) { .card { padding-left: 1.15rem; padding-right: 1.15rem; } .xp-card { padding: 1.15rem; } } /* ---------- the gold labels ---------- The accent-coloured small print: "In practice: …" under each of the three points, the eyebrow above the hero, the status and category chips, the section kickers. Thirteen of them across the site, all between 13.3px and 15px. Gold on near-black already costs some legibility next to white-on-black, and at that size it was the hardest text on the page to read. The "In practice" lines get the most: they are full sentences carrying real information, not chips. The rest come up to a common 0.9rem so they stay recognisable as labels. */ .turn__row em { font-size: 0.95rem; } .orb__eyebrow, [class*="eyebrow"], [class*="kicker"], .pf-card__status, .pf-skill h3, .cred-col__title, .ib-hero__chip, .accordion__badge, .ib-card .lead, .pkg__price span, .blog__policy, .post__topic, .post__seed { font-size: 0.9rem; } /* ============================================================ Text on the orange gradient Two components sit on the brand gradient: the .banner panels ("About the Course", "Your Journey to Global Influence Starts Here") and the Core Competencies grid. White, at Dr. Abir's direction. Worth recording that white on this gradient measures about 2.36:1, under the 4.5:1 WCAG asks of ordinary text — tools/audit-rtl.js lists it in its "accepted" bucket rather than as a fault, so it stays visible without burying new problems. Weight does the work instead: 800 on the body text and 900 on the headings keeps the strokes solid enough to hold their own against a bright ground. ============================================================ */ .banner, .banner__title, .banner__points, .banner__points li, .banner p, .banner strong, .competencies, .competencies__title, .competency { color: #fff; font-weight: 800; } .banner__title, .competencies__title { font-weight: 900; } /* Back to the original wash: a lighter panel was only needed while the text on it was dark. */ .competency { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); } .competency .check-item__tick { background: rgba(255, 255, 255, 0.3); color: #fff; } /* ---------- "About the Course" as points ---------- Five points, one per sentence of the paragraph this replaced. Left-aligned inside the centred panel: centred body text gives the eye no fixed edge to return to at the start of each line, which is most of why the block was hard to read. */ .banner__points { list-style: none; margin: 0 auto; padding: 0; max-width: 58rem; text-align: start; display: grid; gap: 0.85rem; } .banner__points li { position: relative; padding-inline-start: 1.9rem; line-height: 1.7; } /* A tick rather than a dot: these are what the course does, not an arbitrary list. Drawn in CSS so it inherits the text colour. */ .banner__points li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; font-weight: 900; opacity: 0.75; } /* ---------- the brand in the nav ---------- "Global Voices" is the wordmark, and it sat at weight 800 in a gradient fill. A gradient lightens the middle of every stroke, so the same weight reads thinner here than it does in flat white — which is why it looked lighter than the nav buttons beside it. 900 and a slightly larger size restore the weight the eye expects of a wordmark. */ .nav__title { font-weight: 900; font-size: 1.42rem; letter-spacing: -0.005em; } /* ---------- the nav is links now ---------- The nav used