? Custom CSS for Cracked Members [SWISS DARK MINIMALISTIC] ?

OP 03 June, 2026 - 09:59 AM
Here you go a custom css you can use on C.st! ? Please Leave a Like, if you like it!

SWISS MINIMALISTIC CSS CODE:
Hidden Content
You must register or login to view this content.
Code:
 
/* =========================================================

   SWISS MINIMALISM — DARK — MYBB THEME

   International Typographic Style · Grid · Restraint

   Ink-black base, off-white type, one signal red.

   Glow reserved for headings.

   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Expanded:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

    /* =====================================================

       COLOR SYSTEM — ink base, chalk type, one signal red

       ===================================================== */

    --bg:           #0C0C0C;   /* page */

    --bg-pure:      #000000;

    --ink:          #161616;   /* card surface (was "paper") */

    --ink-alt:      #1E1E1E;   /* alternating row */

    --ink-soft:     #242424;

    --chalk:        #ECECE8;   /* primary text */

    --chalk-soft:   #B6B6B2;

    --chalk-mute:   #7A7A77;

    --signal:       #E2241A;   /* the single Swiss accent */

    --signal-deep:  #FF453A;   /* brighter on dark for legibility */

    --rule:         rgba(236,236,232,0.12);

    --rule-strong:  rgba(236,236,232,0.28);

    --surface:      var(--ink);

    --surface-alt:  var(--ink-alt);

    --radius:       0px;        /* Swiss = no rounding */

    --shadow-flat:  0 1px 0 rgba(0,0,0,0.6);

    --transition:   140ms cubic-bezier(.2,.7,.2,1);

    /* heading glow tuned to the signal red — pops on black */

    --glow-signal:

        0 0 1px rgba(255,69,58,0.65),

        0 0 14px rgba(226,36,26,0.50),

        0 0 34px rgba(226,36,26,0.28);

}

/* =========================================================

   GLOBAL

   ========================================================= */

html,

body {

    background:

        /* faint baseline grid for the Swiss feel */

        repeating-linear-gradient(

            to bottom,

            transparent 0,

            transparent 31px,

            var(--rule) 31px,

            var(--rule) 32px

        ),

        var(--bg);

    color: var(--chalk);

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

    font-size: 14px;

    line-height: 1.55;

    letter-spacing: 0.1px;

    overflow-x: hidden;

    min-height: 100vh;

    position: relative;

}

/* =========================================================

   MAIN CONTAINERS — flat cards, hard rules

   ========================================================= */

#inner-container,

.tborder,

.navigation,

.panel,

.popup_menu,

.pm_alert {

    position: relative;

    background: var(--surface);

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

    border-radius: var(--radius);

    box-shadow: var(--shadow-flat);

    overflow: hidden;

    z-index: 2;

}

/* =========================================================

   HEADER

   ========================================================= */

#header {

    background: var(--bg-pure);

    border-bottom: 2px solid var(--chalk);

    box-shadow: none;

}

#logo {

    padding: 38px 0;

    text-align: left;

    padding-left: 28px;

    border-left: 6px solid var(--signal);

}

#logo img {

    filter: grayscale(1) contrast(1.05) brightness(1.1);

}

/* =========================================================

   HEADINGS / TABLE HEADERS — Expanded display + RED GLOW

   ========================================================= */

