/* =================================================================== * Theme Name: TRUMods Ultra - Auto-Extract First Image Thumbnail Engine =================================================================== */ :root { --primary-neon: #29a8ff; --primary-cyan: #00e5ff; --accent-purple: #0057ff; --accent-pink: #5ad1ff; --bg-dark: #040a16; --bg-card: rgba(10, 22, 44, 0.7); --bg-card-hover: rgba(18, 38, 74, 0.85); --text-main: #f8fafc; --text-muted: #94a3b8; --border-glass: rgba(255, 255, 255, 0.08); --border-glow: rgba(41, 168, 255, 0.5); --radius: 18px; --radius-sm: 10px; --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); --header-height: 88px; } /* Light Mode Variables */ body.light-mode { --bg-dark: #ffffff; --bg-card: rgba(240, 245, 250, 0.9); --bg-card-hover: rgba(220, 230, 245, 0.95); --text-main: #1a1a2e; --text-muted: #5a6b7a; --border-glass: rgba(0, 0, 0, 0.08); --border-glow: rgba(0, 114, 214, 0.3); } /* Reset & Background */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Smooth Mode-Switch Animation Applies to every element by default so toggling light/dark mode fades colors in instead of snapping instantly. Elements that already declare their own `transition` (buttons, hover states, etc.) simply keep their own timing — this only fills the gap. Uses the same gentle decelerate curve as the rest of the theme (--transition) for a fluid, non-mechanical feel. */ *, *::before, *::after { transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-fill-color 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Corner sweep overlay — see the HTML comment near for how it's driven. Starts collapsed to nothing at the bottom-left corner and is expanded to a huge circle from that same corner, so it visually travels from bottom-left toward the top-right. will-change hints the browser to composite this on the GPU so the sweep stays fluid even on lower-end phones. */ #themeSweepOverlay { position: fixed; inset: 0; z-index: 999999; pointer-events: none; background: #040a16; clip-path: circle(0% at 0% 100%); -webkit-clip-path: circle(0% at 0% 100%); opacity: 1; will-change: clip-path, opacity; display: flex; align-items: center; justify-content: center; } /* "Light Mode" / "Dark Mode" label shown centered on the overlay once it has fully covered the screen, so the person can see which mode is being activated during the switch. Its own opacity fades independently (and slightly faster) than the overlay so it reads clearly for a moment before everything fades away together. */ #themeSweepLabel { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.3s cubic-bezier(0.45, 0, 0.15, 1), transform 0.3s cubic-bezier(0.45, 0, 0.15, 1); display: flex; align-items: center; gap: 0.5rem; } #themeSweepLabel.is-visible { opacity: 1; transform: translateY(0) scale(1); } html { overflow-x: hidden; width: 100%; max-width: 100%; } body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-dark); color: var(--text-main); line-height: 1.6; /* overflow-x: hidden was removed from here — html already clips horizontal overflow (see the html {} rule above and the html, body {} rule further down). Having BOTH html and body set overflow-x: hidden makes them both act as scroll containers, which broke position:sticky on .category-tab-wrapper: it painted itself twice as far down as it should (visibly overlapping the hero badge below it), even though the space reserved for it in the page flow was correct. Clipping on html alone is enough. */ width: 100%; max-width: 100%; position: relative; /* Same +12px correction as the sticky tab bar above: the fixed header floats 12px down from the viewport top, so page content needs that much extra clearance on top of the header's own height or the header's bottom edge overlaps the content below it. */ padding-top: calc(var(--header-height) + 12px); background-image: radial-gradient(circle at 15% 15%, rgba(112, 0, 255, 0.18) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(41, 168, 255, 0.15) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.08) 0%, transparent 60%); background-attachment: fixed; transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1); } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } /* Navigation Bar */ /* Header starts as a full-width bar at the very top of the page ("full view") and only morphs into the floating oval pill once the page has been scrolled — see headerScrollScript near the bottom of , which toggles the `is-scrolled` class on

based on scroll position. The transition below (rather than a one-shot @keyframes animation) is what makes that morph animate smoothly back and forth as the user scrolls up/down, instead of only playing once on page load. */ header { background: rgba(4, 10, 22, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateZ(0); width: 100%; max-width: 100%; border-radius: 0; border: 1px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); z-index: 1000; will-change: transform, top, width, border-radius, box-shadow; backface-visibility: hidden; transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1), width 0.55s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1); } header.is-scrolled { top: 12px; width: calc(100% - 32px); max-width: 960px; border-radius: 50px; border-color: var(--border-glass); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } .header { background: rgba(4, 10, 22, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateZ(0); width: 100%; max-width: 100%; border-radius: 0; border: 1px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); z-index: 1000; will-change: transform, top, width, border-radius, box-shadow; backface-visibility: hidden; transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1), width 0.55s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .header.is-scrolled { top: 12px; width: calc(100% - 32px); max-width: 960px; border-radius: 50px; border-color: var(--border-glass); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } body.light-mode header, body.light-mode .header { background: rgba(255, 255, 255, 0.95); border-bottom-color: rgba(0, 0, 0, 0.14); } body.light-mode header.is-scrolled, body.light-mode .header.is-scrolled { border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } /* Category tab bar (below header) — light mode override. The base .category-tab-wrapper / .cat-tab-btn rules below are hardcoded to dark rgba colors (not CSS variables), so without this block they stayed dark in light mode while their text switched to dark navy, making it unreadable. */ body.light-mode .category-tab-wrapper { background: transparent; box-shadow: none; } body.light-mode .cat-tab-btn { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); color: #4a5568; } body.light-mode .cat-tab-btn i { color: #0066cc; } body.light-mode .cat-tab-btn:hover { background: rgba(0, 102, 204, 0.1); color: #1a1a2e; border-color: rgba(0, 102, 204, 0.3); } body.light-mode .cat-tab-btn.active { color: #ffffff !important; } body.light-mode .menu-toggle, body.light-mode .search-toggle-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #1a1a2e; } body.light-mode .search-toggle-btn:hover, body.light-mode .search-toggle-btn.active { color: #000; } .nav-container { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 1.15rem 1rem; flex-wrap: nowrap; transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1); } header.is-scrolled .nav-container, .header.is-scrolled .nav-container { padding: 0.75rem 1rem; } /* Hologram Logo */ .logo-wrapper { display: flex; align-items: center; gap: 0.75rem; } .logo-icon-box { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #000; font-size: 1.35rem; box-shadow: 0 0 20px rgba(41, 168, 255, 0.5); position: relative; overflow: hidden; animation: floatIcon 3s ease-in-out infinite alternate; } .logo-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(41, 168, 255, 0.55)); animation: floatIcon 3s ease-in-out infinite alternate; } .logo-icon-box::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.7), transparent); transform: rotate(45deg); animation: shine 4s infinite; } .logo-text { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, #ffffff 30%, var(--primary-neon) 80%, var(--primary-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.light-mode .logo-text { color: #1a1a2e; background: linear-gradient(135deg, #1a1a2e 30%, #0066cc 80%, #0052a3 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.light-mode .logo-text span { color: #0066cc; background: linear-gradient(135deg, #0052a3, #0066cc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo-text span { background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Page Loader (Splash) */ .page-loader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background-color: var(--bg-dark); background-image: radial-gradient(circle at 15% 15%, rgba(112, 0, 255, 0.18) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(41, 168, 255, 0.15) 0%, transparent 45%); transition: opacity 0.45s ease, visibility 0.45s ease; } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .page-loader-logo { width: 72px; height: 72px; border-radius: 20px; background: transparent; display: flex; align-items: center; justify-content: center; color: #000; font-size: 2rem; animation: loaderPulse 1.1s ease-in-out infinite; } .page-loader-text { font-size: 1.35rem; animation: loaderPulse 1.1s ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(41, 168, 255, 0.55); } 50% { transform: scale(1.14); box-shadow: 0 0 45px rgba(41, 168, 255, 0.9); } } .nav-menu { display: flex; gap: 0.5rem; align-items: center; } .nav-link { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); padding: 0.55rem 1.1rem; border-radius: 30px; display: flex; align-items: center; gap: 0.4rem; transition: var(--transition); } .nav-link:hover, .nav-link.active { color: #000; background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); box-shadow: 0 0 15px rgba(41, 168, 255, 0.4); } /* CATEGORIES TAB BAR */ .category-tab-wrapper { background: transparent; padding: 0.65rem 0; /* Not sticky anymore. This bar now lives below the hero + ad banner, and position:sticky was making it re-attach itself under the header every time you scrolled past it — which is exactly the "still showing after scrolling" overlap. It's a normal block now: scrolls away with the rest of the page and stays gone, the same as everything around it. */ position: relative; z-index: 1; } .category-tab-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 0.75rem; overflow-x: auto; scrollbar-width: none; } .category-tab-container::-webkit-scrollbar { display: none; } .cat-tab-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.3rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-glass); border-radius: 50px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: var(--transition); cursor: pointer; position: relative; box-sizing: border-box; vertical-align: middle; } .cat-tab-btn i { color: var(--primary-cyan); transition: var(--transition); } .cat-tab-btn:hover { background: rgba(41, 168, 255, 0.1); color: #fff; border-color: rgba(41, 168, 255, 0.3); transform: translateY(-2px); } /* ACTIVE CATEGORY HIGHLIGHT Note: no vertical transform here on purpose. The active tab used to carry translateY(-2px) permanently (since it's active by default, not just on hover), which lifted it above Games/Tools and, combined with the glow, made it look like a taller, misaligned button. Now every tab — active or not — sits on the same baseline, and only :hover applies a temporary lift. */ .cat-tab-btn.active { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)) !important; color: #040a16 !important; font-weight: 800 !important; border-color: var(--primary-neon) !important; box-shadow: 0 0 14px rgba(41, 168, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); } .cat-tab-btn.active i { color: #040a16 !important; transform: scale(1.2); } .cat-tab-btn.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--primary-neon); border-radius: 50%; box-shadow: 0 0 8px var(--primary-neon); } /* All category tabs (including Education) are always shown, regardless of whether that category currently has any posts in it. */ .cat-tab-btn[data-tab-label] { display: inline-flex; } /* Right-hand header cluster: nav links + search icon + hamburger. Kept as ONE flex row so the search icon is a sibling of the nav-menu (not nested inside it) and always stays visible, even on mobile where nav-menu collapses into a dropdown. */ .nav-right { display: flex; align-items: center; gap: 0.6rem; } /* Mobile Toggle */ .menu-toggle { display: none; font-size: 1.3rem; cursor: pointer; color: var(--text-main); background: rgba(255,255,255,0.05); width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; border: 1px solid var(--border-glass); flex-shrink: 0; } /* Header Search Toggle (icon in header, expands bar below header) */ .search-toggle-btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); color: var(--text-main); font-size: 1rem; cursor: pointer; transition: var(--transition); flex-shrink: 0; } .search-toggle-btn:hover, .search-toggle-btn.active { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #000; box-shadow: 0 0 15px rgba(41, 168, 255, 0.4); } .header-search-bar { max-height: 0; overflow: hidden; background: rgba(10, 22, 44, 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-glass); position: relative; z-index: 1050; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease; } /* Once open, allow the live-suggestions dropdown to extend past this bar instead of being clipped by the collapse animation's overflow:hidden. */ .header-search-bar.active { max-height: 120px; padding: 1rem 0; overflow: visible; } .header-search-bar .search-box { max-width: 650px; margin: 0 auto; padding: 0 1.5rem; } .header-search-bar .search-input { padding: 0.85rem 1.5rem; padding-right: 3.5rem; } .header-search-bar .search-btn { width: 40px; height: 40px; font-size: 0.95rem; } body.light-mode .header-search-bar { background: rgba(255, 255, 255, 0.97); border-bottom-color: rgba(0, 0, 0, 0.1); } body.light-mode .header-search-bar .search-input { background: rgba(240, 245, 250, 0.9); color: #1a1a2e; } /* Live Search Suggestions Dropdown (works under any .search-box) */ .search-suggestions { position: absolute; top: calc(100% + 8px); left: 1.5rem; right: 1.5rem; background: rgba(10, 22, 44, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6); max-height: 360px; overflow-y: auto; z-index: 1200; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--transition); } .search-suggestions.active { opacity: 1; visibility: visible; transform: translateY(0); } .search-suggestion-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-glass); cursor: pointer; transition: var(--transition); } .search-suggestion-item:last-child { border-bottom: none; } .search-suggestion-item:hover, .search-suggestion-item.highlighted { background: rgba(41, 168, 255, 0.1); } .search-suggestion-thumb { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #0a162c; border: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: center; color: var(--primary-cyan); font-size: 0.9rem; } .search-suggestion-title { font-size: 0.86rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .search-suggestion-empty, .search-suggestion-loading { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; } .search-suggestion-viewall { display: block; text-align: center; padding: 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--primary-neon); border-top: 1px solid var(--border-glass); cursor: pointer; } .search-suggestion-viewall:hover { background: rgba(41, 168, 255, 0.08); } /* Light Mode: the dropdown box itself has no override above, so it was staying dark while its title text switched to dark navy — making the suggestions unreadable. Give it a white background. */ body.light-mode .search-suggestions { background: rgba(255, 255, 255, 0.98); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15); } body.light-mode .search-suggestion-item { border-bottom-color: rgba(0, 0, 0, 0.08); } body.light-mode .search-suggestion-thumb { background: #f0f5fa; } /* Hero Section */ .hero-banner { padding: 3.5rem 1.5rem 2rem; text-align: center; position: relative; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(112, 0, 255, 0.15); border: 1px solid rgba(112, 0, 255, 0.35); color: var(--primary-cyan); padding: 0.4rem 1.1rem; border-radius: 30px; font-size: 0.78rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } /* Light Mode: keep the purple background/border exactly as-is, just swap the washed-out cyan text for a readable deep purple so the badge is prominent on a white page. */ body.light-mode .hero-badge { color: #0057b8; } .hero-title { font-size: 2.8rem; font-weight: 800; line-height: 1.2; margin-bottom: 0.75rem; background: linear-gradient(180deg, #ffffff 0%, #9fd4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.light-mode .hero-title { background: linear-gradient(180deg, #1a1a2e 0%, #1d6fd1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .search-box { max-width: 650px; margin: 2rem auto 0; position: relative; } .search-input { width: 100%; padding: 1.15rem 1.8rem; padding-right: 4rem; border-radius: 50px; border: 1px solid var(--border-glass); background: rgba(10, 22, 44, 0.75); backdrop-filter: blur(12px); color: #fff; font-size: 1rem; outline: none; transition: var(--transition); } .search-input:focus { border-color: var(--primary-neon); box-shadow: 0 0 25px rgba(41, 168, 255, 0.25); background: rgba(10, 22, 44, 0.95); } body.light-mode .search-input { background: rgba(255, 255, 255, 0.92); color: #1a1a2e; border-color: rgba(0, 0, 0, 0.1); } body.light-mode .search-input::placeholder { color: #5a6b7a; } body.light-mode .search-input:focus { background: rgba(255, 255, 255, 0.98); } .search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); border: none; width: 48px; height: 48px; border-radius: 50%; color: #000; cursor: pointer; font-size: 1.1rem; transition: var(--transition); } .search-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 0 20px rgba(41, 168, 255, 0.6); } /* Clickable Banner Image Slot */ .banner-img-slot { max-width: 1240px; margin: 1.5rem auto; padding: 0 1.5rem; } .banner-img-slot a { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.02); transition: var(--transition); } .banner-img-slot a:hover { border-color: var(--border-glow); box-shadow: 0 10px 30px rgba(41, 168, 255, 0.15); transform: translateY(-3px); } .banner-img-slot img { width: 100%; height: auto; max-height: 160px; object-fit: cover; display: block; } /* Layout */ .main-wrapper { max-width: 1240px; width: 100%; margin: 0 auto; padding: 1.5rem; display: grid; grid-template-columns: 1fr 320px; gap: 2rem; overflow-x: hidden; } .main-wrapper.no-sidebar { grid-template-columns: 1fr; max-width: 900px; } /* Grid-blowout guard: without an explicit min-width, a grid item's automatic minimum size defaults to its CONTENT's min-content width (e.g. a long unbroken app name, a wide embedded table/ad) — that silently forces "main"/"aside" wider than their 1fr track and pushes the whole page into horizontal scroll on Android. Pinning min-width to 0 tells the grid these columns are allowed to shrink to the track size instead of blowing out. */ main, aside { min-width: 0; max-width: 100%; } /* Same grid-blowout guard as above, but for the sidebar ad banner's wrapper div: it sits directly in .main-wrapper's grid alongside main/aside (see the "SIDEBAR AD BANNER" section further down), so without min-width:0 it's just as exposed to the same bug — and worse here, since its tags carry native intrinsic widths up to ~1600px (the original uploaded ad image sizes). A grid item's default min-width is its content's min/max-content size, so those intrinsic widths were forcing this column (and the whole grid, since it only has 2 tracks) to stretch far past the viewport — which is what made all the slideshow's ad images show at once, uncropped and overflowing sideways, instead of one clipped full-width slide at a time. */ .sidebar-ad-banner-outer { min-width: 0; max-width: 100%; width: 100%; overflow: hidden; } /* Pagination (Older / Newer posts) */ .blog-pager { display: flex; justify-content: center; gap: 1rem; margin-top: 2.25rem; } .blog-pager a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; background: var(--bg-card); backdrop-filter: blur(14px); border: 1px solid var(--border-glass); border-radius: 50px; color: var(--text-main); font-weight: 700; font-size: 0.88rem; transition: var(--transition); } .blog-pager a:hover { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #000; border-color: transparent; box-shadow: 0 0 15px rgba(41, 168, 255, 0.4); } #blog-pager-home-link { display: none; } /* Section Headings */ .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; } .section-title { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 0.6rem; } .section-title i { color: var(--primary-neon); filter: drop-shadow(0 0 8px rgba(41, 168, 255, 0.6)); } /* Grid Cards */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; max-width: 100%; overflow-x: hidden; } .apk-card { background: var(--bg-card); backdrop-filter: blur(14px); border-radius: var(--radius); padding: 1.25rem 1rem; border: 1px solid var(--border-glass); display: flex; flex-direction: column; align-items: center; text-align: center; transition: var(--transition); position: relative; overflow: hidden; min-width: 0; max-width: 100%; } .grid-load-more-wrap { display: flex; justify-content: center; margin-top: 2rem; } /* In-grid ad banner: injected after every 6 app cards, mirrors the Top Ad Banner's ads. Spans the full grid row regardless of how many card columns are currently laid out. */ .grid-ad-slot { grid-column: 1 / -1; max-width: 100%; border-radius: var(--radius); overflow: hidden; } .grid-ad-slot a { display: block; width: 100%; } .grid-ad-slot img { width: 100%; height: auto; max-height: 160px; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--border-glass); } .grid-load-more-btn { cursor: pointer; border: none; font: inherit; } .grid-load-more-btn[disabled] { opacity: 0.6; cursor: default; } .apk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary-neon), transparent); opacity: 0; transition: var(--transition); } .apk-card:hover { transform: translateY(-8px) scale(1.01); background: var(--bg-card-hover); border-color: var(--border-glow); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(41, 168, 255, 0.15); } .apk-card:hover::before { opacity: 1; } .card-thumb { width: 95px; height: 95px; border-radius: 22px; object-fit: cover; margin-bottom: 1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); transition: var(--transition); border: 1px solid var(--border-glass); background: #0a162c; } .apk-card:hover .card-thumb { transform: scale(1.06) rotate(3deg); border-color: var(--primary-neon); } .card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-main); width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } .badge-mod { background: rgba(41, 168, 255, 0.12); border: 1px solid rgba(41, 168, 255, 0.3); color: var(--primary-neon); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; max-width: 100%; } /* Shown on app cards that do NOT have the "Mod" label attached */ .badge-original { background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.3); color: var(--primary-cyan); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; max-width: 100%; } /* Light Mode: the raw neon green / sky-cyan text is washed out on a white card, so give both tags solid, high-contrast colors here ONLY for light mode — dark mode keeps its original neon look. */ body.light-mode .badge-mod { background: rgba(21, 115, 71, 0.1); border-color: rgba(21, 115, 71, 0.4); color: #157347; } body.light-mode .badge-original { background: rgba(0, 102, 204, 0.1); border-color: rgba(0, 102, 204, 0.4); color: #0066cc; } /* Shown instead of badge-mod/badge-original on app cards tagged "Official" — takes priority over both. See isOfficialEntry() in the card-building scripts further down. */ .badge-official { background: rgba(255, 195, 0, 0.14); border: 1px solid rgba(255, 195, 0, 0.45); color: #ffc300; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; max-width: 100%; } body.light-mode .badge-official { background: rgba(153, 105, 0, 0.12); border-color: rgba(153, 105, 0, 0.4); color: #8a6100; } /* ============================================================ VERIFIED TICK Small round checkmark pinned to the bottom-right corner of an app card's thumbnail, shown only for posts tagged "Official" (same tag that switches on .badge-official above). The is wrapped in .card-thumb-wrap purely so the tick has a positioning anchor — the wrapper carries the margin the bare image used to have, and the image itself is reset to fill it. ============================================================ */ .card-thumb-wrap { position: relative; display: inline-flex; margin-bottom: 1rem; max-width: 100%; } .card-thumb-wrap .card-thumb { margin-bottom: 0; } /* Instagram-style verified badge: the scalloped 8-point seal shape (not a plain circle) with a white checkmark, drawn as an inline SVG inside the span — see the js-verified-tick / js-header- verified-tick markup and tickHtml in the card-building scripts. Fixed blue regardless of dark/light mode, same as the real badge. */ .verified-tick { position: absolute; bottom: -3px; right: -3px; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } .verified-tick svg { width: 100%; height: 100%; display: block; } .verified-tick.is-visible { display: flex; } /* ============================================================ HOMEPAGE CATEGORY SLIDERS One row per category ("Recently Added Apps", then one per tag), each a horizontal auto-sliding strip of .apk-card. Rows are built and filled by script id="categorySlidersScript" further down the page; a row stays hidden until it actually has cards in it, so an empty/unused category never shows a blank strip. ============================================================ */ .category-sliders-wrap { display: flex; flex-direction: column; gap: 2.25rem; margin-bottom: 2.25rem; } .category-slider-row { display: none; } .category-slider-row.has-cards { display: block; } .cat-slider-controls { display: flex; align-items: center; gap: 0.6rem; } .cat-slider-viewall { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .cat-slider-viewall:hover { color: var(--primary-neon); } .cat-slider-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.05); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; transition: var(--transition); flex-shrink: 0; } .cat-slider-arrow:hover { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #000; border-color: transparent; box-shadow: 0 0 15px rgba(41, 168, 255, 0.4); } .category-slider-track { display: flex; flex-wrap: nowrap; gap: 1.1rem; overflow-x: auto; /* No CSS scroll-snap / scroll-behavior here on purpose: this track is driven by marqueeHelperScript, which continuously sets scrollLeft itself for a fluid, uninterrupted glide. Scroll-snap would fight that by yanking the position to the nearest card edge, and scroll-behavior:smooth would make the browser animate every single one of those per-frame updates, turning a smooth glide into a stutter. Manual prev/next clicks still animate smoothly — they pass behavior:'smooth' explicitly in the JS call itself. */ padding: 0.25rem 0.1rem 0.75rem; -ms-overflow-style: none; scrollbar-width: none; } .category-slider-track::-webkit-scrollbar { display: none; } .category-slider-track .apk-card { flex: 0 0 155px; scroll-snap-align: start; padding: 1.1rem 0.85rem; } .category-slider-track .card-thumb { width: 78px; height: 78px; } .category-slider-track .card-title { font-size: 0.92rem; } .category-slider-track .verified-tick { width: 19px; height: 19px; font-size: 0.62rem; } @media (max-width: 480px) { .category-slider-track .apk-card { flex-basis: 132px; } } /* Banner ad appended after every category row (mirrors the "Top Ad Banner" gadget, same as .grid-ad-slot below). Lives inside the row itself, so it hides automatically along with any category that turns out to have no apps in it. */ .cat-slider-ad-slot { margin-top: 1rem; border-radius: var(--radius); overflow: hidden; } .cat-slider-ad-slot a { display: block; width: 100%; } .cat-slider-ad-slot img { width: 100%; height: auto; max-height: 160px; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--border-glass); } /* ============================================================ AD POPUP (shows every time a post page opens) + AD SLIDESHOW Used by the popup, the top banner and the sidebar banner. Each of those is a Blogger — every "HTML/JavaScript" gadget you add to it from the Layout page becomes one slide. With 2+ ads added, they auto-rotate every 5 seconds. ============================================================ */ .ad-popup-overlay { position: fixed; inset: 0; background: rgba(4, 10, 22, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1rem; } .ad-popup-overlay.is-visible { display: flex; } .ad-popup-card { position: relative; background: var(--bg-card-hover); border: 1px solid var(--border-glass); border-radius: var(--radius); max-width: 420px; width: 100%; padding: 2.6rem 0.75rem 0.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: installFadeIn 0.25s ease; } @keyframes installFadeIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ad-popup-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: none; color: var(--text-main); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: var(--transition); } .ad-popup-close:hover { background: rgba(255, 255, 255, 0.18); } .ad-popup-close:disabled { cursor: not-allowed; opacity: 0.85; font-size: 0.75rem; font-weight: 700; } .ad-popup-close:disabled:hover { background: rgba(255, 255, 255, 0.08); } /* ============================================================ OFFICIAL APP ANNOUNCEMENT TOAST Pinned to the bottom-center of the viewport, slides up into view and back down on dismiss. Sits below the ad popups (lower z-index) since it's only ever revealed after those are closed — see officialAppToastScript, which also plays a short notification chime the moment it slides in. ============================================================ */ .official-app-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%); z-index: 9990; display: flex; flex-direction: column; gap: 0.7rem; max-width: 340px; width: calc(100% - 2rem); background: var(--bg-card-hover); border: 1px solid var(--border-glass); border-radius: var(--radius); padding: 0.9rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .official-app-toast.is-visible { transform: translateX(-50%) translateY(0); pointer-events: auto; } .official-app-toast-top { display: flex; align-items: center; gap: 0.75rem; padding-right: 1.5rem; } .official-app-toast-thumb { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-glass); background: #0a162c; } .official-app-toast-body { flex: 1; min-width: 0; } .official-app-toast-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-neon); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.15rem; } .official-app-toast-name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .official-app-toast-version { display: none; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; } .official-app-toast-version.is-visible { display: block; } .official-app-toast-version i { color: var(--primary-cyan); margin-right: 0.25rem; } .official-app-toast-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: none; color: var(--text-main); font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .official-app-toast-close:hover { background: rgba(255, 255, 255, 0.18); } .official-app-toast-download { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #040a16; font-weight: 700; font-size: 0.85rem; padding: 0.6rem 0; border-radius: var(--radius-sm); text-decoration: none; transition: var(--transition); } .official-app-toast-download:hover { filter: brightness(1.08); transform: translateY(-1px); } @media (max-width: 480px) { .official-app-toast { width: calc(100% - 1.25rem); padding: 0.75rem 0.85rem; bottom: 12px; gap: 0.55rem; } .official-app-toast-thumb { width: 36px; height: 36px; border-radius: 10px; } .official-app-toast-name { font-size: 0.85rem; } .official-app-toast-download { font-size: 0.8rem; padding: 0.55rem 0; } } /* "Advertisement" tag shown above the ad content in every popup (post-page popup, home-page popup, and the download modal), so it's always clear the content beneath is a paid placement. */ .ad-popup-label { display: block; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 0 0 8px 0; text-align: center; } body.light-mode .ad-popup-label { color: #5a6b7a !important; } /* Generic slideshow behavior. With 2+ ads, adSlideshowHelperScript stacks every slide into the same CSS grid cell (grid-area: 1/1), so they sit directly on top of one another — the grid container auto-sizes to whichever stacked slide is largest, so no fixed height has to be guessed per ad-slot type. Only the slide with "ad-slide-active" is opaque; switching which slide has that class crossfades between them. With a single ad there's no grid stacking at all and it just displays normally. */ .ad-slideshow { position: relative; overflow: hidden; } .ad-slideshow.ad-has-multiple { display: grid; } .ad-slideshow.ad-has-multiple > .widget { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; } .ad-slideshow.ad-has-multiple > .widget.ad-slide-active { opacity: 1; pointer-events: auto; } .ad-popup-card .ad-slideshow > .widget a { display: block; border-radius: var(--radius-sm); overflow: hidden; } .ad-popup-card .ad-slideshow img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); } /* Blogger sometimes drops its own default gadgets (Powered by Blogger, Report Abuse, navbar) into the first open section, which here is an ad slot - hide them so they can never show up as a "slide". (The slideshow script also removes them; this just stops a flash before it runs.) */ .ad-slideshow > .widget.Attribution, .ad-slideshow > .widget.ReportAbuse, .ad-slideshow > .widget.Navbar, .ad-slideshow > .widget.BloggerBar, .ad-slideshow > [id^="Attribution"], .ad-slideshow > [id^="ReportAbuse"], .ad-slideshow > [id^="Navbar"], .ad-slideshow > #navbar, .ad-slideshow > #navbar-iframe-container { display: none !important; } /* Ad CODE (Monetag etc.) mirrored into popups / in-grid / category-row slots runs inside its own frame so it works exactly like in the original slot. */ .ad-code-frame { display: block; width: 100%; max-width: 100%; border: 0; margin: 0 auto; background: transparent; } .ad-slideshow > .widget iframe, .ad-slideshow > .widget ins { max-width: 100%; } /* Sidebar banner: shown one ad at a time as a big square, instead of a short cropped strip. aspect-ratio + object-fit:cover keeps every slide the same square shape no matter what shape the original uploaded image is, so the crossfade never jumps size when it switches slides. */ .sidebar-widget.ad-slideshow { padding: 0.75rem; text-align: center; } .sidebar-widget.ad-slideshow > .widget a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-glass); aspect-ratio: 1 / 1; } .sidebar-widget.ad-slideshow img { width: 100%; height: 100%; object-fit: cover; display: block; } .btn-download { width: 100%; padding: 0.7rem 0; background: rgba(255, 255, 255, 0.05); color: var(--text-main); border: 1px solid var(--border-glass); font-weight: 700; font-size: 0.85rem; border-radius: var(--radius-sm); margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); } .apk-card:hover .btn-download { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #000; border-color: transparent; box-shadow: 0 0 15px rgba(41, 168, 255, 0.4); } /* ============================================================ FLOATING ACTION BUTTONS #fabStack sits fixed bottom-right on every page and always holds the Telegram button. On post/item pages it also holds the "Update" button above it, which opens #updateModalOverlay. ============================================================ */ .fab-stack { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 9990; display: flex; flex-direction: column-reverse; align-items: center; gap: 0.75rem; } .fab-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); transition: var(--transition); text-decoration: none; } .fab-btn:hover { transform: translateY(-3px) scale(1.06); } .fab-telegram { background: linear-gradient(135deg, #2AABEE, #229ED9); color: #fff; box-shadow: 0 4px 20px rgba(42, 171, 238, 0.55); } .fab-update { background: linear-gradient(135deg, var(--primary-neon), var(--primary-cyan)); color: #000; box-shadow: 0 4px 20px rgba(41, 168, 255, 0.45); animation: fabPulse 2.2s ease-in-out infinite; } @keyframes fabPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(41, 168, 255, 0.45); } 50% { box-shadow: 0 4px 30px rgba(41, 168, 255, 0.85); } } @media (max-width: 640px) { .fab-stack { right: 0.75rem; bottom: 0.85rem; gap: 0.6rem; } .fab-btn { width: 48px; height: 48px; font-size: 1.2rem; } } /* ============================================================ UPDATE / REVIEW MODAL (post page only) Reuses the same glass-card look as the install/ad popup. Lets the reader search for a different app (defaults to the app they're currently viewing), leave a message or review, then hands off to Telegram with everything pre-filled. ============================================================ */ .update-modal-overlay { position: fixed; inset: 0; background: rgba(4, 10, 22, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10010; display: none; align-items: center; justify-content: center; padding: 1rem; } .update-modal-overlay.is-visible { display: flex; } .update-modal-card { position: relative; background: var(--bg-card-hover); border: 1px solid var(--border-glass); border-radius: var(--radius); max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.5rem 1.25rem 1.25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: installFadeIn 0.25s ease; } .update-modal-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: none; color: var(--text-main); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .update-modal-close:hover { background: rgba(255, 255, 255, 0.18); } .update-modal-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-main); } .update-modal-sub { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.25rem; } .update-field-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 1rem 0 0.4rem; } .update-app-search { width: 100%; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.04); color: var(--text-main); font-size: 0.88rem; outline: none; font-family: inherit; } .update-app-search:focus { border-color: var(--border-glow); } .update-app-results { display: none; margin-top: 0.5rem; max-height: 170px; overflow-y: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.02); } .update-app-results.active { display: block; } .update-app-result-item { padding: 0.55rem 0.8rem; font-size: 0.85rem; color: var(--text-main); cursor: pointer; border-bottom: 1px solid var(--border-glass); transition: var(--transition); } .update-app-result-item:last-child { border-bottom: none; } .update-app-result-item:hover, .update-app-result-item.is-active { background: rgba(30, 144, 255, 0.16); color: #1e90ff; } .update-selected-app { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid rgba(30, 144, 255, 0.55); background: rgba(30, 144, 255, 0.1); font-size: 0.85rem; font-weight: 600; color: var(--text-main); } .update-selected-app i { color: #1e90ff; flex-shrink: 0; } .update-review-textarea { width: 100%; min-height: 90px; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.04); color: var(--text-main); font-size: 0.88rem; outline: none; resize: vertical; font-family: inherit; } .update-review-textarea:focus { border-color: var(--border-glow); } .update-send-btn { width: 100%; margin-top: 1.15rem; padding: 0.75rem 0; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, #2AABEE, #229ED9); color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); } .update-send-btn:hover { box-shadow: 0 0 20px rgba(42, 171, 238, 0.5); } .update-send-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Modal Tabs (Request Update / Request New App) */ .update-modal-tabs { display: flex; gap: 0.4rem; margin: 0.9rem 0 0.2rem; border-bottom: 1px solid var(--border-glass); } .update-modal-tab { flex: 1; background: none; border: none; color: var(--text-muted); font-family: inherit; font-weight: 700; font-size: 0.8rem; padding: 0.55rem 0.4rem; cursor: pointer; text-align: center; border-bottom: 2px solid transparent; transition: var(--transition); } .update-modal-tab:hover { color: var(--text-main); } .update-modal-tab.active { color: #1e90ff; border-bottom-color: #1e90ff; } .update-tab-panel { display: none; } .update-tab-panel.active { display: block; } .update-app-name-input, .update-playstore-input { width: 100%; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.04); color: var(--text-main); !important font-size: 0.88rem; outline: none; font-family: inherit; } .update-app-name-input:focus, .update-playstore-input:focus { border-color: var(--border-glow); !important } /* Single Post Page */ .single-post-container { background: var(--bg-card); backdrop-filter: blur(14px); padding: 2.5rem; border-radius: var(--radius); border: 1px solid var(--border-glass); max-width: 100%; overflow-x: hidden; } .app-header-box { display: flex; gap: 1.75rem; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--border-glass); margin-bottom: 2rem; max-width: 100%; } .app-header-thumb { width: 120px; height: 120px; border-radius: 28px; object-fit: cover; border: 2px solid var(--border-glow); box-shadow: 0 0 25px rgba(41, 168, 255, 0.2); background: #0a162c; flex-shrink: 0; } .app-header-thumb-wrap { margin-bottom: 0; flex-shrink: 0; } .app-header-thumb-wrap .verified-tick { width: 28px; height: 28px; font-size: 0.9rem; bottom: -4px; right: -4px; } .app-details { min-width: 0; flex: 1; } .app-details h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; max-width: 100%; overflow-wrap: break-word; word-break: normal; } /* Post/Entry title safety (index & detail pages) */ .post-title, .entry-title { max-width: 100%; overflow-wrap: break-word; word-break: normal; } /* Post Content Area - Responsive Images, Tables & Overflow Fix */ .post-body, .entry-content { max-width: 100% !important; overflow-x: hidden !important; word-wrap: break-word; overflow-wrap: break-word; } .post-body img, .entry-content img, .post-body iframe, .entry-content iframe, .post-body video, .entry-content video, .post-body embed, .entry-content embed { max-width: 100% !important; height: auto !important; display: block; margin: 1rem auto; border-radius: var(--radius-sm); } .post-body table, .entry-content table { max-width: 100%; display: block; overflow-x: auto; } .post-body pre, .entry-content pre, .post-body code, .entry-content code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } /* Universal safety net: catches any pasted widget/gallery/div whose OWN inline