/* ============================================================================ IG Post — the ONE post design. ---------------------------------------------------------------------------- Every surface that shows a generated image as a "post" (character profile Feed tab, the full-screen image preview opened from the gallery grid, the search all-images feed) renders the same `.igp-card` markup produced by `public/js/ig-post.js`. Restyle here and every surface follows. Anatomy (mirrors Instagram): .igp-card .igp-head avatar · name/handle · time · ⋮ (owner only) .igp-media the image (or the server-blurred locked preview) .igp-actions like · comment · share · ✨ send to generation (· save) .igp-likes "N likes" .igp-caption title Plus `.igp-feed-overlay`, the full-screen "Posts" page with a top nav. ============================================================================ */ .igp-scope { /* Prefer the product's OWN design-system tokens (public/css/design-system.css) so a post looks like this product, not like a copy of another app. The --ig-* / --bg-* fallbacks keep older pages that predate the DS working. */ --igp-bg: var(--ds-bg, var(--ig-bg, var(--bg-primary, #f3f3f3))); --igp-surface: var(--ds-bg-elev, var(--ig-surface, var(--bg-secondary, #e7e7e7))); --igp-surface-2: var(--ds-bg-elev-2, #dfdfdf); --igp-border: var(--ds-line, var(--ig-border, var(--border-color, rgba(0, 0, 0, 0.08)))); --igp-text: var(--ds-text, var(--ig-text, var(--text-primary, #0a0a0a))); --igp-text-2: var(--ds-text-soft, var(--ig-text-secondary, var(--text-secondary, #424242))); --igp-text-3: var(--ds-text-muted, #7f7f7f); --igp-accent: var(--ds-brand, var(--ig-purple, #000000)); --igp-accent-light: var(--ds-brand-light, #000000); --igp-accent-grad: var(--ds-brand-grad, linear-gradient(105deg, #000000 0%, #101010 55%, #252525 120%)); --igp-accent-glow: var(--ds-brand-glow, 0 8px 24px rgba(0, 0, 0, 0.16)); --igp-radius: var(--ds-r-lg, 20px); --igp-radius-sm: var(--ds-r-md, 14px); --igp-shadow: var(--ds-shadow-md, 0 8px 30px rgba(0, 0, 0, 0.16)); --igp-like: #ce0025; /* Minimum comfortable touch target. Mobile is the primary surface here. */ --igp-tap: 44px; } /* The search/explore page uses its own palette tokens; map them so the shared post looks native there instead of importing the character page's greys. The full-screen overlay is appended to , so it inherits this too. */ .explore-body .igp-scope { --igp-bg: var(--explore-bg, #ffffff); --igp-surface: var(--explore-card-bg, #eeeeee); --igp-border: var(--explore-border, rgba(0, 0, 0, 0.1)); --igp-text: var(--explore-text, #000000); --igp-text-2: var(--explore-text-secondary, rgba(0, 0, 0, 0.7)); } /* ── Feed list ───────────────────────────────────────────────────────────── */ .igp-feed { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 auto; width: 100%; } /* ── Card ────────────────────────────────────────────────────────────────── */ .igp-card { background: var(--igp-surface); border: 1px solid var(--igp-border); border-radius: var(--igp-radius); color: var(--igp-text); box-shadow: var(--igp-shadow); /* NOT `overflow:hidden` — that would clip the ⋮ dropdown, which hangs below the header. The media clips itself instead (.igp-media). */ isolation: isolate; transition: border-color 0.2s ease, transform 0.2s ease; } @media (hover: hover) { .igp-card:hover { border-color: var(--line); } } /* Subscribers-only posts wear the brand gradient as a hairline: the paywall is a feature to advertise, not a warning to bury. */ .igp-card.is-premium { border-color: transparent; background: linear-gradient(var(--igp-surface), var(--igp-surface)) padding-box, var(--igp-accent-grad) border-box; } .igp-card.is-private { border-style: dashed; border-color: rgba(233, 131, 0, 0.34); } /* ── Header ──────────────────────────────────────────────────────────────── */ .igp-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } /* The whole identity block is the link to the creator. The media deliberately is NOT — tapping it is reserved for double-tap-to-like. */ .igp-identity { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; /* Comfortable touch target on mobile without inflating the header. */ padding: 2px 0; } a.igp-identity:hover .igp-name { text-decoration: underline; } .igp-avatar { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--igp-border); background: var(--igp-bg); } .igp-head-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; } .igp-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .igp-name { font-weight: 600; font-size: 0.875rem; color: var(--igp-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.igp-name:hover { text-decoration: underline; } .igp-sub-row { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.72rem; color: var(--igp-text-2); } .igp-sub-row .igp-handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .igp-handle + .igp-time::before { content: '·'; margin-right: 6px; opacity: 0.6; } /* Badges shown next to the name (private / subscribers-only) */ .igp-tag { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 2px 7px; border-radius: 7px; font-size: 0.64rem; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0.16); background: var(--veil-strong); color: var(--ink); } .igp-tag i { font-size: 0.9em; } .igp-tag-premium { border-color: var(--line-strong); } .igp-tag-premium i { color: var(--ink-soft); } /* Paid CHARACTER price tag — price-first, so a subscription character never reads as free in browse. Distinct from .igp-tag-premium (one locked post). */ .igp-tag-price { border-color: var(--line-strong); font-variant-numeric: tabular-nums; } .igp-tag-price i { color: var(--ink-soft); } .igp-tag-price em { font-style: normal; font-weight: 500; opacity: 0.72; } .igp-tag-private { border-color: rgba(233, 131, 0, 0.36); background: rgba(60, 40, 10, 0.55); color: #ff9a02; } /* Follow pill (member or character, decided by the caller) */ .igp-follow { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; background: var(--igp-accent); /* --igp-accent already falls back to black; the ink has to follow it down, or an unresolved --brand-ink leaves black-on-black. */ color: var(--brand-ink, #f6f6f6); font-size: 0.74rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: filter 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .igp-follow i { font-size: 0.85em; } /* Gated on a real pointer: on touch, :hover latches after the tap and the pill stays in its hover paint until something else is tapped. */ @media (hover: hover) { .igp-follow:hover { filter: brightness(1.08); } } /* Followed: a quieter fill, but still a FILL — the label stays white ink. A ghost pill with grey text was the one place the button dropped out of the white-on-fill pattern, and it read as disabled next to the black one. */ .igp-follow.following { background: var(--fill-mid-strong, #5c5c62); border-color: transparent; color: var(--brand-ink, #f6f6f6); } /* Unfollowing is destructive, so hover turns it red — again as a fill, so the label is white here too instead of red ink on the card. */ @media (hover: hover) { .igp-follow.following:hover { background: var(--status-danger, #c62828); border-color: var(--status-danger, #c62828); color: var(--status-ink, #ffffff); filter: none; } } .igp-follow:disabled { opacity: 0.6; cursor: default; } /* ── Owner-only ⋮ menu ───────────────────────────────────────────────────── */ .igp-menu { position: relative; flex: 0 0 auto; } .igp-menu-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: transparent; color: var(--igp-text); font-size: 1.05rem; cursor: pointer; transition: background 0.15s ease; } .igp-menu-btn:hover { background: var(--glass-strong); } .igp-menu-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 216px; padding: 6px; border-radius: 14px; border: 1px solid var(--igp-border); background: var(--surface-overlay); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16); } .igp-menu-list[hidden] { display: none; } .igp-menu-title { padding: 6px 10px 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--igp-text-2); } .igp-menu-sep { height: 1px; margin: 5px 8px; background: var(--igp-border); } .igp-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: var(--igp-text); font-size: 0.82rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s ease; } .igp-menu-item:hover { background: var(--glass-strong); } .igp-menu-item:disabled { opacity: 0.5; cursor: default; } .igp-menu-item i { width: 18px; font-size: 0.95rem; color: var(--igp-text-2); flex: 0 0 auto; } .igp-menu-item.is-active i, .igp-menu-item.is-active { color: var(--ink-soft); } .igp-menu-item.is-danger, .igp-menu-item.is-danger i { color: #e00000; } /* ── Media ───────────────────────────────────────────────────────────────── */ .igp-media { display: block; position: relative; width: 100%; line-height: 0; background: var(--igp-bg); cursor: pointer; /* The card can't clip (it would eat the ⋮ dropdown), so the media clips itself and rounds its own corners when it sits at the card's edges. */ overflow: hidden; } .igp-card > .igp-media:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; } .igp-media img { width: 100%; height: auto; display: block; } .igp-media .igp-video { display: block; } /* A VIDEO POST HAS A FIXED BOX. --------------------------------------------------------------------------- A