.thead {

    background: var(--bg-pure) !important;

    border-top: 1px solid var(--rule-strong);

    border-bottom: 2px solid var(--signal);

    padding: 13px 16px;

    font-family: 'Archivo Expanded', 'Archivo', sans-serif;

    font-weight: 800;

    font-size: 12px;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.thead,

.thead a,

.thead span,

.thead strong {

    color: var(--signal-deep) !important;

    text-shadow: var(--glow-signal);

}

/* general heading hooks MyBB exposes */

.tcat,

.subject_new,

h1, h2, h3,

.float_left.subject_new {

    font-family: 'Archivo Expanded', 'Archivo', sans-serif;

    font-weight: 800;

    letter-spacing: 0.6px;

    color: var(--chalk);

}

#header .description,

.thead strong {

    text-shadow: var(--glow-signal);

}

/* =========================================================

   ROWS — alternating ink tones, no rounding

   ========================================================= */

.trow1 {

    background: var(--surface);

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

    transition: background var(--transition);

}

.trow2 {

    background: var(--surface-alt);

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

    transition: background var(--transition);

}

.trow1:hover,

.trow2:hover {

    background: #2A1413;   /* faint signal wash on dark */

}

/* =========================================================

   LINKS

   ========================================================= */

a {

    color: var(--chalk);

    text-decoration: none;

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

    transition: var(--transition);

}

a:hover {

    color: var(--signal-deep);

    border-bottom-color: var(--signal);

}

/* =========================================================

   BUTTONS — rectangular, decisive

   ========================================================= */

.button,

a.button,

input.button {

    background: var(--chalk) !important;

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

    color: var(--bg-pure) !important;

    border-radius: var(--radius);

    padding: 11px 20px;

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

    font-weight: 700;

    font-size: 12px;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    transition: var(--transition);

}

.button:hover,

a.button:hover,

input.button:hover {

    background: var(--signal) !important;

    border-color: var(--signal) !important;

    color: #FFFFFF !important;

    transform: translateY(-1px);

}

/* =========================================================

   INPUTS

   ========================================================= */

input.textbox,

textarea,

select {

    background: var(--bg-pure) !important;

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

    color: var(--chalk) !important;

    border-radius: var(--radius);

    padding: 11px 13px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 13px;

    transition: var(--transition);

}

input.textbox:focus,

textarea:focus,

select:focus {

    border-color: var(--signal) !important;

    box-shadow: inset 0 -3px 0 var(--signal);

    outline: none;

}

/* =========================================================

   NAVIGATION

   ========================================================= */

.navigation {

    padding: 12px 18px;

    margin-bottom: 18px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 12px;

    letter-spacing: 0.3px;

    border: none;

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

    background: transparent;

    box-shadow: none;

}

.navigation a {

    border-bottom: none;

    opacity: 0.7;

}

.navigation a:hover {

    opacity: 1;

    color: var(--signal-deep);

}

/* =========================================================

   USER AVATARS — square, Swiss

   ========================================================= */

.avatar img,

.p-avatar img {

    border-radius: var(--radius);

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

    transition: var(--transition);

    filter: grayscale(0.2);

}

.avatar img:hover,

.p-avatar img:hover {

    filter: grayscale(0);

    border-color: var(--signal);

}

/* =========================================================

   PAGINATION

   ========================================================= */

.pagination a,

.pagination span {

    background: var(--bg-pure);

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

    border-radius: var(--radius);

    padding: 8px 13px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 12px;

    color: var(--chalk);

    transition: var(--transition);

}

.pagination a:hover {

    background: var(--chalk);

    color: var(--bg-pure);

}

.pagination .pagination_current {

    background: var(--signal);

    border-color: var(--signal);

    color: #FFFFFF;

}

/* =========================================================

   USER RANKS — restrained, glowing red

   ========================================================= */

.heaven_rank,

.infinity_rank,

.godlike_rank,

.supreme_rank {

    color: var(--signal-deep);

    font-family: 'Archivo Expanded', 'Archivo', sans-serif;

    font-weight: 800;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    text-shadow: var(--glow-signal);

}

/* =========================================================

   THREAD POSTS — left rule marker

   ========================================================= */

.post {

    position: relative;

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

}

.post::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--signal);

    opacity: 0.9;

}

/* =========================================================

   SCROLLBAR

   ========================================================= */

::-webkit-scrollbar { width: 11px; }

::-webkit-scrollbar-track {

    background: var(--bg);

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

}

::-webkit-scrollbar-thumb {

    background: var(--chalk);

    border-radius: var(--radius);

}

::-webkit-scrollbar-thumb:hover {

    background: var(--signal);

}

/* =========================================================

   MOBILE

   ========================================================= */

@media (max-width: 768px) {

    #logo { padding: 22px 0 22px 18px; }

    .button { width: 100%; }

    .thead { font-size: 11px; letter-spacing: 1px; }

}
Login
Username:
Password:	Lost Password?
	Remember me
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account Sign up for a new account in our community. It's easy! Register a new account	or	Sign in Already have an account? Sign in here. Sign in now
? Custom CSS for Cracked Members [SWISS DARK MINIMALISTIC] ?

About Cracked.st

Navigation

Extras

Help

Account
