/************************************************** * Global Design Tokens and Theme Variables **************************************************/ :root { scrollbar-width: thin; scrollbar-color: var(--accent, #a78bfa) transparent; --bg: #ffffff; --bg-rgb: 255, 255, 255; --card: #f9fafb; --card-rgb: 249, 250, 251; --text: #111827; --text-title: #000000; --text-body: #374151; --text-sub: #9ca3af; --sec: #6b7280; --accent-rgb: 167, 139, 250; --muted-rgb: 209, 213, 219; --muted: #d1d5db; --accent: #a78bfa; --gradient: linear-gradient(135deg, color-mix(in srgb, #a78bfa 80%, white), color-mix(in srgb, #7c3aed 80%, white)); --secondary-accent: #e0e7ff; --gold: #ffd700; --radius: clamp(8px, 1.5vw, 14px); --space: clamp(0.75rem, 1.5vw, 1rem); --dur: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ball: #000; --elegant-font: 'Playfair Display', 'SF Pro', 'Inter', serif; --modern-font: 'Poppins', 'SF Pro', 'Inter', sans-serif; --ok: #10b981; --warn: #f59e0b; --bad: #ef4444; --header-height: 4rem; --font-base: clamp(14px, 2vw, 16px); --line-height: 1.5; --btn-py: .6rem; --btn-px: .9rem; --btn-gap: .45rem; --btn-radius: var(--radius); --btn-shadow: 0 6px 16px rgba(0, 0, 0, .08); --btn-tr: var(--dur); --header-h: 72px; font-size: var(--font-base); line-height: var(--line-height); font-family: var(--modern-font); /* Add theme transitions for smoother changes */ transition: background var(--dur), color var(--dur); } /* =============================== THEME SYSTEM (Auto / Light / Dark) - Auto uses @media (prefers-color-scheme) - Manual sets [data-theme="light" | "dark"] on and .sw-profile - Modal inherits from root but can also be forced independently =============================== */ /* Base (Light) defaults — safe, readable, and complete */ :root { /* Tell the browser we support both for native controls */ color-scheme: light dark; /* Keep both a solid and a gradient for flexibility */ --bg-color: #ffffff; --bg: linear-gradient(135deg, #ffffff, #f7f7fb); --bg-rgb: 255, 255, 255; --card: #f9fafb; --card-rgb: 249, 250, 251; --text: #111827; --text-title: #000000; --text-body: #374151; --text-sub: #6b7280; --accent: #7c3aed; /* brand purple */ --accent-rgb: 124, 58, 237; --secondary-accent: #e0e7ff; /* subtle indigo surface */ --ok: #10b981; --warn: #b45309; --bad: #ef4444; --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ball: #000; /* e.g., toggle knob */ --elegant-font: 'Playfair Display', 'SF Pro', 'Inter', serif; --modern-font: 'Poppins', 'SF Pro', 'Inter', sans-serif; /* Quality of life */ --radius: clamp(8px, 1.5vw, 14px); --space: clamp(0.75rem, 1.5vw, 1rem); --dur: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── AUTO DARK: only when NO manual override is set ─────────────── */ /* Applies to root and .sw-profile to keep them in lockstep. */ @media (prefers-color-scheme: dark) { :is(:root, .sw-profile):not([data-theme]) { color-scheme: dark; --bg-color: #0f172a; /* slate-900-ish for solid fills */ --bg: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.85)); --bg-rgb: 17, 24, 39; --card: #1f2937; --card-rgb: 31, 41, 55; --text: #f9fafb; --text-title: #ffffff; --text-body: #d1d5db; --text-sub: #9ca3af; --accent: #a78bfa; /* brighten accent slightly in dark */ --accent-rgb: 167, 139, 250; --secondary-accent: #312e81; --ok: #10b981; --warn: #fbbf24; --bad: #ef4444; --shadow: 0 8px 22px rgba(0, 0, 0, 0.35); --ball: #fff; } } /* ── MANUAL DARK: force dark regardless of system ──────────────── */ :is([data-theme="dark"], .sw-profile[data-theme="dark"]) { color-scheme: dark; --bg-color: #0f172a; --bg: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.85)); --bg-rgb: 17, 24, 39; --card: #1f2937; --card-rgb: 31, 41, 55; --text: #f9fafb; --text-title: #ffffff; --text-body: #d1d5db; --text-sub: #9ca3af; --accent: #a78bfa; --accent-rgb: 167, 139, 250; --secondary-accent: #312e81; --ok: #10b981; --warn: #fbbf24; --bad: #ef4444; --shadow: 0 8px 22px rgba(0, 0, 0, 0.35); --ball: #fff; } /* ── MANUAL LIGHT: force light regardless of system ────────────── */ :is([data-theme="light"], .sw-profile[data-theme="light"]) { color-scheme: light; --bg-color: #ffffff; --bg: linear-gradient(135deg, #ffffff, #f7f7fb); --bg-rgb: 255, 255, 255; --card: #f9fafb; --card-rgb: 249, 250, 251; --text: #111827; --text-title: #000000; --text-body: #374151; --text-sub: #6b7280; --accent: #7c3aed; /* your original brand accent */ --accent-rgb: 124, 58, 237; --secondary-accent: #e0e7ff; --ok: #047857; /* slightly deeper green in light */ --warn: #b45309; --bad: #dc2626; --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ball: #000; } /* =============================== DARK-MODE FIXES FOR RICH TEXT (“.text-content”) - Normalize third-party inline styles when dark is active - Keep specificity low with :where() =============================== */ :where(html[data-theme="dark"]) .text-content :where([style*="background:rgba(0,0,0,.03)"], [style*="background:#fafafa"], [style*="background:#fff"], [style*="background: #fff"]) { background: var(--card, #1f2937) !important; } :where(html[data-theme="dark"]) .text-content :where([style*="border:1px solid rgba(0,0,0,.08)"], [style*="border:1px solid rgba(0,0,0,.06)"], [style*="border: 1px solid rgba(0,0,0,.08)"], [style*="border: 1px solid rgba(0,0,0,.06)"], [style*="border:1px solid var(--accent)"]) { border-color: rgba(255, 255, 255, .15) !important; } :where(html[data-theme="dark"]) .text-content pre { background: #2a2a2a !important; color: #e0e0e0 !important; } :where(html[data-theme="dark"]) .text-content :where(em, p[style*="color:inherit"], [style*="color:var(--accent)"], [style*="color:#fff"], [style*="color: #fff"]) { color: var(--text, #f9fafb) !important; } :where(html[data-theme="dark"]) .text-content table :where(tr td, tr th) { border-color: rgba(255, 255, 255, .1) !important; } :where(html[data-theme="dark"]) .text-content thead th { background: rgba(255, 255, 255, .05) !important; } :where(html[data-theme="dark"]) .text-content :where(summary, summary span[style*="border:1px solid var(--accent)"]) { background: var(--card, #1f2937) !important; color: var(--text, #f9fafb) !important; border-color: rgba(255, 255, 255, .15) !important; } /************************************************** * Global Resets and Base Layout **************************************************/ /* Base HTML and body styles for full-height layout and centered content, with safe-area insets for iOS devices. */ html, body { height: 100%; margin: 0; overflow: hidden; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); font-size-adjust: 0.5; } body { background: var(--bg, #ffffff); color: var(--text, #111827); font-family: 'Inter', sans-serif; display: flex; justify-content: center; align-items: center; transition: background var(--dur); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Blurred background image for depth, with dark mode adjustment for contrast. */ html::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; filter: blur(15px); z-index: -2; } html[data-theme="dark"]::before { filter: blur(15px) brightness(0.7); } /* Global box-sizing and tap highlight resets for consistent rendering across devices. */ *, *::before, *::after { box-sizing: border-box; } * { -webkit-tap-highlight-color: transparent; } /************************************************** * Animation Keyframes **************************************************/ /* Keyframe animations for subtle interactions, ensuring smooth, Apple-like motion. */ /* Consolidated similar animations where possible for efficiency. */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes text-shimmer { 0% { background-position: 0% 0%; } 100% { background-position: -300% 0%; } } @keyframes kenburns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.2) translate(5%, 5%); } } @keyframes pulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); } } @keyframes heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes float-heart { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-50px) rotate(15deg); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes code-flash { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-accent) 35%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } } @keyframes pulse-loading { 0% { opacity: 0.5; } 50% { opacity: 0.8; } 100% { opacity: 0.5; } } @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } @keyframes bounce-glow { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); } 50% { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.5); } } /************************************************** * Component Styles: Swipewise Profile (swp- namespace) **************************************************/ /* Namespaced styles for the Swipewise profile component, ensuring isolation. */ .swp-wrapper { padding: 8px 4px 16px; } .swp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 4px 12px; } .swp-title { font: 800 28px/1.1 ui-sans-serif, system-ui; color: #7c5cff; } .swp-sub { color: #7f8aa4; font: 600 14px/1.3 ui-sans-serif, system-ui; } .swp-buy { border: 1px solid #e1e4ef; background: #fff; border-radius: 12px; padding: 8px 14px; font: 700 14px/1 ui-sans-serif; cursor: pointer; } .swp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 4px 14px; } .swp-tile { background: #fff; border: 1px solid #e7eaf5; border-radius: 16px; padding: 14px 16px; } .swp-tl { color: #8a96ac; font: 700 12px/1 ui-sans-serif; margin-bottom: 6px; } .swp-tv { font: 800 28px/1 ui-sans-serif; color: #0f1422; } .swp-progress { position: relative; background: #f6f7fb; border: 1px solid #e7eaf5; border-radius: 16px; padding: 14px 16px; margin: 2px 4px 14px; } .swp-progress-label { font: 700 14px/1 ui-sans-serif; color: #6a7390; margin-bottom: 8px; } .swp-progress-bar { height: 8px; background: #e7ecf7; border-radius: 999px; overflow: hidden; } .swp-progress-fill { height: 100%; background: #cfc6ff; } .swp-progress-chip { position: absolute; right: 12px; top: 10px; background: #fff; border: 1px solid #e1e4ef; padding: 4px 10px; border-radius: 999px; font: 800 12px/1 ui-sans-serif; color: #5b6280; } .swp-tabs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 4px; } .swp-tab { border: 1px solid #dfdff3; background: #f7f7ff; color: #5f49e5; font: 800 14px/1 ui-sans-serif; padding: 8px 14px; border-radius: 22px; cursor: pointer; } .swp-tab.is-active { background: #ece8ff; border-color: #d7d0ff; } .swp-submit { margin-left: auto; border: 1px solid #d9e0f2; background: #fff; border-radius: 12px; padding: 8px 14px; font: 700 14px/1 ui-sans-serif; } .swp-panel { display: none; padding: 6px 0; } .swp-panel.is-active { display: block; } .swp-list { display: grid; gap: 12px; padding: 6px 4px; } .swp-item { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e7eaf5; border-radius: 16px; padding: 12px 14px; } .swp-item-title { font: 700 16px/1.2 ui-sans-serif, system-ui; color: #0f1422; } .swp-unpin { border: 1px solid #e1e4ef; background: #fff; border-radius: 12px; padding: 8px 14px; font: 700 14px/1 ui-sans-serif; cursor: pointer; } .swp-empty { color: #8a96ac; font: 600 14px/1.3 ui-sans-serif; padding: 10px; text-align: center; } .swp-danger { border: 1px solid #ffd3d3; background: #fff5f5; color: #9b1c1c; border-radius: 12px; padding: 10px 14px; font: 800 14px/1 ui-sans-serif; cursor: pointer; } /************************************************** * Component Styles: SW Auth Offer (sw-auth namespace) **************************************************/ /* Isolated styles for authentication overlay and modal, with smooth transitions for entry/exit. */ .sw-auth-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 10000; } .sw-auth-overlay.active { opacity: 1; visibility: visible; } .sw-auth-modal { position: relative; width: min(92vw, 460px); background: #0b1320; color: #eef2ff; border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); border: 1px solid #23314f; } .sw-auth-close { position: absolute; right: 10px; top: 10px; background: transparent; border: 0; color: #9aa3b2; font-size: 22px; cursor: pointer; } .sw-auth-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .sw-auth-icon { width: 36px; height: 36px; border-radius: 10px; background: #111a2e; display: grid; place-items: center; font-weight: 800; } .sw-auth-title { margin: 0 0 4px; font: 800 20px/1.2 ui-sans-serif, system-ui; } .sw-auth-sub { margin: 0; color: #a8b3c7; font: 500 14px/1.5 ui-sans-serif, system-ui; } .sw-auth-benefits { margin: 10px 0 12px; padding-left: 18px; color: #c6d0e3; } .sw-auth-benefits li { margin: 4px 0; font: 500 13px/1.4 ui-sans-serif, system-ui; } .sw-auth-actions { display: grid; gap: 10px; margin-top: 6px; } .sw-auth-btn { border: 1px solid #2e3b59; background: #0f182b; color: #e8ecff; border-radius: 12px; padding: 12px 14px; font: 700 14px/1 ui-sans-serif; cursor: pointer; } .sw-auth-btn:hover { background: #121c34; } .sw-auth-primary { background: #6c5ce7; border-color: #6c5ce7; color: #fff; } .sw-auth-primary:hover { filter: brightness(.95); } .sw-auth-link { background: none; border: 0; color: #9aa3b2; text-decoration: underline; cursor: pointer; justify-self: center; font: 600 13px/1.2 ui-sans-serif; } .sw-auth-note { margin: .5rem 0 0; color: #8f9ab2; font: 500 12px/1.4 ui-sans-serif, system-ui; text-align: center; } /************************************************** * Component Styles: Global Theme Toggle **************************************************/ /* Theme toggle switch with bounce animation for playful interaction. */ .global-theme-toggle { position: absolute; top: 1rem; left: 0.8rem; z-index: 998; display: flex; align-items: center; gap: 0.5rem; pointer-events: auto; } .global-theme-toggle input { position: absolute; opacity: 0; width: 40px; height: 20px; cursor: pointer; appearance: none; } .global-theme-toggle label { width: 40px; height: 20px; background: var(--muted, #d1d5db); border-radius: 9999px; cursor: pointer; position: relative; transition: background 0.3s ease; box-shadow: var(--shadow); } .global-theme-toggle label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--ball, #000); border-radius: 50%; transition: left 0.3s ease; animation: bounce 1.5s ease-in-out infinite; } .global-theme-toggle input:checked+label::after { left: 22px; } .streak-icon { width: 1.5rem; height: 1.5rem; fill: var(--accent, #a78bfa); } #streak-count-mini { font-size: 0.8rem; font-weight: bold; color: var(--warn, #f59e0b) !important; line-height: 1; } [data-theme="light"] #streak-count-mini { color: #f59e0b !important; } /************************************************** * Component Styles: Account Pill **************************************************/ /* Account pill for displaying user info, with light/dark mode adaptations. */ .account-pill { position: absolute; top: 1rem; right: 1rem; z-index: 800; background: #0e1422; color: #e9ecff; border: 1px solid #273149; border-radius: 999px; height: 28px; padding: 0; inline-size: auto; display: inline-flex; align-items: center; gap: 0; font: 700 14px/1 system-ui, sans-serif; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 16px rgba(0, 0, 0, .20); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; pointer-events: auto; user-select: none; backdrop-filter: none; cursor: pointer; } .account-pill:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 22px rgba(0, 0, 0, .28); border-color: #2b3653; } /* Light mode overrides for account pill. */ [data-theme="light"] .account-pill { background: #fff; color: #0f1422; border: 1px solid #e1e4ef; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .04), 0 6px 16px rgba(0, 0, 0, .08); } [data-theme="light"] .account-pill:hover { border-color: #d9e0f2; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05), 0 10px 22px rgba(0, 0, 0, .12); } .account-pill .pill-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; padding: 0 .55rem; line-height: 1; background: transparent; border: 0; border-radius: 999px; white-space: nowrap; font: 700 12px/1 system-ui, sans-serif; } .account-pill .pill-btn:focus { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; } .account-pill .pill-divider { width: 1px; height: 18px; background: #3a4464; opacity: .8; margin: 0 .1rem; } [data-theme="light"] .account-pill .pill-divider { background: #e1e4ef; } .pill-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 system-ui, sans-serif; color: #fff; background: radial-gradient(100% 100% at 30% 20%, #9a7bff 0%, #6f4aff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(111, 74, 255, .45); border: 1px solid rgba(255, 255, 255, .20); } .pill-credits { font-variant-numeric: tabular-nums; } .pill-credits .currency { display: inline-block; transform: translateY(-.5px); opacity: .95; } #credits-balance { font-weight: 700; } .pill-label { font-size: 11px; font-weight: 600; opacity: 0.85; } @media (max-width: 480px) { .pill-label { display: none; } } /************************************************** * Mini Ribbon & Chips — polished, fast, accessible **************************************************/ /* Define ribbon vars in :root for easy access */ :root { --ribbon-h: 64px; --chip-h: 26px; --chip-minw: 64px; --chip-pad-x: 0.6rem; --chip-pad-right: 1.5rem; --chip-fs: 0.64rem; --chip-fs-active: 0.68rem; --edge-fade: 64px; --glow: 0 0 18px rgba(167, 139, 250, .45); --glow-strong: 0 0 24px rgba(167, 139, 250, .6); } /* Ribbon shell */ .mini-ribbon { position: absolute; inset-inline: 0; height: var(--ribbon-h); z-index: 790; pointer-events: none; touch-action: none; /* Subtle glass strip behind the chips for contrast */ background: linear-gradient(to bottom, rgba(var(--card-rgb), .00), rgba(var(--card-rgb), .12) 35%, rgba(var(--card-rgb), .00)); backdrop-filter: blur(6px) saturate(1.05); -webkit-backdrop-filter: blur(6px) saturate(1.05); overflow: hidden; } /* Scroller */ .ribbon-container { display: flex; align-items: center; gap: .75rem; height: 100%; padding: 4px calc(50% - 32px) 8px; /* centers row under hero/card */ overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 32px; -webkit-overflow-scrolling: touch; pointer-events: auto; scrollbar-width: none; mask-image: linear-gradient(to right, transparent 0, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent); -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent); touch-action: pan-x pinch-zoom; } .ribbon-container::-webkit-scrollbar { display: none; } /* Chip base */ .mini-ribbon .chip { flex: 0 0 auto; min-width: var(--chip-minw); height: var(--chip-h); padding: 0 var(--chip-pad-right) 0 var(--chip-pad-x); display: inline-flex; align-items: center; justify-content: center; gap: .4ch; font: 600 var(--chip-fs)/1 var(--modern-font, ui-sans-serif); letter-spacing: .015em; color: var(--text, #111827); text-overflow: ellipsis; white-space: nowrap; background: color-mix(in oklab, rgb(var(--card-rgb)) 92%, transparent); border: 1px solid rgba(167, 139, 250, .16); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; position: relative; isolation: isolate; will-change: transform, filter; transition: transform var(--dur) ease, box-shadow var(--dur) ease, background-color .25s ease, border-color .25s ease, opacity .25s ease; } /* Hover/press micro-motion */ .mini-ribbon .chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .12), var(--glow); } .mini-ribbon .chip:active { transform: translateY(0) scale(.98); } /* Focus ring (keyboard) */ .mini-ribbon .chip:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent), var(--glow); } /* Content text (auto clamp) */ .mini-ribbon .chip .chip-text { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; } /* Preview mode (image/video thumb as chip background) */ .mini-ribbon .chip .preview { position: absolute; inset: 0; border-radius: inherit; clip-path: inset(0 round var(--radius)); width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; filter: saturate(1.1) contrast(1.02); } .mini-ribbon .chip.has-preview .chip-text { display: none; } .mini-ribbon .chip:not(.has-preview) .chip-text { display: block; } /* Active chip (selected) */ .mini-ribbon .chip.active { transform: translateY(-2px) scale(1.06); background: var(--secondary-accent); border-color: var(--gold); box-shadow: 0 10px 20px rgba(0, 0, 0, .14), var(--glow-strong); z-index: 10; font-size: var(--chip-fs-active); } .mini-ribbon .chip.active:not(.has-preview) .chip-text { background: linear-gradient(90deg, var(--text), var(--accent), var(--text)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: text-shimmer 2.6s linear infinite; } .mini-ribbon .chip.active .preview { animation: kenburns 7s ease-in-out infinite alternate; } /* Pinned chip badge */ .mini-ribbon .chip .pin-icon { position: absolute; inset: -6px -6px auto auto; /* top/right */ width: 14px; height: 14px; display: grid; place-items: center; background: var(--card); border-radius: 50%; border: 1px solid rgba(167, 139, 250, .25); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 21; pointer-events: auto; transition: transform .15s ease; } .mini-ribbon .chip .pin-icon:hover { transform: scale(1.08); } .mini-ribbon .chip .pin-icon svg { width: 8px; height: 8px; fill: #FFD700; } .mini-ribbon .chip.pinned { background: color-mix(in oklab, var(--secondary-accent) 85%, transparent); border-color: var(--gold); box-shadow: 0 10px 20px rgba(0, 0, 0, .14), 0 0 16px rgba(255, 215, 0, .3); } /* Caption under chip */ .mini-ribbon .chip-caption { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-sub); line-height: 1; max-width: 96px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; pointer-events: none; opacity: .95; transition: opacity .25s ease, transform .25s ease; } .mini-ribbon .chip.pinned .chip-caption { max-width: 80px; } /* Close “x” intentionally hidden for this component (kept for API parity) */ .mini-ribbon .chip .close-chip { display: none !important; } /* Height normalizer (avoid duplicate declarations) */ .mini-ribbon { height: var(--ribbon-h); } .ribbon-container { padding-bottom: 8px; } @keyframes text-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } } /* Motion safety */ @media (prefers-reduced-motion: reduce) { .ribbon-container { scroll-behavior: auto; } .mini-ribbon .chip, .mini-ribbon .chip.active { transition: none; } .mini-ribbon .chip.active .preview { animation: none; } .mini-ribbon .chip.active:not(.has-preview) .chip-text { animation: none; } } /* High-contrast safety (if your theme exposes these vars) */ @media (prefers-contrast: more) { .mini-ribbon .chip { border-color: color-mix(in oklab, var(--accent) 40%, rgba(167, 139, 250, .24)); } .mini-ribbon .chip:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 85%, transparent), 0 0 0 7px color-mix(in oklab, var(--accent) 45%, transparent); } } /************************************************** * Component Styles: Categories Dropdown **************************************************/ /* Dropdown for categories with smooth animations and scroll support. */ .categories-dropdown { position: fixed; left: 1rem; top: calc(1rem + 2.4rem + 0.2rem); background: rgba(var(--card-rgb), 0.95); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 0.8rem 0; opacity: 0; transform: translateY(-10px) scale(0.98); transition: opacity var(--dur) ease, transform var(--dur) ease; pointer-events: none; z-index: 799; max-height: 60vh; overflow-y: auto; width: 220px; border: 1px solid rgba(var(--muted-rgb), 0.15); backdrop-filter: blur(12px); } .categories-dropdown.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .categories-dropdown .category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; } .categories-dropdown .category-item { padding: 0.65rem 1.25rem; text-align: left; cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: background var(--dur) ease, color var(--dur) ease, padding-left var(--dur) ease; color: var(--text, #111827); } .categories-dropdown .category-item:hover, .categories-dropdown .category-item.active { background: var(--secondary-accent, #e0e7ff); color: var(--accent, #7c3aed); padding-left: 1.5rem; } .categories-dropdown .category-item.active { font-weight: 700; } /* Footer-docked placement for the Categories dropdown */ .categories-dropdown.from-footer { z-index: 1001; /* above .slim-footer (which is z-index: 800) */ transform: translateY(0) scale(1); /* ensure visible without extra shift */ opacity: 1; pointer-events: auto; } /************************************************** * Component Styles: Main Wrapper and Carousel **************************************************/ /* Main content wrapper and carousel for horizontal scrolling cards. */ .wrapper { height: 100vh; width: 100%; max-width: 700px; position: relative; display: flex; justify-content: center; align-items: flex-start; padding-bottom: 3rem; box-sizing: border-box; overscroll-behavior: contain; /* Apple-like rubber-band effect */ } .carousel { display: flex; align-items: center; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: calc(var(--space)*1.5); padding: 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: pan-x; margin-top: 1rem; } .carousel::-webkit-scrollbar { display: none; } /************************************************** * Component Styles: Card **************************************************/ /* Card component for content display, with hover effects and borders for polish. */ .card { flex: 0 0 80%; max-width: 420px; height: 80%; background: var(--card, #f9fafb); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 20px rgba(167, 139, 250, .2); scroll-snap-align: center; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform var(--dur), opacity var(--dur), filter var(--dur), box-shadow var(--dur); will-change: transform, opacity; border: 1px solid rgba(167, 139, 250, .1); content-visibility: auto; backdrop-filter: blur(4px); } .card.category-hidden { display: none !important; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); opacity: 0; transition: opacity var(--dur); } .card:hover::before { opacity: 1; } .card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04), 0 0 40px rgba(167, 139, 250, .3); } .card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); pointer-events: none; } .card.highlight { box-shadow: 0 0 30px var(--accent, #a78bfa), var(--shadow); } /* Card header with icons for interactions. */ .card-header { position: absolute; top: var(--space); left: var(--space); right: var(--space); display: flex; justify-content: space-between; align-items: flex-start; z-index: 5; flex-direction: column; gap: 0.5rem; } .card-header-top { width: 100%; display: flex; justify-content: space-between; align-items: center; } .card-header .lock-btn, .card-header .bookmark-btn, .card-header .share-btn, .card-header .pin-btn { width: 1.8rem; height: 1.8rem; fill: var(--sec, #6b7280); cursor: pointer; transition: fill var(--dur), transform var(--dur); min-height: 36px; min-width: 36px; } .card-header .lock-btn:hover svg { fill: var(--accent, #a78bfa); } .card-header .share-btn:hover svg { fill: var(--ok, #10b981); } .card-header .bookmark-btn.bookmarked svg { fill: var(--accent, #a78bfa); } .card-header .pin-btn.pinned svg { fill: var(--warn, #f59e0b); } .card-header .lock-btn:hover { fill: var(--accent, #a78bfa); transform: scale(1.1); } .card-header .bookmark-btn:hover { fill: var(--accent, #a78bfa); transform: scale(1.1); } .bookmark-btn.bookmarked { fill: var(--accent, #a78bfa); } .share-btn:hover { fill: var(--ok, #10b981); transform: scale(1.1); } .pin-btn:hover { fill: var(--warn, #f59e0b); transform: scale(1.1); } .pin-btn.pinned { fill: var(--warn, #f59e0b); } .card-header .right { display: flex; gap: 0.3rem; } .card-header .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid rgba(167, 139, 250, .2); box-shadow: var(--shadow); transition: transform var(--dur), background var(--dur), border-color var(--dur); } .card-header .icon-btn:hover { transform: translateY(-1px); background: var(--secondary-accent, #e0e7ff); border-color: rgba(167, 139, 250, .35); } .card-header .icon-btn svg { width: 16px; height: 16px; fill: var(--sec, #6b7280); } .card-header .icon-btn.is-active svg { fill: var(--accent, #a78bfa); } .card-header-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; } .card-header-top .left { display: flex; align-items: center; gap: .5rem; min-width: 0; } .category-chip { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem; height: 32px; border-radius: 8px; background: transparent; border: 1px solid rgba(167, 139, 250, .2); box-shadow: var(--shadow); font-size: .7rem; font-weight: 700; color: var(--accent, #a78bfa); white-space: nowrap; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; transition: none; cursor: default; } .category-chip:hover { transform: translateY(-1px); background: var(--secondary-accent, #e0e7ff); border-color: rgba(167, 139, 250, .35); color: var(--accent, #a78bfa); } @media (max-width: 480px) { .category-chip { max-width: 9rem; font-size: .68rem; } } /* Card content with locking and blur effects for premium content. */ .card-content { position: relative; flex: 1; overflow: auto; transition: filter var(--dur); display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 1rem; } .card-content.locked img, .card-content.locked video, .card-content.locked .text-content { filter: blur(5px); opacity: 0.8; visibility: visible; } .card:hover .card-content { filter: brightness(1.05); } .card-content img, .card-content video { width: 100%; max-height: 60%; object-fit: contain; position: relative; z-index: 1; margin-bottom: 1rem; } .card-content .text-content { position: relative; padding: calc(var(--space)*1.5) calc(var(--space)*1.5); font-size: 1.1rem; line-height: 1.8; color: var(--text-body, #374151); letter-spacing: .01em; white-space: pre-line; z-index: 1; } .card-content .text-content>*:not(:last-child) { margin-bottom: calc(var(--space) * 1.25); border-bottom: 1px solid var(--muted, #d1d5db); padding-bottom: calc(var(--space) * 1.25); } .blur-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .7)); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity var(--dur); z-index: 2; padding-top: 4rem; box-sizing: border-box; } [data-theme="dark"] .blur-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .7)); } .blur-overlay.hidden { opacity: 0; pointer-events: none; } .unlock-btn { background: var(--gradient); color: #fff; border: none; padding: 1rem 2rem; border-radius: var(--radius); cursor: pointer; font-weight: 700; letter-spacing: .03em; font-size: 1rem; transition: transform var(--dur), background var(--dur); box-shadow: var(--shadow); z-index: 3; min-height: 48px; } .unlock-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(0.9); } .card { --header-h: 72px; } .card-header { position: absolute; inset: var(--space) var(--space) auto var(--space); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .card-header-top { gap: .5rem; } .card-content { padding-top: calc(var(--header-h) + .5rem); } /* Card info section with like button and animations. */ .track-info { flex-shrink: 0; padding: var(--space) calc(var(--space)*1.5); position: relative; } .track-info h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: .4rem; font-family: var(--elegant-font); letter-spacing: -.02em; color: var(--text-title, #000000); padding-right: 2.5rem; } .track-info .like-btn { position: absolute; top: 50%; right: calc(var(--space)*1.5); transform: translateY(-50%); width: 1.8rem; height: 1.8rem; fill: var(--sec, #6b7280); cursor: pointer; transition: fill var(--dur), transform var(--dur); min-height: 44px; min-width: 44px; } .heart-animation { position: absolute; width: 1rem; height: 1rem; fill: #ef4444; animation: float-heart 1s ease-out forwards; pointer-events: none; } .track-info p { color: var(--text-sub, #6b7280); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-family: var(--modern-font); } .track-info .like-btn:hover { transform: scale(1.1); } .track-info .like-btn.liked { fill: #ef4444; } .track-info .like-btn:active { animation: heart-pop 0.5s ease; } .footer-btn { flex-shrink: 0; width: 100%; padding: var(--space); background: var(--muted, #d1d5db); color: var(--text, #111827); text-align: center; font-weight: 700; cursor: pointer; transition: background var(--dur), color var(--dur); letter-spacing: .02em; font-size: 1rem; z-index: 3; min-height: 48px; border-radius: var(--radius); } .footer-btn:hover { background: var(--gradient); color: #fff; filter: brightness(0.9); } /************************************************** * Component Styles: Navigation Buttons **************************************************/ /* Navigation buttons for carousel with hover scaling. */ .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .9); color: var(--accent, #a78bfa); border: none; padding: 1rem; cursor: pointer; border-radius: var(--radius); z-index: 10; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: background var(--dur), color var(--dur), transform var(--dur); touch-action: manipulation; min-height: 48px; min-width: 48px; } [data-theme="dark"] .nav-btn { background: rgba(31, 41, 55, .9); } .nav-btn:hover { background: var(--accent, #a78bfa); color: #fff; transform: translateY(-50%) scale(1.05); /* keep translate + gentle scale */ filter: brightness(0.9); } .nav-btn:active { transform: translateY(-50%) scale(1); /* no zoom on press */ transition: background var(--dur), color var(--dur); /* don't animate transform on click */ } .nav-prev { left: .5rem; } .nav-next { right: .5rem; } .nav-btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } /************************************************** * Component Styles: Pagination Dots **************************************************/ /* Pagination dots for carousel navigation, currently hidden. */ .pagination { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; display: none; } .dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--muted, #d1d5db); border: none; cursor: pointer; transition: background var(--dur); min-height: 44px; min-width: 44px; } .dot.active, .dot:hover { background: var(--accent, #a78bfa); } /************************************************** * Component Styles: Modal Overlay and Content **************************************************/ /* Modal overlay + modal (fixed height with inner scrolling) */ /* Overlay */ .modal-overlay { position: fixed; inset: 0; display: grid; /* center modal */ place-items: center; padding: 12px; /* gutter around modal */ background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 10000; } .modal-overlay.active, .modal-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; } /* Modal shell (fixed height, inner scroll) */ .modal { position: relative; width: min(640px, 94vw); max-height: 72vh; /* keeps modal off full screen */ background: rgba(var(--card-rgb), .98); color: var(--text, #111827); border-radius: calc(var(--radius) * 1.5); border: 1px solid rgba(var(--muted-rgb), .12); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); backdrop-filter: blur(12px); padding: calc(var(--space)*1.4); display: flex; /* header on top, list fills */ flex-direction: column; overflow-y: auto !important; } /* Sticky header/title (works for simple h2 or sheet header) */ .modal>h2, .modal .sheet-hdr { position: sticky; top: 0; z-index: 2; background: var(--card, #f9fafb); margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--muted, #d1d5db); padding-right: 44px; /* space for close button */ } /* Scrollable content areas */ .modal .bookmark-list, .modal .liked-list, .modal .pinned-list, .modal .list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; /* take remaining height */ min-height: 0; /* allow flex child to shrink */ overflow-y: auto; /* scroll inside modal */ -webkit-overflow-scrolling: touch; } /* Close button */ .modal .close-btn { position: absolute; /* top-right of modal */ top: 8px; right: 8px; z-index: 3; font-size: 1.4rem; background: none; border: 0; cursor: pointer; color: var(--sec, #6b7280); transition: color var(--dur); } .modal .close-btn:hover { color: var(--accent, #a78bfa); } /* If the close button lives inside the sheet header */ .modal.sheet .sheet-hdr { position: sticky; top: 0; } .modal.sheet .sheet-hdr .close-btn { position: absolute; top: 8px; right: 8px; } /* Short screens: cap a bit more */ @media (max-height: 740px) { .modal { max-height: 65vh; } } .bookmark-modal .bookmark-list, .profile-modal .list { list-style: none; padding: 0; margin: 0; } .bookmark-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--muted, #d1d5db); cursor: pointer; } .bookmark-item:last-child { border-bottom: none; } .bookmark-item h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; transition: color var(--dur); color: var(--text-title, #000000); } .bookmark-item h3:hover { color: var(--accent, #a78bfa); } .muted { color: var(--text-sub, #6b7280); font-size: 13px; margin-top: 8px; text-align: center; } /************************************************** * Component Styles: Icon Button **************************************************/ /* Generic icon button with hover scaling. */ .icon-btn { border: none; background: transparent; cursor: pointer; padding: .25rem; border-radius: var(--radius); transition: transform var(--dur), background var(--dur); min-height: 48px; min-width: 48px; } .icon-btn:hover { transform: scale(1.05); background: var(--secondary-accent, #e0e7ff); } .icon-btn svg { width: 1.05rem; height: 1.05rem; fill: var(--accent, #a78bfa); } /************************************************** * Component Styles: Profile Header **************************************************/ /* Profile header with avatar and meta info. */ .profile-header { display: flex; gap: .9rem; align-items: center; margin-bottom: .9rem; padding: .8rem; border-radius: var(--radius); background: var(--secondary-accent, #e0e7ff); border: 1px solid rgba(167, 139, 250, .2); } .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--elegant-font); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); } .profile-meta { flex: 1; min-width: 0; } .profile-title { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-title, #000000); } .profile-sub { margin: .15rem 0 0; color: var(--text-sub, #6b7280); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /************************************************** * Component Styles: Stats Cards **************************************************/ /* Grid of stat cards for user metrics. */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .6rem 0 1rem; } .stat-card { background: var(--card, #f9fafb); border: 1px solid rgba(167, 139, 250, .2); border-radius: var(--radius); padding: .55rem .65rem; text-align: center; box-shadow: var(--shadow); } .stat-card .num { font-size: 1.05rem; font-weight: 800; color: var(--text-title, #000000); } .stat-card .lbl { font-size: .7rem; color: var(--text-sub, #6b7280); } /************************************************** * Component Styles: Tabs **************************************************/ /* Tab navigation with active state highlighting. */ .tabs { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-bottom: .7rem; } .tab-btn { border: none; border-radius: var(--radius); padding: .5rem .9rem; font-weight: 700; cursor: pointer; background: var(--secondary-accent, #e0e7ff); color: var(--text, #111827); border: 1px solid rgba(167, 139, 250, .25); transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur); font-size: .85rem; min-height: 48px; } .tab-btn.active { box-shadow: 0 0 0 2px rgba(167, 139, 250, .35) inset; } .tab-panel { display: none; } .tab-panel.active { display: block; } /************************************************** * Component Styles: Grid List and Rows **************************************************/ /* Grid list for tabular data. */ .grid-list { display: grid; grid-template-columns: 1fr; gap: .4rem; } .row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .35rem; border-bottom: 1px dashed rgba(167, 139, 250, .25); } .row:last-child { border-bottom: none; } .category-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; } .category-item { padding: .55rem .7rem; border-radius: var(--radius); text-align: center; cursor: pointer; font-weight: 700; font-size: .9rem; background: var(--secondary-accent, #e0e7ff); border: 1px solid rgba(167, 139, 250, .25); transition: transform var(--dur), box-shadow var(--dur); } .category-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); } /************************************************** * Component Styles: Premium Card **************************************************/ /* Card for premium features promotion. */ .premium-card { margin-top: .4rem; padding: .8rem; border-radius: var(--radius); background: var(--secondary-accent, #e0e7ff); border: 1px solid rgba(167, 139, 250, .25); text-align: center; } .premium-btn { margin-top: .45rem; background: var(--gradient); color: #fff; border: none; padding: .75rem 1.2rem; border-radius: var(--radius); cursor: pointer; transition: transform var(--dur), box-shadow var(--dur); min-height: 48px; } .premium-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(0.9); } /************************************************** * Component Styles: PIN Form **************************************************/ /* Form for PIN input. */ .pin-form { display: flex; flex-direction: column; align-items: center; gap: .8rem; } .pin-input { padding: .75rem; border-radius: var(--radius); border: 1px solid var(--muted, #d1d5db); width: 100%; max-width: 220px; text-align: center; font-size: 1.05rem; background: var(--card, #f9fafb); color: var(--text, #111827); } .submit-pin-btn { background: var(--gradient); color: #fff; border: none; padding: .75rem 1.6rem; border-radius: var(--radius); cursor: pointer; font-weight: 700; letter-spacing: .03em; font-size: .95rem; transition: transform var(--dur), background var(--dur); box-shadow: var(--shadow); min-height: 48px; } .submit-pin-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(0.9); } .payment-buttons { display: flex; flex-direction: column; gap: .5rem; } /* Make payment buttons side by side like presets: auto-fit into columns */ .payment-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; /* Min 140px per button; adjust if needed */ gap: 0.6rem !important; margin: 0.25rem 0 0.75rem !important; } /* Optional: Remove stacking on small screens (or set to 2 columns min) */ @media (max-width: 480px) { .payment-buttons { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; /* Keeps side by side (e.g., 2 columns on ~320px phones) */ } } /* Tailor button styles for better fit: reduce padding/font if they feel too wide */ .payment-buttons button { padding: 0.6rem 0.8rem !important; /* Slightly tighter padding */ font-size: 0.9rem !important; /* Smaller text if needed */ white-space: nowrap; /* Prevent text wrapping */ } .apple-pay-btn, .paypal-btn, .card-btn, .credits-pay-btn { border: none; padding: .8rem; border-radius: var(--radius); font-weight: 700; cursor: pointer; transition: transform var(--dur), box-shadow var(--dur); font-size: .95rem; color: #fff; box-shadow: var(--shadow); min-height: 48px; } .apple-pay-btn { background: #000; } .apple-pay-btn:hover { background: #333; transform: translateY(-2px); box-shadow: var(--shadow); } .stripe-card-btn { background: #635bff; color: #fff; } .stripe-card-btn:hover { background: #5a52e8; transform: translateY(-2px); box-shadow: var(--shadow); } .card-btn { background: var(--gradient); } .card-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(0.9); } .credits-pay-btn { background: linear-gradient(135deg, #10b981, #34d399); } .unlock-description { font-size: 1rem; font-weight: 600; color: var(--text, #111827); text-align: center; padding: 0 1rem; margin-bottom: .8rem; letter-spacing: .01em; line-height: 1.5; max-width: 85%; } .price { font-size: 1.25rem; font-weight: 800; color: var(--accent, #a78bfa); margin-bottom: .7rem; text-align: center; } .redemption-code { font-size: 1.6rem; font-weight: 800; text-align: center; padding: .8rem; background: var(--muted, #d1d5db); border-radius: var(--radius); margin-bottom: .8rem; letter-spacing: .08em; } /************************************************** * Component Styles: Slim Footer **************************************************/ /* Bottom navigation footer with icons. */ .slim-footer { position: fixed; bottom: env(safe-area-inset-bottom); left: 0; right: 0; background: var(--card, #f9fafb); border-top: 1px solid var(--muted, #d1d5db); display: flex; justify-content: space-around; align-items: center; height: calc(2.5rem + env(safe-area-inset-bottom)); z-index: 800; box-shadow: 0 -2px 10px rgba(0, 0, 0, .05); padding: 0 1rem calc(env(safe-area-inset-bottom) / 2); } .footer-btn-icon { background: transparent; border: none; cursor: pointer; padding: 0.5rem; transition: transform var(--dur); display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; } .footer-btn-icon svg { width: 1.2rem; height: 1.2rem; fill: var(--sec, #6b7280); animation: bounce 2s ease-in-out infinite; } .footer-btn-icon:hover svg { fill: var(--accent, #a78bfa); transform: scale(1.1); } .footer-btn-icon:nth-child(1) svg { animation-delay: 0s; } .footer-btn-icon:nth-child(2) svg { animation-delay: 0.2s; } .footer-btn-icon:nth-child(3) svg { animation-delay: 0.4s; } .footer-btn-icon:nth-child(4) svg { animation-delay: 0.6s; } /************************************************** * Component Styles: Buy Credits Modal (refined) **************************************************/ .tabs { display: grid; grid-auto-flow: column; gap: .5rem; margin: .5rem 0 1rem; } .tab-btn { border: 1px solid var(--hairline, #d1d5db); background: var(--surface, #f9fafb); color: var(--text, #111827); padding: .5rem .8rem; border-radius: 999px; font-weight: 600; cursor: pointer; } .tab-btn.active { background: var(--accent, #a78bfa); color: #fff; border-color: transparent; } .preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; margin: .25rem 0 1rem; } .preset-btn { display: grid; place-items: center; height: 44px; border-radius: 12px; border: 1px solid var(--hairline, #d1d5db); background: var(--card, #f9fafb); color: var(--text, #111827); font-weight: 700; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .preset-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .amount-row { display: flex; gap: .6rem; align-items: center; justify-content: center; margin: .4rem 0 1rem; } .amount-input { width: 180px; text-align: center; padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--hairline, #d1d5db); background: var(--card, #f9fafb); color: var(--text, #111827); font-weight: 700; } .payment-buttons .apple-pay-btn, .payment-buttons .stripe-card-btn, .payment-buttons .card-btn, .payment-buttons .pin-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 44px; border-radius: 12px; border: 1px solid var(--hairline, #d1d5db); background: var(--surface, #f9fafb); color: var(--text, #111827); font-weight: 700; cursor: pointer; } .payment-buttons svg { width: 18px; height: 18px; } .apple-pay-btn { background: #000; color: #fff; border-color: #000; } .apple-pay-btn:hover { background: #333; border-color: #333; } .stripe-card-btn { background: #635bff; color: #fff; border-color: #635bff; } .stripe-card-btn:hover { background: #5a52e8; border-color: #5a52e8; } .card-btn { background: #3B83F6; color: #fff; border-color: #3B83F6; } .card-btn:hover { background: #1D64F5; border-color: #1D64F5; } .pin-btn { background: var(--accent, #a78bfa); color: #fff; border-color: var(--accent, #a78bfa); } .pin-btn:hover { filter: brightness(.95); } .mini-note { font-size: .9rem; color: var(--text-sub, #6b7280); text-align: center; margin: .25rem 0 0; } /************************************************** * Component Styles: Card Media and Details **************************************************/ /* Media container for images/videos. */ .spacer { height: 22px; } .media-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 0 0 0.75rem 0; } .media-container img, .media-container video { display: block; width: 100%; height: 260px; object-fit: cover; } .scroll-link { display: block; text-align: center; font-size: 1rem; opacity: 1; padding: 0.5rem 1rem; background: var(--secondary-accent, #e0e7ff); border-radius: var(--radius); text-decoration: none; color: var(--accent, #a78bfa); margin-bottom: 1rem; position: relative; overflow: hidden; font-family: var(--elegant-font); font-weight: 600; letter-spacing: 0.05em; box-shadow: var(--shadow); } .scroll-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(to right, transparent, rgba(167, 139, 250, 0.5), transparent); animation: shine 1.5s infinite; } .details-container { display: flex; flex-direction: column; gap: 1rem; } .section-card { background: var(--card, #f9fafb); border: 1px solid var(--muted, #d1d5db); border-radius: var(--radius); padding: 0.6rem 0.8rem; font-weight: 700; color: var(--text-title, #000000); } .highlight-box { background: var(--secondary-accent, #e0e7ff); border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.9rem; line-height: 1.4; } .muted-text { font-size: 0.8rem; opacity: 0.75; color: var(--text-sub, #6b7280); } .accent-text { color: var(--accent, #a78bfa); font-weight: 700; } .bold { font-weight: 700; color: var(--text-title, #000000); } .promo-code { font-size: 1.2rem; letter-spacing: 0.06em; font-weight: 800; color: var(--text-title, #000000); } .code-block { background: var(--card, #f9fafb); color: var(--text, #111827); padding: 12px; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; margin: 0 0 0.6rem 0; } [data-theme="dark"] .code-block { background: #2a2a2a; color: #e0e0e0; } /************************************************** * Component Styles: Buttons (Primary, Secondary) **************************************************/ /* Button styles with gradients and shadows for depth. */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap, .45rem); padding: var(--btn-py, .6rem) var(--btn-px, .9rem); border-radius: var(--btn-radius); font-weight: 700; line-height: 1; min-height: 44px; text-decoration: none; cursor: pointer; user-select: none; transition: transform var(--btn-tr), box-shadow var(--btn-tr), filter var(--btn-tr), background var(--btn-tr), color var(--btn-tr), border-color var(--btn-tr); box-shadow: var(--btn-shadow); vertical-align: middle; white-space: nowrap; } .btn-primary { background: var(--gradient); color: #fff; border: 1px solid transparent; } .btn-primary:hover { filter: brightness(.94); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); filter: brightness(.9); } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .35), var(--btn-shadow); } .btn-secondary { background: #fff; color: var(--accent, #a78bfa); border: 1px solid var(--accent, #a78bfa); } .btn-secondary:hover { background: rgba(167, 139, 250, .08); box-shadow: 0 0 0 2px var(--accent, #a78bfa), var(--btn-shadow); transform: translateY(-1px); } .btn-secondary:active { transform: translateY(0); } .btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .35), var(--btn-shadow); } .btn-primary svg, .btn-secondary svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } .btn--block { display: flex; width: 100%; } .btn--sm { min-height: 36px; padding: .45rem .7rem; font-weight: 600; } .btn--lg { min-height: 52px; padding: .8rem 1.1rem; } .btn-primary[disabled], .btn-secondary[disabled], .btn-primary.is-loading, .btn-secondary.is-loading { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary.is-loading::after, .btn-secondary.is-loading::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .8s linear infinite; } .flex-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .25rem 0; } .flex-row>* { margin: 0 !important; } .btn-group { display: grid; grid-auto-flow: column; gap: .6rem; } .btn-group>.btn-primary, .btn-group>.btn-secondary { width: 100%; } /************************************************** * Component Styles: Collapsible Elements **************************************************/ /* Collapsible sections with animated expansion. */ .collapsible { border: 1px solid var(--muted, #d1d5db); border-radius: var(--btn-radius); background: var(--card, #f9fafb); overflow: clip; } .collapsible summary { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-weight: 700; min-height: 48px; color: var(--text-title, #000000); cursor: pointer; list-style: none; transition: background var(--btn-tr), color var(--btn-tr); position: relative; } .collapsible summary::-webkit-details-marker { display: none; } .collapsible summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .7; transition: transform var(--btn-tr), opacity var(--btn-tr); } .collapsible[open] summary::after { transform: rotate(45deg); opacity: 1; } .collapsible[open] summary { background: var(--gradient); color: #fff; border-bottom: 1px solid transparent; } .collapsible>*:not(summary) { padding: .9rem 1rem; } .toggle-btn { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--btn-radius); border: 1px solid currentColor; font-weight: 700; font-size: .9rem; opacity: .9; } .collapsible[open] .toggle-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; } /************************************************** * Component Styles: Service Table **************************************************/ /* Table for services with alternating row backgrounds. */ .service-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .service-table thead th { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--muted, #d1d5db); font-weight: 700; color: var(--text-title, #000000); background: rgb(var(--card-rgb), .6); } .service-table tbody td { padding: .6rem .7rem; border-bottom: 1px solid var(--muted, #d1d5db); color: var(--text-body, #374151); vertical-align: middle; } .service-table tbody tr:nth-child(odd) { background: rgba(167, 139, 250, .06); } .service-table tbody td:last-child { text-align: right; } /************************************************** * Component Styles: Embed Container and Divider **************************************************/ /* Container for embedded content. */ .embed-container { margin: 0.6rem 0; text-align: center; } .embed-container iframe { border: none; border-radius: var(--radius); } .divider { border: none; height: 1px; background: var(--muted, #d1d5db); margin: var(--space) 0; } .text-content ul, .text-content ol { margin: 0.5rem 0; padding-left: 1.5rem; color: var(--text-body, #374151); } .text-content h3, .text-content h4 { margin: 0.5rem 0; font-family: var(--modern-font); color: var(--text-title, #000000); } .text-content cite { display: block; text-align: right; font-style: italic; color: var(--text-sub, #6b7280); } /************************************************** * Component Styles: Coupon Card **************************************************/ /* Coupon card with hover lift and color adaptations. */ .coupon { --c-bg: var(--card, #fff); --c-ink: var(--text, #0b1220); --c-muted: var(--muted, #6b7280); --c-line: var(--line, #e5e7eb); --c-accent: var(--accent, #4b6bfb); --c-radius: var(--radius, 16px); position: relative; display: grid; gap: .75rem; padding: 1rem; background: color-mix(in oklab, var(--c-bg) 88%, white); border: 1px solid color-mix(in oklab, var(--c-line) 70%, transparent); border-radius: var(--c-radius); box-shadow: 0 10px 24px rgba(0, 0, 0, .06); backdrop-filter: blur(6px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .coupon:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .09); } .coupon::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c-accent), color-mix(in oklab, var(--c-accent) 60%, white)); border-top-left-radius: inherit; border-top-right-radius: inherit; } .coupon-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .coupon-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; } .coupon-tag { flex: none; font-size: .72rem; font-weight: 600; color: var(--c-accent); border: 1px solid color-mix(in oklab, var(--c-accent) 35%, var(--c-line)); padding: .25rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--c-accent) 10%, white); } .coupon-code { display: inline-flex; align-items: center; gap: .5rem; } .coupon-code kbd { font: 700 .95rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding: .5rem .75rem; border-radius: .6rem; background: color-mix(in oklab, var(--c-accent) 12%, white); border: 1px dashed color-mix(in oklab, var(--c-accent) 40%, var(--c-line)); color: var(--c-ink); } .coupon-details { margin: 0; color: var(--c-muted); font-size: .85rem; } .coupon-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px dashed color-mix(in oklab, var(--c-line) 90%, transparent); padding-top: .75rem; margin-top: .25rem; } .coupon-expiry { color: var(--c-muted); font-size: .8rem; } .coupon-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .coupon .btn { appearance: none; border: 1px solid var(--c-line); background: #fff; padding: .55rem .8rem; border-radius: .55rem; font-weight: 600; font-size: .9rem; transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease; } .coupon .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); } .coupon .btn:active { transform: translateY(0); } .coupon .btn.primary { background: var(--c-accent); color: #fff; border-color: color-mix(in oklab, var(--c-accent) 70%, black); } .coupon.is-claimed { opacity: .85; } .coupon.is-expired { opacity: .55; filter: grayscale(.3); } .coupon.coupon-copied .coupon-code kbd { animation: code-flash .8s; } @media (prefers-color-scheme: dark) { .coupon { --c-bg: #0b1220; --c-ink: #eef2ff; --c-muted: #9aa3b2; --c-line: #232a3a; background: color-mix(in oklab, var(--c-bg) 86%, black); border-color: color-mix(in oklab, var(--c-line) 70%, transparent); } .coupon .btn { background: #0f1629; color: #e8ecff; border-color: #253048; } } /************************************************** * Component Styles: Custom Scrollbars **************************************************/ /* Custom scrollbars with gradient thumb for aesthetic consistency. */ *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--gradient); border-radius: 999px; } [hidden] { display: none !important; } /************************************************** * Component Styles: Feedback Card **************************************************/ /* Card for user feedback or reviews. */ .feedback-card { border-radius: var(--radius); background: var(--secondary-accent, #e0e7ff); box-shadow: var(--shadow); padding: 1rem; } .feedback-card .review-text { font-size: 1.1rem; color: var(--text-body, #374151); } .feedback-card .author { font-style: italic; font-size: smaller; color: var(--text-sub, #6b7280); } .feedback-card .stars { color: var(--accent, #a78bfa); } /************************************************** * Component Styles: Profile Modal Enhancements **************************************************/ /* Enhanced profile modal with gradients and shadows. */ .profile-modal .modal { background: linear-gradient(var(--card, #f9fafb), var(--secondary-accent, #e0e7ff)); border: 1px solid var(--accent, #a78bfa); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2); max-height: none; overflow-y: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; border-radius: 24px; } .profile-header { background: var(--gradient); color: white; border-radius: var(--radius); padding: 1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; } .stat-card { background: linear-gradient(var(--secondary-accent, #e0e7ff), var(--card, #f9fafb)); border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-align: center; padding: 0.5rem; border-radius: 8px; } .tabs { background: var(--card, #f9fafb); padding: 0.5rem; border-radius: var(--radius); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-around; gap: 0.2rem; } .tab-btn { background: transparent; border: none; color: var(--text-sub, #6b7280); transition: color 0.2s, border-bottom 0.2s; padding: 0.5rem 1rem; font-size: 0.9rem; border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--accent, #a78bfa); border-bottom: 2px solid var(--accent, #a78bfa); } .bookmark-item .icons { display: flex; gap: 0.5rem; } .bookmark-item .icons svg { width: 16px; height: 16px; fill: var(--accent, #a78bfa); } .shop-code-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--muted, #d1d5db); } .shop-code-section h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .shop-code-section form { display: flex; flex-direction: column; gap: 0.5rem; } /************************************************** * Component Styles: Buy Credits Modal Enhancements **************************************************/ /* Make sheet look like standard modal */ /* Buy Credits (sheet) — keep theme, fix scroll & clicks */ #buy-credits-modal-overlay { padding: 12px; overflow: auto; z-index: 10002; } #buy-credits-modal-overlay .modal.sheet { background: linear-gradient(var(--card, #f9fafb), var(--secondary-accent, #e0e7ff)); border: 1px solid var(--accent, #a78bfa); box-shadow: 0 0 20px rgba(var(--accent-rgb, 167, 139, 250), 0.2); border-radius: 24px; padding: 20px 20px 24px; max-width: 560px; margin: 4dvh auto; position: relative; /* prevent clipping */ max-height: calc(100dvh - 32px); overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; /* bottom spacer so last row isn't cut off */ } #buy-credits-modal-overlay .modal.sheet::after { content: ""; display: block; height: max(24px, env(safe-area-inset-bottom, 0px)); } #buy-credits-modal-overlay .sheet-hdr { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } #buy-credits-modal-overlay .sheet-hdr h2 { margin: 0; } #buy-credits-modal-overlay .sheet .close-btn { position: absolute; top: 12px; right: 12px; line-height: 1; } #buy-credits-modal-overlay .sheet-body { display: flex; flex-direction: column; gap: 10px; padding: 0; min-height: 0; } #buy-credits-modal-overlay .modal.sheet>* { min-width: 0; } #buy-credits-modal-overlay .tab-panel { min-height: 0; } /* Tabs — remove sticky to avoid covering buttons */ #buy-credits-modal-overlay .tabs { display: flex; gap: .4rem; justify-content: center; margin-bottom: .7rem; position: static; /* <— was sticky; can block clicks below */ background: transparent; padding-block: 0; } #buy-credits-modal-overlay .tab-btn { border-radius: var(--radius); padding: .5rem .9rem; font-weight: 700; background: var(--secondary-accent, #e0e7ff); color: var(--text, #111827); border: 1px solid rgba(167, 139, 250, .25); font-size: .85rem; min-height: 40px; line-height: 1; } #buy-credits-modal-overlay .tab-btn.active { box-shadow: 0 0 0 2px rgba(167, 139, 250, .35) inset, 0 0 0 1px rgba(167, 139, 250, .35); } #buy-credits-modal-overlay .tab-panel { display: none; } #buy-credits-modal-overlay .tab-panel.active { display: block; } /* Presets */ #buy-credits-modal-overlay .preset-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 420px) { #buy-credits-modal-overlay .preset-grid { grid-template-columns: repeat(2, 1fr); } } #buy-credits-modal-overlay .preset-btn { border-radius: 12px; border: 1px solid var(--accent, #a78bfa); background: var(--secondary-accent, #e0e7ff); color: var(--accent, #a78bfa); transition: transform .2s, background .2s, color .2s; } #buy-credits-modal-overlay .preset-btn:hover { background: var(--accent, #a78bfa); color: #fff; transform: translateY(-1px); } /* Amount */ #buy-credits-modal-overlay .amount-row { display: flex; justify-content: center; } #buy-credits-modal-overlay .amount-input { max-width: 220px; width: 100%; text-align: center; border-radius: 12px; padding: .8rem; border: 1px solid var(--accent, #a78bfa); } /************************************************** * Component Styles: Focus Mode **************************************************/ /* Focus mode hides non-essential elements for distraction-free viewing. */ body.focus-mode .nav-btn { opacity: 0; pointer-events: none; } body.focus-mode .carousel { overflow-x: hidden; } body.focus-mode .category-chip { opacity: 0; pointer-events: none; } body.focus-mode .right .icon-btn { width: 16px; height: 16px; transition: width var(--dur) ease, height var(--dur) ease; } body.focus-mode .right .icon-btn svg { width: 8px; height: 8px; transition: width var(--dur) ease, height var(--dur) ease; } body.focus-mode .pagination { opacity: 0; pointer-events: none; } body.focus-mode .mini-ribbon { opacity: 0; pointer-events: none; } .nav-btn, .pagination, .mini-ribbon, .category-chip { transition: opacity var(--dur) ease; } /************************************************** * Component Styles: Loading Skeleton **************************************************/ /* Skeleton loader for content placeholders. */ .loading-skeleton { width: 100%; height: 100%; background: var(--card, #f9fafb); border-radius: var(--radius); animation: pulse-loading 1.5s infinite ease-in-out; position: relative; overflow: hidden; } .loading-skeleton::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shine 1.5s infinite; } .carousel.loading { display: flex; justify-content: center; align-items: center; } /************************************************** * Component Styles: Undo Toast **************************************************/ /* Toast notification for undo actions. */ .undo-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--card, #f9fafb); color: var(--text, #111827); padding: 1rem 2rem; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 1rem; z-index: 1000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translate(-50%, 20px); } .undo-toast.visible { opacity: 1; transform: translate(-50%, 0); } .undo-toast button { background: var(--accent, #a78bfa); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius); cursor: pointer; } /************************************************** * Accessibility Enhancements **************************************************/ /* Focus outlines for keyboard navigation. */ :focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; } .wrapper[aria-live="polite"] { aria-live: polite; } /************************************************** * Component Styles: Main Header **************************************************/ /* Fixed header with blur effect. */ .main-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height, 4rem); background: rgb(var(--card-rgb) / 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); z-index: 800; pointer-events: none; } /************************************************** * Component Styles: Form Elements **************************************************/ /* Form inputs with focus rings. */ .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .form-label { font-weight: 700; font-size: 14px; } .form-input, .form-textarea, .form-select { padding: 12px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; font-size: 15px; transition: border-color var(--dur), box-shadow var(--dur); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; box-shadow: var(--ring); border-color: transparent; } .form-textarea { min-height: 120px; resize: vertical; } .toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .toggle-wrap { display: inline-flex; align-items: center; gap: 10px; } .switch { position: relative; width: 56px; height: 32px; background: rgba(0, 0, 0, .1); border-radius: 999px; flex: 0 0 56px; } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: left var(--dur), background var(--dur), transform var(--dur); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only:focus+.switch { box-shadow: var(--ring); } .sr-only:checked+.switch { background: var(--accent, #a78bfa); } .sr-only:checked+.switch .switch__thumb { left: 26px; } .submit-btn, .preview-btn { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent, #a78bfa); font-weight: 800; cursor: pointer; } .submit-btn { background: var(--accent, #a78bfa); color: #fff; border: 0; } .preview-btn { background: transparent; color: var(--accent, #a78bfa); margin-bottom: 10px; } /************************************************** * Component Styles: Starting Style Transitions **************************************************/ /* Transitions for modals and toasts at start. */ @starting-style { .modal-overlay { opacity: 0; } .modal { transform: translateY(6px) scale(.98); } .categories-dropdown { opacity: 0; transform: translateY(-10px) scale(.98); } .undo-toast { opacity: 0; transform: translate(-50%, 20px); } } /* Animation for locked content buttons. */ .card:has(.card-content.locked) .lock-btn { animation: bounce 1.5s ease-in-out infinite; } /* Bounce glow in focus mode. */ body.focus-mode .lock-btn { animation: bounce-glow 1.5s ease-in-out infinite; } /************************************************** * Component Styles: SW Profile (sw-profile class) **************************************************/ .sw-profile { --primary: var(--accent, #a78bfa); --primary-press: color-mix(in srgb, var(--accent, #a78bfa) 80%, black); --text-subtle: var(--text-sub, #6b7280); --surface: var(--card, #f9fafb); --surface-raised: var(--secondary-accent, #e0e7ff); --hairline: var(--muted, #d1d5db); --accent: var(--ok, #10b981); --destructive: var(--bad, #ef4444); --radius-lg: calc(var(--radius) * 1.5); --radius-md: var(--radius); --radius-sm: calc(var(--radius) * 0.6); --transition: var(--dur); --focus: 0 0 0 3px color-mix(in srgb, var(--accent, #10b981) 25%, transparent); --bg: #ffffff; --bg-rgb: 255, 255, 255; --card: #f9fafb; --card-rgb: 249, 250, 251; --text: #111827; --text-title: #000000; --text-body: #374151; --text-sub: #9ca3af; --sec: #6b7280; --muted: #d1d5db; --accent: #a78bfa; --gradient: linear-gradient(135deg, color-mix(in srgb, #a78bfa 80%, white), color-mix(in srgb, #7c3aed 80%, white)); --secondary-accent: #e0e7ff; --gold: #ffd700; --radius: clamp(8px, 1.5vw, 14px); --space: clamp(0.75rem, 1.5vw, 1rem); --dur: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ball: #000; --elegant-font: 'Playfair Display', 'SF Pro', 'Inter', serif; --modern-font: 'Poppins', 'SF Pro', 'Inter', sans-serif; --ok: #10b981; --warn: #f59e0b; --bad: #ef4444; --header-height: 4rem; --font-base: clamp(14px, 2vw, 16px); --line-height: 1.5; --btn-py: .6rem; --btn-px: .9rem; --btn-gap: .45rem; --btn-radius: var(--radius); --btn-shadow: 0 6px 16px rgba(0, 0, 0, .08); --btn-tr: var(--dur); --header-h: 72px; font-size: var(--font-base); line-height: var(--line-height); font-family: 'Inter', sans-serif; } @media (prefers-color-scheme: dark) { .sw-profile:not([data-theme]) { --bg: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.85)); --bg-rgb: 17, 24, 39; --card: #1f2937; --card-rgb: 31, 41, 55; --text: #f9fafb; --text-title: #ffffff; --text-body: #d1d5db; --text-sub: #9ca3af; --gradient: linear-gradient(135deg, #7c3aed, #a78bfa); --secondary-accent: #312e81; --ball: #fff; --warn: #fbbf24; --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ok: #10b981; --bad: #ef4444; --text-subtle: #c7c7cc; --surface: #1c1c1e; --surface-raised: #2c2c2e; --hairline: #3a3a3c; --shadow: 0 10px 30px rgba(0, 0, 0, .35); } } /* Page canvas for SW Profile. */ .sw-profile { height: 100%; margin: 0; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text, #111827); background: var(--bg); display: grid; place-items: center; } .sw-profile::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; filter: blur(15px); z-index: -2; } .sw-profile[data-theme="dark"]::before { filter: blur(15px) brightness(0.7); } .sw-profile[data-theme="dark"] .avatar { box-shadow: var(--shadow), inset 0 0 0 2px rgba(var(--accent-rgb), 0.3); } .sw-profile[data-theme="dark"] .avatar-upload-label { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .sw-profile[data-theme="dark"] .avatar-upload-label:hover { background: color-mix(in srgb, var(--accent) 80%, #1f2937); } /* Backdrop and container for modals in SW Profile. */ .sw-profile .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 40px; border-bottom: 1px solid var(--hairline, #d1d5db); font-weight: 600; color: var(--text-subtle, #6b7280); } /* Top navigation bar. */ .sw-profile .nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--hairline, #d1d5db); position: sticky; top: 0; background: var(--surface, #f9fafb); z-index: 2; } .sw-profile .nav-title { justify-self: center; font-weight: 600; } .sw-profile .nav-bar .btn-link { justify-self: start; } .sw-profile .nav-bar .btn-pill { justify-self: end; } /* lay out the top bar as a row */ .sw-profile .top-bar { display: flex; align-items: center; justify-content: space-between; } /* streak + toggle sit in a row */ .sw-profile .top-bar .left { display: inline-flex; align-items: center; gap: 8px; } /* in the modal, the toggle should not be absolutely positioned */ .sw-profile .top-bar .global-theme-toggle { position: static !important; display: inline-flex; align-items: center; } /* make the track reflect the checked state (knob already slides) */ .global-theme-toggle input:checked+.toggle { background: var(--accent, #a78bfa); } /* Button variations for SW Profile. */ .sw-profile .btn, .sw-profile .btn-link, .sw-profile .btn-pill { border: 0; cursor: pointer; font: inherit; color: var(--primary, #a78bfa); background: transparent; padding: 8px 10px; border-radius: var(--radius-sm); transition: transform var(--transition), background var(--transition), opacity var(--transition); } .sw-profile .btn:focus, .sw-profile .btn-link:focus, .sw-profile .btn-pill:focus { outline: none; box-shadow: var(--focus); } .sw-profile .btn-pill { background: var(--surface-raised, #e0e7ff); color: var(--text, #111827); border-radius: 999px; padding: 6px 12px; } .sw-profile .btn-primary:hover, .sw-profile .primary-button:hover { background: var(--primary-press); } .sw-profile .btn-secondary, .sw-profile .secondary-button { background: var(--hairline, #d1d5db); color: var(--text, #111827); border: 0; border-radius: 10px; padding: 10px 14px; } .sw-profile .btn-ghost { background: transparent; color: var(--text, #111827); } /* Tabs for SW Profile. */ .sw-profile .tab { border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; } .sw-profile .tab[aria-selected="true"] { background: var(--surface, #f9fafb); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); font-weight: 600; } .sw-profile .tab:focus { outline: none; box-shadow: var(--focus); } /* Content area with overflow handling. */ .sw-profile .content { overflow: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; } .sw-profile .section { display: none; animation: fade .22s ease; } .sw-profile .section.active { display: block; } @keyframes fade { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sw-profile .section { animation: none; } .sw-profile .btn, .sw-profile .tab { transition: none; } } .sw-profile .profile-info { text-align: center; margin-bottom: 16px; } .sw-profile .profile-info p { margin: 6px 0; color: var(--text-subtle, #6b7280); } .sw-profile .profile-info strong { color: var(--text, #111827); } .sw-profile .insights-section { margin-top: 20px; } .sw-profile .insights-section h3 { margin-bottom: 10px; font-size: 1rem; font-weight: 600; color: var(--text-title, #000000); } .sw-profile .insights-section ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .sw-profile .insights-section li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; line-height: 1.3; color: var(--text-body, #374151); } .sw-profile .insights-section li::before { content: ''; display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .sw-profile .insights-section li:nth-child(1)::before { /* Streak */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M12 2s-5 6-5 10c0 3.3 2.7 6 6 6s6-2.7 6-6c0-4-5-10-7-10zm0 14c-2.2 0-4-1.8-4-4 0-1.6 1.6-4 4-6 2.4 2 4 4.4 4 6 0 2.2-1.8 4-4 4z'/%3E%3C/svg%3E"); } .sw-profile .insights-section li:nth-child(2)::before { /* Top Themes */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V2h-2v1.06A8.994 8.994 0 0 0 3.06 11H2v2h1.06A8.994 8.994 0 0 0 11 20.94V22h2v-1.06A8.994 8.994 0 0 0 20.94 13H22v-2h-1.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E"); } .sw-profile .insights-section li:nth-child(3)::before { /* Royalty Earnings */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.07-3.21-3.07V7.69h-2v1.06c-2.07.2-3.5 1.37-3.5 3.37 0 1.68 1.16 2.61 3.3 3.21 2.24.64 3 1.47 3 2.45 0 .99-.9 1.74-2.7 1.74-2.06 0-2.87-1.02-2.96-2.2H4.6c.1 1.88 1.3 3.2 3.4 3.4v1.06h2v-1.06c2.1-.2 3.5-1.4 3.5-3.4 0-2.03-1.4-3.01-3.7-3.61zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E"); } .sw-profile .card-list, .sw-profile .transactions { list-style: none; margin: 0; padding: 0; background: var(--surface, #f9fafb); border: 1px solid var(--hairline, #d1d5db); border-radius: 12px; overflow: hidden; } .sw-profile .card-list li, .sw-profile .transactions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline, #d1d5db); } .sw-profile .card-list li:last-child, .sw-profile .transactions li:last-child { border-bottom: 0; } .sw-profile .row-actions { display: flex; gap: 8px; justify-content: flex-end; } .sw-profile .search-bar { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); margin: 6px 0 14px; color: var(--text, #111827); } .sw-profile .carousel-title { font-weight: 600; margin: 14px 0 10px; } .sw-profile .mini-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .sw-profile .carousel-card { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 14px; height: 150px; padding: 12px; display: grid; align-content: center; justify-items: center; gap: 8px; scroll-snap-align: start; } .sw-profile .see-all { display: inline-block; color: var(--primary, #a78bfa); margin: 10px 0 4px; cursor: pointer; } .sw-profile .favorites-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; } .sw-profile .destructive { background: var(--destructive, #ef4444); color: #fff; } .sw-profile .pins-progress { margin: 16px 0; font-weight: 600; color: var(--accent, #a78bfa); } .sw-profile .wallet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sw-profile .wallet-title { margin: 0; font-size: 17px; font-weight: 600; } .sw-profile .wallet-sub { color: var(--text-subtle, #6b7280); margin: 0 0 14px; } .sw-profile .balance-card { text-align: center; padding: 10px 0 2px; } .sw-profile .balance-card .label { font-size: 13px; color: var(--text-subtle, #6b7280); } .sw-profile .balance-card .amount { font-size: 32px; font-weight: 800; line-height: 1.1; margin: 2px 0 8px; } .sw-profile .ledger-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 6px; } .sw-profile .pill-group { display: flex; gap: 6px; flex-wrap: wrap; } .sw-profile .pill { border: 1px solid var(--hairline, #d1d5db); background: var(--surface-raised, #e0e7ff); color: var(--text, #111827); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .sw-profile .pill[aria-pressed="true"] { background: var(--surface, #f9fafb); font-weight: 600; } .sw-profile .transactions li { display: grid; grid-template-columns: 1fr auto; align-items: center; } .sw-profile .transactions .delta { font-weight: 700; } .sw-profile .transactions .delta.positive { color: var(--accent, #a78bfa); } .sw-profile .transactions .delta.negative { color: var(--destructive, #ef4444); } .sw-profile .redemption-history { margin-top: 20px; } .sw-profile .redemption-history ul li { display: flex; justify-content: space-between; } .sw-profile .wisdom-form { margin: 16px 0; } .sw-profile .wisdom-form .form-group { margin-bottom: 15px; } .sw-profile .wisdom-form label { display: block; margin-bottom: 5px; font-weight: 600; } .sw-profile .wisdom-form input:not([type="checkbox"]), .sw-profile .wisdom-form select, .sw-profile .wisdom-form textarea { width: 100%; padding: 10px; border: 1px solid var(--hairline, #d1d5db); border-radius: var(--radius-sm); background: var(--surface, #f9fafb); color: var(--text, #111827); box-sizing: border-box; max-width: 100%; } .sw-profile .wisdom-form textarea { height: 100px; resize: vertical; min-width: 100%; max-width: 100%; } .sw-profile .wisdom-form .checkbox-group { display: inline-flex; align-items: center; gap: 4px; } .sw-profile .wisdom-form .checkbox-group input[type="checkbox"] { width: auto; padding: 0; margin: 0; border: 0; } .sw-profile .wisdom-form .checkbox-group label { display: inline; margin: 0; font-weight: 600; } .sw-profile .wisdom-note { font-size: 12px; color: var(--text-subtle, #6b7280); margin-top: 10px; } .sw-profile .preview-card { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 14px; padding: 12px; margin: 16px 0; display: none; } .sw-profile .footer .link-danger { color: var(--destructive, #ef4444); } .sw-profile .undo-button { color: var(--primary, #a78bfa); display: none; } .sw-profile .modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 10000; } .sw-profile .modal-overlay.active { opacity: 1; visibility: visible; } .sw-profile .modal-overlay .modal { position: relative; width: min(92vw, 460px); background: var(--card, #f9fafb); color: var(--text, #111827); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); border: 1px solid var(--muted, #d1d5db); max-height: 90vh; overflow-y: auto; } .sw-profile .modal-overlay .close-btn { position: absolute; right: 10px; top: 10px; background: transparent; border: 0; color: var(--text-sub, #6b7280); font-size: 22px; cursor: pointer; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .sw-profile .modal-overlay .close-btn:hover { background: rgba(0, 0, 0, 0.1); } .sw-profile .sw-auth-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .sw-profile .sw-auth-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--secondary-accent, #e0e7ff); display: grid; place-items: center; font-weight: 800; } .sw-profile .sw-auth-title { margin: 0 0 4px; font: 800 20px/1.2 var(--modern-font); } .sw-profile .sw-auth-sub { margin: 0; color: var(--text-sub, #6b7280); font: 500 14px/1.5 var(--modern-font); } .sw-profile .sw-auth-benefits { margin: 10px 0 12px; padding-left: 18px; color: var(--text-body, #374151); } .sw-profile .sw-auth-benefits li { margin: 4px 0; font: 500 13px/1.4 var(--modern-font); } .sw-profile .sw-auth-actions { display: grid; gap: 10px; margin-top: 6px; } .sw-profile .sw-auth-btn { border: 1px solid var(--muted, #d1d5db); background: var(--secondary-accent, #e0e7ff); color: var(--text, #111827); border-radius: var(--radius); padding: 12px 14px; font: 700 14px/1 var(--modern-font); cursor: pointer; } .sw-profile .sw-auth-btn:hover { background: color-mix(in srgb, var(--secondary-accent, #e0e7ff) 80%, var(--accent, #a78bfa)); } .sw-profile .sw-auth-primary { background: var(--gradient); border-color: var(--accent, #a78bfa); color: #fff; } .sw-profile .sw-auth-primary:hover { filter: brightness(.95); } .sw-profile .sw-auth-link { background: none; border: 0; color: var(--text-sub, #6b7280); text-decoration: underline; cursor: pointer; justify-self: center; font: 600 13px/1.2 var(--modern-font); } .sw-profile .sw-auth-note { margin: .5rem 0 0; color: var(--text-sub, #6b7280); font: 500 12px/1.4 var(--modern-font); text-align: center; } .sw-profile .tab-btn { border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; } .sw-profile .tab-btn.active { background: var(--surface, #f9fafb); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); font-weight: 600; } .sw-profile .tab-panel { display: none; } .sw-profile .tab-panel.active { display: block; } .sw-profile .preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 15px 0; } .sw-profile .preset-btn { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; padding: 12px; font-weight: 600; cursor: pointer; } .sw-profile .preset-btn:hover { background: var(--surface, #f9fafb); } .sw-profile .amount-row { margin: 15px 0; } .sw-profile .amount-input { width: 100%; padding: 12px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); color: var(--text, #111827); box-sizing: border-box; } .sw-profile .payment-buttons { display: grid; gap: 10px; margin: 20px 0; } .sw-profile .payment-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--hairline, #d1d5db); background: var(--surface, #f9fafb); color: var(--text, #111827); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .sw-profile .payment-btn:hover { background: var(--surface-raised, #e0e7ff); transform: translateY(-1px); } .sw-profile .payment-btn svg { width: 20px; height: 20px; } .sw-profile .apple-pay-btn { background: #000; color: #fff; border-color: #000; } .sw-profile .apple-pay-btn:hover { background: #333; border-color: #333; } .sw-profile .paypal-btn { background: #FFC439; color: #000; border-color: #FFC439; } .sw-profile .paypal-btn:hover { background: #e6b02e; border-color: #e6b02e; } .sw-profile .card-btn { background: #3B83F6; color: #fff; border-color: #3B83F6; } .sw-profile .card-btn:hover { background: #1D64F5; border-color: #1D64F5; } .sw-profile .pin-btn { background: var(--accent, #a78bfa); color: #fff; border-color: var(--accent, #a78bfa); } .sw-profile .pin-btn:hover { background: var(--primary-press); border-color: var(--primary-press); } .sw-profile .mini-note { text-align: center; font-size: 13px; color: var(--text-subtle, #6b7280); margin-top: 10px; } .sw-profile .pin-form { display: flex; gap: 10px; margin: 15px 0; } .sw-profile .pin-input { flex: 1; padding: 12px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); color: var(--text, #111827); } .sw-profile .submit-pin-btn { padding: 12px 20px; border: 0; border-radius: 10px; background: var(--accent, #a78bfa); color: white; font-weight: 600; cursor: pointer; } .sw-profile .payment-methods-list { list-style: none; padding: 0; margin: 0 0 20px 0; } .sw-profile .payment-method-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--muted, #d1d5db); } .sw-profile .payment-method-item:last-child { border-bottom: none; } .sw-profile .payment-method-actions { display: flex; gap: 0.5rem; } .sw-profile .btn--sm { padding: 6px 12px; font-size: 13px; } .sw-profile .btn--block { display: block; width: 100%; text-align: center; } .sw-profile .muted { color: var(--text-subtle, #6b7280); text-align: center; } .sw-profile .form-group { margin-bottom: 15px; } .sw-profile .form-group label { display: block; margin-bottom: 5px; font-weight: 600; } .sw-profile .form-group input { width: 100%; padding: 10px; border: 1px solid var(--hairline, #d1d5db); border-radius: var(--radius-sm); background: var(--surface, #f9fafb); color: var(--text, #111827); } .sw-profile .close-x { cursor: pointer; font-size: 1.2rem; color: var(--text-subtle, #6b7280); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .sw-profile .close-x:hover { color: var(--text, #111827); background: rgba(0, 0, 0, 0.1); } .sw-profile .pinned-section { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .sw-profile .pinned-section .close-x { margin-left: auto; } .sw-profile .credits-added { text-align: center; padding: 16px; } .sw-profile .credits-added .amount { font-size: 1.5rem; font-weight: bold; } .sw-profile .redemption-code { text-align: center; font-size: 1.2rem; font-weight: bold; margin: 12px 0; } .sw-profile .redemption-instructions { font-size: 0.9rem; color: var(--text-subtle, #6b7280); } .sw-profile .svg-icon { width: 16px; height: 16px; display: inline-block; } .sw-profile .star-icon { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center; } .sw-profile .heart-icon { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E") no-repeat center; } .sw-profile .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === Agostin modal glue (non-conflicting) === */ .sw-profile[data-component="sw-profile-modal"] { display: block; } .sw-profile .backdrop { display: none; position: fixed; inset: 0; z-index: 9999; place-items: center; } .sw-profile .backdrop.active, .sw-profile .backdrop[style*="display: grid"] { display: grid; } .sw-profile .modal { max-height: 92dvh; overflow: auto; } .sw-profile .modal-overlay { position: fixed; inset: 0; display: none; place-items: center; z-index: 10000; background: rgba(0, 0, 0, .5); } .sw-profile .modal-overlay.active .modal { transform: none; } .sw-profile .modal .close-btn, .sw-profile .close-x { cursor: pointer; } /************************************************** * Integrated Profile Modal Styles (sw-profile namespace) **************************************************/ /* ----- Richer content for login/sign-up modals ----- */ #sign-up-modal-overlay .modal .modal-sub, #login-modal-overlay .modal .modal-sub { margin: .25rem 0 .5rem; color: var(--text-sub, #6b7280); font-size: 0.95rem; } #sign-up-modal-overlay .modal .benefits-list, #login-modal-overlay .modal .benefits-list { margin: .25rem 0 .75rem; padding-left: 1.1rem; color: var(--text, #111827); } #sign-up-modal-overlay .modal .benefits-list li, #login-modal-overlay .modal .benefits-list li { margin: .2rem 0; } #sign-up-modal-overlay .modal .section-divider, #login-modal-overlay .modal .section-divider { display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; gap: .5rem; color: var(--text-sub, #9ca3af); margin: .6rem 0 .6rem; } #sign-up-modal-overlay .modal .section-divider::before, #login-modal-overlay .modal .section-divider::before, #sign-up-modal-overlay .modal .section-divider::after, #login-modal-overlay .modal .section-divider::after { content: ""; height: 1px; background: var(--hairline, #e5e7eb); } #sign-up-modal-overlay .modal .sso-row, #login-modal-overlay .modal .sso-row { display: grid; gap: .5rem; } #sign-up-modal-overlay .modal .btn-sso, #login-modal-overlay .modal .btn-sso { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .9rem; border-radius: 10px; border: 1px solid var(--hairline, #e5e7eb); background: var(--surface, #fff); color: var(--text, #111827); font-weight: 600; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } #sign-up-modal-overlay .modal .btn-sso:hover, #login-modal-overlay .modal .btn-sso:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); } #sign-up-modal-overlay .modal .field-note { margin-top: .25rem; font-size: .85rem; color: var(--text-sub, #6b7280); } #sign-up-modal-overlay .modal .checkbox-inline, #login-modal-overlay .modal .checkbox-inline { display: inline-flex; align-items: center; gap: .45rem; margin: .5rem 0; } #sign-up-modal-overlay .modal .support-row, #login-modal-overlay .modal .support-row { margin-top: .75rem; text-align: center; color: var(--text-sub, #6b7280); } #sign-up-modal-overlay .modal .link, #login-modal-overlay .modal .link { background: none; border: 0; color: var(--accent, #3B83F6); text-decoration: underline; cursor: pointer; font-weight: 600; } #login-modal-overlay .modal .form-row-inline { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: .5rem 0; } /* Backdrop and container for modals in SW Profile. */ .sw-profile .backdrop { position: fixed; inset: 0; display: none; background: rgba(0, 0, 0, .5); } .sw-profile .modal { width: 100%; max-width: 420px; height: 84vh; background: var(--surface, #f9fafb); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; grid-template-rows: auto auto auto 1fr auto; overflow: hidden; } .sw-profile .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 40px; border-bottom: 1px solid var(--hairline, #d1d5db); font-weight: 600; color: var(--text-subtle, #6b7280); } .sw-profile .btn, .sw-profile .btn-link, .sw-profile .btn-pill { border: 0; cursor: pointer; font: inherit; color: var(--primary, #a78bfa); background: transparent; padding: 8px 10px; border-radius: var(--radius-sm); transition: transform var(--transition), background var(--transition), opacity var(--transition); } .sw-profile .btn:focus, .sw-profile .btn-link:focus, .sw-profile .btn-pill:focus { outline: none; box-shadow: var(--focus); } .sw-profile .btn-pill { background: var(--surface-raised, #e0e7ff); color: var(--text, #111827); border-radius: 999px; padding: 6px 12px; } .sw-profile .btn-primary:hover, .sw-profile .primary-button:hover { background: var(--primary-press); } .sw-profile .btn-secondary, .sw-profile .secondary-button { background: var(--hairline, #d1d5db); color: var(--text, #111827); border: 0; border-radius: 10px; padding: 10px 14px; } .sw-profile .btn-ghost { background: transparent; color: var(--text, #111827); } .sw-profile .tabs { margin: 12px 16px; padding: 4px; background: var(--surface-raised, #e0e7ff); border-radius: 12px; display: grid; grid-auto-flow: column; gap: 4px; } .sw-profile .tab { border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; } .sw-profile .tab[aria-selected="true"] { background: var(--surface, #f9fafb); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); font-weight: 600; } .sw-profile .tab:focus { outline: none; box-shadow: var(--focus); } .sw-profile .content { overflow: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; } .sw-profile .section { display: none; animation: fade .22s ease; } .sw-profile .section.active { display: block; } @keyframes fade { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sw-profile .section { animation: none; } .sw-profile .btn, .sw-profile .tab { transition: none; } } .sw-profile .avatar-container { text-align: center; margin: var(--space) auto calc(var(--space) * 0.75); position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; width: 100%; cursor: pointer; } .sw-profile .avatar { width: clamp(80px, 10vw, 88px); height: clamp(80px, 10vw, 88px); border-radius: 50%; background: var(--gradient); object-fit: cover; object-position: center; box-shadow: var(--shadow), inset 0 0 0 2px rgba(var(--accent-rgb), 0.2); transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur); display: grid; place-items: center; font-size: clamp(24px, 3vw, 28px); font-weight: 800; font-family: var(--elegant-font); color: #fff; } .sw-profile .avatar:hover { transform: scale(1.05); box-shadow: var(--shadow), inset 0 0 0 2px rgba(var(--accent-rgb), 0.35); opacity: 0.85; } .sw-profile .avatar-upload-label:hover { transform: scale(1.1); background: color-mix(in srgb, var(--accent) 80%, white); /* Lighter on hover */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Small add button pinned to bottom-right of avatar */ .sw-profile .avatar-upload-label { cursor: pointer; position: absolute; bottom: 0; right: 0; background: var(--accent); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: transform var(--dur), background var(--dur), box-shadow var(--dur), opacity var(--dur); z-index: 1; } /* Hide the button once uploaded */ .sw-profile .avatar-container.uploaded .avatar-upload-label { display: none; } /* Optional: tiny hover lift */ .sw-profile .avatar-upload-label:hover { transform: scale(1.06); } .sw-profile #avatar-upload { display: none; } .sw-profile .top-balance { display: flex; align-items: center; gap: 4px; /* Space between avatar chip and "$ balance" */ font-weight: 600; color: var(--text-subtle, #6b7280); } .sw-profile .profile-info { text-align: center; margin-bottom: 16px; } .sw-profile .profile-info p { margin: 6px 0; color: var(--text-subtle, #6b7280); } .sw-profile .profile-info strong { color: var(--text, #111827); } .sw-profile .insights-section { margin-top: 20px; } .sw-profile .insights-section h3 { margin-bottom: 10px; } .sw-profile .insights-section ul { list-style: none; padding: 0; } .sw-profile .insights-section li { margin-bottom: 8px; } .sw-profile .card-list, .sw-profile .transactions { list-style: none; margin: 0; padding: 0; background: var(--surface, #f9fafb); border: 1px solid var(--hairline, #d1d5db); border-radius: 12px; overflow: hidden; } .sw-profile .card-list li, .sw-profile .transactions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline, #d1d5db); } .sw-profile .card-list li:last-child, .sw-profile .transactions li:last-child { border-bottom: 0; } .sw-profile .switch { position: relative; width: 51px; height: 31px; } .sw-profile .switch input { position: absolute; opacity: 0; inset: 0; } .sw-profile .slider { position: absolute; inset: 0; border-radius: 31px; background: #c7c7cc; transition: background var(--transition); } .sw-profile .slider::before { content: ""; position: absolute; width: 27px; height: 27px; border-radius: 50%; left: 2px; top: 2px; background: #fff; transition: transform var(--transition); } .sw-profile .switch input:checked+.slider { background: var(--accent, #a78bfa); } .sw-profile .switch input:checked+.slider::before { transform: translateX(20px); } .sw-profile .search-bar { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); margin: 6px 0 14px; color: var(--text, #111827); } .sw-profile .carousel-title { font-weight: 600; margin: 14px 0 10px; } .sw-profile .mini-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .sw-profile .carousel-card { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 14px; height: 150px; padding: 12px; display: grid; align-content: center; justify-items: center; gap: 8px; scroll-snap-align: start; } .sw-profile .see-all { display: inline-block; color: var(--primary, #a78bfa); margin: 10px 0 4px; cursor: pointer; } .sw-profile .favorites-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; } .sw-profile .destructive { background: var(--destructive, #ef4444); color: #fff; } .sw-profile .pins-progress { margin: 16px 0; font-weight: 600; color: var(--accent, #a78bfa); } .sw-profile .wallet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sw-profile .wallet-title { margin: 0; font-size: 17px; font-weight: 600; } .sw-profile .wallet-sub { color: var(--text-subtle, #6b7280); margin: 0 0 14px; } .sw-profile .balance-card { text-align: center; padding: 10px 0 2px; } .sw-profile .balance-card .label { font-size: 13px; color: var(--text-subtle, #6b7280); } .sw-profile .balance-card .amount { font-size: 32px; font-weight: 800; line-height: 1.1; margin: 2px 0 8px; } .sw-profile .ledger-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 6px; } .sw-profile .pill-group { display: flex; gap: 6px; flex-wrap: wrap; } .sw-profile .pill { border: 1px solid var(--hairline, #d1d5db); background: var(--surface-raised, #e0e7ff); color: var(--text, #111827); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .sw-profile .pill[aria-pressed="true"] { background: var(--surface, #f9fafb); font-weight: 600; } .sw-profile .transactions li { display: grid; grid-template-columns: 1fr auto; align-items: center; } .sw-profile .transactions .delta { font-weight: 700; } .sw-profile .transactions .delta.positive { color: var(--accent, #a78bfa); } .sw-profile .transactions .delta.negative { color: var(--destructive, #ef4444); } .sw-profile .redemption-history { margin-top: 20px; } .sw-profile .redemption-history ul li { display: flex; justify-content: space-between; } .sw-profile .wisdom-form { margin: 16px 0; } .sw-profile .wisdom-form .form-group { margin-bottom: 15px; } .sw-profile .wisdom-form label { display: block; margin-bottom: 5px; font-weight: 600; } .sw-profile .wisdom-form input:not([type="checkbox"]), .sw-profile .wisdom-form select, .sw-profile .wisdom-form textarea { width: 100%; padding: 10px; border: 1px solid var(--hairline, #d1d5db); border-radius: var(--radius-sm); background: var(--surface, #f9fafb); color: var(--text, #111827); box-sizing: border-box; max-width: 100%; } .sw-profile .wisdom-form textarea { height: 100px; resize: vertical; min-width: 100%; max-width: 100%; } .sw-profile .wisdom-form .checkbox-group { display: inline-flex; align-items: center; gap: 4px; } .sw-profile .wisdom-form .checkbox-group input[type="checkbox"] { width: auto; padding: 0; margin: 0; border: 0; } .sw-profile .wisdom-form .checkbox-group label { display: inline; margin: 0; font-weight: 600; } .sw-profile .wisdom-note { font-size: 12px; color: var(--text-subtle, #6b7280); margin-top: 10px; } .sw-profile .preview-card { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 14px; padding: 12px; margin: 16px 0; display: none; } .sw-profile .footer { border-top: 1px solid var(--hairline, #d1d5db); padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface, #f9fafb); } .sw-profile .footer .link-danger { color: var(--destructive, #ef4444); } .sw-profile .undo-button { color: var(--primary, #a78bfa); display: none; } .sw-profile .modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 10000; } .sw-profile .modal-overlay.active { opacity: 1; visibility: visible; } .sw-profile .modal-overlay .modal { position: relative; width: min(92vw, 460px); background: var(--card, #f9fafb); color: var(--text, #111827); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); border: 1px solid var(--muted, #d1d5db); max-height: 90vh; overflow-y: auto; } .sw-profile .modal-overlay .close-btn { position: absolute; right: 10px; top: 10px; background: transparent; border: 0; color: var(--text-sub, #6b7280); font-size: 22px; cursor: pointer; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .sw-profile .modal-overlay .close-btn:hover { background: rgba(0, 0, 0, 0.1); } .sw-profile .sw-auth-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .sw-profile .sw-auth-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--secondary-accent, #e0e7ff); display: grid; place-items: center; font-weight: 800; } .sw-profile .sw-auth-title { margin: 0 0 4px; font: 800 20px/1.2 var(--modern-font); } .sw-profile .sw-auth-sub { margin: 0; color: var(--text-sub, #6b7280); font: 500 14px/1.5 var(--modern-font); } .sw-profile .sw-auth-benefits { margin: 10px 0 12px; padding-left: 18px; color: var(--text-body, #374151); } .sw-profile .sw-auth-benefits li { margin: 4px 0; font: 500 13px/1.4 var(--modern-font); } .sw-profile .sw-auth-actions { display: grid; gap: 10px; margin-top: 6px; } .sw-profile .sw-auth-btn { border: 1px solid var(--muted, #d1d5db); background: var(--secondary-accent, #e0e7ff); color: var(--text, #111827); border-radius: var(--radius); padding: 12px 14px; font: 700 14px/1 var(--modern-font); cursor: pointer; } .sw-profile .sw-auth-btn:hover { background: color-mix(in srgb, var(--secondary-accent, #e0e7ff) 80%, var(--accent, #a78bfa)); } .sw-profile .sw-auth-primary { background: var(--gradient); border-color: var(--accent, #a78bfa); color: #fff; } .sw-profile .sw-auth-primary:hover { filter: brightness(.95); } .sw-profile .sw-auth-link { background: none; border: 0; color: var(--text-sub, #6b7280); text-decoration: underline; cursor: pointer; justify-self: center; font: 600 13px/1.2 var(--modern-font); } .sw-profile .sw-auth-note { margin: .5rem 0 0; color: var(--text-sub, #6b7280); font: 500 12px/1.4 var(--modern-font); text-align: center; } .sw-profile .tab-btn { border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; } .sw-profile .tab-btn.active { background: var(--surface, #f9fafb); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); font-weight: 600; } .sw-profile .tab-panel { display: none; } .sw-profile .tab-panel.active { display: block; } .sw-profile .preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 15px 0; } .sw-profile .preset-btn { background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; padding: 12px; font-weight: 600; cursor: pointer; } .sw-profile .preset-btn:hover { background: var(--surface, #f9fafb); } .sw-profile .amount-row { margin: 15px 0; } .sw-profile .amount-input { width: 100%; padding: 12px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); color: var(--text, #111827); box-sizing: border-box; } .sw-profile .payment-buttons { display: grid; gap: 10px; margin: 20px 0; } .sw-profile .payment-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--hairline, #d1d5db); background: var(--surface, #f9fafb); color: var(--text, #111827); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .sw-profile .payment-btn:hover { background: var(--surface-raised, #e0e7ff); transform: translateY(-1px); } .sw-profile .payment-btn svg { width: 20px; height: 20px; } .sw-profile .apple-pay-btn { background: #000; color: #fff; border-color: #000; } .sw-profile .apple-pay-btn:hover { background: #333; border-color: #333; } .sw-profile .paypal-btn { background: #FFC439; color: #000; border-color: #FFC439; } .sw-profile .paypal-btn:hover { background: #e6b02e; border-color: #e6b02e; } .sw-profile .card-btn { background: #3B83F6; color: #fff; border-color: #3B83F6; } .sw-profile .card-btn:hover { background: #1D64F5; border-color: #1D64F5; } .sw-profile .pin-btn { background: var(--accent, #a78bfa); color: #fff; border-color: var(--accent, #a78bfa); } .sw-profile .pin-btn:hover { background: var(--primary-press); border-color: var(--primary-press); } .sw-profile .mini-note { text-align: center; font-size: 13px; color: var(--text-subtle, #6b7280); margin-top: 10px; } .sw-profile .pin-form { display: flex; gap: 10px; margin: 15px 0; } .sw-profile .pin-input { flex: 1; padding: 12px; border: 1px solid var(--hairline, #d1d5db); border-radius: 10px; background: var(--surface, #f9fafb); color: var(--text, #111827); } .sw-profile .submit-pin-btn { padding: 12px 20px; border: 0; border-radius: 10px; background: var(--accent, #a78bfa); color: white; font-weight: 600; cursor: pointer; } .sw-profile .payment-methods-list { list-style: none; padding: 0; margin: 0 0 20px 0; } .sw-profile .payment-method-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--muted, #d1d5db); } .sw-profile .payment-method-item:last-child { border-bottom: none; } .sw-profile .payment-method-actions { display: flex; gap: 0.5rem; } .sw-profile .btn--sm { padding: 6px 12px; font-size: 13px; } .sw-profile .btn--block { display: block; width: 100%; text-align: center; } .sw-profile .muted { color: var(--text-subtle, #6b7280); text-align: center; } .sw-profile .form-group { margin-bottom: 15px; } .sw-profile .form-group label { display: block; margin-bottom: 5px; font-weight: 600; } .sw-profile .form-group input { width: 100%; padding: 10px; border: 1px solid var(--hairline, #d1d5db); border-radius: var(--radius-sm); background: var(--surface, #f9fafb); color: var(--text, #111827); } .sw-profile .close-x { cursor: pointer; font-size: 1.2rem; color: var(--text-subtle, #6b7280); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .sw-profile .close-x:hover { color: var(--text, #111827); background: rgba(0, 0, 0, 0.1); } .sw-profile .pinned-section { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .sw-profile .pinned-section .close-x { margin-left: auto; } .sw-profile .credits-added { text-align: center; padding: 16px; } .sw-profile .credits-added .amount { font-size: 1.5rem; font-weight: bold; } .sw-profile .redemption-code { text-align: center; font-size: 1.2rem; font-weight: bold; margin: 12px 0; } .sw-profile .redemption-instructions { font-size: 0.9rem; color: var(--text-subtle, #6b7280); } .sw-profile .svg-icon { width: 16px; height: 16px; display: inline-block; } .sw-profile .star-icon { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center; } .sw-profile .heart-icon { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E") no-repeat center; } .sw-profile .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sw-profile[data-theme="dark"] { --bg: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.85)); --bg-rgb: 17, 24, 39; --card: #1f2937; --card-rgb: 31, 41, 55; --text: #f9fafb; --text-title: #ffffff; --text-body: #d1d5db; --text-sub: #9ca3af; --gradient: linear-gradient(135deg, #7c3aed, #a78bfa); --secondary-accent: #312e81; --ball: #fff; --warn: #fbbf24; --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --ok: #10b981; --bad: #ef4444; --text-subtle: #c7c7cc; --surface: #1c1c1e; --surface-raised: #2c2c2e; --hairline: #3a3a3c; --shadow: 0 10px 30px rgba(0, 0, 0, .35); } .sw-profile[data-theme="light"] { --accent: #7c3aed; --ok: #047857; --warn: #b45309; } .no-results-message { text-align: center; padding: 20px; color: var(--text-subtle, #6b7280); grid-column: 1 / -1; } /* === FAVORITES: compact card that fits image + title exactly === */ /* Make columns a touch wider so the image can be tall yet balanced */ #panel-favorites .mini-carousel { display: grid !important; grid-auto-flow: column; grid-auto-columns: 164px; /* adjust to 156–176 to taste */ gap: 10px; overflow-x: auto; padding: 6px 0 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; } #panel-favorites .mini-carousel::-webkit-scrollbar { display: none; } /* Hard reset: kill any old fixed/min heights from earlier code */ #panel-favorites .mini-carousel .carousel-card { height: auto !important; min-height: 0 !important; } /* Card wraps its content only (image + tiny title) */ #panel-favorites .carousel-card { display: grid !important; grid-template-rows: auto min-content; /* image, then title */ align-content: start; justify-items: center; gap: 6px; padding: 8px; /* tighter padding */ border-radius: 12px; background: var(--surface-raised, #e0e7ff); border: 1px solid var(--hairline, #d1d5db); scroll-snap-align: start; cursor: pointer; text-decoration: none; color: inherit; } /* Image: taller (4:3), fills the first row; works for OR .carousel-thumbnail div */ #panel-favorites .carousel-card .cc-thumb, #panel-favorites .carousel-card .carousel-thumbnail { display: block !important; width: 100%; aspect-ratio: 4 / 3; /* taller than 16:9 so it doesn't look stubby */ height: auto; object-fit: cover; /* if it's */ background-size: cover; /* if it's a div thumb */ background-position: center; border-radius: 10px; } /* Title: small, tight, one line, right under the image */ #panel-favorites .carousel-card .cc-title, #panel-favorites .carousel-card>div:nth-of-type(2) { font-weight: 600; font-size: clamp(8.5px, 2.1vw, 10px); line-height: 1.18; letter-spacing: .12px; text-align: center; max-width: 95%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 0; } /* Remove the micro-label row entirely */ #panel-favorites .carousel-card small { display: none !important; } /* Very small phones */ @media (max-width: 360px) { #panel-favorites .mini-carousel { grid-auto-columns: 156px; gap: 8px; } #panel-favorites .carousel-card { padding: 7px; gap: 5px; } #panel-favorites .carousel-card .cc-title { font-size: 8.8px; gap: 5px; } } /* Credits tab: make ONLY the Recent activity list (#ledger) scrollable */ #panel-credits { display: grid; grid-template-rows: auto /* .wallet-head */ auto /* .wallet-sub / balance */ auto /* .ledger-row header + pills */ minmax(0, 1fr) /* <-- scrolling ledger */ auto /* redemption history */ auto /* wallet actions */; gap: 8px; min-height: 0; } /* Override the generic ".sw-profile .transactions { overflow: hidden }" just for the ledger */ #panel-credits #ledger { /* pick a height you like; 36–50dvh is a good start */ max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* keep the same card styling as other lists */ background: var(--surface, #f9fafb); border: 1px solid var(--hairline, #d1d5db); border-radius: 12px; } /* Safety: ensure we're really overriding the earlier overflow:hidden */ #panel-credits .transactions { overflow: auto; } /* Optional: nicer scrollbar */ #panel-credits #ledger::-webkit-scrollbar { width: 8px; } #panel-credits #ledger::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; } /* Credits tab: make ONLY the Redemption History list (#redemption-list) scrollable */ #panel-credits #redemption-list{ max-height: 30dvh; /* tweak to taste (or use px like 320px) */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 2px; /* keep text clear of scrollbar */ background: var(--surface, #f9fafb); border: 1px solid var(--hairline, #d1d5db); border-radius: 12px; } /* ensure we override any global ".transactions { overflow:hidden }" */ #panel-credits #redemption-list.transactions { overflow-y: auto; } /* optional niceties */ #panel-credits #redemption-list li{ padding: 8px 12px; } /************************************************** * Media Queries for Responsiveness **************************************************/ /* Adjustments for small screens and reduced motion preferences. */ @media (prefers-reduced-motion: reduce) { *, .carousel, .nav-btn, .bookmark-btn, .unlock-btn, .blur-overlay { transition: none !important; animation: none !important; } } @media (max-width: 480px) { .sw-profile .avatar { width: clamp(64px, 8vw, 72px); height: clamp(64px, 8vw, 72px); font-size: clamp(20px, 2.5vw, 24px); } @media (max-width: 480px) { .wrapper { padding-top: 3rem; padding-bottom: 3rem; } .card { height: 85%; flex: 0 0 90%; } .nav-btn { width: 2.5rem; height: 2.5rem; padding: 0.8rem; } .nav-btn svg { width: 1.2rem; height: 1.2rem; } .global-theme-toggle { left: 0.5rem; } .credits-pill { right: 0.5rem; } .categories-dropdown { left: 0.5rem; width: 200px; } .blur-overlay { padding-top: 3rem; } .unlock-description { font-size: 0.9rem; } .price { font-size: 1.1rem; } .unlock-btn { padding: 0.7rem 1.4rem; font-size: 0.9rem; } body { font-size: 14px; } .btn--block-sm { width: 100%; } .flex-row { gap: .5rem; } .service-table thead th, .service-table tbody td { padding: .5rem .55rem; } .categories-dropdown { bottom: calc(2.5rem + env(safe-area-inset-bottom)); top: auto; left: 0; right: 0; width: auto; max-height: 50vh; border-radius: var(--radius) var(--radius) 0 0; } } @media (max-height: 600px) { .wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; } .card { height: 90%; } .blur-overlay { padding-top: 2.5rem; } .unlock-description { font-size: 0.9rem; } .price { font-size: 1.1rem; } .unlock-btn { padding: 0.7rem 1.4rem; font-size: 0.9rem; } }