/* style.css — Dark / Light theme ready - Dark by default (blue / dark purple) - Add class "theme-light" on to switch to light theme - Accessibility: use --text for readable foreground, focus outlines, transitions */ /* ---------- Variables ---------- */ :root{ /* dark theme colors (default) */ --bg: #071021; /* main page background */ --surface: #0b1220; /* cards, panels */ --accent: #7c3aed; /* violet accent */ --accent-2: #4f46e5; /* deeper violet */ --muted: #98a9c9; /* subdued text */ --text: #e6eef8; /* primary text (light) */ --muted-2: rgba(230,238,248,0.75); --glass: rgba(255,255,255,0.03); --success: linear-gradient(90deg,#10b981,#059669); --danger: linear-gradient(90deg,#ef4444,#dc2626); --btn-bg: rgba(255,255,255,0.02); --btn-border: rgba(255,255,255,0.04); --focus: 0 0 0 4px rgba(124,58,237,0.14); --radius: 10px; --transition-fast: 160ms; --transition-medium: 260ms; } /* Light theme override (add class "theme-light" on the ) */ body.theme-light { --bg: #f6f9ff; --surface: #ffffff; --accent: #2b6ef6; --accent-2: #1e40af; --muted: #475569; --text: #071428; /* dark text on light bg */ --muted-2: rgba(7,20,40,0.75); --glass: rgba(2,6,23,0.03); --btn-bg: rgba(2,6,23,0.03); --btn-border: rgba(2,6,23,0.06); --focus: 0 0 0 4px rgba(59,130,246,0.12); --success: linear-gradient(90deg,#059669,#10b981); --danger: linear-gradient(90deg,#dc2626,#ef4444); } /* ---------- Global ---------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui, "Segoe UI", Roboto, "Noto Naskh Arabic", sans-serif; background: linear-gradient(180deg,var(--bg) 0%, #06131f 100%); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; transition: background var(--transition-medium) ease, color var(--transition-medium) ease; padding:20px; direction: rtl; /* Arabic default; remove or toggle for EN */ } /* container */ .container{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px} /* card / panel */ .card{ background: linear-gradient(180deg,var(--surface), rgba(3,20,34,0.6)); border-radius:12px; padding:14px; box-shadow: 0 8px 28px rgba(2,6,23,0.6); border:1px solid var(--btn-border); transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-medium); } /* headers */ .header{display:flex;justify-content:space-between;align-items:center;gap:12px} h1,h2,h3{margin:0;color:var(--text)} .sub{color:var(--muted);font-size:0.95rem} /* language toggle */ .lang-toggle{display:flex;gap:6px} .lang{ padding:6px 10px;border-radius:8px;border:1px solid var(--btn-border); background:transparent;color:var(--text);cursor:pointer;font-weight:700; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .lang:hover{transform:translateY(-3px)} .lang.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:0;color:#fff;box-shadow: var(--focus)} /* score */ .score{font-weight:800;margin-bottom:8px;color:var(--text)} /* question area layout */ #questionArea{display:flex;flex-direction:column;gap:12px;align-items:center} .q-image{ width:100%;max-width:640px;border-radius:12px;border:1px solid var(--btn-border); box-shadow:0 10px 30px rgba(0,0,0,0.45);object-fit:cover; transition: transform var(--transition-medium), box-shadow var(--transition-medium); } .q-image:hover{transform:translateY(-6px)} /* options grid */ .opts{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; width:100%;max-width:760px; align-items:stretch; } /* option button (primary style) */ .opt-btn{ display:flex;align-items:center;justify-content:center; padding:14px;border-radius:var(--radius); border:1px solid var(--btn-border); background: var(--btn-bg); cursor:pointer;font-weight:800;font-size:16px; color:var(--text); min-height:58px; transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-fast), color var(--transition-fast); text-align:center; line-height:1.2; user-select