[C.st Custom CSS]

[6]

I been working a lot on using all of my paid AI credits to give back to the communities I am a part of, so here is a preview of what you can have as SUPREME user here at Cracked.st I will only make this ONE custom css available for all user classes. The rest of the custom CSS themes will be for SUPREME users only. Support Cracked.st if it is gone one day you will understand the impact it did for your life as a cracker & hacker.
 

Code:

/* =========================================================
NOIR DETECTIVE — MYBB CINEMATIC THEME
Inspired by 1940s Film Noir
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter:wght@400;500;600;700&display=swap');

:root {

/* =====================================================
COLOR SYSTEM
===================================================== */

--noir-black: #0F0F0F;
--smoke-grey: #4A4A4A;
--streetlamp-yellow: #E8C547;
--fog-white: #D4D4D4;

--blood-wine: #5C0A0A;
--neon-red: #FF2D2D;
--rainy-blue: #3A5F7C;
--cigarette-orange: #D4762C;

--surface-1: #121212;
--surface-2: #181818;
--surface-3: #202020;

--border: #343434;

--radius: 8px;

--shadow-soft:
0 2px 12px rgba(0,0,0,0.25);

--shadow-heavy:
0 10px 40px rgba(0,0,0,0.55);

--transition:
220ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
GLOBAL
========================================================= */

html,
body {

background:
radial-gradient(circle at top,
rgba(232,197,71,0.06),
transparent 30%),
linear-gradient(to bottom,
#111111 0%,
#0F0F0F 100%);

color: var(--fog-white);

font-family: 'Inter', sans-serif;

min-height: 100vh;

overflow-x: hidden;

position: relative;
}

/* =========================================================
FILM GRAIN OVERLAY
========================================================= */

body::before {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

opacity: 0.05;

z-index: 999;

background-image:
url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
}

/* =========================================================
VIGNETTE
========================================================= */

body::after {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

background:
radial-gradient(circle,
transparent 45%,
rgba(0,0,0,0.75) 100%);

z-index: 998;
}

/* =========================================================
VENETIAN BLIND SHADOWS
========================================================= */

#container::before {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

z-index: 1;

opacity: 0.06;

background-image:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 40px,
rgba(0,0,0,0.9) 40px,
rgba(0,0,0,0.9) 44px
);
}

/* =========================================================
TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
.thead,
.panel h2 {

font-family: 'Special Elite', cursive;

letter-spacing: 1px;

color: var(--streetlamp-yellow);

text-shadow:
1px 1px 2px rgba(0,0,0,0.8);
}

a {

color: var(--streetlamp-yellow);

text-decoration: none;

transition: var(--transition);
}

a:hover {

color: #fff2b3;
}

/* =========================================================
MAIN PANELS
========================================================= */

#inner-container,
.tborder,
.navigation,
.panel,
.popup_menu,
.pm_alert {

background:
rgba(18,18,18,0.92);

border:
1px solid var(--border);

border-radius:
var(--radius);

box-shadow:
inset 0 0 80px rgba(0,0,0,0.5),
var(--shadow-soft);

backdrop-filter:
blur(4px);

position: relative;

overflow: hidden;
}

/* =========================================================
HEADER
========================================================= */

#header {

position: relative;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.85),
rgba(15,15,15,0.95)
);

border-bottom:
1px solid var(--border);

box-shadow:
0 4px 30px rgba(0,0,0,0.5);
}

#logo {

padding: 40px 0;

text-align: center;
}

#logo img {

filter:
grayscale(0.4)
contrast(1.2);
}

/* =========================================================
TABLE HEADERS
========================================================= */

.thead {

background:
linear-gradient(
90deg,
rgba(232,197,71,0.12),
rgba(58,95,124,0.08)
) !important;

border-bottom:
1px solid rgba(232,197,71,0.18);

padding: 14px;

text-transform: uppercase;

font-size: 13px;
}

/* =========================================================
ROWS
========================================================= */

.trow1,
.trow2 {

background:
rgba(255,255,255,0.01);

border-bottom:
1px solid rgba(255,255,255,0.04);

transition:
background var(--transition),
transform var(--transition);
}

