/** * Reelym Premium polish — cinematic depth, glass nav, refined cards */ :root { --premium-glow: rgba(201, 168, 76, 0.15); --premium-glass: rgba(17, 17, 24, 0.72); } body { background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(201, 168, 76, 0.08), transparent 50%), radial-gradient(ellipse 80% 50% at 100% 50%, rgba(76, 175, 125, 0.04), transparent 40%), var(--bg); } #nav { backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); background: var(--premium-glass); border-bottom: 1px solid rgba(201, 168, 76, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } .nav-logo { letter-spacing: 0.02em; text-shadow: 0 0 24px var(--premium-glow); } .card, .stat-card, .memory-card, .reel-card, .plan-card, .widget-card, .moat-card { border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .card:hover, .memory-card:hover, .reel-card:hover, .plan-card:hover { transform: translateY(-2px); border-color: rgba(201, 168, 76, 0.2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 168, 76, 0.08); } .btn-gold { box-shadow: 0 4px 16px rgba(201, 168, 76, 0.25); position: relative; overflow: hidden; } .btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.6s ease; } .btn-gold:hover::after { transform: translateX(100%); } .view { animation: premiumFadeIn 0.35s ease; } @keyframes premiumFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .docs-page .docs-topbar { backdrop-filter: blur(16px); background: var(--premium-glass); border-bottom: 1px solid rgba(201, 168, 76, 0.15); } .docs-screenshot img { border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 168, 76, 0.1); } .mood-pack-card, .seasonal-pack-card { backdrop-filter: blur(8px); } #pwa-install-banner { backdrop-filter: blur(12px); background: rgba(26, 26, 36, 0.92); border: 1px solid rgba(201, 168, 76, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } h1, h2, .section-title { font-family: 'Playfair Display', serif; letter-spacing: -0.01em; } #nav .text-gold, .nav-logo span { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-link:hover, .nav-link.active { color: var(--gold-light); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-dim), #2a2a3a); } /* \u2500\u2500 Premium compact top nav \u2500\u2500 BUG THIS FIXES: this used to be `padding: 0 20px`. That shorthand sets ALL FOUR sides, including padding-top \u2014 and because this stylesheet loads AFTER mobile.css in index.html's , this rule won the cascade (same #nav id-selector specificity, later source order) and silently overwrote mobile.css's `@supports (padding: env(safe-area-inset-top)) { #nav { padding-top: env(safe-area-inset-top) } }` rule back to 0 \u2014 on EVERY viewport width, not just desktop, since neither rule is scoped to a breakpoint. On any notched/Dynamic-Island phone (basically every iPhone since the X), that pushed the logo and hamburger button up underneath the status bar/notch: the hamburger was visually clipped or fully unreachable, so the drawer holding the rest of the nav could never be opened. From a user's perspective that reads as "only part of the top menu loads, the rest never appears" \u2014 the drawer itself was fine, it just couldn't be reached. Setting left/right explicitly instead of the shorthand leaves padding-top (and the safe-area rule that sets it) alone. */ #nav { padding-left: 20px; padding-right: 20px; } .nav-logo { font-size: 20px; } .nav-links { gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-links::-webkit-scrollbar { display: none; } /* Runtime overflow detection (frontend/src/core/nav.js `_initNavScrollFade`) toggles these classes only when `.nav-links` is actually scrollable and only on the edge(s) that still have hidden content \u2014 fixes the earlier always-on-mask attempt, which would have permanently clipped the last nav item ("Plans") on any screen wide enough to fit the full row. */ .nav-links.nav-scroll-fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); } .nav-links.nav-scroll-fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%); } .nav-links.nav-scroll-fade-left.nav-scroll-fade-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .nav-link { padding: 7px 11px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } .nav-link:hover { background: rgba(201, 168, 76, 0.08); } .nav-actions { gap: 8px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.06); } /* ── Premium mobile nav drawer ── */ .nav-mobile-panel { background: var(--premium-glass); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-left: 1px solid rgba(201, 168, 76, 0.12); } .nav-mobile-head strong { font-family: 'Playfair Display', serif; font-size: 18px; letter-spacing: 0.01em; } .nav-mobile-link { font-size: 14px; } /* ── Premium sign-in / sign-up (onboarding) form ── Scoped to #view-onboarding only — .card / .form-group / input / .btn are shared base classes used across the whole app, so all rules below are deliberately namespaced to avoid affecting settings, upload, or any other form elsewhere in the product. */ #view-onboarding .card { padding: 32px 28px; border: 1px solid rgba(201, 168, 76, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); } #view-onboarding h2 { letter-spacing: -0.01em; } #view-onboarding .form-group { gap: 8px; margin-bottom: 18px; } #view-onboarding .form-group label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted); } #view-onboarding input { padding: 12px 16px; font-size: 15px; border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } #view-onboarding input:focus { border-color: var(--gold); background: rgba(201, 168, 76, 0.05); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12); } #view-onboarding .btn { padding: 13px 22px; font-size: 15px; border-radius: 10px; } #view-onboarding .step-dots { margin-bottom: 28px; } /* Premium view transition curtain (replaces debug "Navigated to…" as visible UI) */ .lr-view-curtain { position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, rgba(201, 168, 76, 0.12), transparent 55%), rgba(10, 10, 15, 0.72); backdrop-filter: blur(8px); pointer-events: none; transition: opacity 0.28s ease; } .lr-view-curtain.hidden { opacity: 0; visibility: hidden; } .lr-view-curtain-inner { text-align: center; } .lr-view-curtain-ring { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid rgba(201, 168, 76, 0.25); border-top-color: var(--gold); animation: spin 0.8s linear infinite; } .lr-view-curtain-label { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--ivory, #f7f4ec); letter-spacing: 0.02em; } /* Timeline + intelligence suite */ .timeline-chapter-hero { background: linear-gradient(135deg, rgba(201, 168, 76, 0.16), rgba(17, 17, 24, 0.9)); border: 1px solid rgba(201, 168, 76, 0.28); } .timeline-ai-rename { font-size: 12px; color: var(--gold); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .mi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .mi-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 14px; text-align: left; color: var(--soft-white); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .mi-card:hover { border-color: rgba(201, 168, 76, 0.35); transform: translateY(-2px); } .mi-card h4 { font-size: 14px; margin-bottom: 4px; color: var(--gold-light); } .mi-card p { font-size: 12px; color: var(--muted); line-height: 1.45; } .reel-edit-scene-toolbar { display: flex; gap: 6px; flex-wrap: wrap; } .reel-edit-scene-toolbar .btn { padding: 4px 10px; font-size: 12px; } .moodboard-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; } .moodboard-swatch { flex: 0 0 56px; height: 56px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); } @media (max-width: 720px) { .mi-grid { grid-template-columns: 1fr 1fr; } .lr-view-curtain-label { font-size: 16px; } } /* ── Dashboard loading ── */ .dash-skeleton { margin-top: 8px; } .dash-skel-bar { height: 10px; width: 180px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg, #1a1a24, #2a2a38, #1a1a24); background-size: 200% 100%; animation: dash-shimmer 1.2s ease infinite; } .dash-skel-bar.short { width: 110px; } @keyframes dash-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .dash-fallback-card { padding: 1rem; border: 1px solid rgba(201,168,76,0.25); border-radius: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dash-tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; } .dash-tl-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ── Archive cinematic ── */ .archive-shell { max-width: 1100px; } .archive-hero { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .archive-facet-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; position: relative; z-index: 5; } .archive-facet-tab { border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--soft-white); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; pointer-events: auto; position: relative; z-index: 5; } .archive-facet-tab:hover { border-color: var(--gold); color: var(--gold); } .archive-facet-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); } .archive-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; } @media (max-width: 800px) { .archive-layout { grid-template-columns: 1fr; } } .archive-facet-rail { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; } .archive-facet-chip { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: var(--ivory); padding: 10px 12px; border-radius: 10px; cursor: pointer; } .archive-facet-chip.active { border-color: var(--gold); background: rgba(201,168,76,0.12); } .archive-facet-count { color: var(--muted); font-size: 12px; } .archive-skel { min-height: 180px; background: linear-gradient(90deg, #14141c, #222230, #14141c); background-size: 200% 100%; animation: dash-shimmer 1.2s ease infinite; border-radius: 12px; } /* ── Nav more + bottom nav ── */ .nav-more { position: relative; flex-shrink: 0; margin-left: 4px; } .nav-more-trigger { border: 1px solid rgba(201,168,76,0.35) !important; border-radius: 999px !important; color: var(--gold) !important; background: rgba(201,168,76,0.08) !important; } .nav-more-menu { display: none; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #16161f 0%, #0e0e14 100%); border: 1px solid rgba(201,168,76,0.28); box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-more-menu.is-open, .nav-more-menu:not([hidden]) { display: flex; } .nav-more-menu[hidden] { display: none !important; } .nav-more-label { margin: 8px 8px 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory, #f7f4ec); opacity: 0.78; font-weight: 600; } .nav-more-label:first-child { margin-top: 2px; } .nav-more-item { width: 100%; text-align: left; border: none; background: transparent; color: var(--ivory, #f7f4ec); padding: 11px 12px; border-radius: 10px; font-size: 14px; min-height: 44px; cursor: pointer; } .nav-more-item:hover, .nav-more-item:focus-visible { background: rgba(201,168,76,0.12); color: var(--gold); outline: none; } .nav-more-item-danger { color: #e8b4b4; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; } .nav-more-item-danger:hover, .nav-more-item-danger:focus-visible { background: rgba(224,85,85,0.12); color: #ff8f8f; } /* Keep primary links scrollable WITHOUT clipping the More dropdown (More lives as a sibling outside #nav-primary-links). */ #nav-primary-links { overflow-x: auto; scrollbar-width: none; } #nav { display: flex; align-items: center; gap: 8px; } .bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(10,10,15,0.96); border-top: 1px solid rgba(255,255,255,0.1); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; gap: 2px; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: none; color: var(--muted); font-size: 10px; padding: 6px 2px; min-height: 48px; cursor: pointer; } .bottom-nav-item span:first-child { font-size: 18px; line-height: 1; } .bottom-nav-item.active { color: var(--gold); } @media (max-width: 768px) { .bottom-nav { display: flex; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } #pwa-install-banner { bottom: 56px; } }