/* Fuxxy - new.fuxxy.fr - classic PHP rebuild Colors/tokens taken from the original site's design system */ :root { --background: #ffffff; --foreground: hsl(222, 84%, 5%); --card: #ffffff; --header-bg: rgba(255,255,255,.92); --bottom-nav-bg: rgba(255,255,255,.95); --muted: hsl(210, 40%, 96%); --muted-foreground: hsl(215, 16%, 47%); --border: hsl(214, 32%, 91%); --primary: hsl(335, 81%, 52%); --primary-dark: hsl(335, 81%, 42%); --primary-foreground: #fafafa; --secondary: hsl(210, 40%, 96%); --secondary-foreground: hsl(222, 47%, 11%); --purple: hsl(270, 95%, 75%); --radius: 0.75rem; --shadow-soft: 0 2px 8px rgba(0,0,0,.08); --shadow-glow: 0 4px 20px hsl(335 81% 52% / .25); --gradient-primary: linear-gradient(135deg, hsl(335, 81%, 52%), hsl(330, 81%, 75%)); /* Default cover photo placeholder (before a member uploads their own) - a richer multi-hue gradient instead of a flat pink block. */ --gradient-cover: linear-gradient(120deg, hsl(335, 81%, 55%) 0%, hsl(300, 70%, 55%) 35%, hsl(265, 70%, 55%) 70%, hsl(230, 75%, 55%) 100%); } /* Dark theme: applied via [data-theme="dark"] on , set as early as possible (see the inline script in header.php) to avoid a flash of the light theme. Site defaults to dark for first-time visitors - see that same script for the "no stored preference yet" fallback. */ [data-theme="dark"] { --background: hsl(222, 22%, 8%); --foreground: hsl(210, 30%, 94%); --card: hsl(222, 20%, 12%); --header-bg: hsla(222, 22%, 8%, .85); --bottom-nav-bg: hsla(222, 22%, 8%, .9); --muted: hsl(222, 16%, 17%); --muted-foreground: hsl(215, 14%, 65%); --border: hsl(222, 15%, 22%); --primary-foreground: #ffffff; --secondary: hsl(222, 16%, 17%); --secondary-foreground: hsl(210, 30%, 94%); --shadow-soft: 0 2px 10px rgba(0,0,0,.35); } /* A handful of components use literal colors rather than the variables above (light pastel tints that need their own dark counterpart, not just an inverted background) - overridden directly here. */ [data-theme="dark"] .alert-info { background: hsl(210 30% 18%); color: hsl(210 60% 82%); } [data-theme="dark"] .alert-error { background: hsl(0 45% 20%); color: hsl(0 80% 82%); } [data-theme="dark"] .alert-success { background: hsl(140 35% 16%); color: hsl(140 55% 75%); } [data-theme="dark"] .settings-danger-row { background: hsl(0 45% 16%); border-color: hsl(0 40% 28%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* overflow-x: clip (not hidden) on purpose: setting overflow-x to hidden while overflow-y is unset forces the browser to also promote overflow-y to auto (CSS spec quirk - a scroll container can't be "clipped" on only one axis), which turns html/body into a clipping box that cuts off any absolutely positioned dropdown (like .user-menu-panel) extending past the current content height on short pages. overflow: clip has no such promotion. */ html { overflow-x: clip; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--foreground); background: var(--background); line-height: 1.55; -webkit-font-smoothing: antialiased; /* Defensive: any element that overflows the viewport width can cause mobile browsers to mis-place position:fixed children (like .bottom-nav) until a scroll/repaint forces a recalculation. Clipping horizontal overflow here prevents that class of bug regardless of what causes the overflow. */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { font-size: 1.5rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } .main-nav { display: flex; gap: 1.75rem; align-items: center; } .main-nav a, .main-nav button.nav-link-btn { font-size: .95rem; font-weight: 500; color: var(--foreground); opacity: .8; transition: opacity .15s, color .15s; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; } .main-nav a:hover, .main-nav a.active, .main-nav button.nav-link-btn:hover { opacity: 1; color: var(--primary); } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: .3rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: middle; } .live-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: .3rem; vertical-align: middle; animation: live-dot-pulse 1.6s infinite; } @keyframes live-dot-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { opacity: .7; box-shadow: 0 0 0 4px rgba(239,68,68,0); } } .bottom-nav-item .live-dot { position: absolute; top: -2px; right: -6px; margin-left: 0; } .nav-actions { display: flex; gap: .75rem; align-items: center; } .theme-toggle-btn { padding: .6rem; line-height: 0; } .theme-toggle-btn svg { display: block; width: 18px; height: 18px; } .nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--foreground); } /* Logged-in users navigate via the bottom nav + account dropdown instead. */ body.has-bottom-nav .nav-toggle { display: none !important; } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; } .main-nav.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem 1.5rem; gap: 1rem; box-shadow: var(--shadow-soft); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: calc(var(--radius) - 0.25rem); font-size: .9rem; font-weight: 600; padding: .7rem 1.4rem; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; white-space: nowrap; } .btn-primary { background: var(--gradient-primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px hsl(335 81% 52% / .35); } .btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-lg { padding: .9rem 2rem; font-size: 1rem; } .btn-block { width: 100%; } /* ---------- Hero ---------- */ .hero { padding: 4.5rem 0 3.5rem; text-align: center; } .hero-title { font-size: 2.25rem; font-weight: 800; line-height: 1.15; margin: 0 0 1.25rem; letter-spacing: -0.02em; } .hero-title .accent { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 768px) { .hero-title { font-size: 3.25rem; } } .hero-subtitle { font-size: 1.15rem; color: var(--muted-foreground); max-width: 640px; margin: 0 auto 2rem; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-image { margin-top: 3rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); max-width: 880px; margin-left: auto; margin-right: auto; } /* ---------- Sections ---------- */ .section { padding: 4rem 0; } .section-alt { background: var(--muted); } .section-title { font-size: 1.9rem; font-weight: 800; text-align: center; margin: 0 0 .75rem; letter-spacing: -0.01em; } .section-subtitle { text-align: center; color: var(--muted-foreground); max-width: 620px; margin: 0 auto 2.5rem; } .grid { display: grid; gap: 1.75rem; } .grid-2 { grid-template-columns: repeat(1, 1fr); } .grid-3 { grid-template-columns: repeat(1, 1fr); } .grid-4 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); } .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); color: #fff; font-size: 1.4rem; margin-bottom: 1rem; } .card h3 { margin: 0 0 .5rem; font-size: 1.1rem; } .card p { margin: 0; color: var(--muted-foreground); font-size: .95rem; } /* Club card */ .club-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .club-card img { height: 180px; object-fit: cover; width: 100%; } .club-card .club-body { padding: 1.5rem; } .club-card h3 { margin: 0 0 .25rem; } .club-meta { font-size: .85rem; color: var(--muted-foreground); margin-bottom: .75rem; } .badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: hsl(335 81% 52% / .1); color: var(--primary); } /* Partner / logo card */ .partner-card { text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; } .partner-card img { max-height: 60px; width: auto; margin: 0 auto 1rem; object-fit: contain; } .partner-card p { margin-bottom: .75rem; } .partner-card .btn { margin-top: auto; } /* ---------- Forms ---------- */ .form-card { max-width: 440px; margin: 2.5rem auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.25rem; box-shadow: var(--shadow-soft); } .form-card h1 { font-size: 1.5rem; margin: 0 0 .35rem; text-align: center; } .form-card .form-subtitle { text-align: center; color: var(--muted-foreground); font-size: .9rem; margin-bottom: 1.75rem; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; } .field input, .field select, .field textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.35rem); font-size: .95rem; font-family: inherit; background: var(--card); color: var(--foreground); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(335 81% 52% / .15); } .field-row { display: flex; gap: 1rem; } .field-row .field { flex: 1; } .field-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--muted-foreground); } .field-check input { width: auto; margin-top: .2rem; } .desires-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem .4rem; } @media (min-width: 640px) { .desires-grid { grid-template-columns: repeat(3, 1fr); } } .form-footer-note { text-align: center; font-size: .9rem; margin-top: 1.5rem; color: var(--muted-foreground); } .form-footer-note a { color: var(--primary); font-weight: 600; } .form-divider { text-align: center; color: var(--muted-foreground); font-size: .8rem; margin: 1.25rem 0; position: relative; } .form-divider::before, .form-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); } .form-divider::before { left: 0; } .form-divider::after { right: 0; } .alert { padding: .85rem 1rem; border-radius: calc(var(--radius) - 0.35rem); font-size: .9rem; margin-bottom: 1.25rem; } .alert-info { background: hsl(210 40% 96%); color: hsl(222 47% 25%); } .alert-error { background: hsl(0 84% 96%); color: hsl(0 70% 40%); } .alert-success { background: hsl(140 60% 95%); color: hsl(140 60% 28%); } /* ---------- Content / legal pages ---------- */ .page-header { padding: .75rem 0 .5rem; text-align: center; background: var(--muted); } .page-header h1 { font-size: 1.6rem; margin: 0 0 .3rem; } .page-header p { color: var(--muted-foreground); max-width: 600px; margin: 0 auto; font-size: .9rem; } .prose { max-width: 800px; margin: 0 auto; padding: 3rem 0; } .prose h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; } .prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; } .prose p { margin: 0 0 1rem; color: var(--foreground); } .prose ul { margin: 0 0 1rem 1.25rem; color: var(--foreground); } .prose li { margin-bottom: .4rem; } /* FAQ accordion (no JS required -
) */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .75rem; overflow: hidden; } .faq-item summary { padding: 1.1rem 1.4rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--primary); } .faq-item[open] summary::after { content: '\2212'; } .faq-item .faq-answer { padding: 0 1.4rem 1.1rem; color: var(--muted-foreground); } /* Testimonial card */ .testimonial-card { position: relative; } .testimonial-card .quote { font-size: 1.5rem; color: var(--primary); opacity: .3; line-height: 1; } .testimonial-author { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* Filters bar (clubs/blog) */ .filters-bar { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; align-items: center; } .filters-bar input, .filters-bar select { padding: .6rem .9rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.35rem); font-size: .9rem; } .filters-bar input[type="text"] { flex: 1; min-width: 220px; } #conv-filter { appearance: none; -webkit-appearance: none; background-color: var(--card); color: var(--foreground); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 15px; padding: .6rem 2.25rem .6rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer; min-width: 170px; transition: border-color .15s ease, box-shadow .15s ease; } #conv-filter:hover { border-color: var(--primary); } #conv-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(335 81% 52% / .15); } #conv-filter optgroup { font-weight: 700; } /* Blog card */ .blog-card { padding: 0; overflow: hidden; } .blog-card img { height: 190px; object-fit: cover; width: 100%; } .blog-card .blog-body { padding: 1.5rem; } .blog-card .blog-cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--primary); letter-spacing: .04em; } .blog-card h3 { margin: .5rem 0; font-size: 1.15rem; } .blog-card p { color: var(--muted-foreground); font-size: .9rem; } /* CTA band */ .cta-band { background: linear-gradient(135deg, hsl(222, 40%, 16%), hsl(230, 45%, 9%)); color: #fff; text-align: center; padding: 3.5rem 0; border-radius: var(--radius); } .cta-band h2 { margin: 0 0 .75rem; font-size: 1.8rem; } .cta-band p { opacity: .9; margin: 0 0 1.75rem; } .cta-band .btn-primary { background: #fff; color: var(--primary); box-shadow: none; } .cta-band .btn-primary:hover { background: #fff; opacity: .92; } /* ---------- Footer ---------- */ .site-footer { background: hsl(222 47% 8%); color: hsl(220 15% 75%); padding: 3.5rem 0 1.5rem; margin-top: 4rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .footer-grid h4 { color: #fff; font-size: .95rem; margin: 0 0 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .6rem; font-size: .9rem; } .footer-grid a:hover { color: #fff; } .footer-brand p { font-size: .9rem; max-width: 320px; margin-top: .75rem; } .footer-bottom { border-top: 1px solid hsl(220 15% 20%); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: hsl(220 10% 55%); } .footer-bottom a:hover { color: #fff; } .age-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid hsl(220 15% 25%); border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 700; } /* ---------- User dropdown menu ---------- */ .user-menu { position: relative; } .user-menu-trigger { display: inline-flex; align-items: center; gap: .5rem; } .user-menu-trigger-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .user-menu-panel { display: none; position: absolute; top: calc(100% + .5rem); right: 0; width: 280px; max-height: 80vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: .5rem; z-index: 100; } .user-menu-panel.open { display: block; } .user-menu-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: calc(var(--radius) - 0.35rem); font-size: .9rem; font-weight: 500; color: var(--foreground); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .user-menu-item:hover { background: hsl(335 81% 52% / .08); } .user-menu-item.danger:hover { background: hsl(0 84% 96%); } .user-menu-item .menu-icon { flex-shrink: 0; } .user-menu-item.danger, .user-menu-item.danger .menu-icon { color: hsl(0 70% 55%); } .user-menu-divider { border-top: 1px solid var(--border); margin: .4rem 0; } .user-menu-header { padding: .5rem .75rem .75rem; font-size: .8rem; color: var(--muted-foreground); border-bottom: 1px solid var(--border); margin-bottom: .4rem; } .user-menu-header strong { color: var(--foreground); font-size: .95rem; display: block; } .user-menu-premium { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .75rem; font-weight: 700; color: #e83e8c; } .user-menu-premium svg { width: 14px; height: 14px; } .user-menu-panel form { margin: 0; } /* ---------- Media feed ---------- */ .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .media-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .media-grid { grid-template-columns: repeat(4, 1fr); } } .media-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--muted); aspect-ratio: 3/4; display: block; box-shadow: var(--shadow-soft); cursor: pointer; } .media-card img, .media-card video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-card .media-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .7rem; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: #fff; font-size: .8rem; display: flex; align-items: center; gap: .3rem; } .media-card.media-card-locked { cursor: default; } .media-locked-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(270 40% 25%), hsl(222 30% 15%)); backdrop-filter: blur(12px); } .media-card .media-video-badge { position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.6); color: #fff; border-radius: 999px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .8rem; } .pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2.5rem; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem; border-radius: calc(var(--radius) - 0.35rem); border: 1px solid var(--border); font-size: .85rem; font-weight: 600; } .pagination a:hover { border-color: var(--primary); color: var(--primary); } .pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- Dashboard (home) ---------- */ .dash-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.25rem; margin-bottom: 1.5rem; } .dash-welcome { font-size: 1.4rem; font-weight: 800; margin: 0 0 .25rem; } .dash-weekly { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted-foreground); } .dash-weekly strong { color: var(--primary); } .member-tabs { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: .5rem; } .member-tabs-switch { display: flex; gap: .3rem; background: var(--secondary); border-radius: 999px; padding: .25rem; } .member-tabs-switch button { border: none; background: none; padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--muted-foreground); } .member-tabs-switch button.active { background: var(--primary); color: #fff; } .member-tabs-link { font-size: .8rem; font-weight: 600; color: var(--muted-foreground); } .member-tabs-link:hover { color: var(--primary); } /* auto-fill with a minmax floor (not a fixed column count) so columns never get squeezed narrower than an avatar actually needs - a fixed repeat(10, 1fr) let the 60px avatars overflow past the card edge on real desktop widths, since the .dash-card is capped at 720px and 10 columns don't leave 60px each. */ .member-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 1rem; } .member-strip-item { text-align: center; cursor: pointer; display: block; } .member-strip-avatar { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 0 auto .5rem; overflow: hidden; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; border: 2px solid var(--border); } .member-strip-avatar img { width: 100%; height: 100%; object-fit: cover; } .member-strip-badge { position: absolute; bottom: -2px; right: -2px; width: 17px; height: 17px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .6rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .member-strip-name { font-size: .75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .2rem; } .member-strip-meta { font-size: .7rem; color: var(--muted-foreground); } .member-strip-empty { grid-column: 1/-1; text-align: center; color: var(--muted-foreground); font-size: .85rem; padding: 1rem 0; } .composer textarea { min-height: 70px; resize: vertical; } .composer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; flex-wrap: wrap; gap: .6rem; } .composer-links { display: flex; gap: .5rem; flex-wrap: wrap; } .composer-links a { font-size: .8rem; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; } .composer-links a:hover { color: var(--primary); border-color: var(--primary); } .feed-item { display: flex; gap: .75rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .feed-item:last-child { border-bottom: none; } .feed-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .feed-avatar img { width: 100%; height: 100%; object-fit: cover; } .feed-body { flex: 1; min-width: 0; } .feed-header-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; } .feed-username { font-weight: 700; } .feed-meta { font-size: .78rem; color: var(--muted-foreground); } .feed-time { font-size: .75rem; color: var(--muted-foreground); margin-left: auto; } .feed-text { margin: .5rem 0; white-space: pre-wrap; word-break: break-word; } .feed-media-thumb { display: block; border-radius: var(--radius); overflow: hidden; max-height: 320px; margin-top: .5rem; position: relative; background: var(--muted); } .feed-media-thumb img, .feed-media-thumb video { width: 100%; max-height: 320px; object-fit: cover; display: block; } .feed-event-card { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem; margin-top: .5rem; display: flex; gap: .9rem; align-items: center; } .feed-event-card img { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--radius) - .3rem); flex-shrink: 0; } .feed-actions { display: flex; gap: 1.25rem; margin-top: .6rem; } .feed-like-btn { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted-foreground); background: none; border: none; cursor: pointer; padding: 0; } .feed-like-btn.liked { color: var(--primary); font-weight: 700; } .feed-like-btn:hover { color: var(--primary); } /* ---------- Member profile ---------- */ .profile-cover { height: 200px; border-radius: var(--radius); background: var(--gradient-cover); background-size: cover; background-position: center; position: relative; overflow: hidden; } @media (min-width: 768px) { .profile-cover { height: 280px; } } .profile-cover::after { content: ''; position: absolute; inset: 0; /* Strong, tall gradient so the overlaid name/location stay readable regardless of how light or busy the cover photo is. */ background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 55%, transparent 100%); } .profile-cover-info { position: absolute; right: 1.5rem; bottom: 1rem; left: 1.5rem; z-index: 2; color: #fff; text-align: right; } .profile-cover-info h1 { font-size: 1.4rem; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; text-shadow: 0 1px 8px rgba(0,0,0,.7); } @media (min-width: 768px) { .profile-cover-info h1 { font-size: 1.7rem; } } .profile-cover-info .profile-location { font-size: .85rem; margin-top: .25rem; text-shadow: 0 1px 6px rgba(0,0,0,.7); opacity: .95; } .profile-header-row { display: flex; /* Bottom-align, not center: the avatar is the tallest item and defines the row's height via its overlap with the cover above, so centering the shorter items (tags, action buttons) against that height was pushing their tops above the cover's bottom edge on desktop. */ align-items: flex-end; gap: 1.25rem; margin-top: -45px; position: relative; z-index: 3; padding: 0 1.25rem; flex-wrap: wrap; } @media (min-width: 768px) { .profile-header-row { margin-top: -25px; } } .profile-avatar-lg { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow-soft); background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; overflow: hidden; flex-shrink: 0; } .profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-left: auto; align-self: flex-end; } .profile-actions .btn { min-width: 132px; } .tag-pill { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600; margin: .15rem; } .tag-pill-purple { background: hsl(270 95% 95%); color: hsl(270 60% 40%); } .tag-pill-pink { background: hsl(335 81% 96%); color: var(--primary); } .tabs-nav { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .tabs-nav a { padding: .6rem 0; font-weight: 600; font-size: .9rem; color: var(--muted-foreground); border-bottom: 2px solid transparent; } .tabs-nav a.active { color: var(--primary); border-bottom-color: var(--primary); } .info-row { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; } .info-row:last-child { border-bottom: none; } .info-row .label { color: var(--muted-foreground); min-width: 100px; flex-shrink: 0; } .certified-badge { color: var(--primary); } /* ---------- Media upload ---------- */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; color: var(--muted-foreground); transition: border-color .15s ease, background .15s ease; margin-bottom: 1.5rem; } .dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: hsl(335 81% 52% / .04); color: var(--primary); } .dropzone .dropzone-icon { font-size: 2.2rem; margin-bottom: .5rem; } .upload-options { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; font-size: .85rem; color: var(--muted-foreground); } .upload-queue { margin-bottom: 1.5rem; } .upload-row { display: flex; justify-content: space-between; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.35rem); font-size: .85rem; margin-bottom: .5rem; } .upload-row-status { color: var(--muted-foreground); } .upload-row-status.upload-error { color: hsl(0 70% 50%); font-weight: 600; } .owner-media-card { cursor: default; } .owner-media-controls { position: absolute; top: .4rem; right: .4rem; display: flex; gap: .35rem; z-index: 2; } .owner-media-controls button { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .owner-media-controls button:hover { background: rgba(0,0,0,.8); } /* ---------- Conversation list ---------- */ .conv-row { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: .75rem; } .conv-row.unread { background: hsl(335 81% 52% / .06); border-color: hsl(335 81% 52% / .25); border-left-color: var(--primary); } .conv-row.unread .conv-username { color: var(--foreground); font-weight: 800; } .conv-row.unread .conv-snippet { color: var(--foreground); font-weight: 600; } .conv-username { font-weight: 600; } .conv-row-link { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; } .conv-gender-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .conv-gender-icon svg { width: 13px; height: 13px; } .conv-menu { position: relative; flex-shrink: 0; } .conv-menu-btn { background: none; border: none; cursor: pointer; color: var(--muted-foreground); padding: .4rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .conv-menu-btn:hover { background: var(--muted); color: var(--foreground); } .conv-menu-panel { display: none; position: absolute; top: calc(100% + .3rem); right: 0; width: 220px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: .4rem; z-index: 50; } .conv-menu-panel.open { display: block; } .conv-menu-panel form { margin: 0; } /* ---------- Autocomplete ---------- */ .autocomplete-wrap { position: relative; } .autocomplete-dropdown { display: none; position: absolute; top: calc(100% + .3rem); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.35rem); box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; z-index: 60; } .autocomplete-dropdown.open { display: block; } .autocomplete-item { padding: .55rem .8rem; font-size: .88rem; cursor: pointer; } .autocomplete-item:hover { background: hsl(335 81% 52% / .08); color: var(--primary); } /* ---------- Quick actions row ---------- */ .quick-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; } .quick-action { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.15rem); background: var(--card); font-size: .88rem; font-weight: 600; color: var(--foreground); transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; flex: 1 1 200px; min-width: 0; } .quick-action:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .quick-action .menu-icon { flex-shrink: 0; } .quick-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .quick-action { flex: 1 1 100%; } } /* ---------- Bottom nav (mobile, logged in) ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bottom-nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--border); z-index: 90; padding: .35rem 0 max(.35rem, env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.06); /* Force this onto its own GPU compositing layer immediately. Without this, some mobile browsers (notably iOS Safari) delay painting fixed-position elements until the next scroll/repaint, making the bar appear to only show up after the user scrolls. */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } .bottom-nav-inner { display: flex; align-items: center; max-width: 600px; margin: 0 auto; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: 1; padding: .35rem .5rem; border-radius: .75rem; color: var(--muted-foreground); font-size: .65rem; font-weight: 600; background: none; border: none; cursor: pointer; position: relative; font-family: inherit; } .bottom-nav-item.active, .bottom-nav-item:hover { color: var(--primary); background: hsl(335 81% 52% / .08); } .bottom-nav-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--primary); border: 1.5px solid #fff; color: #fff; font-size: .6rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } body.has-bottom-nav { padding-bottom: 4.75rem; } @media (min-width: 900px) { .bottom-nav { display: none; } body.has-bottom-nav { padding-bottom: 0; } } /* ---------- Search modal ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.open { display: flex; } .modal-box { background: var(--card); border-radius: var(--radius); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 1.5rem; position: relative; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--muted-foreground); } /* ---------- Lightbox ---------- */ .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000; align-items: center; justify-content: center; } .lightbox-overlay.open { display: flex; } .lightbox-inner { position: relative; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; } .lightbox-inner img, .lightbox-inner video { max-width: 92vw; max-height: 82vh; border-radius: calc(var(--radius) - 0.25rem); display: block; } .lightbox-caption { color: #fff; margin-top: .75rem; font-size: .9rem; text-align: center; } .lightbox-caption a { color: #fff; font-weight: 700; text-decoration: underline; } .lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); } .lightbox-close { top: 1.25rem; right: 1.25rem; } .lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); } @media (max-width: 640px) { .lightbox-prev { left: .5rem; } .lightbox-next { right: .5rem; } .lightbox-close { top: .5rem; right: .5rem; } } /* ---------- Coming soon ---------- */ .coming-soon-card { max-width: 480px; margin: 3rem auto; text-align: center; } .coming-soon-card .card-icon { margin: 0 auto 1.25rem; } /* ---------- PWA install banner ---------- */ .pwa-install-banner[hidden] { display: none; } .pwa-install-banner { position: fixed; left: 1rem; right: 1rem; bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem)); max-width: 420px; margin: 0 auto; z-index: 300; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .85rem; } body.has-bottom-nav .pwa-install-banner { bottom: calc(4.75rem + .75rem + env(safe-area-inset-bottom)); } @media (min-width: 900px) { body.has-bottom-nav .pwa-install-banner { bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem)); } } .pwa-install-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; } .pwa-install-dismiss { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted-foreground); /* Real tap target is at least 44x44 (Apple/WCAG guidance) even though the visible × glyph is small - a cramped hit area is a common reason a dismiss button "doesn't respond" to a real finger tap. */ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; touch-action: manipulation; } .pwa-install-dismiss:hover { color: var(--foreground); } .btn-sm { padding: .45rem 1rem; font-size: .82rem; } /* ---------- Chat (conversation) ---------- */ .chat-card { max-width: 900px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; height: calc(100dvh - 68px - 2.5rem - 88px); min-height: 320px; } body.has-bottom-nav .chat-card { height: calc(100dvh - 68px - 2.5rem - 88px - 4.75rem); } @media (min-width: 900px) { body.has-bottom-nav .chat-card { height: calc(100dvh - 68px - 2.5rem - 88px); } } .chat-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-back { font-size: 1.2rem; color: var(--muted-foreground); flex-shrink: 0; } .chat-header-name { font-weight: 700; font-size: 1.05rem; color: var(--foreground); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-header-status { font-size: .75rem; color: var(--muted-foreground); } .chat-header-actions { display: flex; gap: .4rem; flex-shrink: 0; } .chat-icon-btn { background: none; border: none; cursor: pointer; color: var(--muted-foreground); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; transition: background .15s, color .15s; padding: 0; margin: 0; } .chat-icon-btn:hover { background: var(--muted); color: var(--primary); } @media (max-width: 480px) { .chat-icon-btn { width: 34px; height: 34px; font-size: 1.05rem; } } .chat-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .5rem .25rem; } .chat-load-more { text-align: center; padding: .5rem 0; font-size: .78rem; color: var(--muted-foreground); } .chat-bubble-row { display: flex; flex-direction: column; max-width: 75%; } .chat-bubble-row.mine { align-self: flex-end; align-items: flex-end; } .chat-bubble-row.theirs { align-self: flex-start; align-items: flex-start; } .chat-bubble { padding: .6rem .9rem; border-radius: 1rem; font-size: .9rem; line-height: 1.45; word-break: break-word; white-space: pre-wrap; } .chat-bubble-row.mine .chat-bubble { background: var(--gradient-primary); color: #fff; border-bottom-right-radius: .25rem; } .chat-bubble-row.theirs .chat-bubble { background: var(--muted); color: var(--foreground); border-bottom-left-radius: .25rem; } .chat-bubble img { display: block; max-width: 260px; max-height: 260px; border-radius: .75rem; cursor: pointer; } .chat-bubble-meta { font-size: .68rem; color: var(--muted-foreground); margin-top: .2rem; display: flex; align-items: center; gap: .3rem; } .chat-typing { font-size: .78rem; color: var(--muted-foreground); font-style: italic; padding: 0 .5rem; flex-shrink: 0; } /* Composer is fixed to the bottom of the viewport (WhatsApp-style), independent of the card's own scroll - left:0/right:0 + max-width/margin:auto centers it to match the card's width without spanning the full viewport. */ .chat-composer { display: flex; align-items: center; gap: .4rem; position: fixed; left: 0; right: 0; bottom: 0; max-width: 900px; margin: 0 auto; background: var(--card); border-top: 1px solid var(--border); padding: .85rem 1.5rem; box-shadow: 0 -4px 16px rgba(0,0,0,.05); z-index: 40; } body.has-bottom-nav .chat-composer { bottom: 4.75rem; } @media (max-width: 480px) { .chat-composer { padding: .5rem .6rem; gap: .2rem; } } @media (min-width: 900px) { body.has-bottom-nav .chat-composer { bottom: 0; } } .chat-composer input[type="text"] { flex: 1; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 999px; font-size: .95rem; min-width: 0; } .chat-send-btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; flex-shrink: 0; } .chat-send-btn svg { width: 18px; height: 18px; } @media (max-width: 480px) { .chat-composer input[type="text"] { padding: .65rem .8rem; font-size: .9rem; } .chat-send-btn { width: 36px; height: 36px; } .chat-send-btn svg { width: 16px; height: 16px; } } /* [hidden] overrides: elements below set their own `display` (grid/flex), which has equal CSS specificity to the UA stylesheet's `[hidden] { display: none }` and wins on source-order - silently defeating `el.hidden = true` in JS unless restated explicitly here. */ .chat-emoji-panel[hidden], .chat-giphy-panel[hidden], .call-overlay[hidden], .incoming-call-banner[hidden] { display: none; } .chat-emoji-panel { position: absolute; bottom: calc(100% + .5rem); left: 0; width: 280px; max-width: calc(100vw - 3rem); box-sizing: border-box; max-height: 220px; overflow-y: auto; overflow-x: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: .6rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; z-index: 50; } .chat-emoji-panel button { background: none; border: none; cursor: pointer; font-size: 1.3rem; padding: .3rem; border-radius: .4rem; line-height: 1; min-width: 0; overflow: hidden; } .chat-emoji-panel button:hover { background: var(--muted); } .chat-giphy-panel { position: absolute; bottom: calc(100% + .5rem); left: 0; width: 320px; max-width: calc(100vw - 3rem); box-sizing: border-box; max-height: 340px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: .6rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; } .chat-giphy-panel input[type="text"] { width: 100%; box-sizing: border-box; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 0.35rem); font-size: .85rem; } .chat-giphy-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; overflow-y: auto; overflow-x: hidden; } .chat-giphy-results img { width: 100%; height: 80px; object-fit: cover; border-radius: .4rem; cursor: pointer; display: block; } .chat-giphy-hint { font-size: .75rem; color: var(--muted-foreground); text-align: center; padding: .5rem 0; } /* Video call overlay */ .call-overlay { position: fixed; inset: 0; background: rgba(10,10,15,.95); z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; } .call-overlay video#remote-video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; background: #111; } .call-overlay video#local-video { position: absolute; bottom: 6.5rem; right: 1.25rem; width: 120px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 2px solid rgba(255,255,255,.3); z-index: 2; background: #222; } .call-status-bar { position: relative; z-index: 2; color: #fff; text-align: center; margin-top: auto; margin-bottom: 1.5rem; font-size: .95rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .call-controls { position: relative; z-index: 2; display: flex; gap: 1.25rem; margin-bottom: 2.5rem; } .call-controls button { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.4rem; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .call-controls button.active { background: #fff; color: #111; } .call-controls button.hangup { background: #ef4444; } .incoming-call-banner { position: fixed; top: 1rem; left: 1rem; right: 1rem; max-width: 420px; margin: 0 auto; z-index: 600; background: var(--card); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; } .incoming-call-banner .avatar { flex-shrink: 0; } .incoming-call-text { flex: 1; min-width: 0; } .incoming-call-text strong { display: block; font-size: .95rem; } .incoming-call-text span { font-size: .8rem; color: var(--muted-foreground); } .incoming-call-actions { display: flex; gap: .5rem; flex-shrink: 0; } .incoming-call-actions button { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.1rem; color: #fff; } .incoming-call-actions .accept { background: #22c55e; } .incoming-call-actions .decline { background: #ef4444; } @media (max-width: 640px) { .chat-card { padding: 1rem; border-radius: 0; border-left: none; border-right: none; box-shadow: none; } .chat-thread { max-height: none; flex: 1; } } .conv-filter-check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; } .conv-filter-check input { width: auto; } /* ---------- Settings ---------- */ .settings-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 900px; margin: 0 auto; } @media (min-width: 800px) { .settings-layout { grid-template-columns: 220px 1fr; align-items: start; } } .settings-nav { display: flex; flex-direction: row; overflow-x: auto; gap: .3rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; } @media (min-width: 800px) { .settings-nav { flex-direction: column; position: sticky; top: 84px; } } .settings-nav-item { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: calc(var(--radius) - 0.35rem); font-size: .9rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0; transition: background .15s, color .15s; } .settings-nav-item:hover { background: var(--muted); color: var(--foreground); } .settings-nav-item.active { background: var(--gradient-primary); color: #fff; } .settings-content { min-width: 0; } .settings-content .card { margin-bottom: 1.5rem; } .settings-subheading { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .75rem; } .settings-subheading:first-of-type { margin-top: 1rem; } .settings-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--border); } .settings-switch-row:first-of-type { border-top: none; } .settings-switch-row strong { display: block; font-size: .9rem; } .settings-switch-row p { margin: .15rem 0 0; font-size: .8rem; color: var(--muted-foreground); } .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .2s; } .switch-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .switch input:checked + .switch-track { background: var(--primary); } .switch input:checked + .switch-track::before { transform: translateX(18px); } .settings-collapsible-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; padding: 0; font-size: 1rem; color: var(--foreground); } .settings-collapsible-arrow { transition: transform .2s; color: var(--muted-foreground); } .settings-collapsible-panel { display: none; margin-top: 1.25rem; } .settings-collapsible-panel.open { display: block; } .settings-collapsible-trigger:has(+ .settings-collapsible-panel.open) .settings-collapsible-arrow { transform: rotate(180deg); } .settings-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #fecaca; background: #fef2f2; border-radius: calc(var(--radius) - 0.2rem); margin-top: .75rem; } .settings-danger-row strong { display: block; font-size: .9rem; } .settings-danger-row p { margin: .15rem 0 0; font-size: .8rem; color: var(--muted-foreground); }