/* ============================================================ LINKSY PREMIUM THEME Activated by adding class "is-premium" to or . All rules scoped so zero impact on free users. ============================================================ */ /* ── GOOGLE FONT ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ── PREMIUM CSS VARIABLES ── */ .is-premium body, body.is-premium { --glass-bg: rgba(255,255,255,0.42); --glass-border: rgba(255,255,255,0.75); --glass-shadow: 0 8px 40px rgba(46,204,135,0.18), 0 2px 8px rgba(56,189,248,0.10); --glass-blur: blur(28px); --post-border: rgba(46,204,135,0.38); --post-shadow: 0 4px 28px rgba(46,204,135,0.13), 0 1.5px 6px rgba(56,189,248,0.08); --font: 'Inter', 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; } /* ── BODY BASE ── */ .is-premium body, body.is-premium { font-family: var(--font); letter-spacing: -0.01em; background: rgba(232,248,240,0.6); } /* ── BACKGROUND BLOBS ── */ .is-premium body::before, body.is-premium::before { opacity: 0.22; background: radial-gradient(circle, #2ecc87 0%, #38bdf8 60%, #f59e0b 100%); animation: blobMove1 10s ease-in-out infinite alternate; } .is-premium body::after, body.is-premium::after { opacity: 0.18; background: radial-gradient(circle, #f59e0b 0%, #38bdf8 50%, #6ee7b7 100%); animation: blobMove2 13s ease-in-out infinite alternate; } /* ── NAVBAR ── */ .is-premium .navbar, body.is-premium .navbar { background: rgba(255,255,255,0.62); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border-bottom: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 2px 24px rgba(46,204,135,0.12), 0 1px 0 rgba(245,158,11,0.18) inset; } .is-premium .navbar::after, body.is-premium .navbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.5) 20%, rgba(46,204,135,0.6) 50%, rgba(56,189,248,0.5) 80%, transparent 100%); pointer-events: none; } /* ── GLASS CARDS ── */ .is-premium .glass, body.is-premium .glass { background: rgba(255,255,255,0.44); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1.5px solid rgba(255,255,255,0.78); box-shadow: 0 8px 40px rgba(46,204,135,0.14), 0 2px 8px rgba(56,189,248,0.08), inset 0 1px 0 rgba(255,255,255,0.9); } /* ── POST CARDS ── */ .is-premium .post-card, body.is-premium .post-card { border: 1.5px solid var(--post-border) !important; box-shadow: var(--post-shadow) !important; background: rgba(255,255,255,0.46) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; } .is-premium .post-card::before, body.is-premium .post-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(46,204,135,0.5) 0%, rgba(56,189,248,0.5) 50%, rgba(245,158,11,0.4) 100%); pointer-events: none; z-index: 1; } .is-premium .post-card:hover, body.is-premium .post-card:hover { box-shadow: 0 8px 40px rgba(46,204,135,0.22), 0 2px 12px rgba(56,189,248,0.12) !important; border-color: rgba(46,204,135,0.55) !important; transform: translateY(-2px); } /* ── POST TYPOGRAPHY ── */ .is-premium .post-author-name, body.is-premium .post-author-name { font-weight: 800; letter-spacing: -0.02em; } .is-premium .post-content, body.is-premium .post-content { font-size: 0.92rem; line-height: 1.72; letter-spacing: 0.005em; color: #1a2e22; } .is-premium .post-action-btn:hover, body.is-premium .post-action-btn:hover { background: rgba(46,204,135,0.12); color: var(--primary-dark); box-shadow: inset 0 0 0 1px rgba(46,204,135,0.2); } /* ── PROFILE NAME ── */ .is-premium .profile-name, body.is-premium .profile-name { color: var(--primary-dark); font-weight: 900; letter-spacing: -0.03em; } /* ── PROFILE HEADER CARD ── */ .is-premium .profile-header-card, body.is-premium .profile-header-card { border: 1.5px solid rgba(245,158,11,0.25) !important; box-shadow: 0 8px 40px rgba(46,204,135,0.16), 0 0 0 1px rgba(245,158,11,0.12) !important; } /* ── PREMIUM BADGE ── */ .is-premium .badge-premium, body.is-premium .badge-premium { background: rgba(245,158,11,0.12); backdrop-filter: blur(10px); border: 1.5px solid rgba(245,158,11,0.35); color: #92400e; box-shadow: 0 2px 8px rgba(245,158,11,0.12); } /* ── BUTTONS ── */ .is-premium .btn-primary, body.is-premium .btn-primary { background: rgba(46,204,135,0.18); backdrop-filter: blur(12px); border: 1.5px solid rgba(46,204,135,0.45); color: var(--primary-dark); box-shadow: 0 4px 16px rgba(46,204,135,0.12); font-weight: 700; } .is-premium .btn-primary:hover, body.is-premium .btn-primary:hover { background: rgba(46,204,135,0.28); box-shadow: 0 6px 24px rgba(46,204,135,0.2); transform: translateY(-2px); } .is-premium .btn-premium, body.is-premium .btn-premium { background: rgba(245,158,11,0.14); backdrop-filter: blur(12px); border: 1.5px solid rgba(245,158,11,0.4); color: #92400e; box-shadow: 0 4px 16px rgba(245,158,11,0.12); } /* ── INPUTS ── */ .is-premium .input:focus, body.is-premium .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,204,135,0.2), 0 2px 8px rgba(46,204,135,0.1); background: rgba(255,255,255,0.82); } /* ── DROPDOWN ── */ .is-premium .dropdown-menu, body.is-premium .dropdown-menu { background: rgba(255,255,255,0.88); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border: 1.5px solid rgba(255,255,255,0.8); box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(46,204,135,0.1); } /* ── MODAL ── */ .is-premium .modal, body.is-premium .modal { background: rgba(255,255,255,0.82); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); border: 1.5px solid rgba(255,255,255,0.82); box-shadow: 0 32px 80px rgba(46,204,135,0.2), 0 4px 16px rgba(56,189,248,0.1); } /* ── SCROLLBAR ── */ .is-premium ::-webkit-scrollbar-thumb, body.is-premium ::-webkit-scrollbar-thumb { background: rgba(46,204,135,0.35); } .is-premium ::-webkit-scrollbar-thumb:hover, body.is-premium ::-webkit-scrollbar-thumb:hover { background: rgba(46,204,135,0.55); } /* ── SIDEBAR ACCENT ── */ .is-premium .sidebar-left .glass, .is-premium .sidebar-right .glass, body.is-premium .sidebar-left .glass, body.is-premium .sidebar-right .glass { border-left: 3px solid rgba(46,204,135,0.35); } /* ── SECTION TITLES ── */ .is-premium .section-title, .is-premium .card-title, body.is-premium .section-title, body.is-premium .card-title { color: var(--primary-dark); font-weight: 800; } /* ── NAV LOGO ── */ .is-premium .nav-logo, body.is-premium .nav-logo { color: var(--primary-dark); } /* ── ACTIVE NAV LINK ── */ .is-premium .nav-link.active::after, body.is-premium .nav-link.active::after { background: rgba(46,204,135,0.6); box-shadow: 0 0 6px rgba(46,204,135,0.3); height: 3px; } /* ── PROGRESS BAR ── */ .is-premium .progress-fill, body.is-premium .progress-fill { background: rgba(46,204,135,0.55); } /* ── TOAST ── */ .is-premium .toast, body.is-premium .toast { background: rgba(255,255,255,0.92); backdrop-filter: blur(24px); border: 1.5px solid rgba(255,255,255,0.8); box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(46,204,135,0.1); } /* ── COMMENT BODY ── */ .is-premium .comment-body, body.is-premium .comment-body { background: rgba(255,255,255,0.52); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(46,204,135,0.06); } /* ── SHARED POST ── */ .is-premium .shared-post-inner, body.is-premium .shared-post-inner { background: rgba(255,255,255,0.38); border: 1.5px solid rgba(46,204,135,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } /* ── POLL OPTIONS ── */ .is-premium .poll-option-bar:hover, body.is-premium .poll-option-bar:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(46,204,135,0.15); } .is-premium .poll-option-bar.voted, body.is-premium .poll-option-bar.voted { background: rgba(46,204,135,0.12); border-color: var(--primary); box-shadow: 0 2px 12px rgba(46,204,135,0.18); } /* ── REACTION PICKER ── */ .is-premium .reaction-picker, body.is-premium .reaction-picker { background: rgba(255,255,255,0.92); backdrop-filter: blur(24px); border: 1.5px solid rgba(255,255,255,0.8); box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(46,204,135,0.1); } /* ── PROFILE STATS BAR ── */ .is-premium .profile-stats-bar, body.is-premium .profile-stats-bar { border-top: 1.5px solid rgba(46,204,135,0.2); background: rgba(255,255,255,0.25); } /* ── SKILL PILLS ── */ .is-premium .skill-pill, body.is-premium .skill-pill { background: rgba(46,204,135,0.1); border: 1px solid rgba(46,204,135,0.25); box-shadow: 0 2px 6px rgba(46,204,135,0.08); font-weight: 600; } /* ── EXPERIENCE / EDUCATION / CERT / PROJECT ITEMS ── */ .is-premium .exp-item, .is-premium .edu-item, .is-premium .cert-item, .is-premium .project-item, body.is-premium .exp-item, body.is-premium .edu-item, body.is-premium .cert-item, body.is-premium .project-item { border-left: 3px solid rgba(46,204,135,0.35); padding-left: 14px; margin-left: 4px; } /* ── MOBILE BOTTOM NAV ── */ .is-premium .mobile-bottom-nav, body.is-premium .mobile-bottom-nav { background: rgba(255,255,255,0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 -4px 20px rgba(46,204,135,0.1); } /* ── WATERMARK ── */ .is-premium .page-wrapper::before, body.is-premium .page-wrapper::before { opacity: 0.055; filter: hue-rotate(30deg) saturate(1.5); } /* ── AVATAR PULSE ── */ .is-premium .nav-avatar, body.is-premium .nav-avatar { box-shadow: 0 0 0 2px rgba(245,158,11,0.5), 0 0 12px rgba(245,158,11,0.25); animation: avatarPulse 3s ease-in-out infinite; } @keyframes avatarPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(245,158,11,0.5), 0 0 12px rgba(245,158,11,0.2); } 50% { box-shadow: 0 0 0 3px rgba(245,158,11,0.7), 0 0 20px rgba(245,158,11,0.35); } } /* ── FEED SIDEBAR COVER ── */ .is-premium .profile-sidebar-cover, body.is-premium .profile-sidebar-cover { background: rgba(46,204,135,0.18); backdrop-filter: blur(12px); } /* ── TRENDING TAGS ── */ .is-premium .trending-tag:hover .trending-name, body.is-premium .trending-tag:hover .trending-name { color: var(--primary-dark); } /* ── QUICK LINKS ── */ .is-premium .quick-link:hover, body.is-premium .quick-link:hover { background: rgba(46,204,135,0.12); box-shadow: inset 0 0 0 1px rgba(46,204,135,0.2); } /* ── LOADER ── */ .is-premium .loader, body.is-premium .loader { border: 3px solid rgba(46,204,135,0.15); border-top-color: rgba(46,204,135,0.7); } /* ── MOBILE: disable hover lifts on touch ── */ @media (pointer: coarse), (max-width: 800px) { .is-premium .post-card:hover, body.is-premium .post-card:hover, .is-premium .btn-primary:hover, body.is-premium .btn-primary:hover { transform: none; } }