/* * ════════════════════════════════════════════════════════════════════════ * base.css * ════════════════════════════════════════════════════════════════════════ * * 01. Reset – Universal box-sizing, margin and padding zero-out * 02. Body – Global font, background, colour and paper texture * 03. Content wrapper – .content max-width and padding * 04. Blockquote – Default blockquote indent reset * 05. Section divider – Horizontal rule with centred label * * ── DARK MODE ─────────────────────────────────────────────────────────── * 06. Dark mode – body.dark-mode overrides for all rules above * * ── MULTILINGUAL / RTL ────────────────────────────────────────────────── * 07. RTL overrides – Mirrors layout for Arabic, Hebrew, Urdu * (minimal in this file — base layout is flex/auto) * 08. Script overrides – Per-script resets grouped by script family: * A. Arabic script — ar, ur * B. Hebrew script — he * C. Devanagari — ne, hi * D. Myanmar — my * E. CJK — zh (zh-CN), ja * F. Hangul — ko * G. Cyrillic — ru, uk (chrome labels only) * H. Greek — el (chrome labels only) * * ════════════════════════════════════════════════════════════════════════ */ /* ── 01. RESET ──────────────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── 02. BODY ───────────────────────────────────────────────────────────── */ body { font-family: var(--main-font-family); background: var(--surface-mid); color: var(--text); font-size: 1rem; /* rem — scales with html font-size set in variables.css */ line-height: 1.7; min-height: 100vh; background-image: /* Subtle paper-grain texture rendered as an inline SVG data URI. feTurbulence generates fractalNoise; opacity 0.035 keeps it barely visible. Removed in dark mode (see below) as it reads as noise on dark backgrounds. */ url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* ── 03. CONTENT WRAPPER ────────────────────────────────────────────────── */ /* Centres and constrains the readable column width on wide screens. Bottom padding clears the fixed save bar. */ .content { max-width: 480px; margin: 0 auto; padding: 0 16px 80px; } /* ── 03b. LANDSCAPE LAYOUT ──────────────────────────────────────────────── */ /* In landscape orientation the 480px column wastes significant screen space. On a typical phone in landscape (~667–915px wide) this rule lets the content expand to use the available width, with slightly wider side padding so text doesn't press against the edges. The save bar has its own max-width (340px) and is intentionally left narrow — stretching two buttons across a landscape phone looks odd. The top nav already spans full width (no max-width set). */ @media (orientation: landscape) { .content { max-width: 100%; padding: 0 28px 80px; } } /* ── 04. BLOCKQUOTE ─────────────────────────────────────────────────────── */ blockquote { margin-inline-start: 0; /* was margin-left */ padding-inline-start: 10px; /* was padding-left */ } /* ── 05. SECTION DIVIDER ────────────────────────────────────────────────── */ /* Horizontal rule with a centred text label, used to separate question groups within a chapter. */ .section-break { display: flex; align-items: center; gap: 12px; margin: 24px var(--content-margin) 8px; } .section-break-line { flex: 1; height: 1px; background: var(--border); } .section-break-text { font-family: var(--font-stack-mono); font-size: 10px; /* UI chrome — stays px */ letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ 06. DARK MODE body.dark-mode overrides for all rules in this file, gathered here. ══════════════════════════════════════════════════════════════════════════ */ body.dark-mode { background: var(--dm-surface); color: var(--dm-text); background-image: none; /* paper-grain texture removed — reads as noise on dark bg */ } body.dark-mode .section-break-line { background: var(--dm-border); } /* ══════════════════════════════════════════════════════════════════════════ 07. RTL OVERRIDES (dir="rtl" on set by the JS language switcher) Applies to Arabic (ar), Urdu (ur), and Hebrew (he). The body layout is flex/auto throughout and .content uses symmetric padding, so no structural overrides are needed here. The dir="rtl" attribute on is sufficient for text direction and the border-inline-start / padding-inline-* logical properties used in component files handle element-level mirroring automatically. ══════════════════════════════════════════════════════════════════════════ */ /* No rules needed here. See component files for element-level RTL overrides. */ /* ══════════════════════════════════════════════════════════════════════════ 08. SCRIPT-SPECIFIC OVERRIDES ────────────────────────────────────────────────────────────────────────── See 01-fonts.css section 04 for the canonical rationale on each script family's requirements (letter-spacing, text-transform, font-style, font-family, line-height). BODY LINE-HEIGHT The body rule above sets line-height: 1.7 — correct for Latin scripts. Scripts with taller vertical metrics need more space; CJK needs less. These overrides set the base line-height at the body level so all elements that inherit it (paragraphs, list items, etc.) benefit automatically. Component files apply additional per-element overrides where tighter control is needed (e.g. preview snippets, modal bodies). BODY DIRECTION direction: rtl is NOT set here via CSS — it is applied by the JS language switcher as dir="rtl" on . Setting it in CSS would interfere with elements that need to remain LTR (e.g. code blocks, numeric inputs). The HTML attribute approach is the correct one. .section-break-text is the only chrome label in this file. It carries letter-spacing and text-transform that need resetting for non-Latin scripts. For Cyrillic and Greek only letter-spacing is reset. ══════════════════════════════════════════════════════════════════════════ */ /* ── A. Arabic script — ar, ur ────────────────────────────────────────── */ :lang(ar) body, :lang(ur) body { line-height: 2; } :lang(ar) .section-break-text, :lang(ur) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── B. Hebrew script — he ────────────────────────────────────────────── */ :lang(he) body { line-height: 1.9; } :lang(he) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── C. Devanagari — ne (Nepali), hi (Hindi) ─────────────────────────── */ :lang(ne) body, :lang(hi) body { line-height: 2; } :lang(ne) .section-break-text, :lang(hi) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── D. Myanmar script — my (Burmese) ───────────────────────────────── */ :lang(my) body { line-height: 2.2; } :lang(my) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── E. CJK — zh (Chinese Simplified, zh-CN), ja (Japanese) ──────────── */ :lang(zh) body, :lang(ja) body { line-height: 1.6; } :lang(zh) .section-break-text, :lang(ja) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── F. Hangul — ko (Korean) ─────────────────────────────────────────── */ :lang(ko) body { line-height: 1.7; /* same as Latin default — Hangul is comfortable here */ } :lang(ko) .section-break-text { letter-spacing: 0; text-transform: none; } /* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ─────────────────────── */ /* No body line-height change needed — 1.7 is fine for Cyrillic. Only the letter-spacing on the chrome label is reset. */ :lang(ru) .section-break-text, :lang(uk) .section-break-text { letter-spacing: 0; } /* ── H. Greek — el ───────────────────────────────────────────────────── */ /* Same light-touch treatment as Cyrillic. */ :lang(el) .section-break-text { letter-spacing: 0; }