/* Themes (high-end, simple MVP) Dark mode is now the default across the whole website. Loaded after style.css/highend.css so it can override light backgrounds. */ :root{ /* Accent */ --knox-accent:#8b5cf6; --knox-accent-2:#6f7cff; /* Base surfaces */ --knox-bg:#0b1220; --knox-text:#e5e7eb; --knox-muted:#9aa4b2; /* Panels / cards */ --knox-card:#0f172a; --knox-card-2:#0f1b33; --knox-card-border:rgba(226,232,240,.10); /* Inputs */ --knox-input-bg:rgba(255,255,255,.04); --knox-input-border:rgba(226,232,240,.14); /* Shadows */ --knox-shadow:0 14px 38px rgba(0,0,0,.35); } /* Ensure native form popups (select/date/time) use dark UI */ html, body{ color-scheme: dark; } input, select, textarea{ color-scheme: dark; } /* Dropdown menu items (options) */ select option, select optgroup{ background: var(--knox-card) !important; color: var(--knox-text) !important; } /* Optional accent-only themes */ body.knox-theme--minimal{ --knox-accent:#8b5cf6; } body.knox-theme--neon{ --knox-accent:#22c55e; } body.knox-theme--gold{ --knox-accent:#f59e0b; } /* Backwards compat: treat these as dark */ body.knox-theme--dark, body.knox-dark, body[data-theme="dark"], body.dark{ --knox-bg:#0b1220; --knox-text:#e5e7eb; --knox-muted:#9aa4b2; --knox-card:#0f172a; --knox-card-2:#0f1b33; --knox-card-border:rgba(226,232,240,.10); --knox-input-bg:rgba(255,255,255,.04); --knox-input-border:rgba(226,232,240,.14); } /* Page base */ /* Premium "starry" background (close to the mock). We paint it on so it's always behind the whole app, and keep transparent so other CSS layers can't accidentally replace it. */ html{ color:var(--knox-text) !important; background-color:#070b16 !important; background-image: radial-gradient(1200px 700px at 18% 85%, rgba(139,92,246,.18), transparent 60%), radial-gradient(900px 520px at 85% 25%, rgba(111,124,255,.14), transparent 58%), radial-gradient(700px 420px at 55% 55%, rgba(255,85,210,.06), transparent 62%), radial-gradient(circle at 12% 20%, rgba(255,255,255,.12) 0 1px, transparent 2px), radial-gradient(circle at 28% 68%, rgba(255,255,255,.10) 0 1px, transparent 2px), radial-gradient(circle at 46% 35%, rgba(255,255,255,.10) 0 1px, transparent 2px), radial-gradient(circle at 62% 78%, rgba(255,255,255,.08) 0 1px, transparent 2px), radial-gradient(circle at 78% 42%, rgba(255,255,255,.10) 0 1px, transparent 2px), radial-gradient(circle at 88% 62%, rgba(255,255,255,.08) 0 1px, transparent 2px), radial-gradient(circle at 8% 55%, rgba(255,255,255,.07) 0 1px, transparent 2px), radial-gradient(circle at 35% 12%, rgba(255,255,255,.06) 0 1px, transparent 2px); background-attachment: fixed; background-repeat: no-repeat; } body{ background: transparent !important; color:var(--knox-text) !important; } /* Force common "light" background utilities to dark */ .bg-white, .bg-light, .bg-gray, .bg-grey{ background:var(--knox-card) !important; color:var(--knox-text) !important; } /* White separators -> subtle dark */ hr{ border-color:var(--knox-card-border) !important; } /* Links + primary */ a{ accent-color: var(--knox-accent); } .btn-primary{ /* mag flat blijven, maar voelt beter als Knoxlink-gradient */ background: linear-gradient(135deg, var(--knox-accent-2), var(--knox-accent)) !important; border: 1px solid rgba(155,108,255,0.65) !important; color:#fff !important; box-shadow: 0 12px 30px rgba(139,92,246,0.22) !important; } /* Secondary buttons */ .btn-secondary{ background:var(--knox-card-2) !important; border-color:var(--knox-card-border) !important; color:var(--knox-text) !important; } .btn-secondary:hover{ filter:brightness(1.08); } /* Form fields */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea{ background:var(--knox-input-bg) !important; border-color:var(--knox-input-border) !important; color:var(--knox-text) !important; } input::placeholder, textarea::placeholder{ color:rgba(154,164,178,.85) !important; } label, .card-subtitle, .creator-meta, .text-sm, .muted{ color:var(--knox-muted) !important; } /* Tables */ table{ color:var(--knox-text) !important; } th, td{ border-color:var(--knox-card-border) !important; } tr{ background:transparent !important; } /* Generic subtle surfaces */ .badge, .creator-social-pill, .knox-chip, .knox-hovercard, .knox-statusbar, .knox-skeleton, .knox-wall-item{ border-color:var(--knox-card-border) !important; } /* ================================ Knoxlink – CARDS (single source of truth) ================================ */ .card, .live-home-card, .creator-card, .post-card, .creator-hero-card, .creator-featured-card, .creator-hero-block, .knox-modal, .auth-wrapper .card, .knox-card, .admin-stats .card, .admin-main-grid .card, .admin-tab-panel .card{ background: linear-gradient( 180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02) ) !important; color: #e6ebff !important; border-radius: 1.25rem; border: none !important; outline: none !important; box-shadow: inset 0 0 0 1px rgba(120,140,255,0.10), 0 16px 40px rgba(0,0,0,0.45) !important; backdrop-filter: blur(6px); } .card:hover, .live-home-card:hover, .creator-card:hover, .post-card:hover{ box-shadow: inset 0 0 0 1px rgba(160,180,255,0.20), 0 22px 55px rgba(0,0,0,0.55) !important; transform: translateY(-2px); } .card::before, .card::after, .live-home-card::before, .live-home-card::after, .creator-card::before, .creator-card::after, .post-card::before, .post-card::after{ content: none !important; display: none !important; } /* NOTE: Removed blanket `* { background-color: transparent !important; }` because it breaks components that rely on a solid panel background (e.g. dropdowns/menus/modals inside cards). If you need transparent backgrounds for typography elements inside cards, scope it safely: */ .card :where(p, span, small, strong, em, i, b, h1, h2, h3, h4, h5, h6, a, li, ul, ol, label, svg, path), .live-home-card :where(p, span, small, strong, em, i, b, h1, h2, h3, h4, h5, h6, a, li, ul, ol, label, svg, path), .creator-card :where(p, span, small, strong, em, i, b, h1, h2, h3, h4, h5, h6, a, li, ul, ol, label, svg, path), .post-card :where(p, span, small, strong, em, i, b, h1, h2, h3, h4, h5, h6, a, li, ul, ol, label, svg, path){ background-color: transparent; } .card .btn-secondary, .live-home-card .btn-secondary, .creator-card .btn-secondary, .post-card .btn-secondary{ background: rgba(120,140,255,0.18) !important; color: #fff !important; border: 1px solid rgba(120,140,255,0.35) !important; } .badge-live{ background: rgba(20,255,140,0.12) !important; color: #6bffb0 !important; border: 1px solid rgba(20,255,140,0.35) !important; } .post-card-footer{ background: transparent !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } .creator-social-pill:hover, .badge:hover{ background:rgba(255,255,255,.06) !important; } /* ========================================= Knoxlink – TABS (final, clean) Doel: - Niet-actief: donker pill - Actief: Knoxlink paars/gradient + glow (duidelijk) - Geen lange underline onder tab-row ========================================= */ /* Tab row: underline helemaal weg */ .creator-tabs, .tabs, .tabs-header, .nav-tabs, .tab-row, .tab-list{ border-bottom: 0 !important; background-image: none !important; box-shadow: none !important; } /* Kill underline helpers/pseudo elements */ .creator-tabs::before, .creator-tabs::after, .tabs::before, .tabs::after, .tabs-header::before, .tabs-header::after, .nav-tabs::before, .nav-tabs::after, .tabs-line, .tab-underline, .tabs__line, .nav-tabs-underline, .creator-tabs-underline{ content: none !important; display: none !important; height: 0 !important; background: transparent !important; border: none !important; } /* Base tabs (niet actief) */ .creator-tabs button, .creator-tabs a, .tabs button, .tabs a, .nav-tabs .nav-link, .tab, .tab-btn{ border-radius: 999px !important; padding: 0.55rem 1.1rem !important; font-weight: 800 !important; text-decoration: none !important; background: rgba(15, 27, 51, 0.92) !important; border: 1px solid rgba(226,232,240,0.14) !important; color: rgba(229,231,235,0.92) !important; box-shadow: none !important; outline: none !important; transition: all .18s ease !important; } /* Hover */ .creator-tabs button:hover, .creator-tabs a:hover, .tabs button:hover, .tabs a:hover, .nav-tabs .nav-link:hover, .tab:hover, .tab-btn:hover{ filter: brightness(1.10) !important; } /* ✅ Active tab = Knoxlink paars */ .creator-tabs button.active, .creator-tabs a.active, .tabs button.active, .tabs a.active, .nav-tabs .nav-link.active, .tab.active, .tab-btn.active, .creator-tabs [aria-selected="true"], .tabs [aria-selected="true"]{ background: linear-gradient(135deg, var(--knox-accent-2), var(--knox-accent)) !important; border: 1px solid rgba(155,108,255,0.70) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(139,92,246,0.28), inset 0 0 0 1px rgba(255,255,255,0.10) !important; transform: translateY(-1px) !important; } /* Extra mini indicator onder de actieve tab (maakt het super duidelijk) */ .creator-tabs button.active::after, .creator-tabs a.active::after, .tabs button.active::after, .tabs a.active::after, .nav-tabs .nav-link.active::after{ content: "" !important; display: block !important; height: 2px !important; margin-top: 6px !important; border-radius: 999px !important; background: rgba(139,92,246,0.9) !important; } /* Focus ring uit */ .creator-tabs button:focus, .creator-tabs a:focus, .tabs button:focus, .tabs a:focus, .nav-tabs .nav-link:focus, .tab:focus, .tab-btn:focus{ outline: none !important; box-shadow: none !important; } /* === Knox Multiselect Dropdown Text Color Fix === */ .knox-ms__panel, .knox-ms__opt, .knox-ms__search, .knox-ms__pill{ color: rgba(255,255,255,0.85); } .knox-ms__opt:hover{ color: white; } .knox-ms__search::placeholder{ color: rgba(255,255,255,0.45); } /* === Knox Dropdown Text Fix (Trigger + Panel) === */ .knox-ms__btn, .knox-ms__value, .knox-ms__placeholder, .knox-ms__pill{ color: rgba(255,255,255,0.85) !important; } .knox-ms__placeholder{ opacity: 0.6; } .knox-ms__panel, .knox-ms__opt{ color: rgba(255,255,255,0.85); } .knox-ms__opt:hover{ color: white; } /* =========================== Admin Deal Create Upgrades =========================== */ /* Section titles */ .admin-section-title{ font-size: 15px; margin: 18px 0 8px; color: rgba(255,255,255,0.70); letter-spacing: 0.2px; } /* Two-column layout on wide screens */ .admin-deal-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 980px){ .admin-deal-grid{ grid-template-columns: 1fr; align-items: start; } } /* Card for the live preview */ .admin-preview-card{ border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; background: rgba(255,255,255,0.03); overflow: hidden; } .admin-preview-card__body{ padding: 14px; } .admin-preview-card__title{ font-size: 16px; font-weight: 650; margin: 0 0 8px; color: rgba(255,255,255,0.92); } .admin-preview-card__meta{ font-size: 12px; margin: 0 0 10px; color: rgba(255,255,255,0.65); } .admin-preview-card__img{ width: 100%; aspect-ratio: 16/9; background: rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:flex-end; border-bottom: 1px solid rgba(255,255,255,0.08); } .admin-preview-card__img img{ width:100%; height:100%; object-fit: cover; display:block; } .admin-preview-card__cta{ display:flex; gap:10px; margin-top: 12px; align-items:center; } .admin-preview-pill{ display:inline-flex; align-items:center; gap:8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); font-size: 12px; } /* Sticky actions bar */ .admin-actions{ position: sticky; bottom: 0; margin-top: 14px; padding: 12px; background: rgba(10,15,25,0.92); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap: wrap; backdrop-filter: blur(8px); } /* Make action buttons fit nicely on small widths */ @media (max-width: 560px){ .admin-actions{ flex-direction: column; align-items: stretch; justify-content: flex-start; } .admin-actions a, .admin-actions button{ width: 100%; text-align: center; } } /* Form validation helpers */ .input-error{ border-color: rgba(255,77,77,0.8) !important; box-shadow: 0 0 0 3px rgba(255,77,77,0.15); } .form-error-text{ margin-top: 6px; font-size: 12px; color: rgba(255,120,120,0.95); } /* Knox multiselect: selected pills (when we render them in label) */ .knox-ms__label .knox-ms__pill{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); padding: 3px 8px; border-radius: 999px; margin-right: 6px; color: rgba(255,255,255,0.86); font-size: 12px; } .knox-ms__label .knox-ms__pill:last-child{ margin-right: 0; } /* Make hover/active options clearer */ .knox-ms__opt.is-checked{ background: rgba(120,140,255,0.12); border: 1px solid rgba(120,140,255,0.22); } /* Admin input consistency */ input[type="text"], input[type="url"], input[type="number"], select, textarea{ width: 100%; padding: 0.55rem 0.65rem; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.90); font-size: 0.95rem; outline: none; } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.45); } input:focus, select:focus, textarea:focus, .knox-ms__btn:focus{ border-color: rgba(120,140,255,0.55); box-shadow: 0 0 0 3px rgba(120,140,255,0.18); } /* =========================== Drag & Drop Image Upload =========================== */ .knox-dropzone{ position: relative; width: 100%; border-radius: 14px; border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); padding: 14px; cursor: pointer; } .knox-dropzone.is-dragover{ border-color: rgba(120,140,255,0.65); box-shadow: 0 0 0 3px rgba(120,140,255,0.16); } .knox-dropzone__file{ position:absolute; inset:0; opacity:0; cursor:pointer; } .knox-dropzone__inner{ display:flex; gap:12px; align-items:center; } .knox-dropzone__icon{ width: 38px; height: 38px; display:flex; align-items:center; justify-content:flex-end; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); font-size: 18px; } .knox-dropzone__text{ color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.25; } .knox-dropzone__sub{ margin-top: 4px; color: rgba(255,255,255,0.55); font-size: 12px; } .knox-dropzone__preview{ margin-top: 12px; border-radius: 12px; overflow:hidden; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); } .knox-dropzone__preview img{ width:100%; height: 220px; object-fit: cover; display:block; } .knox-dropzone__remove{ margin-top: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.80); } .knox-dropzone__remove:hover{ background: rgba(255,255,255,0.07); } /* Compact multi-select dropdown (admin deal create) */ .knox-ms{position:relative; width:100%; margin-top:8px; z-index:1;} .knox-ms.is-open{z-index:100005;} .knox-ms__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0.55rem 0.65rem; border:1px solid #d1d5db; border-radius:0.6rem; background:rgba(255,255,255,0.02); cursor:pointer; font-size:0.95rem; } .knox-ms__label{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.95;} .knox-ms__chev{opacity:.7;} .knox-ms__panel{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:100006; display:none; border:1px solid rgba(255,255,255,.10); border-radius:0.75rem; background:#0b1220; box-shadow:0 18px 40px rgba(0,0,0,.35); padding:10px; } .knox-ms.is-open .knox-ms__panel{display:block;} .knox-ms__search{ width:100%; padding:0.45rem 0.55rem; border-radius:0.55rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; margin-bottom:8px; } .knox-ms__opts{ max-height:220px; overflow:auto; border-radius:0.55rem; } .knox-ms__opts--tall{max-height:280px;} .knox-ms__opt{ display:flex; align-items:center; gap:10px; padding:0.45rem 0.55rem; border-radius:0.5rem; cursor:pointer; } .knox-ms__opt:hover{background:rgba(255,255,255,.06);} .knox-ms__opt input{transform:translateY(1px);} .knox-ms__opt{color:#f9fafb;} .knox-ms__opt:hover{background:rgba(255,255,255,0.08);} .knox-ms__hint{font-size:12px; opacity:.7; margin:.25rem 0 0;} /* Admin deal dropdown: prevent clipping of absolute panels */ .admin-deal-grid, .admin-deal-grid > div, .form-group{ overflow: visible; } /* =========================== Admin layout containment fix =========================== */ .admin-deal-grid{ width: 100%; min-width: 0; } .admin-deal-grid > div, .admin-preview-card{ min-width: 0; } /* Ensure the admin card/container doesn't let children spill */ .card, .live-home-card, .creator-card, .post-card{ box-sizing: border-box; } .card{ overflow: hidden; /* keep rounded corners clean */ } /* But allow dropdown panels to escape within form column only (handled by z-index) */ .admin-deal-grid > div{ overflow: visible; } /* Make form groups stack cleanly and avoid inline margins pushing outside */ .form-group{ display: block; width: 100%; margin-bottom: 14px; } /* Prevent long text/labels from forcing overflow */ label, .knox-ms__label{ min-width: 0; } /* Sticky actions should not exceed container width */ .admin-actions{ width: 100%; box-sizing: border-box; flex-wrap: wrap; } .admin-actions .btn-primary, .admin-actions .btn-secondary{ max-width: 100%; } /* Preview card spacing */ .admin-preview-card{ margin-top: 6px; } @media (max-width: 980px){ .admin-preview-card{ margin-top: 14px; } } /* Admin actions: keep buttons inline */ .admin-actions{ justify-content: space-between; } .admin-actions a, .admin-actions button{ flex: 1; text-align:center; } .admin-actions{ gap:12px; } .admin-actions a.btn-secondary, .admin-actions button.btn-primary{ white-space: nowrap; } @media (max-width: 520px){ .admin-actions{ display:grid; grid-template-columns: 1fr; gap:10px; } .admin-actions a.btn-secondary, .admin-actions button.btn-primary{ width: 100%; justify-content:flex-end; } } /* Admin actions sizing: compact buttons */ .admin-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: nowrap; } .admin-actions a.btn-secondary, .admin-actions button.btn-primary{ padding: 10px 14px !important; border-radius: 999px; font-size: 13px !important; line-height: 1; } @media (max-width: 420px){ .admin-actions{ flex-wrap: wrap; } .admin-actions a.btn-secondary, .admin-actions button.btn-primary{ flex: 1 1 auto; width: auto; } } /* Knoxlink creator dashboard action alignment fix */ .post-actions, .content-actions, .library-actions, .creator-post-actions { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 8px !important; text-align: right !important; min-width: 140px !important; } .post-actions a, .content-actions a, .library-actions a, .creator-post-actions a { display: block !important; width: 120px !important; text-align: right !important; } /* Remove unnecessary badges */ .post-badge, .content-badge, .status-badge { display: none !important; }