/* ========================================================================== Language Selector Modal (sornaig) - lang.css Notes: - Uses backdrop-filter to blur background without needing a wrapper. - Toggle by removing [hidden] and optionally adding body class 'lang-modal-open' ========================================================================== */ :root{ /* You can later map these to your site's variables if they exist */ --lang-surface: rgba(18, 18, 20, 0.86); --lang-surface-2: rgba(255, 255, 255, 0.06); --lang-border: rgba(255, 255, 255, 0.14); --lang-text: rgba(255, 255, 255, 0.92); --lang-muted: rgba(255, 255, 255, 0.72); --lang-shadow: 0 20px 60px rgba(0,0,0,0.45); --lang-radius: 18px; } /* When modal is open you can add this class on in JS */ body.lang-modal-open{ overflow: hidden !important; } .lang-modal[hidden]{ display: none !important; } .lang-modal{ position: fixed; inset: 0; z-index: 2147483000; /* ensure above any existing popup */ display: grid; place-items: center; padding: 18px; color: var(--lang-text); font-family: inherit; } /* Backdrop that blurs everything behind */ .lang-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Card */ .lang-modal__card{ position: relative; width: min(560px, 100%); border-radius: var(--lang-radius); background: linear-gradient(180deg, var(--lang-surface), rgba(18, 18, 20, 0.78)); border: 1px solid var(--lang-border); box-shadow: var(--lang-shadow); padding: 18px; overflow: hidden; } /* Subtle glossy layer */ .lang-modal__card::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(800px 200px at 30% 0%, rgba(255,255,255,0.10), transparent 60%); pointer-events: none; } .lang-modal__header{ position: relative; padding: 10px 10px 6px; text-align: center; } .lang-modal__badge{ width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 999px; background: var(--lang-surface-2); border: 1px solid rgba(255,255,255,0.12); } .lang-modal__title{ margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.25; } .lang-modal__subtitle{ margin: 6px 0 0; font-size: 15px; color: var(--lang-muted); line-height: 1.35; } /* Options grid */ .lang-modal__options{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding: 8px; } .lang-option{ appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); border-radius: 16px; padding: 14px 12px; cursor: pointer; text-align: center; color: var(--lang-text); transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; user-select: none; } .lang-option:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.25); } .lang-option:active{ transform: translateY(0); } .lang-option:focus{ outline: none; } .lang-option:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 10px 22px rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.28); } .lang-option__top{ display: block; font-size: 16px; font-weight: 700; line-height: 1.2; } .lang-option__bottom{ display: block; margin-top: 6px; font-size: 14px; color: var(--lang-muted); line-height: 1.2; } /* Hint line */ .lang-modal__hint{ position: relative; margin-top: 6px; padding: 8px 12px 6px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.68); } .lang-modal__hint-en, .lang-modal__hint-fa{ display: block; line-height: 1.35; } /* Responsive */ @media (max-width: 520px){ .lang-modal__card{ padding: 14px; } .lang-modal__options{ grid-template-columns: 1fr; } .lang-modal__title{ font-size: 18px; } } /* Optional light-mode polish if your site has light theme pages */ @media (prefers-color-scheme: light){ :root{ --lang-surface: rgba(255,255,255,0.92); --lang-surface-2: rgba(0,0,0,0.05); --lang-border: rgba(0,0,0,0.10); --lang-text: rgba(10,10,12,0.92); --lang-muted: rgba(10,10,12,0.62); --lang-shadow: 0 18px 55px rgba(0,0,0,0.18); } .lang-modal__backdrop{ background: rgba(0,0,0,0.18); } .lang-option{ background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); } .lang-option:hover{ background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.16); } }