/* ─── APKStore Frontend — Bidirectional (RTL/LTR) Dark Theme ──────────────── */ /* Direction is set on by the active site language. */ /* All directional rules use CSS logical properties so they flip automatically. */ :root { --color-primary: #1ca4de; --color-secondary: #0ea5e9; --color-accent: #f59e0b; --color-bg: #f5f7fa; --color-card: #ffffff; --color-text: #1a2235; --color-muted: #6b7280; --color-btn-text: #ffffff; --color-border: #e5e7eb; --color-header: #ffffff; --color-footer: #f0f2f5; --color-success: #22c55e; --color-danger: #ef4444; --radius: 12px; --shadow: 0 4px 20px rgba(0,0,0,.08); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--color-bg); color: var(--color-text); font-family: 'Segoe UI', Tahoma, Arial, sans-serif; line-height: 1.6; text-align: start; overflow-x: hidden; max-width: 100%; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } /* ─── Container ─────────────────────────────────────────────────────────── */ .apk-container { max-width: 1280px; margin-inline: auto; padding-inline: 20px; } /* ─── Header ────────────────────────────────────────────────────────────── */ .apk-header { background: var(--color-header); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .apk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .apk-site-logo { font-size: 22px; font-weight: 800; color: var(--color-primary); } .apk-site-logo img { height: 36px; width: auto; } .apk-header-search { flex: 1; max-width: 480px; position: relative; } .apk-header-search input { width: 100%; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); padding-block: 10px; padding-inline: 42px 16px; font-size: 14px; } .apk-header-search input:focus { outline: none; border-color: var(--color-primary); } .apk-header-search input::placeholder { color: var(--color-muted); } .apk-header-search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; } .apk-nav { display: flex; align-items: center; gap: 8px; } .apk-nav a { color: var(--color-muted); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 8px; transition: all .2s; } .apk-nav a:hover, .apk-nav a.active { color: var(--color-text); background: var(--color-border); } .apk-nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .apk-nav-menu li { position: relative; } .apk-nav-menu a { color: var(--color-muted); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 8px; display: block; transition: all .2s; } .apk-nav-menu a:hover, .apk-nav-menu .current-menu-item > a { color: var(--color-text); background: var(--color-border); } /* simple dropdown for sub-menus */ .apk-nav-menu .sub-menu { position: absolute; inset-inline-start: 0; top: 100%; min-width: 180px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: none; list-style: none; z-index: 200; } .apk-nav-menu li:hover > .sub-menu { display: block; } .apk-nav-menu .sub-menu a { white-space: nowrap; } /* ─── Hero Banner ───────────────────────────────────────────────────────── */ .apk-hero { padding: 48px 0 32px; text-align: center; } .apk-hero h1 { font-size: clamp(24px, 4vw, 42px); font-weight: 800; margin-bottom: 12px; } .apk-hero p { color: var(--color-muted); font-size: 16px; max-width: 600px; margin: 0 auto 24px; } .apk-hero-search { display: flex; max-width: 500px; margin-inline: auto; } .apk-hero-search input { flex: 1; background: var(--color-card); border: 2px solid var(--color-border); color: var(--color-text); padding: 14px 20px; font-size: 16px; border-start-start-radius: 12px; border-end-start-radius: 12px; } .apk-hero-search input:focus { outline: none; border-color: var(--color-primary); } .apk-hero-search button { background: var(--color-primary); border: none; color: #fff; padding: 0 24px; font-size: 16px; cursor: pointer; border-start-end-radius: 12px; border-end-end-radius: 12px; } /* ─── Section Title ─────────────────────────────────────────────────────── */ .apk-section-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .apk-section-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .apk-section-link { font-size: 13px; color: var(--color-primary); white-space: nowrap; } /* ─── App Card Grid ─────────────────────────────────────────────────────── */ .apk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-bottom: 32px; width: 100%; } .apk-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; text-align: center; transition: transform .2s, box-shadow .2s; cursor: pointer; min-width: 0; max-width: 100%; overflow: hidden; } .apk-card * { max-width: 100%; } .apk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--color-primary); } .apk-card-icon { width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 12px; object-fit: cover; } .apk-card-icon-placeholder { width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 12px; background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--color-primary); } .apk-card-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apk-card-meta { font-size: 11px; color: var(--color-muted); } .apk-card-rating { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: #f59e0b; margin-top: 4px; } .apk-card-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; background: rgba(28,164,222,.2); color: var(--color-primary); margin-top: 6px; } /* ─── Categories ────────────────────────────────────────────────────────── */ .apk-cats-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .apk-cat-chip { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 30px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--color-muted); transition: all .2s; } .apk-cat-chip:hover, .apk-cat-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ─── Single App ────────────────────────────────────────────────────────── */ .apk-single { padding: 40px 0; } .apk-single-header { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 32px; } .apk-single-icon { width: 100px; height: 100px; border-radius: 20px; object-fit: cover; flex-shrink: 0; } .apk-single-icon-placeholder { width: 100px; height: 100px; border-radius: 20px; background: var(--color-card); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--color-primary); flex-shrink: 0; } .apk-single-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; } .apk-single-seo-title { font-size: 15px; font-weight: 500; color: var(--color-muted); margin-bottom: 10px; line-height: 1.5; } .apk-single-developer { color: var(--color-muted); font-size: 14px; margin-bottom: 12px; } .apk-single-rating { display: flex; align-items: center; gap: 8px; color: #f59e0b; font-size: 15px; margin-bottom: 16px; } .apk-download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary); color: #fff; padding: 14px 32px; border-radius: 12px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; transition: background .2s; } .apk-download-btn:hover { background: #18a0d8; } .apk-dl-wrap { display: inline-block; } .apk-goto-download { background: var(--color-accent); color: #fff; } .apk-goto-download:hover { background: #e08e00; } .apk-download-section { scroll-margin-top: 80px; text-align: center; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 20px; margin: 24px 0; box-shadow: var(--shadow); } .apk-download-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; color: var(--color-text); } .apk-dl-counting { background: var(--color-muted); cursor: wait; opacity: .85; } .apk-dl-counting:hover { background: var(--color-muted); } .apk-dl-ready { background: var(--color-success); animation: apk-pulse 1s ease infinite; } .apk-dl-ready:hover { background: #1aa34c; } @keyframes apk-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } } .apk-single-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 12px; margin: 24px 0; width: 100%; } .apk-meta-card { min-width: 0; overflow: hidden; } .apk-meta-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; text-align: center; } .apk-meta-label { font-size: 11px; color: var(--color-muted); margin-bottom: 4px; } .apk-meta-value { font-size: 15px; font-weight: 700; } .apk-screenshots { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin: 24px 0; max-width: 100%; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .apk-screenshots img { height: 200px; width: auto; border-radius: 10px; border: 1px solid var(--color-border); flex-shrink: 0; } .apk-desc { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; margin: 24px 0; line-height: 1.8; } .apk-desc h2 { font-size: 18px; margin-bottom: 12px; } .apk-desc p { margin-bottom: 12px; } .apk-mod-info { background: rgba(28,164,222,.08); border: 1px solid rgba(28,164,222,.2); border-radius: 10px; padding: 16px; margin-top: 16px; } .apk-mod-info-title { color: var(--color-primary); font-weight: 700; margin-bottom: 8px; } /* ─── Subtitle / lead text ──────────────────────────────────────────────── */ .apk-single-appname { font-size: 14px; color: var(--color-muted); font-weight: 600; margin-bottom: 12px; } .apk-desc-lead { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; line-height: 1.6; } /* ─── Rating box ────────────────────────────────────────────────────────── */ .apk-rating-box { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; margin: 24px 0; display: grid; grid-template-columns: minmax(0,160px) minmax(0,1fr); gap: 28px; align-items: center; box-shadow: var(--shadow); } .apk-rating-summary { text-align: center; border-inline-end: 1px solid var(--color-border); padding-inline-end: 20px; } .apk-rating-score { font-size: 48px; font-weight: 800; line-height: 1; color: var(--color-text); } .apk-rating-stars-static { color: #f59e0b; font-size: 22px; margin: 6px 0; letter-spacing: 2px; } .apk-rating-count { font-size: 12px; color: var(--color-muted); } .apk-rating-bars { display: flex; flex-direction: column; gap: 7px; } .apk-rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; } .apk-rating-bar-label { width: 34px; color: var(--color-muted); white-space: nowrap; } .apk-rating-bar-track { flex: 1; height: 9px; background: var(--color-bg); border-radius: 5px; overflow: hidden; } .apk-rating-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 5px; } .apk-rating-bar-num { width: 42px; text-align: end; color: var(--color-muted); } .apk-rating-vote { grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .apk-rating-vote-label { font-weight: 600; font-size: 14px; } .apk-rating-vote-stars { display: inline-flex; gap: 4px; font-size: 30px; color: #d1d5db; cursor: pointer; } .apk-vote-star { transition: transform .15s, color .15s; } .apk-vote-star:hover { transform: scale(1.15); } .apk-vote-star.active { color: #f59e0b; } .apk-rating-thanks { color: var(--color-success); font-weight: 700; font-size: 14px; } /* ─── Comments ──────────────────────────────────────────────────────────── */ .apk-comments { margin-top: 32px; } .apk-comment-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; } .apk-comment-list .children { list-style: none; margin-block: 14px 0; margin-inline-start: 28px; display: flex; flex-direction: column; gap: 14px; } .apk-comment-body { display: flex; gap: 14px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; } .apk-comment-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .apk-comment-content { flex: 1; min-width: 0; } .apk-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .apk-comment-author { font-weight: 700; font-size: 14px; color: var(--color-text); } .apk-comment-date { font-size: 11px; color: var(--color-muted); } .apk-comment-text { font-size: 14px; line-height: 1.7; color: var(--color-text); word-wrap: break-word; } .apk-comment-actions { margin-top: 6px; } .apk-comment-actions a { font-size: 12px; color: var(--color-primary); } .apk-comment-form-wrap { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; } .apk-comment-form-wrap .comment-reply-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; } .apk-comment-textarea, .apk-comment-form input[type=text], .apk-comment-form input[type=email], .apk-comment-form input[type=url] { width: 100%; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); padding: 12px 14px; font-size: 14px; margin-bottom: 12px; font-family: inherit; } .apk-comment-textarea:focus, .apk-comment-form input:focus { outline: none; border-color: var(--color-primary); } .apk-comment-form .form-submit { margin: 0; } .apk-comment-form .apk-btn, .apk-comment-form input[type=submit], .apk-comment-form .submit { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; padding: 11px 24px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; } .apk-comment-form .apk-btn:hover, .apk-comment-form input[type=submit]:hover { background: #18a0d8; } .apk-comment-form .comment-form-cookies-consent, .apk-comment-form .comment-notes { font-size: 12px; color: var(--color-muted); } .apk-comment-form label { font-size: 13px; color: var(--color-muted); display: inline-block; margin-bottom: 4px; } /* ─── Footer ────────────────────────────────────────────────────────────── */ .apk-footer { background: var(--color-footer); border-top: 1px solid var(--color-border); padding: 32px 0; color: var(--color-muted); font-size: 13px; margin-top: 48px; } /* ─── Widgets (plugin compatibility) ────────────────────────────────────── */ .apk-widget { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .apk-widget-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; } .apk-widget ul { list-style: none; margin: 0; padding: 0; } .apk-widget a { color: var(--color-primary); } .apk-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); gap: 20px; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); text-align: start; } .apk-footer-widgets .apk-widget { background: transparent; border: none; padding: 0; } .apk-after-content-widgets { margin: 24px 0; } /* ─── Pages & single posts ──────────────────────────────────────────────── */ .apk-page { max-width: 860px; margin-inline: auto; } .apk-page-heading { font-size: 30px; font-weight: 800; margin-bottom: 12px; line-height: 1.3; } .apk-post-meta { color: var(--color-muted); font-size: 13px; margin-bottom: 16px; } .apk-page-thumb { margin-bottom: 20px; border-radius: var(--radius); overflow: hidden; } .apk-page-thumb img { width: 100%; height: auto; } .apk-page-content { line-height: 1.9; } .apk-page-content h2, .apk-page-content h3 { margin: 20px 0 10px; } .apk-page-content p { margin-bottom: 14px; } .apk-page-content ul, .apk-page-content ol { margin: 0 0 14px; padding-inline-start: 22px; } .apk-page-content img { max-width: 100%; height: auto; border-radius: 8px; } .apk-page-content a { color: var(--color-primary); } /* Footer menu shapes — each is independent and stacks below the previous one */ .apk-footer-shape { padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); } .apk-footer-shape ul { list-style: none; margin: 0; padding: 0; } .apk-footer-shape a { color: var(--color-muted); font-size: 13px; transition: color .2s; } .apk-footer-shape a:hover { color: var(--color-primary); } /* Shape 1: horizontal bar — centered inline row */ .apk-footer-bar-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; } /* Shape 2: columns — links flow into multiple balanced columns */ .apk-footer-columns-menu { column-width: 180px; column-gap: 32px; } .apk-footer-columns-menu li { break-inside: avoid; margin-bottom: 8px; } /* Shape 3: centered vertical list */ .apk-footer-centered-menu { display: flex; flex-direction: column; align-items: center; gap: 8px; } .apk-footer-copy { text-align: center; } .apk-footer a { color: var(--color-primary); } /* ─── Pagination ────────────────────────────────────────────────────────── */ .apk-pager { display: flex; justify-content: center; gap: 8px; margin: 32px 0; } .apk-pager ul { display: flex; gap: 8px; list-style: none; padding: 0; } .apk-pager a, .apk-pager span { min-width: 38px; height: 38px; padding-inline: 6px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-muted); font-size: 14px; } .apk-pager a:hover, .apk-pager .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ─── Ad blocks ─────────────────────────────────────────────────────────── */ .apk-ad { margin: 20px 0; text-align: center; max-width: 100%; overflow: hidden; } .apk-ad:empty { display: none; } .apk-ad img, .apk-ad iframe, .apk-ad ins { max-width: 100%; height: auto; margin-inline: auto; } /* ─── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 992px) { .apk-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } @media (max-width: 768px) { .apk-container { padding-inline: 14px; } .apk-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; } .apk-footer-about { grid-column: 1 / -1; } .apk-header-inner { height: auto; padding-block: 10px; flex-wrap: wrap; gap: 10px; } .apk-header-search { order: 3; flex-basis: 100%; max-width: 100%; } .apk-nav { display: flex; gap: 4px; } .apk-nav a { padding: 6px 10px; font-size: 13px; } .apk-single-header { flex-direction: column; align-items: center; text-align: center; } .apk-single-title { font-size: 22px; } .apk-single-rating { justify-content: center; } .apk-download-btn { width: 100%; justify-content: center; } .apk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .apk-card { padding: 12px; } .apk-card-icon, .apk-card-icon-placeholder { width: 60px; height: 60px; } .apk-hero { padding: 32px 0 24px; } .apk-hero h1 { font-size: 22px; } .apk-screenshots img { height: 150px; } .apk-rating-box { grid-template-columns: 1fr; gap: 18px; padding: 18px; } .apk-rating-summary { border-inline-end: none; border-bottom: 1px solid var(--color-border); padding-inline-end: 0; padding-bottom: 16px; } .apk-comment-body { padding: 12px; gap: 10px; } .apk-comment-avatar { width: 40px; height: 40px; } } @media (max-width: 560px) { .apk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apk-single-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apk-card-title { font-size: 12px; } .apk-card-icon, .apk-card-icon-placeholder { width: 56px; height: 56px; } } @media (max-width: 380px) { .apk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .apk-hero-search input { font-size: 14px; padding: 12px 14px; } }