/* Theme Name: Dynasty Market description: Clean modern full width theme built from understrap. Requires Advanced Custom Fields plugin. Author: Miles Miller Author URI: Design Forge Template: understrap Version: 1.0.2 */ /* ── Global Dark Theme Resets ───────────────────────────────────────────── */ /* Prefer --bg-main / --bg-secondary / --bg-tertiary from dmb-core.css */ body { background-color: var(--bg-main, #080b11) !important; color: #e2e8f0 !important; font-family: 'Poppins', 'Roboto', sans-serif; margin: 0; padding: 0; } #page { background-color: var(--bg-main, #080b11); } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #080b11; } ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #334155; } /* ── CSS Variables for sidebar widths ───────────────────────────────────── */ :root { --sidebar-width: 240px; --sidebar-collapsed-width: 70px; --sidebar-current-width: var(--sidebar-width); --dmb-ticker-h: 40px; --dmb-mobile-header-h: 52px; } /* ── App Layout — flex shell, sidebar is fixed so layout is margin-driven ── */ .dmb-app-layout { display: block; min-height: 100vh; width: 100%; } /* Main content shifts right by the sidebar width, transitions on collapse */ .dmb-main-content { margin-left: var(--sidebar-current-width); min-width: 0; padding: 0; background-color: var(--bg-main, #080b11); transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; } /* Fallback padding for standard pages without full-width wrappers */ .dmb-main-content:not(:has(.dmb-shell)):not(:has(.pp-wrapper)):not(:has(.tf-wrapper)):not(:has(.im-wrapper)):not(:has(.pf-wrapper)):not(:has(.stacks-wrapper)):not(:has(.news-wrapper)):not(:has(.mt-wrapper)):not(:has(.ds-wrap)):not(:has(.pf-wrap)):not(:has(.dmb-portal-container)):not(:has(.cn-feed-selector-wrapper)) { padding: 30px; } /* When a page uses .dmb-shell, it owns its own padding */ .dmb-main-content:has(.dmb-shell) { padding: 0; } /* When sidebar is collapsed JS adds .sidebar-collapsed to */ body.sidebar-collapsed .dmb-main-content { margin-left: var(--sidebar-collapsed-width); } /* ── Sidebar — always fixed to left, always on top ─────────────────────── */ #dmb-sidebar { width: var(--sidebar-width); background-color: var(--bg-secondary, #0c0f17); border-right: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 1050; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; box-shadow: 2px 0 24px rgba(0,0,0,0.4); } /* Sidebar Collapsed State */ #dmb-sidebar.collapsed { width: var(--sidebar-collapsed-width); } /* Sidebar Brand Area */ #dmb-sidebar .sidebar-brand { height: 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; white-space: nowrap; flex-shrink: 0; } #dmb-sidebar .sidebar-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; width: 100%; overflow: hidden; } /* * Logo swap: * - Expanded: .sidebar-logo-full only (branding/logo-inline.png) * - Collapsed: .sidebar-logo-compact only (WP custom logo / icon) * Use both #dmb-sidebar.collapsed and body.sidebar-collapsed so toggle never double-shows. */ #dmb-sidebar .sidebar-brand .sidebar-logo-full { display: flex; align-items: center; } #dmb-sidebar .sidebar-brand .sidebar-logo-compact { display: none !important; } #dmb-sidebar.collapsed .sidebar-brand .sidebar-logo-full, body.sidebar-collapsed #dmb-sidebar .sidebar-brand .sidebar-logo-full { display: none !important; } #dmb-sidebar.collapsed .sidebar-brand .sidebar-logo-compact, body.sidebar-collapsed #dmb-sidebar .sidebar-brand .sidebar-logo-compact { display: flex !important; align-items: center; justify-content: center; } #dmb-sidebar .sidebar-brand .sidebar-logo-full .site-logo-img { height: 36px; width: auto; max-width: 170px; object-fit: contain; display: block; } #dmb-sidebar .sidebar-brand .sidebar-logo-compact .site-logo-img { height: 32px; width: 32px; max-width: 32px; object-fit: contain; display: block; } #dmb-sidebar.collapsed .sidebar-brand, body.sidebar-collapsed #dmb-sidebar .sidebar-brand { padding: 0; justify-content: center; } #dmb-sidebar.collapsed .sidebar-brand a, body.sidebar-collapsed #dmb-sidebar .sidebar-brand a { justify-content: center; gap: 0; } /* Compact icon mark (collapsed fallback when no WP custom logo) */ #dmb-sidebar .sidebar-brand .logo-icon { font-size: 1.4rem; color: #00c076; display: flex; align-items: center; justify-content: center; width: 30px; flex-shrink: 0; } #dmb-sidebar .sidebar-brand .logo-text { font-family: 'Quantico', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; transition: opacity 0.2s ease; white-space: nowrap; overflow: hidden; } #dmb-sidebar.collapsed .sidebar-brand .logo-text { opacity: 0; pointer-events: none; max-width: 0; } #dmb-sidebar .sidebar-brand .accent-text { color: #00c076; } /* Sidebar Navigation */ #dmb-sidebar .sidebar-nav { flex: 1; padding: 24px 0; overflow-y: auto; overflow-x: hidden; } #dmb-sidebar .sidebar-nav::-webkit-scrollbar { width: 4px; } #dmb-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; } #dmb-sidebar .sidebar-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } #dmb-sidebar .sidebar-nav li { padding: 0 14px; } #dmb-sidebar .sidebar-nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; color: #94a3b8; text-decoration: none; border-radius: 8px; font-size: 0.88rem; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; } #dmb-sidebar .sidebar-nav .nav-icon { font-size: 1.15rem; width: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #dmb-sidebar .sidebar-nav .nav-text { transition: opacity 0.2s ease; } #dmb-sidebar.collapsed .sidebar-nav .nav-text { opacity: 0; pointer-events: none; } #dmb-sidebar .sidebar-nav a:hover { color: #fff; background-color: rgba(255, 255, 255, 0.03); } #dmb-sidebar .sidebar-nav li.active a { color: #fff; background-color: rgba(0, 192, 118, 0.1); border-left: 3px solid #00c076; padding-left: 9px; } /* Sidebar Footer / Collapse Toggle */ #dmb-sidebar .sidebar-footer { padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; flex-shrink: 0; } #dmb-sidebar #sidebar-toggle-btn { width: 100%; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: none; border: none; color: #64748b; cursor: pointer; border-radius: 6px; font-size: 0.82rem; font-weight: 600; transition: all 0.2s ease; white-space: nowrap; } #dmb-sidebar #sidebar-toggle-btn:hover { color: #fff; background-color: rgba(255, 255, 255, 0.03); } #dmb-sidebar.collapsed #sidebar-toggle-btn .toggle-text { opacity: 0; pointer-events: none; max-width: 0; overflow: hidden; } /* ── Mobile Layout ──────────────────────────────────────────────────────── */ /* Fixed over the top ticker; hides on scroll-down, returns on scroll-up */ .dmb-mobile-header { display: none; height: var(--dmb-mobile-header-h, 52px); background-color: rgba(12, 15, 23, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); align-items: center; padding: 0 14px; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 1055; /* above ticker (1045) so menu can cover it when visible */ transform: translateY(0); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.35); } /* When ticker is active, pin header just below ticker until scroll-hide kicks in — actually user wants header OVER ticker on scroll-up. Keep top: 0 always. */ body.dmb-nav-hidden .dmb-mobile-header { transform: translateY(-110%); box-shadow: none; pointer-events: none; } .dmb-mobile-header #mobile-sidebar-toggle { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #fff; font-size: 1.15rem; cursor: pointer; padding: 8px 10px; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } .dmb-mobile-header .mobile-logo-text { font-family: 'Quantico', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: 0.05em; } .dmb-mobile-header .accent-text { color: #00c076; } .dmb-mobile-header .mobile-spacer { width: 40px; } /* ── Ticker strip — desktop: bottom, inset by sidebar width ──────────────── */ .dmb-ticker-wrapper { position: fixed; bottom: 0; top: auto; left: var(--sidebar-current-width); right: 0; z-index: 1040; transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } body.sidebar-collapsed .dmb-ticker-wrapper { left: var(--sidebar-collapsed-width); } .dmb-ticker-wrapper > * { pointer-events: auto; } /* Desktop sidebar full height; content clears bottom ticker */ body.cn-ticker-active #dmb-sidebar { top: 0; height: 100vh; } .dmb-main-content { padding-bottom: 56px; } /* ── Submenu Navigation ─────────────────────────────────────────────────── */ #dmb-sidebar .sidebar-nav .has-submenu { padding: 0; } #dmb-sidebar .sidebar-nav .submenu-header { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; margin: 0 14px; color: #94a3b8; cursor: pointer; border-radius: 8px; font-size: 0.88rem; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; position: relative; user-select: none; } #dmb-sidebar .sidebar-nav .submenu-header:hover { color: #fff; background-color: rgba(255, 255, 255, 0.03); } #dmb-sidebar .sidebar-nav .submenu-arrow { margin-left: auto; font-size: 0.7rem; transition: transform 0.25s ease; color: #64748b; display: flex; align-items: center; } #dmb-sidebar .sidebar-nav .has-submenu.submenu-open .submenu-arrow { transform: rotate(180deg); } #dmb-sidebar .sidebar-nav .submenu-list { list-style: none; padding: 4px 0 4px 18px; margin: 0; display: none; flex-direction: column; gap: 4px; } #dmb-sidebar .sidebar-nav .has-submenu.submenu-open .submenu-list { display: flex; } /* League: always expanded, no caret / not collapsible */ #dmb-sidebar .sidebar-nav .has-submenu.submenu-always-open > .submenu-header { cursor: default; pointer-events: none; } #dmb-sidebar .sidebar-nav .has-submenu.submenu-always-open > .submenu-header .submenu-arrow { display: none !important; } #dmb-sidebar .sidebar-nav .has-submenu.submenu-always-open > .submenu-list { display: flex !important; } #dmb-sidebar.collapsed .sidebar-nav .has-submenu.submenu-always-open > .submenu-header { pointer-events: none; } #dmb-sidebar.collapsed .sidebar-nav .submenu-header .submenu-arrow { display: none; } #dmb-sidebar.collapsed .sidebar-nav .submenu-list { padding-left: 0; display: flex; } #dmb-sidebar.collapsed .sidebar-nav .submenu-header { pointer-events: none; background: none !important; } /* ── Responsive — mobile only ────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --dmb-ticker-h: 36px; } .dmb-mobile-header { display: flex; } #dmb-sidebar { left: calc(-1 * var(--sidebar-width)); top: 0 !important; height: 100vh !important; transition: left 0.3s ease, width 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1100; /* drawer above header + ticker */ } #dmb-sidebar.mobile-open { left: 0; } .dmb-main-content { margin-left: 0 !important; padding: 12px 12px 28px; width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; padding-bottom: 28px; } .dmb-main-content:has(.pp-wrapper), .dmb-main-content:has(.tf-wrapper), .dmb-main-content:has(.im-wrapper), .dmb-main-content:has(.pf-wrapper), .dmb-main-content:has(.stacks-wrapper), .dmb-main-content:has(.news-wrapper), .dmb-main-content:has(.mt-wrapper), .dmb-main-content:has(.ds-wrap), .dmb-main-content:has(.dmb-shell) { padding: 0 0 28px !important; } /* Full-width top ticker on mobile */ .dmb-ticker-wrapper { left: 0 !important; right: 0; top: 0; bottom: auto; z-index: 1045; } .dmb-mobile-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--dmb-mobile-header-h, 52px) + env(safe-area-inset-top, 0px)); } .dmb-main-content table { max-width: 100%; } .dmb-main-content img, .dmb-main-content video, .dmb-main-content canvas, .dmb-main-content iframe { max-width: 100%; height: auto; } .site-main, .wrapper, .container, .container-fluid { max-width: 100%; padding-left: 0; padding-right: 0; } } @media (max-width: 480px) { .dmb-main-content { padding: 10px 10px 24px; } .dmb-mobile-header .mobile-logo-text { font-size: 0.92rem; } } @media (max-width: 991px) and (min-width: 769px) { .dmb-main-content { padding-left: 16px; padding-right: 16px; } }