/** * Image Prompt AI — 5 Layout Modes + Mobile redesign + View icons * Loads after nebula-overhaul. Classes on : ipa-layout-{grid2|grid3|masonry|list|magazine} */ /* ================================================================== BRAND: site icon + site name (fixed header layout) ================================================================== */ .ipa-brand-link, .ah-brand .ipa-brand-link, .ah-brand a.logo, .mobile-logo-modern.ipa-brand-link { display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-direction: row !important; flex-wrap: nowrap !important; min-width: 0 !important; max-width: 100% !important; text-decoration: none !important; color: #070B16 !important; } .ipa-brand-icon, .ah-brand .ipa-brand-icon, .mobile-logo-modern .ipa-brand-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; border-radius: 9px !important; object-fit: cover !important; display: block !important; flex-shrink: 0 !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15); background: #fff; } .ipa-brand-icon--fallback { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #4F46E5, #A855F7) !important; color: #fff !important; font-size: 13px !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28) !important; } .ipa-brand-icon--fallback i { color: #fff !important; font-size: 13px !important; line-height: 1 !important; } .ipa-brand-name, .ah-brand .ipa-brand-name, .mobile-logo-modern .ipa-brand-name { display: inline-block !important; font-weight: 800 !important; font-size: 1.05rem !important; letter-spacing: -0.03em !important; color: #070B16 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; line-height: 1.2 !important; } /* Hide WP custom-logo-only output if any leftover filters inject it */ .ah-brand .custom-logo-link:not(.ipa-brand-link) { display: none !important; } @media (max-width: 768px) { .mobile-logo-modern.ipa-brand-link { gap: 8px !important; flex: 1 1 auto !important; max-width: calc(100% - 100px) !important; } .mobile-logo-modern .ipa-brand-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; border-radius: 8px !important; } .mobile-logo-modern .ipa-brand-name { font-size: 15px !important; } } /* ================================================================== 0. LAYOUT TOOLBAR (5 modes) — never fixed/sticky ================================================================== */ .ipa-toolbar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 2 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px !important; flex-wrap: nowrap; padding: 8px 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 14px !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important; /* Kill AOS / transform leftovers that can pin elements on mobile */ transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .ipa-toolbar-left { display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; width: 100%; } .ipa-toolbar-label { font-size: 11px; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .ipa-layout-toggle { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 2px !important; padding: 3px !important; border-radius: 12px !important; background: rgba(79, 70, 229, 0.06) !important; border: 1px solid rgba(79, 70, 229, 0.08) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .ipa-layout-toggle button { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 9px !important; background: transparent !important; color: #94A3B8 !important; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; line-height: 1 !important; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; font-family: inherit; -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; } .ipa-layout-toggle button i { display: inline-block !important; font-size: 14px !important; line-height: 1 !important; width: 1em !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; color: inherit !important; } .ipa-layout-toggle button:hover { color: #4F46E5 !important; background: rgba(255, 255, 255, 0.85) !important; } .ipa-layout-toggle button.active { background: #fff !important; color: #4F46E5 !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16) !important; } .ipa-layout-toggle button .layout-tip { display: none !important; } /* Tag below image — clear indigo chip (not category-colored) */ .prompt-card .model-tag--meta, .card-body .model-tag--meta { color: #4338CA !important; background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(168, 85, 247, 0.1)) !important; border: 1px solid rgba(79, 70, 229, 0.22) !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .prompt-card .model-tag--meta i, .card-body .model-tag--meta i { color: #4F46E5 !important; filter: none !important; } /* ================================================================== 1. BASE GRID RESET (all layouts start from CSS grid) ================================================================== */ #ipaPromptGrid.masonry-grid, .masonry-grid.ipa-prompt-grid, body[class*="ipa-layout-"] .masonry-grid { column-count: unset !important; column-gap: unset !important; display: grid !important; width: 100%; } body[class*="ipa-layout-"] .prompt-card { break-inside: auto !important; margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; } /* ================================================================== 2. LAYOUT: grid2 — Classic cards (default) ================================================================== */ body.ipa-layout-grid2 .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; } @media (max-width: 1200px) { body.ipa-layout-grid2 .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } } @media (max-width: 768px) { body.ipa-layout-grid2 .masonry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } /* ================================================================== 3. LAYOUT: grid3 — Dense / compact ================================================================== */ body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; } body.ipa-layout-grid3 .prompt-card .prompt-text { display: none !important; } body.ipa-layout-grid3 .card-body { padding: 10px 12px 8px !important; } body.ipa-layout-grid3 .card-title { font-size: 13px !important; -webkit-line-clamp: 1 !important; } body.ipa-layout-grid3 .action-btn-sm .action-label { display: none !important; } @media (max-width: 1200px) { body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (max-width: 768px) { body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } body.ipa-layout-grid3 .prompt-card { border-radius: 14px !important; } body.ipa-layout-grid3 .card-image-wrapper { border-radius: 14px 14px 0 0 !important; aspect-ratio: 1 / 1 !important; } body.ipa-layout-grid3 .card-body { padding: 8px 8px 6px !important; } body.ipa-layout-grid3 .card-title { font-size: 11px !important; margin-bottom: 4px !important; } body.ipa-layout-grid3 .card-meta, body.ipa-layout-grid3 .card-time { display: none !important; } body.ipa-layout-grid3 .action-row-top { display: none !important; } body.ipa-layout-grid3 .action-btn-full { padding: 8px 4px !important; font-size: 10px !important; border-radius: 10px !important; } body.ipa-layout-grid3 .card-footer { padding: 6px 6px 8px !important; } } /* ================================================================== 4. LAYOUT: masonry — modern Pinterest pin cards CSS Grid with staggered row spans (no fragile column-count). ================================================================== */ body.ipa-layout-masonry .masonry-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: start !important; } body.ipa-layout-masonry .prompt-card { display: flex !important; flex-direction: column !important; border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important; background: #fff !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } body.ipa-layout-masonry .prompt-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(79, 70, 229, 0.14) !important; } /* Image-first pins — varied heights via grid + aspect */ body.ipa-layout-masonry .card-image-wrapper { position: relative !important; width: 100% !important; overflow: hidden !important; border-radius: 0 !important; background: #EEF1F7 !important; } body.ipa-layout-masonry .card-image-wrapper a { position: absolute !important; inset: 0 !important; display: block !important; } body.ipa-layout-masonry .card-image-wrapper img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; filter: none !important; transform: none !important; transition: transform 0.45s ease !important; } body.ipa-layout-masonry .prompt-card:hover .card-image-wrapper img { transform: scale(1.04) !important; } /* Staggered pin heights */ body.ipa-layout-masonry .prompt-card:nth-child(8n + 1) .card-image-wrapper { aspect-ratio: 3 / 4 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 2) .card-image-wrapper { aspect-ratio: 1 / 1 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 3) .card-image-wrapper { aspect-ratio: 4 / 5 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 4) .card-image-wrapper { aspect-ratio: 5 / 6 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 5) .card-image-wrapper { aspect-ratio: 4 / 3 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 6) .card-image-wrapper { aspect-ratio: 3 / 4 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 7) .card-image-wrapper { aspect-ratio: 1 / 1 !important; } body.ipa-layout-masonry .prompt-card:nth-child(8n + 8) .card-image-wrapper { aspect-ratio: 5 / 7 !important; } /* Compact pin footer — title + copy only */ body.ipa-layout-masonry .card-body { padding: 12px 12px 10px !important; gap: 0 !important; } body.ipa-layout-masonry .card-title { font-size: 13.5px !important; font-weight: 750 !important; line-height: 1.3 !important; margin: 0 0 8px !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body.ipa-layout-masonry .card-meta, body.ipa-layout-masonry .prompt-text, body.ipa-layout-masonry .card-time, body.ipa-layout-masonry .action-row-top { display: none !important; } body.ipa-layout-masonry .card-footer { padding: 0 !important; border-top: none !important; background: transparent !important; } body.ipa-layout-masonry .action-btn-full { width: 100% !important; border-radius: 12px !important; padding: 10px !important; font-size: 12.5px !important; background: linear-gradient(135deg, #4F46E5, #A855F7) !important; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25) !important; } /* Soft gradient over image bottom for depth */ body.ipa-layout-masonry .card-image-wrapper::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(7, 11, 22, 0.22)); pointer-events: none; z-index: 1; } /* Show category badge on pins */ body.ipa-layout-masonry .prompt-card .card-badges { display: block !important; z-index: 2 !important; } body.ipa-layout-masonry .card-image-wrapper .model-tag { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; backdrop-filter: none !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important; font-size: 10px !important; } /* All on-image tags — transparent */ .card-image-wrapper .model-tag, .card-badges .model-tag, .prompt-card .card-image-wrapper .model-tag, .image-wrapper .model-badge-overlay { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.38) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card-image-wrapper .model-tag i, .card-badges .model-tag i, .card-image-wrapper .model-tag span, .card-badges .model-tag span, .image-wrapper .model-badge-overlay i, .image-wrapper .model-badge-overlay span { color: #fff !important; } @media (max-width: 1200px) { body.ipa-layout-masonry .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } } @media (max-width: 768px) { body.ipa-layout-masonry .masonry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.ipa-layout-masonry .prompt-card { border-radius: 16px !important; } body.ipa-layout-masonry .card-body { padding: 10px 10px 8px !important; } body.ipa-layout-masonry .card-title { font-size: 12px !important; margin-bottom: 6px !important; } body.ipa-layout-masonry .action-btn-full { padding: 8px !important; font-size: 11px !important; border-radius: 10px !important; } body.ipa-layout-masonry .prompt-card:hover { transform: none !important; } body.ipa-layout-masonry .prompt-card:hover .card-image-wrapper img { transform: none !important; } } @media (min-width: 1401px) { body.ipa-layout-masonry .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; } } /* ================================================================== 5. LAYOUT: list — horizontal rows ================================================================== */ body.ipa-layout-list .masonry-grid { grid-template-columns: 1fr !important; gap: 14px !important; max-width: 920px; margin-inline: auto; } body.ipa-layout-list .prompt-card { display: grid !important; grid-template-columns: 200px 1fr !important; align-items: stretch !important; border-radius: 18px !important; overflow: hidden !important; height: auto !important; } body.ipa-layout-list .card-image-wrapper { aspect-ratio: unset !important; height: 100% !important; min-height: 160px !important; border-radius: 0 !important; } body.ipa-layout-list .card-image-wrapper a { position: absolute !important; inset: 0 !important; } body.ipa-layout-list .card-image-wrapper img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } body.ipa-layout-list .card-body { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 16px 18px !important; } body.ipa-layout-list .prompt-text { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 10px !important; } body.ipa-layout-list .card-footer { margin-top: auto !important; } @media (min-width: 900px) { body.ipa-layout-list .prompt-card { grid-template-columns: 260px 1fr !important; } body.ipa-layout-list .card-image-wrapper { min-height: 180px !important; } } @media (max-width: 768px) { body.ipa-layout-list .masonry-grid { gap: 10px !important; } body.ipa-layout-list .prompt-card { grid-template-columns: 112px 1fr !important; border-radius: 14px !important; } body.ipa-layout-list .card-image-wrapper { min-height: 132px !important; } body.ipa-layout-list .card-body { padding: 10px 10px 8px !important; } body.ipa-layout-list .card-title { font-size: 13px !important; -webkit-line-clamp: 2 !important; margin-bottom: 4px !important; } body.ipa-layout-list .prompt-text { display: none !important; } body.ipa-layout-list .card-time { display: none !important; } body.ipa-layout-list .action-row-top { display: none !important; } body.ipa-layout-list .action-btn-full { padding: 8px 6px !important; font-size: 11px !important; } body.ipa-layout-list .card-footer { padding: 6px 0 0 !important; } } /* ================================================================== 6. LAYOUT: magazine — large hero cards + bento ================================================================== */ body.ipa-layout-magazine .masonry-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; } body.ipa-layout-magazine .prompt-card { grid-column: span 2; } /* First card large */ body.ipa-layout-magazine .prompt-card:nth-child(1) { grid-column: span 4; grid-row: span 2; } body.ipa-layout-magazine .prompt-card:nth-child(1) .card-image-wrapper { aspect-ratio: 16 / 10 !important; } body.ipa-layout-magazine .prompt-card:nth-child(1) .card-title { font-size: 1.25rem !important; } body.ipa-layout-magazine .prompt-card:nth-child(1) .prompt-text { display: -webkit-box !important; -webkit-line-clamp: 3 !important; } /* Pattern: large every 7th */ body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) { grid-column: span 4; } body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) .card-image-wrapper { aspect-ratio: 16 / 10 !important; } body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) .prompt-text { display: -webkit-box !important; -webkit-line-clamp: 2 !important; } @media (max-width: 1100px) { body.ipa-layout-magazine .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.ipa-layout-magazine .prompt-card { grid-column: span 2; } body.ipa-layout-magazine .prompt-card:nth-child(1), body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) { grid-column: span 4; } } @media (max-width: 768px) { body.ipa-layout-magazine .masonry-grid { grid-template-columns: 1fr !important; gap: 14px !important; } body.ipa-layout-magazine .prompt-card, body.ipa-layout-magazine .prompt-card:nth-child(1), body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) { grid-column: span 1 !important; grid-row: auto !important; } body.ipa-layout-magazine .prompt-card:nth-child(1) .card-image-wrapper, body.ipa-layout-magazine .prompt-card:nth-child(7n + 1) .card-image-wrapper { aspect-ratio: 4 / 3 !important; } body.ipa-layout-magazine .prompt-card:nth-child(1) .card-title { font-size: 1.05rem !important; } body.ipa-layout-magazine .prompt-card .prompt-text { display: -webkit-box !important; -webkit-line-clamp: 2 !important; height: auto !important; max-height: none !important; margin-bottom: 8px !important; } body.ipa-layout-magazine .card-body { padding: 12px 12px 8px !important; } } /* In-feed ads always full width */ body[class*="ipa-layout-"] .ipa-ad-slot, body[class*="ipa-layout-"] .ad-slot, body[class*="ipa-layout-"] [class*="infeed"] { grid-column: 1 / -1 !important; width: 100% !important; break-inside: avoid !important; } /* ================================================================== 7. VIEW PAGE — transparent icons on image ================================================================== */ .image-wrapper { position: relative; } .image-wrapper .model-badge-overlay { background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(6px) saturate(140%) !important; -webkit-backdrop-filter: blur(6px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } .image-wrapper .model-badge-overlay i, .image-wrapper .model-badge-overlay span { color: #fff !important; } .image-wrapper .model-badge-overlay:hover { background: rgba(255, 255, 255, 0.28) !important; color: #fff !important; } .image-wrapper .image-overlay-like { background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(6px) saturate(140%) !important; -webkit-backdrop-filter: blur(6px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } .image-wrapper .image-overlay-like i, .image-wrapper .image-overlay-like span { color: #fff !important; } .image-wrapper .image-overlay-like:hover, .image-wrapper .image-overlay-like.liked-active { background: rgba(244, 63, 94, 0.35) !important; border-color: rgba(255, 255, 255, 0.5) !important; transform: scale(1.05); } .image-wrapper .ipa-zoom-chip { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; color: #fff !important; pointer-events: none; z-index: 3; background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(6px) saturate(140%) !important; -webkit-backdrop-filter: blur(6px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* ================================================================== 8. MOBILE LAYOUT FIXES (global mobile polish) ================================================================== */ @media (max-width: 768px) { /* Layout bar must scroll with the page — never float/stick */ .ipa-toolbar, .ipa-toolbar[data-aos], .container > .ipa-toolbar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 1 !important; display: flex !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; padding: 6px !important; border-radius: 14px !important; gap: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; float: none !important; inset: auto !important; } .ipa-toolbar-label, .ipa-kbd-hint { display: none !important; } .ipa-toolbar-left { width: 100% !important; flex: 1 1 100% !important; gap: 0 !important; } .ipa-layout-toggle { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; justify-content: stretch !important; gap: 2px !important; padding: 3px !important; overflow: hidden !important; } .ipa-layout-toggle button { flex: 1 1 20% !important; width: 20% !important; min-width: 0 !important; height: 40px !important; font-size: 15px !important; border-radius: 10px !important; } .ipa-layout-toggle button i { font-size: 15px !important; } /* Default grid2 mobile already set above */ .container { padding-left: 14px !important; padding-right: 14px !important; } /* Card structure polish */ body.ipa-layout-grid2 .prompt-card { border-radius: 16px !important; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important; overflow: hidden !important; } body.ipa-layout-grid2 .card-image-wrapper { aspect-ratio: 1 / 1 !important; border-radius: 16px 16px 0 0 !important; } body.ipa-layout-grid2 .card-body { padding: 10px 10px 6px !important; } body.ipa-layout-grid2 .card-title { font-size: 12.5px !important; line-height: 1.3 !important; margin: 0 0 6px !important; } body.ipa-layout-grid2 .prompt-text { display: none !important; } body.ipa-layout-grid2 .card-time { display: none !important; } body.ipa-layout-grid2 .card-footer { padding: 8px 8px 10px !important; border-top: 1px solid rgba(148, 163, 184, 0.1) !important; } body.ipa-layout-grid2 .action-row-top { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; } body.ipa-layout-grid2 .action-btn-sm .action-label { display: none !important; } body.ipa-layout-grid2 .action-btn-sm { min-height: 34px !important; padding: 6px 0 !important; border-radius: 10px !important; } body.ipa-layout-grid2 .action-btn-full { padding: 9px 6px !important; font-size: 11.5px !important; border-radius: 11px !important; } /* Meta tag row */ body.ipa-layout-grid2 .card-meta { margin-bottom: 0 !important; } body.ipa-layout-grid2 .model-tag--meta { font-size: 9.5px !important; padding: 3px 8px !important; color: #4338CA !important; background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(168, 85, 247, 0.1)) !important; border-color: rgba(79, 70, 229, 0.22) !important; } /* Hero mobile */ .hero, .ipa-hero { padding: 6px 14px 16px !important; } .hero-title { font-size: clamp(1.45rem, 6.5vw, 1.75rem) !important; line-height: 1.15 !important; } .hero-subtitle { font-size: 0.92rem !important; line-height: 1.55 !important; padding: 0 4px; } .hero-cta-row { flex-direction: column; width: 100%; gap: 8px; margin-top: 18px; } .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; padding: 12px 18px; } /* Category slider mobile */ .category-slider-section { margin: 4px 0 12px !important; } .category-slider-wrapper { padding: 0 10px !important; } .category-slider-item { padding: 8px 12px !important; font-size: 12px !important; } /* Single view mobile */ .ipa-single-prompt { padding-left: 14px !important; padding-right: 14px !important; } .image-wrapper .model-badge-overlay { top: 10px !important; left: 10px !important; font-size: 11px !important; padding: 6px 10px !important; max-width: 60% !important; } .image-wrapper .image-overlay-like { top: 10px !important; right: 10px !important; font-size: 12px !important; padding: 7px 10px !important; } .image-wrapper .ipa-zoom-chip { bottom: 10px !important; right: 10px !important; font-size: 11px !important; padding: 6px 10px !important; } .detail-wrapper { gap: 16px !important; } .info-card .title { font-size: 1.25rem !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Bottom nav clearance (floating dock sits above bottom edge) */ body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden !important; } .premium-footer, .small-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; } /* * MOBILE BOTTOM NAV — previous floating glass dock design * Fixed: side cut-off via safe-area + max-width + equal flex slots */ .mobile-bottom-nav { display: flex !important; position: fixed !important; z-index: 1100 !important; /* Keep inset from edges so pill never clips */ left: max(12px, env(safe-area-inset-left, 0px)) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; top: auto !important; width: auto !important; max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important; height: 64px !important; min-height: 64px !important; margin: 0 !important; padding: 0 6px !important; box-sizing: border-box !important; transform: none !important; align-items: center !important; justify-content: space-around !important; gap: 0 !important; border-radius: 22px !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 12px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(79, 70, 229, 0.04) !important; overflow: visible !important; /* allow raised gallery btn */ } .mobile-bottom-nav > .nav-item, .mobile-bottom-nav > .nav-gallery-wrapper { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; box-sizing: border-box !important; } .mobile-bottom-nav .nav-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 6px 2px !important; font-size: 9px !important; font-weight: 700 !important; color: #94A3B8 !important; text-align: center !important; line-height: 1.1 !important; border: none !important; background: none !important; text-decoration: none !important; cursor: pointer !important; font-family: inherit !important; border-radius: 14px !important; } .mobile-bottom-nav .nav-item i { font-size: 17px !important; margin: 0 !important; line-height: 1 !important; color: inherit !important; } .mobile-bottom-nav .nav-item span { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: center !important; } .mobile-bottom-nav .nav-item.active { color: #4F46E5 !important; } .mobile-bottom-nav .nav-item.active i { color: #4F46E5 !important; transform: translateY(-1px) scale(1.06) !important; } .mobile-bottom-nav .nav-gallery-wrapper { position: relative !important; top: -4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 1px !important; background: transparent !important; } .mobile-bottom-nav .nav-gallery-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; margin: 0 auto !important; border-radius: 10px !important; background: linear-gradient(135deg, #4F46E5, #A855F7) !important; border: 2px solid #F6F7FB !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.32) !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important; text-decoration: none !important; z-index: 5 !important; } .mobile-bottom-nav .nav-gallery-btn i { font-size: 13px !important; margin: 0 !important; color: #fff !important; line-height: 1 !important; } .mobile-bottom-nav .nav-gallery-btn:hover, .mobile-bottom-nav .nav-gallery-btn.active { transform: scale(1.05) !important; } .mobile-bottom-nav .play-mini-glow { position: absolute !important; inset: -2px !important; border-radius: 12px !important; background: linear-gradient(135deg, #4F46E5, #A855F7) !important; z-index: -1 !important; opacity: 0.22 !important; filter: blur(3px) !important; animation: ipaNavGlow 2.5s infinite alternate ease-in-out !important; display: block !important; } @keyframes ipaNavGlow { 0% { transform: scale(1); opacity: 0.15; } 100% { transform: scale(1.08); opacity: 0.28; } } .mobile-bottom-nav .gallery-text { font-size: 9px !important; font-weight: 800 !important; color: #4F46E5 !important; margin: 1px 0 0 !important; text-align: center !important; line-height: 1.1 !important; } } /* Small phones */ @media (max-width: 380px) { body.ipa-layout-grid2 .card-title { font-size: 11.5px !important; } body.ipa-layout-grid3 .action-btn-full span { display: none; } body.ipa-layout-grid3 .action-btn-full i { margin: 0; } } /* Laptop / desktop refinements */ @media (min-width: 769px) and (max-width: 1400px) { body.ipa-layout-grid2 .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.ipa-layout-masonry .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 1401px) { body.ipa-layout-grid2 .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.ipa-layout-grid3 .masonry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } /* ================================================================== POPULAR TWO-WORD TAGS (home + view) ================================================================== */ .ipa-popular-tags { margin: 40px 0 24px; padding: 0; } .ipa-popular-tags-inner { padding: 24px 22px 22px; border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 253, 0.9)); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 8px 28px rgba(79, 70, 229, 0.06); } .ipa-popular-tags-header { margin-bottom: 16px; text-align: left; } .ipa-popular-tags-title { margin: 0 0 4px !important; font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.02em; color: #070B16 !important; display: flex; align-items: center; gap: 10px; } .ipa-popular-tags-title i { color: #4F46E5; font-size: 0.95em; } .ipa-popular-tags-sub { margin: 0; font-size: 13px; color: #94A3B8; font-weight: 500; } .ipa-popular-tags-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .ipa-tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 100px; text-decoration: none !important; font-size: 13px; font-weight: 650; color: #4338CA !important; background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(168, 85, 247, 0.08)); border: 1px solid rgba(79, 70, 229, 0.16); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; line-height: 1.2; } .ipa-tag-chip:hover { transform: translateY(-2px); background: linear-gradient(135deg, #4F46E5, #A855F7); color: #fff !important; border-color: transparent; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28); } .ipa-tag-hash { opacity: 0.55; font-weight: 800; } .ipa-tag-chip:hover .ipa-tag-hash { opacity: 0.9; } .ipa-tag-name { white-space: nowrap; } .ipa-tag-count { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: rgba(79, 70, 229, 0.12); color: #4F46E5; min-width: 1.4em; text-align: center; } .ipa-tag-chip:hover .ipa-tag-count { background: rgba(255, 255, 255, 0.22); color: #fff; } @media (max-width: 768px) { .ipa-popular-tags { margin: 28px 0 16px; } .ipa-popular-tags-inner { padding: 18px 14px 16px; border-radius: 18px; } .ipa-popular-tags-title { font-size: 1.05rem !important; } .ipa-popular-tags-cloud { gap: 8px; } .ipa-tag-chip { padding: 8px 12px; font-size: 12px; } } /* Single view page container width for tags */ .ipa-single-prompt > .ipa-popular-tags { margin-top: 32px; margin-bottom: 40px; }