.trow1:hover,
.trow2:hover {

background:
rgba(232,197,71,0.04);

transform:
translateY(-1px);
}

/* =========================================================
BUTTONS
========================================================= */

.button,
a.button,
input.button {

background:
linear-gradient(
to bottom,
#2b2b2b,
#1a1a1a
) !important;

border:
1px solid #4c4c4c !important;

color:
var(--fog-white) !important;

border-radius:
6px;

padding:
10px 18px;

font-weight:
600;

transition:
var(--transition);

box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 4px 10px rgba(0,0,0,0.3);
}

.button:hover,
a.button:hover,
input.button:hover {

background:
linear-gradient(
to bottom,
var(--streetlamp-yellow),
#b89831
) !important;

color:
#111 !important;

transform:
translateY(-2px);

box-shadow:
0 8px 18px rgba(232,197,71,0.15);
}

/* =========================================================
INPUTS
========================================================= */

input.textbox,
textarea,
select {

background:
rgba(0,0,0,0.4) !important;

border:
1px solid var(--border) !important;

color:
var(--fog-white) !important;

border-radius:
6px;

padding:
10px 14px;

transition:
var(--transition);
}

input.textbox:focus,
textarea:focus,
select:focus {

border-color:
var(--streetlamp-yellow) !important;

box-shadow:
0 0 0 2px rgba(232,197,71,0.12);

outline: none;
}

/* =========================================================
NAVIGATION
========================================================= */

.navigation {

padding:
12px 18px;

margin-bottom:
18px;
}

.navigation a {

opacity:
0.75;
}

.navigation a:hover {

opacity:
1;
}

/* =========================================================
USER AVATARS
========================================================= */

.avatar img,
.p-avatar img {

border-radius:
50%;

border:
2px solid rgba(232,197,71,0.15);

filter:
grayscale(0.15)
contrast(1.1);

transition:
var(--transition);
}

.avatar img:hover,
.p-avatar img:hover {

transform:
scale(1.03);

border-color:
var(--streetlamp-yellow);
}

/* =========================================================
PAGINATION
========================================================= */

.pagination a,
.pagination span {

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.06);

padding:
8px 12px;

border-radius:
6px;

transition:
var(--transition);
}

.pagination a:hover {

background:
rgba(232,197,71,0.12);
}

.pagination .pagination_current {

background:
var(--streetlamp-yellow);

color:
#111;

border-color:
transparent;
}

/* =========================================================
NOIR RANKS
========================================================= */

.heaven_rank,
.infinity_rank,
.godlike_rank,
.supreme_rank {

font-family:
'Special Elite', cursive;

color:
var(--streetlamp-yellow);

text-shadow:
0 0 8px rgba(232,197,71,0.25);

letter-spacing:
1px;
}

/* =========================================================
THREADS / POSTS
========================================================= */

.post {

position: relative;
}

.post::before {

content: "";

position: absolute;

top: 0;
left: 0;

width: 3px;
height: 100%;

background:
linear-gradient(
to bottom,
var(--streetlamp-yellow),
transparent
);

opacity: 0.25;
}

/* =========================================================
TYPEWRITER EFFECT
========================================================= */

.typewriter {

overflow: hidden;

border-right:
2px solid var(--streetlamp-yellow);

white-space: nowrap;

animation:
typing 3s steps(40, end),
blink 0.8s infinite;
}

@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

@keyframes blink {
50% {
border-color: transparent;
}
}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar {

width: 10px;
}

::-webkit-scrollbar-track {

background:
#111;
}

::-webkit-scrollbar-thumb {

background:
#3b3b3b;

border-radius:
999px;
}

::-webkit-scrollbar-thumb:hover {

background:
var(--streetlamp-yellow);
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 768px) {

#logo {

padding: 24px 0;
}

.thead {

font-size: 11px;
}

.button {

width: 100%;
}
}

[1.846]

Expire : 1MONTH

PM TO BUY MID SPOT

Expire : 1MONTH

Expire : NEVER

30% off coupon packages and boosts one time use 30SPIDERMAN