@media(max-width:768px) {
:root {
--bs-body-font-size: 1.1rem!important;
--bs-nav-link-font-size: 1.25rem!important;
}
.vh-100 {
height: calc(100vh - 56px) !important;
}
.vh-75 {
height: calc(75vh - 56px) !important;
}
.vh-50 {
height: calc(50vh - 56px) !important;
}
.vh-25 {
height: calc(25vh - 56px) !important;
}
}
@media (max-width: 991.98px) {
#header-wrapper .mobile-menu-toggle {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0c1b33;
box-shadow: none;
transition: transform 0.16s ease, background 0.2s ease;
}
#header-wrapper .mobile-menu-toggle:focus {
box-shadow: none;
}
#header-wrapper .mobile-menu-toggle:active {
transform: scale(0.96);
}
#header-wrapper .mobile-menu-toggle[aria-expanded="true"],
#header-wrapper .mobile-menu-toggle.is-open {
background: transparent;
}
#header-wrapper .mobile-menu-toggle-lines {
width: 20px;
height: 16px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#header-wrapper .mobile-menu-toggle-line {
display: block;
width: 100%;
height: 2.5px;
border-radius: 999px;
background: currentColor;
transform-origin: center;
transition: transform 0.22s ease, opacity 0.18s ease, width 0.2s ease;
}
#header-wrapper .mobile-menu-toggle-line:nth-child(2) {
width: 16px;
margin-left: auto;
}
#header-wrapper .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(1),
#header-wrapper .mobile-menu-toggle.is-open .mobile-menu-toggle-line:nth-child(1) {
transform: translateY(6.75px) rotate(45deg);
}
#header-wrapper .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(2),
#header-wrapper .mobile-menu-toggle.is-open .mobile-menu-toggle-line:nth-child(2) {
opacity: 0;
transform: scaleX(0.5);
}
#header-wrapper .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(3),
#header-wrapper .mobile-menu-toggle.is-open .mobile-menu-toggle-line:nth-child(3) {
transform: translateY(-6.75px) rotate(-45deg);
}
}
/* ??????????????????????????????????????????????
Bottom Sheet ? Adaptive Light / Dark
?????????????????????????????????????????????? */
@media (max-width: 991.98px) {
/* ?? colour tokens (light) ?? */
:root {
--bs-sheet-bg: rgba(255, 255, 255, 0.88);
--bs-sheet-bg-solid: #ffffff;
--bs-sheet-text: #1a1a2e;
--bs-sheet-text-muted: #64748b;
--bs-sheet-border: rgba(0, 0, 0, 0.06);
--bs-sheet-handle: rgba(0, 0, 0, 0.18);
--bs-sheet-hover: rgba(0, 0, 0, 0.04);
--bs-sheet-active: rgba(59, 130, 246, 0.08);
--bs-sheet-accent: #2563eb;
--bs-sheet-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
--bs-sheet-divider: rgba(0, 0, 0, 0.06);
--bs-sheet-card-bg: rgba(0, 0, 0, 0.03);
--bs-sheet-close-bg: rgba(0, 0, 0, 0.06);
--bs-sheet-close-color: #64748b;
--bs-sheet-chevron: #94a3b8;
--bs-sheet-badge-bg: rgba(59, 130, 246, 0.1);
--bs-sheet-badge-text: #2563eb;
}
/* ?? colour tokens (dark) ?? */
@media (prefers-color-scheme: dark) {
:root {
--bs-sheet-bg: rgba(22, 22, 30, 0.92);
--bs-sheet-bg-solid: #16161e;
--bs-sheet-text: #e8e8ed;
--bs-sheet-text-muted: #8b8b9e;
--bs-sheet-border: rgba(255, 255, 255, 0.06);
--bs-sheet-handle: rgba(255, 255, 255, 0.22);
--bs-sheet-hover: rgba(255, 255, 255, 0.05);
--bs-sheet-active: rgba(96, 165, 250, 0.12);
--bs-sheet-accent: #60a5fa;
--bs-sheet-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
--bs-sheet-divider: rgba(255, 255, 255, 0.06);
--bs-sheet-card-bg: rgba(255, 255, 255, 0.04);
--bs-sheet-close-bg: rgba(255, 255, 255, 0.08);
--bs-sheet-close-color: #8b8b9e;
--bs-sheet-chevron: #5a5a72;
--bs-sheet-badge-bg: rgba(96, 165, 250, 0.15);
--bs-sheet-badge-text: #60a5fa;
}
}
/* Also support Bootstrap dark-mode class */
html[data-bs-theme="dark"],
html.dark-mode {
--bs-sheet-bg: rgba(22, 22, 30, 0.92);
--bs-sheet-bg-solid: #16161e;
--bs-sheet-text: #e8e8ed;
--bs-sheet-text-muted: #8b8b9e;
--bs-sheet-border: rgba(255, 255, 255, 0.06);
--bs-sheet-handle: rgba(255, 255, 255, 0.22);
--bs-sheet-hover: rgba(255, 255, 255, 0.05);
--bs-sheet-active: rgba(96, 165, 250, 0.12);
--bs-sheet-accent: #60a5fa;
--bs-sheet-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
--bs-sheet-divider: rgba(255, 255, 255, 0.06);
--bs-sheet-card-bg: rgba(255, 255, 255, 0.04);
--bs-sheet-close-bg: rgba(255, 255, 255, 0.08);
--bs-sheet-close-color: #8b8b9e;
--bs-sheet-chevron: #5a5a72;
--bs-sheet-badge-bg: rgba(96, 165, 250, 0.15);
--bs-sheet-badge-text: #60a5fa;
}
/* ?? Bottom Sheet Container (nav + payment sheet shared) ?? */
#offcanvasNavbarDark.offcanvas.offcanvas-bottom,
#paymentSheet.offcanvas.offcanvas-bottom,
#inquirySheet.offcanvas.offcanvas-bottom,
#qrisSheet.offcanvas.offcanvas-bottom,
#stepsSheet.offcanvas.offcanvas-bottom {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
z-index: 1045 !important;
border: none !important;
background-color: var(--bs-sheet-bg) !important;
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--bs-sheet-shadow);
color: var(--bs-sheet-text) !important;
transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important;
overflow: hidden;
}
/* Nav sheet ? max 85vh */
#offcanvasNavbarDark.offcanvas.offcanvas-bottom {
height: auto !important;
max-height: 85vh !important;
min-height: 240px;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}
/* Payment + Inquiry + QRIS + Steps sheet ? content-driven height, capped at full screen */
#paymentSheet.offcanvas.offcanvas-bottom,
#inquirySheet.offcanvas.offcanvas-bottom,
#qrisSheet.offcanvas.offcanvas-bottom,
#stepsSheet.offcanvas.offcanvas-bottom {
height: auto !important;
max-height: 100dvh !important;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}
/* Override Bootstrap text-bg-dark to use our sheet colours */
#offcanvasNavbarDark.offcanvas.offcanvas-bottom.text-bg-dark {
--bs-dark-rgb: none;
background-color: var(--bs-sheet-bg) !important;
color: var(--bs-sheet-text) !important;
}
/* Force correct transform states */
#offcanvasNavbarDark.offcanvas.offcanvas-bottom,
#paymentSheet.offcanvas.offcanvas-bottom,
#inquirySheet.offcanvas.offcanvas-bottom,
#qrisSheet.offcanvas.offcanvas-bottom,
#stepsSheet.offcanvas.offcanvas-bottom {
transform: translateY(100%) !important;
}
#offcanvasNavbarDark.offcanvas.offcanvas-bottom.show:not(.hiding),
#offcanvasNavbarDark.offcanvas.offcanvas-bottom.showing,
#paymentSheet.offcanvas.offcanvas-bottom.show:not(.hiding),
#paymentSheet.offcanvas.offcanvas-bottom.showing,
#inquirySheet.offcanvas.offcanvas-bottom.show:not(.hiding),
#inquirySheet.offcanvas.offcanvas-bottom.showing,
#qrisSheet.offcanvas.offcanvas-bottom.show:not(.hiding),
#qrisSheet.offcanvas.offcanvas-bottom.showing,
#stepsSheet.offcanvas.offcanvas-bottom.show:not(.hiding),
#stepsSheet.offcanvas.offcanvas-bottom.showing {
transform: translateY(var(--sheet-drag-y, 0px)) !important;
}
#offcanvasNavbarDark.offcanvas.offcanvas-bottom.hiding,
#paymentSheet.offcanvas.offcanvas-bottom.hiding,
#inquirySheet.offcanvas.offcanvas-bottom.hiding,
#qrisSheet.offcanvas.offcanvas-bottom.hiding,
#stepsSheet.offcanvas.offcanvas-bottom.hiding {
transform: translateY(100%) !important;
}
/* ?? Disable transition during drag ?? */
#offcanvasNavbarDark.is-dragging,
#paymentSheet.is-dragging,
#inquirySheet.is-dragging,
#qrisSheet.is-dragging,
#stepsSheet.is-dragging {
transition: none !important;
}
/* ?? paymentSheet + inquirySheet drag handle ?? */
#paymentSheet .drag-handle,
#inquirySheet .drag-handle,
#qrisSheet .drag-handle,
#stepsSheet .drag-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--bs-sheet-handle);
margin: 0 auto;
flex-shrink: 0;
cursor: grab;
}
/* ?? All sheet headers: larger drag target ?? */
#paymentSheet .offcanvas-header,
#inquirySheet .offcanvas-header,
#qrisSheet .offcanvas-header,
#stepsSheet .offcanvas-header,
#offcanvasNavbarDark .offcanvas-header {
touch-action: none;
user-select: none;
cursor: grab;
}
/* ?? paymentSheet + inquirySheet header ?? */
#paymentSheet .offcanvas-header,
#inquirySheet .offcanvas-header,
#qrisSheet .offcanvas-header,
#stepsSheet .offcanvas-header {
padding: 12px 20px 14px !important;
border-bottom: 1px solid var(--bs-sheet-divider) !important;
}
/* ?? paymentSheet + inquirySheet close button ?? */
#paymentSheet .btn-close,
#inquirySheet .btn-close,
#qrisSheet .btn-close,
#stepsSheet .btn-close {
filter: none !important;
background: var(--bs-sheet-close-bg) !important;
border-radius: 50%;
width: 28px;
height: 28px;
padding: 0 !important;
opacity: 1;
background-image: none !important;
display: flex;
align-items: center;
justify-content: center;
}
#paymentSheet .btn-close::before,
#inquirySheet .btn-close::before,
#qrisSheet .btn-close::before {
content: "\00d7";
font-size: 1.2rem;
line-height: 1;
color: var(--bs-sheet-close-color);
font-weight: 300;
}
/* ?? paymentSheet + inquirySheet body ?? */
#paymentSheet .offcanvas-body,
#inquirySheet .offcanvas-body,
#qrisSheet .offcanvas-body {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ?? Backdrop ?? */
.offcanvas-backdrop.show {
opacity: 0.4 !important;
backdrop-filter: blur(2px);
}
/* ?? Drag Handle ?? */
#offcanvasNavbarDark .drag-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--bs-sheet-handle);
margin: 0 auto;
flex-shrink: 0;
}
/* ?? Header ?? */
#offcanvasNavbarDark .offcanvas-header {
padding: 12px 20px 10px !important;
border-bottom: 1px solid var(--bs-sheet-divider) !important;
position: relative;
}
#offcanvasNavbarDark .offcanvas-title {
font-size: 0.8rem !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-sheet-text-muted) !important;
margin-top: 4px;
}
#offcanvasNavbarDark .btn-close,
#offcanvasNavbarDark .btn-close-white {
filter: none !important;
background: var(--bs-sheet-close-bg) !important;
border-radius: 50%;
width: 28px;
height: 28px;
padding: 0 !important;
opacity: 1;
background-image: none !important;
position: absolute;
top: 14px;
right: 16px;
display: flex;
align-items: center;
justify-content: center;
}
#offcanvasNavbarDark .btn-close::before {
content: "\00d7";
font-size: 1.2rem;
line-height: 1;
color: var(--bs-sheet-close-color);
font-weight: 300;
}
/* ?? Body ?? */
#offcanvasNavbarDark .offcanvas-body {
padding: 8px 0 !important;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
}
/* ?? Navigation List Reset ?? */
#offcanvasNavbarDark .navbar-nav {
flex-direction: column !important;
margin: 0 !important;
padding: 0 8px !important;
gap: 0 !important;
}
#offcanvasNavbarDark .navbar-nav .nav-item {
margin: 0;
list-style: none;
}
/* ?? Navigation Links ?? */
#offcanvasNavbarDark .navbar-nav .nav-link {
display: flex !important;
align-items: center;
gap: 0.5rem;
color: var(--bs-sheet-text) !important;
font-size: 0.95rem !important;
font-weight: 450;
border-radius: 1rem;
transition: background 0.2s ease, transform 0.15s ease;
text-decoration: none;
position: relative;
margin: 1px 0;
}
#offcanvasNavbarDark .navbar-nav .nav-link:hover,
#offcanvasNavbarDark .navbar-nav .nav-link:focus {
background: var(--bs-sheet-hover);
}
#offcanvasNavbarDark .navbar-nav .nav-link:active {
background: var(--bs-sheet-active);
transform: scale(0.98);
}
#offcanvasNavbarDark .navbar-nav .nav-link i.mdi {
font-size: 1.25rem;
width: 1.5rem;
text-align: center;
color: var(--bs-sheet-text-muted);
flex-shrink: 0;
}
#offcanvasNavbarDark .navbar-nav .nav-link span {
flex: 1;
}
#offcanvasNavbarDark .navbar-nav .nav-item.active > .nav-link {
background: var(--bs-sheet-active);
color: var(--bs-sheet-accent) !important;
}
#offcanvasNavbarDark .navbar-nav .nav-item.active > .nav-link i.mdi {
color: var(--bs-sheet-accent);
}
/* ?? Dropdown toggle chevron (replace caret) ?? */
#offcanvasNavbarDark .navbar-nav .nav-link.dropdown-toggle::after {
display: none !important;
}
#offcanvasNavbarDark .navbar-nav .nav-link[data-bs-submenu]::after {
content: "\203A";
font-size: 1.5rem;
line-height: 1;
color: var(--bs-sheet-chevron);
margin-left: auto;
font-weight: 300;
}
/* ?? Hide original dropdown-menus (replaced by JS sub-sheets) ?? */
#offcanvasNavbarDark .dropdown-menu {
display: none !important;
}
/* ?? Divider ?? */
#offcanvasNavbarDark .navbar-nav + .navbar-nav {
border-top: 1px solid var(--bs-sheet-divider);
margin-top: 4px !important;
padding-top: 4px !important;
}
/* ?? User Account Card ?? */
#offcanvasNavbarDark .nav-item.user-account > .nav-link {
background: var(--bs-sheet-card-bg);
}
/* ?? Sign-in Button ?? */
#offcanvasNavbarDark .user-login .btn {
width: 100%;
}
#offcanvasNavbarDark .user-login.ms-2 {
margin-left: 0 !important;
}
/* ?? hr dividers in bottom sheet ?? */
#offcanvasNavbarDark hr.dropdown-divider {
border-color: var(--bs-sheet-divider);
margin: 4px 16px;
}
/* ?? Badge ?? */
#offcanvasNavbarDark .badge.bg-danger {
font-size: 0.65rem;
padding: 3px 6px;
border-radius: 8px;
}
/* ?? Sub-sheet Panel ?? */
.bottom-sub-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1070;
max-height: 85vh;
min-height: 200px;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
background: var(--bs-sheet-bg);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--bs-sheet-shadow);
color: var(--bs-sheet-text);
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.bottom-sub-sheet.show {
transform: translateY(0);
}
/* Sub-sheet header */
.bottom-sub-sheet .sub-sheet-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px 10px;
border-bottom: 1px solid var(--bs-sheet-divider);
flex-shrink: 0;
}
.bottom-sub-sheet .sub-sheet-header .drag-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--bs-sheet-handle);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6px;
}
.bottom-sub-sheet .sub-sheet-back {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--bs-sheet-close-bg);
color: var(--bs-sheet-text-muted);
font-size: 1.2rem;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s ease;
padding: 0;
line-height: 1;
}
.bottom-sub-sheet .sub-sheet-back:hover {
background: var(--bs-sheet-hover);
}
.bottom-sub-sheet .sub-sheet-title {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-sheet-text-muted);
flex: 1;
text-align: center;
padding-right: 40px;
}
/* Sub-sheet body */
.bottom-sub-sheet .sub-sheet-body {
padding: 8px 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list {
list-style: none;
margin: 0;
padding: 0 8px;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list li {
margin: 1px 0;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: var(--bs-sheet-text);
text-decoration: none;
font-size: 0.95rem;
font-weight: 450;
border-radius: 12px;
transition: background 0.2s ease, transform 0.15s ease;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a:hover {
background: var(--bs-sheet-hover);
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a:active {
background: var(--bs-sheet-active);
transform: scale(0.98);
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a i.mdi {
font-size: 1.25rem;
width: 1.5rem;
text-align: center;
color: var(--bs-sheet-text-muted);
flex-shrink: 0;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a span {
flex: 1;
}
.bottom-sub-sheet .sub-sheet-body .sub-sheet-list a[data-bs-submenu]::after {
content: "\203A";
font-size: 1.5rem;
line-height: 1;
color: var(--bs-sheet-chevron);
font-weight: 300;
}
/* Backdrop for sub-sheets */
.sub-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 1069;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.sub-sheet-backdrop.show {
opacity: 1;
pointer-events: auto;
}
/* ?? Prevent body scroll when bottom sheet is open ?? */
body.bottom-sheet-open {
overflow: hidden;
touch-action: none;
}
/* Override Bootstrap offcanvas for smaller width devices */
.offcanvas-start,
.offcanvas-end {
max-width: 100% !important;
}
}
|
Download
