3ulom

.bw * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Tajawal', sans-serif; } .bw { direction: rtl; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; } .bw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .bn { display: block; position: relative; height: 90px; border-radius: 10px; overflow: hidden; text-decoration: none !important; border: 1px solid rgba(255,255,255,0.08); background: #0d1117; transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; isolation: isolate; } .bn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); z-index: 4; opacity: 0; transition: opacity .3s ease; } .bn:hover::before { opacity: 1; } .bn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12); z-index: 2; } .bn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.25,.8,.25,1), filter .3s ease; filter: brightness(.92) saturate(1.1); } .bn:hover img { transform: scale(1.1); filter: brightness(1) saturate(1.2); } .bn-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 100%), linear-gradient(135deg, rgba(0,0,0,.2) 0%, transparent 60%); z-index: 1; transition: background .3s ease; } .bn:hover .bn-ov { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.0) 100%), linear-gradient(135deg, rgba(0,0,0,.1) 0%, transparent 60%); } .bn-txt { position: absolute; bottom: 0; right: 0; left: 0; z-index: 2; padding: 6px 8px; transform: translateY(0); transition: transform .3s ease; } .bn:hover .bn-txt { transform: translateY(-2px); } .bn-lbl { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); color: #fff; font-size: 7px; font-weight: 700; padding: 1px 6px; border-radius: 20px; margin-bottom: 3px; border: 1px solid rgba(255,255,255,0.2); letter-spacing: .3px; text-transform: uppercase; } .bn-name { color: #fff; font-size: 11px; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: .2px; } .c1 { background: linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); } .c2 { background: linear-gradient(135deg,#2d0a0a 0%,#4a0010 50%,#7b0d1e 100%); } .c3 { background: linear-gradient(135deg,#0a1a0f 0%,#0d2818 50%,#1a472a 100%); } .c4 { background: linear-gradient(135deg,#1a0a1a 0%,#2d0f2a 50%,#4a1942 100%); } .c5 { background: linear-gradient(135deg,#050d1a 0%,#0a1628 50%,#1c3144 100%); } .c6 { background: linear-gradient(135deg,#1a0a00 0%,#1e0d00 50%,#3d1c02 100%); } .c7 { background: linear-gradient(135deg,#00101a 0%,#001f33 50%,#003049 100%); } .c8 { background: linear-gradient(135deg,#1a0305 0%,#370617 50%,#6a040f 100%); } .c9 { background: linear-gradient(135deg,#040f07 0%,#081c15 50%,#1b4332 100%); } .c10 { background: linear-gradient(135deg,#0d0015 0%,#10002b 50%,#240046 100%); } @media (max-width: 900px) { .bw-grid { grid-template-columns: repeat(5, 1fr); } .bn { height: 65px; } } @media (max-width: 520px) { .bw-grid { grid-template-columns: repeat(3, 1fr); } .bn { height: 60px; } }