Kawaii Model (Marin Kitagawa)

0 uses · 0 likes
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800;900&family=Sacramento&display=swap');

/* ═══════════════════════════════════════
   ♡ MARIN KITAGAWA — DREAMY GLASS EDITION ♡
   Kawaii • Shoujo • Pink Glass • Elegant
   ═══════════════════════════════════════ */

:root {
    --accent: #ed3eaa !important;
    --text: #713052 !important;
    --card: rgba(255, 225, 243, .73) !important;
    --font: 'Baloo 2', sans-serif !important;

    --pink: #f34bb7;
    --deep-pink: #d92c91;
    --berry: #a52b70;
    --plum: #713052;
    --cream: #fff8fc;
    --glass: rgba(255, 235, 247, .72);
    --glass-border: rgba(255, 255, 255, .78);
    --shadow: 0 15px 45px rgba(67, 24, 52, .18);
}

/* ═══════════════════════════════════════
   01 — BACKGROUND
   Seu GIF continua sendo o protagonista
   ═══════════════════════════════════════ */

html,
body {
    min-height: 100%;
    background-color: #392637 !important;
}

body.zbr-page {
    color: var(--plum) !important;
    font-family: 'Nunito', sans-serif !important;
    background-color: transparent !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* Atmosfera delicada */

body.zbr-page::before {
    content: "♡  ✧  ⋆｡°✩  ✿  ♡  ✧  ⋆｡°✩  ♡";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: rgba(255, 255, 255, .55);
    font-family: 'Baloo 2', sans-serif;
    font-size: 20px;
    letter-spacing: 17px;
    line-height: 100px;
    text-align: center;
    overflow: hidden;
    overflow-wrap: anywhere;
    opacity: .55;
}

body.zbr-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 10% 10%, rgba(255, 180, 220, .13), transparent 40%),
        radial-gradient(ellipse at 90% 85%, rgba(255, 110, 190, .12), transparent 40%);
}

/* ═══════════════════════════════════════
   02 — LAYOUT
   ═══════════════════════════════════════ */

.zbr-space {
    position: relative !important;
    z-index: 1 !important;
    width: min(1160px, 94%) !important;
    margin: 35px auto !important;
    gap: 25px !important;
    align-items: start !important;
}

.zbr-col,
.zbr-side,
.zbr-main {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

body.cols-2 .zbr-space {
    display: grid !important;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.35fr) !important;
}

body.cols-2 .zbr-side,
body.cols-2 .zbr-main {
    width: 100% !important;
}

body.cols-1 .zbr-space {
    display: flex !important;
    flex-direction: column !important;
    max-width: 780px !important;
}

body.cols-1 .zbr-space > *,
body.cols-1 .zbr-col {
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════
   03 — GLASS CARDS
   Transparência para deixar seu GIF aparecer
   ═══════════════════════════════════════ */

.zbr-page .zbr-card,
.zbr-page .zbr-box {
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            140deg,
            rgba(255, 242, 250, .78),
            rgba(255, 218, 240, .65)
        ) !important;

    -webkit-backdrop-filter: blur(13px) saturate(125%) !important;
    backdrop-filter: blur(13px) saturate(125%) !important;

    border: 2px solid var(--glass-border) !important;
    border-radius: 30px !important;

    box-shadow:
        0 5px 0 rgba(255, 110, 190, .35),
        0 15px 40px rgba(45, 16, 40, .20),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;

    padding: 25px !important;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease !important;
}

/* Brilho interno */

.zbr-page .zbr-card::before,
.zbr-page .zbr-box::before {
    content: "✧";
    position: absolute;
    top: 13px;
    right: 19px;
    color: rgba(216, 45, 143, .55);
    font-size: 23px;
    pointer-events: none;
}

.zbr-page .zbr-card::after,
.zbr-page .zbr-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );
    pointer-events: none;
}

.zbr-page .zbr-card:hover,
.zbr-page .zbr-box:hover {
    border-color: white !important;
    box-shadow:
        0 5px 0 rgba(255, 110, 190, .42),
        0 18px 45px rgba(45, 16, 40, .25),
        inset 0 1px 0 white !important;
}

/* ═══════════════════════════════════════
   04 — PROFILE
   ═══════════════════════════════════════ */

.zbr-box-profile {
    text-align: center !important;
    padding: 30px 23px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 240, 249, .83),
            rgba(255, 210, 235, .70)
        ) !important;
}

