/* Styles for the static, pre-rendered content pages under /fr/ and /ar/. These pages ship as plain HTML so that crawlers which do not execute JavaScript — every AI answer engine — can read them. Keep this file free of any dependency on the React bundle. */ :root { --bg: #ffffff; --fg: #1f2430; --muted: #5b6472; --rule: #e3e7ee; --accent: #1f2937; --accent-soft: #f4f6fa; --max: 44rem; } @media (prefers-color-scheme: dark) { :root { --bg: #12151b; --fg: #e6e9ef; --muted: #9aa4b4; --rule: #262c37; --accent: #e6e9ef; --accent-soft: #1a1f28; } } * { box-sizing: border-box; } body { margin: 0; padding: 0 1.25rem 5rem; background: var(--bg); color: var(--fg); font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.7; -webkit-text-size-adjust: 100%; } .wrap { max-width: var(--max); margin: 0 auto; } header.site { max-width: var(--max); margin: 0 auto; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } header.site a.brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); text-decoration: none; letter-spacing: -0.01em; } nav.site a { color: var(--muted); text-decoration: none; margin-inline-start: 1rem; font-size: 0.95rem; } nav.site a:hover { color: var(--fg); text-decoration: underline; } h1 { font-size: clamp(1.85rem, 5vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; margin: 2.5rem 0 0.75rem; } h2 { font-size: clamp(1.3rem, 3.5vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em; margin: 2.75rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; } p.lede { font-size: 1.2rem; color: var(--muted); margin-bottom: 2rem; } ul, ol { padding-inline-start: 1.4rem; } li { margin: 0.4rem 0; } a { color: inherit; text-underline-offset: 0.15em; } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; } .scroller { overflow-x: auto; } th, td { text-align: start; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; } th { font-weight: 600; background: var(--accent-soft); } .note { background: var(--accent-soft); border-inline-start: 3px solid var(--rule); padding: 1rem 1.15rem; margin: 2rem 0; font-size: 0.95rem; color: var(--muted); } .cta { display: inline-block; margin: 1rem 0; padding: 0.7rem 1.35rem; background: var(--accent); color: var(--bg); border-radius: 0.5rem; text-decoration: none; font-weight: 600; } footer.site { max-width: var(--max); margin: 4rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--muted); } footer.site a { color: var(--muted); } .meta { font-size: 0.9rem; color: var(--muted); } /* Arabic / right-to-left pages set dir="rtl" on ; the logical properties above handle the mirroring, this only swaps the typographic defaults. */ [dir="rtl"] body { font-family: "Cairo", system-ui, sans-serif; }