/* ============================================ PULSEBOARD — "PULSE" DESIGN SYSTEM Dark-first, gradient-accented, glassmorphic. Toggle with [data-theme="light"] on . ============================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 55%, #f97316 100%); --grad-soft: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.18)); --violet: #8b5cf6; --primary: #8b5cf6; --pink: #ec4899; --orange: #f97316; --danger: #f43f5e; --success: #22c55e; --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 30px rgba(0,0,0,.25); } html[data-theme="dark"] { --bg: #0c0a16; --bg-alt: #14101f; --card: #171226; --card-hover: #1c1730; --text: #f1eefc; --muted: #9a93b3; --border: #2a2340; --input-bg: #1c1730; --nav-bg: rgba(15, 11, 27, .75); } html[data-theme="light"] { --bg: #f6f5fb; --bg-alt: #efedf9; --card: #ffffff; --card-hover: #fbfaff; --text: #1c1830; --muted: #6b6685; --border: #e7e3f5; --input-bg: #ffffff; --nav-bg: rgba(255, 255, 255, .75); } html, body { height: 100%; } body { font-family: 'Segoe UI', -apple-system, Roboto, Arial, sans-serif; background: radial-gradient(1200px 600px at 100% -10%, rgba(236,72,153,.12), transparent 60%), radial-gradient(1000px 500px at -10% 0%, rgba(139,92,246,.15), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--violet); text-decoration: none; } a:hover { text-decoration: none; opacity: .85; } img { max-width: 100%; } .app-shell { min-height: 100%; display: flex; flex-direction: column; } ::selection { background: var(--violet); color: #fff; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } /* ---------- Navbar ---------- */ .navbar { background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 100; } .navbar-left { display: flex; align-items: center; gap: 10px; } .brand { font-weight: 800; font-size: 21px; color: var(--text) !important; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .brand-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 0 rgba(236,72,153,.6); animation: pulse-dot 2.2s infinite; flex-shrink: 0; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(236,72,153,.55); } 70% { box-shadow: 0 0 0 8px rgba(236,72,153,0); } 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); } } .navbar-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; color: var(--muted); } .navbar-search input { border: none; background: transparent; outline: none; color: var(--text); font-size: 14px; width: 100%; } .navbar-links { display: flex; gap: 4px; margin-left: 6px; } .navbar-links a { color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; transition: .15s; } .navbar-links a:hover, .navbar-links a.active { color: var(--text); background: var(--grad-soft); } .navbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; text-decoration: none; } .icon-btn:hover { background: var(--card-hover); transform: translateY(-1px); text-decoration: none; } .icon-sun, .icon-moon { display: none; } html[data-theme="dark"] .icon-sun { display: block; } html[data-theme="light"] .icon-moon { display: block; } .badge-dot { position: absolute; top: -4px; right: -4px; background: var(--grad); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--bg); } .avatar-btn { border: none; background: none; cursor: pointer; padding: 0; border-radius: 50%; } .hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; } .hamburger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; } /* ---------- Dropdowns ---------- */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 200px; padding: 8px; display: none; flex-direction: column; z-index: 200; } .dropdown-menu.open { display: flex; } .dropdown-menu-wide { min-width: 320px; max-width: 90vw; } .dropdown-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 4px; } .dropdown-menu a { color: var(--text); font-size: 14px; font-weight: 500; padding: 9px 10px; border-radius: var(--radius-sm); } .dropdown-menu a:hover { background: var(--bg-alt); text-decoration: none; } .dropdown-menu a.danger { color: var(--danger); } .dropdown-viewall { text-align: center; font-weight: 700; color: var(--violet) !important; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px !important; } .dropdown-empty { padding: 20px 10px; text-align: center; color: var(--muted); font-size: 13px; } .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius-sm); } .notif-item:hover { background: var(--bg-alt); } .notif-item.unread { background: var(--grad-soft); } .notif-item .avatar { width: 34px; height: 34px; flex-shrink: 0; } .notif-item p { font-size: 13px; color: var(--text); line-height: 1.4; } .notif-item .time { font-size: 11px; color: var(--muted); } .mobile-menu { display: none; flex-direction: column; background: var(--card); border-bottom: 1px solid var(--border); padding: 8px 16px; } .mobile-menu a { padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu.open { display: flex; } /* ---------- Layout ---------- */ .page-wrap { flex: 1; } .container { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; } .container-narrow { max-width: 560px; margin: 0 auto; padding: 40px 20px 60px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 64px 24px 56px; text-align: center; background: var(--grad); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 20% 0%, rgba(255,255,255,.25), transparent 60%); } .hero h1 { position: relative; font-size: clamp(28px, 5vw, 44px); font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -.02em; } .hero p { position: relative; color: rgba(255,255,255,.9); font-size: 16px; max-width: 520px; margin: 0 auto; } /* ---------- Buttons ---------- */ button, .btn { font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 12px 22px; font-size: 14px; font-weight: 700; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s, opacity .15s; } button:hover, .btn:hover { opacity: .92; transform: translateY(-1px); text-decoration: none; } button:active, .btn:active { transform: translateY(0); } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-ghost { background: transparent; color: var(--text) !important; border: 1px solid var(--border); } .btn-outline { background: transparent; color: var(--violet) !important; border: 1px solid var(--violet); } .btn-danger { background: var(--danger); } .btn-block { width: 100%; } .btn-pill-toggle.active { background: var(--bg-alt); color: var(--violet) !important; border: 1px solid var(--violet); } /* ---------- Forms ---------- */ label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--muted); } input[type=text], input[type=email], input[type=password], input[type=file], textarea, select { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-size: 14px; font-family: inherit; margin-bottom: 16px; outline: none; transition: border-color .15s; } input:focus, textarea:focus, select:focus { border-color: var(--violet); } textarea { min-height: 140px; resize: vertical; } input:disabled { opacity: .6; } .error { background: rgba(244,63,94,.12); color: #fb7185; border: 1px solid rgba(244,63,94,.3); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; } .success { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; } .form-box { max-width: 420px; margin: 60px auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow); } .form-box h2 { margin-bottom: 20px; font-size: 22px; } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .post-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; color: var(--text) !important; transition: transform .15s, border-color .15s, box-shadow .15s; } .post-card:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--shadow); text-decoration: none; } .post-card img { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 12px; } .post-card h3 { font-size: 19px; margin-bottom: 4px; } .post-card p { color: var(--muted); font-size: 14px; margin-top: 6px; } .category-tag { display: inline-block; background: var(--grad-soft); color: var(--violet); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-right: 6px; } .category-tag:hover { text-decoration: none; opacity: .8; } .featured-tag { display: inline-block; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; } .meta { color: var(--muted); font-size: 13px; } .muted { color: var(--muted); } .text-center { text-align: center; } /* ---------- Post engagement bar ---------- */ .engage-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .engage-btn { background: var(--bg-alt); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; } .engage-btn:hover { border-color: var(--violet); color: var(--text); opacity: 1; } .engage-btn.liked { background: rgba(244,63,94,.14); color: #fb7185; border-color: rgba(244,63,94,.4); } .engage-btn.saved { background: var(--grad-soft); color: var(--violet); border-color: var(--violet); } .engage-btn svg { flex-shrink: 0; } /* ---------- Avatars ---------- */ .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .avatar-xs { width: 24px; height: 24px; } .avatar-lg { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: 0 0 0 3px var(--violet); } /* ---------- Comments ---------- */ .comment { border-top: 1px solid var(--border); padding: 14px 0; } .comment:first-child { border-top: none; } /* ---------- Profile ---------- */ .profile-header { background: var(--grad); border-radius: var(--radius); padding: 36px 26px; text-align: center; color: #fff; margin-bottom: 20px; position: relative; } .profile-stats { display: flex; justify-content: center; gap: 28px; margin-top: 14px; } .profile-stats div { text-align: center; } .profile-stats .n { font-size: 20px; font-weight: 800; display: block; } .profile-stats .l { font-size: 12px; opacity: .85; } /* ---------- Chat ---------- */ .chat-shell { display: flex; height: calc(100vh - 130px); min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); margin-bottom: 20px; } .chat-list { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; } .chat-list-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text) !important; } .chat-list-item:hover, .chat-list-item.active { background: var(--bg-alt); text-decoration: none; } .chat-list-item .name { font-weight: 700; font-size: 14px; } .chat-list-item .preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .chat-list-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); margin-left: auto; flex-shrink: 0; } .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .chat-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .chat-back-btn { display: none; } .chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .chat-bubble-row { display: flex; } .chat-bubble-row.mine { justify-content: flex-end; } .chat-bubble { max-width: 70%; padding: 10px 15px; border-radius: 18px; font-size: 14px; line-height: 1.45; background: var(--bg-alt); border: 1px solid var(--border); } .chat-bubble-row.mine .chat-bubble { background: var(--grad); color: #fff; border: none; border-bottom-right-radius: 4px; } .chat-bubble-row:not(.mine) .chat-bubble { border-bottom-left-radius: 4px; } .chat-time { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: right; } .chat-input-row { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); } .chat-input-row input { margin-bottom: 0; border-radius: 999px; } .chat-input-row button { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; padding: 0; } .chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 40px; } /* ---------- Bottom mobile nav ---------- */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; z-index: 100; } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 600; position: relative; padding: 4px 8px; } .bottom-nav a.active { color: var(--violet); } .bottom-nav a .avatar { width: 22px; height: 22px; } .bottom-nav-dot { position: absolute; top: 0; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); } .bottom-nav-fab { background: var(--grad); color: #fff !important; width: 46px; height: 46px; border-radius: 50%; margin-top: -22px; box-shadow: 0 6px 16px rgba(139,92,246,.5); } /* ---------- Footer ---------- */ .site-footer { text-align: center; padding: 28px 20px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); } .dot-sep { margin: 0 6px; } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } .pagination a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 14px; } .pagination a.active { background: var(--grad); color: #fff; border: none; } .pagination a:hover { text-decoration: none; border-color: var(--violet); } /* ---------- Tables (dashboard) ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px; } th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .action-links a { margin-right: 10px; font-weight: 600; font-size: 13px; } .badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .badge-active { background: rgba(34,197,94,.15); color: #4ade80; } .badge-pending { background: rgba(249,115,22,.15); color: #fb923c; } .badge-admin { background: var(--grad-soft); color: var(--violet); } .badge-user { background: var(--bg-alt); color: var(--muted); } .badge-banned { background: rgba(244,63,94,.15); color: #fb7185; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; } .stat-card .num { font-size: 26px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Empty states ---------- */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state svg { opacity: .5; margin-bottom: 14px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .navbar-search { display: none; } } @media (max-width: 760px) { .navbar-links { display: none; } .hamburger { display: flex; } .navbar { padding: 10px 14px; } .bottom-nav { display: flex; } .site-footer { padding-bottom: 90px; } .chat-shell { height: calc(100vh - 190px); border-radius: 0; margin: -20px -20px 20px; border-left: none; border-right: none; } .chat-list { width: 100%; } .chat-list.has-active-chat { display: none; } .chat-back-btn { display: flex; } .container { padding: 18px 14px 90px; } .form-box { margin: 24px auto; padding: 26px 20px; } .profile-stats { gap: 18px; } } @media (min-width: 761px) { .mobile-menu { display: none !important; } }