View in the app

A better way to browse. Learn more.

2k2k.org

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS

Tap the Share icon in Safari
Scroll the menu and tap Add to Home Screen.
Tap Add in the top-right corner.

To install this app on Android

Tap the 3-dot menu (⋮) in the top-right corner of the browser.
Tap Add to Home screen or Install app.
Confirm by tapping Install.

/* * ============================================================ * IPS Community Suite 5 — Custom Profile Theme * Design: Dark (#0a0a0d) + Lime (#c8f35a) * Matches: 2k2k.org / Void_ design system * Fonts: Bricolage Grotesque (display) + JetBrains Mono (UI) * Author: Void_ / Asmox * ============================================================ * * HOW TO INSTALL: * Admin CP → Customization → Themes → Edit → Custom CSS * Paste this entire file there and save. * * NOTE: IPS 5 uses HSL CSS variables for its theme engine. * We override those + add targeted selectors from the * inspected IPS5 profile template structure. * ============================================================ */ /* ── Google Fonts import ─────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── Design tokens ───────────────────────────────────────── */ :root { --void-bg: #0a0a0d; --void-surface: #111116; --void-surface2: #18181f; --void-border: #2a2a35; --void-accent: #c8f35a; --void-accent-dim: rgba(200, 243, 90, 0.12); --void-accent-glow: rgba(200, 243, 90, 0.25); --void-text: #e8e8e8; --void-muted: #888; --void-font-display: 'Bricolage Grotesque', sans-serif; --void-font-mono: 'JetBrains Mono', monospace; /* IPS5 HSL variable overrides — these control the theme engine */ --i-color-background: 10 10 13; /* #0a0a0d */ --i-color-surface: 17 17 22; /* #111116 */ --i-color-surface-secondary:24 24 31; /* #18181f */ --i-color-border: 42 42 53; /* #2a2a35 */ --i-color-link: 200 243 90; /* lime */ --i-color-primary: 200 243 90; --i-color-text: 232 232 232; --i-color-text-secondary: 136 136 136; } /* ── Global base ─────────────────────────────────────────── */ body, html { background-color: var(--void-bg) !important; color: var(--void-text) !important; font-family: var(--void-font-display) !important; } /* Noise texture overlay on body */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 128px 128px; } /* ── Navigation bar ──────────────────────────────────────── */ #ipsLayout_header, nav[data-role="navigation"], .i-navigation, .cNavBar { background: rgba(10, 10, 13, 0.95) !important; border-bottom: 1px solid var(--void-border) !important; backdrop-filter: blur(12px) !important; } /* Nav links */ #ipsLayout_header a, .cNavBar a, .i-navigation a { color: var(--void-text) !important; font-family: var(--void-font-mono) !important; font-size: 0.78rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; transition: color 0.2s ease !important; } #ipsLayout_header a:hover, .cNavBar a:hover { color: var(--void-accent) !important; } /* ── Profile header / banner area ────────────────────────── */ /* Cover/banner image container */ [data-controller*="profile"], .cProfileHeader, .i-profile-header, [class*="profileHeader"], [class*="profile-header"] { background-color: var(--void-surface) !important; border-bottom: 1px solid var(--void-border) !important; } /* Banner/cover image */ .cProfileCover, [class*="profileCover"], [class*="profile-cover"], [data-role="coverPhoto"] { border-bottom: 2px solid var(--void-accent) !important; filter: brightness(0.85) !important; } /* ── Avatar ──────────────────────────────────────────────── */ .cUserPhoto, .i-user-photo, [class*="userPhoto"], [class*="user-photo"], .ipsUserPhoto, [data-role="userPhoto"] img, .cProfilePhoto img, [class*="profilePhoto"] img, [class*="profile-photo"] img { border: 2px solid var(--void-accent) !important; border-radius: 8px !important; box-shadow: 0 0 0 4px var(--void-accent-dim), 0 0 20px var(--void-accent-glow), 0 0 40px rgba(200, 243, 90, 0.08) !important; outline: none !important; transition: box-shadow 0.3s ease !important; } .cUserPhoto:hover img, [class*="userPhoto"]:hover img, [class*="profilePhoto"]:hover img { box-shadow: 0 0 0 4px var(--void-accent-dim), 0 0 30px var(--void-accent-glow), 0 0 60px rgba(200, 243, 90, 0.15) !important; } /* ── Username + title ────────────────────────────────────── */ h1[class*="profile"], .cProfileName, [class*="profileName"], [class*="profile-name"], [data-role="username"] { font-family: var(--void-font-display) !important; font-size: 2rem !important; font-weight: 700 !important; color: var(--void-text) !important; letter-spacing: -0.02em !important; } /* User title / subtitle ("Devil Did It") */ .cProfileTitle, [class*="profileTitle"], [class*="profile-title"], [data-role="userTitle"], .i-user-title, [class*="userTitle"] { color: var(--void-accent) !important; font-family: var(--void-font-mono) !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* User group badges */ [class*="userGroup"], [class*="user-group"], .cGroupBadge, [data-role="group"] { background: var(--void-accent-dim) !important; border: 1px solid var(--void-accent) !important; color: var(--void-accent) !important; font-family: var(--void-font-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 3px !important; padding: 2px 6px !important; } /* ── Stats row (Posts, Likes, Resources, Credits, UID) ───── */ [class*="profileStats"], [class*="profile-stats"], .cProfileStats, [data-role="profileStats"], .i-profile-stats { background: var(--void-surface2) !important; border-top: 1px solid var(--void-border) !important; border-bottom: 1px solid var(--void-border) !important; font-family: var(--void-font-mono) !important; } /* Individual stat item */ [class*="profileStats"] > *, [class*="profile-stats"] > *, .cProfileStats > *, [data-role="profileStats"] > * { border-right: 1px solid var(--void-border) !important; } [class*="profileStats"] > *:last-child, .cProfileStats > *:last-child { border-right: none !important; } /* Stat number */ [class*="profileStats"] strong, [class*="profileStats"] [class*="value"], [class*="profileStats"] [class*="number"], .cProfileStats strong, [data-role="profileStats"] strong { color: var(--void-accent) !important; font-weight: 600 !important; font-family: var(--void-font-mono) !important; font-size: 1.1rem !important; } /* Stat label */ [class*="profileStats"] span, [class*="profileStats"] [class*="label"], .cProfileStats span { color: var(--void-muted) !important; font-size: 0.68rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* ── Follow / Find / action buttons ──────────────────────── */ [class*="profileActions"] a, [class*="profile-actions"] a, .cProfileActions a, [data-role="profileActions"] a { background: transparent !important; border: 1px solid var(--void-border) !important; color: var(--void-text) !important; font-family: var(--void-font-mono) !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 4px !important; padding: 6px 14px !important; transition: all 0.2s ease !important; } [class*="profileActions"] a:hover, .cProfileActions a:hover { border-color: var(--void-accent) !important; color: var(--void-accent) !important; background: var(--void-accent-dim) !important; } /* Primary action (Follow) */ [class*="profileActions"] a[class*="primary"], [class*="profileActions"] a:first-child { border-color: var(--void-accent) !important; color: var(--void-accent) !important; } /* ── Profile content cards / boxes ───────────────────────── */ .ipsBox, .i-box, [class*="ipsBox"], [class*="i-box"], [data-role="profileContent"] > *, [class*="profileContent"] > *, [class*="profile-content"] > * { background: var(--void-surface) !important; border: 1px solid var(--void-border) !important; border-radius: 8px !important; color: var(--void-text) !important; } /* Card titles / section headers */ .ipsBox h2, .ipsBox h3, [class*="ipsBox"] h2, [class*="ipsBox"] h3, .i-box h2, .i-box h3, [class*="sectionTitle"], [class*="section-title"], [data-role="sectionTitle"] { font-family: var(--void-font-display) !important; font-size: 0.7rem !important; font-weight: 600 !important; color: var(--void-muted) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--void-border) !important; padding-bottom: 10px !important; margin-bottom: 14px !important; } /* ── About section (sidebar) ─────────────────────────────── */ [class*="profileAbout"], [class*="profile-about"], [data-role="profileAbout"], .cProfileAbout { background: var(--void-surface) !important; border: 1px solid var(--void-border) !important; border-radius: 8px !important; font-family: var(--void-font-display) !important; } /* Online status / activity timestamp */ [class*="profileAbout"] [class*="time"], [class*="profileAbout"] [class*="online"], [class*="lastActive"], [class*="last-active"] { color: var(--void-accent) !important; font-family: var(--void-font-mono) !important; font-size: 0.72rem !important; } /* ── Achievements / Awards section ───────────────────────── */ [class*="achievement"], [class*="award"], [class*="badge"], [data-role="achievements"], [data-role="awards"] { background: var(--void-surface) !important; border: 1px solid var(--void-border) !important; border-radius: 8px !important; } /* Level bar background */ [class*="levelBar"], [class*="level-bar"], [class*="progress"] { background: var(--void-border) !important; border-radius: 2px !important; height: 4px !important; overflow: hidden !important; } /* Level bar fill */ [class*="levelBar"] > *, [class*="level-bar"] > *, [class*="progressBar"], progress::-webkit-progress-value, [role="progressbar"] > * { background: var(--void-accent) !important; border-radius: 2px !important; box-shadow: 0 0 8px var(--void-accent-glow) !important; } /* Level text */ [class*="levelText"], [class*="level-text"], [data-role="levelLabel"] { color: var(--void-accent) !important; font-family: var(--void-font-mono) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* Points text */ [class*="levelPoints"], [class*="points"] { color: var(--void-muted) !important; font-family: var(--void-font-mono) !important; font-size: 0.68rem !important; } /* Award badge items */ [class*="awardItem"], [class*="award-item"], [class*="badge-item"] { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important; transition: transform 0.2s ease, filter 0.2s ease !important; } [class*="awardItem"]:hover, [class*="award-item"]:hover { transform: translateY(-2px) !important; filter: drop-shadow(0 4px 12px rgba(200,243,90,0.2)) !important; } /* ── Activity feed / posts section ───────────────────────── */ [class*="activityItem"], [class*="activity-item"], [class*="postItem"], [class*="post-item"], [data-role="activityItem"] { background: var(--void-surface) !important; border: 1px solid var(--void-border) !important; border-radius: 6px !important; margin-bottom: 6px !important; transition: border-color 0.2s ease !important; } [class*="activityItem"]:hover, [class*="activity-item"]:hover { border-color: var(--void-border) !important; background: var(--void-surface2) !important; } /* ── Links ───────────────────────────────────────────────── */ a { color: var(--void-text) !important; text-decoration: none !important; transition: color 0.15s ease !important; } a:hover { color: var(--void-accent) !important; } /* Accent links */ [class*="accentLink"], [class*="profileLink"], a[class*="primary"] { color: var(--void-accent) !important; } /* ── Tabs (profile content nav) ──────────────────────────── */ [class*="ipsTabs"], [class*="i-tabs"], [role="tablist"], [class*="profileTabs"], [class*="profile-tabs"] { border-bottom: 1px solid var(--void-border) !important; background: transparent !important; } [class*="ipsTabs"] [role="tab"], [class*="i-tabs"] [role="tab"], [role="tablist"] [role="tab"], [class*="profileTabs"] a, [class*="profile-tabs"] a { color: var(--void-muted) !important; font-family: var(--void-font-mono) !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-bottom: 2px solid transparent !important; padding-bottom: 10px !important; transition: all 0.2s ease !important; } [class*="ipsTabs"] [role="tab"]:hover, [role="tablist"] [role="tab"]:hover { color: var(--void-text) !important; } [class*="ipsTabs"] [role="tab"][aria-selected="true"], [role="tablist"] [role="tab"][aria-selected="true"], [class*="profileTabs"] a[class*="active"], [class*="profile-tabs"] a[class*="active"] { color: var(--void-accent) !important; border-bottom-color: var(--void-accent) !important; } /* ── Breadcrumbs ─────────────────────────────────────────── */ [class*="breadcrumb"], [aria-label="Breadcrumb"], nav[class*="breadcrumb"] { font-family: var(--void-font-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.04em !important; } [class*="breadcrumb"] a { color: var(--void-muted) !important; } [class*="breadcrumb"] a:hover { color: var(--void-accent) !important; } /* ── Footer ──────────────────────────────────────────────── */ #ipsLayout_footer, [data-role="footer"], footer { background: var(--void-bg) !important; border-top: 1px solid var(--void-border) !important; color: var(--void-muted) !important; font-family: var(--void-font-mono) !important; font-size: 0.68rem !important; } footer a, #ipsLayout_footer a { color: var(--void-muted) !important; } footer a:hover, #ipsLayout_footer a:hover { color: var(--void-accent) !important; } /* ── Joined date / metadata chips ────────────────────────── */ [class*="meta"], [class*="memberMeta"], [class*="member-meta"], time, [class*="date"] { color: var(--void-muted) !important; font-family: var(--void-font-mono) !important; font-size: 0.68rem !important; } /* ── Scrollbar ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--void-bg); } ::-webkit-scrollbar-thumb { background: var(--void-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--void-accent); } /* ── Text selection ──────────────────────────────────────── */ ::selection { background: var(--void-accent); color: var(--void-bg); } /* ── Misc overrides ──────────────────────────────────────── */ /* Pagination */ [class*="pagination"] a, [class*="ipsPagination"] a, [aria-label="Pagination"] a { background: var(--void-surface) !important; border: 1px solid var(--void-border) !important; color: var(--void-text) !important; font-family: var(--void-font-mono) !important; border-radius: 4px !important; } [class*="pagination"] a[aria-current], [class*="ipsPagination"] a[aria-current], [class*="pagination"] a.active { background: var(--void-accent-dim) !important; border-color: var(--void-accent) !important; color: var(--void-accent) !important; } /* Dropdowns */ [class*="ipsMenu"], [class*="i-menu"], [role="menu"], [class*="dropdown"] { background: var(--void-surface2) !important; border: 1px solid var(--void-border) !important; border-radius: 6px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; } [class*="ipsMenu"] a, [role="menu"] a, [class*="dropdown"] a { color: var(--void-text) !important; font-family: var(--void-font-mono) !important; font-size: 0.78rem !important; } [class*="ipsMenu"] a:hover, [role="menu"] a:hover { background: var(--void-accent-dim) !important; color: var(--void-accent) !important; } /* ── END ─────────────────────────────────────────────────── */

2k2k.org