/* ============================================================ CABINET (NoDeny example) ============================================================ */ :root { /* Fallback only — cabinet.js measures the real theme header height at runtime and overrides this via inline style, so the sidebar/ login card never sit under a sticky/absolute site header regardless of which theme the plugin is used on. */ --header-height: 80px; /* Used by normal-flow padding (.main-content/.login-page). JS sets this to 0 when the theme header is in normal flow (position: static/ relative) — the browser already pushes flow content down for those on its own, so adding the height again here would double it. It only matches --header-height when the header is fixed/sticky/absolute. */ --header-height-flow: 80px; /* #wpadminbar's height when the viewer is a logged-in admin — added only to position:fixed elements (see usages below), never to normal-flow padding, since the browser already shifts flow content down for it via html{margin-top}. */ --admin-bar-height: 0px; } .cabinet-wrapper { width: 100%; margin: 0 auto; /* Without this, every text element inherits whatever global font-family the host theme/page-builder sets on (Elementor sites often set an unusual display font here) — its line-height/glyph metrics can be different enough from what our spacing was tuned against to cause visible overlap between stacked lines (e.g. stat card label/value). */ font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); line-height: 1.5; } .cabinet-form { background: var(--bg-card); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-2xl); } .cabinet-form h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-lg); } .cabinet-form .form-group { margin-bottom: var(--space-md); } .cabinet-form .form-group label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-sm); color: var(--text-primary); } .cabinet-form .form-group input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); font-size: var(--fs-sm); background: var(--bg-input); color: var(--text-primary); transition: border-color var(--transition-fast); } .cabinet-form .form-group input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none; } .cabinet-result { display: none; margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); font-size: var(--fs-sm); } .cabinet-success { background: var(--color-accent-light); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-md); color: var(--text-primary); } .cabinet-error { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--color-danger); border-radius: var(--radius-md); padding: 12px 16px; color: var(--color-danger); font-size: var(--fs-sm); line-height: 1.4; } .cabinet-loading { text-align: center; color: var(--text-tertiary); padding: var(--space-md); } .cabinet-api-info { margin-top: var(--space-2xl); padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } .cabinet-api-info h3 { font-size: var(--fs-lg); margin-bottom: var(--space-md); } .cabinet-api-info pre { background: var(--bg-code); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════════ CABINET — Glassmorphism Personal Cabinet Styles (Imported from cabinet/frontend/css/cabinet.css) ══════════════════════════════════════════════════════════════ */ /* ── CSS Custom Properties (scoped to cabinet) ── */ .cabinet-wrapper { --glass-bg: rgba(255, 255, 255, 0.2); --glass-border: rgba(255, 255, 255, 0.4); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --glass-blur: blur(16px); --bg-gradient-1: #c7d2fe; --bg-gradient-2: #e9d5ff; --bg-gradient-3: #a7f3d0; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #94a3b8; --text-inverse: #ffffff; --bg-card: rgba(255, 255, 255, 0.25); --bg-input: rgba(255, 255, 255, 0.15); --border-color: rgba(255, 255, 255, 0.35); --hover-bg: rgba(255, 255, 255, 0.15); --color-primary: #f39200; --color-primary-rgb: 243, 146, 0; --color-primary-light: rgba(var(--color-primary-rgb), 0.15); --color-primary-dark: #f39200; --color-secondary: #0069b0; --color-success: #00963f; --color-success-light: rgba(16, 185, 129, 0.15); --color-danger: #ef4444; --color-danger-light: rgba(239, 68, 68, 0.15); --color-warning: #f59e0b; --color-warning-light: rgba(245, 158, 11, 0.15); --color-info: #3b82f6; --color-info-light: rgba(59, 130, 246, 0.15); --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sidebar-width: 260px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Admin-configurable fine-tune correction added on top of the JS-measured --header-height (Design settings → header offset). Defaults to 0px when not set; switches to the mobile value below ≤768px since theme headers are often a different height there. */ --header-offset-desktop: 0px; --header-offset-mobile: 0px; --header-offset-extra: var(--header-offset-desktop, 0px); } @media (max-width: 768px) { .cabinet-wrapper { --header-offset-extra: var(--header-offset-mobile, 0px); } } /* High contrast solid styles when mobile background is hidden */ @media (max-width: 768px) { @supports (-webkit-touch-callout: none) { body.perf-hide-mobile-bg .cabinet-wrapper { --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(0, 0, 0, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); --bg-card: #ffffff; --bg-input: rgba(0, 0, 0, 0.03); --border-color: rgba(0, 0, 0, 0.06); --hover-bg: rgba(0, 0, 0, 0.03); --text-muted: #64748b; --text-inverse: #ffffff; } html[data-theme="dark"] body.perf-hide-mobile-bg .cabinet-wrapper { --glass-bg: #1e293b; --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --bg-card: #1e293b; --bg-input: rgba(255, 255, 255, 0.05); --border-color: rgba(255, 255, 255, 0.08); --hover-bg: rgba(255, 255, 255, 0.05); --text-muted: #94a3b8; --text-inverse: #000000; } } } /* ── Dark Theme (scoped) ── */ /* NOTE: data-theme is set on by header.php inline script and main.js. The cabinet inherits these global variables, but also has its own scoped overrides below. Using global scope [data-theme="dark"] .cabinet-wrapper ensures dark mode activates when . */ [data-theme="dark"] .cabinet-wrapper { --bg-gradient-1: #0f172a; --bg-gradient-2: #1e1b4b; --bg-gradient-3: #172554; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --bg-card: rgba(30, 41, 59, 0.6); --bg-input: rgba(255, 255, 255, 0.05); --border-color: rgba(255, 255, 255, 0.08); --hover-bg: rgba(255, 255, 255, 0.05); --glass-bg: rgba(30, 41, 59, 0.4); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ── Force Dark Theme & Background for Cabinet Page ── */ body.cabinet-active-page { color: #f1f5f9; min-height: 100vh; } body.cabinet-active-page .cabinet-wrapper { --bg-gradient-1: #0f172a; --bg-gradient-2: #1e1b4b; --bg-gradient-3: #172554; --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --bg-card: rgba(30, 41, 59, 0.6); --bg-input: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.15); --hover-bg: rgba(255, 255, 255, 0.1); --glass-bg: rgba(30, 41, 59, 0.5); --glass-border: rgba(255, 255, 255, 0.15); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ── Login Page ── */ .cabinet-wrapper .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; padding-top: calc(var(--header-height-flow, 80px) + 20px + var(--header-offset-extra, 0px)); } .cabinet-wrapper .login-card { width: 100%; max-width: 420px; padding: 40px 36px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius-xl); transition: var(--transition); } .cabinet-wrapper .login-card:hover { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12); } .cabinet-wrapper .login-logo { text-align: center; margin-bottom: 32px; } .cabinet-wrapper .login-logo .logo-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #a855f7)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; color: white; box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.3); } .cabinet-wrapper .login-logo h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); margin-bottom: 8px; } .cabinet-wrapper .login-logo p { font-size: 0.875rem; color: var(--text-muted); } /* ── Form Elements ── */ .cabinet-wrapper .form-group { margin-bottom: 20px; } .cabinet-wrapper .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; } .cabinet-wrapper .form-input { width: 100%; padding: 12px 16px; font-size: 0.95rem; font-family: var(--font-family); color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); outline: none; transition: var(--transition); } .cabinet-wrapper .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); background: var(--bg-card); } /* iOS Safari auto-zooms the whole page on focus when an input's font-size is under 16px — that's the "page slightly enlarges" glitch on mobile. Bump it to exactly 16px only on phone widths so desktop keeps 0.95rem. */ @media (max-width: 768px) { .cabinet-wrapper .form-input { font-size: 16px; } } .cabinet-wrapper .form-input::placeholder { color: var(--text-muted); } /* ── Buttons ── */ .cabinet-wrapper .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-size: 0.95rem; font-weight: 600; font-family: var(--font-family); border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); text-decoration: none; white-space: nowrap; } .cabinet-wrapper .btn:disabled { opacity: 0.5; cursor: not-allowed; } .cabinet-wrapper .btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #a855f7)); color: white; box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3); } .cabinet-wrapper .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--color-primary-rgb), 0.4); } .cabinet-wrapper .btn-success { background: linear-gradient(135deg, var(--color-success), #059669); color: white; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); } .cabinet-wrapper .btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4); } .cabinet-wrapper .btn-secondary { background: var(--bg-input, rgba(2, 9, 16, 0.05)); color: var(--text-primary); border: 1px solid var(--border-color, var(--glass-border)); } .cabinet-wrapper .btn-secondary:hover:not(:disabled) { background: var(--hover-bg, rgba(2, 9, 16, 0.08)); } .cabinet-wrapper .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color, var(--glass-border)); } .cabinet-wrapper .btn-outline:hover:not(:disabled) { background: var(--hover-bg, rgba(2, 9, 16, 0.06)); } .cabinet-wrapper .btn-danger { background: linear-gradient(135deg, var(--color-danger, #ef4444), #dc2626); color: white; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); } .cabinet-wrapper .btn-danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4); } .cabinet-wrapper .btn-sm { padding: 8px 14px; font-size: 0.85rem; } .cabinet-wrapper .btn-block { width: 100%; } /* ── Cabinet Section Override ── */ .page-template-cabinet .section { padding-top: 0; position: static; } /* ── Keep header visible on cabinet page (no hide-on-scroll) ── */ .page-template-cabinet .header-hidden { transform: none !important; } /* ── Banner always visible on cabinet page (header never hides) ── */ .page-template-cabinet .no-light-banner { opacity: 1 !important; pointer-events: auto !important; animation: none !important; transform: translateX(-50%) translateY(0) !important; } /* ── Ensure header stays above cabinet sidebar and layout ── */ .cabinet-active-page .header, .cabinet-active-page .site-header, .cabinet-active-page #masthead { z-index: 2147483647 !important; position: fixed !important; width: 100% !important; left: 0 !important; top: 0 !important; } /* ── Ensure no parent creates a stacking context that traps the sidebar ── */ .page-template-cabinet #page, .page-template-cabinet #main, .page-template-cabinet .site-main { position: static !important; transform: none !important; isolation: auto !important; } /* ── Hide footer on cabinet page (covers common theme footer conventions) ── */ .page-template-cabinet .site-footer, .page-template-cabinet .footer, .page-template-cabinet #colophon { display: none; } /* ── Layout ── */ .cabinet-wrapper .app-layout { display: flex; min-height: 100vh; } /* ══════════════════════════════════════════════════════════════ SIDEBAR — redesigned to match site's glassmorphism design language ══════════════════════════════════════════════════════════════ */ #sidebar { position: fixed; /* Same formula as .main-content's top-bar: header height + main-content's padding-top (24px) + top-bar's own margin-top (8px) — keeps the sidebar's top edge level with the top-bar card. */ top: calc(var(--header-height) + 24px + 8px + var(--header-offset-extra, 0px) + var(--admin-bar-height, 0px)); left: 12px; width: var(--sidebar-width); height: auto; max-height: calc(100vh - var(--header-height) - 44px - var(--header-offset-extra, 0px) - var(--admin-bar-height, 0px)); z-index: 900; /* Frosted glass — transparent with strong blur */ background: var(--glass-bg); backdrop-filter: var(--glass-blur) saturate(1.8); -webkit-backdrop-filter: var(--glass-blur) saturate(1.8); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 82, 255, 0.04); display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: background var(--transition-base), box-shadow var(--transition-base); } [data-theme="dark"] #sidebar { background: rgba(13, 15, 22, 0.48); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(74, 140, 255, 0.06); } /* ── Brand header ── */ #sidebar .sidebar-head { display: flex; align-items: center; gap: 11px; padding: 18px 16px 15px; position: relative; flex-shrink: 0; } /* Gradient accent line below the brand header */ #sidebar .sidebar-head::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 82, 255, 0.25) 30%, rgba(168, 85, 247, 0.25) 70%, transparent 100%); } #sidebar .sidebar-brand { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary, #a855f7) 100%); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-inverse); flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3), 0 0 0 1px rgba(0, 82, 255, 0.12) inset; } #sidebar .sidebar-label { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; letter-spacing: -0.01em; line-height: 1.2; } /* ── Navigation ── */ #sidebar .sidebar-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; overflow-y: auto; scrollbar-width: none; } #sidebar .sidebar-nav::-webkit-scrollbar { display: none; } /* ── Nav link ── */ #sidebar .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 10px; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } /* Icon container — small rounded square */ #sidebar .sidebar-link .icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.04); transition: background 0.18s ease, color 0.18s ease; } [data-theme="dark"] #sidebar .sidebar-link .icon { background: rgba(255, 255, 255, 0.06); } #sidebar .sidebar-link .text { white-space: nowrap; flex: 1; } /* Hover */ #sidebar .sidebar-link:hover { background: var(--color-primary-light); color: var(--color-primary); } #sidebar .sidebar-link:hover .icon { background: rgba(0, 82, 255, 0.1); color: var(--color-primary); } /* Active — gradient, glow, white text */ #sidebar .sidebar-link.active { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary, #a855f7) 100%); color: var(--text-inverse); font-weight: 600; box-shadow: 0 4px 18px rgba(0, 82, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } #sidebar .sidebar-link.active .icon { background: rgba(255, 255, 255, 0.18); color: var(--text-inverse); } #sidebar .sidebar-link.active:hover { box-shadow: 0 6px 22px rgba(0, 82, 255, 0.36), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } /* ── Divider ── */ #sidebar .sidebar-divider { flex-shrink: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.18), transparent); margin: 6px 4px; } [data-theme="dark"] #sidebar .sidebar-divider { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); } /* ── Footer / logout ── */ #sidebar .sidebar-foot { padding: 8px 8px calc(14px + env(safe-area-inset-bottom, 0px)); position: relative; flex-shrink: 0; } #sidebar .sidebar-foot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.2) 40%, transparent 100%); } #sidebar .sidebar-foot .sidebar-link { color: var(--color-danger); } #sidebar .sidebar-foot .sidebar-link .icon { background: rgba(239, 68, 68, 0.07); color: var(--color-danger); } #sidebar .sidebar-foot .sidebar-link:hover { background: rgba(239, 68, 68, 0.08); color: var(--color-danger); } #sidebar .sidebar-foot .sidebar-link:hover .icon { background: rgba(239, 68, 68, 0.15); } /* ── Main Content ── */ .cabinet-wrapper .main-content { flex: 1; margin-left: calc(var(--sidebar-width) + 24px); min-width: 0; min-height: 100vh; padding-top: calc(var(--header-height-flow, 80px) + 24px + var(--header-offset-extra, 0px)); } .cabinet-wrapper .main-content>* { max-width: 1320px; margin-left: auto; margin-right: auto; position: relative; } /* Dynamically center content on the entire screen ONLY on very large monitors (>1600px) so it doesn't overlap the sidebar on laptops. */ @media (min-width: 1600px) { .cabinet-wrapper .main-content>* { left: calc((var(--sidebar-width) + 24px) / -2); } } /* ── Top Bar ── */ .cabinet-wrapper .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; margin-bottom: 24px; margin-top: 8px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); position: relative; } .cabinet-wrapper .top-bar-left { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; } /* Hide duplicate balance on desktop too (shown in stats grid) */ .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(3) { display: none; } /* Desktop: contract as floating oval pill above top-bar (value only, no label) */ .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(1) { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 22px; background: var(--color-primary); border-radius: 50px; box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.3); white-space: nowrap; z-index: 2; min-width: 0; } .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(1) .label { display: none; } .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(1) .value { font-size: 1rem; font-weight: 700; color: var(--text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Desktop: subscriber centered in top-bar (value only, no label) */ .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(2) { flex: 1; text-align: center; min-width: 0; } .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(2) .label { display: none; } .cabinet-wrapper .top-bar-left .top-bar-item:nth-child(2) .value { font-size: 1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Desktop (≥769px): hide hamburger and right panel — not needed on PC. Mobile re-enables both (display:flex) inside its own @media block. */ @media (min-width: 769px) { .cabinet-wrapper .top-bar-right .sidebar-toggle, .cabinet-wrapper .top-bar-right { display: none; } } /* ── Theme Toggle ── */ .cabinet-wrapper .theme-toggle { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--glass-bg); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: var(--transition); } .cabinet-wrapper .theme-toggle:hover { background: var(--hover-bg); } /* ── Mobile sidebar toggle ── */ .cabinet-wrapper .sidebar-toggle { display: none; width: 40px; height: 40px; /* box-sizing/padding/margin/line-height reset explicitly — this is a real