.zbr-box-profile .zbr-box-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.zbr-avatar {
    display: block !important;
    width: 160px !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 50% !important;

    border: 5px solid white !important;
    outline: 3px solid #ed72b9 !important;

    box-shadow:
        0 8px 25px rgba(190, 48, 127, .25),
        0 0 0 9px rgba(255,255,255,.28) !important;

    margin: 10px auto 22px !important;
    transition: .3s ease !important;
}

.zbr-avatar:hover {
    box-shadow:
        0 10px 35px rgba(190, 48, 127, .4),
        0 0 0 12px rgba(255,255,255,.38) !important;
}

.zbr-name {
    color: #c72b83 !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: clamp(32px, 5vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.8px !important;
    margin: 12px 0 !important;
    text-shadow: 2px 3px 0 rgba(255,255,255,.8) !important;
}

.zbr-bio {
    max-width: 95% !important;
    color: #713052 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.9 !important;
    margin: 8px auto !important;
}

/* ═══════════════════════════════════════
   05 — TITLES
   ═══════════════════════════════════════ */

.zbr-box-title {
    color: #c72b83 !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 0 20px !important;
    padding-bottom: 12px !important;
}

.zbr-box-title::after {
    content: "♡  ───── ✧ ─────  ♡";
    display: block;
    color: #d94c9b;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 5px;
}

/* ═══════════════════════════════════════
   06 — LINKS
   ═══════════════════════════════════════ */

.zbr-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.zbr-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 55px !important;
    padding: 14px 18px !important;

    color: #79365c !important;
    background: rgba(255, 255, 255, .87) !important;

    border: 1px solid rgba(220, 105, 168, .45) !important;
    border-radius: 19px !important;

    font-family: 'Baloo 2', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-decoration: none !important;

    box-shadow: 0 4px 0 rgba(205, 88, 151, .20) !important;
    transition: .25s ease !important;
}

.zbr-link:nth-child(even) {
    background: rgba(255, 232, 245, .91) !important;
}

.zbr-link:hover {
    color: white !important;
    background: linear-gradient(110deg, #e83c9f, #c52a83) !important;
    border-color: white !important;
    box-shadow: 0 5px 17px rgba(201, 45, 132, .30) !important;
}

/* ═══════════════════════════════════════
   07 — TEXT / ABOUT
   ═══════════════════════════════════════ */

.zbr-box-text,
.zbr-box-details,
.zbr-box-html {
    color: #713052 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.95 !important;
}

.zbr-box-text p,
.zbr-box-details p,
.zbr-box-html p {
    color: #713052 !important;
    line-height: 1.95 !important;
}

.zbr-box-text strong,
.zbr-box-details strong,
.zbr-box-html strong,
.zbr-box-text b {
    color: #bd287d !important;
    font-weight: 900 !important;
}

/* ═══════════════════════════════════════
   08 — TABLES
   ═══════════════════════════════════════ */

.zbr-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 9px !important;
    font-family: 'Nunito', sans-serif !important;
}

.zbr-table tr {
    background: rgba(255, 255, 255, .73) !important;
}

.zbr-table td,
.zbr-table th {
    padding: 12px !important;
    color: #713052 !important;
    border-top: 1px solid rgba(211, 104, 165, .22) !important;
    border-bottom: 1px solid rgba(211, 104, 165, .22) !important;
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
}

.zbr-table td:first-child,
.zbr-table th:first-child {
    color: #bd287d !important;
    font-weight: 900 !important;
    border-radius: 13px 0 0 13px !important;
}

.zbr-table td:last-child,
.zbr-table th:last-child {
    border-radius: 0 13px 13px 0 !important;
}

/* ═══════════════════════════════════════
   09 — FRIENDS
   ═══════════════════════════════════════ */

.zbr-box-friends {
    text-align: center !important;
}

.zbr-friend {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 11px !important;
    margin: 6px !important;

    color: #713052 !important;
    background: rgba(255, 255, 255, .65) !important;
    border: 1px solid rgba(218, 112, 173, .4) !important;
    border-radius: 19px !important;
    transition: .25s ease !important;
}

.zbr-friend img,
.zbr-friend .zbr-noavatar {
    width: 85px !important;
    height: 85px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    border: 3px solid white !important;
    box-shadow: 0 5px 14px rgba(140, 52, 102, .18) !important;
}

