صفحه اصلی/دسته بندی موضوعی - فراغیب

@@ خط ۱: / خط ۱: @@
 <html>
 <style>
-   .wiki-categories-wrapper {
+   .wiki-categories-wrapper{
-     direction: rtl;
+     direction:rtl;
-     font-family: Tahoma, Arial, sans-serif;
+     margin:20px auto;
-     max-width: 100%;
+     max-width:1200px;
-     margin: 0 auto;
+     padding:10px;
-     padding: 20px;
+     font-family:Tahoma, Arial, sans-serif;
    }
-   .cat-stack {
+   .cat-stack{
-     display: flex;
+     display:flex;
-     flex-direction: column;
+     flex-direction:column;
-     gap: 20px;
+     gap:15px;
    }
-   .cat-box {
+   .cat-box{
-     background: #fff;
+     background:#ffffff;
-     border: 1px solid #e2e8f0;
+     border:1.5px solid #8ee0d8;
-     border-radius: 8px;
+     border-radius:8px;
-     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+     box-shadow:0 2px 4px rgba(0,0,0,0.02);
-     overflow: hidden;
+     overflow:hidden;
+    transition:all .3s ease;
    }
-   .cat-header {
+   .cat-box:hover{
-     display: block;
+     box-shadow:0 4px 12px rgba(101,195,186,.12);
-    padding: 15px;
+     border-color:#65c3ba;
-    background: #f8fafc;
-     border-bottom: 2px solid #e2e8f0;
-    text-decoration: none;
-    color: #1e293b;
-    font-weight: bold;
-    font-size: 16px;
-    transition: background 0.3s, color 0.3s;
    }
-   .cat-header:hover {
+   .cat-header{
-     background: #edf2f7;
+    display:block;
-     color: #2563eb;
+    padding:15px;
+     background:#ffffff;
+    text-decoration:none;
+     color:#2d3748;
+    font-weight:600;
+    font-size:clamp(14px, 1.2vw, 17px);
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    transition:all .3s ease;
    }
-  /* زیرمجموعه‌ها کنار هم مثل استان‌ها */
+   .cat-header:hover{
-   .sub-links-list {
+     color:#65c3ba;
-     padding: 12px 15px 15px;
+     background:#f8fffe;
-    display: flex;
-    flex-wrap: wrap;
-     gap: 8px 10px;
    }
-   .sub-link {
+   .sub-links-list{
-    display: inline-block;
+     padding:12px 15px 15px;
-     padding: 6px 10px;
+     display:flex;
-     border: 1px solid #dbe4f0;
+     flex-wrap:wrap;
-     border-radius: 999px;
+     gap:8px 10px;
-     background: #f8fafc;
+     border-top:1px solid #eaf6f5;
-     color: #475569;
+     background:#fcfffe;
-     font-size: 13px;
-    text-decoration: none;
-    transition: all 0.2s ease;
-    white-space: nowrap;
    }
-   .sub-link:hover {
+   .sub-link{
-     background: #eaf2ff;
+    display:inline-block;
-     border-color: #93c5fd;
+    padding:6px 10px;
-     color: #2563eb;
+     border:1px solid #d6efed;
+     border-radius:999px;
+    background:#ffffff;
+     color:#2d3748;
+    font-size:13px;
+    text-decoration:none;
+    transition:all .3s ease;
+    white-space:nowrap;
    }
-   @media (max-width: 768px) {
+  .sub-link:hover{
-     .wiki-categories-wrapper {
+    background:#f0fffd;
-       padding: 12px;
+    border-color:#65c3ba;
+    color:#65c3ba;
+    transform:translateY(-1px);
+  }
+   @media (max-width:768px){
+     .wiki-categories-wrapper{
+      padding:8px;
+    }
+    .cat-header{
+       padding:12px 13px;
+      font-size:clamp(13px, 3.5vw, 15px);
      }
-     .cat-header {
+     .sub-links-list{
-       font-size: 15px;
+       padding:10px 12px 12px;
-       padding: 12px;
+       gap:7px 8px;
      }
-     .sub-link {
+     .sub-link{
-       font-size: 12px;
+       font-size:12px;
-       padding: 5px 9px;
+       padding:5px 9px;
      }
    }