/* ============================================================ My Circle — styles.css Theme system: [data-theme] × [data-color] on Visual themes: minimal | brutalist | soft | editorial | glass Color themes: paper | midnight | forest | coral | slate ocean | lavender | ember | sand | rose arctic | bronze | plum | neon | sage charcoal | honey | dusk | mint | wine ============================================================ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, video { max-width: 100%; display: block; } button { cursor: pointer; font-family: inherit; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } /* ── Base color variables (paper default) ── */ :root { --bg: #f8f8f5; --surface: #ffffff; --border: #d4d4cc; --text: #1a1a18; --muted: #767672; --accent: #1a1a18; --accent-fg:#ffffff; --danger: #c0392b; --radius: 6px; --shadow: 0 1px 4px rgba(0,0,0,.08); } [data-color="midnight"] { --bg: #0f0f0f; --surface: #1c1c1c; --border: #333333; --text: #e8e8e2; --muted: #888882; --accent: #e8e8e2; --accent-fg:#0f0f0f; } [data-color="forest"] { --bg: #111e11; --surface: #1a2e1a; --border: #2e4a2e; --text: #c8e6c8; --muted: #7aaa7a; --accent: #a8d5a2; --accent-fg:#111e11; } [data-color="coral"] { --bg: #fff5f2; --surface: #ffffff; --border: #f5c6bc; --text: #2d1010; --muted: #a0706a; --accent: #c0392b; --accent-fg:#ffffff; } [data-color="slate"] { --bg: #e8f0fb; --surface: #f4f8ff; --border: #b8cce8; --text: #1a2840; --muted: #607090; --accent: #2c5fa0; --accent-fg:#ffffff; } [data-color="ocean"] { --bg: #0a1628; --surface: #0f1f3a; --border: #1e3a5f; --text: #c8ddf0; --muted: #6a8eb8; --accent: #3b9eff; --accent-fg:#ffffff; } [data-color="lavender"] { --bg: #f3eef8; --surface: #faf7ff; --border: #d4c4e8; --text: #2a1f3d; --muted: #8070a0; --accent: #7c4dbd; --accent-fg:#ffffff; } [data-color="ember"] { --bg: #1a0e08; --surface: #2a1810; --border: #4a2e1e; --text: #f0d0b8; --muted: #b07850; --accent: #e8652a; --accent-fg:#ffffff; } [data-color="sand"] { --bg: #f5f0e6; --surface: #faf8f2; --border: #d8ceb8; --text: #3a3428; --muted: #908060; --accent: #a08040; --accent-fg:#ffffff; } [data-color="rose"] { --bg: #fdf0f3; --surface: #fff7f9; --border: #f0c0cc; --text: #3a1520; --muted: #b06878; --accent: #d44060; --accent-fg:#ffffff; } [data-color="arctic"] { --bg: #eaf6f8; --surface: #f2fbfc; --border: #b0dce4; --text: #14363e; --muted: #508890; --accent: #1a9aaa; --accent-fg:#ffffff; } [data-color="bronze"] { --bg: #181210; --surface: #262018; --border: #4a3a28; --text: #e0d0b8; --muted: #a09070; --accent: #c89a50; --accent-fg:#1a1410; } [data-color="plum"] { --bg: #1a0e20; --surface: #281830; --border: #4a2860; --text: #e0c8f0; --muted: #9870b8; --accent: #c06ee8; --accent-fg:#ffffff; } [data-color="neon"] { --bg: #0a0a0f; --surface: #12121a; --border: #2a2a3a; --text: #e0e0f0; --muted: #7878a0; --accent: #00e8a0; --accent-fg:#0a0a0f; } [data-color="sage"] { --bg: #eef2ec; --surface: #f6f8f4; --border: #c4d0be; --text: #1e2a1a; --muted: #6a8060; --accent: #4a8040; --accent-fg:#ffffff; } [data-color="charcoal"] { --bg: #1e1e22; --surface: #2a2a30; --border: #404048; --text: #d0d0d4; --muted: #88888e; --accent: #a0a0a8; --accent-fg:#1e1e22; } [data-color="honey"] { --bg: #fdf8ee; --surface: #fffcf5; --border: #e8d8b0; --text: #3a3018; --muted: #a09060; --accent: #d4a020; --accent-fg:#ffffff; } [data-color="dusk"] { --bg: #181620; --surface: #201e2a; --border: #383450; --text: #d4d0e8; --muted: #8880a8; --accent: #8070d0; --accent-fg:#ffffff; } [data-color="mint"] { --bg: #eef8f4; --surface: #f4fcf8; --border: #b0dcc8; --text: #142a22; --muted: #508868; --accent: #20a870; --accent-fg:#ffffff; } [data-color="wine"] { --bg: #1e0e14; --surface: #2a1820; --border: #4a2838; --text: #f0c8d8; --muted: #a86880; --accent: #c83060; --accent-fg:#ffffff; } /* ── Visual: minimal (default) ── */ [data-theme="minimal"] { --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-sz: 15px; --line-h: 1.6; --card-radius: var(--radius); --topbar-h: 52px; --bw: 1px; } /* ── Visual: brutalist ── */ [data-theme="brutalist"] { --font-body: 'JetBrains Mono', monospace; --font-display: 'JetBrains Mono', monospace; --font-mono: 'JetBrains Mono', monospace; --font-sz: 14px; --line-h: 1.5; --card-radius: 0px; --topbar-h: 48px; --bw: 2px; } [data-theme="brutalist"] .card, [data-theme="brutalist"] .input, [data-theme="brutalist"] .btn, [data-theme="brutalist"] .topbar { border-width: 2px; } [data-theme="brutalist"] .btn, [data-theme="brutalist"] .input { border-radius: 0; } [data-theme="brutalist"] h2 { text-transform: uppercase; letter-spacing: .05em; } /* ── Visual: soft ── */ [data-theme="soft"] { --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-sz: 15px; --line-h: 1.7; --card-radius: 14px; --topbar-h: 56px; --bw: 1px; --shadow: 0 2px 14px rgba(0,0,0,.06); } [data-theme="soft"] .card { box-shadow: var(--shadow); border-color: transparent; } [data-theme="soft"] .btn-primary { border-radius: 20px; } [data-theme="soft"] .btn-ghost { border-radius: 20px; } /* ── Visual: editorial ── */ [data-theme="editorial"] { --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --font-sz: 15px; --line-h: 1.65; --card-radius: 2px; --topbar-h: 54px; --bw: 1px; } [data-theme="editorial"] h2, [data-theme="editorial"] h3 { font-family: var(--font-display); } [data-theme="editorial"] .brand-name-sm, [data-theme="editorial"] .brand-name { font-family: var(--font-display); font-style: italic; } [data-theme="editorial"] .topbar { border-bottom: 3px double var(--border); } /* ── Visual: glass ── */ [data-theme="glass"] { --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-sz: 15px; --line-h: 1.65; --card-radius: 16px; --topbar-h: 54px; --bw: 1px; --shadow: 0 4px 24px rgba(0,0,0,.08); --glass-blur: 12px; --glass-bg: rgba(255,255,255,.45); --glass-border: rgba(255,255,255,.25); } [data-theme="glass"] .card, [data-theme="glass"] .section-block { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--shadow); } [data-theme="glass"] .topbar { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); } [data-theme="glass"] .btn-primary { border-radius: 20px; backdrop-filter: blur(4px); } [data-theme="glass"] .btn-ghost { border-radius: 20px; background: var(--glass-bg); backdrop-filter: blur(4px); } [data-theme="glass"] .input { background: var(--glass-bg); backdrop-filter: blur(4px); border-color: var(--glass-border); } [data-theme="glass"] .modal-box { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); } [data-theme="glass"] .bottomnav { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--glass-border); } /* Glass adapts to dark color themes */ [data-theme="glass"][data-color="midnight"], [data-theme="glass"][data-color="ocean"], [data-theme="glass"][data-color="ember"], [data-theme="glass"][data-color="bronze"], [data-theme="glass"][data-color="plum"], [data-theme="glass"][data-color="neon"], [data-theme="glass"][data-color="charcoal"], [data-theme="glass"][data-color="dusk"], [data-theme="glass"][data-color="wine"] { --glass-bg: rgba(0,0,0,.35); --glass-border: rgba(255,255,255,.1); } /* ── Base ── */ html { font-family: var(--font-body, 'Inter', sans-serif); font-size: var(--font-sz, 15px); line-height: var(--line-h, 1.6); color: var(--text); background: var(--bg); transition: background .25s, color .25s; } body { min-height: 100vh; } /* ── Screens ── */ .screen { display: none; } .screen.active { display: block; } /* ── Auth landing page ── */ #auth-screen { background: var(--bg); } /* Sticky nav */ .auth-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); } .auth-nav-brand { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; } .auth-nav-actions { display: flex; gap: .5rem; align-items: center; } .auth-signin-btn { display: flex; align-items: center; gap: .35rem; } /* Hero */ .auth-hero { padding: 3rem 1.25rem 2.5rem; } .auth-hero-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .auth-hero-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; } .auth-hero-mark { font-size: 2.5rem; line-height: 1; } .auth-hero-name { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; } .auth-hero-tagline { font-size: 1.35rem; font-weight: 600; line-height: 1.35; margin-bottom: 1rem; color: var(--text); } .auth-hero-sub { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-bottom: 1.5rem; } .auth-hero-sub strong { color: var(--text); } .auth-hero-cta { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; } .auth-hero-signin { display: flex; align-items: center; gap: .5rem; } .auth-hero-note { font-size: .8rem; color: var(--muted); margin: 0; } .trust-pills { display: flex; flex-wrap: wrap; gap: .4rem; } .trust-pill { font-size: .78rem; padding: .25rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); white-space: nowrap; } /* Mock phone preview */ .auth-hero-preview { display: flex; justify-content: center; } .mock-phone { width: 260px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); font-size: .72rem; } .mock-topbar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .7rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: .7rem; } .mock-brand { font-weight: 700; font-size: .75rem; } .mock-nav-dots { display: flex; gap: .4rem; color: var(--muted); } .mock-nav-dots span:first-child { color: var(--accent); font-weight: 600; } .mock-stories { display: flex; gap: .5rem; padding: .5rem .6rem; overflow-x: hidden; border-bottom: 1px solid var(--border); } .mock-story-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .mock-story-ring { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--sc, #2dd4bf), var(--sc, #3b82f6)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; padding: 2.5px; } .mock-story-ring--add { background: none; border: 2px dashed var(--border); color: var(--muted); font-size: 1rem; font-weight: 400; } .mock-story-label { font-size: .6rem; color: var(--muted); max-width: 42px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mock-post { padding: .55rem .65rem; border-bottom: 1px solid var(--border); } .mock-post-header { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; } .mock-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #fff; flex-shrink: 0; } .mock-post-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; } .mock-skel { height: 6px; background: var(--border); border-radius: 999px; } .mock-skel--name { width: 60%; } .mock-skel--time { width: 35%; opacity: .6; } .mock-post-img { height: 120px; border-radius: 8px; margin-bottom: .4rem; display: flex; align-items: center; justify-content: center; background: var(--bg); } .mock-post-img-label { font-size: .7rem; color: var(--muted); } .mock-shimmer { background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.8s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .mock-post-actions { display: flex; gap: .5rem; color: var(--muted); font-size: .65rem; align-items: center; flex-wrap: wrap; } .mock-react { white-space: nowrap; } .mock-comment { margin-left: auto; } /* Feature tiles */ .auth-features { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 1.25rem; } .auth-features-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .auth-feature-tile { padding: 1.25rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; text-align: center; } .af-icon { font-size: 1.75rem; display: block; margin-bottom: .5rem; } .af-title { font-size: .875rem; font-weight: 700; margin-bottom: .4rem; } .af-desc { font-size: .78rem; color: var(--muted); line-height: 1.5; } /* How it works */ .auth-how { padding: 3rem 1.25rem; text-align: center; max-width: 800px; margin: 0 auto; } .auth-section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; } .auth-steps { display: flex; align-items: flex-start; justify-content: center; gap: .5rem; flex-wrap: wrap; } .auth-step { flex: 1; min-width: 160px; max-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; position: relative; } .auth-step-num { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; } .auth-step-icon { font-size: 2rem; margin: .25rem 0 .6rem; display: block; } .auth-step h3 { font-size: .875rem; font-weight: 600; margin-bottom: .4rem; } .auth-step p { font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 0; } .auth-step-arrow { font-size: 1.5rem; color: var(--muted); margin-top: 2rem; flex-shrink: 0; } /* Compare table */ .auth-why { padding: 3rem 1.25rem; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; } .auth-why .auth-section-title { margin-bottom: 1.5rem; } .auth-compare { display: flex; justify-content: center; } .auth-compare-table { width: 100%; max-width: 600px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .875rem; } .act-head, .act-row { display: grid; grid-template-columns: 1fr 1fr 1fr; } .act-head { background: var(--bg); font-weight: 600; font-size: .8rem; border-bottom: 2px solid var(--border); } .act-head > div, .act-row > div { padding: .6rem .75rem; } .act-col-them { color: var(--muted); } .act-col-us { color: var(--accent); } .act-row { border-bottom: 1px solid var(--border); } .act-row:last-child { border-bottom: none; } .act-feature { color: var(--muted); font-size: .8rem; } .act-them { color: var(--muted); } .act-us { color: var(--accent); font-weight: 500; } .act-row:nth-child(even) { background: var(--bg); } /* Final CTA section */ .auth-final-cta { padding: 3rem 1.25rem; text-align: center; } .auth-final-signin { display: inline-flex; align-items: center; gap: .5rem; } /* Setup + footer */ .auth-setup-wrap { max-width: 480px; margin: 0 auto; padding: 0 1.25rem 2rem; } .auth-footer-note { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 1rem; } .auth-footer-note .link { color: var(--muted); text-decoration: underline; } /* Legacy compat */ .brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .brand-mark { font-size: 3.5rem; line-height: 1; } .brand-name { font-size: 2.25rem; font-weight: 700; font-family: var(--font-display, inherit); } .brand-tagline { color: var(--muted); font-size: .95rem; } .auth-note { font-size: .8rem; color: var(--muted); } .btn-lg { padding: .8rem 2rem; font-size: 1rem; } /* Responsive auth layout */ @media (max-width: 720px) { .auth-hero-inner { grid-template-columns: 1fr; gap: 2rem; } .auth-hero-preview { order: -1; } .auth-hero { padding: 2rem 1rem 1.5rem; } .auth-hero-name { font-size: 1.8rem; } .auth-hero-tagline { font-size: 1.1rem; } .auth-features-inner { grid-template-columns: repeat(2, 1fr); } .auth-feature-tile:last-child { grid-column: 1 / -1; } .auth-steps { flex-direction: column; align-items: center; } .auth-step-arrow { transform: rotate(90deg); margin: 0; } .auth-compare-table { font-size: .78rem; } } @media (max-width: 440px) { .auth-features-inner { grid-template-columns: 1fr; } .auth-feature-tile:last-child { grid-column: auto; } .mock-phone { width: 220px; } } /* ── Demo banner ── */ .demo-banner { background: var(--border); color: var(--muted); font-size: .8rem; text-align: center; padding: .5rem 1rem; } /* ── Offline banner ── */ .offline-banner { background: #7c4a00; color: #fff; font-size: .8rem; font-weight: 500; text-align: center; padding: .5rem 1rem; position: sticky; top: 0; z-index: 400; } /* ── Auth setup panel ── */ .auth-setup { width: 100%; border: 1px solid var(--border); border-radius: var(--radius, 8px); font-size: .875rem; } .auth-setup-toggle { padding: .6rem .85rem; cursor: pointer; color: var(--muted); list-style: none; user-select: none; } .auth-setup-toggle::-webkit-details-marker { display: none; } .auth-setup-toggle::before { content: '▸ '; font-size: .75rem; } details[open] .auth-setup-toggle::before { content: '▾ '; } .auth-setup-body { padding: .85rem; border-top: 1px solid var(--border); text-align: left; display: flex; flex-direction: column; gap: .65rem; } .auth-setup-body p { color: var(--muted); margin: 0; } .setup-steps { margin: 0; padding-left: 1.4rem; color: var(--muted); display: flex; flex-direction: column; gap: .3rem; } .setup-steps li { line-height: 1.5; } .setup-input-row { display: flex; gap: .5rem; } .setup-input-row .input { flex: 1; font-size: .8rem; font-family: var(--font-mono, monospace); } /* ── Topbar ── */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-h, 52px); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem; } .topbar-brand { display: flex; align-items: center; gap: .4rem; font-weight: 700; } .brand-mark-sm { font-size: 1.1rem; } .brand-name-sm { font-size: 1rem; font-family: var(--font-display, inherit); } .topbar-nav { display: flex; gap: .15rem; flex: 1; } .nav-link { padding: .35rem .65rem; border-radius: var(--radius); font-size: .85rem; color: var(--muted); transition: color .15s, background .15s; } .nav-link:hover { color: var(--text); background: var(--bg); } .nav-link.active { color: var(--text); font-weight: 600; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: .25rem; position: relative; } .nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; overflow: hidden; transition: opacity .15s; } .nav-avatar:hover { opacity: .8; } .nav-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ── Main ── */ #main { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem; } /* ── Pages ── */ .page { animation: page-in .15s ease; } @keyframes page-in { from { opacity:0; } to { opacity:1; } } .page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; } .page-header h2 { font-size: 1.35rem; font-weight: 700; flex: 1; font-family: var(--font-display, inherit); } .page-header-actions { display: flex; gap: .5rem; margin-left: auto; } /* ── Section block ── */ .section-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .section-block h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .85rem; } /* ── Cards ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); overflow: hidden; } .card-body { padding: 1rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; } /* ── Collection / circle cards ── */ .coll-card { cursor: pointer; transition: box-shadow .15s; } .coll-card:hover { box-shadow: var(--shadow); } .coll-thumb { aspect-ratio: 16/9; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--border); font-size: 2rem; overflow: hidden; } .coll-thumb img { width: 100%; height: 100%; object-fit: cover; } .coll-card .card-body { padding: .85rem 1rem; } .coll-card h4 { font-size: .95rem; font-weight: 600; margin-bottom: .2rem; } .card-meta { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; } /* ── Upload progress bar ── */ .upload-progress-wrap { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; } .upload-progress-track { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; } .upload-progress-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width .2s ease; } .upload-progress-label { font-size: .78rem; color: var(--muted); min-width: 2.8rem; text-align: right; } /* ── Post modal ── */ .post-dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; user-select: none; } .post-dropzone:hover, .post-dropzone:focus, .post-dropzone.dropzone--over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; } .post-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: .35rem; } .post-dropzone-icon { font-size: 1.6rem; } .post-dropzone-inner > span { font-size: .9rem; color: var(--muted); } .link-text { color: var(--accent); cursor: pointer; } .post-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .4rem; margin-top: -.2rem; } .post-preview-item { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .post-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Audience picker */ .audience-options { display: flex; flex-direction: column; gap: .15rem; } .audience-option { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: background .1s, border-color .1s; } .audience-option:hover { background: var(--bg); } .audience-option:has(input:checked) { background: var(--bg); border-color: var(--accent); } .audience-option input { margin-top: .2rem; accent-color: var(--accent); flex-shrink: 0; } .audience-label { font-weight: 600; font-size: .92rem; } /* Inline checkbox label (e.g. "Save as album" option in post modal) */ .inline-check-label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; user-select: none; padding: .35rem 0; } .inline-check-label input[type="checkbox"] { accent-color: var(--accent); flex-shrink: 0; } /* Circle picker (shown when "Specific circles" is selected) */ .circle-picker { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem .6rem .6rem 2rem; } .circle-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; cursor: pointer; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); user-select: none; transition: border-color .1s, background .1s; } .circle-check:hover { background: var(--bg); } .circle-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .circle-check input { accent-color: var(--accent); } /* ── Feed album cards ── */ #feed-list { display: flex; flex-direction: column; gap: 1.25rem; } .feed-album-wrapper { display: flex; flex-direction: column; gap: .5rem; } .feed-album-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .feed-album-card:hover { box-shadow: var(--shadow); } .feed-album-card--open { box-shadow: var(--shadow); } .feed-album-cover { position: relative; aspect-ratio: 16/9; background: var(--bg); overflow: hidden; } .feed-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-album-count { position: absolute; bottom: .5rem; right: .6rem; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px; } .feed-album-meta { padding: .75rem 1rem; } .feed-album-title { font-size: 1rem; font-weight: 600; margin-bottom: .2rem; } .feed-album-byline { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; } .feed-album-sharer { font-weight: 600; color: var(--text); } .feed-album-sharer--clickable { cursor: pointer; } .feed-album-sharer--clickable:hover { text-decoration: underline; } .feed-album-dot { opacity: .4; } .feed-album-expand-hint { font-style: italic; opacity: .55; } .feed-album-caption { font-size: .88rem; margin-top: .45rem; color: var(--text); line-height: 1.5; } .feed-album-card--text .feed-album-meta { padding: 1rem; } .feed-album-card--text .feed-album-caption { font-size: 1rem; margin-top: .3rem; } .feed-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; padding: 0 .1rem; } /* ── Media items ── */ .media-item { aspect-ratio: 1; border-radius: var(--card-radius, var(--radius)); overflow: hidden; background: var(--bg); border: 1px solid var(--border); cursor: pointer; position: relative; } .media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; } .media-item:hover img, .media-item:hover video { opacity: .88; } .media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 55%); opacity: 0; transition: opacity .2s; display: flex; align-items: flex-end; justify-content: space-between; padding: .5rem; color: #fff; font-size: .75rem; } .media-item:hover .media-overlay { opacity: 1; } .media-time { opacity: .75; font-size: .7rem; } /* ── Referenced media (from linked albums) ── */ .media-item--ref::after { content: '↗'; position: absolute; top: .3rem; right: .3rem; background: rgba(0,0,0,.5); color: #fff; font-size: .65rem; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* ── My Data managed items (action buttons on hover) ── */ .media-item--managed { cursor: default; } .media-item--managed img { cursor: pointer; } .media-item-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: .2rem; padding: .35rem .25rem; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%); opacity: 0; transition: opacity .2s; } .media-item--managed:hover .media-item-actions, .media-item--managed:focus-within .media-item-actions, .media-item--managed.active .media-item-actions { opacity: 1; } .mia-btn { border: none; background: rgba(255,255,255,.18); color: #fff; border-radius: 50%; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: .85rem; cursor: pointer; transition: background .15s; padding: 0; flex-shrink: 0; } .mia-btn:hover { background: rgba(255,255,255,.35); } .mia-btn:disabled { opacity: .45; cursor: not-allowed; } .mia-del:hover { background: rgba(220,38,38,.5); } /* ── Hidden filter pill ── */ .filter-pill--locked { font-size: .78rem; } .filter-pill--locked.active { background: #6b21a8; border-color: #7c3aed; color: #fff; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; border: 1px solid transparent; transition: background .15s, color .15s, opacity .15s; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover { opacity: .82; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--bg); } .btn-sm { padding: .28rem .7rem; font-size: .8rem; } .danger-btn { color: var(--danger) !important; border-color: transparent !important; } .danger-btn:hover { background: rgba(192,57,43,.08) !important; } /* ── Inputs ── */ .input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: .875rem; outline: none; transition: border-color .15s; } .input:focus { border-color: var(--accent); } textarea.input { resize: vertical; min-height: 80px; } .input-row { display: flex; gap: .5rem; } .input-row .input { flex: 1; } .select-sm { padding: .3rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: .82rem; cursor: pointer; } /* ── Form ── */ .form-block { display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin-bottom: 1.5rem; } .form-field { display: flex; flex-direction: column; gap: .3rem; } .form-field label { font-size: .8rem; font-weight: 500; color: var(--muted); } .form-actions { display: flex; gap: .5rem; } /* ── Profile ── */ .profile-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); margin-bottom: 1.5rem; } .avatar-xl { width: 72px; height: 72px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; flex-shrink: 0; overflow: hidden; } .avatar-xl img { width: 100%; height: 100%; object-fit: cover; } .profile-info { flex: 1; } .profile-info h3 { font-size: 1.2rem; font-weight: 700; } /* ── Members strip ── */ .members-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .member-chip { display: flex; align-items: center; gap: .35rem; padding: .25rem .65rem; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; font-size: .8rem; } .chip-remove { background: none; border: none; padding: 0 0 0 .15rem; font-size: .9rem; line-height: 1; color: var(--muted); cursor: pointer; opacity: .6; } .chip-remove:hover { opacity: 1; color: var(--danger, #c0392b); } /* ── Circles list page ── */ .circles-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .circles-search-input { flex: 1; min-width: 160px; max-width: 340px; height: 34px; padding: 0 .75rem; font-size: .85rem; } .filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; } .filter-pill { padding: .3rem .75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; color: var(--muted); cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .filter-pill:hover { color: var(--text); background: var(--bg); } .filter-pill.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); font-weight: 600; } .circles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* Circle card */ .circle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; } .circle-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); transform: translateY(-1px); } .circle-card-cover { position: relative; aspect-ratio: 16/7; background: var(--circle-color, var(--border)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; overflow: hidden; } .circle-card-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .circle-card-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.35)); } .circle-card-badge { position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.45); color: #fff; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; } .circle-card-badge--owner { background: color-mix(in srgb, var(--accent) 80%, rgba(0,0,0,.5)); } .circle-card-mute { position: absolute; top: .5rem; left: .5rem; font-size: .85rem; opacity: .75; } .circle-card-body { padding: .9rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; } .circle-card-title { font-size: .98rem; font-weight: 700; } .circle-card-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .circle-card-meta { display: flex; gap: .75rem; align-items: center; margin-top: auto; padding-top: .45rem; } .circle-card-avatars { display: flex; } .circle-card-avatars .mini-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--border); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; margin-left: -6px; flex-shrink: 0; } .circle-card-avatars .mini-avatar:first-child { margin-left: 0; } .circle-card-members-label { font-size: .75rem; color: var(--muted); } .circle-card-activity { font-size: .72rem; color: var(--muted); margin-left: auto; } .circle-card-edit { position: absolute; bottom: .6rem; right: .6rem; opacity: 0; transition: opacity .15s; font-size: .8rem; padding: .2rem .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); } .circle-card:hover .circle-card-edit { opacity: 1; } /* Empty state icon */ .empty-icon { font-size: 3rem; margin-bottom: .5rem; opacity: .3; } /* ── Circle detail hero ── */ .circle-hero { margin-bottom: 0; padding: 1.25rem 0 0; } .circle-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .circle-hero-body { display: flex; align-items: flex-start; gap: 1.1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0; } .circle-hero-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; background: var(--circle-color, var(--border)); font-weight: 700; } /* Album cover thumbnail — mirrors circle icon size but square */ .album-cover-thumb { width: 72px; height: 72px; border-radius: var(--card-radius, 8px); overflow: hidden; flex-shrink: 0; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .circle-hero-info { flex: 1; min-width: 0; } .circle-hero-info h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .25rem; font-family: var(--font-display, inherit); } .circle-detail-desc { font-size: .85rem; } .circle-hero-stats { display: flex; gap: 1.25rem; margin-top: .5rem; flex-wrap: wrap; } .circle-stat { font-size: .8rem; color: var(--muted); } .circle-stat strong { color: var(--text); font-weight: 600; } /* ── Circle tabs ── */ .circle-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; } .circle-tab { padding: .65rem 1.1rem; font-size: .85rem; font-weight: 600; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .12s, border-color .12s; } .circle-tab:hover { color: var(--text); } .circle-tab.active { color: var(--text); border-bottom-color: var(--accent); } /* ── Circle members grid ── */ .circle-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } .circle-member-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); padding: .85rem 1rem; display: flex; align-items: center; gap: .75rem; } .circle-member-card--clickable { cursor: pointer; transition: box-shadow .12s; } .circle-member-card--clickable:hover { box-shadow: var(--shadow); } .circle-member-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; flex-shrink: 0; color: var(--text); } .circle-member-info { flex: 1; min-width: 0; } .circle-member-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .circle-member-email { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .circle-member-role { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .15rem .4rem; border: 1px solid var(--border); border-radius: 99px; flex-shrink: 0; } .circle-member-role--owner { border-color: var(--accent); color: var(--accent); } /* Friend suggestion pills in add-member modal */ .add-member-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; } .member-suggest-pill { padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; color: var(--muted); cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .member-suggest-pill:hover { color: var(--text); background: var(--bg); } .member-suggest-pill.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); } /* ── People list ── */ .people-list { display: flex; flex-direction: column; gap: .5rem; } .person-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .person-info { flex: 1; } .person-name { font-weight: 600; font-size: .9rem; } .person-email { font-size: .78rem; color: var(--muted); } .person-actions { display: flex; gap: .35rem; } .avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; } /* ── Badge ── */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 5px; height: 18px; background: var(--border); border-radius: 99px; font-size: .7rem; font-weight: 700; } /* ── Misc text ── */ .muted-text { color: var(--muted); font-size: .875rem; } .small { font-size: .78rem; } .link { color: var(--accent); text-decoration: underline; } /* ── Empty state ── */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); grid-column: 1 / -1; } /* ── Theme / color pickers (settings) ── */ .theme-row { display: flex; flex-wrap: wrap; gap: .5rem; } .theme-pill { padding: .35rem .85rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; transition: background .15s, color .15s, border-color .15s; } .theme-pill.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .theme-pill:hover { background: var(--bg); } .color-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; } .color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dot-border, #ccc); background: var(--dot-bg, #fff); cursor: pointer; transition: transform .15s; } .color-dot:hover, .color-dot.active { transform: scale(1.25); } .color-dot.active { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Setting row ── */ .setting-row { display: flex; align-items: center; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--border); gap: 1rem; font-size: .9rem; } .setting-row:last-child { border-bottom: none; } /* ── Storage ── */ .storage-wrap { margin-bottom: .75rem; } .storage-bar-track { height: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; margin-bottom: .4rem; } .storage-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; width: 0%; transition: width .5s; } .large-file-row { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--muted); } .large-file-row:last-child { border-bottom: none; } /* ── Prose (about) ── */ .prose { max-width: 620px; } .prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; font-family: var(--font-display, inherit); } .prose h3:first-child { margin-top: 0; } .prose p { margin-bottom: .85rem; color: var(--muted); line-height: 1.7; } .prose ul { padding-left: 1.25rem; color: var(--muted); line-height: 1.85; margin-bottom: .85rem; } .prose code { font-family: var(--font-mono, monospace); font-size: .85em; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: .1em .35em; } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fade-in .15s ease; } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); padding: 1.5rem; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; animation: modal-up .15s ease; } @keyframes modal-up { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } } .modal-box h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; } .modal-close-btn { position: absolute; top: .75rem; right: .75rem; background: none; border: none; font-size: 1rem; color: var(--muted); padding: .25rem; } .modal-close-btn:hover { color: var(--text); } .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; } /* ── Lightbox ── */ .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); } .lightbox-inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: min(90vw, 780px); max-height: 95vh; width: 100%; overflow-y: auto; } .lightbox-close { position: absolute; top: .5rem; right: .5rem; z-index: 2; background: rgba(0,0,0,.55); border: none; color: #fff; font-size: 1.1rem; padding: .3rem .55rem; border-radius: 50%; line-height: 1; cursor: pointer; } #lightbox-img { max-height: 65vh; width: 100%; object-fit: contain; border-radius: var(--radius) var(--radius) 0 0; position: relative; } .lightbox-meta { background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); padding: .85rem 1rem; max-height: 260px; overflow-y: auto; } /* ── Reactions & comments ── */ .reactions-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; } .react-btn { display: flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--text); font-size: .8rem; cursor: pointer; transition: background .15s; } .react-btn.liked { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .comments-area { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .75rem; } .comment-row { font-size: .84rem; line-height: 1.5; } .comment-author { font-weight: 700; margin-right: .3rem; } .comment-text { word-break: break-word; } .comment-form { display: flex; gap: .5rem; } .comment-form .input { flex: 1; } /* ── Toast ── */ #toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 400; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; } .toast { padding: .6rem 1rem; background: var(--text); color: var(--bg); border-radius: var(--radius); font-size: .875rem; pointer-events: auto; animation: toast-in .2s ease; max-width: 300px; } .toast { display: flex; align-items: center; gap: .6rem; } .toast-error { background: var(--danger); color: #fff; } @keyframes toast-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .dismissing { animation: toast-out .2s ease forwards; } @keyframes toast-out { to { opacity:0; transform:translateY(6px); } } .toast-action-btn { background: none; border: 1px solid currentColor; color: inherit; opacity: .85; padding: .15rem .5rem; border-radius: var(--radius); font-size: .78rem; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: opacity .1s; } .toast-action-btn:hover { opacity: 1; } /* ── Loading ── */ #loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.15); z-index: 500; display: flex; align-items: center; justify-content: center; } .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Profile stats ── */ .profile-stats-row { display: flex; gap: 0; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); margin-bottom: 1.5rem; overflow: hidden; } .profile-stat { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .9rem .5rem; border-right: 1px solid var(--border); } .profile-stat:last-child { border-right: none; } .profile-stat-n { font-size: 1.3rem; font-weight: 700; line-height: 1.2; } .profile-stat-l { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; } /* ── Card edit button ── */ .card-edit-btn { flex-shrink: 0; padding: .15rem .4rem !important; font-size: .85rem !important; color: var(--muted) !important; border-color: transparent !important; opacity: 0; transition: opacity .15s; } .coll-card:hover .card-edit-btn { opacity: 1; } /* ── My Data filter pills ── */ .my-data-filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; } .filter-pill { padding: .28rem .75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .8rem; transition: background .15s, color .15s, border-color .15s; } .filter-pill.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .filter-pill:hover:not(.active) { background: var(--bg); color: var(--text); } /* ── My Data section heading ── */ .my-data-section-heading { grid-column: 1 / -1; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .75rem 0 .25rem; border-top: 1px solid var(--border); margin-top: .25rem; } .my-data-section-heading:first-child { border-top: none; margin-top: 0; } /* ── Notification bell ── */ .notif-bell { position: relative; background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: .25rem .35rem; border-radius: var(--radius); transition: background .15s; line-height: 1; } .notif-bell:hover { background: var(--surface); } .notif-badge { position: absolute; top: -.1rem; right: -.1rem; background: #ef4444; color: #fff; font-size: .6rem; font-weight: 700; min-width: 1rem; height: 1rem; border-radius: 99px; padding: 0 .2rem; display: flex; align-items: center; justify-content: center; pointer-events: none; } .notif-panel { position: absolute; top: calc(100% + .4rem); right: .5rem; width: 320px; max-width: calc(100vw - 1rem); background: var(--card-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200; overflow: hidden; } .notif-item { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); } .notif-item:last-child { border-bottom: none; } .notif-avatar { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .85rem; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: .85rem; margin-bottom: .4rem; } .notif-actions { display: flex; gap: .4rem; } .notif-done { padding: .35rem 0; font-size: .82rem; color: var(--muted); } .notif-empty { padding: .75rem 1rem; color: var(--muted); font-size: .85rem; margin: 0; } /* ── Friend status badge ── */ .status-badge { display: inline-flex; align-items: center; font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 99px; vertical-align: middle; } .status-badge--pending { background: #fef3c7; color: #92400e; } /* ── Circle doc chips (inside feed posts) ── */ .circle-docs-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; } .circle-doc-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .2rem .5rem; font-size: .75rem; color: var(--text); } .circle-doc-chip span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Post preview for docs ── */ .post-preview-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .5rem; gap: .25rem; font-size: 1.8rem; } .post-preview-name { font-size: .68rem; color: var(--muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* ── btn-link helper ── */ .btn-link { background: none; border: none; cursor: pointer; padding: 0; } /* ── Profile picture avatars in friends list / notifications ── */ .notif-avatar-img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .avatar-sm-img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .person-row--clickable { cursor: pointer; } .person-row--clickable:hover { background: var(--surface-hover, rgba(0,0,0,.04)); border-radius: var(--radius); } /* ── Drive file manager cards ── */ .drive-file-card { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .drive-file-non-media-item { cursor: default !important; } .drive-file-non-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); } .drive-file-icon { font-size: 2.5rem; line-height: 1; display: block; } .drive-file-label { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); padding: 0 .1rem; font-weight: 500; } .drive-file-meta { font-size: .68rem; color: var(--muted); padding: 0 .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkbox-label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; cursor: pointer; } /* ── Post card (chat-wall feed) ── */ .post-card-wrapper { margin-bottom: 1rem; } .post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); overflow: hidden; } .post-card-header { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem .5rem; } .post-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--border); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .post-avatar-img { width: 100%; height: 100%; object-fit: cover; } .post-avatar-initials { font-size: .85rem; font-weight: 700; color: var(--text); } .post-author-meta { display: flex; flex-direction: column; flex: 1; } .post-author-name { font-weight: 600; font-size: .9rem; line-height: 1.2; } .post-author-name--clickable { cursor: pointer; } .post-author-name--clickable:hover { text-decoration: underline; } .post-avatar--clickable { cursor: pointer; } .post-avatar--clickable:hover { opacity: .8; } .post-author-time { font-size: .75rem; color: var(--muted); } /* ── Post ⋯ menu ── */ .post-menu-slot { margin-left: auto; } .post-menu-wrap { position: relative; flex-shrink: 0; } .post-menu-btn { background: none; border: none; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: .15rem .45rem; border-radius: var(--radius); letter-spacing: .04em; transition: background .1s, color .1s; } .post-menu-btn:hover { background: var(--bg); color: var(--text); } .post-menu { min-width: 168px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.12); overflow: hidden; } .post-menu-fixed { position: fixed; z-index: 9999; } .post-menu-item { display: block; width: 100%; padding: .55rem .85rem; text-align: left; background: none; border: none; font-size: .85rem; color: var(--text); cursor: pointer; transition: background .1s; white-space: nowrap; } .post-menu-item:hover { background: var(--bg); } .post-menu-item--danger { color: var(--danger); } .post-menu-item--danger:hover { background: rgba(192,57,43,.06); } .post-caption { padding: .4rem 1rem .5rem; font-size: .9rem; line-height: 1.55; color: var(--text); } .post-media { overflow: hidden; } .post-media-single .post-media-item { aspect-ratio: 4/3; } .post-media-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .post-media-grid2 .post-media-item { aspect-ratio: 1; } .post-media-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; } .post-media-grid3 .post-media-item { aspect-ratio: 1; } .post-media-item { overflow: hidden; cursor: pointer; background: var(--bg); position: relative; } .post-media-item img, .post-media-item video { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; } .post-media-item:hover img { opacity: .88; } .post-media-more { aspect-ratio: 1; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; cursor: pointer; } .post-actions { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem .65rem; border-top: 1px solid var(--border); } .post-like-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--text); font-size: .82rem; cursor: pointer; transition: background .15s, color .15s; } .post-like-btn.liked { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } /* ── Profile posts grid ── */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } .profile-post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius)); overflow: hidden; } .profile-post-thumb { aspect-ratio: 4/3; background: var(--bg); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--border); } .profile-post-thumb img { width: 100%; height: 100%; object-fit: cover; } .profile-post-caption { padding: .5rem .75rem .25rem; font-size: .8rem; color: var(--muted); line-height: 1.45; } .profile-post-actions { display: flex; align-items: center; justify-content: space-between; padding: .35rem .75rem .5rem; } /* ── Stories bar ── */ #stories-bar { display: flex; gap: .75rem; overflow-x: auto; padding: .5rem 0 .75rem; margin-bottom: .75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #stories-bar::-webkit-scrollbar { display: none; } .story-circle { display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; flex-shrink: 0; } /* Story ring wrapper — provides the gradient halo */ .story-ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #2dd4bf 0%, #06b6d4 50%, #3b82f6 100%); display: flex; align-items: center; justify-content: center; transition: transform .15s; flex-shrink: 0; } .story-ring--viewed { background: var(--border); } .story-ring--add { background: none; border: 2.5px dashed var(--border); padding: 0; } .story-circle:hover .story-ring { transform: scale(1.07); } /* Badge showing story count when a person has posted multiple stories */ .story-count-badge { position: absolute; bottom: -2px; right: -2px; background: var(--accent); color: var(--accent-fg); font-size: .65rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); pointer-events: none; } .story-avatar { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; overflow: hidden; border: 2.5px solid var(--surface); } .story-avatar--add { border: none; background: var(--border); font-size: 1.5rem; color: var(--muted); width: 60px; height: 60px; } .story-avatar--viewed { border-color: var(--surface); } .story-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .story-avatar-initials { font-size: .9rem; font-weight: 700; } .story-label { font-size: .7rem; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* ── Story viewer overlay ── */ .story-viewer-overlay { position: fixed; inset: 0; z-index: 500; background: #000; display: flex; align-items: center; justify-content: center; animation: fade-in .15s ease; } .story-viewer-inner { position: relative; width: min(420px, 100vw); height: 100vh; display: flex; flex-direction: column; } .story-progress-bar { display: flex; gap: 2px; padding: .5rem .75rem; position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 2; } .story-progress-seg { flex: 1; height: 3px; background: rgba(255,255,255,.35); border-radius: 99px; transition: background .2s; } .story-progress-seg.done { background: #fff; } .story-progress-seg.active { background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.35) 0%); animation: story-progress 5s linear forwards; } @keyframes story-progress { to { background: linear-gradient(to right, #fff 100%, rgba(255,255,255,.35) 100%); } } .story-viewer-header { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .85rem); left: .75rem; right: .75rem; z-index: 3; display: flex; align-items: center; gap: .5rem; padding-top: .3rem; } .story-viewer-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .8rem; flex-shrink: 0; } .story-viewer-avatar img { width: 100%; height: 100%; object-fit: cover; } .story-viewer-name { color: #fff; font-size: .875rem; font-weight: 600; flex: 1; } .story-viewer-delete { background: rgba(180,0,0,.55); border: none; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; flex-shrink: 0; margin-right: .2rem; } .story-viewer-delete:hover { background: rgba(200,0,0,.8); } .story-viewer-close { background: rgba(0,0,0,.4); border: none; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: .9rem; cursor: pointer; flex-shrink: 0; } .story-viewer-media { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .story-viewer-prev, .story-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.3); border: none; color: #fff; font-size: 1.8rem; width: 40px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius); z-index: 2; } .story-viewer-prev { left: .4rem; } .story-viewer-next { right: .4rem; } /* Text-only story slide */ .story-caption-slide { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 2.5rem; font-size: 1.35rem; font-weight: 500; line-height: 1.5; color: #fff; width: 100%; height: 100%; background: linear-gradient(145deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%); word-break: break-word; } /* ── Post reactions (multi-type) ── */ .post-reactions { display: flex; gap: .3rem; flex-wrap: wrap; } .post-react-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .55rem; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--text); font-size: .8rem; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; } .post-react-btn.reacted { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .post-react-btn:hover:not(.reacted) { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); } /* ── Post actions bar update ── */ .post-actions { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem .65rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .post-comments-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .55rem; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--muted); font-size: .8rem; cursor: pointer; transition: background .15s; white-space: nowrap; margin-left: auto; } .post-comments-btn:hover { background: var(--surface); color: var(--text); } /* ── Post comments section ── */ .post-comments-section { border-top: 1px solid var(--border); padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; } .post-comments-list { display: flex; flex-direction: column; gap: .4rem; } .post-comment-row { font-size: .84rem; line-height: 1.5; display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; } .post-comment-author { font-weight: 700; } .post-comment-text { flex: 1; min-width: 0; } .post-comment-time { font-size: .72rem; color: var(--muted); flex-shrink: 0; } .post-comment-form { display: flex; gap: .5rem; margin-top: .25rem; } .post-comment-form .input { flex: 1; } .post-comment-input { padding: .35rem .65rem; } /* ── Text-only posts ── */ .post-card--text-only .post-text-only-body { padding: 1.25rem 1.25rem 1rem; font-size: 1.35rem; font-weight: 600; line-height: 1.4; font-family: var(--font-display, inherit); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); color: var(--text); min-height: 80px; display: flex; align-items: center; } /* ── Circle feed ── */ #circle-detail-feed { display: flex; flex-direction: column; gap: .75rem; } /* ── Circle / small post card variant ── */ .post-card--sm .post-card-header { padding: .55rem .75rem .35rem; } .post-card--sm .post-avatar { width: 30px; height: 30px; } .post-card--sm .post-avatar-initials { font-size: .75rem; } .post-card--sm .post-author-name { font-size: .82rem; } .post-card--sm .post-author-time { font-size: .68rem; } .post-card--sm .post-caption { padding: .3rem .75rem .4rem; font-size: .82rem; } .post-card--sm .post-actions { padding: .4rem .75rem .5rem; gap: .3rem; } .post-card--sm .post-react-btn { font-size: .75rem; padding: .18rem .4rem; } .post-carousel--sm { aspect-ratio: 4/3; max-height: 340px; } .post-actions--sm { flex-wrap: wrap; } /* ── Video media items ── */ .post-media-item--video { position: relative; } .post-media-item--video video { width: 100%; height: 100%; object-fit: cover; } .video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); } .video-play-btn { background: rgba(0,0,0,.55); border: none; color: #fff; font-size: 1.4rem; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s; } .video-play-btn:hover { background: rgba(0,0,0,.8); transform: scale(1.1); } /* ── Profile avatar edit ── */ .profile-avatar-edit { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); margin-bottom: .25rem; } .avatar-edit-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; } .avatar-edit-preview img { width: 100%; height: 100%; object-fit: cover; } /* ── Profile share URL ── */ .profile-share-url { font-family: var(--font-mono, monospace); font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; word-break: break-all; margin: .5rem 0; color: var(--text); } /* ── Keyboard shortcuts modal ── */ .shortcuts-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; } .shortcut-row { display: flex; align-items: center; gap: .75rem; font-size: .88rem; } .shortcut-row kbd { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .15rem .45rem; font-family: var(--font-mono, monospace); font-size: .78rem; min-width: 1.6rem; } .shortcut-row span { color: var(--muted); } /* ── Lightbox seen by ── */ .lightbox-seen-by { display: inline-flex; align-items: center; margin-left: auto; padding: .2rem .5rem; } /* ── Feed sentinel (infinite scroll) ── */ #feed-sentinel { height: 40px; display: flex; align-items: center; justify-content: center; } #feed-sentinel::after { content: ''; width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } /* ── Notification digest ── */ .notif-digest { padding: .65rem 1rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } .notif-digest-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; } .notif-digest-body { font-size: .83rem; color: var(--text); } /* ── Responsive ── */ @media (max-width: 640px) { /* ── Topbar ── */ .topbar { padding: 0 .75rem; gap: .5rem; } .topbar-nav { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; } .topbar-nav::-webkit-scrollbar { display: none; } .nav-link { padding: .3rem .45rem; font-size: .78rem; white-space: nowrap; } .brand-name-sm { display: none; } /* ── Main padding ── */ #main { padding: 1rem .75rem; } /* ── Page headers ── */ .page-header { flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; } .page-header h2 { font-size: 1.15rem; } /* ── Grids ── */ .media-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .4rem; } .card-grid { grid-template-columns: 1fr 1fr; gap: .65rem; } .circles-grid { grid-template-columns: 1fr; gap: .75rem; } .circle-members-grid { grid-template-columns: 1fr; } /* ── Circles toolbar: stack search above pills ── */ .circles-toolbar { flex-direction: column; align-items: stretch; gap: .5rem; } .circles-search-input { max-width: 100%; } .filter-pills { justify-content: flex-start; } /* ── Circle hero ── */ .circle-hero-top { flex-wrap: wrap; gap: .4rem; } .circle-hero-top #back-from-circle { order: 0; } .circle-hero-top .page-header-actions { order: 1; width: 100%; flex-wrap: wrap; margin-left: 0; } .circle-hero-top .page-header-actions .btn { flex: 1; min-width: min-content; justify-content: center; font-size: .75rem; padding: .28rem .5rem; } .circle-hero-top .page-header-actions .danger-btn { color: var(--danger) !important; } .circle-hero-body { gap: .75rem; } .circle-hero-icon { width: 48px; height: 48px; font-size: 1.2rem; } .album-cover-thumb { width: 56px; height: 56px; font-size: 1.4rem; } /* Reuse circle-hero-top responsive rules for album detail */ .circle-hero-top #back-from-collection { order: 0; } .circle-hero-info h2 { font-size: 1.1rem; } .circle-hero-stats { gap: .75rem; } /* ── Circle tabs ── */ .circle-tab { padding: .55rem .85rem; font-size: .82rem; } /* ── Circle card ── */ .circle-card-cover { aspect-ratio: 16/6; } /* ── Modal ── */ .modal-overlay { padding: .5rem; align-items: flex-end; } .modal-box { padding: 1.1rem 1rem 1.25rem; border-radius: var(--card-radius, var(--radius)) var(--card-radius, var(--radius)) 0 0; max-height: 85vh; } .modal-actions { flex-wrap: wrap; } .modal-actions .btn { flex: 1; justify-content: center; } /* ── Feed ── */ .feed-album-meta { padding: .6rem .75rem; } #feed-list { gap: .85rem; } /* ── Profile ── */ .profile-card { flex-direction: column; gap: 1rem; } /* ── Friends / people rows ── */ .person-row { flex-wrap: wrap; } .person-actions { flex-wrap: wrap; width: 100%; margin-top: .25rem; } .person-actions .btn { flex: 1; } /* ── Lightbox ── */ .lightbox-inner { max-width: 100vw; } .lightbox-meta { padding: .75rem; } /* ── Section blocks ── */ .section-block { margin-top: 1.5rem; padding-top: 1.1rem; } } /* ════════════════════════════════════════════════ NEW FEATURES ════════════════════════════════════════════════ */ /* ── VoidScroll topbar button ── */ .voidscroll-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: none; font-weight: 700; cursor: pointer; padding: 0; } .voidscroll-link.vs-pulse { animation: vs-btn-pulse .35s ease-out; } @keyframes vs-btn-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } } .voidscroll-icon { font-size: 1.4rem; line-height: 1; background: linear-gradient(90deg, #2dd4bf, #06b6d4, #3b82f6, #2dd4bf); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vs-icon-flow 3s ease-in-out infinite; } @keyframes vs-icon-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── VoidScroll slide-down banner ── */ .voidscroll-banner { position: fixed; top: calc(var(--topbar-h, 52px) + 1%); left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: .55rem; background: linear-gradient(90deg, #2dd4bf, #06b6d4, #3b82f6); color: #fff; padding: .45rem 1.25rem; border-radius: 999px; font-size: .875rem; font-weight: 600; box-shadow: 0 4px 18px rgba(59,130,246,.35); pointer-events: none; white-space: nowrap; } .voidscroll-banner[hidden] { display: none !important; } .voidscroll-banner.vs-in { animation: vs-banner-in .35s cubic-bezier(.17,.67,.3,1.3) forwards; } .voidscroll-banner.vs-out { animation: vs-banner-out .3s ease-in forwards; } .voidscroll-banner-icon { font-size: 1.1rem; animation: vs-icon-flow 3s ease-in-out infinite; } @keyframes vs-banner-in { from { opacity: 0; transform: translateX(-50%) translateY(-110%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes vs-banner-out { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-110%); } } /* ── VoidScroll native page ── */ .page-voidscroll { padding: 0 !important; position: fixed; top: var(--topbar-h, 52px); left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg); overflow: hidden; border-radius: 0; } /* Floating category bar — uses user's theme colors */ .vs-cats { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; gap: .3rem; padding: .45rem .6rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 100%); } .vs-cats::-webkit-scrollbar { display: none; } .vs-cats .filter-pill { flex-shrink: 0; font-size: .72rem; padding: .25rem .65rem; background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--text) !important; border-color: var(--border) !important; } .vs-cats .filter-pill.active { background: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; } /* Snap-scroll feed container */ .vs-feed { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vs-feed::-webkit-scrollbar { display: none; } /* Each slide = exactly one viewport */ .vs-slide { width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; background: var(--bg); overflow: hidden; } .vs-slide video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--bg); cursor: pointer; -webkit-touch-callout: none; /* prevent iOS long-press callout */ -webkit-user-select: none; user-select: none; } /* Bottom gradient + text overlay per slide */ .vs-slide-grad { position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 75%, transparent)); pointer-events: none; } .vs-slide-info { position: absolute; bottom: 0; left: 0; right: 0; padding: .75rem 3.5rem 2.8rem 1rem; pointer-events: none; } .vs-slide-title { font-size: .9rem; font-weight: 600; color: var(--text); text-shadow: 0 1px 4px color-mix(in srgb, var(--bg) 60%, transparent); margin: 0 0 .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vs-slide-cat { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 0; } /* ── Scrub bar (per slide, bottom) ── */ .vs-scrub { position: absolute; bottom: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: .5rem; padding: .3rem .75rem .45rem; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 55%, transparent)); } .vs-scrub-bar { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; } .vs-scrub-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } .vs-scrub-bar::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } .vs-scrub-time { font-size: .65rem; color: var(--muted); white-space: nowrap; min-width: 5.5em; text-align: right; } /* ── Seek indicators (hold left/right) ── */ .vs-seek-indicator { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; font-size: 2rem; opacity: 0; pointer-events: none; transition: opacity .15s; } .vs-seek-rew { left: 1.5rem; } .vs-seek-fwd { right: 1.5rem; } /* ── Bottom bar (mute + fullscreen + share) ── */ .vs-bottom-bar { position: absolute; right: .75rem; bottom: 2.8rem; z-index: 10; display: flex; flex-direction: column; gap: .4rem; } .vs-mute-btn, .vs-fullscreen-btn, .vs-bottom-bar .vs-share-btn { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); color: var(--text); font-size: .95rem; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); } .vs-mute-btn:hover, .vs-fullscreen-btn:hover, .vs-bottom-bar .vs-share-btn:hover { background: var(--surface); } /* Full-screen loading / error */ .vs-loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: var(--bg); color: var(--muted); font-size: .9rem; } .vs-loading[hidden] { display: none !important; } .vs-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } /* ── VoidScroll embed in feed posts ── */ .vs-embed { position: relative; background: var(--bg); overflow: hidden; max-height: 520px; aspect-ratio: 16/9; /* sensible default, overridden by JS once video loads */ } .vs-embed--sm { max-height: 340px; } .vs-embed-video { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; background: var(--bg); } .vs-embed-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); } .vs-embed-overlay[hidden] { display: none !important; } .vs-embed-play-btn { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.9); border: none; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; } .vs-embed-play-btn:hover { transform: scale(1.1); } .vs-embed-open-btn { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: .4rem; padding: .4rem 1rem; border-radius: 20px; background: linear-gradient(90deg, #2dd4bf, #06b6d4, #3b82f6); border: none; color: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .15s, box-shadow .15s; } .vs-embed-open-btn:hover { transform: translateX(-50%) scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.4); } .vs-share-preview { font-size: .85rem; color: var(--muted); margin: .25rem 0 .75rem; display: flex; align-items: center; gap: .4rem; } /* ── Post carousel ── */ .post-carousel { position: relative; overflow: hidden; background: var(--bg); aspect-ratio: 4/3; max-height: 480px; } .post-carousel-track { display: flex; width: 100%; height: 100%; transition: transform .3s ease; } .post-carousel-slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; } .post-carousel-slide { display: flex; align-items: center; justify-content: center; } .post-carousel-slide img, .post-carousel-slide video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Broken-image fallback: show a neutral placeholder */ .post-carousel-slide img[src=""], .post-carousel-slide img:not([src]), .media-item img[src=""], .media-item img:not([src]) { visibility: hidden; } .post-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: none; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background .15s; line-height: 1; } .post-carousel-arrow:hover { background: rgba(0,0,0,.7); } .post-carousel-arrow--prev { left: .5rem; } .post-carousel-arrow--next { right: .5rem; } .post-carousel-counter { position: absolute; top: .5rem; right: .6rem; background: rgba(0,0,0,.5); color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .45rem; border-radius: 999px; z-index: 5; } .post-carousel-dots { position: absolute; bottom: .55rem; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 5; } .post-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, transform .2s; } .post-carousel-dot.active { background: #fff; transform: scale(1.3); } /* ── Video fullscreen button ── */ .video-fullscreen-btn { position: absolute; bottom: .5rem; right: .5rem; z-index: 6; background: rgba(0,0,0,.5); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; } .video-fullscreen-btn:hover { background: rgba(0,0,0,.8); } /* ── View All button for multi-item posts ── */ .post-view-all-btn { display: block; width: 100%; padding: .45rem 1rem; background: var(--bg); border: none; border-top: 1px solid var(--border); color: var(--accent); font-size: .82rem; font-weight: 600; text-align: center; cursor: pointer; transition: background .15s; } .post-view-all-btn:hover { background: var(--border); } /* ── Circle cover upload ── */ .circle-cover-upload { display: flex; align-items: center; gap: 1rem; } .circle-cover-preview { width: 72px; height: 72px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 1.5rem; } .circle-cover-placeholder { font-size: 1.5rem; } /* ── Albums grid (collections redesign) ── */ .albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: .5rem; } .album-card { cursor: pointer; border-radius: var(--card-radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; } .album-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); } .album-card-cover { position: relative; aspect-ratio: 4/3; background: var(--bg); overflow: visible; padding-top: 8px; } /* Polaroid stack effect */ .album-cover-stack { position: relative; width: 100%; height: 100%; } .album-stack-shadow { position: absolute; inset: 0; border-radius: 4px; background: var(--border); } .album-stack-back { transform: rotate(-4deg) translateY(4px); z-index: 1; } .album-stack-mid { transform: rotate(2deg) translateY(2px); z-index: 2; } .album-cover-img { position: absolute; inset: 0; z-index: 3; border-radius: 4px; overflow: hidden; background: var(--border); } .album-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .album-card-overlay { position: absolute; inset: 0; z-index: 4; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.3)); border-radius: 4px; } .album-tag { position: absolute; top: .55rem; left: .55rem; z-index: 10; color: #fff; font-size: .68rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; } .album-badge { position: absolute; bottom: .55rem; left: .55rem; z-index: 10; font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; } .album-card-edit { position: absolute; top: .4rem; right: .4rem; z-index: 10; opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.45) !important; color: #fff !important; border-color: transparent !important; } .album-card:hover .album-card-edit { opacity: 1; } .album-card-body { padding: .85rem 1rem; } .album-card-title { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; } .album-card-meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .album-sharing-pill { font-size: .7rem; background: var(--bg); border: 1px solid var(--border); color: var(--muted); padding: .1rem .4rem; border-radius: 99px; } .album-desc-preview { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* ── Album detail hero ── */ .album-hero { position: relative; min-height: 220px; background: var(--surface); border-radius: 0 0 var(--card-radius) var(--card-radius); overflow: hidden; margin-bottom: 1.5rem; } .album-hero-cover { position: absolute; inset: 0; } .album-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .album-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.65)); } .album-back-row { padding: .5rem .75rem 0; } .album-hero-content { position: relative; z-index: 2; padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; min-height: 220px; justify-content: flex-end; } .album-hero-info { color: #fff; } .album-tag-row { margin-bottom: .4rem; } .album-hero-info h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .3rem; } .album-desc { color: rgba(255,255,255,.8) !important; } .album-stats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.8); margin-top: .5rem; } .album-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .album-action-btn { background: rgba(255,255,255,.15) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; } .album-action-btn:hover { background: rgba(255,255,255,.3) !important; } .album-action-btn.danger-btn { color: #ff8888 !important; } /* ── Contributors bar ── */ .contributors-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: .8rem; margin-bottom: 1rem; } .contrib-label { color: var(--muted); } .contrib-pill { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; color: var(--text); } /* ── Collection media grid ── */ .collection-media-grid { padding: 0 .25rem; } /* ── Page subhead ── */ .page-subhead { margin-top: .15rem; } /* ── Profile header with actions ── */ #page-profile .page-header .page-header-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } /* ── Hidden users section ── */ #hidden-users-list .person-row .avatar-sm { background: var(--bg); color: var(--muted); } /* ── Topbar right spacing for VoidScroll ── */ .topbar-right { gap: .3rem; } /* ── Friend Picker (combobox) ── */ .friend-picker { position: relative; } .friend-picker-input-wrap { display: flex; align-items: center; gap: .4rem; } .friend-picker-input { flex: 1; } .friend-picker-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 2px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; z-index: 200; } .friend-picker-dropdown[hidden] { display: none !important; } .friend-picker-option { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; cursor: pointer; font-size: .875rem; transition: background .12s; } .friend-picker-option:hover, .friend-picker-option:focus { background: var(--bg); outline: none; } .friend-picker-option-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; overflow: hidden; } .friend-picker-option-name { font-weight: 500; } .friend-picker-option-email { color: var(--muted); font-size: .78rem; } .friend-picker-empty { padding: .6rem .75rem; color: var(--muted); font-size: .85rem; } /* ── Lightbox navigation ── */ .lightbox-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; } .lightbox-nav-btn:hover { background: rgba(0,0,0,.75); } .lightbox-nav-btn--prev { left: 10px; } .lightbox-nav-btn--next { right: 10px; } .lightbox-nav-btn[hidden] { display: none !important; } .lightbox-counter { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; pointer-events: none; } .lightbox-counter[hidden] { display: none !important; } /* ── Share Options Modal ── */ .share-options-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; margin: 1rem 0; } .share-option-btn { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; text-align: center; } .share-option-btn:hover { border-color: var(--accent); background: var(--bg); } .share-option-btn.active { border-color: var(--accent); background: var(--bg); } .share-option-icon { font-size: 1.6rem; } .share-option-label { font-size: .8rem; font-weight: 600; color: var(--text); } .share-option-desc { font-size: .72rem; color: var(--muted); } .share-step { margin-top: .75rem; } /* ── Post circle badges (shown on own circle-scoped posts) ── */ .post-circle-badges { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 1rem .55rem; } .post-circle-badge { display: inline-flex; align-items: center; gap: .3rem; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 99px; font-size: .75rem; font-weight: 500; padding: .2rem .65rem; cursor: pointer; transition: background .12s; } .post-circle-badge:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } /* ── Post share button ── */ .post-share-btn { background: none; border: none; color: var(--muted); font-size: .82rem; padding: .2rem .5rem; cursor: pointer; border-radius: var(--radius); transition: color .12s; } .post-share-btn:hover { color: var(--accent); }