:root{ --bg:#F7F8F7; --surface:#FFFFFF; --ink:#000000; --sub:#000000; --line:#E4E9E8; /* Secondary/tertiary text tiers — previously #000000 (identical to --ink), which meant every "muted" subtitle, card description, footer link and label rendered pure black with zero visual hierarchy against headings. Replaced with true grays (13 Aug 2026 dark-mode rewrite already did this for [data-theme="dark"]; light mode was missed). Both pass WCAG AA: --muted ~7.6:1 and --muted2 ~4.8:1 against white/--bg. */ /* Darkened one step further on 20 Aug 2026 (user-reported: site text reads as "faded" throughout the site). #4B5563/#6B7280 already passed WCAG AA but looked visually thin against the light --bg/--surface; #374151/#4B5563 keep the same 3-tier hierarchy (muted > muted2 > faint) while reading noticeably bolder/darker everywhere these variables are used — footers, card descriptions, labels, article text, and so on, sitewide, with zero markup changes required. Dark mode's tiers were already fixed 13 Aug 2026 and stay as-is. */ --muted:#374151; --muted2:#4B5563; --faint:#9CA3AF; --brand:#0D9488; --accent:#F59E0B; --radius:16px; --health:#0D9488; --health-bg:#E4F5F3; --preg:#DB2777; --preg-bg:#FCE7F1; --medical:#2563EB; --medical-bg:#E7EEFC; --math:#7C3AED; --math-bg:#EFE7FC; --fin:#15803D; --fin-bg:#E1F3E7; --dt:#334155; --dt-bg:#E7E9EC; --constr:#C2410C; --constr-bg:#FFEDD5; --eng:#0369A1; --eng-bg:#E0F2FE; --tech:#4338CA; --tech-bg:#E5E3FA; --edu:#0284C7; --edu-bg:#DBEAFE; --auto:#57534E; --auto-bg:#E7E5E4; --daily:#E11D48; --daily-bg:#FFE4E9; --islamic:#059669; --islamic-bg:#D1FAE5; } body.theme-pregnancy{ --health:var(--preg); --health-bg:var(--preg-bg); } body.theme-medical{ --health:var(--medical); --health-bg:var(--medical-bg); } body.theme-math{ --health:var(--math); --health-bg:var(--math-bg); } body.theme-finance{ --health:var(--fin); --health-bg:var(--fin-bg); } body.theme-datetime{ --health:var(--dt); --health-bg:var(--dt-bg); } body.theme-construction{ --health:var(--constr); --health-bg:var(--constr-bg); } body.theme-engineering{ --health:var(--eng); --health-bg:var(--eng-bg); } body.theme-technology{ --health:var(--tech); --health-bg:var(--tech-bg); } body.theme-education{ --health:var(--edu); --health-bg:var(--edu-bg); } body.theme-automotive{ --health:var(--auto); --health-bg:var(--auto-bg); } body.theme-everyday{ --health:var(--daily); --health-bg:var(--daily-bg); } body.theme-islamic{ --health:var(--islamic); --health-bg:var(--islamic-bg); } /* =================================================================== Dark mode — rewritten 13 August 2026 to fix low-contrast/invisible text. Previously only --bg/--surface/--ink/--line flipped for dark mode, while the vast majority of text sitewide used hardcoded near-black hex colors (#000/#111/#333/#555 etc.) instead of variables, so on the dark surface that text became unreadable — most visibly in every input/search field, where the typed text was literally black on a near-black background. This block now also flips: the new --muted/--muted2/--faint secondary-text tiers, and every category's pastel *-bg tint (used by result boxes, notice cards, badges) to a darkened equivalent so those boxes blend with the page instead of appearing as bright light-mode rectangles floating in a dark page. */ [data-theme="dark"]{ --bg:#0E1416; --surface:#161D1F; --line:#2A3634; --ink:#F3F7F6; --sub:#F3F7F6; --muted:#D8E3E1; --muted2:#E4EDEB; --faint:#465350; --health-bg:#12312B; --preg-bg:#3A1526; --medical-bg:#132B47; --math-bg:#281C42; --fin-bg:#12301F; --dt-bg:#232C36; --constr-bg:#3A2412; --eng-bg:#122B42; --tech-bg:#241D42; --edu-bg:#132A44; --auto-bg:#2E2B27; --daily-bg:#3A1421; --islamic-bg:#0F2E23; } [data-theme="dark"] .live-badge{background:#0F3D25; color:#4ADE80;} [data-theme="dark"] .soon-badge{background:#2A2E33; color:#9CA8B3;} [data-theme="dark"] .note{background:#332B12; border-color:#4D3F16; color:#E8DDA8;} [data-theme="dark"] .blocked-item{background:#3A1E10; border-color:#5A2E14; color:#FDBA8C;} [data-theme="dark"] .sharia-notice-top{background:#3A1414; border-color:#F87171; color:#FCA5A5;} [data-theme="dark"] .lang-banner, [data-theme="dark"] .cookie-banner{background:#05100C;} [data-theme="dark"] .cookie-accept{background:#FFD166; color:#161D1F;} [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{ color-scheme:dark; /* also darkens native date/number picker UI, not just the text field */ } [data-theme="dark"] ::placeholder{ color:var(--muted2); opacity:1; } *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',Arial,sans-serif;line-height:1.6;font-size:17px;} h1,h2,h3{font-family:'Sora','Inter',Arial,sans-serif; margin:0 0 10px;} a{color:inherit; text-decoration:none;} .container{max-width:1100px; margin:0 auto; padding:0 20px;} /* Topbar */ .topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:50;} .brand{font-size:22px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px;} .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);} .crumbs{font-size:17px; color:var(--muted); padding:14px 20px 0;} .crumbs a{color:var(--brand); font-weight:600;} .topbar-actions{display:flex; gap:10px;} .tbtn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 17px; font-size:18px; cursor:pointer; font-weight:600;} /* Section hero */ .section-hero{padding:34px 20px 10px;} .section-hero .badge{display:inline-flex; align-items:center; gap:8px; background:var(--health-bg); color:var(--health); font-weight:700; padding:6px 14px; border-radius:999px; font-size:17px; margin-bottom:10px;} .section-hero p{color:var(--muted); max-width:640px; font-weight:500;} /* مُضافة 2 أغسطس 2026 — هوية بصرية مميزة لكل فرع فرعي داخل صفحة فهرس القسم (Health/Math وغيرها مستقبلًا)، بدل عنوان H2 مسطّح واحد لكل الفروع. أيقونة داخل دائرة ملوّنة، بألوان مختلفة لكل فرع عبر متغيّر CSS --bh-color/--bh-bg يُمرَّر Inline لكل فرع. مُعدَّلة لإزالة الخط السفلي الفاصل (بطلب المستخدم 2 أغسطس 2026 — لا خط ملون يفصل بين العنوان والعناصر أسفله). */ .branch-header{display:flex; align-items:center; gap:14px; padding:30px 20px 12px; margin:0;} .branch-header:first-of-type{padding-top:10px;} .branch-header .branch-icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; background:var(--bh-bg, var(--surface)); /* fallback for browsers without color-mix() */ background:linear-gradient(150deg, color-mix(in srgb, var(--bh-color, var(--brand)) 32%, var(--bh-bg, var(--surface))) 0%, var(--bh-bg, var(--surface)) 100%); border:1px solid color-mix(in srgb, var(--bh-color, var(--brand)) 38%, transparent); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.10);} .branch-header h2{margin:0; font-size:22px; color:var(--ink); line-height:1.3;} .branch-header .branch-count{font-size:16.5px; color:var(--bh-color, #444); font-weight:700;} /* Grid of calculator cards (section index page) */ .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; padding:10px 20px 40px;} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px; transition:transform .15s, box-shadow .15s;} .card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08);} .card .icon{width:40px; height:40px; border-radius:10px; color:var(--health); display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--health-bg); /* fallback for browsers without color-mix() */ background:linear-gradient(150deg, color-mix(in srgb, var(--health) 32%, var(--health-bg)) 0%, var(--health-bg) 100%); border:1px solid color-mix(in srgb, var(--health) 38%, transparent); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.08), 0 3px 7px rgba(0,0,0,.10);} .card h3{font-size:19.5px; margin:0; color:var(--ink);} .card p{font-size:16.5px; color:var(--muted); margin:0; font-weight:500;} /* Calculator tool layout */ .tool-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; padding:20px 20px 10px; align-items:start;} @media (max-width:800px){ .tool-wrap{grid-template-columns:1fr;} } .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; min-width:0;} input[type="datetime-local"], input[type="date"], input[type="time"]{min-width:0; max-width:100%;} .panel h1{font-size:27px;} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px;} .field-row > div{min-width:0;} label{font-size:17px; font-weight:600; display:block; margin:10px 0 5px; color:var(--ink);} input, select{width:100%; padding:16px 14px; border:1px solid var(--line); border-radius:10px; font-size:28px; font-weight:700; background:var(--surface); color:var(--ink);} .btn{margin-top:16px; width:100%; background:var(--health); color:#fff; border:none; border-radius:12px; padding:20px; font-weight:700; font-size:30px; cursor:pointer;} .result{margin-top:16px; padding:14px; border-radius:12px; background:var(--health-bg); color:var(--ink); font-weight:700; display:none; overflow-x:auto;} .result.show{display:block;} .result .big{font-size:52px; font-weight:800; color:var(--ink);} .fav-star{cursor:pointer; font-size:22px; padding:11px; margin:-11px -11px 0 0; background:none; border:none; color:var(--faint); float:right;} .fav-star.active{color:var(--accent);} /* Article + FAQ */ .article{padding:10px 20px 6px; max-width:760px;} .article h2{font-size:21px;} .article p{color:var(--ink); font-size:19px;} .seo-article{padding:10px 20px 6px; max-width:760px;} .seo-article h2{font-size:21px;} .seo-article p{color:var(--ink); font-size:19px; margin-bottom:12px;} .panel ol{padding-inline-start:20px; font-size:18px; color:var(--ink); margin:10px 0 0;} .panel ol li{margin-bottom:9px; line-height:1.5;} .faq{padding:6px 20px 50px; max-width:760px;} .faq-item{border-bottom:1px solid var(--line); padding:14px 0;} .faq-item h3{font-size:19px; margin:0 0 6px;} .faq-item p{margin:0; font-size:17.5px; color:var(--ink);} footer{padding:30px 20px; text-align:center; color:var(--muted); font-size:17px; border-top:1px solid var(--line); margin-top:20px;} .note{font-size:16.5px; color:#4A3A08; margin-top:10px; background:#FBF6E7; border:1px solid #F0E4B8; padding:10px 12px; border-radius:10px;} /* Medical disclaimer box — used above and below results on every /medical/ page (see CLAUDE.md §6) */ .med-disclaimer{font-size:17px; color:#7C2D12; margin:14px 0; background:#FEF2F2; border:1.5px solid #FCA5A5; border-left:5px solid #DC2626; padding:12px 14px; border-radius:10px; line-height:1.6;} .med-disclaimer strong{color:#B91C1C;} .med-disclaimer.mini{font-size:16px; margin-top:0;} .source-tag{display:inline-block; font-size:16px; font-weight:700; color:var(--health); background:var(--health-bg); padding:3px 10px; border-radius:999px; margin-top:4px;} .trust-bar{display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:16px; color:var(--muted); margin:8px 0 4px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:10px;} .trust-bar b{color:var(--ink);} .related-wrap{padding:6px 20px 10px; max-width:900px;} .related-wrap h2{font-size:21px;} .related-wrap .grid{padding:10px 0 20px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));} .related-wrap .card{padding:12px;} .related-wrap .card h3{font-size:17.5px;} .related-wrap .card p{font-size:16px;} /* Scientific calculator keypad — used only on /math/scientific-calculator.html */ .calc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;} .calc-key{padding:20px 0; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-weight:700; cursor:pointer; font-size:26px;} /* On narrow phones, 5 columns of 26px keys leaves too little room for multi-character keys like "AC", "DEL", "sin", "cos", "log" — they would wrap or overflow their button. Scale the keypad down at the same breakpoints already used elsewhere on the site, rather than reducing the column count (which would make the keypad feel unfamiliar/rearranged). */ @media (max-width:480px){ .calc-key{padding:14px 0; font-size:17px;} } @media (min-width:481px) and (max-width:680px){ .calc-key{padding:17px 0; font-size:20px;} } .calc-key:hover{background:var(--health-bg);} .calc-key.op{background:var(--health-bg); color:var(--health);} .calc-key.eq{background:var(--health); color:#fff;} .calc-key.wide{grid-column:span 2;} /* =================================================================== دعم الاتجاه من اليمين لليسار (RTL) — مضاف 31 يوليو 2026 للنسخة العربية الكاملة (/ar/) — راجع CLAUDE.md §0-أ =================================================================== */ html[dir="rtl"] body{direction:rtl; font-family:'Tajawal',sans-serif;} /* h1/h2/h3 set their own font-family (Sora/Inter, both Latin-only webfonts) further up this file, which — being a direct rule on the element rather than an inherited one — always won over the body-level Tajawal above, on every RTL page. Arabic headings were therefore never actually rendered in Tajawal, only in whatever Arabic-capable fallback the visitor's OS/browser happened to substitute for Sora/Inter (inconsistent across devices, and visibly different from the correctly-Tajawal'd paragraph text right below every heading). Fixed 19 Aug 2026. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{font-family:'Tajawal','Sora','Inter',Arial,sans-serif;} html[dir="rtl"] .crumbs, html[dir="rtl"] .lang-switch{text-align:right;} html[dir="rtl"] label{display:block; text-align:right;} html[dir="rtl"] input, html[dir="rtl"] select{text-align:right; direction:rtl;} html[dir="rtl"] .source-tag, html[dir="rtl"] .trust-bar, html[dir="rtl"] .note{text-align:right;} html[dir="rtl"] .med-disclaimer{text-align:right; border-left:none; border-right:5px solid #DC2626;} html[dir="rtl"] .faq-item, html[dir="rtl"] .article, html[dir="rtl"] .seo-article{text-align:right;} /* The favorite-star button floats to the physical right so it sits in the panel's top corner, opposite the heading text. In RTL the heading itself starts from the right, so leaving the star on the right too makes the title wrap awkwardly around it — mirror it to the left instead, matching how it stays clear of the heading in LTR. Added 13 August 2026. */ html[dir="rtl"] .fav-star{float:left;} html[dir="rtl"] .copy-btn{margin-right:0; margin-left:6px;} /* =================================================================== Language toggle button — redesigned 14 August 2026: one clickable pill (still a single , so it works with no JS and is one "button" as requested) showing both language codes at all times — AR in green, EN styled like the US flag — so the control reads the same on every page instead of a plain text link. The chip for the page's current language gets a subtle inset ring (.is-current); the other chip is the actual link target. See generate_lang_switch.py for how every page's markup was regenerated from this design. */ .lang-switch{display:inline-flex; align-items:center; gap:3px; direction:ltr; border-radius:999px; padding:3px; background:var(--surface); border:1.5px solid var(--line); text-decoration:none; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:box-shadow .15s ease, transform .15s ease; vertical-align:middle;} .lang-switch:hover{box-shadow:0 4px 12px rgba(0,0,0,.16); transform:translateY(-1px);} .lang-chip{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 9px; border-radius:999px; font-size:13.5px; font-weight:800; letter-spacing:.4px; color:#fff; line-height:1; position:relative; overflow:hidden;} .lang-chip>span{position:relative; z-index:1;} .lang-chip.lang-ar{background:linear-gradient(150deg,#34D058,#0F7A3D);} .lang-chip.lang-en{background:repeating-linear-gradient(#B22234 0 3.4px, #FFFFFF 3.4px 6.8px); text-shadow:0 1px 2px rgba(0,0,0,.65);} .lang-chip.lang-en::before{content:""; position:absolute; inset:0 55% 45% 0; background:#3C3B6E; background-image:radial-gradient(circle,#fff 1px,transparent 1.3px); background-size:5px 5px; background-position:1px 1px;} .lang-chip:not(.is-current){opacity:.82;} .lang-switch:hover .lang-chip:not(.is-current){opacity:1;} .lang-chip.is-current{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.25);} .lang-banner{display:flex; align-items:center; justify-content:center; gap:10px; background:#111; color:#fff; font-size:17px; padding:9px 16px; text-align:center;} .lang-banner a{color:#FFD166; font-weight:700; text-decoration:underline;} .lang-banner-close{background:none; border:none; color:#fff; opacity:.7; cursor:pointer; font-size:17px; min-width:44px; min-height:44px; padding:8px; display:inline-flex; align-items:center; justify-content:center;} .lang-banner-close:hover{opacity:1;} .cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:9999; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; background:#111; color:#fff; font-size:17px; line-height:1.5; padding:14px 20px; box-shadow:0 -2px 12px rgba(0,0,0,.18);} .cookie-banner p{margin:0; max-width:640px;} .cookie-banner a{color:#FFD166; font-weight:700; text-decoration:underline;} .cookie-banner-actions{display:flex; gap:8px; flex-shrink:0;} .cookie-banner-actions button{padding:8px 16px; border-radius:8px; font-size:17px; font-weight:600; cursor:pointer; border:1px solid rgba(255,255,255,.25);} .cookie-accept{background:#FFD166; color:#111; border-color:#FFD166;} .cookie-decline{background:transparent; color:#fff;} .cookie-accept:hover{opacity:.9;} .cookie-decline:hover{background:rgba(255,255,255,.08);} /* =================================================================== أدوات قسم التقنية والإنترنت (/technology/) — مُضافة 1 أغسطس 2026 كلاسات جديدة بحتة، لا تُعدَّل أي قاعدة موجودة أعلاه (راجع CLAUDE.md §0 نقطة 8/9 نمط) =================================================================== */ textarea{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:17.5px; background:var(--surface); color:var(--ink); font-family:'Consolas','Menlo',monospace; resize:vertical;} .mono-box{width:100%; min-height:52px; padding:12px 14px; border-radius:10px; background:var(--health-bg); color:var(--ink); font-family:'Consolas','Menlo',monospace; font-size:26px; word-break:break-all; white-space:pre-wrap; margin-top:8px;} .copy-btn{display:inline-block; margin-top:8px; margin-right:6px; background:var(--surface); border:1px solid var(--line); color:var(--health); font-weight:700; font-size:16.5px; padding:6px 12px; border-radius:999px; cursor:pointer;} .copy-btn:hover{background:var(--health-bg);} .hash-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--health-bg); border-radius:10px; padding:9px 12px; margin-top:8px; font-family:'Consolas','Menlo',monospace; font-size:16.5px; word-break:break-all;} .hash-row .algo{font-family:'Inter',Arial,sans-serif; font-weight:700; color:var(--health); min-width:68px; font-size:16px;} .color-swatch{width:100%; height:64px; border-radius:10px; border:1px solid var(--line); margin-top:10px;} .seg-btns{display:flex; gap:8px; margin-top:6px;} .seg-btns button{flex:1; padding:9px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:17px; cursor:pointer;} .seg-btns button.active{background:var(--health); color:#fff; border-color:var(--health);} .check-row{display:flex; flex-wrap:wrap; gap:14px; margin:10px 0; font-size:17px; font-weight:600;} .check-row label{display:flex; align-items:center; gap:6px; margin:0; font-weight:600;} .check-row input[type=checkbox]{width:auto;} /* =================================================================== ذيل الموقع الجديد (Site Footer) — مُضاف 6 أغسطس 2026 كلاسات جديدة بحتة، لا تُعدَّل أي قاعدة `footer{...}` الأصلية أعلاه. يُستخدم `