pack sahraoui

أطلب الآن /* Load Noto Kufi Arabic (remove if already loaded site-wide) */ @import url(‘https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@600;700&display=swap’); .honey-btn-wrap{display:inline-block;} .honey-btn{ –honey:#df6116; –honey-dark:#b64f12; –honey-deeper:#8e3e0e; –text:#fff; –focus:0 0 0 3px rgba(223,97,22,.25),0 0 0 6px rgba(223,97,22,.15); position:relative; display:inline-flex; align-items:center; gap:.65rem; padding:.95rem 1.35rem; border-radius:999px; text-decoration:none; line-height:1; font-family:”Noto Kufi Arabic”,system-ui,-apple-system,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,”Noto Sans Arabic”,sans-serif; font-weight:700; font-size:1.05rem; color:var(–text); background: radial-gradient(120% 140% at 10% 10%, #ffb37f 0%, transparent 40%), linear-gradient(180deg, var(–honey) 0%, var(–honey-dark) 100%); box-shadow: 0 10px 18px -6px rgba(223,97,22,.45), inset 0 -2px 0 0 rgba(0,0,0,.1), inset 0 1px 0 0 rgba(255,255,255,.25); border:1px solid rgba(0,0,0,.05); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; isolation:isolate; } .honey-btn .label{letter-spacing:.2px; white-space:nowrap;} /* GIF container (keeps animation and spacing tidy) */ .honey-btn .bee{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:28px; /* matches img width/height */ filter:drop-shadow(0 2px 1px rgba(0,0,0,.15)); transform:translateY(-1px); animation:bob 2.4s ease-in-out infinite; } .honey-btn .bee img{ width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; border-radius:6px; /* softens harsh edges if GIF has bg */ } /* Subtle idle bob */ @keyframes bob{0%,100%{transform:translateY(-1px);}50%{transform:translateY(1px);}} /* Glossy sweep */ .honey-btn::before{ content:””; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%); border-radius:inherit; transform:translateX(-120%); transition:transform .6s cubic-bezier(.2,.6,.2,1); pointer-events:none; } .honey-btn:hover::before{transform:translateX(0%);} /* Honey drip accent */ .honey-btn .honey-drop{ position:absolute; right:18px; bottom:-6px; width:8px; height:8px; background:radial-gradient(100% 100% at 30% 20%, #ffd6b8 0%, #ffb37f 35%, var(–honey) 70%, var(–honey-deeper) 100%); border-radius:50%; box-shadow:0 3px 0 -1px rgba(0,0,0,.15), 0 6px 10px -2px rgba(223,97,22,.35); transform-origin:top center; opacity:.95; animation:drip 2.8s ease-in-out infinite; pointer-events:none; z-index:-1; } @keyframes drip{0%{transform:translateY(0) scale(1);opacity:.95;}60%{transform:translateY(10px) scale(1.08);opacity:1;}100%{transform:translateY(0) scale(1);opacity:.95;}} /* Hover/active/focus */ .honey-btn:hover{ transform:translateY(-1px); box-shadow: 0 14px 22px -8px rgba(223,97,22,.55), inset 0 -2px 0 0 rgba(0,0,0,.12), inset 0 1px 0 0 rgba(255,255,255,.28); filter:saturate(1.05); } .honey-btn:active{ transform:translateY(0); box-shadow: 0 8px 16px -8px rgba(223,97,22,.5), inset 0 -1px 0 0 rgba(0,0,0,.15), inset 0 2px 0 0 rgba(255,255,255,.22); } /* Accessible focus ring */ .honey-btn:focus-visible{ outline:none; box-shadow: var(–focus), 0 10px 18px -6px rgba(223,97,22,.45), inset 0 -2px 0 0 rgba(0,0,0,.1), inset 0 1px 0 0 rgba(255,255,255,.25); } /* Respect reduced motion: hide the GIF/drip if user prefers less motion */ @media (prefers-reduced-motion: reduce){ .honey-btn, .honey-btn *{animation:none !important; transition:none !important;} .honey-btn::before{display:none;} .honey-btn .honey-drop{display:none;} .honey-btn .bee img{display:none;} /* GIF can’t be paused; hide instead */ }