/* ===== QuickBill.pk — GEPCO Bill Checker Design System ===== */ /* Google Fonts have been moved to HTML for performance */ /* ---------- Variables ---------- */ :root { --primary: #4338ca; --primary-dark: #312e81; --primary-light: #e0e7ff; --primary-50: #eef2ff; --accent: #f59e0b; --accent-light: #fef3c7; --red: #dc2626; --red-light: #fef2f2; --orange: #ea580c; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --white: #ffffff; --shadow-sm: 0 1px 2px rgba(67,56,202,.05); --shadow-md: 0 4px 14px rgba(67,56,202,.08); --shadow-lg: 0 10px 28px rgba(67,56,202,.12); --shadow-card: 0 2px 8px rgba(67,56,202,.06); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 9999px; --ease: cubic-bezier(.4,0,.2,1); --dur: 220ms; --max-w: 800px; --max-w-wide: 1100px; } /* ---------- Reset ---------- */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--gray-50); color: var(--gray-700); line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width:100%; display:block; } a { text-decoration:none; color:var(--primary); transition:color var(--dur) var(--ease); } a:hover { color:var(--primary-dark); } ul, ol { list-style:none; } button { cursor:pointer; font-family:inherit; } /* ---------- Utility ---------- */ .container { max-width:var(--max-w-wide); margin:0 auto; padding:0 20px; } .container-narrow { max-width:var(--max-w); margin:0 auto; padding:0 20px; } .text-center { text-align:center; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ============================================================ NAVBAR ============================================================ */ .navbar { position:sticky; top:0; z-index:1000; background:var(--white); border-bottom:2px solid var(--primary); box-shadow:var(--shadow-sm); } .navbar .container { display:flex; align-items:center; justify-content:space-between; height:62px; max-width:var(--max-w-wide); } .nav-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.15rem; color:var(--gray-900); } .nav-logo .icon { width:34px; height:34px; background:var(--primary); color:#fff; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1rem; } .nav-links { display:flex; align-items:center; gap:4px; } .nav-links a { padding:8px 14px; font-size:.875rem; font-weight:500; color:var(--gray-600); border-radius:var(--radius-sm); transition:all var(--dur) var(--ease); } .nav-links a:hover, .nav-links a.active { color:var(--primary); background:var(--primary-50); } .lang-toggle { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; font-family:'Noto Nastaliq Urdu','Inter', sans-serif; cursor:pointer; transition:all var(--dur) var(--ease); margin-left:6px; white-space:nowrap; } .lang-toggle:hover { background:var(--primary-dark); transform:scale(1.05); } .lang-toggle .globe { font-style:normal; } /* RTL mode */ html[dir="rtl"] body { font-family:'Noto Nastaliq Urdu','Inter', sans-serif; line-height:2.2; } html[dir="rtl"] .navbar .container { direction:rtl; } html[dir="rtl"] .nav-links { direction:rtl; } html[dir="rtl"] .lang-toggle { margin-left:0; margin-right:6px; } html[dir="rtl"] .article-content, html[dir="rtl"] .hero, html[dir="rtl"] .page-header, html[dir="rtl"] .footer, html[dir="rtl"] .toc-box { text-align:right; direction:rtl; } html[dir="rtl"] .hero .subtitle, html[dir="rtl"] .hero h1 { text-align:center; } html[dir="rtl"] .article-content ul, html[dir="rtl"] .article-content ol { padding-left:0; padding-right:24px; } html[dir="rtl"] .step-list li { padding-left:0; padding-right:40px; } html[dir="rtl"] .step-list li::before { left:auto; right:0; } html[dir="rtl"] .toc-list { direction:rtl; } html[dir="rtl"] .toc-list li a { direction:rtl; } html[dir="rtl"] .toc-list li a::before { margin-left:6px; margin-right:0; } html[dir="rtl"] .toc-list .sub-list { padding-left:0; padding-right:20px; } html[dir="rtl"] .info-box.blue { border-left:none; border-right:4px solid var(--primary); } html[dir="rtl"] .info-box.green { border-left:none; border-right:4px solid var(--accent); } html[dir="rtl"] .info-box.yellow { border-left:none; border-right:4px solid var(--orange); } html[dir="rtl"] .info-box.red { border-left:none; border-right:4px solid var(--red); } html[dir="rtl"] .faq-question { text-align:right; direction:rtl; } html[dir="rtl"] .faq-answer-inner { direction:rtl; text-align:right; } html[dir="rtl"] .result-grid { direction:rtl; } html[dir="rtl"] .result-item .label { text-align:right; } html[dir="rtl"] .bill-result { text-align:right; direction:rtl; } html[dir="rtl"] .footer-grid { direction:rtl; } html[dir="rtl"] .footer-links { text-align:right; } html[dir="rtl"] .footer-brand { text-align:right; } html[dir="rtl"] .breadcrumb { direction:rtl; text-align:right; } html[dir="rtl"] .search-note { direction:rtl; } html[dir="rtl"] .search-input { direction:rtl; text-align:right; } html[dir="rtl"] .coverage-grid { direction:rtl; } /* Content language toggle */ .content-ur { display:none; } .lang-ur .content-en { display:none; } .lang-ur .content-ur { display:block; } .lang-ur .content-ur.toc-box { display:block; } .lang-ur .content-en.toc-box { display:none; } .mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; } .mobile-toggle span { width:22px; height:2px; background:var(--gray-700); border-radius:2px; transition:all var(--dur) var(--ease); } /* ============================================================ HERO / BILL CHECKER ============================================================ */ .hero { background:linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4338ca 60%, #6366f1 100%); color:#fff; padding:60px 0 50px; text-align:center; position:relative; overflow:hidden; } .hero::before { content:''; position:absolute; top:-50%;left:-50%;right:-50%;bottom:-50%; background:conic-gradient(from 180deg at 50% 50%, rgba(99,102,241,.08) 0deg, transparent 60deg, rgba(139,92,246,.06) 120deg, transparent 180deg, rgba(99,102,241,.08) 240deg, transparent 300deg); animation:meshSpin 20s linear infinite; pointer-events:none; } @keyframes meshSpin { to { transform:rotate(360deg); } } .hero h1 { font-size:clamp(1.6rem, 4vw, 2.4rem); font-weight:800; line-height:1.3; margin-bottom:12px; } .hero .subtitle { font-size:1rem; color:rgba(255,255,255,.8); max-width:600px; margin:0 auto 30px; line-height:1.7; } .hero .urdu-note { font-family:'Noto Nastaliq Urdu', serif; direction:rtl; font-size:.95rem; color:rgba(255,255,255,.7); margin-bottom:20px; } /* Bill Search Box */ .search-box { max-width:520px; margin:0 auto; background:rgba(255,255,255,.12); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-xl); padding:28px; } .search-tabs { display:flex; gap:8px; margin-bottom:16px; } .search-tab { flex:1; padding:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-md); color:rgba(255,255,255,.7); font-size:.85rem; font-weight:600; transition:all var(--dur) var(--ease); } .search-tab.active { background:rgba(255,255,255,.95); color:var(--primary); border-color:transparent; } .search-input { width:100%; padding:14px 18px; border:2px solid rgba(255,255,255,.2); border-radius:var(--radius-md); background:rgba(255,255,255,.08); color:#fff; font-size:1rem; font-family:inherit; outline:none; margin-bottom:12px; transition:all var(--dur) var(--ease); } .search-input::placeholder { color:rgba(255,255,255,.45); } .search-input:focus { border-color:var(--accent); background:rgba(255,255,255,.14); box-shadow:0 0 0 3px rgba(0,179,122,.2); } .search-btns { display:flex; gap:10px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; border:none; border-radius:var(--radius-md); font-size:.9rem; font-weight:700; font-family:inherit; transition:all var(--dur) var(--ease); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; } .btn-check { flex:1; background:var(--accent); color:#fff; } .btn-check:hover { background:#009966; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,179,122,.3); } .btn-official { background:var(--red); color:#fff; font-size:.82rem; padding:12px 18px; } .btn-official:hover { background:#b91c1c; } .search-note { margin-top:12px; font-size:.78rem; color:rgba(255,255,255,.55); } /* ============================================================ LOADING / ERROR / RESULT ============================================================ */ .spinner { display:none; width:28px; height:28px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin:16px auto; } .spinner.visible { display:block; } @keyframes spin { to { transform:rotate(360deg); } } .error-msg { display:none; padding:12px; background:rgba(220,38,38,.15); border:1px solid rgba(220,38,38,.3); border-radius:var(--radius-md); color:#fca5a5; font-size:.88rem; margin-top:12px; text-align:center; } .error-msg.visible { display:block; } .bill-result { display:none; margin-top:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:24px; text-align:left; animation:slideUp .35s var(--ease); } .bill-result.visible { display:block; } @keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .result-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1); } .result-header h3 { color:#fff; font-size:1rem; font-weight:700; } .result-status { padding:4px 14px; border-radius:var(--radius-full); font-size:.78rem; font-weight:700; } .result-status.unpaid { background:rgba(220,38,38,.2); color:#fca5a5; } .result-status.paid { background:rgba(0,179,122,.2); color:#6ee7b7; } .result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .result-item .label { color:rgba(255,255,255,.5); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; } .result-item .value { color:#fff; font-size:.92rem; font-weight:600; } .result-item .value.amount { font-size:1.3rem; color:var(--accent); font-weight:800; } /* ============================================================ TABLE OF CONTENTS ============================================================ */ .toc-box { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); margin:32px auto; overflow:hidden; } .toc-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:var(--gray-50); border:none; font-size:.95rem; font-weight:700; color:var(--gray-800); } .toc-toggle .arrow { transition:transform var(--dur) var(--ease); font-size:.85rem; } .toc-box.open .toc-toggle .arrow { transform:rotate(180deg); } .toc-content { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .toc-box.open .toc-content { max-height:2000px; } .toc-list { padding:8px 24px 20px; } .toc-list li { padding:5px 0; } .toc-list li a { font-size:.88rem; color:var(--primary); display:flex; align-items:center; gap:6px; } .toc-list li a::before { content:'•'; color:var(--primary); font-weight:bold; } .toc-list li a:hover { color:var(--primary-dark); } .toc-list .sub-list { padding-left:20px; margin-top:4px; } .toc-list .sub-list li a::before { content:'–'; } /* ============================================================ ARTICLE / LONG-FORM CONTENT ============================================================ */ .article-section { padding:40px 0; } .article-content { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray-200); padding:40px; box-shadow:var(--shadow-sm); } .article-content h2 { font-size:1.5rem; font-weight:800; color:var(--gray-900); margin:40px 0 16px; padding-bottom:10px; border-bottom:2px dashed var(--primary-light); display:block; position:relative; } .article-content h2::after { content:''; position:absolute; bottom:-2px; left:0; width:60px; height:3px; background:var(--primary); border-radius:2px; } .article-content h2:first-child { margin-top:0; } .article-content h3 { font-size:1.18rem; font-weight:700; color:var(--gray-800); margin:28px 0 10px; } .article-content h4 { font-size:1rem; font-weight:600; color:var(--gray-700); margin:20px 0 8px; } .article-content p { margin-bottom:16px; color:var(--gray-600); font-size:.94rem; line-height:1.85; } .article-content strong { color:var(--gray-800); } .article-content ul, .article-content ol { padding-left:24px; margin-bottom:16px; } .article-content ul { list-style:disc; } .article-content ol { list-style:decimal; } .article-content li { margin-bottom:8px; font-size:.94rem; color:var(--gray-600); line-height:1.7; } .article-content a { color:var(--primary); font-weight:500; text-decoration:underline; text-decoration-color:rgba(10,94,181,.3); text-underline-offset:2px; } .article-content a:hover { text-decoration-color:var(--primary); } /* Info Box */ .info-box { padding:20px 24px; border-radius:var(--radius-md); margin:20px 0; font-size:.9rem; } .info-box.blue { background:var(--primary-light); border-left:4px solid var(--primary); } .info-box.green { background:var(--accent-light); border-left:4px solid var(--accent); } .info-box.yellow { background:#fffbeb; border-left:4px solid var(--orange); } .info-box.red { background:var(--red-light); border-left:4px solid var(--red); } .info-box strong { color:var(--gray-800); } /* Coverage List Grid */ .coverage-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin:16px 0; } .coverage-item { padding:12px 16px; background:var(--primary-50); border-top:3px solid var(--primary); border-radius:0 0 var(--radius-sm) var(--radius-sm); font-size:.88rem; font-weight:600; color:var(--primary-dark); display:flex; align-items:center; gap:6px; transition:all var(--dur) var(--ease); } .coverage-item:hover { background:var(--primary-light); transform:translateY(-2px); box-shadow:var(--shadow-md); } /* Steps */ .step-list { counter-reset:steps; list-style:none !important; padding-left:0 !important; } .step-list li { counter-increment:steps; position:relative; padding-left:40px; margin-bottom:14px; } .step-list li::before { content:counter(steps); position:absolute; left:0; top:2px; width:28px; height:28px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; } /* Payment Methods Grid */ .payment-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:16px 0; } .payment-item { text-align:center; padding:16px 10px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); font-size:.82rem; font-weight:600; color:var(--gray-700); transition:all var(--dur) var(--ease); } .payment-item:hover { border-color:var(--primary); box-shadow:var(--shadow-card); } .payment-item .emoji { font-size:1.6rem; margin-bottom:6px; display:block; } /* News Card */ .news-list { list-style:none !important; padding-left:0 !important; } .news-card { padding:16px 20px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:12px; transition:all var(--dur) var(--ease); } .news-card:hover { border-color:var(--primary); box-shadow:var(--shadow-card); } .news-card .date { font-size:.75rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .news-card h4 { font-size:.92rem; color:var(--gray-800); margin:4px 0; } .news-card p { font-size:.84rem; color:var(--gray-500); margin:0; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-item { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; transition:border-color var(--dur) var(--ease); } .faq-item:hover { border-color:var(--primary-light); } .faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:none; border:none; text-align:left; font-size:.92rem; font-weight:600; color:var(--gray-800); gap:12px; transition:color var(--dur) var(--ease); } .faq-question:hover { color:var(--primary); } .faq-icon { width:24px; height:24px; min-width:24px; background:var(--primary-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--primary); transition:all var(--dur) var(--ease); } .faq-item.open .faq-icon { background:var(--primary); color:#fff; transform:rotate(45deg); } .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-answer-inner { padding:0 20px 18px; color:var(--gray-600); font-size:.9rem; line-height:1.8; } /* ============================================================ BILL CALCULATOR (Page) ============================================================ */ .calc-tool { max-width:500px; margin:0 auto 32px; padding:32px; background:var(--white); border:2px solid var(--primary); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); } .calc-tool label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; } .calc-tool input, .calc-tool select { width:100%; padding:12px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-md); font-size:1rem; font-family:inherit; color:var(--gray-800); margin-bottom:16px; outline:none; transition:border-color var(--dur) var(--ease); } .calc-tool input:focus, .calc-tool select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,94,181,.1); } .calc-result { display:none; margin-top:20px; padding:20px; background:var(--primary-light); border-radius:var(--radius-md); text-align:center; } .calc-result.visible { display:block; animation:slideUp .3s var(--ease); } .calc-result .amount { font-size:2rem; font-weight:900; color:var(--primary); } .calc-result .breakdown { margin-top:12px; font-size:.85rem; color:var(--gray-600); text-align:left; } /* Tariff Table */ .tariff-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.88rem; } .tariff-table th { background:var(--primary); color:#fff; padding:10px 14px; text-align:left; font-weight:600; } .tariff-table td { padding:10px 14px; border-bottom:1px solid var(--gray-200); color:var(--gray-700); } .tariff-table tr:nth-child(even) td { background:var(--gray-50); } .tariff-table tr:hover td { background:var(--primary-50); } /* ============================================================ CONTACT FORM ============================================================ */ .contact-form { max-width:560px; margin:0 auto; } .contact-form .form-group { margin-bottom:18px; } .contact-form label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; } .contact-form input, .contact-form textarea { width:100%; padding:12px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-md); font-size:.95rem; font-family:inherit; color:var(--gray-800); outline:none; transition:border-color var(--dur) var(--ease); } .contact-form input:focus, .contact-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,94,181,.1); } .contact-form textarea { resize:vertical; min-height:120px; } /* ============================================================ PAGE HEADER (Inner pages) ============================================================ */ .page-header { background:linear-gradient(135deg, var(--primary-dark), var(--primary)); color:#fff; text-align:center; padding:48px 0 40px; } .page-header h1 { font-size:clamp(1.4rem, 3.5vw, 2rem); font-weight:800; margin-bottom:8px; } .page-header p { color:rgba(255,255,255,.75); font-size:.95rem; max-width:500px; margin:0 auto; } .breadcrumb { text-align:center; padding:12px 0; background:var(--white); border-bottom:1px solid var(--gray-200); font-size:.82rem; color:var(--gray-500); } .breadcrumb a { color:var(--primary); font-weight:500; } .breadcrumb span { margin:0 6px; } /* ============================================================ FOOTER ============================================================ */ .footer { background:var(--gray-900); color:var(--gray-400); padding:48px 0 24px; margin-top:40px; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); } .footer-brand .nav-logo { margin-bottom:12px; } .footer-brand .nav-logo .icon { background:var(--primary); } .footer-brand p { font-size:.84rem; line-height:1.7; max-width:300px; } .footer-links h4 { color:#fff; font-size:.9rem; font-weight:700; margin-bottom:14px; } .footer-links a { display:block; padding:4px 0; font-size:.84rem; color:var(--gray-400); transition:all var(--dur) var(--ease); } .footer-links a:hover { color:var(--accent); padding-left:4px; } .footer-bottom { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--gray-500); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:768px) { .nav-links { display:none; position:fixed; top:62px; left:0; right:0; background:var(--white); flex-direction:column; padding:16px; gap:4px; border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-lg); } .nav-links.open { display:flex; } .mobile-toggle { display:flex; } .hero { padding:40px 0 36px; } .search-box { padding:20px; } .search-btns { flex-direction:column; } .result-grid { grid-template-columns:1fr; } .article-content { padding:24px; } .article-content h2 { font-size:1.25rem; } .coverage-grid { grid-template-columns:1fr 1fr; } .payment-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr; gap:24px; } .footer-bottom { flex-direction:column; gap:8px; text-align:center; } } /* ============================================================ PROMO AD BANNERS (Google AdSense Style) ============================================================ */ /* --- Shared ad card --- */ .promo-ad { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--dur) var(--ease); position: relative; } .promo-ad:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .promo-ad-link { display: block; text-decoration: none; color: inherit; } /* "Ad" label */ .promo-ad-label { position: absolute; top: 8px; right: 8px; background: var(--gray-100); color: var(--gray-500); font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .06em; z-index: 2; } .promo-ad-body { padding: 20px 16px; text-align: center; } /* App icon */ .promo-app-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 4px 12px rgba(10, 94, 181, 0.25); overflow: hidden; } .promo-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } /* ===== APP DOWNLOAD POPUP ===== */ .app-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .app-popup-overlay.visible { opacity: 1; visibility: visible; } .app-popup { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); z-index: 9999; background: var(--white); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 24px 28px; max-width: 440px; width: calc(100% - 32px); opacity: 0; visibility: hidden; transition: all .4s var(--ease); } .app-popup.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .app-popup-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.4rem; color: var(--gray-400); cursor: pointer; padding: 4px; line-height: 1; } [dir="rtl"] .app-popup-close { right: auto; left: 14px; } .app-popup-close:hover { color: var(--gray-700); } .app-popup-body { display: flex; align-items: center; gap: 16px; } .app-popup-icon { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .app-popup-icon img { width: 100%; height: 100%; object-fit: cover; } .app-popup-info { flex: 1; } .app-popup-info h4 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; } .app-popup-info p { font-size: .82rem; color: var(--gray-500); margin-bottom: 8px; line-height: 1.4; } .app-popup-info .popup-rating { font-size: .78rem; color: var(--orange); margin-bottom: 10px; } .app-popup-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #00b37a, #00d68f); color: white; border: none; padding: 10px 20px; border-radius: var(--radius-full); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px rgba(0,179,122,.35); } .app-popup-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,179,122,.45); } @media (max-width: 480px) { .app-popup { padding: 18px 16px; } .app-popup-icon { width: 52px; height: 52px; } .app-popup-info h4 { font-size: .9rem; } } .promo-app-name { font-size: .88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; line-height: 1.3; } .promo-app-dev { font-size: .72rem; color: var(--gray-400); margin-bottom: 8px; } .promo-app-desc { font-size: .78rem; color: var(--gray-500); line-height: 1.5; margin-bottom: 14px; } .promo-app-rating { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .75rem; color: var(--orange); margin-bottom: 12px; } .promo-app-rating .stars { letter-spacing: 1px; } .promo-app-rating .rating-text { color: var(--gray-500); font-weight: 600; } /* Install button */ .promo-install-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px; background: var(--primary); color: #fff; border-radius: var(--radius-full); font-size: .82rem; font-weight: 700; letter-spacing: .02em; transition: all var(--dur) var(--ease); white-space: nowrap; } .promo-ad:hover .promo-install-btn { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(10, 94, 181, 0.3); } /* Google Play badge area */ .promo-play-badge { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; background: var(--gray-50); border-top: 1px solid var(--gray-200); font-size: .7rem; color: var(--gray-400); font-weight: 500; } .promo-play-badge .play-icon { font-size: .9rem; } /* --- Sidebar Ads (Desktop only) --- */ .promo-sidebar { position: fixed; top: 50%; transform: translateY(-50%); width: 220px; z-index: 100; display: none; } .promo-sidebar .promo-ad-body { padding: 24px 18px; } .promo-sidebar .promo-app-icon { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 16px; margin-bottom: 14px; } .promo-sidebar .promo-app-name { font-size: .95rem; margin-bottom: 6px; } .promo-sidebar .promo-app-desc { font-size: .82rem; margin-bottom: 16px; line-height: 1.5; } .promo-sidebar .promo-app-rating { margin-bottom: 14px; } .promo-sidebar .promo-install-btn { padding: 11px 24px; font-size: .85rem; } .promo-sidebar-left { left: 16px; } .promo-sidebar-right { right: 16px; } @media (min-width: 1280px) { .promo-sidebar { display: block; animation: promoFadeIn .6s var(--ease) both; } } @media (min-width: 1280px) and (max-width: 1439px) { .container, .container-narrow { padding-left: 200px !important; padding-right: 200px !important; max-width: 100% !important; } .promo-sidebar { width: 180px; } .promo-sidebar .promo-ad-body { padding: 20px 14px; } .promo-sidebar .promo-app-icon { width: 56px; height: 56px; font-size: 1.5rem; } .promo-sidebar .promo-app-name { font-size: .88rem; } } @media (min-width: 1440px) and (max-width: 1599px) { .container, .container-narrow { padding-left: 230px !important; padding-right: 230px !important; max-width: 100% !important; } .promo-sidebar-left { left: 16px; } .promo-sidebar-right { right: 16px; } .promo-sidebar { width: 200px; } } @media (min-width: 1600px) { .promo-sidebar { width: 220px; } .promo-sidebar-left { left: calc((100vw - 1100px) / 2 - 245px); } .promo-sidebar-right { right: calc((100vw - 1100px) / 2 - 245px); } } html[dir="rtl"] .faq-question { text-align: right; } html[dir="rtl"] .stats .container { justify-content: space-around; } @keyframes promoFadeIn { from { opacity: 0; transform: translateY(-50%) translateX(-10px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } .promo-sidebar-right .promo-ad { animation: promoFadeInR .6s var(--ease) both; } @keyframes promoFadeInR { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* --- Inline Ad Banner (All screen sizes) --- */ .promo-inline { max-width: 720px; margin: 28px auto; } .promo-inline .promo-ad { display: flex; flex-direction: row; align-items: center; background: linear-gradient(135deg, var(--primary-50) 0%, var(--white) 100%); } .promo-inline .promo-ad-body { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-align: left; flex: 1; } .promo-inline .promo-app-icon { width: 48px; height: 48px; min-width: 48px; margin: 0; font-size: 1.3rem; border-radius: 12px; } .promo-inline .promo-ad-info { flex: 1; min-width: 0; } .promo-inline .promo-app-name { font-size: .85rem; margin-bottom: 2px; } .promo-inline .promo-app-desc { font-size: .76rem; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-inline .promo-ad-cta { padding: 0 20px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .promo-inline .promo-install-btn { padding: 8px 18px; font-size: .78rem; } .promo-inline .promo-ad-label { position: static; display: inline-block; margin-bottom: 4px; } .promo-inline .promo-play-badge { border-top: none; background: none; padding: 4px 0 0; font-size: .65rem; } /* Inline ad responsive */ @media (max-width: 600px) { .promo-inline .promo-ad { flex-direction: column; } .promo-inline .promo-ad-body { flex-direction: column; text-align: center; padding: 16px; gap: 10px; } .promo-inline .promo-app-desc { white-space: normal; } .promo-inline .promo-ad-cta { padding: 0 0 14px; } } /* --- RTL Support for Ads --- */ html[dir="rtl"] .promo-ad-label { right: auto; left: 8px; } html[dir="rtl"] .promo-inline .promo-ad-body { text-align: right; direction: rtl; } html[dir="rtl"] .promo-inline .promo-ad-cta { padding: 0 0 0 20px; } @media (max-width: 600px) { html[dir="rtl"] .promo-inline .promo-ad-body { text-align: center; } html[dir="rtl"] .promo-inline .promo-ad-cta { padding: 0 0 14px; } }