/* Sawfar News Structure + editorial discipline from the "editorial" skill (typeui.sh, MIT): lead story, story grid, label-caps eyebrows, 8pt grid, tokens as CSS variables. Surface treatment follows Apple's design language: system typography, large tight-tracked headings, hairline separators, filled surfaces over borders, pill controls, translucent sticky chrome. Typography: Cairo (SIL OFL 1.1), self-hosted from fonts/ so every platform renders the same face. One variable file per script (~30 KB each) covers every weight from 200 to 1000; unicode-range means a page downloads only the scripts it actually uses. No requests leave the site. Accessibility deviation, per the editorial skill's own quality gate ("prioritise accessibility over aesthetics"): the base size is 21px for older readers, and the 14/16/18/24/32/40 scale is applied as ratios of it. */ /* ---- fonts: Cairo, variable weight, SIL OFL 1.1 (fonts/OFL.txt) ---- */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("fonts/cairo-latin.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; } /* ---- tokens ---- */ :root { --bg: #ffffff; --surface: #f5f5f7; --surface-2: #ebebef; --text: #1d1d1f; --muted: #62626a; /* darkened from Apple's #6e6e73 to clear AA */ --accent: #0064d2; /* darkened from #0071e3 to clear AA on white */ --accent-ink:#ffffff; --danger: #cc0016; --hairline: rgba(0, 0, 0, 0.13); --chrome: rgba(255, 255, 255, 0.72); --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 64px; --s7: 88px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 980px; /* Ratios of --base (not of 16px). Tuned so the default renders at the same display sizes as before, while lifting secondary text -- kickers, buttons, excerpts -- that previously sat below the 21px reading base. */ --base: 21px; --t-xs: 0.76rem; /* 16.0px at default */ --t-sm: 0.88rem; /* 18.5px */ --t-md: 1.06rem; /* 22.3px */ --t-lg: 1.25rem; /* 26.3px */ --t-xl: 1.7rem; /* 35.7px */ --t-2xl: 2.2rem; /* 46.2px */ /* Cairo on every platform; the system UI font only while it loads */ --ui: "Cairo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --text: #f5f5f7; --muted: #a8a8ae; --accent: #4da2ff; --accent-ink: #00122b; --danger: #ff6961; --hairline: rgba(255,255,255,0.16); --chrome: rgba(0,0,0,0.72); } } :root[data-theme="dark"] { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --text: #f5f5f7; --muted: #a8a8ae; --accent: #4da2ff; --accent-ink: #00122b; --danger: #ff6961; --hairline: rgba(255,255,255,0.16); --chrome: rgba(0,0,0,0.72); } html[data-size="large"] { --base: 25px; } html[data-size="xlarge"] { --base: 30px; } * { box-sizing: border-box; } /* The size lives on so that every rem-based token below scales with the حجم الخط control. Setting it on instead leaves rem bound to the 16px initial value, which freezes headlines, excerpts and buttons. */ html { background: var(--bg); font-size: var(--base); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 1rem; line-height: 1.6; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } .wrap { max-width: 1088px; margin: 0 auto; padding-inline: var(--s3); } .wrap-narrow { max-width: 736px; } .skip, .skip:visited { position: absolute; right: -9999px; top: 0; background: var(--text); color: var(--bg); padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 20; } .skip:focus { right: var(--s2); top: var(--s2); } /* NOTE: a:visited has specificity (0,1,1) and will outrank any single-class component rule such as .more-link (0,1,0). Every component below that sets its own colour must therefore repeat itself with :visited, or a visited link silently takes the accent colour -- which on the filled button meant blue text on a blue fill, i.e. an invisible label. */ a { color: var(--accent); text-underline-offset: 3px; } a:visited { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ---- eyebrow ---- */ .kicker { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--muted); margin-bottom: var(--s1); } .kicker-urgent { color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; } /* ---- masthead ---- */ .masthead > .wrap { padding-block: var(--s5) var(--s3); text-align: center; } .dateline { margin: 0 0 var(--s3); font-size: var(--t-xs); color: var(--muted); } .wordmark, .wordmark:visited { display: block; text-decoration: none; color: var(--text); } .wordmark-ar { display: block; font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .wordmark-en { display: block; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: var(--s1); } .masthead-tag { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--muted); } /* translucent sticky chrome */ .utility { position: sticky; top: 0; z-index: 10; background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } .utility-inner { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; padding-block: var(--s1); } .site-nav { display: flex; flex-wrap: wrap; gap: var(--s1); } .site-nav a, .site-nav a:visited { min-height: 48px; display: flex; align-items: center; padding: 0 var(--s2); font-size: var(--t-sm); font-weight: 500; color: var(--text); text-decoration: none; border-radius: var(--r-pill); } .site-nav a:hover { background: var(--surface-2); } .site-nav a[aria-current="page"] { background: var(--text); color: var(--bg); font-weight: 600; } .textsize { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .textsize-label { font-size: var(--t-xs); color: var(--muted); margin-inline-end: 2px; } .textsize button { min-height: 48px; min-width: 62px; padding: 0 var(--s2); font-family: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; } .textsize button:hover { background: var(--surface-2); } .textsize button[aria-pressed="true"] { background: var(--text); color: var(--bg); } /* ---- lead ---- */ main { padding-block: var(--s5) var(--s7); } .front-slug, .section-rule { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 var(--s2); } .section-rule { margin-top: var(--s7); } .lead { padding-bottom: var(--s5); } .lead-title { font-size: var(--t-2xl); line-height: 1.08; font-weight: 700; letter-spacing: -0.024em; margin: 0 0 var(--s3); } .lead-title a, .lead-title a:visited { color: var(--text); text-decoration: none; } .lead-title a:hover { color: var(--accent); } .lead-excerpt { font-size: var(--t-md); color: var(--muted); margin: 0 0 var(--s3); max-width: 640px; } /* ---- grid ---- */ .grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); } .grid-full { grid-column: 1 / -1; } .card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s3); display: flex; flex-direction: column; } .card-title { font-size: var(--t-lg); line-height: 1.22; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--s1); } .card-title a, .card-title a:visited { color: var(--text); text-decoration: none; } .card-title a:hover { color: var(--accent); } .excerpt { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-md); } .card .more { margin-top: auto; } .more { margin: 0; } .more-link, .more-link:visited { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3); font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); background: var(--accent); text-decoration: none; border-radius: var(--r-pill); } .more-link:hover { filter: brightness(1.12); } @media (min-width: 48rem) { .grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } .lead-title { font-size: 2.6rem; } /* 54.6px at default */ } /* ---- article ---- */ .article h1 { font-size: var(--t-xl); line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; margin: 0 0 var(--s2); } .article h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; margin: var(--s5) 0 var(--s2); } .article p { margin: 0 0 var(--s3); } .byline { font-size: var(--t-xs); color: var(--muted); padding-bottom: var(--s3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s4); } .standfirst { font-size: var(--t-md); color: var(--muted); } .truncated { padding: var(--s3); background: var(--surface); border-radius: var(--r-md); } .source { font-size: var(--t-sm); color: var(--muted); } .big-contact { font-size: var(--t-md); } .tags { font-size: var(--t-xs); color: var(--muted); } .tags span { margin-inline-end: var(--s2); white-space: nowrap; } .pager { display: grid; gap: var(--s2); margin: var(--s5) 0; } @media (min-width: 48rem) { .pager { grid-template-columns: 1fr 1fr; } } .pager-link, .pager-link:visited { display: block; padding: var(--s3); text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--t-sm); background: var(--surface); border-radius: var(--r-lg); } .pager-link:hover { background: var(--surface-2); } .back { margin-top: var(--s4); } /* ---- ad placements (positional only; no topic targeting) ---- */ .ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 130px; margin-block: var(--s4); padding: var(--s3); text-align: center; color: var(--muted); font-size: var(--t-xs); background: var(--surface); border: 1px dashed var(--hairline); border-radius: var(--r-lg); } .ad-tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); } .ad-sep { opacity: 0.45; } @media (min-width: 48rem) { .ad { min-height: 150px; } } /* ---- rate card ---- */ .table-scroll { overflow-x: auto; } .slots { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .slots caption { text-align: start; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding-bottom: var(--s2); } .slots th, .slots td { text-align: start; padding: var(--s2) var(--s1); border-bottom: 1px solid var(--hairline); } .slots th { font-weight: 600; font-size: var(--t-xs); color: var(--muted); } .slot-name { color: var(--muted); } /* ---- footer ---- */ .site-foot { background: var(--surface); margin-top: var(--s7); padding-block: var(--s3) var(--s5); color: var(--muted); font-size: var(--t-sm); text-align: center; } .site-foot .ad { background: var(--bg); } .site-foot p { margin: var(--s1) 0; } .foot-name { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .foot-en { font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0 !important; } /* ---- internal review page ---- */ .draft { padding-block: var(--s3); border-bottom: 1px solid var(--hairline); } .draft h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--s1); } .draft-label { margin: var(--s2) 0 var(--s1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .draft pre { white-space: pre-wrap; word-wrap: break-word; background: var(--surface); border-radius: var(--r-md); padding: var(--s2); font-size: var(--t-xs); line-height: 1.55; direction: ltr; text-align: start; overflow-x: auto; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { .ad, .site-nav, .textsize, .pager, .skip, .utility { display: none; } }