[CUSTOM CSS for CRACKED] Alice in Crackland v1.0

[13]

I sat with some new Generative AI tools this morning and wanted to try to create some new aesthetics for this amazing board.
 

Code:

 
/* =========================================================
   ALICE IN WONDERLAND — CURIOUSER & CURIOUSER — MYBB THEME
   Moonlit-garden teal base · rose-gold + mushroom-violet
   Storybook serif headings · dreamlike falling-petal glow
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=EB+Garamond:wght@400;500;600&display=swap');

:root {

    /* =====================================================
       COLOR SYSTEM — enchanted teal, rose-gold, violet bloom
       ===================================================== */

    --void:         #0A1418;   /* page — twilight teal */
    --void-pure:    #060D10;
    --panel:        #102026;   /* card surface — deep pond */
    --panel-alt:    #14282E;   /* alternating row */
    --panel-soft:   #1A3038;

    --gold:         #E8B85C;   /* primary rose-gold */
    --gold-bright:  #FBE3A6;   /* hover / highlight */
    --gold-deep:    #A87A2E;   /* borders, washes */
    --rose:         #E07A9C;   /* Queen-of-Hearts rose */
    --teal-glow:    #4FD9C5;   /* Cheshire teal shimmer */
    --violet:       #B48BD6;   /* mushroom violet */

    --text:         #EDE2C9;   /* aged-parchment cream */
    --text-soft:    rgba(237,226,201,0.64);
    --text-mute:    rgba(237,226,201,0.36);

    --rule:         rgba(232,184,92,0.16);
    --rule-strong:  rgba(232,184,92,0.40);
    --surface:      var(--panel);
    --surface-alt:  var(--panel-alt);

    --radius:       9px;       /* softer, storybook curves */

    --shadow-flat:
        0 1px 0 rgba(0,0,0,0.6),
        0 0 28px rgba(79,217,197,0.06);

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

    /* dreamlike candle glow for headings */
    --glow-gold:
        0 0 1px rgba(251,227,166,0.90),
        0 0 8px rgba(232,184,92,0.65),
        0 0 20px rgba(224,122,156,0.32),
        0 0 44px rgba(180,139,214,0.24);
}

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

html,
body {

    background:
        /* drifting playing-card / petal lattice */
        repeating-linear-gradient(
            115deg,
            transparent 0 22px,
            rgba(232,184,92,0.035) 22px 23px,
            transparent 23px 46px
        ),
        /* faint moonbeam banding */
        repeating-linear-gradient(
            to bottom,
            transparent 0 19px,
            rgba(79,217,197,0.022) 19px 20px
        ),
        /* enchanted glow pools — teal & rose, no harshness */
        radial-gradient(circle at 16% 4%, rgba(79,217,197,0.14), transparent 36%),
        radial-gradient(circle at 84% 96%, rgba(224,122,156,0.12), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(180,139,214,0.06), transparent 60%),
        var(--void);

    color: var(--text);

    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.2px;

    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* soft dreamy gauze overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.012) 0 1px,
        transparent 1px 4px
    );
    mix-blend-mode: screen;
    z-index: 1;
}

/* moonlit vignette so the garden reads as depth */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(6,13,16,0.50) 0%,
            transparent 20%,
            transparent 80%,
            rgba(6,13,16,0.60) 100%);
    z-index: 0;
}

/* =========================================================
   MAIN CONTAINERS — storybook panels, gilt hairline
   ========================================================= */

#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),
        inset 0 0 50px rgba(79,217,197,0.025);

    overflow: hidden;
    z-index: 2;
}

/* gilt top edge accent on bordered cards */
.tborder::before,
.panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--gold), var(--rose), var(--gold), transparent);
    opacity: 0.85;
    pointer-events: none;
}

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

#header {

    background: var(--void-pure);
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 4px 36px rgba(232,184,92,0.14);
}

#logo {

    padding: 40px 0;
    text-align: left;
    padding-left: 28px;

    border-left: 6px solid var(--rose);
}

#logo img {
    filter: sepia(0.25) saturate(1.15) brightness(1.05) contrast(1.04)
            drop-shadow(0 0 12px rgba(232,184,92,0.25));
}

/* =========================================================
   HEADINGS / TABLE HEADERS — Cinzel Decorative + CANDLE GLOW
   ========================================================= */

.thead {

    background: var(--void-pure) !important;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--gold);

    padding: 15px 18px;

    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.thead,
.thead a,
.thead span,
.thead strong {
    color: var(--gold) !important;
    text-shadow: var(--glow-gold);
}