.zbr-friend b {
    color: #963968 !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.zbr-friend:hover {
    background: rgba(255, 255, 255, .95) !important;
    border-color: #e94baf !important;
}

/* ═══════════════════════════════════════
   10 — WALL / COMMENTS
   ═══════════════════════════════════════ */

.zbr-comment {
    padding: 17px !important;
    margin: 15px 0 !important;
    color: #713052 !important;
    background: rgba(255, 247, 251, .79) !important;
    border: 1px solid rgba(216, 105, 166, .35) !important;
    border-radius: 19px !important;
    box-shadow: 0 4px 13px rgba(125, 46, 91, .09) !important;
}

.zbr-comment-meta {
    color: #bd287d !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.zbr-comment-body {
    color: #713052 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
}

.zbr-wall-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.zbr-wall-form input,
.zbr-wall-form textarea {
    color: #713052 !important;
    background: rgba(255,255,255,.88) !important;
    border: 2px solid #e8a3cc !important;
    border-radius: 15px !important;
    padding: 13px !important;
    outline: none !important;
    font-family: 'Nunito', sans-serif !important;
}

.zbr-wall-form input:focus,
.zbr-wall-form textarea:focus {
    border-color: #d93691 !important;
}

.zbr-send {
    color: white !important;
    background: linear-gradient(135deg, #ed55b2, #bd287d) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px 17px !important;
}

/* ═══════════════════════════════════════
   11 — DAILY THOUGHTS
   Mais espaço entre Day 1 e Day 2
   ═══════════════════════════════════════ */

.zbr-box-text a,
.zbr-box-html a {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 17px 19px !important;
    margin: 14px 0 !important;

    color: #793052 !important;
    background: rgba(255, 255, 255, .88) !important;

    border: 1px solid rgba(213, 105, 164, .35) !important;
    border-radius: 19px !important;

    font-family: 'Baloo 2', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;

    box-shadow: 0 4px 0 rgba(197, 77, 145, .15) !important;
    text-decoration: none !important;
}

.zbr-box-text a:hover,
.zbr-box-html a:hover {
    color: white !important;
    background: linear-gradient(110deg, #e83c9f, #c52a83) !important;
}

/* Caso os dias sejam itens de lista */

.zbr-box-text li,
.zbr-box-html li {
    margin-bottom: 15px !important;
    padding: 12px !important;
    line-height: 1.7 !important;
}

.zbr-box-text ul,
.zbr-box-html ul {
    padding-left: 20px !important;
}

/* ═══════════════════════════════════════
   12 — VISIT COUNTER
   ═══════════════════════════════════════ */

.zbr-views {
    color: #fff0f8 !important;
    text-align: center !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 15px !important;
    text-shadow: 0 2px 5px rgba(65, 20, 50, .5) !important;
}

/* ═══════════════════════════════════════
   13 — GALLERY / PLAYLIST
   ═══════════════════════════════════════ */

.zbr-box-gallery img {
    border: 3px solid white !important;
    border-radius: 17px !important;
    box-shadow: 0 6px 18px rgba(110, 40, 85, .2) !important;
}

.zbr-box-playlist {
    color: #713052 !important;
}

.zbr-box-playlist a {
    color: #bd287d !important;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════
   14 — MINIMAL LAYOUT
   ═══════════════════════════════════════ */

body.layout-minimal .zbr-card,
body.layout-minimal .zbr-box {
    background: rgba(255, 232, 245, .74) !important;
    -webkit-backdrop-filter: blur(13px) !important;
    backdrop-filter: blur(13px) !important;
    border: 2px solid rgba(255,255,255,.85) !important;
    border-radius: 28px !important;
}

/* ═══════════════════════════════════════
   15 — MOBILE
   ═══════════════════════════════════════ */

@media (max-width: 760px) {

    .zbr-space {
        width: 93% !important;
        margin: 19px auto !important;
        gap: 19px !important;
    }

    body.cols-2 .zbr-space {
        display: flex !important;
        flex-direction: column !important;
    }

    .zbr-side,
    .zbr-main {
        width: 100% !important;
        gap: 19px !important;
    }

    .zbr-page .zbr-card,
    .zbr-page .zbr-box {
        width: 100% !important;
        padding: 22px 17px !important;
        border-radius: 25px !important;
    }

    .zbr-avatar {
        width: 140px !important;
        height: 140px !important;
    }

    .zbr-name {
        font-size: 36px !important;
    }

    .zbr-box-title {
        font-size: 23px !important;
    }

    .zbr-link {
        min-height: 54px !important;
        font-size: 16px !important;
    }

    .zbr-table td,
    .zbr-table th {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    .zbr-friend img,
    .zbr-friend .zbr-noavatar {
        width: 74px !important;
        height: 74px !important;
    }

    .zbr-comment {
        padding: 14px !important;
    }

    .zbr-box-text a,
    .zbr-box-html a {
        min-height: 66px !important;
        padding: 17px !important;
        margin: 16px 0 !important;
    }
}

/* ═══════════════════════════════════════
   16 — SMALL PHONES
   ═══════════════════════════════════════ */

@media (max-width: 380px) {

    .zbr-space {
        width: 92% !important;
    }

    .zbr-page .zbr-card,
    .zbr-page .zbr-box {
        padding: 18px 13px !important;
    }

    .zbr-avatar {
        width: 120px !important;
        height: 120px !important;
    }

    .zbr-name {
        font-size: 32px !important;
    }

    .zbr-bio {
        font-size: 14px !important;
    }

    .zbr-box-title {
        font-size: 21px !important;
    }
}

/* ═══════════════════════════════════════
   17 — ACCESSIBILITY
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .zbr-page *,
    .zbr-page *::before,
    .zbr-page *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
/* =========================================
   DISCORD PROFILE — MATCHING GLASS CARD
   ========================================= */

/* Caixa externa do Discord */
.zbr-page :is(
    .zbr-discord,
    .zbr-discord-card,
    .zbr-profile-discord,
    .zbr-discord-profile,
    .zbr-user-card,
    .zbr-footer-card
) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 20px !important;
    margin: 18px 0 !important;

    background: rgba(65, 25, 54, 0.48) !important;
    backdrop-filter: blur(15px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(135%) !important;

    border: 2px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 25px !important;

    box-shadow:
        0 5px 0 rgba(224, 75, 165, 0.35),
        0 12px 30px rgba(30, 10, 30, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    color: #fff5fb !important;
    overflow: hidden !important;
    transition: background .3s ease, box-shadow .3s ease !important;
}

/* Brilho delicado no topo */
.zbr-page :is(
    .zbr-discord,
    .zbr-discord-card,
    .zbr-profile-discord,
    .zbr-discord-profile,
    .zbr-user-card,
    .zbr-footer-card
)::before {
    content: "♡  ✧  ♡";
    display: block !important;
    color: #ffaddc !important;
    text-align: center !important;
    font-family: 'Fredoka', sans-serif !important;
    font-size: 17px !important;
    letter-spacing: 7px !important;
    margin-bottom: 12px !important;
}

/* Textos */
.zbr-page :is(
    .zbr-discord,
    .zbr-discord-card,
    .zbr-profile-discord,
    .zbr-discord-profile,
    .zbr-user-card,
    .zbr-footer-card
) :is(p, span, b, strong, a) {
    color: #fff5fb !important;
    font-family: 'Fredoka', sans-serif !important;
    text-shadow: 0 1px 3px rgba(50, 15, 40, .3) !important;
}

/* Imagem de perfil do Discord */
.zbr-page :is(
    .zbr-discord,
    .zbr-discord-card,
    .zbr-profile-discord,
    .zbr-discord-profile,
    .zbr-user-card,
    .zbr-footer-card
) img {
    border: 3px solid rgba(255, 255, 255, .9) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(255, 95, 190, .25) !important;
}

/* Botões e links */
.zbr-page :is(
    .zbr-discord,
    .zbr-discord-card,
    .zbr-profile-discord,
    .zbr-discord-profile,
    .zbr-user-card,
    .zbr-footer-card
) button {
    color: white !important;
    background: linear-gradient(135deg, #ec4eae, #b83d91) !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 16px !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 700 !important;
}

/* Ajuste para celulares */
@media (max-width: 760px) {
    .zbr-page :is(
        .zbr-discord,
        .zbr-discord-card,
        .zbr-profile-discord,
        .zbr-discord-profile,
        .zbr-user-card,
        .zbr-footer-card
    ) {
        padding: 17px !important;
        margin: 15px 0 !important;
        border-radius: 22px !important;
    }
}