/* ========================================================================== ApkAward redesign — layout/UX inspired by app-store directories (apkpure.net's search-first structure, aptoide.com's card/button/accent treatment), existing ApkAward brand (own logo/name — no third-party branding, logos or marketing copy copied). Scope: header search bar, category chip bar, section titles, and the app-card grid (shared by the homepage, category, search and related-apps listings). Palette is LIGHT (white/light-gray surfaces, dark text). The theme's built-in dark mode is still available to visitors via the existing #button_light_dark toggle (appyn_color_theme admin option flipped from 'oscuro' to 'claro' so LIGHT is the default for new visitors and crawlers). Accent updated from the apkpure-style green #2aae4b to an aptoide-style coral-orange #fe6446 (site owner request, explicitly scoped to color/layout inspiration only — see the Performance & Duplication Fixes entry on this change). The three parent-theme admin "Colores" options that already drive .buttond / .rating-average / .stars (color_theme_principal, color_download_button, color_stars) were updated to match via update_option(), same mechanism the theme itself provides for a sitewide recolor — not overridden here. Nothing here touches , URLs, or any PHP data output — presentation only, layered after the parent theme's stylesheet. IMPORTANT: this file only recolors/reshapes existing elements. It never changes display/flex/position/width/height on the header's own logo+search+nav row — that row is already a working, responsive, theme-native layout; fighting it caused a real layout bug in an earlier draft (the nav wrapped outside the header's fixed height). Keep it that way: cosmetic-only rules in the header section below. ========================================================================== */ :root{ --aa-bg:#e6e9ef; /* matches the parent theme's own light-mode base body background - no seam between chrome we style and chrome we don't */ --aa-surface:#ffffff; /* card/box surfaces - white, apkpure-style */ --aa-surface-alt:#f4f5f8; /* footer / alt band, a touch off the page bg */ --aa-border:#e3e6ec; --aa-ink:#5b6472; /* muted body/meta text, ~5:1 contrast on white */ --aa-ink-strong:#1a1d24; /* headings/strong text, near-black */ --aa-accent:#fe6446; /* aptoide-style coral-orange accent (was #2aae4b apkpure-style green, before that #ea8909) */ --aa-header-grad: linear-gradient(90deg, #ff7a38 0%, #ffb35c 35%, #6fe0b9 70%, #39b9a0 100%); /* orange-to-teal header gradient, site owner reference mockups (2026-09-02) */ --aa-tag-mod:#20a400; --aa-radius-sm:3px; --aa-radius-md:8px; --aa-radius-icon:20%; /* matches apkpure.net's measured 15% icon radius, scaled up slightly since our icons render a touch smaller */ --aa-radius-pill:999px; --aa-gap:12px; /* apkpure.net's measured card-grid gap */ } /* --------------------------------------------------------------------- */ /* Header search bar — cosmetic only (color/shape), no layout changes. */ /* The theme's own #header .searchBox / #subheader.np .searchBox already */ /* handle sizing, responsiveness and the live search-suggestions dropdown;*/ /* we only recolor them to match the light green brand. */ /* --------------------------------------------------------------------- */ #header .searchBox .sb_search[type=text]{ background:var(--aa-surface); color:var(--aa-ink-strong); border-radius:var(--aa-radius-pill) 0 0 var(--aa-radius-pill); } #header .searchBox .sb_search[type=text]::placeholder{ color:var(--aa-ink); opacity:.75; } #header .searchBox .sb_submit[type=submit]{ border-radius:0 var(--aa-radius-pill) var(--aa-radius-pill) 0; } /* --------------------------------------------------------------------- */ /* Category chip bar (apkpure-style pills) */ /* --------------------------------------------------------------------- */ .catbar{ margin:16px 0; padding-bottom:2px; } .catbar ul{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding:2px 2px 8px; list-style:none; margin:0; } .catbar li{ flex:none; } .catbar li a{ display:flex; align-items:center; gap:6px; white-space:nowrap; background:var(--aa-surface) !important; color:var(--aa-ink-strong) !important; border:1px solid var(--aa-border); border-radius:var(--aa-radius-pill); padding:8px 16px; font-size:13px; font-weight:600; transition:background .15s ease,border-color .15s ease; } .catbar li a:hover, .catbar li a:focus-visible{ background:var(--aa-accent) !important; border-color:var(--aa-accent); color:#fff !important; } .catbar .icop:empty{ display:none; /* hide the icon slot when a category has no icon set, avoids a stray glyph box */ } /* The resting chip (--aa-surface on --aa-bg) reads as flat gray at a glance since both are dark shades — give it a visible accent-tinted border and more weight so it reads as a distinct, tappable pill even before hover. */ .catbar li a{ border-color:rgba(254,100,70,.35); font-weight:700; font-size:14px; padding:9px 18px; } /* --------------------------------------------------------------------- */ /* Section titles — a short accent bar makes each section read as a */ /* distinct block instead of body copy, without adding any new heading */ /* text (same string, same tag — just a visual marker before it). */ /* --------------------------------------------------------------------- */ .section .title-section{ font-size:19px; font-weight:700; color:var(--aa-ink-strong); border-bottom:none; margin:0 0 14px; padding:0 0 0 12px; position:relative; } .section .title-section::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:var(--aa-radius-sm); background:var(--aa-accent); } /* --------------------------------------------------------------------- */ /* App card grid — used on homepage, category, search, related-apps */ /* (.baps is the existing grid wrapper; .bav/.bav2 are the existing card */ /* classes, kept for compatibility with rating-vote JS and the site's own */ /* accent-color CSS, which still targets them and keeps working). */ /* --------------------------------------------------------------------- */ .section .baps, .rlat .baps, #sidebar .baps{ display:grid; grid-template-columns:repeat(auto-fit,140px); /* apkpure.net's measured card width is ~142px */ gap:var(--aa-gap); } @media (max-width:480px){ .section .baps,.rlat .baps,#sidebar .baps{ grid-template-columns:repeat(auto-fit,104px); gap:10px; /* Site owner report (image, 2026-09-02): homepage category cards read too tall on mobile, with uneven blank gaps in shorter cards (CSS Grid's default align-items:stretch forces every card in a row to match the row's tallest card, and .acard__rating{margin-top:auto} below then pushes the stars down into that leftover space). Letting cards size to their own content removes both the forced stretch and the resulting gap. */ align-items:start; } /* Compact card content on mobile only -- desktop/tablet untouched. */ .acard__icon{ padding:8px 8px 0; } .acard__body{ padding:6px 8px 8px; gap:3px; } .acard__body .title{ font-size:12.5px; min-height:0; -webkit-line-clamp:1; /* was 2 -- the reserved 2-line height was the single biggest source of extra card height on mobile */ } .acard__meta{ font-size:10.5px; } .acard__rating{ margin-top:4px; /* was auto -- no longer needed now the card isn't force-stretched */ padding-top:0; } } .acard{ padding:0 !important; /* overrides parent's flex-item padding, grid gap replaces it */ } /* The parent theme injects a per-breakpoint inline