:root { --bg0: #0b0f18; --bg1: #111827; --panel: #141c2f; --panel2: #0f1626; --text: #e9eef7; --muted: #a9b4c7; --border: rgba(255, 255, 255, .10); --neonA: rgba(122, 167, 255, .95); --neonB: rgba(69, 212, 131, .80); --neonC: rgba(255, 92, 122, .80); --accent: rgb(122, 167, 255); --danger: rgb(255, 92, 122); --success: rgb(69, 212, 131); /* Cyberpunk intensity controls (default = balanced) */ --cp-ambient-opacity: .8; --cp-ambient-speed: 24s; --cp-panel-lift: -5px; --cp-panel-brightness: 1.08; --cp-panel-saturation: 1.12; --cp-panel-border-opacity: .98; --cp-panel-charge-speed: 2.2s; --cp-panel-scan-opacity: .36; --cp-avatar-shimmer-speed: 850ms; --cp-user-flicker-speed: .45s; --cp-delete-scale: 1.04; --cp-dim-opacity: .84; --cp-dim-saturation: .9; --cp-dim-brightness: .92; } /* Optional presets: add one class to */ body.cyber--subtle { --cp-ambient-opacity: .58; --cp-ambient-speed: 34s; --cp-panel-lift: -3px; --cp-panel-brightness: 1.03; --cp-panel-saturation: 1.05; --cp-panel-border-opacity: .72; --cp-panel-charge-speed: 3.2s; --cp-panel-scan-opacity: .24; --cp-avatar-shimmer-speed: 1.15s; --cp-user-flicker-speed: .34s; --cp-delete-scale: 1.02; --cp-dim-opacity: .93; --cp-dim-saturation: .95; --cp-dim-brightness: .96; } body.cyber--balanced { --cp-ambient-opacity: .8; --cp-ambient-speed: 24s; --cp-panel-lift: -5px; --cp-panel-brightness: 1.08; --cp-panel-saturation: 1.12; --cp-panel-border-opacity: .98; --cp-panel-charge-speed: 2.2s; --cp-panel-scan-opacity: .36; --cp-avatar-shimmer-speed: 850ms; --cp-user-flicker-speed: .45s; --cp-delete-scale: 1.04; --cp-dim-opacity: .84; --cp-dim-saturation: .9; --cp-dim-brightness: .92; } body.cyber--extreme { --cp-ambient-opacity: .95; --cp-ambient-speed: 16s; --cp-panel-lift: -6px; --cp-panel-brightness: 1.12; --cp-panel-saturation: 1.18; --cp-panel-border-opacity: 1; --cp-panel-charge-speed: 1.45s; --cp-panel-scan-opacity: .48; --cp-avatar-shimmer-speed: 620ms; --cp-user-flicker-speed: .6s; --cp-delete-scale: 1.06; --cp-dim-opacity: .76; --cp-dim-saturation: .84; --cp-dim-brightness: .88; } * { box-sizing: border-box } html, body { height: 100%; color: #eef3ff; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Base futuristic background */ background: radial-gradient(1200px 800px at 20% -10%, rgba(122, 167, 255, .25), transparent 60%), radial-gradient(1100px 800px at 90% 0%, rgba(69, 212, 131, .20), transparent 60%), radial-gradient(900px 600px at 50% 110%, rgba(255, 92, 122, .15), transparent 55%), linear-gradient(180deg, #0b0f1c, #06070b); background-attachment: fixed; } /* Animated neon grid overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background: linear-gradient(to right, rgba(122, 167, 255, .18) 1px, transparent 1px), linear-gradient(to bottom, rgba(69, 212, 131, .12) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 15%, #000 0%, transparent 62%); animation: gridDrift 10s linear infinite; } /* Ambient edge vignette + glow blobs */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(680px 380px at 18% 18%, rgba(75, 208, 255, .10), transparent 70%), radial-gradient(740px 430px at 84% 74%, rgba(255, 72, 187, .08), transparent 72%), radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .42) 100%); opacity: var(--cp-ambient-opacity); animation: ambientShift var(--cp-ambient-speed) ease-in-out infinite alternate; } @keyframes gridDrift { 0% { transform: translateY(0) } 100% { transform: translateY(48px) } } @keyframes ambientShift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -10px, 0); } } a { color: var(--accent); text-decoration: none } a:hover { text-decoration: underline } .container { width: min(980px, calc(100% - 32px)); margin: 0 auto; } .topbar { position: sticky; top: 0; z-index: 20; background: rgba(6, 7, 11, .65); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(122, 167, 255, .18); box-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 1px 0 rgba(122, 167, 255, .15); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; flex-wrap: nowrap; } @media (max-width: 820px) { .topbar__inner { flex-wrap: wrap; } /* wrap only on small screens */ } .brand { font-weight: 900; letter-spacing: .5px; color: var(--text); position: relative; } .brand::after { content: ""; display: block; height: 2px; margin-top: 6px; width: 44px; background: linear-gradient(90deg, var(--neonA), var(--neonB)); border-radius: 999px; opacity: .7; } .search { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 220px; max-width: none; } .search__input { width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .05); color: var(--text); outline: none; } .search__input:focus { border-color: rgba(122, 167, 255, .55); box-shadow: 0 0 0 4px rgba(122, 167, 255, .14), 0 0 28px rgba(122, 167, 255, .08); } .search__btn { position: relative; overflow: hidden; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(122, 167, 255, .35); background: rgba(122, 167, 255, .12); color: var(--text); cursor: pointer; font-weight: 800; } .search__btn .sweep { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 0%, rgba(122, 167, 255, .20) 35%, rgba(122, 167, 255, .55) 50%, rgba(122, 167, 255, .20) 65%, transparent 100%); transform: translateX(-140%); } .search__btn:hover .sweep, .search__btn:focus-visible .sweep { opacity: 1; animation: truxSweep 1.6s cubic-bezier(.4, 0, .2, 1) infinite; } .search__btn:hover, .search__btn:focus-visible { box-shadow: 0 0 0 3px rgba(122, 167, 255, .16), 0 0 26px rgba(122, 167, 255, .18); filter: brightness(1.08); transform: translateY(-1px); } @keyframes truxSweep { 0% { transform: translateX(-140%); } 100% { transform: translateX(140%); } } .nav { display: flex; flex: 0 0 auto; white-space: nowrap; gap: 18px; align-items: center; } .nav a { position: relative; text-decoration: none; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0%; background: linear-gradient(90deg, var(--neonA), var(--neonB)); transition: width .25s ease; } .nav a:hover::after { width: 100%; text-decoration: none; } .nav__form { margin: 0; } main.container { flex: 1; padding: 18px 0 28px; } /* Headings */ .hero { padding: 12px 0 14px } h1 { margin: 0 0 6px; font-size: 30px } .h2 { margin: 0; font-size: 18px } .muted { color: #b7c4db; } .feedSwitch { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .04); } .feedSwitch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; padding: 9px 14px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); font-weight: 800; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } .feedSwitch__item:hover { text-decoration: none; color: var(--text); border-color: rgba(122, 167, 255, .22); background: rgba(122, 167, 255, .08); } .feedSwitch__item.is-active { color: var(--text); border-color: rgba(122, 167, 255, .34); background: rgba(122, 167, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .feedSwitch__item.is-disabled { opacity: .7; } /* Cards with neon animated border */ .card { position: relative; background: linear-gradient(180deg, rgba(20, 28, 47, .92), rgba(16, 22, 38, .92)); border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; overflow: hidden; margin: 14px 0; box-shadow: 0 18px 55px rgba(0, 0, 0, .35); transform: translateY(0); transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; animation: fadeUp .4s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; background: linear-gradient(90deg, var(--neonA), var(--neonB), var(--neonC), var(--neonA)); background-size: 300% 300%; opacity: .22; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: neonShift 6s linear infinite; } @keyframes neonShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } } .card:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 24px 75px rgba(0, 0, 0, .45), 0 0 25px rgba(122, 167, 255, .12); } /* ===== Cyberpunk Feed Panels ===== */ .card.post { border: 1px solid rgba(94, 182, 255, .42); background: linear-gradient(180deg, rgba(10, 18, 33, .95), rgba(9, 15, 27, .95)); overflow: visible; z-index: 1; box-shadow: 0 20px 58px rgba(0, 0, 0, .46), 0 0 0 1px rgba(94, 182, 255, .20), 0 0 28px rgba(56, 216, 255, .16); transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease, opacity 180ms ease; } .card.post::before { inset: -1px; padding: 2px; opacity: .58; background: linear-gradient(118deg, rgba(88, 224, 255, .86), rgba(98, 167, 255, .92), rgba(92, 255, 183, .78), rgba(204, 108, 255, .74), rgba(88, 224, 255, .86)); background-size: 230% 230%; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: saturate(1.15); transition: opacity .2s ease, filter .2s ease; } .card.post::after { content: ""; position: absolute; inset: -12px; border-radius: 22px; background: radial-gradient(90% 80% at 12% 0%, rgba(70, 209, 255, .18), transparent 65%), radial-gradient(90% 80% at 88% 100%, rgba(205, 98, 255, .12), transparent 68%); opacity: .45; filter: blur(14px); pointer-events: none; transition: opacity .2s ease; } .card.post .card__body { position: relative; z-index: 1; overflow: visible; border-radius: inherit; border: 1px solid rgba(110, 190, 255, .17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 22px rgba(75, 208, 255, .07); background: linear-gradient(180deg, rgba(12, 22, 38, .62), rgba(11, 18, 31, .52)); } .card.post .card__body>* { position: relative; z-index: 2; } /* Corner HUD accents */ .card.post .card__body::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .42; background: linear-gradient(90deg, rgba(109, 221, 255, .95), rgba(130, 255, 206, .9)) 10px 10px / 22px 2px no-repeat, linear-gradient(180deg, rgba(109, 221, 255, .95), rgba(130, 255, 206, .9)) 10px 10px / 2px 22px no-repeat, linear-gradient(270deg, rgba(255, 126, 202, .95), rgba(181, 122, 255, .88)) calc(100% - 10px) calc(100% - 10px) / 22px 2px no-repeat, linear-gradient(0deg, rgba(255, 126, 202, .95), rgba(181, 122, 255, .88)) calc(100% - 10px) calc(100% - 10px) / 2px 22px no-repeat; transition: opacity .2s ease, filter .2s ease; } /* Subtle scanlines + grain texture */ .card.post .card__body::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .24; background: repeating-linear-gradient(180deg, rgba(162, 206, 255, .085) 0 1px, transparent 1px 4px), repeating-radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px); mix-blend-mode: screen; transition: opacity .2s ease; } .card.post:hover, .card.post:focus-within { transform: translateY(var(--cp-panel-lift)); z-index: 6; border-color: rgba(110, 226, 255, .78); filter: brightness(var(--cp-panel-brightness)) saturate(var(--cp-panel-saturation)); box-shadow: 0 28px 85px rgba(0, 0, 0, .54), 0 0 0 1px rgba(104, 221, 255, .42), 0 0 54px rgba(84, 220, 255, .38), 0 0 86px rgba(206, 105, 255, .18); } .card.post:hover::before, .card.post:focus-within::before { opacity: var(--cp-panel-border-opacity); filter: saturate(1.34) brightness(1.16); animation: postPanelCharge var(--cp-panel-charge-speed) linear infinite; } .card.post:hover::after, .card.post:focus-within::after { opacity: .72; } .card.post.post--menuOpen { z-index: 12; } .card.post:hover .card__body::before, .card.post:focus-within .card__body::before { opacity: .82; filter: drop-shadow(0 0 8px rgba(100, 225, 255, .4)); } .card.post:hover .card__body::after, .card.post:focus-within .card__body::after { opacity: var(--cp-panel-scan-opacity); animation: postScanRun 950ms linear 1; } .card.post.post--single { border-color: rgba(116, 215, 255, .62); } @keyframes postPanelCharge { 0% { background-position: 0% 50%; } 100% { background-position: 180% 50%; } } @keyframes postScanRun { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 20px, 14px 10px; } } .card__body { padding: 16px } /* Flash messages */ .flash { border-radius: 14px; padding: 10px 12px; margin: 12px 0; border: 1px solid rgba(255, 255, 255, .10); } .flash--error { border-color: rgba(255, 92, 122, .38); background: rgba(255, 92, 122, .10); } .flash--success { border-color: rgba(69, 212, 131, .35); background: rgba(69, 212, 131, .10); } .toastStack { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { min-width: 180px; max-width: min(320px, calc(100vw - 36px)); border-radius: 14px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 16px 36px rgba(3, 8, 18, .34); background: rgba(10, 16, 28, .96); color: #eef5ff; transform: translateY(10px); opacity: 0; transition: opacity .18s ease, transform .18s ease; } .toast.is-visible { transform: translateY(0); opacity: 1; } .toast--success { border-color: rgba(69, 212, 131, .35); background: rgba(16, 34, 23, .96); } /* Forms */ .form { display: grid; gap: 12px } .field { display: grid; gap: 6px } .field>span { font-weight: 700 } input, textarea, button { font: inherit } input, textarea { width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .05); color: var(--text); outline: none; } input:focus, textarea:focus { border-color: rgba(122, 167, 255, .55); box-shadow: 0 0 0 4px rgba(122, 167, 255, .14), 0 0 28px rgba(122, 167, 255, .08); } textarea { resize: vertical; min-height: 110px } /* Buttons / link-like */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(122, 167, 255, .40); background: rgba(122, 167, 255, .12); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 900; transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease; } .btn:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.08); box-shadow: 0 0 0 4px rgba(122, 167, 255, .12), 0 0 26px rgba(122, 167, 255, .10); text-decoration: none; } .btn--small { padding: 8px 12px; border-radius: 12px; font-size: 14px } .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .14) } .linklike { background: transparent; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-weight: 900; } .linklike:hover { text-decoration: underline } .linklike--danger { color: var(--danger) } .inline { display: inline; margin: 0 } .row { display: flex; gap: 12px; align-items: center } .row--spaced { justify-content: space-between } /* ===== Cyberpunk Profile Page ===== */ .profile { display: grid; gap: 14px; } .profile__hero, .profileStats, .profile__feedHead { position: relative; overflow: hidden; border: 1px solid rgba(102, 196, 255, .36); border-radius: 16px; background: linear-gradient(180deg, rgba(11, 18, 33, .92), rgba(8, 12, 24, .95)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 32px rgba(0, 0, 0, .35), 0 0 22px rgba(80, 214, 255, .13); } .profile__hero::before, .profileStats::before, .profile__feedHead::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background: repeating-linear-gradient(180deg, rgba(170, 214, 255, .08) 0 1px, transparent 1px 4px); } .profile__hero::after, .profileStats::after, .profile__feedHead::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(102, 224, 255, .92), rgba(145, 255, 218, .9)) 10px 10px / 20px 2px no-repeat, linear-gradient(180deg, rgba(102, 224, 255, .92), rgba(145, 255, 218, .9)) 10px 10px / 2px 20px no-repeat, linear-gradient(270deg, rgba(255, 130, 208, .95), rgba(197, 120, 255, .88)) calc(100% - 10px) calc(100% - 10px) / 20px 2px no-repeat, linear-gradient(0deg, rgba(255, 130, 208, .95), rgba(197, 120, 255, .88)) calc(100% - 10px) calc(100% - 10px) / 2px 20px no-repeat; opacity: .65; } .profile__hero { min-height: 205px; } .profile__banner { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(760px 300px at 18% 0%, rgba(96, 224, 255, .2), transparent 65%), radial-gradient(780px 330px at 82% 100%, rgba(203, 102, 255, .16), transparent 68%), linear-gradient(120deg, rgba(28, 50, 89, .34), rgba(16, 22, 38, .58) 45%, rgba(47, 19, 58, .44)); } .profile__bannerImage { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; } .profile__identity { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; padding: 22px 20px 18px; min-height: 205px; } .profile__avatar { width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(114, 226, 255, .72); background: radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, .25), transparent 64%), linear-gradient(145deg, rgba(92, 212, 255, .7), rgba(94, 255, 195, .44) 54%, rgba(202, 108, 255, .44)); box-shadow: inset 0 0 28px rgba(107, 228, 255, .32), 0 0 22px rgba(78, 214, 255, .28); position: relative; overflow: hidden; } .profile__avatarImage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; } .profile__avatar--image { background: rgba(8, 13, 24, .85); } .profile__avatar::before { content: ""; position: absolute; inset: -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 63%); transform: translateX(-130%) rotate(8deg); } .profile__avatar::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); } .profile__hero:hover .profile__avatar::before { animation: profileAvatarSweep 900ms cubic-bezier(.4, 0, .2, 1) 1; } @keyframes profileAvatarSweep { 100% { transform: translateX(130%) rotate(8deg); } } .profile__titleBlock { min-width: 0; } .profile__username { margin: 0 0 4px; font-size: clamp(28px, 4vw, 34px); color: #f2f8ff; text-shadow: 0 0 14px rgba(95, 217, 255, .36); overflow-wrap: anywhere; } .profile__subtitle { color: #aac0da; font-size: 14px; letter-spacing: .03em; } .profile__bio { margin: 8px 0 0; max-width: min(680px, 100%); color: #deebfb; line-height: 1.45; } .profileMeta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .profileMeta__item { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(113, 200, 255, .24); background: rgba(8, 16, 30, .56); color: #d6e7fc; font-size: 12px; text-decoration: none; } .profileMeta__item:hover { text-decoration: none; border-color: rgba(122, 167, 255, .44); background: rgba(26, 42, 69, .62); } .profile__stats { margin: 0; } .profileStats { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .profileStats__left { display: flex; gap: 10px; flex-wrap: wrap; } .profileStat { min-width: 116px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(97, 186, 255, .26); background: linear-gradient(180deg, rgba(9, 16, 30, .78), rgba(11, 17, 31, .68)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .profileStat__value { color: #e5effd; font-size: 15px; font-weight: 900; } .profileStat__label { color: #95aac3; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .profileStats__right { margin-left: auto; display: flex; align-items: center; } .profileActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .profileFollowForm { margin: 0; } .profileMuteForm { margin: 0; } .messagesLayout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; } .messagesSidebar, .messagesThread { min-width: 0; } .messagesSidebar__head, .messagesThread__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .messagesList { display: flex; flex-direction: column; gap: 8px; } .messagesList__item { display: grid; gap: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(122, 167, 255, .16); border-radius: 16px; padding: 12px 14px; background: rgba(8, 14, 24, .72); } .messagesList__item:hover, .messagesList__item:focus-visible, .messagesList__item.is-active { border-color: rgba(116, 219, 255, .42); background: rgba(12, 22, 37, .88); box-shadow: 0 0 0 3px rgba(92, 211, 255, .10); } .messagesList__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .messagesList__user { font-weight: 800; color: #eef5ff; } .messagesList__time, .messagesList__preview { font-size: 12px; } .messagesList__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .messagesThread__messages { display: flex; flex-direction: column; gap: 12px; min-height: 280px; margin-bottom: 16px; } .messagesThread__empty { min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; } .messageBubble { max-width: min(680px, 100%); padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(122, 167, 255, .16); background: rgba(8, 14, 24, .78); } .messageBubble--mine { margin-left: auto; border-color: rgba(69, 212, 131, .22); background: rgba(12, 28, 20, .82); } .messageBubble__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; } .messageBubble__author { font-weight: 800; color: #eef5ff; } .messageBubble__body { line-height: 1.55; color: #e9f1ff; } .messagesComposer { border-top: 1px solid rgba(122, 167, 255, .16); padding-top: 16px; } .btn--neonFollow { border-color: rgba(108, 255, 190, .48); background: linear-gradient(180deg, rgba(12, 34, 25, .85), rgba(10, 22, 19, .88)) padding-box, linear-gradient(110deg, rgba(114, 255, 189, .90), rgba(83, 223, 144, .86), rgba(109, 255, 214, .78)) border-box; color: #eafff2; box-shadow: 0 0 0 2px rgba(83, 223, 144, .14), 0 0 22px rgba(83, 223, 144, .24); min-width: 148px; } .btn--neonFollow.is-following { border-color: rgba(94, 215, 255, .48); background: linear-gradient(180deg, rgba(16, 35, 56, .85), rgba(11, 23, 38, .88)) padding-box, linear-gradient(110deg, rgba(94, 215, 255, .90), rgba(127, 255, 211, .76), rgba(188, 109, 255, .70)) border-box; color: #e5f3ff; box-shadow: 0 0 0 2px rgba(84, 209, 255, .14), 0 0 22px rgba(84, 209, 255, .22); } .btn--neonFollow .btn__icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-weight: 900; } .btn--neonFollow .btn__icon svg { width: 14px; height: 14px; display: block; } .btn--neonFollow .btn__icon--edit svg { width: 15px; height: 15px; transform: translateY(.4px); opacity: .96; } .btn--neonFollow:hover, .btn--neonFollow:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(83, 223, 144, .18), 0 0 26px rgba(83, 223, 144, .34), 0 0 46px rgba(95, 212, 255, .18); text-decoration: none; } .btn--neonFollow.is-following:hover, .btn--neonFollow.is-following:focus-visible { box-shadow: 0 0 0 3px rgba(93, 214, 255, .20), 0 0 26px rgba(93, 214, 255, .34), 0 0 46px rgba(198, 104, 255, .20); } .btn--neonFollow:focus-visible { outline: none; } .btn--neonFollow.is-disabled, .btn--neonFollow:disabled { border-color: rgba(130, 145, 170, .45); background: linear-gradient(180deg, rgba(27, 33, 45, .85), rgba(20, 25, 36, .88)) padding-box, linear-gradient(110deg, rgba(120, 132, 156, .42), rgba(101, 112, 137, .36)) border-box; color: #adbacf; cursor: not-allowed; opacity: .76; filter: saturate(.6); transform: none; box-shadow: 0 0 0 1px rgba(120, 132, 156, .16); } .btn--ghost.is-active { border-color: rgba(255, 196, 108, .42); background: rgba(255, 196, 108, .10); color: #fff0cf; } .profile__feed { display: grid; gap: 12px; } .profile__feedHead { padding: 10px 14px; } .profile__feedTitle { margin: 0; font-size: 16px; color: #e6f1ff; } .profile__posts .card { margin-top: 0; } .profile__posts .card.post+.card.post { margin-top: 14px; } @media (max-width: 760px) { .profile__identity { align-items: center; flex-wrap: wrap; min-height: 188px; padding: 18px 16px 16px; } .profile__avatar { width: 74px; height: 74px; } .profileStats { flex-direction: column; align-items: stretch; } .profileStats__right { margin-left: 0; } .btn--neonFollow { width: 100%; justify-content: center; } } /* Posts */ .post__head { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; z-index: 4; } .post__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(92, 210, 255, .56), rgba(124, 248, 202, .36), rgba(194, 104, 255, .34), transparent); opacity: .82; } .post__avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; position: relative; overflow: hidden; border: 1px solid rgba(108, 197, 255, .56); background: radial-gradient(75% 72% at 30% 25%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(145deg, rgba(104, 210, 255, .56), rgba(88, 255, 196, .34) 52%, rgba(188, 102, 255, .34)); box-shadow: inset 0 0 26px rgba(88, 212, 255, .28), 0 0 16px rgba(84, 213, 255, .24); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .post__avatar::before { content: ""; position: absolute; inset: -55%; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-130%) rotate(8deg); } .post__avatar::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); } .post__avatar:hover { transform: translateY(-1px) scale(1.02); border-color: rgba(122, 232, 255, .86); box-shadow: inset 0 0 28px rgba(111, 234, 255, .4), 0 0 18px rgba(88, 212, 255, .46); } .post__avatar:hover::before, .post__avatar:focus-visible::before { animation: avatarSweep var(--cp-avatar-shimmer-speed) cubic-bezier(.4, 0, .2, 1) 1; } @keyframes avatarSweep { 100% { transform: translateX(130%) rotate(8deg); } } .post__meta { display: grid; gap: 4px; min-width: 0; flex: 1; } .post__nameRow { display: flex; align-items: center; gap: 8px; min-width: 0; } .post__nameRow::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(106, 255, 182, .95); box-shadow: 0 0 8px rgba(106, 255, 182, .9), 0 0 16px rgba(106, 255, 182, .45); } .post__user { color: #f6fbff; font-weight: 900; position: relative; text-decoration: none; display: inline-block; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .post__user::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0%; background: linear-gradient(90deg, rgba(95, 214, 255, 1), rgba(133, 255, 214, 1)); transition: width .25s ease, box-shadow .24s ease; } .post__user:hover { color: #aee7ff; text-shadow: 0 0 12px rgba(96, 214, 255, .42); animation: userFlicker var(--cp-user-flicker-speed) steps(2, end) 1; text-decoration: none; } .post__user:hover::after, .post__user:focus-visible::after { width: 100%; box-shadow: 0 0 10px rgba(105, 220, 255, .58); } @keyframes userFlicker { 0% { opacity: .95; } 38% { opacity: .8; } 55% { opacity: 1; } 74% { opacity: .92; } 100% { opacity: 1; } } .post__subRow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .post__time, .post__dot, .post__id { color: var(--muted); } .editedMeta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .editedMeta__label { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(122, 167, 255, .22); background: rgba(122, 167, 255, .08); color: #b9cee6; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; } .editedMeta__time { font-size: 12px; color: var(--muted); } a.post__id { text-decoration: none; transition: color .2s ease, text-shadow .2s ease; } a.post__id:hover, a.post__id:focus-visible { color: var(--accent); text-shadow: 0 0 10px rgba(122, 167, 255, .35); } .post__actions { margin-left: auto; display: flex; align-items: center; position: relative; z-index: 5; } .post__actions .inline { display: inline-flex; } .contentMenu { position: relative; z-index: 6; } .contentMenu__trigger { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(122, 167, 255, .24); background: rgba(14, 22, 36, .84); color: #dce8f8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease; } .contentMenu__trigger svg { width: 18px; height: 18px; } .contentMenu__trigger:hover, .contentMenu__trigger:focus-visible, .contentMenu.is-open .contentMenu__trigger { transform: translateY(-1px); border-color: rgba(122, 167, 255, .54); box-shadow: 0 0 0 3px rgba(122, 167, 255, .14), 0 0 22px rgba(122, 167, 255, .18); color: #f4f8ff; } .contentMenu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; display: grid; gap: 4px; padding: 8px; border-radius: 14px; border: 1px solid rgba(122, 167, 255, .22); background: rgba(9, 14, 25, .96); box-shadow: 0 20px 56px rgba(0, 0, 0, .48), 0 0 32px rgba(122, 167, 255, .10); opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; z-index: 30; } .contentMenu.is-open .contentMenu__panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .contentMenu__item { width: 100%; border: 1px solid transparent; background: transparent; color: #e6eefb; border-radius: 12px; padding: 9px 10px; display: inline-flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; font: inherit; transition: border-color .18s ease, background .18s ease, color .18s ease; } .contentMenu__item svg { width: 16px; height: 16px; flex: 0 0 auto; } .contentMenu__item:hover, .contentMenu__item:focus-visible { border-color: rgba(122, 167, 255, .18); background: rgba(122, 167, 255, .10); color: #f4f8ff; } .contentMenu__item.is-active { color: #ffe18f; } .contentMenu__item--placeholder, .contentMenu__item[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; } .contentMenu__item--danger { color: #ffb7c6; } .contentMenu__item--danger:hover, .contentMenu__item--danger:focus-visible { border-color: rgba(255, 92, 122, .18); background: rgba(255, 92, 122, .12); color: #ffdbe3; } .iconBtn { width: 34px; height: 34px; border-radius: 11px; border: 1px solid rgba(122, 167, 255, .26); background: rgba(16, 24, 40, .72); color: #d3deef; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .iconBtn svg { width: 16px; height: 16px; } .iconBtn:hover { transform: translateY(-1px); border-color: rgba(122, 167, 255, .52); box-shadow: 0 0 0 3px rgba(122, 167, 255, .16), 0 0 20px rgba(122, 167, 255, .2); } .iconBtn--danger { width: 40px; min-width: 40px; height: 38px; border-radius: 999px; position: relative; overflow: hidden; padding: 0; border: 2px solid transparent; clip-path: none; -webkit-clip-path: none; background: linear-gradient(160deg, rgba(12, 16, 28, .94), rgba(26, 14, 35, .90)) padding-box, linear-gradient(120deg, rgba(255, 132, 188, .45), rgba(149, 110, 255, .34), rgba(96, 204, 255, .34)) border-box; background-clip: padding-box, border-box; background-origin: border-box; backface-visibility: hidden; transform: translateZ(0); color: #e4edf9; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 12px rgba(150, 110, 255, .20); transition: width .32s cubic-bezier(.2, .8, .2, 1), border-radius .28s ease, box-shadow .24s ease, background .24s ease, color .24s ease, transform .2s ease, filter .2s ease; } .iconBtn--danger svg { width: 15px; height: 15px; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); } .iconBtn--danger::after { content: "Delete"; position: absolute; top: 50%; left: 16px; transform: translate(-10px, -50%); opacity: 0; color: #ffb6d0; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; pointer-events: none; transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .iconBtn--danger:hover, .iconBtn--danger:focus-visible { width: 120px; border-radius: 14px; border-color: transparent; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); color: #ffe8f1; transform: translateY(-1px) scale(var(--cp-delete-scale)); background: linear-gradient(160deg, rgba(30, 8, 28, .98), rgba(10, 10, 22, .98)) padding-box, linear-gradient(115deg, rgba(255, 173, 217, .98), rgba(255, 97, 121, .95), rgba(255, 109, 157, .9)) border-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 3px rgba(255, 96, 122, .22), 0 0 22px rgba(255, 90, 124, .45), 0 0 42px rgba(255, 96, 122, .34); filter: brightness(1.12); } .iconBtn--danger:hover::after, .iconBtn--danger:focus-visible::after { opacity: 1; transform: translate(0, -50%); } .post__avatar:focus-visible, .post__user:focus-visible, .iconBtn:focus-visible { outline: none; } .post__avatar:focus-visible { box-shadow: inset 0 0 24px rgba(122, 167, 255, .34), 0 0 0 3px rgba(122, 167, 255, .22), 0 0 18px rgba(122, 167, 255, .32); } .post__user:focus-visible { text-decoration: none; color: #f8fbff; text-shadow: 0 0 12px rgba(122, 167, 255, .35); } .post__body { line-height: 1.62; color: #e7edf8; } .mentionLink, .hashtagLink { color: #8cc4ff; font-weight: 700; text-decoration: none; } .mentionLink:hover, .hashtagLink:hover { text-decoration: underline; } .mentionSuggest { display: grid; gap: 8px; margin-bottom: 8px; padding: 10px; border-radius: 12px; border: 1px solid rgba(122, 167, 255, .18); background: rgba(9, 15, 27, .88); box-shadow: 0 12px 28px rgba(0, 0, 0, .24); } .mentionSuggest__label { color: #b7c4db; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .mentionSuggest__list { display: grid; gap: 6px; } .mentionSuggest__item { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; text-align: left; } .mentionSuggest__item:hover, .mentionSuggest__item.is-active { border-color: rgba(122, 167, 255, .3); background: rgba(122, 167, 255, .12); } .mentionSuggest__name { font-weight: 700; } .mentionSuggest__empty { color: #b7c4db; font-size: 14px; } .post__image { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(100, 194, 255, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); background: rgba(255, 255, 255, .025); } .post__image img { display: block; width: 100%; height: auto; } .post__actionsBar { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(103, 189, 255, .22); display: flex; gap: 8px; flex-wrap: wrap; } .postActForm { margin: 0; display: inline-flex; } .postAct { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(102, 191, 255, .24); background: rgba(12, 20, 34, .72); color: #b9c9dd; font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, filter .2s ease; } .postAct svg { width: 13px; height: 13px; } .postAct__count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(122, 167, 255, .14); color: #e4f1ff; font-size: 11px; text-align: center; line-height: 1.45; } .postAct.is-active { color: #ecfbff; border-color: rgba(106, 244, 193, .58); box-shadow: 0 0 0 3px rgba(106, 244, 193, .14), 0 0 16px rgba(106, 244, 193, .24); } .postAct.is-active .postAct__count { background: rgba(106, 244, 193, .22); color: #f0fff9; } .postAct:hover, .postAct:focus-visible { color: #dbecff; border-color: rgba(116, 219, 255, .62); box-shadow: 0 0 0 3px rgba(92, 211, 255, .14), 0 0 18px rgba(92, 211, 255, .2); transform: translateY(-1px); text-decoration: none; } .postAct[disabled], .postAct[aria-disabled="true"] { opacity: .75; cursor: not-allowed; transform: none; filter: none; } .postAct[disabled]:hover, .postAct[aria-disabled="true"]:hover { border-color: rgba(102, 191, 255, .24); box-shadow: none; } body.commentDock-open { overflow: hidden; } .commentDock { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 22px; } .commentDock[hidden] { display: none !important; } .commentDock__backdrop { position: absolute; inset: 0; background: radial-gradient(1100px 520px at 10% -10%, rgba(122, 167, 255, .18), transparent 65%), radial-gradient(1100px 520px at 90% -10%, rgba(69, 212, 131, .14), transparent 65%), rgba(5, 8, 16, .72); backdrop-filter: blur(8px); } .commentDock__panel { position: relative; width: min(1180px, calc(100vw - 44px)); max-height: calc(100vh - 44px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid rgba(122, 167, 255, .3); background: rgba(7, 12, 22, .96); box-shadow: 0 30px 80px rgba(0, 0, 0, .58), 0 0 35px rgba(122, 167, 255, .1); } .commentDock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(122, 167, 255, .24); background: rgba(14, 22, 38, .78); } .commentDock__head h2 { margin: 0; font-size: 17px; letter-spacing: .01em; } .commentDock__headActions { display: inline-flex; align-items: center; gap: 8px; } .commentDock__split { display: grid; grid-template-columns: minmax(320px, .96fr) minmax(380px, 1.04fr); flex: 1 1 auto; min-height: 0; overflow: hidden; } .commentDock__left, .commentDock__right { min-height: 0; } .commentDock__left { overflow: auto; padding: 14px; border-right: 1px solid rgba(122, 167, 255, .2); background: linear-gradient(180deg, rgba(16, 26, 43, .75), rgba(8, 13, 23, .75)); } .commentDock__postPreview { margin: 0; } .commentDock__postPreview .post__body { font-size: 15px; } .commentDock__right { display: flex; flex-direction: column; background: rgba(7, 11, 20, .92); } .commentDock__listWrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px; } .commentDock__listWrap::-webkit-scrollbar { width: 10px; } .commentDock__listWrap::-webkit-scrollbar-thumb { background: rgba(122, 167, 255, .35); border-radius: 999px; } .commentDock__listWrap::-webkit-scrollbar-track { background: rgba(8, 12, 20, .6); } .commentDock__list { display: flex; flex-direction: column; gap: 10px; } .commentDock__item { border: 1px solid rgba(122, 167, 255, .22); border-radius: 12px; background: rgba(18, 26, 42, .68); padding: 10px 11px; } .commentDock__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .commentDock__author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .commentDock__avatar { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; border: 1px solid rgba(122, 167, 255, .36); background: rgba(122, 167, 255, .12); color: #e3f1ff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease; } .commentDock__avatar svg { width: 12px; height: 12px; } .commentDock__avatar:hover, .commentDock__avatar:focus-visible { border-color: rgba(116, 219, 255, .68); background: rgba(122, 167, 255, .2); box-shadow: 0 0 0 3px rgba(92, 211, 255, .14); transform: translateY(-1px); } .commentDock__user { font-weight: 800; color: #eaf6ff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .commentDock__user:hover, .commentDock__user:focus-visible { color: #9fdcff; } .commentDock__metaEnd { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .commentDock__time { color: var(--muted); font-size: 12px; } .commentDock__metaEnd .editedMeta { justify-content: flex-end; } .commentDock__body { line-height: 1.55; color: #e9f1ff; font-size: 14px; } .commentDock__actions { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .commentDock__actionButtons { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .commentDock__voteGroup { display: inline-flex; align-items: center; gap: 6px; } .commentDock__voteBtn { width: 28px; height: 28px; border: 1px solid rgba(122, 167, 255, .24); background: rgba(12, 20, 34, .72); color: #b7c8dc; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } .commentDock__voteBtn svg { width: 14px; height: 14px; } .commentDock__voteBtn:hover, .commentDock__voteBtn:focus-visible { transform: translateY(-1px); border-color: rgba(116, 219, 255, .62); box-shadow: 0 0 0 3px rgba(92, 211, 255, .14); } .commentDock__voteBtn--up.is-active { color: #7df0a7; border-color: rgba(69, 212, 131, .48); background: rgba(69, 212, 131, .14); } .commentDock__voteBtn--down.is-active { color: #ffb8c8; border-color: rgba(255, 92, 122, .44); background: rgba(255, 92, 122, .14); } .commentDock__score { min-width: 24px; text-align: center; font-size: 13px; font-weight: 800; color: #d8e4f4; } .commentDock__score.is-positive { color: #88e8ad; } .commentDock__score.is-negative { color: #ffb3c5; } .commentDock__replyBtn { border: 1px solid rgba(122, 167, 255, .28); background: rgba(12, 20, 34, .72); color: #b9c9dd; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; } .commentDock__bookmarkBtn { border: 1px solid rgba(122, 167, 255, .28); background: rgba(12, 20, 34, .72); color: #b9c9dd; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; } .commentDock__bookmarkBtn:hover, .commentDock__bookmarkBtn:focus-visible, .commentDock__replyBtn:hover, .commentDock__replyBtn:focus-visible { color: #e2f2ff; border-color: rgba(116, 219, 255, .62); box-shadow: 0 0 0 3px rgba(92, 211, 255, .14); } .commentDock__bookmarkBtn.is-active { color: #ffe18f; border-color: rgba(255, 210, 84, .46); background: rgba(255, 210, 84, .12); } .commentDock__item.is-highlighted { border-color: rgba(255, 210, 84, .7); box-shadow: 0 0 0 3px rgba(255, 210, 84, .14); } .commentDock__children { margin-top: 10px; margin-left: 6px; padding-left: 12px; border-left: 1px dashed rgba(122, 167, 255, .28); display: flex; flex-direction: column; gap: 10px; } .commentDock__empty { text-align: center; padding: 20px 10px; } .commentDock__form { margin: 0; border-top: 1px solid rgba(122, 167, 255, .22); padding: 12px 14px 14px; background: rgba(12, 18, 30, .86); } .commentDock__form textarea { min-height: 84px; max-height: 180px; } .commentDock__replying { margin-bottom: 8px; padding: 6px 8px; border: 1px solid rgba(122, 167, 255, .24); background: rgba(16, 24, 40, .6); border-radius: 10px; font-size: 12px; } .commentDock__replyCancel { margin-left: 8px; border: 0; background: transparent; color: #9fdcff; font: inherit; font-weight: 700; cursor: pointer; padding: 0; } .commentDock__replyCancel:hover, .commentDock__replyCancel:focus-visible { text-decoration: underline; } .commentDock__login { margin: 0; border-top: 1px solid rgba(122, 167, 255, .22); padding: 14px; } /* Slight focus mode for hovered panel */ @supports selector(.feed:has(.card.post:hover)) { .feed:has(.card.post:hover) .card.post { opacity: var(--cp-dim-opacity); filter: saturate(var(--cp-dim-saturation)) brightness(var(--cp-dim-brightness)); } .feed:has(.card.post:hover) .card.post:hover { opacity: 1; filter: brightness(var(--cp-panel-brightness)) saturate(var(--cp-panel-saturation)); } } @media (max-width: 640px) { .post__head { gap: 10px; align-items: flex-start; } .post__avatar { width: 38px; height: 38px; flex-basis: 38px; } .post__subRow { gap: 6px; font-size: 12px; } .post__actionsBar { gap: 6px; } .postAct { padding: 6px 9px; font-size: 11px; } .commentDock { padding: 12px; } .commentDock__panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } .commentDock__split { grid-template-columns: 1fr; grid-template-rows: minmax(200px, auto) minmax(220px, 1fr); max-height: calc(100vh - 106px); } .commentDock__left { border-right: 0; border-bottom: 1px solid rgba(122, 167, 255, .2); } } .pager { display: flex; justify-content: center; padding: 20px 0 10px; } /* Footer: smaller + no huge empty area */ .footer { border-top: 1px solid rgba(122, 167, 255, .14); padding: 10px 0; background: rgba(0, 0, 0, .16); } .footer .muted { font-size: 13px } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { body::before { animation: none } body::after { animation: none } .card::before { animation: none } .card.post::before, .card.post::after { animation: none } .card.post .card__body::after, .post__avatar::before, .post__user, .postAct, .profile__avatar::before { animation: none !important; } .post__user::after, .post__avatar, .iconBtn, a.post__id, .postAct, .card.post::before, .card.post::after, .card.post .card__body::before, .card.post .card__body::after, .profile__hero, .profileStats, .profile__feedHead, .profile__avatar, .btn--neonFollow { transition: none; } .card.post:hover, .iconBtn:hover, .post__avatar:hover, .postAct:hover, .btn--neonFollow:hover { transform: none; } .card.post:hover, .feed:has(.card.post:hover) .card.post { opacity: 1; filter: none; } .iconBtn--danger, .iconBtn--danger:hover, .iconBtn--danger:focus-visible { width: 40px; border-radius: 999px; clip-path: none; -webkit-clip-path: none; } .iconBtn--danger::after { display: none; } .card, .btn, .search__btn { transition: none; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(122, 167, 255, .35); background: rgba(122, 167, 255, .12); color: var(--text); cursor: pointer; font-weight: 800; position: relative; overflow: hidden; } } /* Page transition overlay */ .pagefx { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 220ms ease; } .pagefx.is-active { opacity: 1; } /* Soft blur + dark veil */ .pagefx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 520px at 20% 0%, rgba(122, 167, 255, .18), transparent 60%), radial-gradient(900px 520px at 80% 0%, rgba(69, 212, 131, .12), transparent 60%), rgba(6, 7, 11, .55); backdrop-filter: blur(8px); } /* Top loading bar */ .pagefx__bar { position: absolute; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--neonA), var(--neonB), var(--neonC)); box-shadow: 0 0 18px rgba(122, 167, 255, .25); border-radius: 0 0 999px 999px; } /* When active: animate bar across */ .pagefx.is-active .pagefx__bar { animation: pagefxBar 650ms ease forwards; } @keyframes pagefxBar { 0% { width: 0%; opacity: .9; } 65% { width: 72%; opacity: 1; } 100% { width: 100%; opacity: 1; } } /* Nice fade-in for main content on load */ .page-enter { animation: pageEnter 260ms ease both; } @keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .pagefx, .page-enter { animation: none !important; transition: none !important; } .pagefx__bar { display: none; } } /* Profile dropdown menu */ .nav__menu { margin-left: 6px; position: relative; display: inline-flex; align-items: center; z-index: 1; } .menu__panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: rgba(10, 14, 28, .92); border: 1px solid rgba(122, 167, 255, .22); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 40px rgba(122, 167, 255, .08); padding: 8px; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; z-index: 50; transform-origin: top right; transform: translateY(-6px) scale(.98); } .nav__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(122, 167, 255, .35); background: rgba(122, 167, 255, .08); line-height: 1; padding: 0; position: relative; overflow: hidden; color: rgba(235, 245, 255, .95); } .nav__icon svg { display: block; width: 20px; height: 20px; transform: translateY(1px); filter: drop-shadow(0 0 6px rgba(122, 167, 255, .45)) drop-shadow(0 0 14px rgba(122, 167, 255, .22)); transition: filter 160ms ease, transform 160ms ease, color 160ms ease; } /* Hover bridge so the menu doesn't flicker when moving from icon to panel */ .nav__menu::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 12px; /* bridge area */ pointer-events: auto; /* keeps hover alive */ } /* Open on hover OR keyboard focus */ .nav__menu:hover .menu__panel, .nav__menu:focus-within .menu__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .nav__menu:hover .nav__icon, .nav__menu:focus-within .nav__icon { box-shadow: 0 0 0 3px rgba(122, 167, 255, .15), 0 0 25px rgba(122, 167, 255, .20); border-color: rgba(122, 167, 255, .65); filter: brightness(1.03); color: rgba(245, 252, 255, 1); } .nav__menu:hover .nav__icon svg, .nav__menu:focus-within .nav__icon svg { filter: drop-shadow(0 0 8px rgba(122, 167, 255, .70)) drop-shadow(0 0 18px rgba(122, 167, 255, .35)); transform: scale(1.03); } .menu__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 12px; color: var(--text); text-decoration: none; border: 1px solid transparent; position: relative; } .menu__itemLabel { display: inline-flex; align-items: center; gap: 8px; } .menu__itemIcon { width: 14px; height: 14px; color: rgba(141, 221, 255, .94); } .menu__item:hover { text-decoration: none; background: rgba(122, 167, 255, .10); border-color: rgba(122, 167, 255, .18); } .menu__item::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--neonA), var(--neonB)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; border-radius: 999px; } .menu__item:hover::after { transform: scaleX(1); box-shadow: 0 0 12px rgba(122, 167, 255, .35); } .menuBadge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(122, 167, 255, .18); border: 1px solid rgba(122, 167, 255, .26); color: var(--text); font-size: 12px; font-weight: 800; } .menu__item--placeholder { cursor: default; opacity: .78; } .menu__item--placeholder:hover { background: transparent; border-color: transparent; } .menu__item--placeholder::after, .menu__item--placeholder:hover::after { transform: scaleX(0); box-shadow: none; } .menu__sep { height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 4px; } .menu__btnLogout { width: 100%; text-align: left; background: transparent; border: 0; color: var(--danger); font-weight: 900; cursor: pointer; padding: 0; } .menu__btnLogout:hover { text-decoration: underline; } /* Slight spacing between create (+) and profile */ .nav__menu--plus { margin-right: 4px; } /* Make + button feel primary */ .nav__icon--plus { border: 2px solid rgba(69, 212, 131, .40); background: rgba(69, 212, 131, .10); color: rgba(190, 255, 225, .96); } .nav__icon--plus svg { filter: drop-shadow(0 0 6px rgba(69, 212, 131, .55)) drop-shadow(0 0 14px rgba(69, 212, 131, .25)); } .nav__icon--plus:hover { box-shadow: 0 0 0 4px rgba(69, 212, 131, .18), 0 0 32px rgba(69, 212, 131, .22); } .nav__icon--plus:hover svg { transform: rotate(90deg); transition: transform .2s ease; } /* Optional: when create menu open, glow green */ .nav__menu--plus:hover .nav__icon--plus, .nav__menu--plus:focus-within .nav__icon--plus { border-color: rgba(69, 212, 131, .70); box-shadow: 0 0 0 3px rgba(69, 212, 131, .15), 0 0 24px rgba(69, 212, 131, .20); color: rgba(215, 255, 238, 1); } .nav__menu--plus:hover .nav__icon--plus svg, .nav__menu--plus:focus-within .nav__icon--plus svg { filter: drop-shadow(0 0 9px rgba(69, 212, 131, .80)) drop-shadow(0 0 20px rgba(69, 212, 131, .38)); transform: scale(1.03); } .nav__menu--profile:hover .nav__icon--profile { box-shadow: 0 0 0 3px rgba(122, 167, 255, .18), 0 0 30px rgba(122, 167, 255, .25); } .menu__divider { height: 1px; background: rgba(255, 255, 255, .08); margin: 8px 6px; } .menu__form { margin: 0; } .menu__danger { width: 100%; text-align: left; background: transparent; border: 0; color: #ff5c7a; padding: 10px 10px; border-radius: 12px; cursor: pointer; font: inherit; } .menu__danger:hover { background: rgba(255, 92, 122, .10); } .searchWrap { display: flex; align-items: center; gap: 12px; flex: 1 1 360px; max-width: 620px; } .searchWrap .nav__menu--plus { flex: 0 0 auto; } /* ============================ Orbiting Neon Ring (Option 1) ============================ */ /* Default orbit color (blue). Override per element with --orbit */ .nav__icon { --orbit: rgba(122, 167, 255, .92); } /* Green orbit for plus button */ .nav__icon--plus { --orbit: rgba(69, 212, 131, .90); } /* The orbiting highlight ring (hidden by default) */ .nav__icon::before { content: ""; position: absolute; inset: -3px; /* slightly outside for a thicker feel */ border-radius: 50%; padding: 2px; /* ring thickness */ opacity: 0; pointer-events: none; /* "scanner wedge" moving around border */ background: conic-gradient(from 0deg, transparent 0deg 250deg, var(--orbit) 290deg 360deg); /* cut out the middle so it's only a border ring */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: none; transition: opacity 180ms ease; } /* Soft outer glow (also hidden by default) */ .nav__icon::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, var(--orbit), transparent 62%); filter: blur(10px); transition: opacity 180ms ease; } /* Animate ring ONLY on hover/focus */ .nav__menu:hover .nav__icon::before, .nav__menu:focus-within .nav__icon::before { opacity: 1; animation: truxOrbitSpin 2.2s linear infinite; } .nav__menu:hover .nav__icon::after, .nav__menu:focus-within .nav__icon::after { opacity: .32; } .nav__icon:hover { transform: translateY(-2px); } /* Slightly stronger when the menu is engaged (keeps it feeling "active") */ /* Spin animation */ @keyframes truxOrbitSpin { to { transform: rotate(360deg); } } /* Reduced motion: keep thicker border but stop the orbit animation */ @media (prefers-reduced-motion: reduce) { .nav__icon::before { animation: none !important; } .search__btn:hover .sweep, .search__btn:focus-visible .sweep { animation: none; opacity: 1; transform: translateX(0); } } /* Surge when hovering the icon itself (reliable) */ .nav__icon:hover, .nav__icon:focus-visible { color: rgba(245, 252, 255, 1); } .nav__icon:hover svg, .nav__icon:focus-visible svg { filter: drop-shadow(0 0 10px rgba(122, 167, 255, .85)) drop-shadow(0 0 22px rgba(122, 167, 255, .42)); transform: scale(1.06); } /* Plus variant */ .nav__icon--plus:hover, .nav__icon--plus:focus-visible { color: rgba(215, 255, 238, 1); } .nav__icon--plus:hover svg, .nav__icon--plus:focus-visible svg { filter: drop-shadow(0 0 11px rgba(69, 212, 131, .90)) drop-shadow(0 0 24px rgba(69, 212, 131, .44)); transform: scale(1.06); } /* ============================ Mobile Web Support (TruX) Paste at END of style.css ============================ */ @media (max-width: 820px) { /* You already allow wrapping; now we control the order */ .topbar__inner { flex-wrap: wrap; align-items: center; gap: 10px; } /* Row 1: Brand + Nav */ .brand { order: 1; flex: 0 0 auto; } .nav { order: 2; margin-left: auto; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Row 2: Search full width */ .search { order: 3; flex: 1 1 100%; min-width: 0; } .search__input { min-width: 0; } /* Give the page a bit more breathing room */ .container { width: min(980px, calc(100% - 20px)); } h1 { font-size: 24px; } .card__body { padding: 14px; } } @media (max-width: 640px) { /* Make buttons easier to tap */ .btn, .search__btn, .nav__icon, .iconBtn { min-height: 44px; /* good touch target */ } /* Reduce hover-only fancy scaling on touch-sized screens */ .btn:hover { transform: none; } /* Post images: avoid overly tall images taking over the screen */ .post__image img { max-height: 60vh; object-fit: cover; } /* The delete “expands to 120px” effect is cool on desktop, but cramped on phones. Keep it compact. */ .iconBtn--danger:hover, .iconBtn--danger:focus-visible { width: 40px; border-radius: 999px; clip-path: none; -webkit-clip-path: none; } .iconBtn--danger::after { display: none; } /* Dropdown menus: make the panel easier to hit on mobile */ .menu__panel { min-width: min(92vw, 320px); right: 0; } /* If the nav gets tight, allow wrap cleanly */ .nav { gap: 8px; } .feedSwitch { display: flex; width: 100%; } .feedSwitch__item { flex: 1 1 0; min-width: 0; } .messagesLayout { grid-template-columns: 1fr; } } /* Touch devices: hover menus are unreliable. This improves usability without JS changes: - focus-within already opens the menu - make taps feel responsive */ @media (hover: none) and (pointer: coarse) { .nav__icon:active { transform: translateY(-1px); } .menu__item { padding: 12px 12px; /* bigger tap target */ } } /* Settings page */ .settingsCard { max-width: 760px; margin-left: auto; margin-right: auto; } .settingsForm { gap: 14px; } .settingSection { display: grid; gap: 10px; } .settingSection__head { display: grid; gap: 4px; } .settingsSectionStandalone { margin-top: 20px; } .settingRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); } .settingRow__label { display: grid; gap: 4px; } .settingRow input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } .profileMediaGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .profileMediaCard { display: grid; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); } .profileMediaPreview { width: 100%; display: block; object-fit: cover; border-radius: 12px; border: 1px solid rgba(122, 167, 255, .20); background: rgba(11, 18, 32, .86); } .profileMediaPreview--avatar { width: 96px; height: 96px; border-radius: 50%; } .profileMediaPreview--banner { aspect-ratio: 16 / 6; } .profileMediaEmpty { min-height: 96px; display: flex; align-items: center; } .profileMediaToggle { gap: 8px; } .profileMediaToggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .premiumPlans { max-width: 980px; } .premiumTierGrid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .premiumTier { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .02); position: relative; overflow: hidden; isolation: isolate; transition: transform 220ms cubic-bezier(.2, .65, .3, 1), box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease, background 220ms ease; --tier-accent-rgb: 122, 167, 255; --tier-lift: -3px; --tier-scale: 1.012; --tier-glow-alpha: .16; } .premiumTier::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background: linear-gradient(120deg, transparent 0 28%, rgba(var(--tier-accent-rgb), .14) 50%, transparent 72%), radial-gradient(110% 95% at 50% -10%, rgba(var(--tier-accent-rgb), .20), transparent 60%); transform: translateX(-24%); transition: opacity 220ms ease, transform 220ms ease; } .premiumTier::after { content: ""; position: absolute; inset: -65% -40%; pointer-events: none; z-index: 0; opacity: 0; background: linear-gradient( 108deg, transparent 38%, rgba(var(--tier-accent-rgb), .42) 50%, transparent 62% ); transform: translateX(-120%) rotate(9deg); } .premiumTier > * { position: relative; z-index: 1; } .premiumTier:hover, .premiumTier:focus-within { transform: translateY(var(--tier-lift)) scale(var(--tier-scale)); box-shadow: 0 16px 34px rgba(0, 0, 0, .35), 0 0 26px rgba(var(--tier-accent-rgb), var(--tier-glow-alpha)); border-color: rgba(var(--tier-accent-rgb), .55); filter: saturate(1.08) brightness(1.03); } .premiumTier:hover::before, .premiumTier:focus-within::before { opacity: 1; transform: translateX(0); } .premiumTier:hover::after, .premiumTier:focus-within::after { opacity: 1; animation: premiumTierSweep 860ms cubic-bezier(.3, .1, .2, 1) 1; } @keyframes premiumTierSweep { 0% { transform: translateX(-120%) rotate(9deg); } 100% { transform: translateX(120%) rotate(9deg); } } .premiumTier__title { margin: 0; font-size: 18px; color: #eff6ff; } .premiumTier__desc { margin: 0; min-height: 42px; font-size: 13px; } .premiumTier__features { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #dbe8fb; } .premiumTier--basic { border-color: rgba(122, 167, 255, .24); --tier-accent-rgb: 122, 167, 255; --tier-lift: -3px; --tier-scale: 1.012; --tier-glow-alpha: .16; } .premiumTier--standard { border-color: rgba(94, 220, 172, .24); --tier-accent-rgb: 94, 220, 172; --tier-lift: -5px; --tier-scale: 1.016; --tier-glow-alpha: .22; } .premiumTier--advanced { border-color: rgba(231, 171, 86, .32); --tier-accent-rgb: 231, 171, 86; --tier-lift: -7px; --tier-scale: 1.02; --tier-glow-alpha: .30; } .premiumTier--plus { border-color: rgba(229, 120, 200, .32); --tier-accent-rgb: 229, 120, 200; --tier-lift: -9px; --tier-scale: 1.026; --tier-glow-alpha: .40; } .premiumTier--standard:hover::after, .premiumTier--standard:focus-within::after { animation-duration: 760ms; } .premiumTier--advanced:hover, .premiumTier--advanced:focus-within { background: linear-gradient(160deg, rgba(255, 184, 100, .09), rgba(255, 255, 255, .02) 55%), rgba(255, 255, 255, .02); background-size: 180% 180%, auto; animation: premiumAdvancedPulse 1.35s linear infinite; } .premiumTier--plus:hover, .premiumTier--plus:focus-within { background: linear-gradient(155deg, rgba(234, 133, 214, .12), rgba(131, 197, 255, .08) 58%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .02); background-size: 170% 170%, auto; box-shadow: 0 22px 45px rgba(0, 0, 0, .45), 0 0 38px rgba(229, 120, 200, .34), 0 0 20px rgba(131, 197, 255, .24); transform: perspective(760px) translateY(var(--tier-lift)) rotateX(3deg) scale(var(--tier-scale)); } .premiumTier--plus:hover::before, .premiumTier--plus:focus-within::before { animation: premiumPlusAura 1.8s linear infinite; } @keyframes premiumAdvancedPulse { 0% { background-position: 0% 50%; } 100% { background-position: 140% 50%; } } @keyframes premiumPlusAura { 0% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.15) brightness(1.08); } 100% { filter: saturate(1) brightness(1); } } .premiumPlans__footnote { margin-top: 14px; } @media (prefers-reduced-motion: reduce) { .premiumTier, .premiumTier:hover, .premiumTier:focus-within { transition: none; transform: none; animation: none; } .premiumTier::before, .premiumTier::after, .premiumTier:hover::before, .premiumTier:hover::after, .premiumTier:focus-within::before, .premiumTier:focus-within::after { animation: none; } } .notificationsCard { max-width: 760px; margin-left: auto; margin-right: auto; } .notificationList { display: grid; gap: 10px; } .notificationItem { display: block; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); text-decoration: none; } .notificationItem:hover { text-decoration: none; border-color: rgba(122, 167, 255, .22); background: rgba(122, 167, 255, .08); } .notificationItem__body { display: grid; gap: 6px; } .notificationItem__text { color: var(--text); font-weight: 700; line-height: 1.5; } .notificationItem__time { font-size: 13px; } /* User-selected reduced motion mode */ body.motion--reduced::before, body.motion--reduced::after, body.motion--reduced .card::before, body.motion--reduced .card.post::before, body.motion--reduced .card.post::after, body.motion--reduced .card.post .card__body::after, body.motion--reduced .profile__avatar::before, body.motion--reduced .nav__icon::before, body.motion--reduced .search__btn .sweep { animation: none !important; } body.motion--reduced .pagefx { display: none; } body.motion--reduced .page-enter { animation: none !important; } body.motion--reduced .topbar { backdrop-filter: none; } body.motion--reduced .card.post::after, body.motion--reduced .nav__icon::after { filter: none; } body.motion--reduced .card:hover, body.motion--reduced .card.post:hover, body.motion--reduced .btn:hover, body.motion--reduced .postAct:hover, body.motion--reduced .nav__icon:hover, body.motion--reduced .iconBtn:hover { transform: none; } body.motion--reduced .iconBtn--danger, body.motion--reduced .iconBtn--danger:hover, body.motion--reduced .iconBtn--danger:focus-visible { width: 40px; border-radius: 999px; clip-path: none; -webkit-clip-path: none; } body.motion--reduced .iconBtn--danger::after { display: none; } body.motion--reduced .search__btn:hover .sweep, body.motion--reduced .search__btn:focus-visible .sweep { opacity: 1; transform: translateX(0); } /* User-selected classic mode */ body.appearance--classic { --accent: #6f95db; --neonA: rgba(111, 149, 219, .6); --neonB: rgba(99, 195, 151, .45); --neonC: rgba(224, 111, 136, .45); background: linear-gradient(180deg, #10131a, #0c1016); background-attachment: scroll; } body.appearance--classic::before, body.appearance--classic::after, body.appearance--classic .card::before, body.appearance--classic .card.post::before, body.appearance--classic .card.post::after, body.appearance--classic .card.post .card__body::before, body.appearance--classic .card.post .card__body::after, body.appearance--classic .profile__hero::before, body.appearance--classic .profile__hero::after, body.appearance--classic .profileStats::before, body.appearance--classic .profileStats::after, body.appearance--classic .profile__feedHead::before, body.appearance--classic .profile__feedHead::after, body.appearance--classic .menu__item::after, body.appearance--classic .brand::after, body.appearance--classic .pagefx, body.appearance--classic .search__btn .sweep, body.appearance--classic .nav__icon::before, body.appearance--classic .nav__icon::after { display: none !important; } body.appearance--classic .topbar { background: rgba(13, 18, 30, .96); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: none; backdrop-filter: none; } body.appearance--classic .card, body.appearance--classic .card.post, body.appearance--classic .profile__hero, body.appearance--classic .profileStats, body.appearance--classic .profile__feedHead, body.appearance--classic .menu__panel { border: 1px solid rgba(255, 255, 255, .10); background: rgba(17, 23, 36, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } body.appearance--classic .card:hover, body.appearance--classic .card.post:hover { transform: none; filter: none; border-color: rgba(255, 255, 255, .14); } body.appearance--classic .card.post .card__body, body.appearance--classic .profileStat, body.appearance--classic .post__image { border-color: rgba(255, 255, 255, .10); background: rgba(12, 17, 27, .88); box-shadow: none; } body.appearance--classic .profile__banner { background: linear-gradient(120deg, rgba(29, 40, 60, .55), rgba(16, 22, 34, .75)); } body.appearance--classic .profile__subtitle { color: #b7c4d8; } body.appearance--classic .post__avatar, body.appearance--classic .profile__avatar, body.appearance--classic .iconBtn, body.appearance--classic .postAct, body.appearance--classic .nav__icon { box-shadow: none; filter: none; } body.appearance--classic .nav__icon { border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14); } body.appearance--classic .nav__icon--plus { border: 1px solid rgba(99, 195, 151, .45); background: rgba(99, 195, 151, .08); } body.appearance--classic .nav__icon:hover, body.appearance--classic .nav__icon:focus-visible { transform: none; } body.appearance--classic .search__btn, body.appearance--classic .btn { border: 1px solid rgba(111, 149, 219, .42); background: rgba(111, 149, 219, .12); box-shadow: none; }