/* ==========================================================================
01. IMPORT
Font khusus untuk identitas visual.
Penggunaan: class="fo-caption fo-label fo-title fo-subtitle fo-desc fo-help"
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Berkshire+Swash&family=Geo:ital@0;1&family=Italianno&family=Madimi+One&display=swap');
/* ==========================================================================
02. ROOT / DESIGN TOKENS
Token custom memakai prefix --ui-* agar terpisah dari --bs-* Bootstrap.
========================================================================== */
:root {
--ui-text-light: rgba(240, 240, 250, 1);
--ui-text-dark: rgba(50, 50, 100, 1);
--ui-text-muted: rgba(80, 80, 80, .90);
--ui-white-rgb: 250, 250, 250;
--ui-dark-rgb: 20, 20, 20;
--ui-border-light: rgba(250, 250, 250, .35);
--ui-border-dark: rgba(20, 20, 50, .35);
--ui-border-strong: rgba(20, 20, 50, .55);
--ui-radius-sm: 6px;
--ui-radius-md: 10px;
--ui-radius-lg: 14px;
--ui-radius-xl: 18px;
--ui-gradient-light: linear-gradient(
50deg,
rgba(240, 240, 240, .40) 0%,
rgba(250, 250, 250, .70) 30%,
rgba(240, 240, 250, .40) 40%,
rgba(250, 250, 250, .60) 70%,
rgba(220, 220, 220, .50) 100%
);
--ui-gradient-dark: linear-gradient(
50deg,
rgba(40, 40, 100, .40) 0%,
rgba(20, 20, 20, .80) 20%,
rgba(20, 20, 50, .70) 40%,
rgba(20, 20, 100, .80) 70%,
rgba(50, 50, 50, .50) 100%
);
--ui-gradient-luxury: linear-gradient(
50deg,
rgba(190, 150, 20, .50) 0%,
rgba(160, 80, 20, .80) 20%,
rgba(230, 200, 80, .70) 35%,
rgba(160, 80, 20, .50) 65%,
rgba(190, 150, 40, .60) 100%
);
--ui-font-caption: "Berkshire Swash", serif;
--ui-font-label: "Italianno", cursive;
--ui-font-title: "Madimi One", sans-serif;
--ui-font-subtitle: "Courier New", Courier, monospace;
--ui-font-body: "Atkinson Hyperlegible", sans-serif;
--ui-font-help: "Geo", sans-serif;
}
/* ==========================================================================
03. GRADIENT BACKGROUND
Gradient utama custom UI. Bootstrap .bg-* standar tidak disentuh.
Konvensi:
- Akhiran s : gradient transparan / soft existing, contoh .bg-golds.
- Tanpa s : gradient pekat / solid 95%, contoh .bg-gold.
- RGB, urutan stop, arah gradient, warna teks, dan border mengikuti
pasangan versi transparan; hanya opacity stop gradient yang dipadatkan.
Catatan kompatibilitas:
- .bg-white dan .bg-dark milik Bootstrap tidak dioverride.
- Gunakan .bg-metal untuk versi solid custom.
- .bg-luxury existing dipertahankan agar tidak mengubah tampilan lama;
versi solid tambahannya adalah .bg-luxuri.
Berlaku universal:
- HTML/text container
- Bootstrap: button, card, modal-content, alert, badge, tabs/nav
- Custom: tiles, pod, navigasi, splash, user widget, member card,
fintech, loading, floating notification, member SUKSES58, dan lainnya.
Penggunaan:
class="bg-golds" -> gradient transparan
class="bg-gold" -> gradient solid 95%
========================================================================== */
.bg-golds {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(30, 20, 5, .40) 0%,
rgba(180, 140, 10, .70) 30%,
rgba(250, 210, 0, .60) 50%,
rgba(150, 100, 20, .40) 70%,
rgba(50, 30, 10, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(190, 150, 40, .70);
}
.bg-oceans {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(40, 40, 80, .40) 0%,
rgba(20, 50, 200, .70) 30%,
rgba(80, 40, 210, .60) 50%,
rgba(20, 50, 200, .40) 70%,
rgba(60, 30, 220, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(60, 70, 170, .70);
}
.bg-sages {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(10, 60, 50, .40) 0%,
rgba(50, 150, 70, .70) 30%,
rgba(40, 160, 100, .60) 50%,
rgba(10, 110, 50, .40) 70%,
rgba(5, 120, 20, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(10, 110, 50, .70);
}
.bg-roses {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(170, 20, 20, .40) 0%,
rgba(240, 70, 20, .70) 30%,
rgba(120, 10, 10, .60) 50%,
rgba(240, 60, 10, .40) 70%,
rgba(250, 10, 10, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(180, 40, 40, .70);
}
.bg-luxury {
--ui-bg-gradient: var(--ui-gradient-luxury);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(190, 150, 60, .75);
}
.bg-futures {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(20, 170, 200, .40) 0%,
rgba(20, 90, 90, .70) 30%,
rgba(120, 170, 220, .60) 50%,
rgba(20, 50, 60, .40) 70%,
rgba(50, 120, 250, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(50, 150, 200, .70);
}
.bg-mints {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(240, 250, 240, .4) 0%,
rgba(100, 220, 40, .7) 30%,
rgba(230, 250, 0, .6) 50%,
rgba(130, 250, 70, .4) 70%,
rgba(220, 240, 200, .5) 100%
);
--ui-theme-text: var(--ui-text-dark);
--ui-theme-border: rgba(100, 160, 30, .70);
}
.bg-neons {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(70, 20, 80, .40) 0%,
rgba(40, 20, 100, .70) 30%,
rgba(110, 40, 240, .60) 50%,
rgba(240, 30, 100, .40) 70%,
rgba(240, 90, 160, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(150, 50, 170, .70);
}
.bg-snows {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(250, 250, 250, .40) 0%,
rgba(220, 230, 230, .40) 20%,
rgba(250, 220, 160, .70) 30%,
rgba(220, 220, 230, .60) 40%,
rgba(240, 210, 150, .70) 60%,
rgba(240, 240, 250, .50) 100%
);
--ui-theme-text: rgba(50, 50, 50, .95);
--ui-theme-border: rgba(120, 120, 120, .50);
}
.bg-grays {
--ui-bg-gradient: var(--ui-gradient-light);
--ui-theme-text: rgba(20, 30, 50, .95);
--ui-theme-border: rgba(100, 100, 120, .60);
}
.bg-deeps {
--ui-bg-gradient: var(--ui-gradient-dark);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(70, 70, 100, .70);
}
.bg-whites {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(250, 250, 250, .40) 0%,
rgba(240, 240, 240, .70) 30%,
rgba(250, 250, 250, .60) 50%,
rgba(250, 250, 250, .40) 70%,
rgba(230, 230, 230, .50) 100%
);
--ui-theme-text: var(--ui-text-dark);
--ui-theme-border: rgba(120, 120, 140, .50);
}
.bg-darks {
--ui-bg-gradient: linear-gradient(
50deg,
rgba(20, 20, 20, .40) 0%,
rgba(40, 40, 40, .70) 30%,
rgba(20, 20, 20, .60) 50%,
rgba(50, 50, 50, .40) 70%,
rgba(30, 30, 30, .50) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(120, 120, 120, .60);
}
/* --------------------------------------------------------------------------
03A. GRADIENT SOLID / PEKAT
Pasangan tanpa akhiran "s" dari theme transparan di atas.
Seluruh stop memakai opacity .95 sesuai standar solid SUKSES58.
-------------------------------------------------------------------------- */
.bg-gold {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(30, 20, 5, .8) 0%,
rgba(180, 140, 10, .7) 30%,
rgba(250, 210, 0, .9) 50%,
rgba(150, 100, 20, .8) 70%,
rgba(50, 30, 10, .7) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(190, 150, 40, .70);
}
.bg-ocean {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(40, 40, 80, .8) 0%,
rgba(20, 50, 200, .7) 30%,
rgba(80, 40, 210, .9) 50%,
rgba(20, 50, 200, .8) 70%,
rgba(60, 30, 220, .7) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(60, 70, 170, .70);
}
.bg-sage {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(10, 60, 50, .8) 0%,
rgba(50, 150, 70, .7) 30%,
rgba(40, 160, 100, .9) 50%,
rgba(10, 110, 50, .8) 70%,
rgba(5, 120, 20, .7) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(10, 110, 50, .70);
}
.bg-rose {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(170, 20, 20, .8) 0%,
rgba(240, 70, 20, .7) 30%,
rgba(120, 10, 10, .9) 50%,
rgba(240, 60, 10, .8) 70%,
rgba(250, 10, 10, .7) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(180, 40, 40, .70);
}
.bg-future {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(20, 170, 100, .8) 0%,
rgba(10, 120, 120, 0.7) 30%,
rgba(120, 170, 220, .9) 50%,
rgba(50, 100, 120, 0.8) 70%,
rgba(50, 120, 250, .7) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(50, 150, 200, .70);
}
.bg-mint {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(240, 250, 240, .8) 0%,
rgba(100, 220, 40, .7) 30%,
rgba(230, 250, 0, .9) 50%,
rgba(130, 250, 70, .8) 70%,
rgba(220, 240, 200, .7) 100%
);
--ui-theme-text: var(--ui-text-dark);
--ui-theme-border: rgba(100, 160, 30, .70);
}
.bg-neon {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(70, 20, 80, .95) 0%,
rgba(40, 20, 100, .95) 30%,
rgba(110, 40, 240, .95) 50%,
rgba(240, 30, 100, .95) 70%,
rgba(240, 90, 160, .95) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(150, 50, 170, .70);
}
.bg-snow {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(250, 250, 250, .95) 0%,
rgba(220, 230, 230, .95) 20%,
rgba(250, 220, 160, .95) 30%,
rgba(220, 220, 230, .95) 40%,
rgba(240, 230, 140, .95) 60%,
rgba(210, 210, 220, .95) 80%,
rgba(240, 240, 250, .95) 100%
);
--ui-theme-text: rgba(50, 50, 50, .95);
--ui-theme-border: rgba(120, 120, 120, .50);
}
.bg-gray {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(240, 240, 240, .95) 0%,
rgba(250, 250, 250, .95) 30%,
rgba(240, 240, 250, .95) 40%,
rgba(250, 250, 250, .95) 70%,
rgba(220, 220, 220, .95) 100%
);
--ui-theme-text: rgba(20, 30, 50, .95);
--ui-theme-border: rgba(100, 100, 120, .60);
}
.bg-deep {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(40, 40, 100, .95) 0%,
rgba(20, 20, 20, .95) 20%,
rgba(20, 20, 50, .95) 40%,
rgba(20, 20, 100, .95) 70%,
rgba(50, 50, 50, .95) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(70, 70, 100, .70);
}
/* Bootstrap compatibility: .bg-white dan .bg-dark tidak dioverride. */
.bg-white-metal {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(250, 250, 250, .95) 0%,
rgba(240, 240, 240, .95) 30%,
rgba(250, 250, 250, .95) 50%,
rgba(250, 250, 250, .95) 70%,
rgba(230, 230, 230, .95) 100%
);
--ui-theme-text: var(--ui-text-dark);
--ui-theme-border: rgba(120, 120, 140, .50);
}
.bg-metal {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(20, 20, 20, .95) 0%,
rgba(40, 40, 40, .95) 30%,
rgba(20, 20, 20, .95) 50%,
rgba(50, 50, 50, .95) 70%,
rgba(30, 30, 30, .95) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(120, 120, 120, .60);
}
/* .bg-luxury existing dipertahankan; ini pasangan solidnya. */
.bg-luxuri {
--ui-bg-gradient: linear-gradient(
150deg,
rgba(190, 150, 20, .95) 0%,
rgba(160, 80, 20, .95) 20%,
rgba(230, 200, 80, .95) 35%,
rgba(160, 80, 20, .95) 65%,
rgba(190, 150, 40, .95) 100%
);
--ui-theme-text: var(--ui-text-light);
--ui-theme-border: rgba(190, 150, 60, .75);
}
.bg-golds,
.bg-oceans,
.bg-sages,
.bg-roses,
.bg-luxury,
.bg-futures,
.bg-mints,
.bg-neons,
.bg-snows,
.bg-grays,
.bg-deeps,
.bg-whites,
.bg-darks,
.bg-gold,
.bg-ocean,
.bg-sage,
.bg-rose,
.bg-future,
.bg-mint,
.bg-neon,
.bg-snow,
.bg-gray,
.bg-deep,
.bg-metal,
.bg-luxuri {
background: var(--ui-bg-gradient);
color: var(--ui-theme-text);
}
/* ==========================================================================
04. GRADIENT TEXT
Gradient khusus teks dengan stop warna terurut.
Penggunaan: class="txt-golds", class="txt-oceans", class="txt-luxury", dst.
========================================================================== */
.txt-golds {
--ui-text-gradient: linear-gradient(50deg, #a66b0a 0%, #e5b72a 25%, #ffe070 50%, #d99c17 75%, #8c5008 100%);
}
.txt-oceans {
--ui-text-gradient: linear-gradient(50deg, #283278 0%, #285ab4 25%, #2882dc 50%, #465ac8 75%, #282864 100%);
}
.txt-sages {
--ui-text-gradient: linear-gradient(50deg, #0a5032 0%, #288c46 25%, #3cb464 50%, #1e8246 75%, #055a28 100%);
}
.txt-roses {
--ui-text-gradient: linear-gradient(50deg, #aa1e1e 0%, #dc3232 25%, #fa5032 50%, #dc283c 75%, #96141e 100%);
}
.txt-luxury {
--ui-text-gradient: linear-gradient(50deg, #aa6e0a 0%, #e6be32 25%, #ffe16e 50%, #dca01e 75%, #8c500a 100%);
}
.txt-futures {
--ui-text-gradient: linear-gradient(50deg, #146496 0%, #14a0be 25%, #64bedc 50%, #3c78dc 75%, #2846a0 100%);
}
.txt-mints {
--ui-text-gradient: linear-gradient(50deg, #5a8c14 0%, #8cbe1e 25%, #aadc3c 50%, #78b41e 75%, #46780a 100%);
}
.txt-neons {
--ui-text-gradient: linear-gradient(50deg, #5a28b4 0%, #9632d2 25%, #dc50be 50%, #b42896 75%, #5a1e78 100%);
}
.txt-snows {
--ui-text-gradient: linear-gradient(50deg, #82828c 0%, #bebec8 25%, #f5ebd2 50%, #b4b4be 75%, #6e6e78 100%);
}
.txt-grays {
--ui-text-gradient: linear-gradient(50deg, #323246 0%, #646e82 25%, #b4bec8 50%, #646478 75%, #28283c 100%);
}
.txt-deeps {
--ui-text-gradient: linear-gradient(50deg, #141428 0%, #282864 25%, #464682 50%, #1e1e46 75%, #0a0a14 100%);
}
.txt-golds,
.txt-oceans,
.txt-sages,
.txt-roses,
.txt-luxury,
.txt-futures,
.txt-mints,
.txt-neons,
.txt-snows,
.txt-grays,
.txt-deeps {
font-weight: 700;
background: var(--ui-text-gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ---- SOLID TEXT
Warna teks solid custom.
Penggunaan: class="txt-whites" atau class="txt-darks"
-------------------------------------------------------------------------- */
.txt-whites { color: rgba(var(--ui-white-rgb), 1); }
.txt-darks { color: rgba(var(--ui-dark-rgb), 1); }
.txt-op {
color: transparent;
-webkit-text-stroke: 1px rgba(0, 0, 0, .20);
}
/* ==========================================================================
05. TYPOGRAPHY
Font body dan utility font custom.
Penggunaan: class="fo-title", class="fo-desc", class="cfs-4", dst.
========================================================================== */
body {
font-size: 14px;
font-weight: 400;
font-family: var(--ui-font-body);
background-color: transparent;
overflow-x: hidden;
}
.fo-caption { font-family: var(--ui-font-caption); }
.fo-label { font-family: var(--ui-font-label); }
.fo-title { font-family: var(--ui-font-title); }
.fo-subtitle { font-family: var(--ui-font-subtitle); }
.fo-desc { font-family: var(--ui-font-body); }
.fo-help { font-family: var(--ui-font-help); }
.cfw-lighter { font-weight: 200; }
.cfw-lights { font-weight: 300; }
.cfw-light { font-weight: 400; }
.cfw-semi { font-weight: 500; }
.cfw-bold { font-weight: 700; }
.cfw-bolds { font-weight: 800; }
.cfw-bolder { font-weight: 900; }
.ch-1,
.ch-2,
.ch-3,
.ch-4,
.ch-5 { font-weight: 700; }
.ch-1 { font-size: clamp(2.5rem, 5vw, 5rem); }
.ch-2 { font-size: clamp(2.2rem, 4.5vw, 4.5rem); }
.ch-3 { font-size: clamp(1.9rem, 4vw, 4rem); }
.ch-4 { font-size: clamp(1.6rem, 3.5vw, 3.5rem); }
.ch-5 { font-size: clamp(1.4rem, 3vw, 3rem); }
.cfs-1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.cfs-2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.cfs-3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.cfs-4 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.cfs-5 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.cfs-6 { font-size: clamp(.9rem, 1.2vw, 1.1rem); }
.cfs-0 { font-size: clamp(.8rem, 1vw, 1rem); }
.cfs-is { font-size: clamp(12px, .75rem + .15vw, 14px); font-style: italic; }
.cfs-sm { font-size: clamp(12px, .78rem + .15vw, 14px); }
.cfs-ix { font-size: clamp(12px, .72rem + .15vw, 13px); font-style: italic; }
.cfs-xs { font-size: clamp(12px, .72rem + .10vw, 13px); }
/* ==========================================================================
06. CUSTOM UTILITIES
Utility tambahan memakai prefix ui-* agar tidak mengambil utility Bootstrap.
Penggunaan: class="ui-bg-white ui-opacity-50" atau class="ui-txt-dark ui-opacity-70"
========================================================================== */
.ui-bg-white {
--ui-alpha: 1;
background-color: rgba(var(--ui-white-rgb), var(--ui-alpha));
}
.ui-bg-dark {
--ui-alpha: 1;
background-color: rgba(var(--ui-dark-rgb), var(--ui-alpha));
}
.ui-txt-white {
--ui-alpha: 1;
color: rgba(var(--ui-white-rgb), var(--ui-alpha));
}
.ui-txt-dark {
--ui-alpha: 1;
color: rgba(var(--ui-dark-rgb), var(--ui-alpha));
}
.ui-opacity-10 { --ui-alpha: .10; }
.ui-opacity-20 { --ui-alpha: .20; }
.ui-opacity-30 { --ui-alpha: .30; }
.ui-opacity-40 { --ui-alpha: .40; }
.ui-opacity-50 { --ui-alpha: .50; }
.ui-opacity-60 { --ui-alpha: .60; }
.ui-opacity-70 { --ui-alpha: .70; }
.ui-opacity-80 { --ui-alpha: .80; }
.ui-opacity-90 { --ui-alpha: .90; }
/* ==========================================================================
07. BOOTSTRAP BUTTON EXTENSIONS
Modifier tambahan untuk .btn Bootstrap tanpa menulis ulang selector .btn.
Penggunaan: class="btn btn-primary ui-btn-icon" atau class="btn ui-btn-shadow"
========================================================================== */
.ui-btn-xl {
padding: 18px 28px;
font-size: 1.1rem;
border-radius: var(--ui-radius-xl);
}
.ui-btn-wide { width: 100%; }
.ui-btn-icon,
.ui-btn-icon-lg,
.ui-btn-icon-only {
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ui-btn-icon { width: 42px; height: 42px; }
.ui-btn-icon-lg { width: 52px; height: 52px; }
.ui-btn-icon-only { width: 38px; min-width: 38px; height: 38px; }
.ui-btn-icon i,
.ui-btn-icon-lg i,
.ui-btn-icon-only i {
margin: 0;
line-height: 1;
}
.ui-btn-icon i { font-size: 1rem; }
.ui-btn-icon-lg i { font-size: 1.2rem; }
.ui-btn-icon-text {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ui-btn-icon-text i {
margin: 0;
font-size: 1rem;
line-height: 1;
}
/* ---- BUTTON SHADOW
Shadow opsional hanya untuk tombol khusus.
Penggunaan: class="btn btn-primary ui-btn-shadow"
-------------------------------------------------------------------------- */
.ui-btn-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.ui-btn-shadow:active { box-shadow: none; }
/* ==========================================================================
08. SHORTCUT UI SUKSES58
Floating quick navigation dengan identitas visual SUKSES58:
navy, cyan-water, teal, silver, dan metallic gold.
Responsive:
- Mobile <= 640px
- Tablet 641px - 1280px
- Desktop > 1280px
Tanpa blur dan tanpa animation.
Penggunaan:
class="shortcut-wrapper"
class="shortcut-nav"
class="shortcut-item"
class="shortcut-popup"
id="toggle-shortcut"
========================================================================== */
/* --------------------------------------------------------------------------
SHORTCUT DESIGN TOKENS
Token hanya berlaku di dalam Shortcut sehingga tidak mengganggu
komponen custom.css lainnya.
Penggunaan: otomatis.
-------------------------------------------------------------------------- */
.shortcut-wrapper {
--s58-shortcut-navy-950: #06141f;
--s58-shortcut-navy-900: #081c2a;
--s58-shortcut-navy-800: #10283b;
--s58-shortcut-teal: #087f86;
--s58-shortcut-teal-dark: #075f65;
--s58-shortcut-cyan: #70e4ff;
--s58-shortcut-cyan-soft: #b8eff8;
--s58-shortcut-gold: #d6aa4d;
--s58-shortcut-gold-light: #f3cf74;
--s58-shortcut-gold-dark: #a87922;
--s58-shortcut-silver: #edf4f7;
--s58-shortcut-muted: #aebfc8;
--s58-shortcut-line:
rgba(
112,
228,
255,
.24
);
--s58-shortcut-line-strong:
rgba(
112,
228,
255,
.50
);
}
/* ==========================================================================
SHORTCUT WRAPPER
Dock utama menggunakan gradient navy-metallic dengan border cyan tipis.
Penggunaan:
class="shortcut-wrapper"
========================================================================== */
.shortcut-wrapper {
position: fixed;
right: 18px;
bottom:
calc(
18px
+ env(safe-area-inset-bottom)
);
z-index: 9999;
width: auto;
max-width:
calc(
100vw
- 36px
);
display: flex;
align-items: stretch;
justify-content: flex-end;
gap: 6px;
padding: 6px;
box-sizing: border-box;
overflow: visible;
background: transparent;
color:
var(--s58-shortcut-silver);
}
/* --------------------------------------------------------------------------
NAVIGATION
Penggunaan:
class="shortcut-nav"
-------------------------------------------------------------------------- */
.shortcut-nav {
min-width: 0;
display: flex;
align-items: stretch;
gap: 5px;
overflow: visible;
}
.shortcut-nav.hidden {
display: none !important;
}
/* ==========================================================================
SHORTCUT ITEM
Item normal menyatu dengan dock, bukan lagi kotak putih terpisah.
Penggunaan:
class="shortcut-item"
========================================================================== */
.shortcut-item {
position: relative;
width: auto;
min-width: 76px;
height: 58px;
display: flex;
align-items: stretch;
justify-content: center;
flex:
0 0 auto;
box-sizing: border-box;
overflow: visible;
background:
linear-gradient(
150deg,
#05adb9 0%,
#075f65 50%,
#087f86 100%
);
border:
1px solid
rgb(250, 250, 250);
border-radius:
15px;
color:
var(--s58-shortcut-silver);
}
/* --------------------------------------------------------------------------
ITEM LINK
Penggunaan:
.shortcut-item > a
-------------------------------------------------------------------------- */
.shortcut-item > a {
width: 100%;
min-width: 0;
height: 100%;
padding:
6px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: inherit;
text-align: center;
text-decoration: none;
}
/* --------------------------------------------------------------------------
ITEM ICON
Cyan digunakan sebagai warna utama icon agar selaras dengan konsep air.
Penggunaan:
.shortcut-item i
-------------------------------------------------------------------------- */
.shortcut-item i {
margin: 0;
flex-shrink: 0;
font-size:
1.15rem;
line-height: 1;
color:
var(--s58-shortcut-white);
}
/* --------------------------------------------------------------------------
ITEM LABEL
Label dibuat jelas, ringan, dan tidak terpotong.
Penggunaan:
.shortcut-item span
-------------------------------------------------------------------------- */
.shortcut-item span {
width: 100%;
margin-top:
5px;
display: block;
overflow: visible;
color:
var(--s58-shortcut-silver);
font-family:
var(--ui-font-body);
font-size:
.7rem;
font-weight:
700;
line-height:
1.05;
letter-spacing:
.01em;
text-align:
center;
text-transform:
capitalize;
white-space:
nowrap;
}
/* ==========================================================================
ITEM ACTIVE / HOVER
Active memakai gradient water teal-cyan.
Garis emas tipis menjadi identitas premium SUKSES58.
Penggunaan:
class="shortcut-item active"
class="shortcut-item open"
========================================================================== */
.shortcut-item:hover,
.shortcut-item.active,
.shortcut-item.open {
background:
linear-gradient(
150deg,
rgba(20, 30, 100, 0.9) 0%,
rgba(10, 50, 150, 0.9) 50%,
rgba(20, 100, 150, 0.9) 100%
);
border-color:
rgba(
112,
228,
255,
.70
);
color:
#ffffff;
}
/* --------------------------------------------------------------------------
GOLD ACCENT ACTIVE
Garis emas pada bagian atas menunjukkan halaman aktif.
Penggunaan: otomatis.
-------------------------------------------------------------------------- */
.shortcut-item.active::before,
.shortcut-item.open::before {
content: "";
position: absolute;
top: -1px;
left: 10px;
right: 10px;
height: 2px;
background:
linear-gradient(
90deg,
#a87922,
#f3cf74,
#d6aa4d
);
border-radius:
2px;
}
.shortcut-item:hover i,
.shortcut-item.active i,
.shortcut-item.open i {
color:
#ffffff;
}
.shortcut-item:hover span,
.shortcut-item.active span,
.shortcut-item.open span {
color:
#ffffff;
}
/* --------------------------------------------------------------------------
FOCUS
Penggunaan: keyboard navigation.
-------------------------------------------------------------------------- */
.shortcut-item > a:focus-visible {
outline:
2px solid
var(--s58-shortcut-gold-light);
outline-offset:
2px;
}
/* ==========================================================================
TOGGLE SHORTCUT
Tombol toggle menjadi titik visual utama.
Warna emas-metallic membedakannya dari tombol navigasi biasa.
Penggunaan:
id="toggle-shortcut"
========================================================================== */
#toggle-shortcut {
order: 99;
width: 56px;
min-width: 56px;
height: 58px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0 0 56px;
box-sizing: border-box;
border:
1px solid
#a87922;
border-radius:
11px;
background:
linear-gradient(
145deg,
#f3cf74 0%,
#d6aa4d 45%,
#a87922 100%
);
color:
#071827;
cursor:
pointer;
}
/* --------------------------------------------------------------------------
TOGGLE ICON
Penggunaan:
#toggle-shortcut i
-------------------------------------------------------------------------- */
#toggle-shortcut i {
margin: 0;
font-size:
1.4rem;
line-height: 1;
color:
inherit;
}
/* --------------------------------------------------------------------------
TOGGLE ACTIVE
Saat shortcut terbuka, tombol berubah menjadi teal-water.
Penggunaan:
#toggle-shortcut.active-toggle
-------------------------------------------------------------------------- */
#toggle-shortcut:hover {
background:
linear-gradient(
145deg,
#ffe19a,
#d6aa4d
);
color:
#06141f;
}
#toggle-shortcut.active-toggle {
background:
linear-gradient(
145deg,
#087f86,
#075f65
);
border-color:
var(--s58-shortcut-cyan);
color:
#ffffff;
}
#toggle-shortcut.active-toggle i {
color:
#ffffff;
}
#toggle-shortcut:focus-visible {
outline:
2px solid
var(--s58-shortcut-gold-light);
outline-offset:
2px;
}
/* ==========================================================================
SHORTCUT POPUP
Popup memakai desain dark-navy agar menyatu dengan dock utama.
Penggunaan:
class="shortcut-popup"
========================================================================== */
.shortcut-popup {
position: absolute;
right: 0;
bottom:
calc(
100%
+ 8px
);
z-index: 10001;
width:
max-content;
max-width:
calc(
100vw
- 24px
);
display: none;
flex-direction:
column-reverse;
gap:
5px;
}
/* --------------------------------------------------------------------------
POPUP OPEN
Penggunaan:
class="shortcut-item open"
-------------------------------------------------------------------------- */
.shortcut-item.open
.shortcut-popup {
display:
flex;
}
/* --------------------------------------------------------------------------
POPUP ITEM
Penggunaan:
.shortcut-popup a
-------------------------------------------------------------------------- */
.shortcut-popup a {
width:
auto;
min-width:
190px;
max-width:
calc(
100vw
- 24px
);
min-height:
46px;
padding:
7px 12px;
display:
flex;
flex-direction:
row;
align-items:
center;
justify-content:
flex-start;
box-sizing:
border-box;
background:
linear-gradient(
145deg,
#081c2a,
#10283b
);
color:
var(--s58-shortcut-silver);
border:
1px solid
var(--s58-shortcut-line-strong);
border-radius:
10px;
text-decoration:
none;
}
/* --------------------------------------------------------------------------
POPUP ICON
Penggunaan:
.shortcut-popup a i
-------------------------------------------------------------------------- */
.shortcut-popup a i {
width:
30px;
min-width:
30px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
flex-shrink:
0;
margin:
0;
color:
var(--s58-shortcut-cyan);
font-size:
1.05rem;
line-height:
1;
}
/* --------------------------------------------------------------------------
POPUP LABEL
Tulisan dapat membungkus dan tidak dipotong.
Penggunaan:
.shortcut-popup a span
-------------------------------------------------------------------------- */
.shortcut-popup a span {
min-width:
0;
min-height:
26px;
margin:
0 0 0 8px;
padding-left:
11px;
display:
flex;
align-items:
center;
border-left:
1px solid
rgba(
112,
228,
255,
.30
);
color:
var(--s58-shortcut-silver);
font-family:
var(--ui-font-body);
font-size:
.78rem;
font-weight:
600;
line-height:
1.2;
text-align:
left;
text-transform:
capitalize;
white-space:
normal;
overflow-wrap:
anywhere;
}
/* --------------------------------------------------------------------------
POPUP HOVER
Penggunaan: otomatis.
-------------------------------------------------------------------------- */
.shortcut-popup a:hover {
background:
linear-gradient(
145deg,
#075f65,
#087f86
);
border-color:
var(--s58-shortcut-cyan);
color:
#ffffff;
}
.shortcut-popup a:hover i {
color:
var(--s58-shortcut-gold-light);
}
.shortcut-popup a:hover span {
color:
#ffffff;
border-left-color:
var(--s58-shortcut-gold);
}
.shortcut-popup a:focus-visible {
outline:
2px solid
var(--s58-shortcut-gold-light);
outline-offset:
2px;
}
/* ==========================================================================
SHORTCUT LARGE > 1280
Desktop:
Floating dock premium kanan bawah.
Penggunaan: otomatis.
========================================================================== */
@media
(
min-width: 1281px
) {
.shortcut-wrapper {
right:
20px;
bottom:
calc(
20px
+ env(safe-area-inset-bottom)
);
gap:
6px;
padding:
7px;
}
.shortcut-nav {
gap:
6px;
}
.shortcut-item {
min-width:
82px;
height:
60px;
}
.shortcut-item > a {
padding:
7px 12px;
}
.shortcut-item i {
font-size:
1.2rem;
}
.shortcut-item span {
font-size:
.72rem;
}
#toggle-shortcut {
width:
58px;
min-width:
58px;
height:
60px;
flex-basis:
58px;
}
}
/* ==========================================================================
SHORTCUT TABLET 641 - 1280
Tablet:
Dock tetap floating namun lebih compact.
Penggunaan: otomatis.
========================================================================== */
@media
(
min-width: 641px
)
and
(
max-width: 1280px
) {
.shortcut-wrapper {
right:
12px;
bottom:
calc(
12px
+ env(safe-area-inset-bottom)
);
max-width:
calc(
100vw
- 24px
);
gap:
5px;
padding:
5px;
}
.shortcut-nav {
gap:
5px;
}
.shortcut-item {
min-width:
68px;
height:
54px;
}
.shortcut-item > a {
padding:
5px 8px;
}
.shortcut-item i {
font-size:
1.05rem;
}
.shortcut-item span {
margin-top:
4px;
font-size:
.64rem;
}
#toggle-shortcut {
width:
52px;
min-width:
52px;
height:
54px;
flex-basis:
52px;
}
#toggle-shortcut i {
font-size:
1.28rem;
}
.shortcut-popup a {
min-width:
175px;
}
}
/* ==========================================================================
SHORTCUT MOBILE <= 640
Mobile:
Menjadi bottom dock hampir selebar layar.
Semua tombol berbagi ruang secara merata.
Label boleh menjadi dua baris dan tidak dipotong.
Penggunaan: otomatis.
========================================================================== */
@media
(
max-width: 640px
) {
.shortcut-wrapper {
right:
8px;
left:
8px;
bottom:
calc(
8px
+ env(safe-area-inset-bottom)
);
width:
auto;
max-width:
none;
padding:
5px;
gap:
4px;
align-items:
stretch;
border-radius:
14px;
}
/* ----------------------------------------------------------------------
NAV MOBILE
---------------------------------------------------------------------- */
.shortcut-nav {
min-width:
0;
flex:
1 1 auto;
display:
flex;
align-items:
stretch;
gap:
4px;
}
/* ----------------------------------------------------------------------
ITEM MOBILE
---------------------------------------------------------------------- */
.shortcut-item {
width:
auto;
min-width:
0;
height:
54px;
flex:
1 1 0;
border-radius:
9px;
}
.shortcut-item > a {
min-width:
0;
padding:
5px 2px;
}
.shortcut-item i {
font-size:
1.05rem;
}
/* ----------------------------------------------------------------------
LABEL MOBILE
Tidak menggunakan ellipsis.
---------------------------------------------------------------------- */
.shortcut-item span {
margin-top:
4px;
font-size:
clamp(
.55rem,
2.15vw,
.65rem
);
line-height:
1.02;
letter-spacing:
0;
white-space:
normal;
overflow-wrap:
normal;
word-break:
normal;
}
/* ----------------------------------------------------------------------
TOGGLE MOBILE
---------------------------------------------------------------------- */
#toggle-shortcut {
width:
50px;
min-width:
50px;
height:
54px;
flex:
0 0 50px;
border-radius:
9px;
}
#toggle-shortcut i {
font-size:
1.25rem;
}
/* ----------------------------------------------------------------------
POPUP MOBILE
---------------------------------------------------------------------- */
.shortcut-popup {
right:
0;
bottom:
calc(
100%
+ 7px
);
max-width:
calc(
100vw
- 16px
);
}
.shortcut-popup a {
min-width:
170px;
max-width:
calc(
100vw
- 16px
);
min-height:
44px;
}
.shortcut-popup a span {
font-size:
.74rem;
}
}
/* ==========================================================================
09. MODAL BOOTSTRAP FAST
Menghilangkan fade, transform, blur, dan transition Bootstrap Modal agar
popup tampil/tutup langsung tanpa efek berat.
Penggunaan: otomatis untuk seluruh .modal dan .modal-backdrop.
========================================================================== */
.modal,
.modal.fade,
.modal.show,
.modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog,
.modal-content,
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
animation: none !important;
transition: none !important;
}
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
transform: none !important;
}
.modal,
.modal-dialog,
.modal-content,
.modal-backdrop {
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.modal-backdrop {
opacity: .5;
}
.modal-backdrop.show {
opacity: .5 !important;
}
.modal-content {
box-shadow: none !important;
}
.s58-modal-loading .modal-dialog {
max-width: 320px;
}
.s58-modal-loading .modal-content {
border: 1px solid var(--ui-border-strong);
border-radius: var(--ui-radius-lg);
}
.s58-modal-loading .modal-body {
min-height: 84px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
09. POD SYSTEM
Container custom pengembangan konsep Card, tanpa mengganti .card Bootstrap.
Penggunaan: class="pod bg-oceans", class="pod-header", class="pod-body"
========================================================================== */
.pod {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
background: var(--ui-bg-gradient, rgba(var(--ui-white-rgb), .98));
color: var(--ui-theme-text, var(--ui-text-dark));
border: 1px solid var(--ui-theme-border, var(--ui-border-dark));
border-radius: var(--ui-radius-lg);
}
.pod-header {
min-height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: transparent;
color: inherit;
border-bottom: 1px solid var(--ui-theme-border, var(--ui-border-dark));
}
.pod-header-left {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.pod-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid currentColor;
border-radius: var(--ui-radius-md);
background: transparent;
color: inherit;
font-size: 1.6rem;
line-height: 1;
}
.pod-title {
margin: 0 0 2px;
font-size: 1.1rem;
font-weight: 600;
font-family: var(--ui-font-title);
line-height: 1.2;
letter-spacing: .03em;
text-transform: uppercase;
color: inherit;
}
.pod-subtitle {
margin: 0;
font-size: .8rem;
font-weight: 400;
font-family: var(--ui-font-body);
line-height: 1.3;
color: inherit;
}
.pod-header-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.pod-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
/* ---- POD BUTTON
Modifier tombol Bootstrap khusus area POD.
Penggunaan: class="btn pod-btn" atau class="btn pod-btn ui-btn-icon"
-------------------------------------------------------------------------- */
.pod-btn {
min-width: 38px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--ui-border-strong);
border-radius: var(--ui-radius-md);
background: #fff;
color: var(--ui-text-dark);
font-size: .85rem;
font-weight: 600;
font-family: var(--ui-font-body);
line-height: 1;
white-space: nowrap;
}
.pod-btn:hover {
background: #f1f5f9;
color: var(--ui-text-dark);
border-color: rgba(20, 20, 50, .70);
}
.pod-btn:active {
background: #e2e8f0;
border-color: rgba(20, 20, 50, .80);
}
.pod-btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.pod-btn i {
margin: 0;
font-size: 1rem;
line-height: 1;
color: inherit;
}
.pod-body {
position: relative;
flex: 1;
padding: 20px;
background: transparent;
color: inherit;
}
.pod-body.pod-light {
background: rgba(240, 240, 250, .7);
color: var(--ui-text-dark);
}
.pod-body.pod-dark {
background: rgba(20, 20, 100, .7);
color: var(--ui-text-light);
}
/* ---- POD OPACITY BODY
Nama .pod-op dipertahankan, tetapi efek blur dihilangkan.
Penggunaan: class="pod-body pod-op"
-------------------------------------------------------------------------- */
.pod-body.pod-op {
position: relative;
overflow: hidden;
background: rgba(13, 14, 18, .72);
color: var(--ui-text-light);
}
.pod-body.pod-op.has-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.pod-body.pod-op.has-bg::before {
content: "";
position: absolute;
inset: 0;
background: rgba(13, 14, 18, .68);
pointer-events: none;
}
.pod-body.pod-op.has-bg > * {
position: relative;
z-index: 1;
}
.pod-body.pod-scroll {
max-height: 280px;
overflow-x: hidden;
overflow-y: auto;
background: rgba(var(--ui-white-rgb), .98);
color: var(--ui-text-dark);
scrollbar-width: thin;
scrollbar-color: rgba(20, 20, 50, .35) transparent;
}
.pod-body.pod-scroll::-webkit-scrollbar { width: 5px; }
.pod-body.pod-scroll::-webkit-scrollbar-track { background: transparent; }
.pod-body.pod-scroll::-webkit-scrollbar-thumb {
background: rgba(20, 20, 50, .35);
border-radius: 4px;
}
.pod-footer {
padding: 10px 14px;
background: transparent;
color: inherit;
border-top: 1px solid var(--ui-theme-border, var(--ui-border-dark));
font-size: .8rem;
font-family: var(--ui-font-body);
line-height: 1.3;
}
@media (max-width: 640px) {
.pod { border-radius: var(--ui-radius-md); }
.pod-header {
min-height: 0;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 10px;
padding: 14px;
}
.pod-header-left {
width: 100%;
justify-content: flex-start;
gap: 8px;
}
.pod-icon { width: 42px; height: 42px; font-size: 1.3rem; }
.pod-title { font-size: .95rem; }
.pod-subtitle { font-size: .78rem; }
.pod-header-right,
.pod-actions {
width: 100%;
justify-content: flex-start;
}
.pod-btn {
min-height: 36px;
padding: 6px 10px;
font-size: .8rem;
}
.pod-btn-mobile {
width: 36px;
min-width: 36px;
padding-left: 0;
padding-right: 0;
}
.pod-btn-mobile span { display: none; }
.pod-body { padding: 14px; }
.pod-footer { padding: 10px 14px; }
}
/* ==========================================================================
10. TILE / TILES WIDGET SYSTEM
Widget dashboard modular dengan visual clean-premium yang tetap mengikuti
Bootstrap sebagai layout/utility utama. Sistem .tile ratio-* lama tetap
dipertahankan untuk kompatibilitas halaman lama.
PRINSIP INTEGRASI BOOTSTRAP
- Bootstrap .row / .col-* mengatur layout luar.
- .tiles-col membuat .tiles mengisi penuh ukuran col-* Bootstrap.
- .tiles-col-square membuat tile persegi sesuai lebar col-*.
- .tiles-grid membagi isi kolom menjadi matrix internal 4 x 4.
- .tiles-WxH mengatur span tile di matrix internal.
- Utility Bootstrap boleh dipasang langsung pada .tiles atau child:
p-*, m-*, gap-*, d-*, flex-*, justify-content-*, align-items-*,
text-*, bg-*, border-*, rounded-*, w-*, h-*, position-*, badge, btn, dst.
- Default selector Tiles memakai :where() agar utility Bootstrap memiliki
prioritas lebih tinggi tanpa perlu !important.
- Theme custom bg-* / txt-* / fo-* / cfs-* / ch-* / cfw-* tetap kompatibel.
FORMAT RATIO
- .tiles-1x1 = 1 unit lebar x 1 unit tinggi
- .tiles-2x2 = 2 unit lebar x 2 unit tinggi
- .tiles-4x1 = full width x 1 baris
- .tiles-1x4 = 1 unit lebar x full height
- .tiles-4x4 = full board
MODEL VISUAL
- .tiles-banner : banner horizontal / shortcut besar
- .tiles-stat : angka, saldo, bonus, KPI
- .tiles-profile : avatar / identitas member
- .tiles-feature : feature/action dengan icon atau ilustrasi
- .tiles-promo : promo dengan media dan CTA
- .tiles-media : tile berbasis gambar cover
- .tiles-metric : chart/icon + nilai
- .tiles-simple-stat : icon/avatar + angka
- .tiles-bottom-band : body + footer warna penuh
- .tiles-profile-cover : cover + avatar/icon floating
- .tiles-user-card : user/avatar/icon + footer meta
- .tiles-triple : tiga statistik dalam satu widget
- .tiles-image-card : cover + avatar/icon + footer
- .tiles-info-strip : label kiri + nilai/action kanan
- .tiles-plain : hilangkan ornamen default
Responsive utama:
- Mobile <= 640px
- Tablet 641px - 1280px
- Desktop > 1280px
Penggunaan:
========================================================================== */
/* --------------------------------------------------------------------------
TILE LEGACY
Kompatibilitas untuk markup lama: .tile + .ratio-*.
-------------------------------------------------------------------------- */
.tile {
position: relative;
width: 100%;
display: block;
overflow: hidden;
box-sizing: border-box;
background: var(--ui-bg-gradient, rgba(var(--ui-white-rgb), .98));
color: var(--ui-theme-text, var(--ui-text-dark));
border: 1px solid var(--ui-theme-border, var(--ui-border-dark));
border-radius: var(--ui-radius-md);
}
.tile.ratio-1 { width: clamp(50px, 22vw, 2cm); height: clamp(50px, 22vw, 2cm); }
.tile.ratio-4 { width: clamp(80px, 32vw, 4cm); height: clamp(80px, 32vw, 4cm); }
.tile.ratio-8 { width: clamp(100px, 42vw, 8cm); height: clamp(100px, 42vw, 8cm); }
.tile.ratio-10 { width: 100%; aspect-ratio: 1 / 1; }
.tile-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(.45rem, 2vw, 1rem);
text-align: center;
color: inherit;
}
.tile-icon {
margin-bottom: .4rem;
font-size: clamp(1rem, 5vw, 1.5rem);
font-family: var(--ui-font-caption);
line-height: 1;
color: inherit;
}
.tile-title {
max-width: 100%;
font-size: clamp(.75rem, 2.4vw, .9rem);
font-weight: 600;
font-family: var(--ui-font-title);
line-height: 1.2;
text-transform: uppercase;
overflow-wrap: break-word;
color: inherit;
}
.tile-subtitle {
max-width: 100%;
margin-top: .25rem;
font-size: clamp(.75rem, 1.8vw, .85rem);
font-weight: 400;
font-family: var(--ui-font-body);
line-height: 1.2;
overflow-wrap: break-word;
color: inherit;
}
@media (max-width: 640px) {
.tile { width: 100%; }
.tile.ratio-1,
.tile.ratio-4,
.tile.ratio-8 {
height: auto;
aspect-ratio: 1 / 1;
}
}
/* --------------------------------------------------------------------------
TILES GRID / BOARD
Gunakan di dalam Bootstrap .col-*. Jangan wajibkan ukuran kolom pada Tiles;
Bootstrap tetap menjadi sumber layout responsive bagian luar.
-------------------------------------------------------------------------- */
.tiles-grid {
--tiles-gap: 10px;
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
gap: var(--tiles-gap);
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
.tiles-grid-auto {
aspect-ratio: auto;
grid-template-rows: none;
grid-auto-rows: minmax(76px, auto);
}
/* Board variants. Matrix tetap 4 x 4; hanya proporsi area luar yang berubah. */
.tiles-grid-wide { aspect-ratio: 2 / 1; }
.tiles-grid-tall { aspect-ratio: 1 / 2; }
.tiles-grid-compact {
aspect-ratio: auto;
grid-template-rows: none;
grid-auto-rows: minmax(62px, auto);
}
.tiles-grid-feed {
aspect-ratio: auto;
grid-template-rows: none;
grid-auto-rows: minmax(64px, auto);
}
/* Gap tambahan bila tidak ingin memakai Bootstrap gap-* / g-*. */
.tiles-gap-0 { --tiles-gap: 0; }
.tiles-gap-1 { --tiles-gap: 4px; }
.tiles-gap-2 { --tiles-gap: 8px; }
.tiles-gap-3 { --tiles-gap: 12px; }
/* --------------------------------------------------------------------------
TILES + BOOTSTRAP COLUMN
Bootstrap tetap menjadi sumber ukuran kolom. Wrapper .tiles-col membuat
tile mengisi penuh kolom Bootstrap seperti:
- col-2
- col-md-2
- col-xl-2
- col-6 col-md-4 col-xl-2
Penggunaan:
Catatan:
Jangan membuat ulang class col-* di custom.css. Ukuran tetap mengikuti
Bootstrap sehingga tidak bentrok dengan grid/responsive Bootstrap.
-------------------------------------------------------------------------- */
.tiles-col {
min-width: 0;
display: flex;
align-items: stretch;
}
.tiles-col > .tiles {
width: 100%;
height: 100%;
flex: 1 1 auto;
}
/* Membuat tile mengikuti rasio persegi dari lebar kolom Bootstrap. */
.tiles-col-square {
aspect-ratio: 1 / 1;
}
.tiles-col-square > .tiles {
min-height: 0;
}
/* Untuk widget horizontal/tinggi otomatis di dalam col-* Bootstrap. */
.tiles-col-auto {
aspect-ratio: auto;
}
.tiles-col-auto > .tiles {
height: auto;
min-height: 100%;
}
/* Rasio helper untuk wrapper Bootstrap column. */
.tiles-col-wide {
aspect-ratio: 2 / 1;
}
.tiles-col-tall {
aspect-ratio: 1 / 2;
}
/* --------------------------------------------------------------------------
TILES BASE
:where() sengaja digunakan agar utility Bootstrap seperti p-0, rounded-0,
bg-primary, text-white, border-0, d-grid, flex-row, dan lainnya dapat
mengoverride default Tiles secara natural.
-------------------------------------------------------------------------- */
:where(.tiles) {
--tiles-w: 1;
--tiles-h: 1;
--tiles-pad: clamp(.72rem, 1.25vw, 1rem);
--tiles-radius: var(--ui-radius-lg);
--tiles-border: var(--ui-theme-border, rgba(100, 116, 139, .38));
--tiles-color: var(--ui-theme-text, var(--ui-text-dark));
--tiles-surface: rgba(var(--ui-white-rgb), .98);
position: relative;
isolation: isolate;
z-index: 0;
min-width: 0;
min-height: 0;
grid-column: span var(--tiles-w);
grid-row: span var(--tiles-h);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 8px;
padding: var(--tiles-pad);
overflow: hidden;
box-sizing: border-box;
background-color: var(--tiles-surface);
color: var(--tiles-color);
border: 1px solid var(--tiles-border);
border-radius: var(--tiles-radius);
font-family: var(--ui-font-body);
line-height: 1.25;
text-decoration: none;
}
/* Ornamen ring ringan: tidak blur, tidak animation, tidak shadow. */
:where(.tiles)::before {
content: "";
position: absolute;
z-index: 1;
top: -34%;
right: -16%;
width: 58%;
aspect-ratio: 1 / 1;
border: 1px solid currentColor;
border-radius: 50%;
opacity: .09;
pointer-events: none;
}
:where(.tiles-plain)::before {
display: none;
}
/* Theme custom custom.css tetap menjadi surface root tile. */
.tiles.bg-golds,
.tiles.bg-oceans,
.tiles.bg-sages,
.tiles.bg-roses,
.tiles.bg-luxury,
.tiles.bg-futures,
.tiles.bg-mints,
.tiles.bg-neons,
.tiles.bg-snows,
.tiles.bg-grays,
.tiles.bg-deeps,
.tiles.bg-whites,
.tiles.bg-darks {
border-color: var(--ui-theme-border, var(--tiles-border));
}
/* ui-bg-* memakai background solid dan menghilangkan image theme sebelumnya. */
.tiles.ui-bg-white {
background: rgba(var(--ui-white-rgb), var(--ui-alpha, 1));
color: var(--ui-text-dark);
}
.tiles.ui-bg-dark {
background: rgba(var(--ui-dark-rgb), var(--ui-alpha, 1));
color: var(--ui-text-light);
}
/* Root semantic. */
:where(div.tiles, article.tiles, section.tiles) {
cursor: default;
}
:where(a.tiles, button.tiles) {
margin: 0;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
text-align: inherit;
text-decoration: none;
font: inherit;
}
:where(a.tiles, a.tiles:hover, a.tiles:active, a.tiles:visited) {
color: inherit;
text-decoration: none;
}
:where(a.tiles:hover, button.tiles:hover) {
border-color: currentColor;
}
:where(a.tiles:active, button.tiles:active) {
opacity: .94;
}
:where(a.tiles:focus-visible, button.tiles:focus-visible) {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:where(button.tiles:disabled, .tiles[aria-disabled="true"]) {
opacity: .55;
cursor: not-allowed;
pointer-events: none;
}
/* --------------------------------------------------------------------------
TILES RATIO / SPAN
Format: .tiles-[LEBAR]x[TINGGI]
-------------------------------------------------------------------------- */
.tiles-1x1 { --tiles-w: 1; --tiles-h: 1; }
.tiles-1x2 { --tiles-w: 1; --tiles-h: 2; }
.tiles-1x3 { --tiles-w: 1; --tiles-h: 3; }
.tiles-1x4 { --tiles-w: 1; --tiles-h: 4; }
.tiles-2x1 { --tiles-w: 2; --tiles-h: 1; }
.tiles-2x2 { --tiles-w: 2; --tiles-h: 2; }
.tiles-2x3 { --tiles-w: 2; --tiles-h: 3; }
.tiles-2x4 { --tiles-w: 2; --tiles-h: 4; }
.tiles-3x1 { --tiles-w: 3; --tiles-h: 1; }
.tiles-3x2 { --tiles-w: 3; --tiles-h: 2; }
.tiles-3x3 { --tiles-w: 3; --tiles-h: 3; }
.tiles-3x4 { --tiles-w: 3; --tiles-h: 4; }
.tiles-4x1 { --tiles-w: 4; --tiles-h: 1; }
.tiles-4x2 { --tiles-w: 4; --tiles-h: 2; }
.tiles-4x3 { --tiles-w: 4; --tiles-h: 3; }
.tiles-4x4 { --tiles-w: 4; --tiles-h: 4; }
/* --------------------------------------------------------------------------
TILES CONTENT PRIMITIVES
Default dibuat low-specificity agar class Bootstrap pada child tetap bebas.
-------------------------------------------------------------------------- */
:where(.tiles-head, .tiles-body, .tiles-foot) {
position: relative;
z-index: 3;
min-width: 0;
}
:where(.tiles-head, .tiles-foot) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
:where(.tiles-body) {
flex: 1;
min-height: 0;
}
.tiles-center {
align-items: center;
justify-content: center;
text-align: center;
}
.tiles-start {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
}
.tiles-end {
align-items: flex-end;
justify-content: flex-end;
text-align: right;
}
.tiles-horizontal {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tiles-horizontal .tiles-body { flex: 1; }
/* --------------------------------------------------------------------------
TYPOGRAPHY
fo-*, cfs-*, ch-*, cfw-*, text-* tetap boleh dipasang untuk override.
-------------------------------------------------------------------------- */
:where(.tiles-kicker) {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0 0 4px;
font-size: clamp(.7rem, .7vw, .7rem);
font-weight: 400;
line-height: 1;
letter-spacing: .05em;
text-transform: uppercase;
color: inherit;
opacity: .8;
}
:where(.tiles-title) {
margin: 0;
max-width: 100%;
font-family: var(--ui-font-title);
font-size: clamp(.7rem, 1.00vw, 0.8rem);
font-weight: 500;
text-transform: uppercase;
line-height: 1.0;
letter-spacing: .01em;
color: inherit;
overflow-wrap: anywhere;
}
:where(.tiles-subtitle) {
margin: 0;
max-width: 100%;
font-family: var(--ui-font-desc);
font-size: clamp(.7rem, .7vw, .7rem);
font-weight: 200;
line-height: 1.0;
color: inherit;
text-transform: lowercase;
opacity: .82;
overflow-wrap: anywhere;
}
:where(.tiles-value) {
margin: 0;
max-width: 100%;
font-family: var(--ui-font-body);
font-size: clamp(1.05rem, 1.7vw, 1.65rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -.02em;
color: inherit;
overflow-wrap: anywhere;
}
:where(.tiles-meta) {
margin: 0;
font-size: clamp(.67rem, .78vw, .78rem);
line-height: 1.2;
color: inherit;
opacity: .72;
}
:where(.tiles-divider) {
width: 100%;
height: 1px;
margin: 2px 0;
background: currentColor;
opacity: .14;
}
/* --------------------------------------------------------------------------
ICON / MARK
-------------------------------------------------------------------------- */
:where(.tiles-icon) {
width: 42px;
height: 42px;
min-width: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid currentColor;
border-radius: var(--ui-radius-md);
background: rgba(var(--ui-white-rgb), .10);
color: inherit;
font-size: 1.25rem;
line-height: 1;
}
.tiles-icon-sm {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 1rem;
}
.tiles-icon-lg {
width: 56px;
height: 56px;
min-width: 56px;
font-size: 1.6rem;
}
:where(.tiles-mark) {
width: 48px;
height: 48px;
min-width: 48px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 5px;
border: 1px solid currentColor;
border-radius: 50%;
background: rgba(var(--ui-white-rgb), .86);
color: var(--ui-text-dark);
font-size: .7rem;
font-weight: 700;
line-height: 1.05;
text-align: center;
}
/* --------------------------------------------------------------------------
AVATAR / PROFILE PHOTO
-------------------------------------------------------------------------- */
:where(.tiles-avatar) {
width: 46px;
height: 46px;
min-width: 46px;
display: block;
flex-shrink: 0;
object-fit: cover;
object-position: center;
border: 1px solid currentColor;
border-radius: 50%;
background: rgba(var(--ui-white-rgb), .22);
}
.tiles-avatar-sm {
width: 32px;
height: 32px;
min-width: 32px;
}
.tiles-avatar-lg {
width: 64px;
height: 64px;
min-width: 64px;
}
.tiles-avatar-xl {
width: 88px;
height: 88px;
min-width: 88px;
}
.tiles-avatar-square { border-radius: var(--ui-radius-md); }
/* Avatar lama dapat dipakai di Tiles tanpa dipaksa styling baru. */
.tiles .user-avatar,
.tiles .member-avatar {
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
IMAGE / MEDIA
-------------------------------------------------------------------------- */
:where(.tiles-image) {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
border-radius: var(--ui-radius-sm);
}
.tiles-image-contain { object-fit: contain; }
:where(.tiles-cover) {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
pointer-events: none;
}
.tiles-cover-soft { opacity: .30; }
.tiles-cover-fade { opacity: .52; }
/* Overlay media tanpa blur. */
.tiles-shade::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
180deg,
rgba(5, 12, 20, .08) 0%,
rgba(5, 12, 20, .30) 52%,
rgba(5, 12, 20, .72) 100%
);
pointer-events: none;
}
:where(.tiles-figure) {
position: relative;
z-index: 3;
display: block;
width: auto;
max-width: 44%;
max-height: 86%;
object-fit: contain;
object-position: center;
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
ACTION AREA
Gunakan Bootstrap .btn / .btn-* sebagai pilihan utama tombol internal.
-------------------------------------------------------------------------- */
:where(.tiles-actions) {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.tiles-actions-end { justify-content: flex-end; }
/* --------------------------------------------------------------------------
MODEL: BANNER
Cocok untuk tiles-4x1 / tiles-4x2, shortcut besar, saldo, CTA.
-------------------------------------------------------------------------- */
.tiles-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tiles-banner > .tiles-body {
display: flex;
flex-direction: column;
justify-content: center;
}
/* --------------------------------------------------------------------------
MODEL: STAT
Cocok untuk bonus, saldo, PIN, jumlah jaringan, KPI.
-------------------------------------------------------------------------- */
.tiles-stat > .tiles-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
}
.tiles-stat .tiles-value {
margin-top: auto;
}
.tiles-stat .progress {
height: 5px;
margin-top: 4px;
}
/* --------------------------------------------------------------------------
MODEL: PROFILE
-------------------------------------------------------------------------- */
.tiles-profile > .tiles-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 3px;
}
/* --------------------------------------------------------------------------
MODEL: FEATURE
Meniru konsep widget ilustrasi di sisi kanan pada referensi, tetapi memakai
struktur Bootstrap/custom.css tanpa ketergantungan Tailwind.
-------------------------------------------------------------------------- */
.tiles-feature {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tiles-feature > .tiles-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
/* --------------------------------------------------------------------------
MODEL: PROMO
Media dapat diletakkan di head/body. CTA disarankan memakai .btn Bootstrap.
-------------------------------------------------------------------------- */
.tiles-promo > .tiles-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.tiles-promo > .tiles-figure {
align-self: center;
max-width: min(72%, 180px);
max-height: 42%;
}
/* --------------------------------------------------------------------------
MODEL: MEDIA
Konten berada di atas tiles-cover / tiles-shade.
-------------------------------------------------------------------------- */
.tiles-media {
justify-content: flex-end;
}
.tiles-media > .tiles-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* --------------------------------------------------------------------------
DECORATIVE ACCENT
Garis sederhana menggantikan shadow/animation agar tetap clean dan cepat.
Jangan gabungkan dengan .tiles-shade karena keduanya memakai ::after.
-------------------------------------------------------------------------- */
.tiles-accent::after {
content: "";
position: absolute;
z-index: 2;
right: 12px;
bottom: 9px;
left: 12px;
height: 2px;
background: currentColor;
opacity: .16;
pointer-events: none;
}
/* --------------------------------------------------------------------------
PREMIUM TILE COLLECTION
Model visual tambahan yang mengikuti pola widget dashboard modern:
banner, welcome, balance, promo, quick action, user, activity, dan KPI.
Semua model tetap dapat dioverride utility Bootstrap.
-------------------------------------------------------------------------- */
/* ---- ORNAMEN RING / CIRCLE -----------------------------------------------
Gunakan child .
Tidak memakai blur, shadow, animation, atau background image.
-------------------------------------------------------------------------- */
.tiles-rings {
position: absolute;
z-index: 1;
top: -38px;
right: -24px;
width: clamp(120px, 36%, 220px);
aspect-ratio: 1 / 1;
border: 7px solid currentColor;
border-radius: 50%;
opacity: .16;
pointer-events: none;
}
.tiles-rings::before,
.tiles-rings::after {
content: "";
position: absolute;
border: 4px solid currentColor;
border-radius: 50%;
}
.tiles-rings::before { inset: 16%; opacity: .72; }
.tiles-rings::after { inset: 34%; opacity: .48; }
/* ---- ORB / NOW BADGE ----------------------------------------------------- */
.tiles-orb {
position: relative;
z-index: 4;
width: 46px;
height: 46px;
min-width: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid rgba(15, 23, 42, .18);
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: #263247;
font-size: .66rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.tiles-orb-sm {
width: 36px;
height: 36px;
min-width: 36px;
font-size: .6rem;
}
/* ---- ILLUSTRATION -------------------------------------------------------- */
.tiles-illustration {
position: relative;
z-index: 3;
width: auto;
max-width: 42%;
max-height: 92%;
display: block;
object-fit: contain;
object-position: center bottom;
flex-shrink: 0;
}
.tiles-illustration-sm { max-width: 30%; max-height: 76%; }
.tiles-illustration-lg { max-width: 50%; max-height: 100%; }
.tiles-illustration-right { margin-left: auto; align-self: flex-end; }
.tiles-illustration-left { margin-right: auto; align-self: flex-end; }
/* ---- WELCOME -------------------------------------------------------------
Banner sapaan dengan teks kiri dan ilustrasi kanan.
Cocok tiles-4x2 atau tiles-4x1 pada board wide.
-------------------------------------------------------------------------- */
.tiles-welcome {
flex-direction: row;
align-items: stretch;
justify-content: space-between;
}
.tiles-welcome > .tiles-body {
z-index: 4;
max-width: 68%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.tiles-welcome .tiles-title {
font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.tiles-welcome .tiles-subtitle {
max-width: 40rem;
}
/* ---- BALANCE / FINANCE --------------------------------------------------- */
.tiles-balance > .tiles-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.tiles-balance .tiles-value {
font-size: clamp(1.25rem, 2.6vw, 2.05rem);
letter-spacing: -.02em;
}
.tiles-balance .tiles-foot {
align-items: flex-end;
}
/* ---- QUICK ACTION -------------------------------------------------------- */
.tiles-quick {
justify-content: center;
text-align: center;
}
.tiles-quick > .tiles-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.tiles-quick .tiles-icon {
margin-bottom: 2px;
}
/* ---- KPI / METRIC -------------------------------------------------------- */
.tiles-kpi > .tiles-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
}
.tiles-kpi .tiles-value {
font-size: clamp(1.15rem, 2.1vw, 1.8rem);
}
.tiles-kpi-line {
width: 100%;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(127, 127, 127, .18);
}
.tiles-kpi-line > span {
display: block;
height: 100%;
border-radius: inherit;
background: currentColor;
opacity: .72;
}
/* ---- PROMO FLOAT ---------------------------------------------------------
Model vertical seperti promo gift/mascot pada referensi.
Gunakan .tiles-float agar icon/gambar dapat menonjol dari bagian atas.
-------------------------------------------------------------------------- */
.tiles-float {
margin-top: 24px;
overflow: visible;
}
.tiles-float-icon,
.tiles-float-image {
position: absolute;
z-index: 5;
top: -24px;
left: 50%;
}
.tiles-float-icon {
width: 48px;
height: 48px;
margin-left: -24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 50%;
background: #ffffff;
color: #4462e6;
font-size: 1.35rem;
}
.tiles-float-image {
width: 78px;
height: 58px;
margin-left: -39px;
object-fit: contain;
object-position: center bottom;
}
.tiles-promo-float {
padding-top: 34px;
text-align: center;
}
.tiles-promo-float > .tiles-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.tiles-promo-float .tiles-actions {
width: 100%;
}
.tiles-promo-float .tiles-actions > .btn,
.tiles-promo-float .tiles-actions > a.btn,
.tiles-promo-float .tiles-actions > button.btn {
width: 100%;
}
/* ---- USER / ACCOUNT ------------------------------------------------------ */
.tiles-user > .tiles-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 3px;
}
.tiles-user-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.tiles-user-data {
min-width: 0;
flex: 1;
}
/* ---- ACTIVITY / LIST ----------------------------------------------------- */
.tiles-activity {
min-height: 64px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.tiles-activity > .tiles-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tiles-activity-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tiles-activity-value {
margin-left: auto;
flex-shrink: 0;
font-weight: 700;
white-space: nowrap;
}
/* ---- NOTICE / INFORMATION ------------------------------------------------ */
.tiles-notice {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
}
.tiles-notice > .tiles-body {
display: flex;
flex-direction: column;
gap: 3px;
}
/* ---- SPLIT --------------------------------------------------------------- */
.tiles-split {
flex-direction: row;
align-items: stretch;
}
.tiles-split > .tiles-body {
display: flex;
flex-direction: column;
justify-content: center;
}
.tiles-split-side {
position: relative;
z-index: 3;
min-width: 34%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 10px;
border-left: 1px solid currentColor;
opacity: .9;
}
/* ---- SECTION LABEL ------------------------------------------------------- */
.tiles-label {
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
max-width: 100%;
padding: 3px 7px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: .65rem;
font-weight: 700;
line-height: 1;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
/* ---- BUTTON INTERNAL -----------------------------------------------------
Bootstrap .btn tetap direkomendasikan. Rule ini hanya memastikan tombol
internal tile tetap kompak pada ruang kecil.
-------------------------------------------------------------------------- */
.tiles .btn {
position: relative;
z-index: 4;
}
.tiles .btn-sm {
white-space: nowrap;
}
/* ==========================================================================
10A. TILES WIDGET MODELS EXTENDED
Model widget tambahan untuk dashboard statistik, profile, image, icon,
counter, simple KPI, bottom-band, dan multi-stat.
MEDIA FLEKSIBEL
- .tiles-avatar dapat berupa ![]()
(foto/avatar)
- .tiles-avatar.tiles-avatar-icon dapat berupa dengan icon
- struktur widget tidak berubah saat foto diganti icon
BOOTSTRAP
Utility Bootstrap tetap dapat digunakan langsung:
bg-*, text-*, border-*, rounded-*, p-*, m-*, d-*, flex-*, gap-*,
btn, badge, progress, w-*, h-*, position-*.
Penggunaan:
========================================================================== */
/* --------------------------------------------------------------------------
AVATAR / PHOTO / ICON UNIVERSAL
.tiles-avatar lama diperluas agar elemen yang sama dapat berupa img atau span.
-------------------------------------------------------------------------- */
:where(.tiles-avatar) {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
line-height: 1;
}
img.tiles-avatar {
display: block;
}
.tiles-avatar-icon {
object-fit: initial;
font-size: 1.3rem;
}
.tiles-avatar-icon i,
.tiles-avatar-icon svg {
margin: 0;
font-size: inherit;
line-height: 1;
}
/* Avatar surface alternatif yang tetap dapat di-override Bootstrap. */
:where(.tiles-avatar-soft) {
background: rgba(255, 255, 255, .90);
color: #3156d9;
border-color: rgba(49, 86, 217, .24);
}
:where(.tiles-avatar-dark) {
background: rgba(15, 23, 42, .94);
color: #ffffff;
border-color: rgba(255, 255, 255, .18);
}
/* --------------------------------------------------------------------------
MINI CHART / VISUAL METRIC
Bisa berisi SVG, img, icon, atau bar chart CSS.
-------------------------------------------------------------------------- */
.tiles-chart {
width: 76px;
height: 44px;
min-width: 76px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: inherit;
}
.tiles-chart-sm {
width: 58px;
height: 34px;
min-width: 58px;
}
.tiles-chart-lg {
width: 96px;
height: 54px;
min-width: 96px;
}
.tiles-chart img,
.tiles-chart svg {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.tiles-chart-bars {
width: 76px;
height: 44px;
min-width: 76px;
display: inline-flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
flex-shrink: 0;
color: inherit;
}
.tiles-chart-bars span {
width: 8px;
min-width: 4px;
border-radius: 3px 3px 0 0;
background: currentColor;
opacity: .88;
}
.tiles-chart-bars span:nth-child(1) { height: 34%; }
.tiles-chart-bars span:nth-child(2) { height: 72%; }
.tiles-chart-bars span:nth-child(3) { height: 48%; }
.tiles-chart-bars span:nth-child(4) { height: 22%; }
.tiles-chart-bars span:nth-child(5) { height: 76%; }
.tiles-chart-bars span:nth-child(6) { height: 38%; }
.tiles-number {
margin: 0;
max-width: 100%;
font-family: var(--ui-font-body);
font-size: clamp(1.2rem, 1.9vw, 2rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: inherit;
overflow-wrap: anywhere;
}
.tiles-caption {
margin: 0;
font-size: clamp(.7rem, .82vw, .82rem);
line-height: 1.2;
color: inherit;
opacity: .74;
}
/* --------------------------------------------------------------------------
MODEL: METRIC
Mini chart / icon kiri dan nilai kanan.
Cocok untuk project, sales, user, ticket, PIN, bonus, downline.
-------------------------------------------------------------------------- */
.tiles-metric {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tiles-metric > .tiles-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.tiles-metric .tiles-value,
.tiles-metric .tiles-number {
margin-left: auto;
}
/* --------------------------------------------------------------------------
MODEL: SIMPLE STAT
Icon/avatar kiri + angka/label kanan.
-------------------------------------------------------------------------- */
.tiles-simple-stat {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tiles-simple-stat > .tiles-body {
flex: 1;
min-width: 0;
}
.tiles-simple-stat.tiles-value-end > .tiles-body {
text-align: right;
}
/* --------------------------------------------------------------------------
MODEL: BOTTOM BAND
Visual besar di body dengan footer warna penuh seperti reference widget.
-------------------------------------------------------------------------- */
.tiles-bottom-band {
padding: 0;
}
.tiles-bottom-band > .tiles-body {
min-height: 0;
padding: var(--tiles-pad);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.tiles-band {
position: relative;
z-index: 3;
width: 100%;
padding: .78rem 1rem;
text-align: center;
font-size: .76rem;
font-weight: 800;
line-height: 1;
letter-spacing: .05em;
text-transform: uppercase;
background: rgba(15, 23, 42, .10);
color: inherit;
border-top: 1px solid rgba(127, 127, 127, .15);
}
/* --------------------------------------------------------------------------
MODEL: PROFILE COVER
Cover image / gradient + avatar floating. Avatar boleh foto atau icon.
-------------------------------------------------------------------------- */
.tiles-profile-cover {
padding: 0;
}
.tiles-cover-top {
position: relative;
z-index: 1;
width: 100%;
min-height: 88px;
height: 88px;
overflow: hidden;
background: rgba(127, 127, 127, .10);
}
.tiles-cover-top > img,
.tiles-cover-top > .tiles-cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tiles-profile-body {
position: relative;
z-index: 3;
padding: 2.3rem 1rem .95rem;
text-align: center;
}
.tiles-profile-media {
position: absolute;
z-index: 4;
top: -28px;
left: 50%;
transform: translateX(-50%);
}
/* --------------------------------------------------------------------------
MODEL: USER CARD
Avatar/icon bagian atas + nama/role + dua statistik/action di footer.
-------------------------------------------------------------------------- */
.tiles-user-card {
padding: 0;
}
.tiles-user-top {
position: relative;
z-index: 2;
padding: 1rem .9rem .8rem;
text-align: center;
background: rgba(127, 127, 127, .06);
}
.tiles-user-info {
position: relative;
z-index: 2;
padding: .7rem .9rem;
text-align: center;
}
.tiles-user-meta {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(127, 127, 127, .15);
}
.tiles-user-meta-item {
min-width: 0;
padding: .7rem .5rem;
text-align: center;
font-size: .74rem;
line-height: 1.25;
}
.tiles-user-meta-item + .tiles-user-meta-item {
border-left: 1px solid rgba(127, 127, 127, .15);
}
/* --------------------------------------------------------------------------
MODEL: TRIPLE STAT
Tiga KPI/statistik dalam satu widget horizontal.
-------------------------------------------------------------------------- */
.tiles-triple {
padding: 0;
}
.tiles-triple-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
height: 100%;
}
.tiles-triple-item {
min-width: 0;
padding: 1.05rem .65rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.tiles-triple-item + .tiles-triple-item {
border-left: 1px solid rgba(127, 127, 127, .15);
}
.tiles-triple-item .tiles-icon,
.tiles-triple-item .tiles-avatar {
margin: 0 auto .65rem;
}
.tiles-triple-item .tiles-value {
font-size: clamp(1rem, 1.5vw, 1.5rem);
}
/* --------------------------------------------------------------------------
MODEL: IMAGE CARD
Cover + floating avatar/icon + footer dua action/stat.
-------------------------------------------------------------------------- */
.tiles-image-card {
padding: 0;
}
.tiles-image-top {
position: relative;
z-index: 1;
width: 100%;
min-height: 92px;
height: 92px;
overflow: hidden;
background: rgba(127, 127, 127, .10);
}
.tiles-image-top > img,
.tiles-image-top > .tiles-cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tiles-image-body {
position: relative;
z-index: 3;
padding: 2.15rem .9rem .75rem;
text-align: center;
}
.tiles-image-media {
position: absolute;
z-index: 4;
top: -24px;
left: 50%;
transform: translateX(-50%);
}
.tiles-image-foot {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(127, 127, 127, .15);
}
.tiles-image-foot-item {
min-width: 0;
padding: .68rem .5rem;
text-align: center;
font-size: .72rem;
line-height: 1.25;
}
.tiles-image-foot-item + .tiles-image-foot-item {
border-left: 1px solid rgba(127, 127, 127, .15);
}
/* --------------------------------------------------------------------------
MODEL: INFO STRIP
Label/icon kiri, angka/action kanan.
-------------------------------------------------------------------------- */
.tiles-info-strip {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tiles-info-strip > .tiles-body {
flex: 1;
min-width: 0;
}
/* --------------------------------------------------------------------------
SURFACE MODEL
Low specificity agar Bootstrap bg-* / text-* tetap bisa override.
-------------------------------------------------------------------------- */
:where(.tiles-soft-surface) {
background: rgba(255, 255, 255, .94);
color: #1f2937;
border-color: rgba(100, 116, 139, .20);
}
:where(.tiles-dark-surface) {
background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
color: #ffffff;
border-color: rgba(255, 255, 255, .12);
}
:where(.tiles-colored-head) .tiles-user-top,
:where(.tiles-colored-head) .tiles-cover-top {
background: var(--ui-bg-gradient, rgba(49, 86, 217, .92));
color: var(--ui-theme-text, #ffffff);
}
/* --------------------------------------------------------------------------
RESPONSIVE EXTENDED TILE MODELS
-------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1280px) {
.tiles-chart,
.tiles-chart-bars {
width: 66px;
min-width: 66px;
height: 40px;
}
.tiles-cover-top,
.tiles-image-top {
height: 82px;
min-height: 82px;
}
}
@media (max-width: 640px) {
.tiles-chart,
.tiles-chart-bars {
width: 56px;
min-width: 56px;
height: 34px;
}
.tiles-metric,
.tiles-simple-stat,
.tiles-info-strip {
gap: 8px;
}
.tiles-cover-top,
.tiles-image-top {
height: 76px;
min-height: 76px;
}
.tiles-profile-body {
padding-top: 2rem;
}
.tiles-triple-grid {
grid-template-columns: 1fr;
}
.tiles-triple-item + .tiles-triple-item {
border-left: 0;
border-top: 1px solid rgba(127, 127, 127, .15);
}
.tiles-user-meta,
.tiles-image-foot {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
TILES RESPONSIVE — TABLET 641px s.d. 1280px
========================================================================== */
@media (min-width: 641px) and (max-width: 1280px) {
.tiles-grid { --tiles-gap: 8px; }
:where(.tiles) {
--tiles-pad: clamp(.65rem, 1vw, .9rem);
gap: 7px;
}
:where(.tiles-icon) {
width: 38px;
height: 38px;
min-width: 38px;
font-size: 1.1rem;
}
:where(.tiles-avatar) {
width: 42px;
height: 42px;
min-width: 42px;
}
:where(.tiles-mark) {
width: 44px;
height: 44px;
min-width: 44px;
}
}
/* ==========================================================================
TILES RESPONSIVE — MOBILE <= 640px
Matrix menjadi 2 kolom agar tile kecil tetap terbaca:
- tiles-1x* = setengah lebar
- tiles-2x* / 3x* / 4x* = full width
- tinggi tetap mengikuti span agar konsep ratio tidak hilang.
========================================================================== */
@media (max-width: 640px) {
.tiles-grid {
--tiles-gap: 6px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: minmax(68px, auto);
aspect-ratio: auto;
}
.tiles-1x1,
.tiles-1x2,
.tiles-1x3,
.tiles-1x4 {
grid-column: span 1;
}
.tiles-2x1,
.tiles-2x2,
.tiles-2x3,
.tiles-2x4,
.tiles-3x1,
.tiles-3x2,
.tiles-3x3,
.tiles-3x4,
.tiles-4x1,
.tiles-4x2,
.tiles-4x3,
.tiles-4x4 {
grid-column: span 2;
}
:where(.tiles) {
--tiles-pad: .68rem;
--tiles-radius: var(--ui-radius-md);
gap: 5px;
}
:where(.tiles-title) { font-size: .8rem; }
:where(.tiles-subtitle, .tiles-meta) { font-size: .72rem; }
:where(.tiles-value) { font-size: 1.05rem; }
:where(.tiles-icon) {
width: 34px;
height: 34px;
min-width: 34px;
font-size: 1rem;
}
:where(.tiles-avatar) {
width: 38px;
height: 38px;
min-width: 38px;
}
:where(.tiles-mark) {
width: 40px;
height: 40px;
min-width: 40px;
font-size: .64rem;
}
:where(.tiles-figure) {
max-width: 38%;
max-height: 78%;
}
.tiles-banner,
.tiles-feature,
.tiles-welcome,
.tiles-split {
gap: 8px;
}
.tiles-welcome > .tiles-body {
max-width: 72%;
}
.tiles-illustration {
max-width: 34%;
max-height: 80%;
}
.tiles-orb {
width: 38px;
height: 38px;
min-width: 38px;
font-size: .6rem;
}
.tiles-rings {
width: 128px;
top: -34px;
right: -30px;
border-width: 5px;
}
.tiles-activity {
min-height: 58px;
}
.tiles-activity > .tiles-body {
gap: 6px;
}
.tiles-activity-value {
font-size: .78rem;
}
.tiles-grid-wide,
.tiles-grid-tall {
aspect-ratio: auto;
}
}
/* ==========================================================================
11. NAVIGASI CUSTOM
Navigasi khusus aplikasi; tidak memakai selector .nav atau .navbar Bootstrap.
Penggunaan: class="navigasi", class="navigasi-brand", class="navigasi-btn"
========================================================================== */
.navigasi {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 12px 18px;
background: rgba(20, 20, 20, .20);
border-bottom: 1px solid rgba(250, 250, 250, .18);
}
.navigasi-brand {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
min-width: 0;
}
.navigasi-logo img { display: block; max-width: 100%; height: auto; }
.navigasi-divider {
width: 2px;
align-self: stretch;
background: #d4af37;
}
.navigasi-title {
margin: 0;
font-size: 2.2rem;
font-weight: 600;
color: var(--ui-theme-text, var(--ui-text-light));
font-family: var(--ui-font-help);
line-height: 1;
letter-spacing: 5px;
}
.navigasi-subtitle {
margin-top: 4px;
font-size: 1.5rem;
font-weight: 400;
color: rgba(220, 220, 220, .85);
font-family: var(--ui-font-label);
}
.navigasi-btn-icon,
.navigasi-btn-menu {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-strong);
background: #fff;
color: #111827;
font-size: 1.5rem;
font-family: var(--ui-font-body);
cursor: pointer;
}
.navigasi-button {
display: flex;
align-items: center;
gap: 4px;
}
.navigasi-btn {
width: auto;
min-height: 44px;
padding: 8px 18px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-strong);
background: #fff;
color: #111827;
font-size: .8rem;
font-weight: 500;
font-family: var(--ui-font-title);
text-transform: capitalize;
white-space: nowrap;
cursor: pointer;
}
.navigasi-btn i,
.navigasi-btn svg { font-size: 1.3rem; }
.navigasi-btn:hover,
.navigasi-btn-icon:hover,
.navigasi-btn-menu:hover,
.navigasi-dropdown-item:hover,
.navigasi-dropdown-item:focus-visible {
background: #334155;
color: #fff;
border-color: #0f172a;
}
.navigasi-mobile {
display: none;
position: relative;
}
.navigasi-dropdown {
min-width: 220px;
margin-top: 8px;
padding: 0;
background: transparent;
border: 0;
}
.navigasi-dropdown-item {
width: 100%;
min-height: 46px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
border-radius: var(--ui-radius-md);
border: 1px solid var(--ui-border-strong);
background: #fff;
color: #111827;
font-size: 1rem;
font-weight: 400;
font-family: var(--ui-font-help);
text-transform: capitalize;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
}
.navigasi-dropdown li {
margin-bottom: 8px;
list-style: none;
}
.navigasi-dropdown li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.navigasi { padding: 12px; gap: 12px; }
.navigasi-logo img { width: 72px; }
.navigasi-title { font-size: 1.5rem; letter-spacing: 4px; }
.navigasi-subtitle { font-size: .8rem; font-family: var(--ui-font-body); }
.navigasi-button { display: none; }
.navigasi-mobile { display: block; flex-shrink: 0; }
.navigasi-btn-icon { display: flex; flex-shrink: 0; }
}
/* ==========================================================================
12. FAQ
Accordion visual ringan; mekanisme collapse tetap milik Bootstrap.
Penggunaan: class="faq-item", class="faq-header", class="faq-body"
========================================================================== */
.faq-item {
margin-bottom: 10px;
overflow: hidden;
border: 1px solid var(--ui-border-dark);
border-radius: var(--ui-radius-md);
background: #fff;
}
.faq-header {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 0;
background: #fafafa;
color: #1e293b;
text-align: left;
cursor: pointer;
}
.faq-header:not(.collapsed) {
background: #f5f5f5;
border-bottom: 1px solid #d1d5db;
}
.faq-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
}
.faq-icon i { font-size: 1.2rem; }
.faq-title-wrap { flex: 1; min-width: 0; }
.faq-title {
color: #1e293b;
font-size: .85rem;
font-weight: 600;
font-family: var(--ui-font-subtitle);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.faq-desc {
flex-shrink: 0;
padding: 4px 10px;
border: 1px solid #dbe3ec;
border-radius: 20px;
background: #f1f5f9;
color: #64748b;
font-size: .75rem;
font-family: var(--ui-font-body);
text-transform: uppercase;
font-weight: 400;
}
.faq-body {
padding: 18px;
background: #fff;
color: #475569;
font-size: 14px;
line-height: 1.6;
font-family: var(--ui-font-body);
}
.faq-section-title {
margin: 20px 0 10px;
color: #1e293b;
font-size: .9rem;
font-weight: 600;
}
.faq-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
border-top: 1px solid var(--ui-border-dark);
background: #fafafa;
color: #3c3c3c;
font-size: .75rem;
font-family: var(--ui-font-body);
}
.faq-footer span {
display: flex;
align-items: center;
gap: 5px;
}
.faq-body-primary,
.faq-body-secondary,
.faq-body-success,
.faq-body-danger,
.faq-body-warning,
.faq-body-info,
.faq-body-light,
.faq-body-dark {
padding: 18px;
margin: 12px 0;
}
.faq-body-primary { background: #f8fbff; border-left: 4px solid #2563eb; color: #1e3a5f; }
.faq-body-secondary { background: #f8f9fa; border-left: 4px solid #6b7280; color: #374151; }
.faq-body-success { background: #f6fcf8; border-left: 4px solid #16a34a; color: #166534; }
.faq-body-danger { background: #fff7f7; border-left: 4px solid #dc2626; color: #991b1b; }
.faq-body-warning { background: #fffdf6; border-left: 4px solid #d97706; color: #92400e; }
.faq-body-info { background: #f4fcfd; border-left: 4px solid #0891b2; color: #155e75; }
.faq-body-light { background: #fafafa; border-left: 4px solid #d1d5db; color: #52525b; }
.faq-body-dark { background: #f3f4f6; border-left: 4px solid #374151; color: #1f2937; }
.faq-header:not(.collapsed) .faq-icon { color: #2563eb; }
.faq-header:not(.collapsed) .faq-title { color: #0f172a; }
.faq-header:not(.collapsed) .faq-desc { background: #e2e8f0; color: #475569; }
.faq-body p { margin: 0 0 12px; }
.faq-body ul,
.faq-body ol { margin: 10px 0; padding-left: 22px; }
.faq-body li { margin: 6px 0; }
.faq-body strong { color: #1e293b; font-weight: 600; }
.faq-body a { color: #2563eb; text-decoration: none; }
.faq-body code { padding: 2px 5px; background: #f8fafc; color: #334155; border-radius: 4px; }
@media (max-width: 640px) {
.faq-header { padding: 10px 12px; gap: 8px; }
.faq-icon { width: 32px; height: 32px; }
.faq-icon i { font-size: 1rem; }
.faq-title { font-size: .8rem; }
.faq-desc { font-size: .7rem; padding: 3px 8px; }
.faq-body { padding: 14px; font-size: .85rem; line-height: 1.6; }
.faq-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; font-size: .75rem; }
}
/* ==========================================================================
13. SPLASH SCREEN
Tampilan splash statis; tidak menggunakan ticker animation atau hover effect.
Penggunaan: class="splash-modal", class="splash-card", class="splash-banner"
========================================================================== */
.splash-modal {
background: var(--ui-bg-gradient, var(--ui-gradient-dark));
color: #fff;
border: 1px solid var(--ui-theme-border, var(--ui-border-light));
}
.splash-header {
padding: 18px 22px;
background: rgba(10, 10, 10, .55);
border-bottom: 1px solid #475569;
}
.splash-header img { display: block; max-width: 100%; height: auto; }
.splash-header-title { color: #f4c542; }
.splash-header-subtitle { color: #cbd5e1; letter-spacing: .5px; }
.splash-body {
background: rgba(10, 10, 10, .55);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.splash-body::-webkit-scrollbar { width: 6px; }
.splash-body::-webkit-scrollbar-thumb { border-radius: 4px; background: #cbd5e1; }
.splash-footer {
background: #fff;
border-top: 1px solid #cbd5e1;
}
.splash-card {
position: relative;
overflow: hidden;
background: rgba(240, 240, 250, .95);
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-lg);
}
.splash-card-header {
padding: 12px 18px;
background: #f8fafc;
border-bottom: 1px solid #cbd5e1;
font-size: .8rem;
font-weight: 700;
font-family: var(--ui-font-subtitle);
letter-spacing: .8px;
text-transform: uppercase;
color: inherit;
}
.splash-card-body {
padding: 18px;
color: #334155;
background: #fff;
}
.splash-card-body strong { color: #0f172a; }
.splash-card-body p { margin-bottom: 1rem; }
.splash-banner {
position: relative;
overflow: hidden;
border: 1px solid var(--ui-border-dark);
border-radius: var(--ui-radius-lg);
}
.splash-banner img { width: 100%; display: block; }
.splash-banner-content {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
z-index: 2;
}
.splash-btn {
border: 1px solid #a67c15;
color: #1e293b;
font-weight: 700;
border-radius: var(--ui-radius-md);
background: #f4c542;
}
.splash-btn:hover { background: #e8b92f; border-color: #8f6810; color: #1e293b; }
.splash-ticker {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.splash-ticker::-webkit-scrollbar { display: none; }
.splash-ticker-track { display: inline-block; color: #b8860b; font-weight: 600; }
.splash-video {
overflow: hidden;
border: 1px solid var(--ui-border-dark);
border-radius: var(--ui-radius-lg);
}
.splash-news-item { padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.splash-news-item:last-child { border-bottom: 0; }
.splash-news-title { font-weight: 600; color: #1e293b; }
.splash-news-desc { color: #64748b; font-size: .9rem; }
@media (max-width: 640px) {
.splash-header { padding: 14px; }
.splash-card { border-radius: var(--ui-radius-md); }
.splash-card-header { padding: 10px 14px; }
.splash-card-body { padding: 14px; }
.splash-banner,
.splash-video { border-radius: var(--ui-radius-md); }
}
/* ==========================================================================
14. USER WIDGET
Widget profil memakai gradient + border; efek glass, blur dan shadow dihapus.
Penggunaan: class="widget-user user-surface", class="user-action-btn"
========================================================================== */
.widget-user {
position: relative;
width: 40%;
min-height: 150px;
margin-left: auto;
padding: 8px;
display: flex;
align-items: stretch;
gap: 8px;
overflow: hidden;
border-radius: var(--ui-radius-lg);
border: 1px solid rgba(220, 190, 120, .55);
}
/* ---- USER SURFACE
Pengganti nama lama .user-glass karena tidak lagi memakai glass/blur.
Penggunaan: class="widget-user user-surface"
-------------------------------------------------------------------------- */
.user-surface {
background: linear-gradient(145deg, rgba(40, 35, 55, .96), rgba(20, 20, 30, .98));
color: var(--ui-text-light);
}
.widget-user-left {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.user-header { display: flex; align-items: center; gap: 8px; }
.user-avatar {
width: 58px;
height: 58px;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 220, 140, .15);
border: 1px solid rgba(255, 220, 140, .55);
border-radius: var(--ui-radius-md);
}
.user-avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.user-title {
margin: 0;
font-size: 1.15rem;
letter-spacing: 2px;
color: rgb(250, 200, 100);
font-family: var(--ui-font-title);
}
.user-label {
display: block;
margin-top: 4px;
font-size: .75rem;
font-weight: 400;
color: rgba(220, 220, 220, .95);
font-family: var(--ui-font-body);
}
.user-desc {
margin-top: 0;
color: rgba(220, 220, 220, .95);
font-family: var(--ui-font-help);
}
.user-body { margin-top: 4px; }
/* ---- USER STATS
Pengganti styling lama terhadap utility Bootstrap .p-2.
Penggunaan: class="user-stats"
-------------------------------------------------------------------------- */
.user-stats {
display: flex;
flex-direction: column;
gap: 10px;
}
.user-stat {
display: flex;
align-items: center;
gap: 4px;
padding: 6px;
border: 1px solid rgba(250, 250, 250, .18);
border-radius: var(--ui-radius-md);
background: rgba(250, 250, 250, .05);
}
.user-stat i {
padding-right: 10px;
font-size: 1.5rem;
color: rgb(220, 190, 100);
}
.user-stat-label {
font-size: .75rem;
text-transform: uppercase;
color: rgba(250, 250, 250, .90);
}
.user-stat-value {
padding-left: 10px;
color: rgb(240, 240, 250);
font-size: .8rem;
font-weight: 400;
font-family: var(--ui-font-body);
}
.widget-user-right {
width: 160px;
flex-shrink: 0;
}
.user-actions {
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ---- USER ACTION BUTTON
Modifier khusus tombol Bootstrap pada User Widget.
Penggunaan: class="btn user-action-btn"
-------------------------------------------------------------------------- */
.user-action-btn {
flex: 1;
min-height: 58px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
text-decoration: none;
color: rgb(240, 240, 250);
background: rgba(80, 70, 140, .25);
border: 1px solid rgba(250, 220, 220, .70);
border-radius: var(--ui-radius-lg);
}
.user-action-btn:hover {
background: rgba(100, 90, 160, .35);
color: #fff;
border-color: rgba(250, 220, 220, .90);
}
.user-action-btn i { font-size: 1.2rem; color: inherit; }
.user-action-btn span { font-size: .9rem; font-family: var(--ui-font-body); text-transform: capitalize; color: inherit; }
@media (max-width: 640px) {
.widget-user {
width: 100%;
margin-left: 0;
flex-direction: row;
min-height: 180px;
}
.widget-user-right { width: 120px; display: flex; }
.user-actions { width: 100%; gap: 8px; }
.user-action-btn { min-height: 52px; padding: 0; }
.user-action-btn span { font-size: .75rem; }
.user-action-btn i { margin: 0; font-size: 1.4rem; }
.user-title { font-size: .95rem; }
.user-label { font-size: .7rem; }
}
/* ==========================================================================
15. NETWORK / BINARY TREE
Tree memakai garis dan border; responsive menggunakan horizontal scroll.
Penggunaan: class="network-wrapper", id="network-container", class="binary-tree"
========================================================================== */
.network-wrapper {
padding: 1px;
background: rgba(0, 0, 0, .01);
}
.network-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 4px;
background: rgba(0, 0, 0, .01);
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.network-scroll::-webkit-scrollbar { height: 6px; }
.network-scroll::-webkit-scrollbar-track { background: transparent; }
.network-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
#network-container {
width: max-content;
min-width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.binary-tree {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.binary-children {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
position: relative;
padding-top: 8px;
gap: 12px;
}
.binary-node {
position: relative;
padding-top: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.binary-tree::after,
.binary-node::before {
content: "";
position: absolute;
left: 50%;
width: 2px;
height: 24px;
background: #191a19;
z-index: 1;
}
.binary-tree::after { bottom: auto; }
.binary-node::before { top: 0; }
.binary-tree:not(:has(.binary-children))::after { display: none; }
.binary-children > .binary-node:only-child::before { display: none; }
.binary-children::before {
content: "";
position: absolute;
top: 8px;
left: 25%;
right: 25%;
height: 2px;
background: #191a19;
z-index: 1;
}
/* ==========================================================================
16. MEMBER CARD
Card node jaringan custom; modifier border tidak memakai utility Bootstrap.
Penggunaan: class="member-card member-border-primary"
========================================================================== */
.member-card {
position: relative;
z-index: 2;
width: 160px;
min-width: 160px;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
background: rgba(250, 250, 250, .98);
border: 1px solid rgba(0, 0, 0, .22);
border-radius: var(--ui-radius-lg);
text-align: center;
}
.member-header {
padding: 12px 12px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.member-icon { display: flex; align-items: center; justify-content: center; order: 2; }
.member-avatar { width: 32px; height: 32px; border-radius: var(--ui-radius-md); object-fit: cover; display: block; }
.member-caption {
order: 1;
margin-top: 2px;
font-size: .75rem;
font-weight: 600;
font-family: var(--ui-font-subtitle);
text-transform: uppercase;
color: #495057;
}
.member-body {
padding: 4px 12px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.member-title {
margin: 0;
line-height: 1.05;
font-size: .9rem;
font-weight: 500;
font-family: var(--ui-font-body);
text-transform: uppercase;
color: #0f2942;
overflow-wrap: anywhere;
}
.member-subtitle {
display: block;
margin-top: 8px;
line-height: 1.1;
font-size: .75rem;
font-weight: 400;
font-family: var(--ui-font-body);
text-transform: capitalize;
color: #64748b;
}
.member-footer {
padding: 8px 6px;
border-top: 1px solid rgba(0, 0, 0, .18);
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.member-footer-kiri,
.member-footer-tengah,
.member-footer-kanan {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.member-border-purple { border-top: 4px solid #7048e8; }
.member-border-danger { border-top: 4px solid #dc2626; }
.member-border-primary { border-top: 4px solid #1c7ed6; }
.member-border-warning { border-top: 4px solid #f08c00; }
.member-border-success { border-top: 4px solid #5c940d; }
.member-border-dark { border-top: 4px solid #495057; }
.member-border-info { border-top: 4px solid #0c8599; }
.member-border-secondary { border-top: 4px solid #adb5bd; }
/* ==========================================================================
17. FINTECH COMPONENTS
Komponen finansial custom memakai border, tanpa shadow dan transition.
Penggunaan: class="fintech-bonus-card fintech-tier-gold" atau class="fin-card"
========================================================================== */
.fintech-bonus-card {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-lg);
}
.fintech-bonus-header {
padding: 14px 14px 4px;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.fintech-tier-badge {
padding: 3px 8px;
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-sm);
background: #f1f5f9;
color: #334155;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.fintech-date-label { font-size: .75rem; font-weight: 500; color: #64748b; }
.fintech-bonus-body {
padding: 16px 14px;
text-align: center;
flex: 1;
background: #fff;
}
.fintech-bonus-body small {
display: block;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: .05em;
}
.fintech-amount-title { margin: 0; font-size: .8rem; font-weight: 500; color: #252f46; line-height: 1.2; }
.fintech-amount-currency { margin-right: 3px; font-size: .9rem; font-weight: 600; color: #252f46; }
.fintech-bonus-footer {
display: flex;
align-items: center;
background: #fff;
border-top: 1px solid #cbd5e1;
}
.fintech-footer-col {
flex: 1;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.fintech-footer-col:first-child { border-right: 1px solid #cbd5e1; }
.fintech-side-label { margin-bottom: 2px; font-size: .7rem; font-weight: 600; color: #64748b; letter-spacing: .04em; }
.fintech-side-value { font-size: .85rem; font-weight: 700; color: #0f172a; }
.fintech-tier-royal { border-top: 4px solid #000; }
.fintech-tier-prime { border-top: 4px solid #7048e8; }
.fintech-tier-elite { border-top: 4px solid #1c7ed6; }
.fintech-tier-gold { border-top: 4px solid #f08c00; }
.fintech-tier-upgrade { border-top: 4px solid #5c940d; }
.fintech-tier-silver { border-top: 4px solid #495057; }
.fintech-tier-hemat { border-top: 4px solid #0c8599; }
.fintech-tier-none { border-top: 4px solid #adb5bd; }
.fin-card {
padding: 24px;
background: #fff;
color: #334155;
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-lg);
font-family: var(--ui-font-body);
}
.fin-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
margin-bottom: 24px;
border-bottom: 1px solid #cbd5e1;
}
.fin-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #475569; }
.fin-date {
padding: 4px 10px;
border: 1px solid #cbd5e1;
border-radius: 20px;
background: #f8fafc;
color: #64748b;
font-size: .75rem;
font-weight: 600;
}
.fin-total-wrap { text-align: center; margin-bottom: 24px; }
.fin-total-label { display: block; margin-bottom: 8px; font-size: .75rem; text-transform: uppercase; color: #64748b; letter-spacing: 1px; font-weight: 600; }
.fin-total-amount { margin: 0; font-size: 2.25rem; font-weight: 800; color: #0f172a; line-height: 1; }
.fin-alert {
display: flex;
align-items: center;
padding: 14px 16px;
margin-bottom: 24px;
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-md);
font-size: .8rem;
line-height: 1.5;
}
.fin-alert i { margin-right: 12px; font-size: 1.25rem; }
.fin-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-req-box {
padding: 16px;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-md);
text-align: center;
}
.fin-req-box.is-success { background: #f0fdf4; border-color: #86efac; }
.fin-req-label { display: block; margin-bottom: 10px; font-size: .75rem; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: .5px; }
.fin-req-badge {
display: inline-block;
padding: 6px 14px;
border: 1px solid #cbd5e1;
border-radius: 20px;
background: #e2e8f0;
color: #475569;
font-size: .75rem;
font-weight: 600;
}
.fin-req-badge.is-success { background: #22c55e; color: #fff; border-color: #15803d; }
@media (max-width: 640px) {
.fin-card { padding: 16px; }
.fin-header { gap: 8px; margin-bottom: 18px; }
.fin-total-amount { font-size: 1.8rem; }
.fin-req-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* ==========================================================================
18. LOADING
Loading statis tanpa spinner animation, pulse, dots atau glow.
Penggunaan: class="ui-loading ui-loading-primary"
========================================================================== */
.ui-loading {
position: relative;
width: 100%;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
overflow: hidden;
background: var(--ui-gradient-dark);
color: var(--ui-text-light);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-lg);
}
.ui-loading-spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(250, 250, 250, .70);
border-top-color: #d4af37;
}
.ui-loading-text {
font-size: .8rem;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: rgba(250, 250, 250, .85);
}
.ui-loading-sm { padding: 14px; gap: 8px; }
.ui-loading-sm .ui-loading-spinner { width: 32px; height: 32px; }
.ui-loading-lg { padding: 40px 24px; }
.ui-loading-lg .ui-loading-spinner { width: 58px; height: 58px; }
.ui-loading-lg .ui-loading-text { font-size: .95rem; }
.ui-loading-warning .ui-loading-spinner { border-top-color: #ffc107; }
.ui-loading-success .ui-loading-spinner { border-top-color: #20c997; }
.ui-loading-danger .ui-loading-spinner { border-top-color: #ff4d6d; }
.ui-loading-primary .ui-loading-spinner { border-top-color: #4d8dff; }
@media (max-width: 640px) {
.ui-loading { border-radius: var(--ui-radius-md); padding: 18px 14px; }
.ui-loading-spinner { width: 34px; height: 34px; }
.ui-loading-text { font-size: .75rem; }
}
/* ==========================================================================
19. FLOATING NOTIFICATION
Notification tampil langsung tanpa slide, scale, progress animation atau shadow.
Penggunaan: id="notif-container" dan class="notif-card bg-oceans"
========================================================================== */
#notif-container {
position: fixed;
right: 20px;
bottom: 5px;
z-index: 999;
width: 50%;
max-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.notif-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px;
overflow: hidden;
background: var(--ui-bg-gradient, #fff);
color: var(--ui-theme-text, var(--ui-text-dark));
border: 1px solid var(--ui-theme-border, var(--ui-border-dark));
border-radius: var(--ui-radius-md);
pointer-events: auto;
}
#notif-container::after {
content: "";
display: block;
min-height: 80px;
flex-shrink: 0;
}
.notif-icon {
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid currentColor;
}
.notif-icon i { font-size: 1.6rem; line-height: 1; color: inherit; }
.notif-body {
position: relative;
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
.notif-title {
padding-right: 90px;
font-size: .95rem;
font-weight: 500;
line-height: 1.2;
font-family: var(--ui-font-title);
color: inherit;
}
.notif-desc {
position: absolute;
top: 0;
right: 0;
white-space: nowrap;
font-size: .8rem;
font-weight: 400;
line-height: 1.2;
font-family: var(--ui-font-help);
color: inherit;
text-align: right;
}
.notif-subtitle {
margin-top: 5px;
padding: 4px 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: .9rem;
font-weight: 400;
line-height: 1.3;
color: inherit;
font-family: var(--ui-font-body);
}
/* Progress lama diubah menjadi garis statis opsional. */
.notif-progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: currentColor;
opacity: .45;
}
@media (max-width: 640px) {
#notif-container { right: 12px; bottom: 50px; width: calc(100% - 24px); }
.notif-icon { width: 42px; height: 42px; min-width: 42px; }
.notif-icon i { font-size: 1.4rem; }
.notif-title { padding-right: 72px; font-size: .85rem; }
.notif-desc { font-size: .75rem; }
.notif-subtitle { font-size: .8rem; }
}
/* ==========================================================================
20. PORTAL OVERLAY
Overlay pembuka tanpa transition.
Penggunaan: id="portal-overlay"
========================================================================== */
#portal-overlay {
position: fixed;
inset: 0;
z-index: 99999;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
}
/* ==========================================================================
21. CERTIFICATE
Nama class dibuat spesifik agar tidak memakai .title/.nama/.bonus generik.
Penggunaan: class="sertifikat", class="cert-title", class="cert-name"
========================================================================== */
.sertifikat {
position: relative;
width: 840px;
max-width: 100%;
height: 100%;
aspect-ratio: 840 / 560;
margin: .7rem auto;
padding: 1rem 1rem 1.5rem;
overflow: hidden;
box-sizing: border-box;
background: #fff url("../layouts/img/bg_sertifikat.webp") no-repeat center;
background-size: cover;
border: 1px solid rgba(0, 0, 0, .20);
border-radius: var(--ui-radius-xl);
text-align: center;
}
.cert-logo {
position: absolute;
top: 2rem;
right: 2rem;
width: clamp(50px, 8vw, 80px);
height: auto;
}
.cert-tag {
margin-bottom: .8rem;
font-family: var(--ui-font-title);
font-size: clamp(16px, 1.2vw, 20px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .15em;
color: #866f23;
}
.cert-title {
font-size: clamp(16px, 2.5vw, 28px);
font-family: var(--ui-font-title);
font-weight: 500;
letter-spacing: -.02em;
color: #866f23;
text-transform: uppercase;
line-height: 1.2;
}
.cert-name,
.cert-noid,
.cert-bonus {
background: linear-gradient(50deg, #145a5a 0%, #1478a0 45%, #3278fa 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.cert-name {
margin-top: .8rem;
margin-bottom: .2rem;
font-size: clamp(24px, 4.5vw, 36px);
font-family: var(--ui-font-title);
font-weight: 500;
text-transform: uppercase;
letter-spacing: -.01em;
}
.cert-noid {
font-size: clamp(22px, 4.2vw, 32px);
font-family: var(--ui-font-body);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .05em;
}
.cert-message {
max-width: 520px;
margin: 1.5rem auto;
font-size: clamp(14px, 2vw, 20px);
font-family: var(--ui-font-caption);
color: #5c5b5a;
line-height: 1.8;
}
.cert-bonus {
margin-top: 1.8rem;
font-size: clamp(18px, 4.5vw, 42px);
font-family: var(--ui-font-body);
font-weight: 600;
letter-spacing: -.03em;
}
@media (max-width: 640px) {
.sertifikat { padding: .5rem; aspect-ratio: auto; }
.cert-logo { top: 1rem; right: 1rem; }
.cert-message { margin: 1rem auto; }
}
/* ==========================================================================
22. LOGOUT MODAL EXTENSION
Tambahkan class custom pada elemen Bootstrap; selector .modal tidak dioverride.
Penggunaan: class="modal-content logout-panel", class="btn logout-btn-danger"
========================================================================== */
.logout-panel {
overflow: hidden;
background: rgba(255, 255, 255, .99);
border: 1px solid #cbd5e1;
border-radius: var(--ui-radius-xl);
}
.logout-status-danger { background: rgba(220, 53, 69, .12); border: 1px solid rgba(220, 53, 69, .30); }
.logout-status-success { background: rgba(25, 135, 84, .12); border: 1px solid rgba(25, 135, 84, .30); }
.logout-btn-danger {
background: linear-gradient(135deg, #dc3545, #b02a37);
color: #fff;
border: 1px solid #842029;
box-shadow: 0 2px 4px rgba(132, 32, 41, .22);
}
.logout-btn-danger:hover {
background: #b02a37;
color: #fff;
border-color: #6f1b24;
}
.logout-btn-light {
background: #fff;
color: #334155;
border: 1px solid #cbd5e1;
}
.logout-btn-light:hover {
background: #f1f5f9;
color: #1e293b;
border-color: #94a3b8;
}
/* ==========================================================================
23. ACCESSIBILITY / FINAL
Focus memakai outline, bukan shadow atau animasi.
========================================================================== */
.shortcut-item > a:focus-visible,
.shortcut-popup a:focus-visible,
.navigasi-btn:focus-visible,
.navigasi-btn-icon:focus-visible,
.navigasi-btn-menu:focus-visible,
.navigasi-dropdown-item:focus-visible,
.pod-btn:focus-visible,
.user-action-btn:focus-visible,
.splash-btn:focus-visible,
.logout-btn-danger:focus-visible,
.logout-btn-light:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* ==========================================================================
24. AUTH LOGIN PORTAL
Layout login full-screen dengan navbar full width, hero dominan, dan form kecil.
Penggunaan: class="s58-login-page"
========================================================================== */
.s58-login-page {
--s58-auth-navy: #061624;
--s58-auth-navy-2: #0a1d2d;
--s58-auth-panel: rgba(4, 18, 29, .94);
--s58-auth-gold: #d6a740;
--s58-auth-gold-light: #f3cf74;
--s58-auth-white: #f7f8f8;
--s58-auth-muted: #c4ccd2;
--s58-auth-line: rgba(230, 192, 101, .42);
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
background:
linear-gradient(
90deg,
rgba(2, 14, 23, .72) 0%,
rgba(2, 14, 23, .46) 42%,
rgba(2, 14, 23, .20) 72%,
rgba(2, 14, 23, .16) 100%
),
linear-gradient(
0deg,
rgba(2, 11, 18, .50),
rgba(2, 11, 18, .02) 55%
),
url('../layouts/img/authlogin_bg.webp')
center center / cover no-repeat;
color: var(--s58-auth-white);
font-family: var(--ui-font-body);
}
.s58-login-page,
.s58-login-page *,
.s58-login-page *::before,
.s58-login-page *::after {
animation: none !important;
transition: none !important;
}
.s58-login-page a {
text-decoration: none;
}
.s58-login-page button {
box-shadow: none !important;
}
.s58-login-page a:focus-visible,
.s58-login-page button:focus-visible,
.s58-login-page input:focus-visible {
outline: 2px solid var(--s58-auth-gold-light) !important;
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
NAVBAR FULL WIDTH
Background navbar memenuhi lebar viewport; isi tetap terkontrol di tengah.
Penggunaan: class="s58-auth-navbar"
-------------------------------------------------------------------------- */
.s58-auth-navbar-wrap {
width: 100%;
padding: 0;
position: relative;
z-index: 10;
}
.s58-auth-navbar {
width: 100%;
min-height: 72px;
margin: 0;
padding: 8px 24px;
background: rgba(3, 18, 29, .94) !important;
border: 0;
border-bottom: 1px solid rgba(232, 198, 119, .32);
border-radius: 0;
}
.s58-auth-navbar-container {
width: min(100%, 1500px);
margin: 0 auto;
padding: 0 !important;
}
.s58-auth-brand {
width: 180px;
margin: 0 26px 0 0;
padding: 0;
}
.s58-auth-brand img {
display: block;
width: 100%;
height: auto;
}
.s58-auth-navbar .navbar-nav {
gap: 18px;
}
.s58-auth-navbar .nav-link {
position: relative;
padding: 12px 11px !important;
color: #f1f3f4 !important;
font-size: .88rem;
font-weight: 600;
}
.s58-auth-navbar .nav-link:hover,
.s58-auth-navbar .nav-link:focus,
.s58-auth-navbar .nav-link.active {
color: var(--s58-auth-gold-light) !important;
}
.s58-auth-navbar .nav-link.active::after {
content: '';
position: absolute;
right: 11px;
bottom: 2px;
left: 11px;
height: 2px;
background: var(--s58-auth-gold);
}
.s58-auth-navbar-right {
display: flex;
align-items: center;
gap: 10px;
color: #ececec;
font-size: .88rem;
white-space: nowrap;
}
.s58-auth-trust {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 16px;
border-left: 1px solid rgba(255, 255, 255, .22);
}
.s58-auth-trust i {
color: var(--s58-auth-gold-light);
font-size: 1.18rem;
}
.s58-auth-audio,
.s58-auth-toggler {
width: 40px;
height: 40px;
min-width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
border: 1px solid rgba(232, 198, 119, .32) !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, .04) !important;
color: var(--s58-auth-gold-light) !important;
}
.s58-auth-toggler {
font-size: 1.3rem;
}
.s58-auth-navbar .collapsing {
height: auto !important;
transition: none !important;
}
/* --------------------------------------------------------------------------
HERO GRID
Hero kiri dibuat dominan; form login kecil ditempatkan di kanan bawah.
Penggunaan: class="s58-auth-main"
-------------------------------------------------------------------------- */
.s58-auth-main {
width: min(100%, 1500px);
min-height: calc(100vh - 136px);
flex: 1;
margin: 0 auto;
padding: 34px 54px 38px;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(50px, 8vw, 130px);
position: relative;
z-index: 2;
}
.s58-auth-hero {
max-width: 820px;
align-self: center;
padding: 0 0 16px;
}
.s58-auth-kicker {
display: block;
margin-bottom: 20px;
color: var(--s58-auth-white);
font-family: var(--ui-font-caption);
font-size: clamp(1.8rem, 2.5vw, 2.7rem);
font-weight: 300;
line-height: 0.7;
}
.s58-auth-title {
margin: 0;
/* 1. Apply the gradient to the background */
background: linear-gradient(
50deg,
rgba(255, 255, 255, 1) 0%, /* Putih terang (Cahaya/Glare) */
rgba(225, 230, 235, 1) 70%, /* Batas akhir area metalik */
rgba(255, 215, 0, 1) 80%, /* Transisi ke Emas (Gold) */
rgba(255, 69, 0, 1) 100% /* Oranye kemerahan (Sunrise) */
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--ui-font-subtitle);
font-size: clamp(5rem, 8.5vw, 8.7rem);
font-weight: 700;
letter-spacing: -.06em;
line-height: .90;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .22));
}
.s58-auth-title span {
background: linear-gradient(
180deg,
#fff0b4 0%,
#e8bd55 52%,
#bd7e19 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.s58-auth-tagline {
max-width: 680px;
margin: 0;
color: var(--s58-auth-gold);
font-family: var(--ui-font-help);
font-size: clamp(1.08rem, 1.5vw, 1.2rem);
font-weight: 500;
}
.s58-auth-divider {
width: 62px;
height: 2px;
margin: 10px 0 28px;
background: var(--ui-gradient-luxury);
}
.s58-auth-copy {
max-width: 590px;
margin: 0;
color: #e3e8eb;
font-size: .96rem;
line-height: 1.65;
}
.s58-auth-features {
max-width: 610px;
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.s58-auth-feature {
min-width: 0;
color: #fff;
}
.s58-auth-feature-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
margin-bottom: 4px;
padding: 0;
overflow: hidden;
background: rgba(6, 23, 34, .72);
border: 1px solid rgba(226, 179, 75, .78);
border-radius: 10px;
color: var(--s58-auth-gold-light);
}
.s58-auth-feature-icon img {
display: block;
width: 30px;
height: 30px;
max-width: none;
margin: 10px;
padding: 0;
object-fit: contain;
object-position: center;
}
.s58-auth-feature strong,
.s58-auth-feature span {
display: block;
}
.s58-auth-feature strong {
margin-bottom: 2px;
font-size: .9rem;
}
.s58-auth-feature span {
max-width: 155px;
color: #d8dfe3;
font-size: .74rem;
line-height: 1.38;
}
/* --------------------------------------------------------------------------
FORM LOGIN KECIL
Form login langsung tanpa modal dan tetap berada di kanan bawah desktop.
Penggunaan: class="s58-auth-card"
-------------------------------------------------------------------------- */
.s58-auth-card {
width: 100%;
max-width: 340px;
align-self: center;
justify-self: end;
padding: 40px 20px 18px;
position: relative;
background: rgba(10, 10, 10, .85);
border: 1px solid rgba(225, 177, 66, .55);
border-radius: 12px;
color: #fff;
}
.s58-auth-lock {
position: absolute;
top: -26px;
left: 50%;
width: 52px;
height: 52px;
display: grid;
place-items: center;
transform: translateX(-50%);
background: #081d2b;
border: 1px solid var(--s58-auth-gold);
border-radius: 50%;
color: var(--s58-auth-gold-light);
font-size: 1.2rem;
}
.s58-auth-lock::before,
.s58-auth-lock::after {
content: '';
position: absolute;
top: 50%;
width: 28px;
height: 1px;
background: var(--s58-auth-gold);
}
.s58-auth-lock::before {
right: calc(100% + 1px);
}
.s58-auth-lock::after {
left: calc(100% + 1px);
}
.s58-auth-card-head {
text-align: center;
}
.s58-auth-card-title {
margin: 0;
color: #fff;
font-size: 1.05rem;
font-weight: 700;
}
.s58-auth-card-copy {
margin: 5px 0 14px;
color: var(--s58-auth-muted);
font-size: .75rem;
}
.s58-auth-alert {
margin-bottom: 10px;
padding: 8px 10px;
display: flex;
align-items: flex-start;
gap: 7px;
background: rgba(140, 34, 34, .28);
border: 1px solid rgba(255, 120, 120, .42);
border-radius: 7px;
color: #ffd8d8;
font-size: .72rem;
line-height: 1.35;
}
.s58-auth-alert i {
flex: 0 0 auto;
margin-top: 1px;
font-size: .95rem;
}
.s58-auth-form {
margin: 0;
}
.s58-auth-field {
width: 100%;
min-height: 46px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 11px;
background: rgba(255, 255, 255, .025);
border: 1px solid rgba(219, 227, 232, .28);
border-radius: 7px;
}
.s58-auth-field > i {
flex: 0 0 auto;
color: #c8d0d5;
font-size: 1.02rem;
}
.s58-auth-field input {
width: 100%;
min-width: 0;
height: 44px;
padding: 0;
background: transparent;
border: 0;
outline: 0;
color: #fff;
font-family: var(--ui-font-body);
font-size: .8rem;
}
.s58-auth-field input::placeholder {
color: #aeb8be;
opacity: 1;
}
#noid_login {
text-transform: uppercase;
}
.s58-auth-password-toggle {
width: 30px;
height: 30px;
min-width: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: #9ca7ad !important;
font-size: 1rem;
}
.s58-auth-options {
min-height: 28px;
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.s58-auth-remember {
display: inline-flex;
align-items: center;
gap: 6px;
color: #d3d8dc;
font-size: .72rem;
}
.s58-auth-check {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e0b04d;
border-radius: 3px;
background: #efc45f;
color: #111;
font-size: .62rem;
}
.s58-auth-forgot {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--s58-auth-gold-light) !important;
font-size: .72rem;
}
.s58-auth-submit {
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px !important;
background: linear-gradient(
90deg,
#f1cc70 0%,
#d99b2f 100%
) !important;
border: 1px solid #e3b753 !important;
border-radius: 7px !important;
color: #121a1e !important;
font-size: .84rem;
font-weight: 800;
}
.s58-auth-submit i:last-child {
margin-left: auto;
font-size: 1.1rem;
}
.s58-auth-security {
margin-top: 12px;
padding-top: 11px;
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid rgba(255, 255, 255, .12);
color: #bac4ca;
}
.s58-auth-security i {
color: var(--s58-auth-gold-light);
font-size: 1.15rem;
}
.s58-auth-security span {
display: block;
font-size: .66rem;
line-height: 1.38;
}
/* --------------------------------------------------------------------------
FOOTER
Footer tipis agar halaman tetap terasa satu layar.
Penggunaan: class="s58-auth-footer"
-------------------------------------------------------------------------- */
.s58-auth-footer {
width: 100%;
padding: 0;
position: relative;
z-index: 3;
background: rgba(3, 17, 27, .88);
border-top: 1px solid rgba(226, 179, 75, .24);
}
.s58-auth-footer-inner {
width: min(100%, 1500px);
min-height: 64px;
margin: 0 auto;
padding: 10px 28px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
color: #d2d8dc;
font-size: .72rem;
}
.s58-auth-footer-links {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.s58-auth-footer a {
color: #d2d8dc;
}
.s58-auth-footer-help {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
.s58-auth-footer-help i,
.s58-auth-footer-help button {
color: var(--s58-auth-gold-light) !important;
}
/* ==========================================================================
25. AUTH LOGIN RESPONSIVE
Responsive dibagi Mobile <=640, Tablet 641-1280, dan Large >1280.
========================================================================== */
@media (min-width: 1281px) {
.s58-auth-main {
min-height: calc(100vh - 136px);
}
}
@media (min-width: 641px) and (max-width: 1280px) {
.s58-login-page {
background:
linear-gradient(
90deg,
rgba(2, 14, 23, .72) 0%,
rgba(2, 14, 23, .42) 48%,
rgba(2, 14, 23, .22) 100%
),
url('../layouts/img/authlogin_bg_tablet.webp')
center center / cover no-repeat;
}
.s58-auth-navbar {
min-height: 50px;
padding: 8px 18px;
}
.s58-auth-navbar-container {
width: 100%;
}
.s58-auth-brand {
width: 158px;
}
.s58-auth-navbar .navbar-nav {
gap: 5px;
}
.s58-auth-navbar .nav-link {
padding: 10px 7px !important;
font-size: .8rem;
}
.s58-auth-main {
min-height: calc(50vh - 80px);
padding: 34px 32px 30px;
grid-template-columns: minmax(0, 1fr) 315px;
gap: 42px;
}
.s58-auth-title {
font-size: clamp(4.6rem, 8vw, 6.7rem);
}
.s58-auth-tagline {
font-size: 1rem;
}
.s58-auth-features {
gap: 12px;
}
.s58-auth-card {
max-width: 315px;
padding: 38px 18px 16px;
}
.s58-auth-footer-inner {
grid-template-columns: 1fr auto;
}
.s58-auth-footer-help {
display: none;
}
}
@media (min-width: 641px) and (max-width: 1280px) {
.s58-auth-navbar .navbar-collapse {
margin-top: 8px;
padding: 10px 0 6px;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.s58-auth-navbar .navbar-nav {
gap: 0;
}
.s58-auth-navbar .nav-link {
padding: 8px 0 !important;
}
.s58-auth-navbar .nav-link.active::after {
right: auto;
bottom: 3px;
left: 0;
width: 30px;
}
.s58-auth-navbar-right {
padding-top: 7px;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.s58-login-page {
min-height: 100vh;
background:
linear-gradient(
0deg,
rgba(2, 14, 23, .72),
rgba(2, 14, 23, .32)
),
url('../layouts/img/authlogin_bg_mobile.webp')
52% center / cover no-repeat;
}
.s58-auth-navbar {
min-height: 58px;
padding: 7px 12px;
}
.s58-auth-brand {
width: 132px;
margin-right: 10px;
}
.s58-auth-trust {
padding-left: 0;
border-left: 0;
}
.s58-auth-main {
min-height: auto;
padding: 42px 16px 24px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 42px;
}
.s58-auth-hero {
padding: 0;
}
.s58-auth-kicker {
font-size: 1.35rem;
}
.s58-auth-title {
font-size: clamp(3.8rem, 19vw, 5rem);
}
.s58-auth-tagline {
margin-top: 14px;
font-size: .92rem;
}
.s58-auth-divider {
margin: 20px 0 16px;
}
.s58-auth-copy {
font-size: .85rem;
}
.s58-auth-features {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
margin-top: 22px;
}
.s58-auth-feature {
text-align: center;
}
.s58-auth-feature-icon {
width: 48px;
height: 48px;
margin: 0 auto 7px;
}
.s58-auth-feature-icon img {
width: 27px;
height: 27px;
}
.s58-auth-feature strong {
font-size: .76rem;
}
.s58-auth-feature span {
margin: 0 auto;
font-size: .64rem;
}
.s58-auth-card {
width: min(100%, 340px);
max-width: 340px;
align-self: center;
padding: 38px 16px 16px;
}
.s58-auth-lock {
width: 50px;
height: 50px;
top: -25px;
}
.s58-auth-footer-inner {
min-height: 0;
padding: 12px 14px;
grid-template-columns: 1fr;
justify-items: center;
gap: 7px;
text-align: center;
}
.s58-auth-footer-links {
gap: 12px;
flex-wrap: wrap;
}
.s58-auth-footer-help {
display: none;
}
}
/* ==========================================================================
26. RUNTIME UI FIX
Memastikan Bootstrap modal selalu berada di atas backdrop, sidebar bergerak
tanpa efek berat, dan halaman 404 tampil profesional.
Penggunaan: otomatis pada shell privat SUKSES58.
========================================================================== */
/* --------------------------------------------------------------------------
MODAL STACKING
Modal yang dipindahkan langsung ke body tidak lagi terjebak stacking context
#pages/content-page. Backdrop selalu berada di bawah modal.
-------------------------------------------------------------------------- */
body > .modal,
body > #s58ModalHost > .modal {
z-index: 1085 !important;
}
.modal-backdrop {
z-index: 1080 !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.modal.show {
display: block !important;
}
.modal-dialog,
.modal-content {
opacity: 1 !important;
visibility: visible !important;
}
#s58ModalHost {
position: static !important;
z-index: auto !important;
}
#s58ModalLoader {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 23, 42, .42);
}
#s58ModalLoader.show {
display: flex;
}
.s58-modal-loader-card {
width: min(320px, calc(100vw - 40px));
padding: 18px 20px;
background: #ffffff;
border: 1px solid #d7dde7;
border-radius: 14px;
text-align: center;
color: #1f2937;
}
.s58-modal-loader-card i {
margin-right: 6px;
font-size: 1.05rem;
}
/* --------------------------------------------------------------------------
SIDENAV INSTANT
Menghilangkan transisi berat ketika tombol menu mengubah compact/condensed
atau offcanvas.
-------------------------------------------------------------------------- */
.sidenav-menu,
html[data-sidenav-size="offcanvas"] .sidenav-menu {
transition: none !important;
-webkit-transition: none !important;
}
#custom-backdrop {
transition: none !important;
animation: none !important;
}
/* --------------------------------------------------------------------------
HALAMAN 404
Fragment profesional untuk route tidak tersedia di dalam #pages.
-------------------------------------------------------------------------- */
.s58-error-page {
min-height: calc(100vh - 230px);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
}
.s58-error-card {
width: min(680px, 100%);
padding: 34px;
background: #ffffff;
border: 1px solid #d8dee8;
border-radius: 18px;
text-align: center;
}
.s58-error-code {
margin-bottom: 4px;
font-size: clamp(4rem, 10vw, 7rem);
line-height: .95;
font-weight: 900;
letter-spacing: -.05em;
color: #1e293b;
}
.s58-error-icon {
margin: 18px 0 12px;
font-size: 2.2rem;
color: #64748b;
}
.s58-error-title {
margin: 0 0 10px;
font-size: clamp(1.35rem, 3vw, 2rem);
font-weight: 800;
color: #0f172a;
}
.s58-error-desc {
max-width: 520px;
margin: 0 auto 22px;
color: #64748b;
line-height: 1.65;
}
.s58-error-desc strong {
color: #334155;
overflow-wrap: anywhere;
}
.s58-error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.s58-error-help {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid #e5e7eb;
font-size: .82rem;
color: #64748b;
}
@media (max-width: 640px) {
.s58-error-page {
min-height: calc(100vh - 180px);
padding: 20px 10px;
}
.s58-error-card {
padding: 26px 18px;
border-radius: 14px;
}
.s58-error-actions {
display: grid;
grid-template-columns: 1fr;
}
.s58-error-actions .btn {
width: 100%;
}
}
/* ==========================================================================
27. MEMBER HOME SUKSES58
Dashboard member clean-minimal dengan hero gambar, tiga sumber bonus,
dan aktivitas terbaru. Tanpa blur, animasi, atau transition.
Penggunaan: class="s58-member-home"
========================================================================== */
.s58-member-home,
.s58-member-home *,
.s58-member-home *::before,
.s58-member-home *::after {
animation: none !important;
transition: none !important;
}
.s58-member-home {
--s58-home-navy: #071827;
--s58-home-navy-2: #10283b;
--s58-home-teal: #087f86;
--s58-home-teal-dark: #075f65;
--s58-home-gold: #d6aa4d;
--s58-home-text: #071827;
--s58-home-muted: #071827;
--s58-home-line: #d7e0e7;
--s58-home-surface: #ffffff;
overflow: hidden;
margin: 0 0 18px;
border: 1px solid #dbe3e9;
border-radius: 20px;
background: #f4f8f9;
color: var(--s58-home-text);
}
.s58-member-hero {
position: relative;
overflow: hidden;
min-height: 420px;
padding: clamp(14px, 5vw, 40px);
background:
linear-gradient(
90deg,
rgba(3, 16, 27, .7) 0%,
rgba(3, 20, 32, .5) 40%,
rgba(4, 27, 38, .3) 70%,
rgba(4, 27, 38, .1) 100%
),
}
.s58-member-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(300px, 460px);
align-items: center;
gap: clamp(22px, 5vw, 42px);
width: min(100%, 1420px);
margin: 0 auto;
}
.s58-member-hero-copy {
min-width: 0;
}
.s58-member-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 7px 11px;
border: 1px solid rgba(238, 207, 132, .46);
border-radius: 999px;
background: rgba(8, 27, 39, .78);
color: #f0ce79;
font-family: var(--ui-font-help);
font-size: 0.8rem;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
}
.s58-member-eyebrow i {
font-size: 1rem;
}
.s58-member-hero h1 {
max-width: 780px;
margin: 0;
color: #f8fbfc;
font-family: var(--ui-font-title);
font-size: clamp(1.4rem, 2vw, 2rem);
font-weight: 200;
letter-spacing: -.045em;
line-height: .7;
}
.s58-member-hero h1 span {
color: rgb(240, 200, 100);
font-family: var(--ui-font-title);
font-size: clamp(2.4rem, 4vw, 4rem);
font-weight: 400;
}
.s58-member-hero-desc {
max-width: 680px;
margin: 12px 0 0;
color: #878787;
font-family: var(--ui-font-desc);
font-size: clamp(.8rem, 1.2vw, 1.2rem);
line-height: 1.2;
}
.s58-member-identity {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.s58-member-identity span {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, .20);
border-radius: 8px;
background: rgba(4, 20, 31, .68);
color: #edf4f7;
font-size: .78rem;
font-weight: 600;
}
.s58-member-balance {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(320px, .50fr);
gap: 10px;
max-width: 720px;
margin-top: 14px;
padding: 8px;
border: 0.8px solid rgba(240, 240, 240, .7);
border-radius: 12px;
background: rgba(10, 20, 30, .5);
}
.s58-member-balance > div:first-child {
min-width: 0;
}
.s58-member-balance > div:first-child > span {
display: block;
color: rgb(250, 250, 200);
font-size: .8rem;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
}
.s58-member-balance > div:first-child > strong {
display: block;
margin-top: 4px;
color: rgb(250, 250, 250);
font-family: var(--ui-font-title);
font-size: clamp(2rem, 4vw, 2.0rem);
font-weight: 600;
letter-spacing: .1em;
line-height: 1.6;
}
.s58-member-balance > div:first-child > small {
display: block;
margin-top: 10px;
color: rgb(200, 200, 240);
font-family: var(--ui-font-desc);
font-size: .6rem;
}
.s58-member-balance-side {
display: grid;
align-content: center;
gap: 8px;
border-left: 1px solid rgba(250, 250, 250, .8);
padding-left: 12px;
}
.s58-member-balance-side span {
display: block;
color: rgb(250, 250, 240);
font-family: var(--ui-font-title);
font-size: 0.8rem;
font-weight: 200;
text-transform: uppercase;
}
.s58-member-balance-side strong {
display: block;
margin-left: 16px;
color: #f0c866;
font-family: var(--ui-font-desc);
font-size: 1.2rem;
font-weight: 600;
letter-spacing: .4em;
line-height: 1.6;
text-transform: uppercase;
}
.s58-member-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.s58-member-btn-primary,
.s58-member-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
padding: 9px 14px;
border-radius: 9px;
font-size: .84rem;
font-weight: 700;
}
.s58-member-btn-primary {
border: 1px solid #e1bd66 !important;
background: #e1bd66 !important;
color: #102030 !important;
}
.s58-member-btn-secondary {
border: 1px solid rgba(255, 255, 255, .30) !important;
background: rgba(4, 20, 31, .72) !important;
color: #ffffff !important;
}
.s58-member-product {
align-self: end;
text-align: center;
}
.s58-member-product img {
display: block;
width: min(100%, 460px);
height: auto;
margin: 0 auto -12px;
filter:
drop-shadow(
0 16px 20px
rgba(0, 0, 0, .16)
);
}
.s58-member-product span {
display: block;
max-width: 330px;
margin: 6px auto 0;
padding: 9px 12px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 9px;
background: rgba(4, 20, 31, .76);
color: #dbe8ec;
font-size: .76rem;
}
.s58-member-product strong {
display: block;
color: #f0c866;
}
.s58-member-section {
width: min(100%, 1420px);
margin: 0 auto;
padding: 30px clamp(18px, 4vw, 52px);
}
.s58-member-section + .s58-member-section {
padding-top: 4px;
padding-bottom: 38px;
}
.s58-member-section-head {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(260px, 440px);
gap: 24px;
align-items: end;
margin-bottom: 18px;
}
.s58-member-section-head > div > span,
.s58-member-activity-head > div > span {
display: block;
margin-bottom: 5px;
color: var(--s58-home-teal-dark);
font-size: .73rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.s58-member-section-head h2,
.s58-member-activity-head h2 {
margin: 0;
color: var(--s58-home-text);
font-size: clamp(1.35rem, 2.1vw, 1.85rem);
font-weight: 800;
letter-spacing: -.025em;
}
.s58-member-section-head > p {
margin: 0;
color: var(--s58-home-muted);
font-size: .86rem;
line-height: 1.6;
}
.s58-member-commission-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 12px;
}
.s58-member-commission-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--s58-home-line);
border-radius: 14px;
background: var(--s58-home-surface);
}
.s58-member-commission-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin: 18px 18px 0;
border: 1px solid #cbe0e2;
border-radius: 10px;
background: #edf8f8;
color: var(--s58-home-teal-dark);
font-size: 1.35rem;
}
.s58-member-commission-copy {
padding: 14px 18px 16px;
}
.s58-member-commission-copy > span {
display: block;
color: var(--s58-home-muted);
font-size: .76rem;
font-weight: 700;
}
.s58-member-commission-copy > strong {
display: block;
margin-top: 3px;
color: var(--s58-home-text);
font-size: clamp(1.45rem, 2.4vw, 2.05rem);
font-weight: 800;
letter-spacing: -.035em;
}
.s58-member-commission-copy > p {
min-height: 42px;
margin: 8px 0 0;
color: var(--s58-home-muted);
font-size: .78rem;
line-height: 1.45;
}
.s58-member-commission-card footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 18px;
border-top: 1px solid #e4eaee;
background: #f8fafb;
color: #6b7985;
font-size: .73rem;
}
.s58-member-commission-card footer strong {
color: var(--s58-home-teal-dark);
font-size: .8rem;
}
.s58-member-activity-card {
overflow: hidden;
border: 1px solid var(--s58-home-line);
border-radius: 14px;
background: #ffffff;
}
.s58-member-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
border-bottom: 1px solid #e1e7eb;
}
.s58-member-activity-head a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--s58-home-teal-dark);
font-size: .78rem;
font-weight: 700;
text-decoration: none;
}
.s58-member-activity-list {
padding: 0 20px;
}
.s58-member-activity-item {
display: grid;
grid-template-columns:
40px
minmax(0, 1fr)
auto;
gap: 12px;
align-items: center;
padding: 13px 0;
border-bottom: 1px solid #edf0f2;
}
.s58-member-activity-item:last-child {
border-bottom: 0;
}
.s58-member-activity-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d7e5e6;
border-radius: 9px;
background: #f0f8f8;
color: #0f0f0f;
font-size: 1.05rem;
}
.s58-member-activity-copy {
min-width: 0;
}
.s58-member-activity-copy strong,
.s58-member-activity-copy span,
.s58-member-activity-copy small {
display: block;
}
.s58-member-activity-copy strong {
font-family: var(--ui-font-subtitle);
font-weight: 700;
font-size: 1.2rem;
line-height: 1.2;
color: #000;
text-transform: uppercase;
}
.s58-member-activity-copy span {
margin-top: 4px;
font-family: var(--ui-font-desc);
font-weight: 400;
font-size: .7rem;
line-height: 0.8;
color: #0f0f0f;
}
.s58-member-activity-copy small {
margin-top: 6px;
overflow: hidden;
font-family: var(--ui-font-title);
font-weight: 300;
font-size: .7rem;
line-height: 1.2;
color: #0f0f0f;
text-overflow: ellipsis;
white-space: nowrap;
}
.s58-member-activity-value {
color: #08715e;
font-size: .84rem;
font-weight: 800;
white-space: nowrap;
}
.s58-member-empty {
min-height: 140px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px;
text-align: center;
}
.s58-member-empty i {
margin-bottom: 4px;
font-family: var(--ui-font-desc);
font-size: 1.2rem;
font-weight: 500;
color: #7d8a94;
}
.s58-member-empty strong {
font-family: var(--ui-font-title);
font-size: .8rem;
font-weight: 500;
color: #7d8a94;
}
.s58-member-empty span {
margin-top: 2px;
font-family: var(--ui-font-desc);
font-size: .7rem;
font-weight: 300;
color: #7d8a94;
}
/* --------------------------------------------------------------------------
TABLET 641 - 1280
Menjaga hero dan kartu tetap lapang pada layar tablet.
Penggunaan: otomatis.
-------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1280px) {
.s58-member-home {
border-radius: 16px;
}
.s58-member-hero {
min-height: 440px;
padding: 38px 34px;
}
.s58-member-hero-grid {
grid-template-columns:
minmax(0, 1.15fr)
minmax(240px, .85fr);
gap: 22px;
}
.s58-member-product img {
width: min(100%, 380px);
}
.s58-member-balance {
grid-template-columns: 1fr;
}
.s58-member-balance-side {
grid-template-columns:
repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, .14);
border-left: 0;
padding-top: 12px;
padding-left: 0;
}
.s58-member-section-head {
grid-template-columns:
minmax(0, 1fr)
minmax(220px, 340px);
}
}
/* --------------------------------------------------------------------------
MOBILE <= 640
Mengubah seluruh dashboard menjadi satu kolom tanpa kehilangan informasi.
Penggunaan: otomatis.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
.s58-member-home {
margin-right: -6px;
margin-left: -6px;
border-right: 0;
border-left: 0;
border-radius: 0;
}
.s58-member-hero {
min-height: auto;
padding: 28px 18px 24px;
background-position:
58% center;
}
.s58-member-hero-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.s58-member-hero h1 {
font-size: 2.45rem;
}
.s58-member-hero-desc {
font-size: .9rem;
}
.s58-member-identity {
display: grid;
grid-template-columns: 1fr;
}
.s58-member-balance {
grid-template-columns: 1fr;
padding: 15px;
}
.s58-member-balance-side {
grid-template-columns:
repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, .14);
border-left: 0;
padding-top: 11px;
padding-left: 0;
}
.s58-member-actions {
display: grid;
grid-template-columns: 1fr;
}
.s58-member-product {
display: none;
}
.s58-member-section {
padding: 24px 14px;
}
.s58-member-section-head {
grid-template-columns: 1fr;
gap: 9px;
}
.s58-member-commission-grid {
grid-template-columns: 1fr;
}
.s58-member-commission-copy > p {
min-height: 0;
}
.s58-member-activity-head {
align-items: flex-end;
padding: 15px;
}
.s58-member-activity-list {
padding: 0 15px;
}
.s58-member-activity-item {
grid-template-columns:
36px
minmax(0, 1fr);
gap: 10px;
}
.s58-member-activity-value {
grid-column: 2;
margin-top: -4px;
font-size: .78rem;
}
}
/* ==========================================================================
28. HALAMAN 404 SUKSES58
Halaman 404 dengan background brand yang sama dengan portal autentikasi.
Penggunaan: pages/404.php
========================================================================== */
.s58-404-page,
.s58-404-page *,
.s58-404-page *::before,
.s58-404-page *::after {
animation: none !important;
transition: none !important;
}
.s58-404-page {
min-height: calc(100vh - 190px);
display: flex;
align-items: center;
padding: clamp(28px, 6vw, 78px);
border: 1px solid #d4dde4;
border-radius: 20px;
color: #ffffff;
}
.s58-404-panel {
width: min(640px, 100%);
}
.s58-404-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid rgba(238, 204, 124, .44);
border-radius: 999px;
background: rgba(5, 22, 34, .76);
color: #efca70;
font-size: .74rem;
font-weight: 800;
letter-spacing: .07em;
}
.s58-404-code {
margin-top: 18px;
color: rgba(255, 255, 255, .17);
font-size: clamp(6rem, 15vw, 11rem);
font-weight: 900;
letter-spacing: -.075em;
line-height: .72;
}
.s58-404-page h1 {
max-width: 620px;
margin: 20px 0 0;
color: #ffffff;
font-size: clamp(2rem, 4vw, 4rem);
font-weight: 800;
letter-spacing: -.045em;
line-height: 1.02;
}
.s58-404-page h1 span {
display: block;
color: #efca70;
}
.s58-404-page > .s58-404-panel > p {
max-width: 570px;
margin: 18px 0 0;
color: #d3e0e6;
font-size: .94rem;
line-height: 1.7;
}
.s58-404-page p strong {
color: #ffffff;
}
.s58-404-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 24px;
}
.s58-404-primary,
.s58-404-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 43px;
padding: 9px 15px;
border-radius: 9px;
font-size: .82rem;
font-weight: 700;
}
.s58-404-primary {
border: 1px solid #e0ba61 !important;
background: #e0ba61 !important;
color: #102132 !important;
}
.s58-404-secondary {
border: 1px solid rgba(255, 255, 255, .32) !important;
background: rgba(5, 22, 34, .74) !important;
color: #ffffff !important;
}
.s58-404-note {
display: flex;
align-items: flex-start;
gap: 8px;
max-width: 540px;
margin-top: 24px;
padding-top: 17px;
border-top: 1px solid rgba(255, 255, 255, .17);
color: #b9c9d1;
font-size: .76rem;
line-height: 1.5;
}
.s58-404-note i {
margin-top: 1px;
color: #efca70;
}
@media (max-width: 640px) {
.s58-404-page {
min-height: calc(100vh - 150px);
padding: 30px 18px;
border-right: 0;
border-left: 0;
border-radius: 0;
background-position:
58% center;
}
.s58-404-actions {
display: grid;
grid-template-columns: 1fr;
}
.s58-404-actions .btn {
width: 100%;
}
}
/* ==========================================================================
29. BACKGROUND MUSIC TOPBAR
Tombol musik ringkas dan konsisten dengan kontrol topbar.
Penggunaan: id="s58-music-toggle"
========================================================================== */
.s58-music-toggle {
color: #ffffff !important;
}
.s58-music-toggle.is-muted {
color: rgba(255, 255, 255, .66) !important;
}
.s58-music-toggle i {
font-size: 1.18rem;
}
/* ==========================================================================
30. BACKGROUND GLOBAL PRIVATE APP
Background gambar menempel pada body. Karena shell index.php tidak reload
saat SPA berpindah route, gambar tetap berada pada posisi yang sama.
Penggunaan:
========================================================================== */
body.latar-abu {
min-height: 100vh;
background: transparent !important;
color: #eef4f7;
}
body.latar-abu::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
url('img/authlogin_bg.webp')
center center / cover no-repeat;
opacity: 1;
}
body.latar-abu > .wrapper {
position: relative;
z-index: 1;
min-height: 100vh;
background: transparent !important;
}
body.latar-abu .content-page,
body.latar-abu .content-page > .container-fluid,
body.latar-abu #pembungkus_utama,
body.latar-abu .konten-utama,
body.latar-abu #wadah_halaman {
background: transparent !important;
}
body.latar-abu .page-title-head {
margin-bottom: 8px !important;
padding: 0 8px;
}
body.latar-abu .page-title-head,
body.latar-abu .page-title-head a,
body.latar-abu .page-main-title,
body.latar-abu .breadcrumb-item,
body.latar-abu .breadcrumb-item.active {
color: #eaf2f5 !important;
}
body.latar-abu #pages {
height: 100%;
width: 100%;
padding: 10px;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* --------------------------------------------------------------------------
GET HOME TRANSPARAN
Hero dan panel dashboard tidak lagi menutupi background body dengan gambar
kedua. Seluruh visual memakai surface navy transparan.
Penggunaan: pages/getHome.php
-------------------------------------------------------------------------- */
.s58-member-home {
overflow: visible !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.s58-member-hero {
min-height: 420px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 16px;
background:
linear-gradient(
90deg,
rgba(20, 20, 50, .7) 0%,
rgba(20, 20, 100, .5) 60%,
rgba(240, 240, 200, .3) 80%
) !important;
}
.s58-member-section {
color: #eaf2f5;
}
.s58-member-section-head h2,
.s58-member-activity-head h2 {
color: #f6fafb !important;
}
.s58-member-section-head > p,
.s58-member-activity-head,
.s58-member-commission-copy > p {
color: #b7c7d0 !important;
}
.s58-member-commission-card,
.s58-member-activity-card {
border-color: rgba(255, 255, 255, .12) !important;
background: white !important;
color: #eff5f7;
}
.s58-member-commission-copy > span {
color: #b4c4cd !important;
}
.s58-member-commission-copy > strong,
.s58-member-activity-copy strong {
color: #ffffff !important;
}
.s58-member-commission-card footer {
border-top-color: rgba(255, 255, 255, .10) !important;
background: rgba(255, 255, 255, .035) !important;
color: #aebfc8 !important;
}
.s58-member-activity-item {
border-bottom-color: rgba(255, 255, 255, .09) !important;
}
.s58-member-activity-copy span,
.s58-member-activity-copy small {
color: #9fb2bd !important;
}
/* --------------------------------------------------------------------------
404 TRANSPARAN
404 memakai background body yang sama. Tidak membuat gambar kedua.
Penggunaan: pages/404.php
-------------------------------------------------------------------------- */
.s58-404-page {
min-height: calc(100vh - 220px);
border: 1px solid rgba(255, 255, 255, .12) !important;
border-radius: 16px;
background:
linear-gradient(
90deg,
rgba(3, 14, 23, .88) 0%,
rgba(4, 18, 28, .68) 60%,
rgba(4, 18, 28, .38) 100%
) !important;
}
/* ==========================================================================
31. LOGOUT MODAL
Modal logout ringan tanpa blur/animasi. View berasal dari ajaxs/auth.php.
Penggunaan: class="s58-logout-panel"
========================================================================== */
.s58-logout-panel,
.s58-logout-panel * {
animation: none !important;
transition: none !important;
}
.s58-logout-panel {
overflow: hidden;
border: 1px solid #d7e0e6;
border-radius: 16px;
background: #ffffff;
box-shadow: none !important;
}
.s58-logout-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin: 24px auto 0;
border: 1px solid #f0d5d7;
border-radius: 50%;
background: #fff4f4;
color: #b3262e;
font-size: 1.65rem;
}
.s58-logout-panel .modal-body {
padding: 18px 22px 22px;
}
.s58-logout-kicker {
display: block;
margin-bottom: 6px;
color: #7b8994;
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
text-align: center;
}
.s58-logout-title {
margin: 0;
color: #172532;
font-size: 1.35rem;
font-weight: 800;
text-align: center;
}
.s58-logout-copy {
margin: 8px auto 17px;
color: #687783;
font-size: .82rem;
line-height: 1.55;
text-align: center;
}
.s58-logout-account {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 18px;
padding: 11px 12px;
border: 1px solid #dfe6eb;
border-radius: 10px;
background: #f7f9fa;
}
.s58-logout-account > i {
color: #526473;
font-size: 1.45rem;
}
.s58-logout-account span,
.s58-logout-account strong {
display: block;
}
.s58-logout-account span {
color: #7b8994;
font-size: .66rem;
}
.s58-logout-account strong {
margin-top: 1px;
color: #1c2b37;
font-size: .84rem;
}
.s58-logout-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.s58-logout-cancel,
.s58-logout-confirm {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 9px !important;
font-size: .78rem;
font-weight: 700;
}
.s58-logout-cancel {
border: 1px solid #d5dde3 !important;
background: #f5f7f8 !important;
color: #384957 !important;
}
.s58-logout-confirm {
border: 1px solid #9d2630 !important;
background: #9d2630 !important;
color: #ffffff !important;
}
@media (max-width: 640px) {
body.latar-abu #pages {
min-height: calc(100vh - 150px);
padding: 10px;
border-right: 0;
border-left: 0;
border-radius: 0;
background: rgba(3, 13, 21, .70);
}
.s58-member-hero,
.s58-404-page {
border-right: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
}
.s58-logout-actions {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
DEFAULT LIGHT THEME
Menetapkan background default aplikasi ke Bootstrap light.
Penggunaan: otomatis untuk seluruh aplikasi mode light.
========================================================================== */
:root,
[data-bs-theme="light"] {
--theme-secondary-bg: #ffffff;
--bs-body-bg: #ffffff;
--bs-body-color: #212529;
}
/* ==========================================================================
32. UNIVERSAL BG THEME BRIDGE
Menjadikan dua versi background custom berlaku konsisten pada seluruh
komponen, termasuk komponen yang memiliki background default sendiri.
Prinsip:
- Nilai gradient pada Section 03 TIDAK diubah.
- bg-*s = versi transparan/soft existing.
- pasangan bg-* = versi gradient solid/pekat.
- Class theme dipasang langsung pada surface/komponen yang ingin diberi
theme. Rule ditempatkan di akhir file agar menang terhadap default
component surface tanpa perlu membuat versi theme per komponen.
Bootstrap:
button : class="btn bg-gold"
card : class="card bg-ocean"
modal : class="modal-content bg-deep"
alert : class="alert bg-rose"
badge : class="badge bg-mint"
tabs : class="nav nav-tabs bg-golds" atau pada .nav-link
Custom:
tiles : class="tiles bg-oceans"
pod : class="pod bg-gold"
navigasi : class="navigasi bg-deep"
splash : class="splash-modal bg-ocean"
user widget : class="widget-user bg-neon"
member card : class="member-card bg-sage"
fintech : class="fin-card bg-gold"
loading : class="ui-loading bg-deep"
notification: class="notif-card bg-rose"
Penggunaan:
...
...
========================================================================== */
/* --------------------------------------------------------------------------
32.1. THEME LIST / UNIVERSAL SURFACE
!important hanya dipakai pada surface theme agar class bg-* custom benar-
benar berfungsi sebagai utility override, termasuk terhadap Bootstrap dan
komponen custom yang sebelumnya mempunyai background !important.
-------------------------------------------------------------------------- */
:is(
.bg-golds,
.bg-oceans,
.bg-sages,
.bg-roses,
.bg-luxury,
.bg-futures,
.bg-mints,
.bg-neons,
.bg-snows,
.bg-grays,
.bg-deeps,
.bg-whites,
.bg-darks,
.bg-gold,
.bg-ocean,
.bg-sage,
.bg-rose,
.bg-future,
.bg-mint,
.bg-neon,
.bg-snow,
.bg-gray,
.bg-deep,
.bg-metal,
.bg-luxuri
) {
background: var(--ui-bg-gradient) !important;
color: var(--ui-theme-text) !important;
border-color: var(--ui-theme-border) !important;
/* Bootstrap component variables. */
--bs-card-color: var(--ui-theme-text);
--bs-card-border-color: var(--ui-theme-border);
--bs-modal-color: var(--ui-theme-text);
--bs-modal-border-color: var(--ui-theme-border);
--bs-alert-color: var(--ui-theme-text);
--bs-alert-border-color: var(--ui-theme-border);
--bs-nav-link-color: var(--ui-theme-text);
--bs-nav-link-hover-color: var(--ui-theme-text);
--bs-badge-color: var(--ui-theme-text);
--bs-btn-color: var(--ui-theme-text);
--bs-btn-border-color: var(--ui-theme-border);
--bs-btn-hover-color: var(--ui-theme-text);
--bs-btn-hover-border-color: var(--ui-theme-border);
--bs-btn-active-color: var(--ui-theme-text);
--bs-btn-active-border-color: var(--ui-theme-border);
}
/* --------------------------------------------------------------------------
32.2. BOOTSTRAP SURFACE BRIDGE
Header/footer/body bawaan dibuat transparan agar gradient pada root surface
tetap terlihat sebagai satu kesatuan komponen.
-------------------------------------------------------------------------- */
:is(.card, .modal-content):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > :is(.card-header, .card-body, .card-footer, .modal-header, .modal-body, .modal-footer) {
background: transparent !important;
color: inherit;
border-color: var(--ui-theme-border) !important;
}
:is(.btn, button, a.btn):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
):is(:hover, :focus, :focus-visible, :active) {
background: var(--ui-bg-gradient) !important;
color: var(--ui-theme-text) !important;
border-color: var(--ui-theme-border) !important;
}
/* Bootstrap alert dan badge cukup memakai theme pada surface-nya. */
:is(.alert, .badge):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) {
color: var(--ui-theme-text) !important;
border-color: var(--ui-theme-border) !important;
}
/* --------------------------------------------------------------------------
32.3. BOOTSTRAP TABS / PILLS
Theme boleh ditempel pada container nav atau langsung pada .nav-link.
-------------------------------------------------------------------------- */
:is(.nav-tabs, .nav-pills):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) {
border-color: var(--ui-theme-border) !important;
}
:is(.nav-tabs, .nav-pills):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) .nav-link {
background: transparent !important;
color: inherit !important;
border-color: transparent !important;
}
:is(.nav-tabs, .nav-pills):is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) .nav-link.active {
background: rgba(255, 255, 255, .16) !important;
color: inherit !important;
border-color: var(--ui-theme-border) !important;
}
.nav-link:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
):is(:hover, :focus, .active) {
background: var(--ui-bg-gradient) !important;
color: var(--ui-theme-text) !important;
border-color: var(--ui-theme-border) !important;
}
/* --------------------------------------------------------------------------
32.4. CUSTOM COMPONENT COMPOSITE SURFACES
Saat theme ditempel pada root, bagian internal yang sebelumnya mempunyai
background solid dibuat transparan agar gradient root tidak tertutup.
-------------------------------------------------------------------------- */
.pod:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > :is(.pod-header, .pod-body, .pod-footer) {
background: transparent !important;
color: inherit;
border-color: var(--ui-theme-border) !important;
}
.splash-modal:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > :is(.splash-header, .splash-body, .splash-footer) {
background: transparent !important;
color: inherit;
border-color: var(--ui-theme-border) !important;
}
.widget-user:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) .user-surface {
background: transparent !important;
color: inherit !important;
border-color: var(--ui-theme-border) !important;
}
.member-card:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > .member-footer {
background: transparent !important;
color: inherit !important;
border-color: var(--ui-theme-border) !important;
}
.fintech-bonus-card:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > :is(.fintech-bonus-header, .fintech-bonus-body, .fintech-bonus-footer),
.fin-card:is(
.bg-golds, .bg-oceans, .bg-sages, .bg-roses, .bg-luxury,
.bg-futures, .bg-mints, .bg-neons, .bg-snows, .bg-grays,
.bg-deeps, .bg-whites, .bg-darks, .bg-gold, .bg-ocean,
.bg-sage, .bg-rose, .bg-future, .bg-mint, .bg-neon,
.bg-snow, .bg-gray, .bg-deep, .bg-metal,
.bg-luxuri
) > .fin-header {
background: transparent !important;
color: inherit !important;
border-color: var(--ui-theme-border) !important;
}
/* Tiles, loading, floating notification, navigasi dan member SUKSES58 tidak
membutuhkan child bridge khusus bila class bg-* dipasang langsung pada
surface utama karena rule universal di 32.1 sudah menjadi override akhir. */
/* ==========================================================================
33. JGRUP / TERNARY NETWORK
Peta jaringan Matrix 3 untuk pages/getJGrup.php.
Desktop >1280 menampilkan 3 tingkat; tablet/mobile diringkas 2 tingkat oleh JS.
Penggunaan: #getJGrupPage, .jgrup-node-card, .jgrup-children
========================================================================== */
#getJGrupPage {
--jgrup-card-width: 150px;
--jgrup-child-gap: 12px;
--jgrup-line: #7b8794;
--jgrup-left: #2563eb;
--jgrup-center: #65a30d;
--jgrup-right: #0891b2;
--jgrup-root: #9a7b16;
}
.jgrup-login-strip {
min-height: 58px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(255, 255, 255, .74);
border: 1px solid rgba(15, 23, 42, .14);
border-radius: var(--ui-radius-lg);
}
.jgrup-login-main {
min-width: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 10px;
}
.jgrup-login-label {
width: 100%;
font-size: .72rem;
color: #64748b;
}
.jgrup-login-id {
font-family: var(--ui-font-subtitle);
font-size: 1rem;
color: #102a43;
}
.jgrup-login-name {
min-width: 0;
font-size: .82rem;
color: #52606d;
overflow-wrap: anywhere;
}
.jgrup-login-package {
flex: 0 0 auto;
padding: 5px 9px;
border: 1px solid rgba(15, 23, 42, .16);
border-radius: 999px;
background: #f8fafc;
color: #334155;
font-size: .7rem;
font-weight: 700;
letter-spacing: .03em;
}
.jgrup-summary {
min-height: 74px;
padding: 10px 12px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 10px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .14);
border-left-width: 4px;
border-radius: var(--ui-radius-lg);
}
.jgrup-summary-left { border-left-color: var(--jgrup-left); }
.jgrup-summary-center { border-left-color: var(--jgrup-center); }
.jgrup-summary-right { border-left-color: var(--jgrup-right); }
.jgrup-summary-label {
grid-column: 1;
grid-row: 1;
font-size: .76rem;
font-weight: 700;
color: #475569;
}
.jgrup-summary-value {
grid-column: 2;
grid-row: 1 / span 2;
font-family: var(--ui-font-subtitle);
font-size: 1.55rem;
line-height: 1;
color: #0f172a;
}
.jgrup-summary small {
grid-column: 1;
grid-row: 2;
font-size: .68rem;
color: #94a3b8;
}
.jgrup-toolbar {
min-height: 56px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(248, 250, 252, .92);
border: 1px solid rgba(15, 23, 42, .14);
border-radius: var(--ui-radius-lg);
}
.jgrup-toolbar-root {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, auto);
gap: 1px 8px;
align-items: baseline;
}
.jgrup-current-caption {
grid-column: 1 / -1;
font-size: .68rem;
color: #64748b;
}
#jgrupCurrentRoot {
color: #0f2942;
font-size: .88rem;
}
.jgrup-current-name {
min-width: 0;
max-width: 320px;
color: #64748b;
font-size: .76rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jgrup-toolbar-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
}
.jgrup-viewport {
position: relative;
width: 100%;
min-height: 310px;
padding: 14px 8px 18px;
overflow: auto;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(241,245,249,.92));
border: 1px solid rgba(15, 23, 42, .14);
border-radius: var(--ui-radius-lg);
}
.jgrup-stage {
position: relative;
min-width: 1px;
min-height: 1px;
margin: 0 auto;
}
.jgrup-canvas {
position: relative;
width: max-content;
min-width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
.jgrup-loading,
.jgrup-error {
width: min(520px, calc(100vw - 80px));
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.jgrup-subtree {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.jgrup-card-shell {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
}
.jgrup-card-shell.has-children::after {
content: "";
position: absolute;
left: 50%;
bottom: -18px;
width: 1px;
height: 18px;
background: var(--jgrup-line);
}
.jgrup-children {
--jgrup-slot-width: var(--jgrup-card-width);
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--jgrup-child-gap);
padding-top: 18px;
}
.jgrup-children::before {
content: "";
position: absolute;
top: 0;
left: calc(var(--jgrup-slot-width) / 2);
right: calc(var(--jgrup-slot-width) / 2);
height: 1px;
background: var(--jgrup-line);
}
.jgrup-child-slot {
position: relative;
flex: 0 0 var(--jgrup-slot-width);
min-width: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.jgrup-child-slot::before {
content: "";
position: absolute;
top: -18px;
left: 50%;
width: 1px;
height: 18px;
background: var(--jgrup-line);
}
.jgrup-node-card,
.jgrup-empty-card {
width: var(--jgrup-card-width);
min-width: var(--jgrup-card-width);
box-sizing: border-box;
border-radius: 12px;
}
.jgrup-node-card {
min-height: 132px;
padding: 9px;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
background: rgba(255, 255, 255, .98);
border: 1px solid rgba(15, 23, 42, .20);
border-top-width: 4px;
color: #0f172a;
cursor: pointer;
}
.jgrup-node-card:hover,
.jgrup-node-card:focus,
.jgrup-node-card:focus-visible,
.jgrup-node-card:active {
outline: none;
box-shadow: none;
filter: none;
}
.jgrup-card-root {
border-top-color: var(--jgrup-root);
background:
linear-gradient(145deg, #fffef7 0%, #f8fafc 55%, #eef8f3 100%);
}
.jgrup-card-left { border-top-color: var(--jgrup-left); }
.jgrup-card-center { border-top-color: var(--jgrup-center); }
.jgrup-card-right { border-top-color: var(--jgrup-right); }
.jgrup-card-neutral { border-top-color: #64748b; }
.jgrup-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 7px;
}
.jgrup-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(15, 23, 42, .16);
border-radius: 9px;
background:
linear-gradient(145deg, #e2f3ec, #e7edf5);
color: #17324d;
font-size: .72rem;
font-weight: 800;
}
.jgrup-package {
max-width: 84px;
padding: 3px 5px;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 999px;
background: #f8fafc;
color: #64748b;
font-size: .58rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jgrup-member-id {
display: block;
color: #102a43;
font-family: var(--ui-font-subtitle);
font-size: .78rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
.jgrup-member-name {
min-height: 28px;
margin-top: 2px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: #52606d;
font-size: .66rem;
line-height: 1.25;
}
.jgrup-card-meta {
margin-top: auto;
padding-top: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
color: #64748b;
font-size: .58rem;
}
.jgrup-card-status {
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
color: #64748b;
font-size: .56rem;
}
.jgrup-card-status i {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: #94a3b8;
}
.jgrup-card-status.is-active i { background: #65a30d; }
.jgrup-card-status.is-inactive i { background: #dc2626; }
.jgrup-empty-card {
min-height: 96px;
padding: 10px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: rgba(248, 250, 252, .82);
border: 1px dashed rgba(100, 116, 139, .42);
color: #94a3b8;
text-align: center;
}
.jgrup-empty-card i {
font-size: 1.15rem;
}
.jgrup-empty-card strong {
font-size: .64rem;
color: #64748b;
}
.jgrup-empty-card span {
font-size: .58rem;
}
.jgrup-footer-info {
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 12px;
background: rgba(248, 250, 252, .82);
border: 1px solid rgba(15, 23, 42, .12);
border-radius: var(--ui-radius-md);
color: #64748b;
font-size: .7rem;
}
.jgrup-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.jgrup-legend span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.jgrup-dot {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
}
.jgrup-dot-left { background: var(--jgrup-left); }
.jgrup-dot-center { background: var(--jgrup-center); }
.jgrup-dot-right { background: var(--jgrup-right); }
.jgrup-help {
flex: 1 1 360px;
text-align: center;
}
.jgrup-depth-info {
flex: 0 1 auto;
text-align: right;
}
/* --------------------------------------------------------------------------
TABLET <= 1280PX
-------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1280px) {
#getJGrupPage {
--jgrup-card-width: 132px;
--jgrup-child-gap: 10px;
}
.jgrup-viewport {
min-height: 290px;
}
.jgrup-node-card {
min-height: 124px;
}
.jgrup-toolbar {
align-items: flex-start;
}
.jgrup-current-name {
max-width: 220px;
}
}
/* --------------------------------------------------------------------------
MOBILE <= 640PX
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
#getJGrupPage {
--jgrup-card-width: 96px;
--jgrup-child-gap: 6px;
}
.jgrup-login-strip {
min-height: 52px;
padding: 8px 9px;
}
.jgrup-login-name {
width: 100%;
font-size: .7rem;
}
.jgrup-login-package {
padding: 4px 6px;
font-size: .58rem;
}
.jgrup-summary {
min-height: 60px;
padding: 7px 7px;
border-left-width: 3px;
}
.jgrup-summary-label {
font-size: .64rem;
}
.jgrup-summary-value {
font-size: 1.15rem;
}
.jgrup-summary small {
font-size: .55rem;
}
.jgrup-toolbar {
padding: 7px;
flex-direction: column;
align-items: stretch;
}
.jgrup-toolbar-root {
grid-template-columns: auto 1fr;
}
.jgrup-current-name {
max-width: none;
}
.jgrup-toolbar-actions {
width: 100%;
justify-content: stretch;
}
.jgrup-toolbar-actions > .btn {
flex: 1 1 auto;
}
.jgrup-toolbar-actions > .btn span {
display: none;
}
.jgrup-zoom-group {
margin-left: auto;
}
.jgrup-viewport {
min-height: 250px;
padding: 10px 4px 14px;
}
.jgrup-node-card {
min-height: 112px;
padding: 6px;
border-radius: 9px;
}
.jgrup-card-top {
margin-bottom: 5px;
}
.jgrup-avatar {
width: 27px;
height: 27px;
flex-basis: 27px;
border-radius: 7px;
font-size: .62rem;
}
.jgrup-package {
max-width: 55px;
padding: 2px 4px;
font-size: .48rem;
}
.jgrup-member-id {
font-size: .66rem;
}
.jgrup-member-name {
min-height: 25px;
font-size: .57rem;
}
.jgrup-card-meta,
.jgrup-card-status {
font-size: .49rem;
}
.jgrup-empty-card {
min-height: 82px;
padding: 6px 3px;
}
.jgrup-empty-card strong {
font-size: .56rem;
}
.jgrup-empty-card span {
font-size: .5rem;
}
.jgrup-footer-info {
padding: 7px;
font-size: .6rem;
}
.jgrup-help {
order: 3;
flex-basis: 100%;
text-align: left;
}
.jgrup-depth-info {
text-align: left;
}
}
/* ==========================================================================
99. SUKSES58 PAGE MODERN — ADMIN & MEMBER EXPERIENCE
Tampilan profesional, ringan dan mudah dibaca untuk seluruh page privat
selain getHome/reff. Breakpoint mengikuti Mobile <=640, Tablet <=1280.
========================================================================== */
.s58-page-modern {
color: #1f2937;
font-size: 12px;
line-height: 1.5;
}
.s58-page-modern .pod {
overflow: visible;
border: 1px solid rgba(71, 85, 105, .26);
border-radius: 12px;
background-color: #eef1f4;
}
.s58-page-modern .pod-header {
min-height: 56px;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid rgba(71, 85, 105, .18);
background: rgba(255, 255, 255, .35);
}
.s58-page-modern .pod-body {
padding: 12px;
color: #1f2937;
}
.s58-page-modern .pod-title,
.s58-page-modern .pod-header h1,
.s58-page-modern .pod-header h2,
.s58-page-modern .pod-header h3,
.s58-page-modern .pod-header h4,
.s58-page-modern .pod-header h5,
.s58-page-modern .pod-header h6 {
color: #111827;
font-weight: 700;
}
.s58-page-modern .pod-subtitle,
.s58-page-modern .fo-desc,
.s58-page-modern .fo-help,
.s58-page-modern .text-muted {
color: #4b5563 !important;
}
.s58-page-modern small,
.s58-page-modern .small,
.s58-page-modern .form-text,
.s58-page-modern .pod-subtitle,
.s58-page-modern .fo-help,
.s58-page-modern .fo-desc,
.s58-page-modern .jgrup-summary-label,
.s58-page-modern .jgrup-summary small,
.s58-page-modern .jgrup-package,
.s58-page-modern .jgrup-member-id,
.s58-page-modern .jgrup-member-name,
.s58-page-modern .jgrup-card-meta,
.s58-page-modern .jgrup-card-status,
.s58-page-modern .jgrup-empty-card strong,
.s58-page-modern .jgrup-empty-card span,
.s58-page-modern .jgrup-footer-info {
font-size: 11px !important;
}
.s58-page-modern .form-label,
.s58-page-modern .form-control,
.s58-page-modern .form-select,
.s58-page-modern .input-group-text,
.s58-page-modern .btn,
.s58-page-modern .badge,
.s58-page-modern .nav-link,
.s58-page-modern .dropdown-item,
.s58-page-modern .select2-container,
.s58-page-modern .select2-results__option,
.s58-page-modern .dataTables_wrapper,
.s58-page-modern table {
font-size: 12px;
}
.s58-page-modern .form-label {
margin-bottom: 4px;
color: #374151;
font-weight: 600;
}
.s58-page-modern .form-control,
.s58-page-modern .form-select,
.s58-page-modern .select2-selection {
min-height: 34px;
border-color: #b8c0ca;
color: #111827;
background-color: #fff;
}
.s58-page-modern .form-control:disabled,
.s58-page-modern .form-select:disabled,
.s58-page-modern .form-control[readonly] {
color: #374151;
background-color: #e5e7eb;
opacity: 1;
}
.s58-page-modern .form-select option {
color: #111827;
background: #fff;
}
.s58-page-modern .table {
--bs-table-color: #1f2937;
--bs-table-bg: transparent;
--bs-table-striped-color: #1f2937;
--bs-table-hover-color: #111827;
margin-bottom: 0;
}
.s58-page-modern .table thead th {
white-space: nowrap;
color: #111827;
font-weight: 700;
background: rgba(226, 232, 240, .88);
border-bottom-color: #aeb7c2;
}
.s58-page-modern .table tbody td {
vertical-align: middle;
border-color: rgba(148, 163, 184, .34);
}
.s58-page-modern .pod-header-right {
display: flex;
align-items: center;
gap: 6px;
}
.s58-page-modern .pod-header-right .btn,
.s58-page-modern .pod-header-right button.btn,
.s58-page-modern .pod-header-right a.btn {
border: 1px solid #aab4bf !important;
color: #1f2937 !important;
background: linear-gradient(180deg, #f7f8fa 0%, #d9dee4 100%) !important;
box-shadow: none !important;
}
.s58-page-modern .pod-header-right .btn i {
color: inherit !important;
}
.s58-page-modern .pod-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
min-height: 38px;
color: #334155;
border: 1px solid rgba(100, 116, 139, .28);
border-radius: 10px;
background: rgba(255, 255, 255, .5);
}
.s58-page-modern .s58-portal-tabs {
flex-wrap: wrap;
}
.s58-page-modern .s58-portal-tabs .nav-link {
min-height: 34px;
border: 1px solid #b8c0ca;
color: #374151;
background: rgba(255, 255, 255, .55);
}
.s58-page-modern .s58-portal-tabs .nav-link.active {
border-color: #6c757d;
color: #fff;
background: #6c757d;
}
.s58-portal-head .pod-header {
min-height: 68px;
}
.s58-member-portal .s58-stat-card,
.s58-page-modern .s58-stat-card {
height: 100%;
padding: 10px 12px;
border: 1px solid rgba(100, 116, 139, .25);
border-radius: 10px;
background: rgba(255, 255, 255, .52);
}
.s58-page-modern .s58-stat-card small {
display: block;
margin-bottom: 2px;
color: #4b5563;
}
.s58-page-modern .s58-stat-card strong {
color: #111827;
font-size: 14px;
}
.s58-page-modern .s58-info-box {
padding: 9px 10px;
border: 1px solid #c3cad3;
border-radius: 9px;
color: #374151;
background: rgba(255, 255, 255, .55);
}
.s58-page-modern .s58-product-card {
padding: 10px;
border: 1px solid #c3cad3;
border-radius: 10px;
color: #1f2937;
background: rgba(255, 255, 255, .62);
}
.s58-page-modern .dataTables_wrapper .dataTables_filter input,
.s58-page-modern .dt-search input,
.s58-page-modern .dt-input {
min-height: 32px;
border: 1px solid #b8c0ca !important;
border-radius: 7px;
color: #111827 !important;
background: #fff !important;
}
.s58-page-modern .dataTables_wrapper .dataTables_length select,
.s58-page-modern .dt-length select {
min-height: 32px;
color: #111827 !important;
background-color: #fff !important;
}
@media (max-width: 640px) {
.s58-page-modern {
font-size: 11px;
}
.s58-page-modern .pod-header {
align-items: flex-start;
flex-wrap: wrap;
padding: 9px;
}
.s58-page-modern .pod-header-right {
width: 100%;
justify-content: flex-end;
}
.s58-page-modern .pod-body {
padding: 9px;
}
.s58-page-modern .form-label,
.s58-page-modern .form-control,
.s58-page-modern .form-select,
.s58-page-modern .input-group-text,
.s58-page-modern .btn,
.s58-page-modern .badge,
.s58-page-modern .nav-link,
.s58-page-modern table {
font-size: 11px;
}
}
@media (min-width: 641px) and (max-width: 1280px) {
.s58-page-modern {
font-size: 12px;
}
}
@media (min-width: 1281px) {
.s58-page-modern {
font-size: 12px;
}
}
/* ==========================================================================
36. TOAST UNIVERSAL CENTER RESPONSIVE
Memastikan semua toast tampil tepat di tengah viewport pada desktop,
tablet, maupun mobile, termasuk ketika dipanggil dari dalam modal.
Penggunaan: showToast(...)
========================================================================== */
.toast-container {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 12px !important;
display: flex !important;
flex-direction: column;
align-items: center !important;
justify-content: center !important;
transform: translate(-50%, -50%) !important;
pointer-events: none;
z-index: 2000 !important;
}
.toast-container .toast {
width: min(70vw, 720px) !important;
max-width: calc(100vw - 24px) !important;
margin-right: auto !important;
margin-left: auto !important;
pointer-events: auto;
}
@media (max-width: 640px) {
.toast-container {
padding: 10px !important;
}
.toast-container .toast {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
}
@media (min-width: 641px) and (max-width: 1280px) {
.toast-container .toast {
width: min(78vw, 680px) !important;
}
}
/* ==========================================================================
37. AUTH LOGIN FLOATING ACTIVITY
Feed aktivitas publik di sisi tengah-kiri authLogin. Item ditampilkan
bergantian oleh scripts/authLogin.js tanpa animasi berat.
========================================================================== */
.s58-auth-activity-feed {
position: fixed;
top: 90%;
left: 15px;
z-index: 20;
width: min(450px, calc(120vw - 22px));
transform: translateY(-50%);
pointer-events: none;
background-color: rgba(10, 10, 0, 0.7);
border: 1px rgba(var(--ui-white-rgb), 1);
border-radius: 12px;
}
.s58-auth-activity-card {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(20, 20, 80,.8);
border-radius: 12px;
color: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.16);
pointer-events: auto;
}
.s58-auth-activity-card[hidden] {
display: none !important;
}
.s58-auth-activity-head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 6px;
}
.s58-auth-activity-head i {
flex: 0 0 auto;
font-size: 1.2rem;
font-weight: 700;
line-height: 0.8;
}
.s58-auth-activity-title {
margin: 0;
font-family: var(--ui-font-title);
font-size: 1.1rem;
font-weight: 300;
line-height: 0.8;
text-transform: lowercase;
}
.s58-auth-activity-body {
margin: 14px 0px 4px 26px;
font-family: var(--ui-font-desc);
font-size: 1.0rem;
font-weight: 500;
text-transform: uppercase;
line-height: .8;
}
.s58-auth-activity-meta {
display: block;
margin-top: 2px;
font-size: .7rem;
opacity: .84;
}
.s58-auth-activity-progress {
display: flex;
gap: 4px;
margin-top: 8px;
}
.s58-auth-activity-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.35);
}
.s58-auth-activity-dot.active {
background: rgba(255,255,255,.95);
}
@media (max-width: 640px) {
.s58-auth-activity-feed {
top: auto;
right: 10px;
bottom: 74px;
left: 10px;
width: auto;
transform: none;
}
.s58-auth-activity-card {
padding: 10px 12px;
}
}