/* site/public/assets/theme.css (FINAL) */ /* ========================= Theme Tokens (Light) ========================= */ :root{ --bg:#f6f7fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --acc:#2563eb; --acc2:#0ea5e9; --good:#16a34a; --warn:#f59e0b; --bad:#ef4444; --shadow:0 18px 50px rgba(2,6,23,.10); --r:18px; .hdr-actions .btn{white-space:nowrap} .hdr-actions{margin-inline-start:auto} @media (max-width: 820px){ .hdr-actions{width:100%;justify-content:flex-start} } /* Section Colors */ --c-news:#2563eb; --c-top:#ef4444; --c-net:#0ea5e9; --c-office:#8b5cf6; --c-mobile:#22c55e; --c-web:#f59e0b; --soft: rgba(255,255,255,.75); } /* ========================= Theme Tokens (Dark) 🌙 Activate by: OR ========================= */ body.dark, body[data-theme="dark"]{ --bg:#0b1220; --card:#0f172a; --text:#e7eefc; --muted:#95a3b8; --line:#1f2b46; --acc:#4f8cff; --acc2:#22d3ee; --shadow:0 22px 70px rgba(0,0,0,.45); --soft: rgba(17,26,46,.70); } /* ========================= Base ========================= */ *{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial} html{scroll-behavior:smooth} body{ margin:0; background:linear-gradient(180deg,#f8fafc,var(--bg)); color:var(--text); } body.dark, body[data-theme="dark"]{ background:linear-gradient(180deg,#070b14,var(--bg)); } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1100px;margin:0 auto;padding:16px} .muted{color:var(--muted);font-size:13px} .hr{height:1px;background:var(--line);margin:12px 0} .hide{display:none !important} /* ========================= Header / Top ========================= */ .top{ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; padding:18px 16px; } .bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; } .brand{display:flex;align-items:center;gap:10px} .logo{ width:44px;height:44px;border-radius:16px; background:rgba(255,255,255,.16); display:grid;place-items:center;overflow:hidden } .logo img{width:100%;height:100%;object-fit:cover} .brandTitle{font-weight:900;font-size:16px;line-height:1.2} .brandTag{opacity:.9;font-size:13px} .navBtns{display:flex;gap:10px;flex-wrap:wrap} .btnTop{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff;background:rgba(255,255,255,.12); cursor:pointer; } .btnTop:hover{background:rgba(255,255,255,.18)} .btnTop:active{transform:translateY(1px)} .btnTop .dot{ width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.8) } /* زر الوضع الليلي (اختياري إن كان موجود بالهيدر) */ .darkBtn{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff;background:rgba(255,255,255,.12); cursor:pointer; } .darkBtn:hover{background:rgba(255,255,255,.18)} /* ========================= Rotating Ticker ========================= */ .ticker{ background:#0b1220; color:#e7eefc; border-bottom:1px solid rgba(255,255,255,.08) } .ticker .inner{ max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px } .tickBadge{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); padding:6px 10px; border-radius:999px; font-size:12px } .tickText{ flex:1; position:relative; height:22px; overflow:hidden; font-size:13px; opacity:.95 } .tickText > div{ position:absolute;inset:0; display:flex;align-items:center; opacity:0;transform:translateY(6px); transition:.55s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .tickText > div.show{opacity:1;transform:translateY(0)} /* ========================= Common UI blocks ========================= */ .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:0 16px 45px rgba(2,6,23,.06); } body.dark .card, body[data-theme="dark"] .card{ box-shadow:0 18px 60px rgba(0,0,0,.35); } label{font-size:13px;color:var(--muted);display:block;margin:10px 0 6px} input,select,textarea{ width:100%; padding:12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.95); outline:none; color:var(--text); } body.dark input, body.dark select, body.dark textarea, body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea{ background:rgba(15,23,42,.75); } textarea{min-height:110px;resize:vertical} .row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:850px){.row{grid-template-columns:1fr}} .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.9); cursor:pointer; } body.dark .btn, body[data-theme="dark"] .btn{background:rgba(15,23,42,.75)} .btn:hover{filter:brightness(.98)} .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff} .btn.ghost{background:transparent} .btn.whats{background:var(--good);border-color:var(--good);color:#fff} /* ========================= Chips / Tabs ========================= */ .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .chip{ padding:8px 12px;border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.9); font-size:13px; } body.dark .chip, body[data-theme="dark"] .chip{background:rgba(15,23,42,.65)} .chip.active{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.25)} /* ========================= Banner Slider (kept same IDs/classes) ========================= */ .bannerWrap{ position:relative; border:1px solid var(--line); border-radius: var(--r); overflow:hidden; background:#0b1220; box-shadow:0 16px 45px rgba(2,6,23,.08); margin-top:12px; } .bannerTrack{ display:flex; flex-wrap:nowrap; width:100%; transition:transform .45s ease; will-change:transform; } .bannerSlide{ min-width:100%; flex:0 0 100%; position:relative; height:220px; } .bannerLink{display:block;width:100%;height:100%;position:relative} .bannerImg{width:100%;height:100%;object-fit:cover;display:block} .bannerOverlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(2,6,23,.78), rgba(2,6,23,.15))} .bannerCap{ position:absolute; right:16px; left:16px; bottom:14px; color:#fff; display:flex; flex-direction:column; gap:6px; } .bannerTitle{font-weight:900;font-size:18px} .bannerSub{opacity:.92;font-size:13px;max-width:760px;line-height:1.6} .bannerNav{ position:absolute;top:50%; transform:translateY(-50%); width:42px;height:42px;border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.14); color:#fff; display:grid;place-items:center; cursor:pointer; backdrop-filter: blur(8px); } .bannerNav:hover{background:rgba(255,255,255,.22)} .bannerNav.prev{right:10px} .bannerNav.next{left:10px} .bannerDots{ position:absolute; bottom:10px; left:14px; display:flex; gap:6px; } .bannerDot{ width:9px;height:9px;border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); cursor:pointer; } .bannerDot.active{background:#fff;border-color:#fff} @media(max-width:850px){ .bannerSlide{height:180px} .bannerTitle{font-size:16px} } /* ========================= Home Layout (NEW) ✅ fixes full-page sections ========================= */ .homeGrid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:12px; margin-top:12px; } @media(max-width:980px){ .homeGrid{grid-template-columns:1fr} } .mainCol{min-width:0} .sideCol{min-width:0} /* ========================= Section Block (NEW) ========================= */ .sec{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 16px 45px rgba(2,6,23,.06); overflow:hidden; } body.dark .sec, body[data-theme="dark"] .sec{box-shadow:0 18px 60px rgba(0,0,0,.35)} .secHead{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); } body.dark .secHead, body[data-theme="dark"] .secHead{ background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.55)); } .secTitle{ display:flex;align-items:center;gap:10px; font-weight:900; } .secPill{ width:12px;height:12px;border-radius:999px; background:var(--acc); box-shadow:0 0 0 6px rgba(37,99,235,.12); } .secMore{ font-size:13px; color:var(--muted); padding:6px 10px;border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7); } body.dark .secMore, body[data-theme="dark"] .secMore{background:rgba(15,23,42,.6)} .secMore:hover{filter:brightness(.98)} .secBody{padding:12px 14px} /* Section color mapping */ .sec[data-sec="latest"] .secPill{background:var(--c-news); box-shadow:0 0 0 6px rgba(37,99,235,.12)} .sec[data-sec="top"] .secPill{background:var(--c-top); box-shadow:0 0 0 6px rgba(239,68,68,.12)} .sec[data-sec="net"] .secPill{background:var(--c-net); box-shadow:0 0 0 6px rgba(14,165,233,.12)} .sec[data-sec="office"] .secPill{background:var(--c-office);box-shadow:0 0 0 6px rgba(139,92,246,.12)} .sec[data-sec="mobile"] .secPill{background:var(--c-mobile);box-shadow:0 0 0 6px rgba(34,197,94,.12)} .sec[data-sec="web"] .secPill{background:var(--c-web); box-shadow:0 0 0 6px rgba(245,158,11,.12)} /* ========================= Post Cards (image + text) ✅ ========================= */ .postList{display:grid;gap:10px} .postCard{ display:grid; grid-template-columns: 140px 1fr; gap:12px; padding:10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.85); transition:.2s; } body.dark .postCard, body[data-theme="dark"] .postCard{ background:rgba(15,23,42,.65); } .postCard:hover{transform:translateY(-1px);box-shadow:0 18px 55px rgba(2,6,23,.10)} .postThumb{ width:100%; height:92px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg, rgba(37,99,235,.20), rgba(14,165,233,.10)); border:1px solid var(--line); } .postThumb img{width:100%;height:100%;object-fit:cover} .postMeta{min-width:0} .postTitle{ font-weight:900; line-height:1.35; margin:2px 0 6px; font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .postDesc{ color:var(--muted); font-size:13px; line-height:1.7; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .postBadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .badge{ font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.75); } body.dark .badge, body[data-theme="dark"] .badge{background:rgba(15,23,42,.55)} .badge.sec{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.08)} .badge.time{border-color:rgba(100,116,139,.25);background:rgba(100,116,139,.08)} @media(max-width:650px){ .postCard{grid-template-columns: 110px 1fr} .postThumb{height:86px} } /* ========================= Category Tiles (for sub-sections) ✅ (شبكات/موبايل/برامج/مواقع) ========================= */ .tileGrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; } @media(max-width:980px){.tileGrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.tileGrid{grid-template-columns:1fr}} .tile{ border:1px solid var(--line); border-radius:18px; padding:12px; background:rgba(255,255,255,.82); transition:.2s; display:flex; gap:10px; align-items:flex-start; } body.dark .tile, body[data-theme="dark"] .tile{background:rgba(15,23,42,.62)} .tile:hover{transform:translateY(-1px);box-shadow:0 18px 55px rgba(2,6,23,.10)} .tileIc{ width:42px;height:42px;border-radius:16px; display:grid;place-items:center; border:1px solid var(--line); background:rgba(37,99,235,.08); font-size:20px; } .tileH{font-weight:900;margin:0 0 4px} .tileP{margin:0;color:var(--muted);font-size:13px;line-height:1.7} /* ========================= Sidebar Blocks (Poll, etc.) ========================= */ .sideStack{display:grid;gap:12px} .pollOpt{ display:flex;align-items:center;justify-content:space-between;gap:10px; border:1px solid var(--line); background:rgba(255,255,255,.8); border-radius:14px; padding:10px 12px; cursor:pointer; } body.dark .pollOpt, body[data-theme="dark"] .pollOpt{background:rgba(15,23,42,.6)} .pollOpt:hover{filter:brightness(.98)} .pollOpt .name{font-weight:700} .pollOpt .pct{font-size:12px;color:var(--muted)} .pollBar{ height:8px;border-radius:999px;background:rgba(100,116,139,.12); overflow:hidden;margin-top:8px;border:1px solid var(--line) } .pollFill{height:100%;width:35%;background:linear-gradient(90deg,var(--acc),var(--acc2))} /* ========================= Footer ========================= */ footer{ margin-top:18px; border-top:1px solid var(--line); background:var(--soft); backdrop-filter: blur(10px); } .footGrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; padding:16px; max-width:1100px; margin:0 auto } .footCol{grid-column:span 4} @media(max-width:850px){.footCol{grid-column:span 12}} .footTitle{font-weight:900;margin-bottom:8px} .footLink{display:block;color:var(--text);margin:6px 0;opacity:.9} .footLink:hover{opacity:1} .copy{padding:10px 16px;color:var(--muted);font-size:13px;text-align:center} /* Dark Mode Colors */ body.dark-mode { --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8; --line: #334155; background: #020617; } body.dark-mode .card, body.dark-mode .postCard, body.dark-mode .topItem { background: var(--card) !important; border-color: var(--line) !important; } body.dark-mode input, body.dark-mode select { background: #0f172a; color: #fff; } body.dark-mode .btn { background: #334155; color: #fff; border-color: #475569; }