:root { /* Elegant "Instagram/Europa" brand system, light key - unified 2026-08-18. Same black+gold brand as the dark key below (see [data-theme="dark"]), just on a warm ivory background instead of black. Kept as a real, distinct light option (not a copy of dark) because UX research on theme choice shows offering a genuine light alternative - not forcing dark everywhere - increases user trust ("autonomy signal"), and some content (forms, legal pages, long reading) is still easier on light backgrounds for most people. */ --bg-page: #F7F3EC; --bg-surface: #FFFFFF; --bg-surface-alt: #EFE9DD; --text-primary: #1C1A16; --text-secondary: #5C5548; --text-muted: #8A8172; --border-color: rgba(28,26,22,0.10); --accent: #1C1A16; --accent-strong: #2E2A22; --accent-text: #8A6B2E; --accent-text-on: #F7F3EC; --gold: #C9A15A; --gold-text-on: #1A1610; --danger: #C0392B; --danger-bg: rgba(192,57,43,0.08); --success: #1F8F5A; --info: #2E7BD6; --card-shadow: 0 2px 10px rgba(28,26,22,0.10); --font-display: "Playfair Display", Georgia, "Times New Roman", serif; } /* Premium account tier: exclusive black + gold skin, applied automatically via data-theme="premium" on when the logged-in user's account has is_premium = true (see applyUserTheme() in app.js). Not user-toggleable. */ [data-theme="premium"] { --bg-page: #0A0A0A; --bg-surface: #161616; --bg-surface-alt: #222222; --text-primary: #FFFFFF; --text-secondary: #B8B8B8; --text-muted: #8A8A8A; --border-color: rgba(255,255,255,0.10); --accent: #D4AF37; --accent-strong: #E8C558; --accent-text: #D4AF37; --accent-text-on: #0A0A0A; --gold: #D4AF37; --gold-text-on: #0A0A0A; --danger: #E5484D; --danger-bg: rgba(229,72,77,0.14); --success: #3FBF7F; --info: #5AA9FF; --card-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* Normal tier, dark key of the same elegant black+gold brand system as :root light above. Unified 2026-08-18 (was previously a different burgundy scheme) so both toggle positions read as one consistent brand, not two different "dark" looks. User-toggleable via #theme-toggle-wrap. */ [data-theme="dark"] { --bg-page: #0B0A08; --bg-surface: #17140F; --bg-surface-alt: #211D16; --text-primary: #F2ECE2; --text-secondary: #B5AC9C; --text-muted: #8A8172; --border-color: rgba(242,236,226,0.09); --accent: #1C1A16; --accent-strong: #2A2620; --accent-text: #C9A15A; --accent-text-on: #F2ECE2; --gold: #C9A15A; --gold-text-on: #1A1610; --danger: #E5484D; --danger-bg: rgba(229,72,77,0.14); --success: #3FBF7F; --info: #5AA9FF; --card-shadow: 0 4px 16px rgba(0,0,0,0.35); } * { box-sizing: border-box; } html { color-scheme: dark; } /* was light - matches the black+gold default trial above */ html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: var(--bg-page); color: var(--text-primary); width: 100%; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: var(--bg-surface-alt); color: var(--text-primary); } input::placeholder, textarea::placeholder { color: var(--text-muted); } /* ---- Chat widget ---- */ #chatbot-widget { position: fixed; right: 20px; bottom: 20px; z-index: 300; } #chatbot-toggle { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-text-on); font-size: 24px; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.28); } #chatbot-toggle:hover { background: var(--accent-strong); } .chatbot-panel { position: absolute; right: 0; bottom: 70px; width: 320px; max-width: calc(100vw - 32px); height: 420px; max-height: calc(100vh - 120px); background: var(--bg-surface); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; } .chatbot-panel.hidden { display: none; } .chatbot-header { background: var(--accent); color: var(--accent-text-on); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; } .chatbot-header button { background: none; border: none; color: var(--accent-text-on); font-size: 16px; padding: 0; } .chatbot-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-surface-alt); } .chatbot-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; } .chatbot-msg-bot { background: var(--bg-surface-alt); color: var(--accent-text); align-self: flex-start; border-bottom-left-radius: 4px; } .chatbot-msg-user { background: var(--accent); color: var(--accent-text-on); align-self: flex-end; border-bottom-right-radius: 4px; } .chatbot-form { display: flex; border-top: 1px solid var(--border-color); } .chatbot-form input { flex: 1; border: none; padding: 10px 12px; font-size: 13px; outline: none; } .chatbot-form button { background: var(--gold); border: none; color: var(--gold-text-on); width: 44px; font-size: 16px; } @media (max-width: 640px) { #chatbot-widget { right: 12px; bottom: 12px; } .chatbot-panel { width: calc(100vw - 24px); } } /* ---- Topbar ---- Stacked layout: top row (logo left, "..." menu right) -> full-width search -> nav links row. The "..." menu holds language + logout so the top row stays clean at any screen size instead of wrapping awkwardly. */ .topbar { background-color: var(--accent); color: var(--accent-text-on); position: sticky; top: 0; z-index: 50; } .topbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px 12px; display: flex; flex-direction: column; gap: 10px; } .topbar-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { font-size: 20px; font-weight: 800; font-family: var(--font-display); display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--accent-text-on); text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .brand-logo-img { display: block; height: 48px; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); } .brand-text-col { display: flex; flex-direction: column; line-height: 1.15; } .brand-tagline { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1px; opacity: 0.88; white-space: normal; text-shadow: none; } .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: block; } .topbar-menu-wrap { position: relative; flex-shrink: 0; } .topbar-menu-btn { background: color-mix(in srgb, var(--accent-text-on) 15%, transparent); border: none; color: var(--accent-text-on); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; } .topbar-menu-btn:hover { background: color-mix(in srgb, var(--accent-text-on) 25%, transparent); } .topbar-menu-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-surface); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 10px; min-width: 170px; z-index: 60; display: flex; flex-direction: column; gap: 8px; } .topbar-menu-dropdown .lang-toggle { border-color: var(--border-color); align-self: stretch; } .topbar-menu-dropdown .lang-btn { flex: 1; color: var(--text-secondary); } .topbar-menu-dropdown .lang-btn.active { background: var(--gold); color: var(--gold-text-on); } .topbar-menu-logout { background: var(--bg-surface-alt); border: none; color: var(--danger); font-weight: 700; font-size: 13px; padding: 9px 10px; border-radius: 6px; text-align: left; } .topbar-menu-logout:hover { background: var(--danger-bg); } .topbar-search { display: flex; width: 100%; } .topbar-search input { flex: 1; padding: 9px 12px; border: none; border-radius: 6px 0 0 6px; font-size: 14px; } .topbar-search button:last-child { border: none; background: var(--gold); color: var(--gold-text-on); padding: 0 14px; border-radius: 0 6px 6px 0; font-size: 15px; } .topbar-search .market-scan-btn { flex: 0 0 auto; width: auto; height: auto; border-radius: 0; border: none; border-left: 1px solid rgba(0,0,0,0.12); background: var(--bg-surface); padding: 0 12px; font-size: 15px; } /* Never wraps to a second row, on any screen size - Profile/Messages/ PUBLISH A BOOK/Book Club/notifications bell all stay on one tidy line. On roomy screens that just means the row never needs to scroll; on narrow phones it scrolls sideways instead of breaking into an uneven second line. */ .topbar-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .topbar-nav::-webkit-scrollbar { display: none; } .nav-link { flex: 0 0 auto; white-space: nowrap; color: var(--accent-text-on); font-size: 14px; font-weight: 600; } /* The icon-only links (Book Club, Podcasts, Messages, notifications bell) are all bigger glyphs, at the same size as each other, so they visually fill the leftover space at the end of the row instead of leaving it looking empty next to "PUBLISH A BOOK" - and so Messages/Podcasts don't look small/out of place next to Book Club/the bell. flex-wrap: nowrap + overflow-x: auto on .topbar-nav (above) is what keeps all of them on this one row instead of breaking to a second line. */ #nav-book-club, #nav-podcasts, #nav-messages, #nav-notifications { font-size: 24px; line-height: 1; } .nav-link:hover { color: var(--accent-text-on); text-decoration: underline; } .nav-link-btn { background: none; border: none; color: var(--accent-text-on); font-size: 14px; font-weight: 600; } .nav-post-btn { background: var(--gold); color: var(--gold-text-on); padding: 7px 12px; border-radius: 6px; } .nav-post-btn:hover { color: var(--gold-text-on); background: color-mix(in srgb, var(--gold) 85%, black); } .nav-post-dropdown-wrap { position: relative; flex: 0 0 auto; } .nav-post-dropdown-wrap .nav-post-btn { border: none; font: inherit; cursor: pointer; } /* .topbar-nav scrolls horizontally (overflow-x: auto) so it never wraps to a second row; per the CSS spec that also forces overflow-y to behave as "auto", which would clip this dropdown's normal position:absolute/top:100% placement since it renders below the row. Fixed positioning (with top/left set in JS at click time - see wireIconNav in app.js) escapes that clipping entirely by anchoring to the viewport instead of the scrolling row. */ #nav-post-dropdown { position: fixed; top: auto; left: auto; transform: none; } /* On narrow phones, shrink the text/padding/gaps a bit so the row reads as one clean line instead of relying on horizontal scroll as much. */ @media (max-width: 480px) { .topbar-nav { gap: 8px; } .topbar-nav .nav-link { font-size: 12.5px; } .topbar-nav .nav-post-btn { padding: 6px 9px; } } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 8px; background: var(--gold); color: var(--gold-text-on); font-size: 10px; font-weight: 800; vertical-align: middle; } .lang-toggle { display: flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; } .lang-btn { background: transparent; color: var(--text-secondary); border: none; padding: 6px 10px; font-size: 12px; font-weight: 700; } .lang-btn.active { background: var(--accent); color: var(--accent-text-on); } .theme-toggle { display: flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; } .theme-toggle-btn { background: transparent; color: var(--text-secondary); border: none; padding: 6px 10px; font-size: 12px; font-weight: 700; } .theme-toggle-btn.active { background: var(--accent); color: var(--accent-text-on); } .topbar-menu-dropdown .theme-toggle { border-color: var(--border-color); align-self: stretch; } .topbar-menu-dropdown .theme-toggle-btn { flex: 1; color: var(--text-secondary); } .topbar-menu-dropdown .theme-toggle-btn.active { background: var(--accent); color: var(--accent-text-on); } /* ---- Icon nav (Home / Friends / Marketplace / Notifications) ---- */ .icon-nav { display: flex; justify-content: center; gap: 6px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 45; padding: 2px 10px; /* No overflow-x here on purpose: setting overflow-x without overflow-y makes the browser also clip the Y axis (per the CSS overflow spec), which silently hid the Marketplace/Create dropdown menus below this bar - they were opening correctly, just invisible, on every device. We're back to exactly 6 nav items, which already fit narrow screens via the flex:1 rule below, so the old horizontal-scroll safety net is not needed and must not come back without solving the clipping problem first (e.g. rendering dropdowns via a portal to ). */ } .icon-nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 6px; border: none; background: none; color: var(--text-secondary); font-size: 11px; font-weight: 700; border-bottom: 3px solid transparent; } .icon-nav-btn-plain { cursor: pointer; } .icon-nav-btn-center { font-weight: 800; } .icon-nav-icecube { display: block; margin: 0 auto; height: 27px; width: 27px; } .icon-nav-cartbooks { display: flex; align-items: center; justify-content: center; height: 27px; gap: 1px; margin: 0 auto; transition: transform 0.15s ease; } .icon-nav-cartbooks-emoji { font-size: 21px; line-height: 1; } .icon-nav-btn:active .icon-nav-cartbooks { transform: scale(0.85); } @keyframes iconBagPop { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.22) rotate(-4deg); } 60% { transform: scale(0.92) rotate(2deg); } 100% { transform: scale(1) rotate(0deg); } } .icon-nav-cartbooks.pop { animation: iconBagPop 0.4s ease; } .icon-nav-btn:hover { color: var(--accent-text); border-bottom-color: var(--gold); } .icon-nav-emoji { font-size: 21px; line-height: 1; height: 27px; display: flex; align-items: center; justify-content: center; } .icon-nav-label { white-space: nowrap; } .icon-nav-badge { position: absolute; top: 3px; right: 8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* Unread-messages badge next to the desktop top-bar "Messages" link (a twin of .icon-nav-badge used on the mobile bottom-bar icon). This was previously dead code - setUnreadBadge() looked for an element that didn't exist in the markup, so the count silently never showed here. */ .nav-messages-link { position: relative; } .nav-messages-badge { min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; align-items: center; justify-content: center; vertical-align: middle; } .icon-nav-dropdown-wrap { position: relative; } .icon-nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 6px; min-width: 170px; z-index: 60; } .icon-nav-dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--text-primary); } .icon-nav-dropdown a:hover { background: var(--bg-surface-alt); color: var(--accent-text); } /* "Coming soon" items are visually separated below a divider and dimmed, so they read as a preview of what's next rather than broken links mixed in with the working menu items above them. */ .icon-nav-dropdown-divider { margin: 6px 4px 2px; padding-top: 6px; border-top: 1px solid var(--border-color); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding-left: 8px; } .icon-nav-dropdown-soon-item { opacity: 0.6; cursor: default; } .icon-nav-dropdown-soon-item:hover { background: none; color: var(--text-primary); } .icon-nav-create-plus { font-size: 34px; line-height: 1; height: 27px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gold); } .icon-nav-soon { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); background: rgba(201,162,75,0.15); border-radius: 999px; padding: 2px 6px; margin-left: 4px; } .app-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--text-primary); color: var(--bg-surface); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.28); z-index: 400; max-width: 85vw; text-align: center; } /* ---- Create wizard (nav "+": camera capture -> edit/filters -> caption+hashtags) ---- */ .wizard-box { max-width: 420px; } /* Step 1: immersive full-screen camera (Instagram/TikTok/Snapchat-style) */ .wizard-fs-overlay { position: fixed; inset: 0; background: #000; z-index: 300; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .wizard-fs-video-wrap { position: relative; flex: 1; overflow: hidden; background: #000; } .wizard-fs-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .wizard-fs-video-wrap.mirrored video { transform: scaleX(-1); } .wizard-fs-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 24px; font-size: 14px; } .wizard-fs-topbar { position: absolute; top: 10px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; z-index: 2; } .wizard-fs-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,0.4); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; } .wizard-fs-icon-btn.active { background: var(--gold); color: #2b1810; } .wizard-fs-icon-btn:disabled { opacity: 0.35; cursor: default; } .wizard-fs-sound-pill { flex: 1; max-width: 220px; margin: 0 10px; height: 34px; border-radius: 999px; border: none; background: rgba(0,0,0,0.4); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .wizard-fs-rec-badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #E5484D; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px; z-index: 3; } .wizard-fs-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: wizardRecPulse 1s infinite; } @keyframes wizardRecPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } .wizard-fs-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); z-index: 3; pointer-events: none; } .wizard-fs-toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #fff; font-size: 12px; padding: 8px 16px; border-radius: 999px; z-index: 4; white-space: nowrap; } .wizard-fs-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.15s ease; background-image: linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 1px); background-size: 33.333% 33.333%; } .wizard-fs-grid.show { opacity: 1; } /* Task #202 - brightness/exposure slider panel, toggled from the "lighting" rail item. Sits low over the preview so it doesn't collide with the top-bar/rail, matching the dark rgba pill styling used elsewhere in this overlay (wizard-fs-sound-pill, wizard-fs-toast, ...). */ .wizard-fs-brightness-panel { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 3; background: rgba(0,0,0,0.55); border-radius: 999px; padding: 8px 16px; width: min(78%, 320px); } .wizard-fs-brightness-panel[hidden] { display: none; } .wizard-fs-brightness-icon { color: #fff; font-size: 14px; flex: 0 0 auto; } .wizard-fs-brightness-panel input[type="range"] { flex: 1; accent-color: var(--gold); } .wizard-fs-brightness-value { color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; min-width: 34px; text-align: right; } /* Task #203 - sound preset picker panel, opened from the "Add sound" pill. */ .wizard-sound-picker { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 4; background: rgba(20,20,20,0.9); border-radius: 16px; padding: 14px; width: min(86%, 340px); display: flex; flex-direction: column; gap: 10px; max-height: 72vh; overflow-y: auto; } .wizard-sound-picker-title { color: #fff; font-size: 13px; font-weight: 700; margin: 0; text-align: center; } .wizard-sound-picker-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .wizard-sound-preset-btn { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .wizard-sound-preset-btn.active { background: var(--gold); border-color: var(--gold); color: #2b1810; } .wizard-sound-mic-toggle { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; justify-content: center; } .wizard-sound-picker-close { align-self: center; border: none; background: none; color: rgba(255,255,255,0.75); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px; } /* Task #243 - Jamendo royalty-free music search, inside the same panel. */ .wizard-jamendo-title { color: #fff; font-size: 13px; font-weight: 700; margin: 4px 0 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 10px; } .wizard-jamendo-search-row { display: flex; gap: 6px; } .wizard-jamendo-search-row input { flex: 1; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12px; } .wizard-jamendo-search-row input::placeholder { color: rgba(255,255,255,0.5); } .wizard-jamendo-search-row button { border: none; background: var(--gold); color: #2b1810; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; } .wizard-jamendo-results { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; } .wizard-jamendo-empty { color: rgba(255,255,255,0.6); font-size: 12px; text-align: center; margin: 6px 0; } .wizard-jamendo-track-btn { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); border-radius: 10px; padding: 6px 8px; cursor: pointer; text-align: left; } .wizard-jamendo-track-btn.active { border-color: var(--gold); background: rgba(255,216,77,0.14); } .wizard-jamendo-track-art { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .wizard-jamendo-track-art-empty { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); color: #fff; font-size: 15px; } .wizard-jamendo-track-info { min-width: 0; display: flex; flex-direction: column; } .wizard-jamendo-track-name { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wizard-jamendo-track-artist { color: rgba(255,255,255,0.65); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wizard-jamendo-browse-link { display: block; text-align: center; font-size: 11px; color: var(--gold); margin: -4px 0 2px; text-decoration: underline; } /* Task: browsable/searchable "#/music" page so people can see the whole royalty-free catalog (names, artists, genres) without opening the camera. */ .music-library-page { max-width: 760px; margin: 0 auto; padding: 0 4px; } .music-library-eyebrow { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 4px; text-align: center; } .music-library-title { font-size: 24px; font-weight: 800; margin: 0 0 8px; text-align: center; color: var(--text-primary); } .music-library-subtitle { font-size: 14px; color: var(--text-secondary); text-align: center; max-width: 520px; margin: 0 auto 18px; } .music-search-row { display: flex; gap: 8px; margin-bottom: 14px; } .music-search-row input { flex: 1; border: 1px solid var(--border-color); border-radius: 999px; padding: 10px 16px; font-size: 14px; background: var(--bg-surface); color: var(--text-primary); } .music-search-row button { border: none; background: var(--gold); color: var(--gold-text-on); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; } .music-genre-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; } .music-genre-chip { border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-secondary); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .music-genre-chip.active { background: var(--gold); border-color: var(--gold); color: var(--gold-text-on); } .music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .music-card { display: flex; align-items: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; } .music-card-art { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .music-card-art-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-surface-alt); color: var(--text-muted); font-size: 18px; } .music-card-info { flex: 1; min-width: 0; } .music-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-card-artist { font-size: 12px; color: var(--text-secondary); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-card-genres { font-size: 10.5px; color: var(--text-muted); margin: 2px 0 0; text-transform: capitalize; } .music-card-play-btn { border: none; background: var(--bg-surface-alt); color: var(--gold); width: 34px; height: 34px; border-radius: 50%; font-size: 13px; flex-shrink: 0; cursor: pointer; } /* Right-side labeled options rail, full-screen vertical-video-app layout with our own icon glyphs */ .wizard-fs-rail { position: absolute; top: 70px; right: 6px; width: 62px; max-height: calc(100% - 230px); background: rgba(20,20,20,0.55); border-radius: 30px; display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto; overflow-x: visible; z-index: 2; /* One flat, fully-rounded pill sized to the icons themselves and floating a few px off the screen edge - matches full-screen vertical video camera rails (reference screenshot) instead of a tall panel stretched down the screen with a fading gradient and per-icon circular backgrounds. overflow-x must stay "visible" (not the default/unset) - setting only overflow-y implicitly clips the X axis too (same class of bug fixed on .icon-nav), which would cut off the tap-to-reveal rail-label bubble whenever it pops out wider than this rail's own width. */ } .wizard-fs-rail-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 8px; background: none; border: none; cursor: pointer; color: #fff; } .wizard-fs-rail-item .rail-label { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.7); background: rgba(0,0,0,0.45); padding: 3px 8px; border-radius: 8px; opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .wizard-fs-rail-item.show-label .rail-label { opacity: 1; transform: translateX(0); } .wizard-fs-rail-item .rail-icon { font-size: 22px; width: 46px; height: 46px; line-height: 46px; text-align: center; flex: 0 0 auto; background: none; border-radius: 50%; transition: transform 0.1s ease, opacity 0.15s ease; /* No circular backdrop per icon on purpose - the reference rail shows plain glyphs sitting directly on the one shared pill background. */ } .wizard-fs-rail-item:active .rail-icon { transform: scale(0.88); opacity: 0.65; } .wizard-fs-rail-item.show-label .rail-icon { opacity: 0.85; } .wizard-fs-rail-item.active .rail-icon, .wizard-fs-rail-item.active .rail-label { color: var(--gold); } .wizard-fs-rail-item[data-tier="2"] { display: none; } .wizard-fs-rail.expanded [data-tier="2"] { display: flex; } .wizard-fs-rail.expanded [data-rail="toggle"] .rail-label { } .wizard-fs-bottom { padding: 10px 0 18px; display: flex; flex-direction: column; gap: 10px; z-index: 2; } .wizard-fs-filter-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px; scrollbar-width: none; } .wizard-fs-filter-rail[hidden] { display: none; } .wizard-fs-filter-rail::-webkit-scrollbar { display: none; } .wizard-fs-filter-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: none; border: none; } .wizard-fs-filter-thumb { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); background: var(--accent-strong); } .wizard-fs-filter-item.active .wizard-fs-filter-thumb { border-color: var(--gold); border-width: 3px; } .wizard-fs-filter-label { font-size: 10px; color: #fff; opacity: 0.85; } .wizard-fs-controls-row { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; } .wizard-fs-gallery-btn { width: 46px; height: 46px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wizard-fs-capture-wrap { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; } /* pointer-events:none is the actual fix for the "camera preview works but the red shutter never reacts" bug: this ring is position:absolute and covers the exact same 76x76 box as the button, and since positioned elements paint (and receive touches/clicks) above normal-flow siblings regardless of DOM order, every tap was landing on this decorative SVG instead of #wizard-fs-capture-btn underneath it - no JS handler on the button was ever being reached. */ .wizard-fs-capture-ring { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; } .wizard-fs-capture-btn { width: 62px; height: 62px; border-radius: 50%; background: #FF3B30; border: 4px solid #fff; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(255,59,48,0.5); transition: transform 0.1s, border-radius 0.15s; /* Without this, a press-and-hold on mobile gets intercepted by the browser's own touch handling (long-press context menu / "is this a scroll?" gesture detection) before our pointerdown/pointerup JS ever sees it reliably - the camera preview works fine but the shutter looks completely dead. touch-action tells the browser this element handles its own gestures; the -webkit lines stop iOS/Android from popping a text-selection/context menu on the hold. */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .wizard-fs-capture-btn.pressed { transform: scale(0.9); } .wizard-fs-capture-btn.recording { border-radius: 14px; width: 40px; height: 40px; } .wizard-fs-done-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--gold); color: #2b1810; font-size: 20px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wizard-fs-done-btn[disabled] { visibility: hidden; } .wizard-fs-hint { text-align: center; font-size: 11px; color: rgba(255,255,255,0.75); padding: 0 20px; } /* Guided photo capture (product mode: front cover / back cover / spine / damage) */ .guided-capture-overlay { position: fixed; inset: 0; background: #000; z-index: 300; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .guided-capture-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; } .guided-capture-step { color: #fff; font-size: 13px; font-weight: 700; } .guided-capture-video-wrap { flex: 1; position: relative; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; } .guided-capture-video-wrap video, .guided-capture-preview { width: 100%; height: 100%; object-fit: cover; display: block; } .guided-capture-thumbs { display: flex; gap: 8px; justify-content: center; padding: 10px; } .guided-thumb { width: 34px; height: 34px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.3); overflow: hidden; background: rgba(255,255,255,0.08); display: block; flex: 0 0 auto; } .guided-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .guided-thumb.current { border-color: var(--gold); } .guided-thumb.done { border-color: #4CAF50; } .guided-capture-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 20px 4px; } .guided-capture-skip { text-align: center; padding-bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0; } .guided-capture-skip a { color: var(--gold); font-size: 13px; font-weight: 600; } /* Barcode/ISBN scanner overlay (Marketplace search + listing form) */ .barcode-scanner-overlay { position: fixed; inset: 0; background: #000; z-index: 300; display: flex; flex-direction: column; } .barcode-scanner-video-wrap { flex: 1; position: relative; overflow: hidden; background: #000; } .barcode-scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .barcode-scanner-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; max-width: 320px; height: 110px; border: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 0 0 2000px rgba(0,0,0,0.5); pointer-events: none; } .barcode-scanner-topbar { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: flex-start; padding: 0 14px; z-index: 2; } .barcode-scanner-bottom { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center; } .barcode-scanner-hint { color: #fff; font-size: 13px; margin: 0 0 10px; } .barcode-scanner-manual-link { display: inline-block; color: var(--gold); font-size: 13px; font-weight: 600; cursor: pointer; } .market-scan-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .post-isbn-row { display: flex; gap: 8px; align-items: center; } .post-isbn-row input { flex: 1; } .form-field-hint { font-size: 12px; margin: 4px 0 0; color: var(--text-secondary); } .post-isbn-lookup-hint { font-size: 12px; margin-top: 4px; } .post-isbn-lookup-hint.ok { color: var(--success); } .post-isbn-lookup-hint.error { color: var(--danger); } .btn-ai-suggest { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent-gold, #c9a24b); background: transparent; color: var(--accent-gold, #c9a24b); font-size: 13px; font-weight: 600; cursor: pointer; } .btn-ai-suggest:hover { background: var(--accent-gold, #c9a24b); color: var(--bg-surface); } .btn-ai-suggest:disabled { opacity: 0.5; cursor: default; } /* Smaller secondary variant used next to the create-wizard caption field - same gold "AI assist" visual language as .btn-ai-suggest above (the Post Ad book-photo button) but lower visual weight so it doesn't compete with the primary Publish action. */ .btn-ai-suggest-sm { padding: 5px 10px; font-size: 12px; margin-top: 6px; border-radius: 999px; } .ai-caption-preview { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent-gold, #c9a24b); background: var(--bg-surface-2, var(--bg-surface)); } .ai-caption-preview-text { font-size: 13px; color: var(--text-primary); margin: 0 0 6px; } .ai-caption-preview-actions { display: flex; gap: 14px; } .ai-caption-preview-actions a { font-size: 12px; font-weight: 600; color: var(--accent-gold, #c9a24b); cursor: pointer; } .ai-caption-preview-actions a:hover { text-decoration: underline; } .ai-listing-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong, var(--accent)) 100%); color: var(--accent-text-on); border: none; border-radius: 12px; padding: 14px 16px; margin: 4px 0 18px; cursor: pointer; } .ai-listing-banner:disabled { opacity: 0.6; cursor: default; } .ai-listing-banner-icon { font-size: 26px; flex: 0 0 auto; } .ai-listing-banner-text { display: flex; flex-direction: column; gap: 2px; } .ai-listing-banner-text strong { font-size: 15px; } .ai-listing-banner-text span { font-size: 12.5px; opacity: 0.92; line-height: 1.35; } .sell-books-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-surface); border: 1.5px solid var(--gold); border-radius: 12px; padding: 12px 14px; margin: 14px 0; text-decoration: none; color: var(--text-primary); } .sell-books-banner-icon { font-size: 24px; flex: 0 0 auto; } .sell-books-banner-arrow { margin-left: auto; font-size: 22px; color: var(--gold); flex: 0 0 auto; } .sell-books-banner .ai-listing-banner-text strong { color: var(--text-primary); } .sell-books-banner .ai-listing-banner-text span { color: var(--text-secondary, var(--text-primary)); opacity: 0.8; } /* Step 2/3: preview + filters + edit tools */ .wizard-filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; } .wizard-filter-swatch { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--accent-strong); cursor: pointer; } .wizard-filter-swatch.active { border-color: var(--gold); } .wizard-capture-row { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; } .wizard-capture-btn { background: var(--accent); color: var(--accent-text-on); border-radius: 30px; padding: 10px 22px; font-weight: 800; } .wizard-preview-wrap { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #111; margin-bottom: 10px; } .wizard-preview-wrap.wizard-preview-small { max-height: 220px; } .wizard-preview-media { width: 100%; max-height: 380px; object-fit: contain; display: block; margin: 0 auto; background: #111; } .wizard-preview-small .wizard-preview-media { max-height: 220px; } .wizard-edit-toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; } .wizard-edit-tool-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wizard-overlay-item { position: absolute; cursor: grab; user-select: none; touch-action: none; padding: 4px 8px; white-space: nowrap; transform: translate(-50%, -50%); } .wizard-overlay-item.text .wizard-overlay-content { font-weight: 800; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .wizard-overlay-item.sticker .wizard-overlay-content { font-size: 36px; } /* Task #204 - three-step size scale (higher specificity than the base .text/.sticker rules above so sm/lg reliably override the md default). */ .wizard-overlay-item.text.size-sm .wizard-overlay-content { font-size: 14px; } .wizard-overlay-item.text.size-lg .wizard-overlay-content { font-size: 30px; } .wizard-overlay-item.sticker.size-sm .wizard-overlay-content { font-size: 24px; } .wizard-overlay-item.sticker.size-lg .wizard-overlay-content { font-size: 52px; } .wizard-overlay-item.dragging { cursor: grabbing; outline: 1px dashed var(--gold); } .wizard-overlay-resize, .wizard-overlay-remove { position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.75); color: #fff; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } .wizard-overlay-resize { right: 18px; font-size: 9px; } .wizard-overlay-remove { right: -8px; font-size: 13px; } .wizard-sticker-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px 0; } .wizard-sticker-picker button { font-size: 24px; background: none; border: none; cursor: pointer; padding: 4px; } /* Task #204 - the "add text" composer panel (size toggle + color swatches), replaces the old bare prompt() flow. */ .wizard-text-composer { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-surface); margin-bottom: 10px; } .wizard-text-composer textarea { width: 100%; resize: none; font-family: inherit; } .wizard-text-size-row, .wizard-text-color-row { display: flex; gap: 8px; justify-content: center; } .wizard-text-size-btn { border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); border-radius: 8px; width: 34px; height: 30px; font-weight: 700; cursor: pointer; } .wizard-text-size-btn.active { border-color: var(--gold); color: var(--gold); } .wizard-text-color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; padding: 0; } .wizard-text-color-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); } /* Task #204 - static (non-interactive) rendering of text/sticker overlay metadata on top of a