/* Shared stylesheet for the Aqeedah demo — ONE copy serves every page. Per-subject palette comes from inline :root vars (--accent / --accent-dark / --accent-soft) set in each page's . This file is the rearchitecture's "extract the CSS" win: ~25 inlined copies in the old site collapse to this single cached asset. */ :root { --bg:#f6f4ef; --card:#fff; --ink:#2b2b2b; --border:#e0dcd2; --gold:#9c6b1f; --red:#c0392b; --red-soft:#fdecea; --green:#1e8e3e; --green-soft:#e6f4ea; /* fallbacks; pages override accent vars inline */ --accent:#2f7d76; --accent-dark:#21564f; --accent-soft:#e2efed; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Segoe UI",system-ui,sans-serif; line-height:1.55; } .ar { font-family:"Sakkal Majalla","Traditional Arabic","Amiri","Segoe UI",serif; direction:rtl; unicode-bidi:isolate; } /* nav chrome */ .sitenav { display:flex; gap:14px; align-items:center; background:var(--accent-dark); padding:8px 16px; font-size:.85rem; } .sitenav a { color:#fff; text-decoration:none; opacity:.85; } .sitenav a:hover { opacity:1; text-decoration:underline; } .sitenav .next { margin-inline-start:auto; } header { background:var(--accent); color:#fff; padding:18px 16px 14px; text-align:center; } header h1 { margin:0; font-size:1.25rem; font-weight:600; } header h1 .ar { font-size:1.3rem; } header p { margin:5px 0 0; font-size:.85rem; opacity:.88; } nav { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; background:var(--accent); padding:0 8px 14px; } nav button { border:none; border-radius:999px; padding:8px 16px; font-size:.9rem; cursor:pointer; background:rgba(255,255,255,.18); color:#fff; font-family:inherit; } nav button.active { background:#fff; color:var(--accent); font-weight:600; } nav button.locked { opacity:.6; } main { max-width:880px; margin:0 auto; padding:20px 14px 80px; } section { display:none; } section.visible { display:block; } /* prose */ h2 { font-size:1.15rem; color:var(--accent); margin:22px 0 10px; border-bottom:2px solid var(--accent-soft); padding-bottom:4px; } h3 { font-size:1rem; color:var(--accent-dark); margin:16px 0 6px; } p { margin:10px 0; } .note { background:var(--accent-soft); border-inline-start:4px solid var(--accent); padding:10px 14px; border-radius:8px; font-size:.92rem; margin:12px 0; } .note.warn { background:var(--red-soft); border-inline-start-color:var(--red); } .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin:12px 0; } .card h3 { margin-top:0; } ul.tight, ol.tight { margin:6px 0; padding-inline-start:22px; } ul.tight li, ol.tight li { margin:3px 0; } /* tables */ table.ctable, table.cmp, table.crib { width:100%; border-collapse:collapse; margin:12px 0; font-size:.9rem; background:var(--card); } table.ctable th, table.ctable td, table.cmp th, table.cmp td, table.crib th, table.crib td { border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; } table.ctable th, table.cmp th, table.crib th { background:var(--accent); color:#fff; font-weight:600; } table.ctable tr:nth-child(even) td, table.crib tr:nth-child(even) td { background:#faf7f2; } table .ar { font-size:1.1rem; color:var(--accent-dark); } table.cmp td:first-child { font-weight:600; color:var(--accent-dark); } table.crib td:first-child { font-weight:600; background:var(--accent-soft); white-space:nowrap; } /* reference: definition list */ dl.ref { margin:12px 0; } dl.ref dt { font-weight:600; color:var(--accent-dark); margin-top:12px; } dl.ref dd { margin:2px 0 0; padding-inline-start:14px; border-inline-start:2px solid var(--accent-soft); font-size:.94rem; } /* one-liners */ ul.oneliners { list-style:none; padding:0; margin:10px 0; } ul.oneliners li { background:var(--card); border:1px solid var(--border); border-inline-start:3px solid var(--accent); border-radius:8px; padding:8px 12px; margin-bottom:7px; font-size:.93rem; } /* flashcards */ .toolbar { margin:6px 0 14px; } .toolbar button { background:var(--accent); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-size:.9rem; font-family:inherit; cursor:pointer; } .flashgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin:10px 0; } .fcard { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 14px; cursor:pointer; } .fcard .front { font-size:1.15rem; color:var(--accent-dark); } .fcard .back { font-size:.9rem; margin-top:5px; color:var(--ink); } .flash .fcard .back { visibility:hidden; } .flash .fcard.reveal .back { visibility:visible; } /* quiz: MCQ engine */ .progress { display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; } .progress span { flex:1; min-width:7px; height:8px; border-radius:4px; background:#ddd8cc; } .progress span.ok { background:var(--green); } .progress span.bad { background:var(--red); } .roundhead { background:var(--accent-dark); color:#fff; border-radius:8px; padding:8px 14px; margin:18px 0 10px; font-weight:600; font-size:.95rem; } .qcard { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; } .qcard .qnum { color:var(--gold); font-size:.78rem; font-weight:600; letter-spacing:.05em; } .qcard .qtext { font-size:1.05rem; margin:6px 0 12px; } .qcard .qstem { font-size:1.3rem; color:var(--accent-dark); margin:4px 0 12px; } .opts { display:flex; flex-direction:column; gap:8px; } .opts button.opt { text-align:left; font-family:inherit; font-size:.95rem; padding:10px 14px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg); cursor:pointer; transition:border-color .1s; } .opts button.opt.aropt { font-size:1.2rem; text-align:right; } .opts button.opt:hover:not(:disabled) { border-color:var(--accent); } .opts button.opt:disabled { opacity:.55; cursor:default; } .opts button.opt.right { background:var(--green-soft); border-color:var(--green); color:#14541f; opacity:1; font-weight:600; } .opts button.opt.wrong { background:var(--red-soft); border-color:var(--red); color:#7c241b; } .feedback { margin-top:10px; font-size:.9rem; border-radius:8px; padding:9px 12px; display:none; } .feedback.show { display:block; } .feedback.right { background:var(--green-soft); color:#14541f; } .feedback.wrong { background:var(--red-soft); color:#7c241b; } .scorebox { background:var(--card); border:2px solid var(--accent); border-radius:14px; padding:20px; text-align:center; margin-top:18px; display:none; } .scorebox.show { display:block; } .scorebox .big { font-size:2rem; font-weight:700; color:var(--accent); } .scorebox button { margin:12px 6px 0; font-family:inherit; font-size:.95rem; padding:10px 20px; border-radius:10px; border:1px solid var(--border); background:var(--bg); cursor:pointer; } /* quiz: translate / order drill */ .tverse { font-size:1.45rem; color:var(--accent-dark); margin:4px 0 12px; } .answerline { min-height:1.6em; background:var(--accent-soft); border-radius:8px; padding:8px 12px; margin-bottom:10px; font-size:.98rem; } .bank { display:flex; flex-wrap:wrap; gap:8px; } .bank.ltr { direction:ltr; } .bank button { font-family:inherit; font-size:.92rem; padding:8px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg); cursor:pointer; } .bank button.picked-right { background:var(--green-soft); border-color:var(--green); color:#14541f; } .bank button.picked-wrong { background:var(--red-soft); border-color:var(--red); } /* gating */ .unlockbtn { display:inline-block; margin:14px 0; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:11px 20px; font-size:.95rem; font-family:inherit; cursor:pointer; } .lockmsg { text-align:center; color:#888; padding:40px 10px; } .lockmsg a { color:var(--accent); font-weight:600; } /* footer */ .lessonfoot { display:flex; justify-content:space-between; gap:10px; margin-top:34px; font-size:.9rem; } .lessonfoot a { color:var(--accent); text-decoration:none; font-weight:600; } /* ===== subject index (lesson list) ===== */ .topbar { background:var(--accent); color:#fff; padding:10px 16px; font-size:.9rem; display:flex; gap:14px; align-items:center; } .topbar a { color:#fff; text-decoration:none; opacity:.9; } .topbar a:hover { opacity:1; text-decoration:underline; } main.index { max-width:760px; } ol.lessons { list-style:none; padding:0; margin:0; counter-reset:l; } ol.lessons a { counter-increment:l; display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px; transition:transform .1s, box-shadow .1s; } ol.lessons a:hover { transform:translateX(4px); box-shadow:0 4px 12px rgba(0,0,0,.07); } ol.lessons a::before { content:counter(l); background:var(--accent); color:#fff; border-radius:50%; min-width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-weight:600; } .l-title { font-weight:600; } .l-desc { font-size:.83rem; color:#666; } .l-meta { margin-inline-start:auto; text-align:right; font-size:.78rem; color:#999; white-space:nowrap; } .l-meta .tick { font-size:1rem; display:block; } a.resume { display:none; margin:0 0 16px; background:var(--accent); color:#fff; text-decoration:none; padding:10px 18px; border-radius:10px; font-size:.92rem; } a.resume.show { display:inline-block; } /* two-status convention (see decisions.md 2026-07-05): .coursepill = course delivery (count, no denominator) · .progressline = student progress vs published */ .coursepill { display:inline-block; font-size:.82rem; font-weight:600; border-radius:999px; padding:3px 14px; margin:10px 0 0; } .coursepill.ongoing { color:#8a5a00; background:#fdf3dd; border:1px solid #e8cf9a; } .coursepill.complete { color:#1d6b34; background:#e3f2e7; border:1px solid #b5d9c0; } .progressline { font-size:.88rem; font-weight:600; color:var(--accent); margin:0 0 12px; } .unit-h { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#888; margin:20px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border); } .unit-h:first-child { margin-top:4px; } .newbadge { font-size:.68rem; font-weight:700; color:#fff; background:var(--accent); border-radius:999px; padding:1px 8px; vertical-align:middle; margin-inline-start:4px; } @media print { .sitenav, .topbar, nav, .toolbar, .lessonfoot, a.resume { display:none; } section { display:block !important; } }