/* * ClipMyGame Profile — UX v2 Patch * Add this AFTER profile.css and card.css. * Overrides layout, adds Customizer Dock, Career Snapshot, mobile reorder. * Does NOT replace animations, card styles, or premium visual effects. * * How to reference: add this to profile.html after the existing CSS links: * */ /* ══════════════════════════════════════════════════════ 1. INTRO — compressed, no paragraph explanation ══════════════════════════════════════════════════════ */ .cmg-intro { padding: 16px 18px 6px; margin-bottom: 0; } .cmg-intro h1 { font-size: clamp(24px, 4vw, 38px); } /* hide the verbose explanation paragraph — tagline only */ .cmg-intro .cmg-profile-tagline { font-size: clamp(14px, 2.2vw, 18px); padding: 8px 16px; margin-top: 8px; } /* The old .cmg-profile-explain paragraph is REMOVED from HTML — no override needed */ /* ══════════════════════════════════════════════════════ 2. DESKTOP SHELL LAYOUT Left: Clips | Center: Card + Dock | Right: Rewards + Snapshot ══════════════════════════════════════════════════════ */ .cmg-command__shell { /* 3-column: left clips, center card, right rewards */ grid-template-columns: minmax(240px, 0.88fr) minmax(300px, 1.1fr) minmax(260px, 0.92fr); grid-template-rows: auto auto; align-items: start; } .cmg-profile-column--clips { grid-column: 1; grid-row: 1 / span 2; } .cmg-hero { grid-column: 2; grid-row: 1 / span 2; } /* The old .cmg-locker-panel (customizer full-width) is gone from the shell. Customizer now lives inside .cmg-hero as the dock. */ .cmg-profile-column--progress { grid-column: 3; grid-row: 1 / span 2; } /* Remove the old full-width locker panel from grid */ .cmg-locker-panel { display: none; } /* ══════════════════════════════════════════════════════ 3. RIGHT COLUMN — Reward Track is the HERO ══════════════════════════════════════════════════════ */ /* Reward locker fills the right column prominently */ .cmg-profile-column--progress .cmg-reward-locker { width: 100%; margin: 0; padding: 18px; border-color: rgba(255, 241, 174, 0.56); border-radius: 16px; /* Stronger gold glow than before */ box-shadow: 0 0 80px rgba(244, 200, 106, 0.32), 0 0 32px rgba(255, 241, 174, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 52px rgba(0, 0, 0, 0.30); animation: rewardReadyGlow 4s ease-in-out infinite; } /* Reward list — single column stack in right panel */ .cmg-profile-column--progress .cmg-reward-list { grid-template-columns: 1fr; gap: 9px; margin-top: 12px; } /* Larger "is-next" reward card — the core tension mechanism */ .cmg-profile-column--progress .cmg-reward.is-next { border-color: rgba(255, 241, 174, 0.96); background: radial-gradient(circle at 100% 0%, rgba(255, 241, 174, 0.26), transparent 44%), linear-gradient(135deg, rgba(145, 100, 20, 0.88), rgba(3, 9, 22, 0.78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 48px rgba(255, 241, 174, 0.32), 0 0 24px rgba(244, 200, 106, 0.24), 0 16px 32px rgba(0, 0, 0, 0.32); animation: nextRewardPulse 3.8s ease-in-out infinite; transform: none; /* let the pulse animation handle translate */ min-height: 84px; } .cmg-profile-column--progress .cmg-reward.is-next span { border-color: rgba(255, 241, 174, 0.92); background: #fff1ae; color: #2b1b04; box-shadow: 0 0 24px rgba(255, 241, 174, 0.42); font-size: 10px; } /* Standard reward rows in right column — compact horizontal */ .cmg-profile-column--progress .cmg-reward { grid-template-columns: auto 1fr; grid-template-rows: auto; gap: 10px; align-items: center; min-height: 72px; padding: 11px 12px 11px 50px; border-radius: 12px; text-align: left; } .cmg-profile-column--progress .cmg-reward::before { left: 22px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(255, 241, 174, 0.82), rgba(93, 242, 164, 0.28)); } .cmg-profile-column--progress .cmg-reward::after { display: none; } .cmg-profile-column--progress .cmg-reward span { position: absolute; left: 10px; top: 50%; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255, 241, 174, 0.42); border-radius: 999px; background: rgba(3, 9, 22, 0.78); color: #fff7cf; font-size: 9px; transform: translateY(-50%); } .cmg-profile-column--progress .cmg-reward i, .cmg-profile-column--progress .cmg-reward strong, .cmg-profile-column--progress .cmg-reward em, .cmg-profile-column--progress .cmg-reward b { text-align: left; } .cmg-profile-column--progress .cmg-reward i { margin: 0 0 5px; } .cmg-profile-column--progress .cmg-reward strong { margin-top: 0; font-size: 15px; } .cmg-profile-column--progress .cmg-reward em { display: none; /* keep compact */ } .cmg-profile-column--progress .cmg-reward b { margin: 0; font-size: 10px; } /* ══════════════════════════════════════════════════════ 4. CAREER SNAPSHOT — compact replacement for Profile Progress ══════════════════════════════════════════════════════ */ .cmg-career-snapshot { min-height: auto; padding: 16px 18px; animation-delay: 240ms; } .cmg-snapshot { display: grid; gap: 12px; } .cmg-snapshot__level-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .cmg-snapshot__level-label { color: var(--cmg-cyan); font-family: var(--cmg-font-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .cmg-snapshot__level-label strong { color: #fff; font-size: 26px; font-weight: 900; margin-left: 4px; line-height: 1; } .cmg-snapshot__xp-label { color: var(--cmg-muted); font-size: 12px; white-space: nowrap; } /* Next reward callout inside snapshot */ .cmg-snapshot__next { padding: 10px 12px; border: 1px solid rgba(255, 241, 174, 0.30); border-radius: 10px; background: radial-gradient(circle at 8% 0%, rgba(255, 241, 174, 0.14), transparent 40%), rgba(3, 9, 22, 0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .cmg-snapshot__next .cmg-kicker { margin-bottom: 3px; } .cmg-snapshot__next strong { display: block; color: #fff; font-family: var(--cmg-font-head); font-size: 15px; line-height: 1.15; } .cmg-snapshot__next em { display: block; margin-top: 3px; color: #f1d68a; font-size: 12px; font-style: normal; font-weight: 800; } /* Stats HUD inside snapshot — keep compact */ .cmg-career-snapshot .cmg-stats { grid-template-columns: repeat(2, 1fr); gap: 7px; } .cmg-career-snapshot .cmg-stat { min-height: 52px; padding: 9px 10px; font-size: 12px; } /* Small training button */ .cmg-train-btn--small { min-height: 36px; padding: 8px 12px; font-size: 12px; opacity: 0.80; } .cmg-train-btn--small:hover { opacity: 1; } /* Hide old .cmg-panel--stats entirely — replaced by .cmg-career-snapshot */ .cmg-panel--stats { display: none; } /* ══════════════════════════════════════════════════════ 5. CUSTOMIZER DOCK (desktop) — replaces full-width panel ══════════════════════════════════════════════════════ */ .cmg-customizer-dock { width: min(430px, 100%); margin: 0 auto; position: relative; } .cmg-customizer-dock__bar { display: flex; justify-content: center; gap: 6px; padding: 6px; border: 1px solid rgba(226, 232, 240, 0.18); border-radius: 999px; background: linear-gradient(180deg, rgba(31, 41, 55, 0.92), rgba(3, 9, 22, 0.94)); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08); } .cmg-dock-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #b8c2d9; cursor: pointer; font-family: var(--cmg-font-head); font-size: 12px; font-weight: 900; letter-spacing: 0.3px; transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; } .cmg-dock-tab:hover { color: #fff; background: rgba(141, 232, 255, 0.10); } .cmg-dock-tab.is-active { background: linear-gradient(135deg, rgba(244, 200, 106, 0.22), rgba(141, 232, 255, 0.12)), rgba(255, 255, 255, 0.07); color: #fff7cf; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 18px rgba(244, 200, 106, 0.14); } /* Drawer — floats above content, hidden by default */ .cmg-customizer-dock__drawer { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(430px, 100vw); max-height: 380px; overflow-y: auto; border: 1px solid rgba(215, 224, 234, 0.28); border-radius: 18px; background: radial-gradient(circle at 50% 0%, rgba(215, 224, 234, 0.10), transparent 38%), linear-gradient(180deg, rgba(43, 52, 66, 0.96), rgba(3, 9, 22, 0.97)); box-shadow: 0 24px 60px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.12); backdrop-filter: blur(20px); padding: 16px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; } .cmg-customizer-dock__drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cmg-customizer-dock__close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.08); color: #b8c2d9; cursor: pointer; font-size: 13px; transition: background 140ms ease, color 140ms ease; } .cmg-customizer-dock__close:hover { background: rgba(255,255,255,0.14); color: #fff; } /* Drawer tab label at top */ .cmg-customizer-dock__drawer .cmg-customizer-pane h3 { display: none; /* label comes from dock button */ } /* ══════════════════════════════════════════════════════ 6. MOBILE CUSTOMIZER BOTTOM SHEET ══════════════════════════════════════════════════════ */ .cmg-customizer-sheet { display: none; /* shown on mobile only via media query */ position: fixed; inset: 0; z-index: 50; } .cmg-customizer-sheet.is-open { display: block; } .cmg-customizer-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); } .cmg-customizer-sheet__panel { position: absolute; bottom: 0; left: 0; right: 0; max-height: 72vh; overflow-y: auto; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(43, 52, 66, 0.98), rgba(3, 9, 22, 0.99)); border: 1px solid rgba(226, 232, 240, 0.18); box-shadow: 0 -24px 60px rgba(0,0,0,0.52); padding: 20px 16px 32px; transform: translateY(100%); transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } .cmg-customizer-sheet.is-open .cmg-customizer-sheet__panel { transform: translateY(0); } .cmg-customizer-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cmg-customizer-sheet__head h2 { margin: 0; color: #fff; font-size: 18px; } .cmg-customizer-sheet__close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.07); color: #b8c2d9; cursor: pointer; font-size: 14px; transition: background 140ms ease; } .cmg-customizer-sheet__close:hover { background: rgba(255,255,255,0.14); color: #fff; } /* Mobile: dock bar becomes an "open customizer" button */ @media (max-width: 980px) { /* Hide the desktop floating drawer */ .cmg-customizer-dock__drawer { display: none !important; } /* Show sheet when opened */ .cmg-customizer-sheet { display: none; /* shown only when .is-open */ } .cmg-customizer-sheet.is-open { display: block; } } /* ══════════════════════════════════════════════════════ 7. MOBILE ORDER — correct priority stacking ══════════════════════════════════════════════════════ */ @media (max-width: 980px) { .cmg-command__shell { grid-template-columns: 1fr; width: auto; margin-right: 12px; margin-left: 12px; } /* Mobile order: 1. Card (#cardSection / .cmg-hero) 2. Reward Track (.cmg-profile-column--progress) 3. Clip Vault (.cmg-profile-column--clips) 4. Career Snapshot + Share (also inside --progress, after locker) */ .cmg-hero { grid-column: 1; grid-row: auto; order: 1; } .cmg-profile-column--progress { grid-column: 1; grid-row: auto; order: 2; } .cmg-profile-column--clips { grid-column: 1; grid-row: auto; order: 3; } /* Tabs: update order to reflect new priority */ .cmg-profile-tabs { position: sticky; top: 73px; z-index: 18; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: auto; max-width: 720px; margin: 8px 12px 12px; padding: 5px; border: 1px solid rgba(226, 232, 240, 0.20); border-radius: 999px; background: linear-gradient(180deg, rgba(31, 41, 55, 0.96), rgba(3, 9, 22, 0.96)); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px); } .cmg-profile-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 999px; color: #d7e0ea; min-width: 0; font-size: 11px; font-weight: 900; } .cmg-profile-tabs a:hover, .cmg-profile-tabs a:focus-visible { background: rgba(141, 232, 255, 0.14); color: #fff; } /* Scroll targets */ #cardSection, #clipVaultSection, #rewardLockerSection, #careerSection { scroll-margin-top: 132px; } /* Customizer dock on mobile: dock bar becomes single "Customize" button */ .cmg-customizer-dock__bar { display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 14px; } .cmg-dock-tab { border-radius: 10px; min-height: 40px; font-size: 12px; } /* Reward locker — full width on mobile */ .cmg-profile-column--progress .cmg-reward-locker { width: 100%; margin: 0; } /* Snapshot stats — 3 column on mobile */ .cmg-career-snapshot .cmg-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .cmg-profile-tabs { top: 65px; gap: 4px; margin: 6px 8px 12px; padding: 4px; } .cmg-profile-tabs a { min-height: 32px; font-size: 10px; } .cmg-career-snapshot .cmg-stats { grid-template-columns: repeat(2, 1fr); } .cmg-customizer-dock__bar { border-radius: 12px; } .cmg-dock-tab { min-height: 36px; padding: 0 8px; font-size: 11px; } } /* ══════════════════════════════════════════════════════ 8. PANEL — extra game moments is visually secondary to vault ══════════════════════════════════════════════════════ */ /* Extra game moments panel — visually smaller than clip vault */ .cmg-panel--moments { min-height: auto; opacity: 0.92; } .cmg-panel--moments .cmg-panel__header h2 { font-size: 18px; } .cmg-panel--moments .cmg-panel__header .cmg-kicker { opacity: 0.80; } /* ══════════════════════════════════════════════════════ 9. REMOVE/HIDE OBSOLETE ELEMENTS These are removed from HTML — CSS safety net below ══════════════════════════════════════════════════════ */ /* Old profile progress panel — replaced by career snapshot */ .cmg-panel--stats, .cmg-xp-guide, .cmg-xp-target, .cmg-build-card { display: none !important; } /* Old cmg-profile-explain is removed from HTML markup */ .cmg-profile-explain { display: none !important; } /* Force all right column panels visible — belt and suspenders. .cmg-panel starts at opacity:0 and animates to 1 via panelEnter. Explicitly set animation + opacity to guarantee visibility. */ .cmg-profile-column--progress .cmg-reward-locker, .cmg-profile-column--progress .cmg-career-snapshot, .cmg-profile-column--progress .cmg-panel--share, #rewardLockerSection, #careerSection { display: block !important; visibility: visible !important; opacity: 1 !important; animation: panelEnter 620ms ease both !important; } /* Duplicate share elements — keep only the panel share button */ /* (cardShareButton kept on card itself, topShareButton is micro-action, shareProfileButton is the panel CTA) The old standalone .cmg-panel--share section copy is now the only one */ /* ══════════════════════════════════════════════════════ 10. CARD XP LEGEND — remove verbose copy ══════════════════════════════════════════════════════ */ .cmg-xp-legend { display: none; } /* ══════════════════════════════════════════════════════ SNAPSHOT IDs connected to JS — responsive overrides ══════════════════════════════════════════════════════ */ #snapshotLevel { /* Inherits cmg-snapshot__level-label strong */ } #snapshotXpFill { /* Uses existing cmg-energy-bar span styles */ } /* ══════════════════════════════════════════════════════ UX v3 — conversion/trust cleanup, no layout restructure ══════════════════════════════════════════════════════ */ /* Keep the floating card visible on narrow screens. The card still animates; only the parent transform/clipping is relaxed. */ @media (max-width: 980px) { .cmg-intro, .cmg-reward-strip, .cmg-command__shell, .cmg-profile-tabs { max-width: calc(100vw - 16px); } .cmg-intro h1 { max-width: 12ch; margin-right: auto; margin-left: auto; overflow-wrap: normal; font-size: clamp(26px, 8vw, 34px); line-height: 1.04; } .cmg-hero { width: 100%; max-width: 100%; min-width: 0; justify-items: center; overflow: visible !important; transform: none !important; min-height: 520px; padding-bottom: 18px; } .cmg-card { width: min(330px, calc(100vw - 48px)) !important; justify-self: center; margin-right: auto; margin-left: auto; } .cmg-energy-core, .cmg-level-burst { max-width: calc(100vw - 32px); } } @media (max-width: 430px) { .cmg-intro h1 { max-width: 11ch; font-size: clamp(24px, 7.6vw, 32px); } .cmg-hero { min-height: 548px; } .cmg-card { width: min(306px, calc(100vw - 52px)) !important; } } /* Paid clip CTAs should outrank free XP actions. */ .cmg-buy-box { border-color: rgba(93, 242, 164, 0.42); background: radial-gradient(circle at 10% 0%, rgba(93, 242, 164, 0.14), transparent 40%), linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(59, 130, 246, 0.08)), rgba(3, 9, 22, 0.50); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), 0 0 28px rgba(93, 242, 164, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .cmg-buy-box strong { font-size: 17px; } .cmg-package-row { grid-template-columns: 1fr; } .cmg-package-row a { min-height: 44px; border: 1px solid rgba(141, 232, 255, 0.24); background: linear-gradient(135deg, rgba(54, 169, 255, 0.96), rgba(37, 99, 235, 0.92)); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255,255,255,0.18); font-size: 13px; letter-spacing: 0.1px; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .cmg-package-row a:hover { border-color: rgba(255, 255, 255, 0.56); filter: saturate(1.08); transform: translateY(-1px); box-shadow: 0 0 22px rgba(54, 169, 255, 0.22), 0 12px 24px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255,255,255,0.22); } .cmg-package-row a:last-child { justify-content: center; border-color: rgba(93, 242, 164, 0.54); background: linear-gradient(135deg, rgba(93, 242, 164, 0.96), rgba(34, 197, 94, 0.88)); color: #04131d; box-shadow: 0 0 24px rgba(93, 242, 164, 0.18), 0 12px 26px rgba(34, 197, 94, 0.16), inset 0 1px 0 rgba(255,255,255,0.28); } .cmg-package-row a:last-child::after { content: "Best XP"; margin-left: 6px; padding: 3px 6px; border-radius: 999px; background: rgba(3, 9, 22, 0.16); font-size: 9px; } .cmg-reward-strip { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; } .cmg-free-hook { flex-wrap: wrap; row-gap: 3px; min-height: 44px; padding: 9px 16px; border-color: rgba(255, 241, 174, 0.42); background: radial-gradient(circle at 10% 0%, rgba(255, 241, 174, 0.18), transparent 44%), linear-gradient(135deg, rgba(13, 23, 45, 0.94), rgba(5, 10, 24, 0.96)); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.14); } .cmg-free-hook strong { max-width: 100%; line-height: 1.2; } .cmg-mobile-buy-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 241, 174, 0.64); border-radius: 999px; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.34), transparent 44%), linear-gradient(135deg, #fff1ae, #45d483 58%, #17a2ff); color: #031018; font-size: 11px; font-weight: 1000; letter-spacing: 0.5px; text-decoration: none; text-transform: uppercase; box-shadow: 0 16px 34px rgba(69, 212, 131, 0.24), 0 0 24px rgba(255, 241, 174, 0.18), inset 0 1px 0 rgba(255,255,255,0.58); transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; } .cmg-mobile-buy-cta:hover, .cmg-mobile-buy-cta:focus-visible { color: #031018; filter: brightness(1.06); transform: translateY(-1px); } /* Keep free XP useful but visually secondary. */ .cmg-daily-xp { display: grid; gap: 8px; padding: 10px 11px; border: 1px solid rgba(141, 232, 255, 0.16); border-radius: 14px; background: linear-gradient(135deg, rgba(141, 232, 255, 0.08), transparent 58%), rgba(3, 9, 22, 0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .cmg-daily-xp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .cmg-daily-xp__head span { color: #d7f7ff; font-size: 11px; font-weight: 900; letter-spacing: 0.7px; text-transform: uppercase; } .cmg-daily-xp__head strong { color: #94a3b8; font-size: 10px; font-weight: 800; text-align: right; } .cmg-daily-xp .cmg-micro-actions { opacity: 0.88; } .cmg-micro-action, .cmg-micro-actions span { border-color: rgba(186, 224, 255, 0.18); background: rgba(255, 255, 255, 0.045); color: #b8c2d9; } #topShareButton { display: inline-flex; } /* One visible share flow: the card share button. Keep the panel in the DOM for existing JS hooks, but remove duplicate visible share UI. */ .cmg-panel--share, .cmg-profile-column--progress .cmg-panel--share { display: none !important; } .cmg-card__share { min-height: 38px; padding: 9px 15px; border-color: rgba(255, 241, 174, 0.48); background: radial-gradient(circle at 50% 0%, rgba(255, 241, 174, 0.20), transparent 58%), linear-gradient(135deg, rgba(20, 33, 58, 0.96), rgba(4, 13, 29, 0.94)); color: #fff7cf; font-size: 11px; font-weight: 1000; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26), 0 0 20px rgba(255, 241, 174, 0.14), inset 0 1px 0 rgba(255,255,255,0.14); } .cmg-card__share:hover, .cmg-card__share:focus-visible { border-color: rgba(141, 232, 255, 0.62); color: #e9f9ff; transform: translateY(-1px); } .cmg-order-card::after { content: "▶ WATCH"; width: 52px; height: 40px; border-color: rgba(141, 232, 255, 0.54); background: radial-gradient(circle at 50% 0%, rgba(141, 232, 255, 0.20), transparent 52%), rgba(54, 169, 255, 0.16); color: #e9f9ff; font-size: 9px; letter-spacing: 0.3px; box-shadow: 0 0 18px rgba(54, 169, 255, 0.16), inset 0 1px 0 rgba(255,255,255,0.12); } .cmg-order-card:hover::after { border-color: rgba(255, 241, 174, 0.62); background: radial-gradient(circle at 50% 0%, rgba(255, 241, 174, 0.22), transparent 52%), rgba(54, 169, 255, 0.20); color: #fff7cf; transform: translateY(-50%) scale(1.04); } /* Reward states are now explicit text labels, not tiny level pips. */ .cmg-profile-column--progress .cmg-reward { grid-template-columns: 1fr; gap: 7px; min-height: 78px; padding: 12px; } .cmg-profile-column--progress .cmg-reward::before { display: none; } .cmg-profile-column--progress .cmg-reward span { position: relative; left: auto; top: auto; display: inline-flex; width: fit-content; height: auto; min-height: 20px; padding: 4px 8px; place-items: initial; align-items: center; border-radius: 999px; transform: none; font-size: 9px; letter-spacing: 0.5px; line-height: 1; } .cmg-profile-column--progress .cmg-reward.is-unlocked span { border-color: rgba(93, 242, 164, 0.48); background: rgba(93, 242, 164, 0.16); color: #dfffee; } .cmg-profile-column--progress .cmg-reward.is-next span { border-color: rgba(255, 241, 174, 0.92); background: #fff1ae; color: #2b1b04; box-shadow: 0 0 24px rgba(255, 241, 174, 0.34); } .cmg-profile-column--progress .cmg-reward.is-locked span { border-color: rgba(148, 163, 184, 0.24); background: rgba(148, 163, 184, 0.10); color: #cbd5e1; } .cmg-profile-column--progress .cmg-reward b { display: inline-flex; width: fit-content; margin-top: 2px; padding: 4px 8px; } /* Customizer clarity: honest labels, clear active state, visible swatches. */ .cmg-dock-tab { padding: 0 12px; } .cmg-customizer-dock__label { margin: 0 0 7px; color: #d7f7ff; font-size: 11px; font-weight: 900; letter-spacing: 0.7px; text-align: center; text-transform: uppercase; } .cmg-dock-tab.is-active, .cmg-customizer-tabs button.is-active { border: 1px solid rgba(255, 241, 174, 0.32); } .cmg-color-dot.is-active { outline: 2px solid #fff; outline-offset: 2px; } .cmg-stick.is-active { border-color: rgba(255, 241, 174, 0.62); box-shadow: 0 0 26px rgba(244, 200, 106, 0.16), inset 0 1px 0 rgba(255,255,255,0.12); } .cmg-stick__action { color: #fff1ae; } /* Parent-facing language and trust polish in the conversion panel. */ .cmg-panel--moments { border-color: rgba(244, 200, 106, 0.24); } .cmg-moments__cta { min-height: 44px; } /* UX v3.1 — Reward Track refinement inside the existing right column. */ .cmg-profile-column--progress .cmg-reward-list { grid-template-columns: 1fr; gap: 10px; } .cmg-reward-group { display: grid; gap: 6px; } .cmg-reward-group__label { margin: 2px 0 0; color: #94a3b8; font-size: 10px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; } .cmg-profile-column--progress .cmg-reward { min-height: auto; } .cmg-profile-column--progress .cmg-reward::before, .cmg-profile-column--progress .cmg-reward::after { display: none; } .cmg-profile-column--progress .cmg-reward span { position: relative; left: auto; top: auto; display: inline-flex; width: fit-content; height: auto; min-height: 20px; padding: 4px 8px; place-items: initial; align-items: center; border-radius: 999px; transform: none; font-size: 9px; letter-spacing: 0.5px; line-height: 1; } .cmg-profile-column--progress .cmg-reward--hero { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; min-height: 136px; padding: 16px; border-color: rgba(255, 241, 174, 0.72); background: radial-gradient(circle at 18% 0%, rgba(255, 241, 174, 0.38), transparent 36%), linear-gradient(135deg, rgba(134, 82, 10, 0.88), rgba(3, 9, 22, 0.80) 62%), rgba(3, 9, 22, 0.70); box-shadow: 0 0 34px rgba(244, 200, 106, 0.20), 0 18px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .cmg-profile-column--progress .cmg-reward--hero span { grid-column: 1 / -1; border-color: rgba(255, 241, 174, 0.92); background: #fff1ae; color: #2b1b04; box-shadow: 0 0 24px rgba(255, 241, 174, 0.34); } .cmg-profile-column--progress .cmg-reward--hero i { display: grid; grid-row: span 3; width: 58px; height: 48px; margin: 0; place-items: center; border: 1px solid rgba(255, 241, 174, 0.45); border-radius: 14px; background: rgba(255, 241, 174, 0.14); color: #fff7cf; font-size: 13px; font-weight: 1000; font-style: normal; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .cmg-profile-column--progress .cmg-reward--hero strong { margin: 0; color: #fff; font-size: 20px; line-height: 1.05; text-align: left; } .cmg-profile-column--progress .cmg-reward--hero em { display: block; margin-top: 0; color: #fff7cf; font-size: 12px; line-height: 1.35; text-align: left; } .cmg-profile-column--progress .cmg-reward--hero b { width: fit-content; margin: 2px 0 0; padding: 6px 9px; border-radius: 999px; background: rgba(3, 9, 22, 0.34); color: #fff; font-size: 11px; } .cmg-profile-column--progress .cmg-reward--compact { display: grid; grid-template-columns: auto 1fr; gap: 5px 9px; align-items: center; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); box-shadow: none; text-align: left; } .cmg-profile-column--progress .cmg-reward--compact strong { margin: 0; color: #f8fafc; font-size: 13px; line-height: 1.15; text-align: left; } .cmg-profile-column--progress .cmg-reward--compact b { grid-column: 2; width: fit-content; margin: 0; padding: 0; background: transparent; color: #94a3b8; font-size: 11px; } .cmg-profile-column--progress .cmg-reward--compact.is-unlocked { border-color: rgba(93, 242, 164, 0.25); background: rgba(93, 242, 164, 0.055); animation: none; } .cmg-profile-column--progress .cmg-reward--compact.is-unlocked span { border-color: rgba(93, 242, 164, 0.42); background: rgba(93, 242, 164, 0.14); color: #dfffee; } .cmg-profile-column--progress .cmg-reward--compact.is-locked { opacity: 0.62; border-color: rgba(148, 163, 184, 0.13); } .cmg-profile-column--progress .cmg-reward--compact.is-locked span { border-color: rgba(148, 163, 184, 0.24); background: rgba(148, 163, 184, 0.10); color: #cbd5e1; } /* UX v4 — Delivery-first watch player polish. */ .cmg-watch-modal.is-open { backdrop-filter: blur(9px); } .cmg-watch-modal__panel { border-color: rgba(141, 232, 255, 0.24); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58), 0 0 34px rgba(54, 169, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .cmg-watch-modal__head { background: linear-gradient(90deg, rgba(54, 169, 255, 0.12), transparent 54%), rgba(3, 9, 22, 0.72); } .cmg-watch-modal__head .cmg-kicker { color: #8de8ff; } .cmg-watch-modal__navbtn, .cmg-profile-controls button, .cmg-profile-video-end button, .cmg-profile-video-end a { min-height: 42px; } .cmg-watch-modal__navbtn { border-color: rgba(141, 232, 255, 0.26); } .cmg-watch-modal__navbtn:nth-child(2) { border-color: rgba(93, 242, 164, 0.38); background: linear-gradient(135deg, rgba(93, 242, 164, 0.16), rgba(54, 169, 255, 0.10)), rgba(3, 9, 22, 0.68); color: #dfffee; } .cmg-profile-video-intro { background: radial-gradient(circle at 50% 42%, rgba(141, 232, 255, 0.20), transparent 36%), linear-gradient(180deg, rgba(2, 6, 23, 0.38), rgba(2, 6, 23, 0.88)); } .cmg-profile-video-intro strong { max-width: min(680px, 92%); } .cmg-profile-video-intro span { color: #e9f9ff; font-weight: 800; } .cmg-profile-video-intro--vault { background: radial-gradient(circle at 50% 42%, rgba(141, 232, 255, 0.12), transparent 34%), linear-gradient(180deg, rgba(2, 6, 23, 0.26), rgba(2, 6, 23, 0.78)); } .cmg-profile-video-intro--vault small { opacity: 0.72; } .cmg-profile-video-end__actions { width: min(560px, 92%); } .cmg-profile-video-end__actions > * { flex: 1 1 150px; } .cmg-watch-modal__rail button { min-height: 58px; border-color: rgba(186, 224, 255, 0.22); } .cmg-watch-modal__railhead { padding-top: 12px; } .cmg-watch-modal__label { letter-spacing: 1px; } .cmg-watch-modal__rail button.is-active { border-color: rgba(255, 241, 174, 0.62); box-shadow: 0 0 20px rgba(255, 241, 174, 0.10), 0 0 18px rgba(141, 232, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .cmg-watch-modal__rail strong { color: #fff; line-height: 1.18; } .cmg-watch-modal__rail span { max-width: 100%; overflow: hidden; color: #a9b7cb; text-overflow: ellipsis; white-space: nowrap; } .cmg-watch-modal__footerbar { background: linear-gradient(135deg, rgba(93, 242, 164, 0.10), rgba(54, 169, 255, 0.08)), rgba(3, 9, 22, 0.64); } .cmg-watch-modal__cta { min-height: 44px; border-color: rgba(255, 241, 174, 0.42); background: linear-gradient(135deg, rgba(255, 241, 174, 0.18), rgba(93, 242, 164, 0.12)), rgba(3, 9, 22, 0.54); color: #fff7cf; } .cmg-buy-box strong { color: #fff7cf; } @media (max-width: 560px) { .cmg-watch-modal { padding: 0; } .cmg-watch-modal__panel { width: 100%; min-height: 100dvh; max-height: 100dvh; border-radius: 0; overflow-x: hidden; overflow-y: auto; } .cmg-watch-modal__main, .cmg-watch-modal__viewer, .cmg-watch-modal__body, .cmg-profile-video-wrap, .cmg-profile-controls, .cmg-watch-modal__controls, .cmg-watch-modal__navrow { min-width: 0; max-width: 100%; overflow-x: hidden; } .cmg-watch-modal__head { position: sticky; top: 0; z-index: 4; padding: 10px 12px; } .cmg-watch-modal__head h2 { font-size: 22px; line-height: 1.05; } .cmg-watch-modal__close { width: 44px; height: 44px; } .cmg-profile-video, .cmg-profile-iframe { max-height: none; } .cmg-profile-video { height: auto; } .cmg-profile-video-intro, .cmg-profile-video-end { padding: 14px; } .cmg-profile-video-end strong { font-size: 24px; } .cmg-profile-video-intro strong { min-width: min(260px, 88%); font-size: 14px; } .cmg-profile-video-end__actions { grid-template-columns: 1fr; display: grid; gap: 8px; } .cmg-profile-video-end__actions > * { width: 100%; } .cmg-profile-video-end__upsell { gap: 6px; width: 100%; } .cmg-profile-video-end__upsell a { width: min(280px, 92%); } .cmg-profile-controls { gap: 9px; padding: 10px; box-sizing: border-box; width: 100vw !important; } .cmg-profile-controls button { min-height: 46px; } .cmg-watch-modal__controls { gap: 10px; box-sizing: border-box; width: 100vw !important; } .cmg-watch-modal__navrow { display: flex; flex-wrap: wrap; width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; } .cmg-watch-modal__navbtn { flex: 1 1 100%; min-height: 46px; padding: 0 4px; font-size: 12px; min-width: 0; } .cmg-watch-modal__rail { padding-right: 12px; padding-left: 12px; } .cmg-watch-modal__rail button { min-width: 150px; min-height: 64px; } } /* UX v8 — premium profile naming, rewards CTA, and tactile mobile polish. */ .cmg-reward-locker__hint { color: #f8e7a8; } .cmg-reward-group__label { color: #d7f7ff; letter-spacing: 0.7px; } .cmg-customizer-sheet.is-confirming .cmg-customizer-sheet__panel { transform: translateY(8px) scale(0.985); opacity: 0.92; } @media (max-width: 980px) { .cmg-reward-strip { position: sticky; top: 118px; z-index: 19; grid-template-columns: minmax(0, 1fr) minmax(138px, auto); width: auto; margin: 8px 12px 10px; padding: 7px; border: 1px solid rgba(255, 241, 174, 0.28); border-radius: 18px; background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(3, 9, 22, 0.97)), rgba(3, 9, 22, 0.92); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46), 0 0 32px rgba(255, 241, 174, 0.14), inset 0 1px 0 rgba(255,255,255,0.12); backdrop-filter: blur(18px); } .cmg-free-hook { min-height: 58px; padding: 9px 12px; border-radius: 14px; text-align: left; } .cmg-free-hook span { font-size: 9px; letter-spacing: 0.7px; } .cmg-free-hook strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #f8e7a8; font-size: 11px; } .cmg-mobile-buy-cta { min-height: 58px; padding: 0 12px; border-radius: 14px; font-size: 10px; line-height: 1.08; text-align: center; } .cmg-profile-tabs { top: 65px; } #cardSection, #clipVaultSection, #rewardLockerSection, #careerSection { scroll-margin-top: 210px; } } @media (max-width: 560px) { .cmg-reward-strip { top: 106px; grid-template-columns: minmax(0, 1fr) 126px; gap: 7px; margin: 6px 8px 10px; } .cmg-free-hook, .cmg-mobile-buy-cta { min-height: 54px; } .cmg-mobile-buy-cta { font-size: 9px; } } /* MVP cleanup: remove leftover XP pill from Best Value Pack */ .cmg-package-row a:last-child::after { content: none !important; display: none !important; }