/* ================================================================== ADBLOCK GUARD — themed overlay styles Loaded on: index.html, apropos.html (linked manually in ) and every bones/*.html page (injected automatically by bone-page.js — never add this link tag to bone pages by hand). NOT loaded on admin.html (internal tool, not public-facing). ================================================================== */ body.adg-lock { overflow: hidden !important; } .adg-overlay { position: fixed; inset: 0; z-index: 4990; /* just under .intro-overlay's 5000 on index.html, so it sits BEHIND the intro and only becomes visible once "Entrer" is clicked / the intro is dismissed */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,8,8,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; } .adg-overlay.adg-visible { opacity: 1; } .adg-overlay.adg-leaving { opacity: 0; pointer-events: none; } .adg-card { position: relative; width: 100%; max-width: 440px; background: radial-gradient(circle at 50% 0%, #1c1c1c 0%, #131313 55%, #0d0d0d 100%); border: 1px solid rgba(253,216,53,0.28); border-radius: 18px; padding: 34px 30px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.04); font-family: 'Poppins', sans-serif; transform: translateY(8px) scale(0.98); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .adg-overlay.adg-visible .adg-card { transform: translateY(0) scale(1); } .adg-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(253,216,53,0.1); border: 2px solid rgba(253,216,53,0.28); display: flex; align-items: center; justify-content: center; color: #fdd835; margin: 0 auto 16px; filter: drop-shadow(0 0 10px rgba(253,216,53,0.3)); } .adg-icon svg { width: 26px; height: 26px; } .adg-title { font-size: 1.15rem; font-weight: 700; color: #fdd835; margin-bottom: 12px; letter-spacing: -0.01em; } .adg-text { font-size: 0.88rem; color: rgba(240,240,240,0.82); line-height: 1.55; margin-bottom: 10px; } .adg-text strong { color: #f4f4f4; } .adg-howto { text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 16px; margin: 16px 0 6px; font-size: 0.8rem; color: rgba(240,240,240,0.7); line-height: 1.7; } .adg-howto b { color: #fdd835; display: block; margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.02em; } .adg-lang-row { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .adg-lang-btn { font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; margin: 0; box-sizing: border-box; padding: 5px 13px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: rgba(240,240,240,0.6); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .adg-lang-btn:hover { color: #fdd835; border-color: rgba(253,216,53,0.35); } .adg-lang-btn.adg-lang-active { background: rgba(253,216,53,0.14); border-color: #fdd835; color: #fdd835; } .adg-lang-btn:disabled { opacity: 0.5; cursor: default; } .adg-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; } .adg-recheck-btn { font-family: 'Poppins', sans-serif; font-size: 0.92rem; font-weight: 700; color: #111; background: linear-gradient(90deg, #fdd835, #f0c828); border: none; margin: 0; box-sizing: border-box; padding: 12px 28px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 4px 18px rgba(253,216,53,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease; } .adg-recheck-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .adg-recheck-btn svg.adg-spin { animation: adgSpin 0.7s linear infinite; } @keyframes adgSpin { to { transform: rotate(360deg); } } .adg-recheck-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(253,216,53,0.45); } .adg-recheck-btn:active { transform: translateY(0); } .adg-recheck-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; } .adg-countdown { font-size: 0.76rem; color: rgba(240,240,240,0.4); letter-spacing: 0.01em; } .adg-close-btn { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; margin: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(240,240,240,0.75); font-family: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .adg-close-btn.adg-shown { opacity: 1; transform: scale(1); pointer-events: auto; } .adg-close-btn:hover { background: rgba(253,216,53,0.14); border-color: rgba(253,216,53,0.4); color: #fdd835; } @media (max-width: 480px) { .adg-card { padding: 28px 22px 24px; } .adg-title { font-size: 1.05rem; } } @media (prefers-reduced-motion: reduce) { .adg-overlay, .adg-card, .adg-close-btn { transition: none; } .adg-recheck-btn svg.adg-spin { animation: none; } } /* ------------------------------------------------------------------ ARABIC — scoped to the card only, matching the site-wide convention of never setting dir="rtl" on (see i18n.js / bone-page.js). Applied via .adg-rtl, toggled in JS off the same "incidex_lang" key. ------------------------------------------------------------------ */ .adg-card.adg-rtl { direction: rtl; text-align: right; } .adg-card.adg-rtl .adg-howto { text-align: right; } .adg-card.adg-rtl .adg-close-btn { right: auto; left: 12px; } .adg-card.adg-rtl .adg-lang-row { direction: ltr; /* keep FR / EN / AR in a stable left-to-right order, same convention as .lang-dropdown elsewhere */ }