/* ============================================================ site-polish.css — top-website UX patterns for cybergrokr.com Design-polish layer only. Keeps the neon-noir GTA VI aesthetic, Pricedown Bl headlines, and every page's own component styles. Linked last in so page-specific rules still win ties. ============================================================ */ /* 1. Sticky header nav (top-site pattern) */ .site-nav { position: sticky; top: 0; z-index: 400; background: rgba(10, 6, 20, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* 2. 44px minimum touch targets (Apple/Google standard) */ .site-nav .nav-link { min-height: 44px; display: inline-flex; align-items: center; } .site-nav button { min-width: 44px; min-height: 44px; } a[class*="btn"], button[class*="btn"], .button, .cta-btn { min-height: 44px; } .cg-search input, .cg-search button { min-height: 44px; } /* 3. Primary / secondary CTA hierarchy (neon-noir) */ a.btn-primary.btn-primary, button.btn-primary.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 30px; border-radius: 12px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; color: #14060f; background: linear-gradient(135deg, #ff2d78 0%, #ff7a3d 100%); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 28px rgba(255, 45, 120, 0.4); } a.btn-secondary.btn-secondary, button.btn-secondary.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 30px; border-radius: 12px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; color: #ffd7ea; background: rgba(255, 45, 120, 0.08); border: 1px solid rgba(255, 45, 120, 0.55); } a.btn-primary.btn-primary:hover, button.btn-primary.btn-primary:hover { filter: brightness(1.1); } /* 4. Consistent trust badge near conversion points */ .trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0, 255, 200, 0.45); color: #bffcef; background: rgba(0, 255, 200, 0.08); white-space: nowrap; } .trust-badge::before { content: "\2713"; font-weight: 900; } /* 5. Images: no layout shift, responsive by default */ img { max-width: 100%; height: auto; } /* 6. Breadcrumbs (shared so injected crumbs render everywhere) */ .cg-crumbs { font-size: 14px; color: var(--muted, #9aa); margin: 14px 0 4px; } .cg-crumbs a { color: inherit; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; } .cg-crumbs [aria-hidden="true"] { margin: 0 6px; } /* 7. Footer sitemap columns (top-site pattern) */ .footer-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; margin: 22px 0 18px; text-align: left; } .footer-sitemap h3 { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #ff7ab8; margin: 0 0 10px; } .footer-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .footer-sitemap a { color: inherit; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; opacity: 0.85; } .footer-sitemap a:hover { opacity: 1; color: #fff; text-decoration: underline; } /* 8. Accessibility: visible focus, skip link */ :focus-visible { outline: 3px solid #ff2d78; outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: #ff2d78; color: #fff; padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } /* 9. Consistent typography rhythm; anchor offset under sticky nav */ h1, h2, h3 { line-height: 1.08; text-wrap: balance; } html { scroll-padding-top: 90px; } section[id], div[id] { scroll-margin-top: 90px; } /* 10. Subtle loading shimmer for dynamic regions (never a blank box) */ .cg-loading { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.04); border-radius: 12px; min-height: 72px; } .cg-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 20%, rgba(255, 45, 120, 0.14) 50%, transparent 80% ); animation: cg-shimmer 1.4s infinite; } @keyframes cg-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .cg-loading::after { animation: none; } }