/* ============================================================================ CHARACTER PAGE — "Aurora Glass" re-skin ---------------------------------------------------------------------------- Re-skins the existing Instagram-style character profile (views/character.hbs) onto the shared design system (design-system.css), WITHOUT changing any markup or JS. Strategy: 1. Re-point the page's own --ig-* tokens at the shared --ds-* tokens. 2. Add the glass finish the legacy CSS lacks: pill shapes, frosted blur, hairline borders, brand gradient buttons, segmented tabs. Load order (in character.hbs ): character.css -> design-system.css -> character-glass.css so this file wins. The page must carry the `ds-root` class so the --ds-* tokens cascade in. Everything is scoped under `body.explore-page` to out-specify character.css. ============================================================================ */ /* 1) Re-map the page's design tokens to the shared glass palette ------------- */ body.explore-page { --ig-bg: var(--ds-bg); --ig-surface: var(--ds-bg-elev); --ig-border: var(--ds-glass-border); --ig-text: var(--ds-text); --ig-text-secondary: var(--ds-text-soft); --ig-accent: var(--ds-brand-grad); --ig-blue: var(--ds-brand); --ig-purple: var(--ds-brand); background: radial-gradient(1100px 560px at 50% -8%, rgba(119, 119, 119, 0.12), transparent 60%), radial-gradient(820px 460px at 100% 6%, rgba(133, 133, 133, 0.07), transparent 60%), var(--ds-bg) !important; background-attachment: fixed; } body.explore-page .profile-container { background: transparent; } /* Helper: frosted glass surface used across the page. IMPORTANT: .ig-profile-header is deliberately NOT in this group — it contains the position:fixed admin FAB + bottom sheet, and `backdrop-filter` on an ancestor creates a containing block that breaks fixed positioning (pinning the FAB/sheet inside the header instead of the viewport). .ig-menu-dropdown is NOT in this group either — a 4.5%-white frosted surface over the big character photo leaves the menu text unreadable, so it gets its own near-opaque rule below. */ body.explore-page .ig-attribute-card, body.explore-page .ig-section-card, body.explore-page .ig-charsheet-item, body.explore-page .ig-tier-access-section { background: var(--ds-glass) !important; border: 1px solid var(--ds-glass-border) !important; -webkit-backdrop-filter: blur(var(--ds-blur)); backdrop-filter: blur(var(--ds-blur)); } /* 2) Profile header card — glass look WITHOUT backdrop-filter (see above) --- */ body.explore-page .ig-profile-header { background: var(--ds-glass) !important; border: 1px solid var(--ds-glass-border) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-md); } /* Avatar ring -> brand gradient ring */ body.explore-page .ig-avatar-ring { padding: 3px; background: var(--ds-brand-grad) !important; border-radius: 50% !important; box-shadow: var(--ds-brand-glow); } body.explore-page .ig-avatar { border: 3px solid var(--ds-bg-elev) !important; } /* Stats */ body.explore-page .ig-stat-number { color: var(--ds-text) !important; font-weight: 700; } body.explore-page .ig-stat-label { color: var(--ds-text-muted) !important; } /* Bio / display name */ body.explore-page .ig-display-name { letter-spacing: -0.02em; } body.explore-page .ig-bio { color: var(--ds-text-soft) !important; } /* 3) Buttons --------------------------------------------------------------- */ /* Primary chat / subscribe button -> brand pill */ body.explore-page .ig-chat-btn, body.explore-page .character-subscribe-btn { background: var(--ds-brand-grad) !important; color: var(--ds-text-on-brand) !important; border: 0 !important; border-radius: var(--ds-r-pill) !important; font-weight: 600; box-shadow: var(--ds-brand-glow), inset 0 1px 0 rgba(0, 0, 0, 0.06) !important; transition: transform var(--ds-t-fast), box-shadow var(--ds-t), background var(--ds-t); } body.explore-page .ig-chat-btn:hover, body.explore-page .character-subscribe-btn:hover { background: var(--ds-brand-grad-hover) !important; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.06) !important; } /* Secondary icon buttons -> circular glass */ body.explore-page .ig-secondary-btn { background: var(--ds-glass) !important; border: 1px solid var(--ds-glass-border) !important; border-radius: 50% !important; color: var(--ds-text) !important; -webkit-backdrop-filter: blur(var(--ds-blur)); backdrop-filter: blur(var(--ds-blur)); } body.explore-page .ig-secondary-btn:hover { background: var(--ds-glass-strong) !important; border-color: var(--line-strong) !important; } /* Primary follow button next to the character name -> brand pill */ body.explore-page .ig-name-follow-btn { border-radius: var(--ds-r-pill) !important; /* Fallbacks are a matched pair (see .ig-name-follow-btn in character.css): an unresolved --ds-text-on-brand falls back to `inherit`, which on a grey fill is the low-contrast pill this used to ship. */ background: var(--ds-brand, #000000) !important; border: 1px solid transparent !important; color: var(--ds-text-on-brand, #f6f6f6) !important; box-shadow: var(--ds-shadow-sm, none); } /* Followed — a quieter fill, never a ghost: the label stays white ink so the pill reads the same in both states (see .ig-name-follow-btn in character.css). */ body.explore-page .ig-name-follow-btn.following { background: var(--fill-mid-strong, #5c5c62) !important; border: 1px solid transparent !important; color: var(--brand-ink, #f6f6f6) !important; } @media (hover: hover) { body.explore-page .ig-name-follow-btn.following:hover { background: var(--status-danger, #c62828) !important; border-color: var(--status-danger, #c62828) !important; color: var(--status-ink, #ffffff) !important; } } body.explore-page .ig-handle { color: var(--ds-text-muted) !important; } body.explore-page .ig-handle-copy { color: var(--ds-text-muted) !important; } /* More-actions dropdown — floats over the character photo, so it needs a near-opaque surface (unlike the shared glass cards): text must stay readable no matter what image sits behind it. Backdrop blur is kept as a progressive enhancement on top of the solid fill. */ body.explore-page .ig-menu-dropdown { background: var(--surface-overlay) !important; /* --ds-bg-elev at 96% */ border: 1px solid var(--ds-glass-border) !important; border-radius: var(--ds-r-md) !important; box-shadow: var(--ds-shadow-lg); -webkit-backdrop-filter: blur(var(--ds-blur-strong)); backdrop-filter: blur(var(--ds-blur-strong)); } body.explore-page .ig-menu-item { border-radius: var(--ds-r-sm); color: var(--ds-text) !important; } body.explore-page .ig-menu-item:hover { background: var(--ds-glass-strong) !important; color: var(--ds-text) !important; } /* Presence dot + one-line status */ body.explore-page .ig-presence { color: var(--ds-text-muted); } body.explore-page .ig-presence-online { color: #1b9451 !important; } body.explore-page .ig-presence-recent { color: #d18800 !important; } body.explore-page .ig-tagline { color: var(--ds-text-muted) !important; } body.explore-page .ig-tagline-editable:hover { color: var(--ds-text) !important; } /* 4) Tabs -> horizontal segmented control ---------------------------------- A full-bleed glass rail: each tab is an equal-width segment, the selected one filled with a brand tint. It used to be an inset pill (16px side margins, 16px above / 0 below, 67px tall) which read as a floating island: lopsided against the edge-to-edge grid right under it, and heavier than the content it indexes. Now it spans the full width, carries the SAME air above and below, and is ~24px shorter. Keep those three properties if you restyle it. */ body.explore-page .ig-tab-nav { display: flex !important; gap: 6px; padding: 6px 10px; margin: 10px 0 !important; border: 0 !important; border-top: 1px solid var(--ds-glass-border-soft) !important; border-bottom: 1px solid var(--ds-glass-border-soft) !important; border-radius: 0 !important; background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(var(--ds-blur)); backdrop-filter: blur(var(--ds-blur)); } body.explore-page .ig-tab { flex: 1 1 0 !important; padding: 8px 0 !important; /* Pill segments, matching the Subscribe button and the "add media" FAB — a squarer indicator reads as a different design language on the same page. */ border-radius: var(--ds-r-pill) !important; color: var(--ds-text-muted) !important; background: transparent !important; border: 1px solid transparent !important; font-size: 1.1rem !important; line-height: 1 !important; transition: background var(--ds-t), color var(--ds-t), border-color var(--ds-t); } body.explore-page .ig-tab:hover { color: var(--ds-text) !important; background: var(--ds-glass) !important; } body.explore-page .ig-tab.active { color: var(--ds-brand-light) !important; background: var(--scrim-soft) !important; border-color: var(--line-strong) !important; } /* Hide the legacy underline indicator — the filled segment is the active cue */ body.explore-page .ig-tab.active::after { display: none !important; } /* 5) Attribute + section cards -------------------------------------------- */ body.explore-page .ig-attribute-card, body.explore-page .ig-section-card, body.explore-page .ig-charsheet-item { border-radius: var(--ds-r-md) !important; transition: transform var(--ds-t), border-color var(--ds-t); } body.explore-page .ig-attribute-card:hover, body.explore-page .ig-charsheet-item:hover { transform: translateY(-2px); border-color: var(--ds-glass-border) !important; } body.explore-page .ig-attribute-icon { color: var(--ds-brand-light) !important; } body.explore-page .ig-attribute-label, body.explore-page .ig-charsheet-label { color: var(--ds-text-muted) !important; } body.explore-page .ig-attribute-value { color: var(--ds-text) !important; } body.explore-page .ig-section-text { color: var(--ds-text-soft) !important; } /* 6) Tags -> glass pills --------------------------------------------------- */ body.explore-page .ig-tag { border-radius: var(--ds-r-pill) !important; background: var(--ds-glass) !important; border: 1px solid var(--ds-glass-border-soft) !important; color: var(--ds-text-soft) !important; transition: background var(--ds-t), color var(--ds-t), border-color var(--ds-t); } body.explore-page .ig-tag:hover { background: var(--ds-glass-strong) !important; color: var(--ds-text) !important; border-color: var(--ds-glass-border) !important; } body.explore-page .ig-tag i { color: var(--ds-brand-light) !important; } /* 7) Tier / albums section ------------------------------------------------- */ body.explore-page .ig-tier-access-section { border-radius: var(--ds-r-lg) !important; } body.explore-page .ig-tier-access-title { color: var(--ds-text) !important; } body.explore-page .ig-tier-access-copy { color: var(--ds-text-soft) !important; } /* The album module is a row list, not a panel — the ROW is the surface that needs the glass treatment (the section itself has no background of its own). See docs/CHARACTER_PROFILE_ALBUMS.md. */ body.explore-page .char-album-row { background: var(--ds-glass) !important; border: 1px solid var(--ds-glass-border) !important; border-radius: var(--ds-r-lg) !important; -webkit-backdrop-filter: blur(var(--ds-blur)); backdrop-filter: blur(var(--ds-blur)); } body.explore-page .char-album-row:hover { border-color: var(--ds-edge-glow, rgba(119, 119, 119, 0.55)) !important; } body.explore-page .char-album-h { color: var(--ds-text) !important; } body.explore-page .char-album-desc, body.explore-page .char-album-lead { color: var(--ds-text-soft) !important; } body.explore-page .ig-tier-card-btn { background: var(--ds-brand-grad) !important; border: 0 !important; border-radius: var(--ds-r-pill) !important; color: var(--ds-text-on-brand) !important; } /* 8) Media grid + similar cards ------------------------------------------- */ /* The profile gallery grid (.media-grid) stays edge-to-edge square tiles — Instagram-style, no rounding. Only the similar/explore card rails round. */ body.explore-page .similar-grid img, body.explore-page .explore-grid img { border-radius: var(--ds-r-md); } body.explore-page .media-grid img, body.explore-page .media-grid video, body.explore-page .media-grid .media-item, body.explore-page .media-grid .loading-item { border-radius: 0; } body.explore-page .loading-item { border-radius: var(--ds-r-md); background: linear-gradient(100deg, var(--ds-bg-elev) 30%, var(--ds-bg-elev-2) 50%, var(--ds-bg-elev) 70%); background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; } @keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* 9) Gallery preview modal ------------------------------------------------- */ body.explore-page .gallery-preview-content, .gallery-preview-content { background: var(--ds-bg-elev, #e7e7e7) !important; border: 1px solid var(--ds-glass-border, rgba(0, 0, 0, 0.1)) !important; border-radius: var(--ds-r-lg, 20px) !important; } /* 10) Owner "add media" FAB + admin bottom sheet --------------------------- */ /* The admin FAB is gone; the page's only floating control is the owner's "Add a new image / video" button. Same treatment: brand pill, lifted clear of the sticky bottom nav, above it. */ body.explore-page .cpm-fab { background: var(--ds-brand-grad) !important; /* A brand fill always carries the on-brand ink; without this the label inherited --ink and the button read as a solid black pill with no text. */ color: var(--ds-text-on-brand) !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; box-shadow: var(--ds-brand-glow) !important; bottom: 88px !important; z-index: 1200 !important; transition: transform var(--ds-t-fast), box-shadow var(--ds-t); } body.explore-page .cpm-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important; } /* Overlay above everything */ body.explore-page .admin-sheet-overlay { z-index: 1290 !important; } /* Bottom sheet: glass card; on wider screens it becomes a centered card. */ body.explore-page .admin-sheet { z-index: 1300 !important; background: linear-gradient(180deg, rgba(225, 225, 225, 0.98), rgba(237, 237, 237, 0.99)) !important; border: 1px solid var(--ds-glass-border) !important; border-bottom: 0 !important; border-top-left-radius: var(--ds-r-xl) !important; border-top-right-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-toolbar) !important; } @media (min-width: 600px) { body.explore-page .admin-sheet { left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(100%); width: min(440px, calc(100% - 32px)) !important; bottom: 16px !important; border: 1px solid var(--ds-glass-border) !important; border-radius: var(--ds-r-lg) !important; } body.explore-page .admin-sheet.open { transform: translateX(-50%) translateY(0); } } body.explore-page .admin-sheet-handle { background: var(--ds-glass-strong) !important; } body.explore-page .admin-sheet-title { color: var(--ds-text-muted) !important; } body.explore-page .admin-sheet-item { border-radius: var(--ds-r-md) !important; color: var(--ds-text) !important; transition: background var(--ds-t-fast); } body.explore-page .admin-sheet-item:hover { background: var(--ds-glass) !important; } body.explore-page .admin-sheet-item:active { background: var(--ds-glass-strong) !important; } @media (prefers-reduced-motion: reduce) { body.explore-page .loading-item { animation: none; } } /* 11) Card skeleton loading (browse galleries) ----------------------------- Shown by window.getCharacterSkeletonHTML() in place of the loading spinner. Mirrors the real .char-card / .explore-grid layout. */ body.explore-page .char-skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px; } @media (min-width: 768px) { body.explore-page .char-skeleton-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { body.explore-page .char-skeleton-grid { grid-template-columns: repeat(4, 1fr); } } body.explore-page .char-card-skeleton { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--ds-bg-elev, #e7e7e7); border: 1px solid var(--ds-line-soft, rgba(0, 0, 0, 0.05)); } /* Shimmer sweep across the card */ body.explore-page .char-card-skeleton::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, 0.06) 40%, rgba(119, 119, 119, 0.1) 50%, rgba(0, 0, 0, 0.06) 60%, transparent 80%); background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; } /* Placeholder name/stats bars at the bottom, like the real card overlay */ body.explore-page .char-card-skeleton-info { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; } body.explore-page .char-card-skeleton .sk-line { height: 10px; border-radius: 6px; background: var(--glass-strong); } body.explore-page .char-card-skeleton .sk-line-title { width: 70%; height: 13px; } body.explore-page .char-card-skeleton .sk-line-sub { width: 45%; } @media (prefers-reduced-motion: reduce) { body.explore-page .char-card-skeleton::before { animation: none; } } /* 12) Stories bar + filter tag skeletons ----------------------------------- Loading placeholders for the horizontal stories menu (#horizontal-chat-list) and the filter tag pills (#query-tags-list). Same shimmer as the cards. */ body.explore-page .stories-skeleton { display: flex; gap: 16px; padding: 0 16px; } body.explore-page .story-skeleton { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%; position: relative; overflow: hidden; background: var(--ds-bg-elev, #e7e7e7); border: 1px solid var(--ds-line-soft, rgba(0, 0, 0, 0.05)); } body.explore-page .tags-skeleton { display: flex; align-items: center; gap: 8px; } body.explore-page .tag-skeleton { flex: 0 0 auto; height: 32px; border-radius: 8px; position: relative; overflow: hidden; background: var(--ds-bg-elev, #e7e7e7); border: 1px solid var(--ds-line-soft, rgba(0, 0, 0, 0.05)); } /* Shared shimmer sweep */ body.explore-page .story-skeleton::before, body.explore-page .tag-skeleton::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, 0.06) 40%, rgba(119, 119, 119, 0.1) 50%, rgba(0, 0, 0, 0.06) 60%, transparent 80%); background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body.explore-page .story-skeleton::before, body.explore-page .tag-skeleton::before { animation: none; } }