/* general heading hooks MyBB exposes */
.tcat,
.subject_new,
h1, h2, h3,
.float_left.subject_new {

    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--gold);
    text-shadow: var(--glow-gold);
}

#header .description {
    color: var(--text-soft);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    text-shadow: var(--glow-gold);
}

/* =========================================================
   ROWS — alternating moonlit tones
   ========================================================= */

.trow1 {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    transition: background var(--transition), box-shadow var(--transition);
}

.trow2 {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--rule);
    transition: background var(--transition), box-shadow var(--transition);
}

.trow1:hover,
.trow2:hover {
    background: rgba(79,217,197,0.07);
    box-shadow: inset 3px 0 0 var(--rose);
}

/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--gold-bright);
    text-shadow: 0 0 9px rgba(232,184,92,0.55);
}

/* =========================================================
   BUTTONS — "Drink Me" gilt outline, blooms on hover
   ========================================================= */

.button,
a.button,
input.button {

    background: rgba(232,184,92,0.07) !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;

    border-radius: var(--radius);
    padding: 11px 22px;

    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    transition: var(--transition);
    box-shadow: 0 0 0 0 rgba(232,184,92,0);
}

.button:hover,
a.button:hover,
input.button:hover {
    background: linear-gradient(135deg, var(--gold), var(--rose)) !important;
    border-color: var(--gold-bright) !important;
    color: var(--void-pure) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 26px rgba(224,122,156,0.45);
}

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

input.textbox,
textarea,
select {

    background: var(--void-pure) !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--text) !important;
    caret-color: var(--gold);

    border-radius: var(--radius);
    padding: 11px 15px;

    font-family: 'EB Garamond', serif;
    font-size: 14px;

    transition: var(--transition);
}

input.textbox:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(232,184,92,0.18);
    outline: none;
}

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

.navigation {

    padding: 13px 20px;
    margin-bottom: 18px;

    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.4px;

    border: none;
    border-bottom: 1px solid var(--gold);
    background: transparent;
    box-shadow: none;
}

/* rabbit-trail breadcrumb fade */
.navigation a { opacity: 0.76; }
.navigation a:hover { opacity: 1; }

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

.avatar img,
.p-avatar img {

    border-radius: 50%;             /* pocket-watch / locket round */
    border: 1px solid var(--rule-strong);
    transition: var(--transition);
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    filter: saturate(1.05);
}

.avatar img:hover,
.p-avatar img:hover {
    border-color: var(--rose);
    box-shadow: 0 0 24px rgba(224,122,156,0.42);
}

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

.pagination a,
.pagination span {

    background: var(--void-pure);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 8px 14px;

    font-family: 'EB Garamond', serif;
    font-size: 14px;
    color: var(--text);

    transition: var(--transition);
}

.pagination a:hover {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 16px rgba(232,184,92,0.26);
}

.pagination .pagination_current {
    background: linear-gradient(135deg, var(--gold), var(--rose));
    border-color: var(--gold-bright);
    color: var(--void-pure);
}

/* =========================================================
   USER RANKS — cascading "curiouser" bloom + glow
   ========================================================= */

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

    background: linear-gradient(180deg, var(--violet), var(--rose), var(--gold-bright), var(--teal-glow));
    background-size: auto 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    letter-spacing: 0.6px;

    filter: drop-shadow(0 0 8px rgba(180,139,214,0.55));
    animation: wonderBloom 7s ease-in-out infinite;
}

/* drifting dreamlike "down the rabbit hole" sweep */
@keyframes wonderBloom {
    0%   { background-position: 50% 0%; }
    50%  { background-position: 50% 120%; }
    100% { background-position: 50% 240%; }
}

/* =========================================================
   THREAD POSTS — rose-gold sidebar
   ========================================================= */

.post {
    position: relative;
    border-bottom: 1px solid var(--rule);
}

.post::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gold), var(--rose), var(--violet));
    opacity: 0.78;
    box-shadow: 0 0 12px rgba(232,184,92,0.40);
}

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

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

::-webkit-scrollbar-track {
    background: var(--void);
    border-left: 1px solid var(--rule);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--gold-deep), var(--gold), var(--rose));
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-bright);
}

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

@media (max-width: 768px) {

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

    .button { width: 100%; }

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

I hope you are pleased with it!

[2.285]

Nice leak diddy

Ad By @TopSCT Expire : 1MONTH

Ad By @Liars Expire : 15 Days

Ad By @buuza Expire : NEVER

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

[13]

Nice leak diddy

Is that good or bad?