/* ============================================================================ * PROJECT NEBULA — Gemini Visual Layer · v2.0.0 · LIGHT-FIRST * File: assets/css/gemini.css * ---------------------------------------------------------------------------- * Clean, premium LIGHT theme (slate / white) by default. Dark mode is an * optional soft toggle via `.dark` on . Primary Arabic font: Cairo * (with generous line-height so text never overlaps). Tables are flat & * readable (standard border-collapse inside a card). All rules scoped under * `.gemini` / `.gemini-shell` so untouched pages + admin are never affected. * ==========================================================================*/ /* ─────────────────────────── Tokens ─────────────────────────── */ :root.gemini { --canvas: #f8fafc; --surface: #ffffff; --surface-muted: #f1f5f9; --surface-sunken:#f8fafc; --border: #e2e8f0; --border-2: #cbd5e1; --ink: #0f172a; --ink-soft: #334155; --ink-muted: #64748b; --ink-faint: #94a3b8; --brand: #4f46e5; --brand-hover:#4338ca; --brand-soft: #eef2ff; --success: #16a34a; --pending: #d97706; --danger: #e11d48; --info: #2563eb; --radius: 14px; --ease: cubic-bezier(.16, 1, .3, 1); --speed: .2s; --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12); --shadow-float: 0 12px 40px -16px rgba(15,23,42,.22); --grad: linear-gradient(120deg, #4f46e5, #6366f1 55%, #818cf8); } :root.gemini.dark { --canvas: #0f172a; --surface: #1e293b; --surface-muted: #172033; --surface-sunken:#0f172a; --border: #334155; --border-2: #475569; --ink: #f8fafc; --ink-soft: #cbd5e1; --ink-muted: #94a3b8; --ink-faint: #64748b; --brand-soft: #312e81; --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.6); --shadow-float: 0 18px 50px -20px rgba(0,0,0,.7); } /* ─────────────────────────── Base ─────────────────────────── */ .gemini body { background: var(--canvas); color: var(--ink); font-family: 'Plus Jakarta Sans', Inter, 'Cairo', system-ui, sans-serif; line-height: 1.6; } :root[dir="rtl"].gemini body, :root[dir="rtl"].gemini { font-family: 'Cairo', 'Plus Jakarta Sans', Inter, sans-serif; } :root[dir="rtl"].gemini body { line-height: 1.85; letter-spacing: 0; } .gemini h1, .gemini h2, .gemini h3, .gemini h4, .gemini h5 { color: var(--ink); } :root[dir="rtl"].gemini h1, :root[dir="rtl"].gemini h2, :root[dir="rtl"].gemini h3, :root[dir="rtl"].gemini h4, :root[dir="rtl"].gemini h5 { line-height: 1.6; } .gemini ::selection { background: rgba(79,70,229,.16); } /* ─────────────────────────── Utilities ─────────────────────────── */ .neb-gradient-text { background: linear-gradient(120deg, #4f46e5, #7c3aed 60%, #2563eb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .neb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .neb-glass { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .neb-divider { height: 1px; background: var(--border); border: 0; } .neb-muted { color: var(--ink-muted); } .neb-soft { color: var(--ink-soft); } .neb-aurora { position: relative; } :root[dir="rtl"] .neb-flip-x { transform: scaleX(-1); } /* Buttons */ .neb-btn-cosmic { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border: 0; border-radius: 10px; font-weight: 600; color: #fff; background: var(--brand); cursor: pointer; text-decoration: none; box-shadow: 0 2px 8px rgba(79,70,229,.22); transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); } .neb-btn-cosmic:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px); } .neb-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--border); text-decoration: none; transition: all var(--speed) var(--ease); } .neb-btn-ghost:hover { background: var(--surface-muted); color: var(--ink); } /* Skeleton / spinner */ .neb-skeleton { position: relative; overflow: hidden; background: var(--surface-muted); border-radius: 10px; } .neb-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(15,23,42,.06), transparent); background-size: 200% 100%; animation: neb-shimmer 1.6s linear infinite; } @keyframes neb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .neb-spinner { width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 2px solid var(--border-2); border-top-color: var(--brand); animation: neb-spin .7s linear infinite; display: inline-block; } @keyframes neb-spin { to { transform: rotate(360deg); } } /* Direction-aware slide-in (canvas) */ .neb-slide-in { animation: neb-slide-in .35s var(--ease) both; } @keyframes neb-slide-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* ════════════════════════════════════════════════════════════════════════ * WORKSPACE SHELL — sidebar + topbar + canvas * ══════════════════════════════════════════════════════════════════════ */ :root.gemini { --neb-side-w: 264px; --neb-side-cw: 76px; --neb-topbar-h: 64px; } .gemini-shell .neb-app { display: flex; align-items: stretch; min-height: 100vh; width: 100%; } /* Sidebar */ .gemini-shell .neb-sidebar { flex: 0 0 var(--neb-side-w); width: var(--neb-side-w); position: sticky; inset-block-start: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; padding: 1rem .75rem; background: var(--surface); border-inline-end: 1px solid var(--border); z-index: 1045; transition: flex-basis var(--speed) var(--ease), width var(--speed) var(--ease), transform .3s var(--ease); } .gemini-shell .neb-side-brand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem .35rem .85rem; } .gemini-shell .neb-brand-logo { max-height: 32px; width: auto; } .gemini-shell .neb-side-collapse { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink-muted); cursor: pointer; transition: all var(--speed) var(--ease); } .gemini-shell .neb-side-collapse:hover { background: var(--surface-muted); color: var(--ink); } .gemini-shell .neb-side-cta { width: 100%; justify-content: center; margin-bottom: .65rem; } .gemini-shell .neb-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1 1 auto; padding-bottom: .5rem; } .gemini-shell .neb-nav-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 10px; color: var(--ink-soft); font-size: .92rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .gemini-shell .neb-nav-item:hover { background: var(--surface-muted); color: var(--ink); } .gemini-shell .neb-nav-item.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 600; } .gemini-shell .neb-nav-item.is-active::before { content: ""; position: absolute; inset-inline-start: -.75rem; inset-block: .5rem; width: 3px; border-radius: 9999px; background: var(--brand); } .gemini-shell .neb-nav-ico { width: 22px; text-align: center; font-size: 1.02rem; flex: 0 0 auto; } .gemini-shell .neb-nav-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .gemini-shell .neb-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; background: var(--brand); } .gemini-shell .neb-nav-group { border: 0; } .gemini-shell .neb-nav-group > summary { list-style: none; } .gemini-shell .neb-nav-group > summary::-webkit-details-marker { display: none; } .gemini-shell .neb-nav-caret { margin-inline-start: auto; font-size: .8rem; opacity: .7; transition: transform var(--speed) var(--ease); } .gemini-shell .neb-nav-group[open] > summary .neb-nav-caret { transform: rotate(180deg); } .gemini-shell .neb-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-inline-start: 2.4rem; } .gemini-shell .neb-nav-subitem { position: relative; display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 8px; font-size: .86rem; color: var(--ink-muted); text-decoration: none; transition: all var(--speed) var(--ease); } .gemini-shell .neb-nav-subitem:hover { color: var(--ink); background: var(--surface-muted); } .gemini-shell .neb-nav-subitem.is-active { color: var(--brand); font-weight: 600; } .gemini-shell .neb-side-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .4rem; } .gemini-shell .neb-side-tool { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink-soft); font-size: .9rem; cursor: pointer; transition: all var(--speed) var(--ease); } .gemini-shell .neb-side-tool:hover { background: var(--surface-muted); color: var(--ink); } .gemini-shell .neb-side-user { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: 10px; text-decoration: none; color: var(--ink); transition: background var(--speed) var(--ease); } .gemini-shell .neb-side-user:hover { background: var(--surface-muted); } .gemini-shell .neb-side-avatar { width: 34px; height: 34px; border-radius: 9999px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid var(--border); } .gemini-shell .neb-side-user-meta { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; } .gemini-shell .neb-side-user-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gemini-shell .neb-side-user-bal { font-size: .78rem; color: var(--ink-muted); } /* Main column */ .gemini-shell .neb-main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .gemini-shell .neb-canvas-main { flex: 1 1 auto; padding: 1.5rem 0 3rem; } .gemini-shell .neb-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); } /* Collapsed rail */ :root.neb-sidebar-collapsed .gemini-shell .neb-sidebar { flex-basis: var(--neb-side-cw); width: var(--neb-side-cw); } :root.neb-sidebar-collapsed .gemini-shell .neb-nav-text, :root.neb-sidebar-collapsed .gemini-shell .neb-side-cta-text, :root.neb-sidebar-collapsed .gemini-shell .neb-nav-caret, :root.neb-sidebar-collapsed .gemini-shell .neb-badge, :root.neb-sidebar-collapsed .gemini-shell .neb-side-user-meta, :root.neb-sidebar-collapsed .gemini-shell .neb-brand-logo { display: none; } :root.neb-sidebar-collapsed .gemini-shell .neb-nav-item, :root.neb-sidebar-collapsed .gemini-shell .neb-side-cta, :root.neb-sidebar-collapsed .gemini-shell .neb-side-tool, :root.neb-sidebar-collapsed .gemini-shell .neb-side-user { justify-content: center; } :root.neb-sidebar-collapsed .gemini-shell .neb-nav-sub { display: none; } /* Mobile drawer */ .neb-scrim { position: fixed; inset: 0; z-index: 1040; background: rgba(15,23,42,.45); opacity: 0; visibility: hidden; transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease); } :root.neb-drawer-open .neb-scrim { opacity: 1; visibility: visible; } @media (max-width: 991px) { .gemini-shell .neb-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; flex-basis: auto; width: min(86vw, 320px); transform: translateX(-100%); box-shadow: var(--shadow-float); } :root[dir="rtl"] .gemini-shell .neb-sidebar { transform: translateX(100%); } :root.neb-drawer-open .gemini-shell .neb-sidebar { transform: none; } .gemini-shell .neb-side-collapse { display: none; } } /* ════════════════════════════════════════════════════════════════════════ * TOPBAR * ══════════════════════════════════════════════════════════════════════ */ .gemini-shell .neb-topbar { position: sticky; inset-block-start: 0; z-index: 1035; background: var(--surface); border-block-end: 1px solid var(--border); } .gemini-shell .neb-topbar-inner { height: var(--neb-topbar-h); max-width: 1180px; margin-inline: auto; padding-inline: clamp(.9rem, 3vw, 2rem); display: flex; align-items: center; gap: .75rem; } .gemini-shell .neb-topbar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; } .gemini-shell .neb-topbar-right { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; } .gemini-shell .neb-topbar-logo img { max-height: 28px; width: auto; display: block; } .gemini-shell .neb-topbar-search { min-width: 0; flex: 1 1 auto; max-width: 460px; } .gemini-shell .neb-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink-muted); font-size: 1.05rem; cursor: pointer; text-decoration: none; transition: all var(--speed) var(--ease); } .gemini-shell .neb-icon-btn:hover { background: var(--surface-muted); color: var(--ink); border-color: var(--border); } .gemini-shell .neb-icon-btn .test { position: absolute; inset-block-start: 7px; inset-inline-end: 8px; } .gemini-shell .neb-icon-btn .nav-unread { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; } .gemini-shell .neb-icon-btn .nav-unread.change_color { background: var(--danger); } /* Balance badge (refined, not neon) */ .gemini-shell .neb-balance-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .85rem; border-radius: 9999px; font-size: .85rem; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; background: var(--brand-soft); border: 1px solid var(--border); transition: all var(--speed) var(--ease); } .gemini-shell .neb-balance-badge:hover { border-color: var(--brand); color: var(--brand-hover); } .gemini-shell .neb-balance-badge i { color: var(--brand); } /* Avatar dropdown */ .gemini-shell .neb-user-dd { position: relative; } .gemini-shell .neb-user-trigger { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem .4rem; border-radius: 10px; color: var(--ink); text-decoration: none; cursor: pointer; transition: background var(--speed) var(--ease); } .gemini-shell .neb-user-trigger:hover { background: var(--surface-muted); } .gemini-shell .neb-topbar-avatar { width: 36px; height: 36px; border-radius: 9999px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid var(--border); } .gemini-shell .neb-user-meta { flex-direction: column; line-height: 1.2; text-align: start; } .gemini-shell .neb-user-name { font-size: .82rem; font-weight: 600; } .gemini-shell .neb-user-bal { font-size: .76rem; color: var(--ink-muted); } .gemini-shell .neb-user-dd .dropdown-menu.neb-dd-menu { margin-block-start: .5rem; padding: .4rem; min-width: 210px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-float); } .gemini-shell .neb-dd-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 8px; color: var(--ink-soft); font-size: .88rem; transition: all var(--speed) var(--ease); } .gemini-shell .neb-dd-menu .dropdown-item:hover { background: var(--surface-muted); color: var(--ink); } .gemini-shell .neb-dd-menu .dropdown-divider { border-color: var(--border); margin: .3rem .2rem; } :root[dir="rtl"] .gemini-shell .neb-user-dd .dropdown-menu-right { inset-inline-end: 0; inset-inline-start: auto; } .gemini-shell .neb-topbar-search .form-control { background: var(--surface-muted); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; } /* ════════════════════════════════════════════════════════════════════════ * FOOTER (panel) * ══════════════════════════════════════════════════════════════════════ */ .gemini-shell .neb-footer { margin-top: 2rem; } .gemini-shell .neb-footer .footer { background: var(--surface) !important; color: var(--ink-muted); } .gemini-shell .neb-footer .footer_top { border-block-start: 1px solid var(--border); } .gemini-shell .neb-footer .footer_top .container { max-width: 1180px; } .gemini-shell .neb-footer .title { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 1rem; } .gemini-shell .neb-footer .quick-link a, .gemini-shell .neb-footer .footer_top a { color: var(--ink-muted); text-decoration: none; transition: color var(--speed) var(--ease); } .gemini-shell .neb-footer .quick-link a:hover, .gemini-shell .neb-footer .footer_top a:hover { color: var(--brand); } .gemini-shell .neb-footer .quick-link li { margin-bottom: .5rem; } .gemini-shell .neb-footer .site-logo img { max-height: 30px; width: auto; } .gemini-shell .neb-footer .footer-lang-selector { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .7rem; margin-inline-start: .25rem; } .gemini-shell .neb-footer .footer_bottom { border-block-start: 1px solid var(--border); padding-block: 1rem; } .gemini-shell .neb-footer .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--ink-soft); transition: all var(--speed) var(--ease); } .gemini-shell .neb-footer .btn-icon:hover { background: var(--brand); color: #fff; border-color: var(--brand); } /* ════════════════════════════════════════════════════════════════════════ * NEW ORDER — prompt bar · pills · split canvas * ══════════════════════════════════════════════════════════════════════ */ .neb-neworder .card.neb-neworder-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .neb-neworder .card-header { background: transparent; border-block-end: 1px solid var(--border); } /* Tabs */ .neb-neworder .nav-tabs { border: 0; display: flex; gap: .4rem; } .neb-neworder .nav-tabs li { margin: 0; } .neb-neworder .nav-tabs a { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 9999px; padding: .45rem 1.05rem; color: var(--ink-soft); font-size: .9rem; font-weight: 600; text-decoration: none; transition: all var(--speed) var(--ease); } .neb-neworder .nav-tabs a:hover { color: var(--ink); border-color: var(--border-2); } .neb-neworder .nav-tabs a.active, .neb-neworder .nav-tabs a.active.show { color: #fff; background: var(--brand); border-color: var(--brand); } /* Labels + inputs */ .neb-neworder label { color: var(--ink-soft); font-size: .82rem; font-weight: 600; margin-bottom: .4rem; } .neb-neworder .form-control, .neb-neworder .custom-select { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .62rem .85rem; height: auto; box-shadow: none; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .neb-neworder .form-control::placeholder { color: var(--ink-faint); } .neb-neworder .form-control:focus, .neb-neworder .custom-select:focus { background: var(--surface); color: var(--ink); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); outline: none; } .neb-neworder select.form-control option, .neb-neworder .custom-select option { background: var(--surface); color: var(--ink); } .neb-neworder textarea.form-control { min-height: 120px; } .neb-neworder .content-header-title h4 { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; } .neb-neworder .content-header-title i { color: var(--brand); } /* Prompt bar (selectize) */ .neb-neworder .neb-promptbar { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .neb-neworder .neb-promptbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .neb-neworder .neb-prompt-ico { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: 1rem; color: var(--ink-muted); z-index: 2; pointer-events: none; } .neb-neworder .neb-promptbar .selectize-input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ink); padding: .7rem 1rem .7rem 2.6rem; border-radius: 12px; } :root[dir="rtl"] .neb-neworder .neb-promptbar .selectize-input { padding: .7rem 2.6rem .7rem 1rem; } .neb-neworder .neb-promptbar .selectize-input input { color: var(--ink) !important; } .neb-neworder .selectize-dropdown { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: var(--shadow-float); } .neb-neworder .selectize-dropdown .active { background: var(--brand-soft); color: var(--brand); } /* Total charge + alert + submit */ .neb-neworder .total_charge { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-muted) !important; color: var(--ink) !important; border: 1px solid var(--border); border-radius: 10px; font-weight: 600; padding: .6rem 1rem; } .neb-neworder .total_charge .charge_number { color: var(--success); font-weight: 800; } .neb-neworder .alert-danger { background: #fff1f2; border: 1px solid #fecdd3; color: var(--danger); border-radius: 10px; } :root[dir="rtl"] .neb-neworder .mr-2 { margin-right: 0 !important; margin-inline-end: .5rem !important; } :root[dir="rtl"] .neb-neworder .mr-1 { margin-right: 0 !important; margin-inline-end: .25rem !important; } .neb-neworder .custom-control-label { color: var(--ink-soft); } .neb-neworder button[type="submit"].btn-primary { background: var(--brand) !important; border: 0 !important; border-radius: 10px !important; font-weight: 700; box-shadow: 0 2px 8px rgba(79,70,229,.22); transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); } .neb-neworder button[type="submit"].btn-primary:hover { background: var(--brand-hover) !important; transform: translateY(-1px); } /* Pill rail */ .neb-neworder .neb-pill-section { margin-bottom: 1.4rem; } .neb-neworder .neb-pill-head { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .85rem; font-weight: 600; margin-bottom: .65rem; } .neb-neworder .neb-pill-head i { color: var(--brand); } .neb-pill-rail { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .6rem; } .neb-pill-rail::-webkit-scrollbar { height: 0; } .neb-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: all var(--speed) var(--ease); } .neb-pill:hover { color: var(--ink); border-color: var(--border-2); } .neb-pill.is-active { color: #fff; background: var(--brand); border-color: var(--brand); } .neb-pill .neb-pill-ico { display: inline-flex; align-items: center; } .neb-pill .neb-pill-ico img { width: 18px; height: 18px; object-fit: contain; } .neb-pill-rail.is-dragging { cursor: grabbing; } .neb-pill-rail.is-dragging .neb-pill { pointer-events: none; } /* Canvas details panel */ .neb-neworder .neb-canvas-panel { position: sticky; inset-block-start: 84px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-card); } .neb-neworder .neb-canvas-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; } .neb-neworder .neb-canvas-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: var(--surface-muted); border: 1px solid var(--border); padding: 6px; flex: 0 0 auto; } .neb-neworder .neb-canvas-id { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 9999px; margin-bottom: .35rem; } .neb-neworder .neb-canvas-name { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; word-break: break-word; } .neb-neworder .neb-canvas-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.25rem; } .neb-neworder .neb-stat { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; } .neb-neworder .neb-stat-label { font-size: .72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; } .neb-neworder .neb-stat-value { font-size: 1rem; font-weight: 700; color: var(--ink); word-break: break-word; } .neb-neworder .neb-stat--rate .neb-stat-value { color: var(--success); } .neb-neworder .neb-stat--time .neb-stat-value { color: var(--info); } .neb-neworder .neb-canvas-desc-label { font-size: .78rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .45rem; } .neb-neworder .neb-canvas-desc { white-space: pre-line; word-break: break-word; line-height: 1.7; color: var(--ink-soft); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; padding: .9rem; min-height: 200px; max-height: 380px; overflow-y: auto; } @media (max-width: 991px) { .neb-neworder .neb-canvas-panel { position: static; margin-top: 1.25rem; } } /* ════════════════════════════════════════════════════════════════════════ * DATA LISTS — clean FLAT table inside a card (no floating rows) * ══════════════════════════════════════════════════════════════════════ */ .gemini-shell .lists-index-ajax .page-title h1.page-title { color: var(--ink); font-weight: 700; } .gemini-shell .lists-index-ajax .btn-outline-primary { border-radius: 9999px; border-color: var(--border-2); color: var(--brand); } .gemini-shell .lists-index-ajax .btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .gemini-shell .lists-index-ajax .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .gemini-shell .lists-index-ajax .card-header { background: transparent; border-block-end: 1px solid var(--border); } .gemini-shell .lists-index-ajax .card-title { color: var(--ink); font-weight: 700; } .gemini-shell .table-responsive { overflow-x: auto; } .gemini-shell .table-responsive > table { width: 100%; border-collapse: collapse; background: transparent; margin: 0; } .gemini-shell .table-responsive > table > thead th, .gemini-shell .table-responsive > table > thead td { white-space: nowrap; text-align: start; padding: .8rem 1rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); background: var(--surface-muted); border-bottom: 1px solid var(--border); } .gemini-shell .table-responsive > table > tbody > tr { background: var(--surface); transition: background var(--speed) var(--ease); } .gemini-shell .table-responsive > table > tbody > tr:hover { background: var(--surface-muted); } .gemini-shell .table-responsive > table > tbody > tr > td { white-space: nowrap; padding: .85rem 1rem; border-bottom: 1px solid var(--border); color: var(--ink-soft); vertical-align: middle; } .gemini-shell .table-responsive > table > tbody > tr:last-child > td { border-bottom: 0; } .gemini-shell .table-responsive > table > tbody > tr > td .title { color: var(--ink); font-weight: 500; white-space: normal; max-width: 420px; } .gemini-shell .table-responsive > table > tbody > tr > td a { color: var(--info); } .gemini-shell .table-responsive .btn { border-radius: 8px; } /* Status badges — soft, readable, NO neon/pulse */ .gemini-shell .neb-status-cell .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 9999px; font-size: .73rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; box-shadow: none; } .gemini-shell .neb-status-cell .badge::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: currentColor; } .gemini-shell .neb-status-cell[data-neb-status="completed"] .badge { color: var(--success) !important; background: #f0fdf4 !important; border-color: #bbf7d0; } .gemini-shell .neb-status-cell[data-neb-status="pending"] .badge { color: var(--pending) !important; background: #fffbeb !important; border-color: #fde68a; } .gemini-shell .neb-status-cell[data-neb-status="canceled"] .badge { color: var(--danger) !important; background: #fff1f2 !important; border-color: #fecdd3; } .gemini-shell .neb-status-cell[data-neb-status="partial"] .badge { color: var(--info) !important; background: #eff6ff !important; border-color: #bfdbfe; } .gemini.dark .neb-status-cell[data-neb-status="completed"] .badge { background: rgba(22,163,74,.15) !important; border-color: rgba(22,163,74,.35); } .gemini.dark .neb-status-cell[data-neb-status="pending"] .badge { background: rgba(217,119,6,.15) !important; border-color: rgba(217,119,6,.35); } .gemini.dark .neb-status-cell[data-neb-status="canceled"] .badge { background: rgba(225,29,72,.15) !important; border-color: rgba(225,29,72,.35); } .gemini.dark .neb-status-cell[data-neb-status="partial"] .badge { background: rgba(37,99,235,.15) !important; border-color: rgba(37,99,235,.35); } /* Pagination */ .gemini-shell #pagination { width: 100%; display: flex; justify-content: center; margin-top: 1rem; } .gemini-shell #pagination .pagination { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .gemini-shell #pagination .pagination a, .gemini-shell #pagination .pagination span, .gemini-shell #pagination .pagination .page-link { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-size: .85rem; text-decoration: none; transition: all var(--speed) var(--ease); } .gemini-shell #pagination .pagination a:hover { background: var(--surface-muted); color: var(--ink); } .gemini-shell #pagination .pagination .active a, .gemini-shell #pagination .pagination .active span, .gemini-shell #pagination .pagination .active .page-link { background: var(--brand); color: #fff; border-color: var(--brand); } :root[dir="rtl"] .gemini-shell #pagination .pagination { flex-direction: row-reverse; } /* ════════════════════════════════════════════════════════════════════════ * SERVICES — card grid * ══════════════════════════════════════════════════════════════════════ */ .gemini-shell .neb-services-head { margin-bottom: 1.25rem; } .gemini-shell .neb-services-head .page-title { color: var(--ink); font-weight: 700; } .gemini-shell .neb-services-head .form-control, .gemini-shell .neb-services-head .search-by-category { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .62rem .85rem; height: auto; } .gemini-shell .neb-services-head .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .gemini-shell .neb-services-head .form-control::placeholder { color: var(--ink-faint); } .gemini-shell .neb-services-head select.form-control option { background: var(--surface); color: var(--ink); } .neb-service-group { margin-bottom: 2rem; } .neb-service-group-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .neb-service-group-title { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin: 0; } .neb-service-group-count { font-size: .72rem; font-weight: 700; color: var(--ink-muted); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 9999px; padding: .1rem .55rem; } .neb-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .neb-service-card { display: flex; flex-direction: column; gap: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-card); transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .neb-service-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-float); } .neb-service-top { display: flex; align-items: center; justify-content: space-between; } .neb-service-id { font-size: .74rem; font-weight: 700; color: var(--ink-muted); background: var(--surface-muted); border: 1px solid var(--border); padding: .1rem .5rem; border-radius: 9999px; } .neb-service-card .favorite-icon { color: var(--ink-faint); font-size: 1rem; transition: color var(--speed) var(--ease), transform var(--speed) var(--ease); } .neb-service-card .favorite-icon.fa-heart { color: var(--danger); } .neb-service-card .favorite-icon:hover { transform: scale(1.15); } .neb-service-name { color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.4; min-height: 2.6em; word-break: break-word; } .neb-service-rate { font-size: 1.15rem; font-weight: 800; color: var(--success); } .neb-service-rate span { font-size: .72rem; font-weight: 500; color: var(--ink-muted); margin-inline-start: .2rem; } .neb-service-stats { display: flex; gap: .5rem; flex-wrap: wrap; } .neb-service-stats > div { flex: 1 1 auto; min-width: 64px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .1rem; } .neb-s-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } .neb-s-val { font-size: .85rem; font-weight: 600; color: var(--ink); } .neb-service-actions { display: flex; align-items: center; gap: .5rem; margin-top: auto; } .neb-service-view { flex: 0 0 auto; } .neb-service-view .btn { border-radius: 8px; } .neb-service-order { flex: 1 1 auto; justify-content: center; padding: .55rem 1rem; font-size: .85rem; } /* ════════════════════════════════════════════════════════════════════════ * AUTH portal — clean light cards * ══════════════════════════════════════════════════════════════════════ */ .gemini .neb-auth { min-height: 100vh; background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 40%); color: var(--ink); } .gemini.dark .neb-auth { background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 45%); } .gemini .neb-auth .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-float); overflow: hidden; } .gemini .neb-auth .login-card .left-image { background: var(--brand-soft); display: flex; align-items: center; justify-content: center; padding: 2rem; } .gemini .neb-auth .login-card-img { max-width: 100%; height: auto; } .gemini .neb-auth .card-body { padding: 2.5rem 2.25rem; } .gemini .neb-auth .brand-wrapper .logo { max-height: 42px; width: auto; margin-bottom: 1.25rem; } .gemini .neb-auth .login-card-description { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 1.5rem; } .gemini .neb-auth .neb-field { position: relative; margin-bottom: 1.1rem; } .gemini .neb-auth .neb-field > .form-control { height: 56px; width: 100%; padding: 1.35rem .95rem .4rem; background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: 12px; box-shadow: none; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .gemini .neb-auth .neb-field > select.form-control { padding-top: 1.1rem; } .gemini .neb-auth .neb-field > .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); outline: none; } .gemini .neb-auth .neb-field > .form-control::placeholder { color: transparent; } .gemini .neb-auth .neb-field > label { position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem; color: var(--ink-muted); font-size: .95rem; pointer-events: none; transition: all .18s var(--ease); } .gemini .neb-auth .neb-field > .form-control:focus + label, .gemini .neb-auth .neb-field > .form-control:not(:placeholder-shown) + label, .gemini .neb-auth .neb-field.is-filled > label { inset-block-start: .42rem; font-size: .7rem; color: var(--brand); font-weight: 600; } .gemini .neb-auth .neb-field > select.form-control option { background: var(--surface); color: var(--ink); } .gemini .neb-auth .alert-message-reponse:not(:empty) { padding: .7rem .9rem; border-radius: 10px; font-size: .85rem; margin-bottom: .5rem; background: #fff1f2; border: 1px solid #fecdd3; color: var(--danger); } .gemini .neb-auth .custom-control-label { color: var(--ink-soft); } .gemini .neb-auth a { color: var(--brand); text-decoration: none; } .gemini .neb-auth a:hover { color: var(--brand-hover); } .gemini .neb-auth .login-btn, .gemini .neb-auth .btn-submit { background: var(--brand) !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; padding: .85rem 1.25rem; font-weight: 700; box-shadow: 0 2px 8px rgba(79,70,229,.22); transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); } .gemini .neb-auth .login-btn:hover { background: var(--brand-hover) !important; transform: translateY(-1px); } .gemini .neb-auth .login-card-footer-text, .gemini .neb-auth .login-card-footer-nav { color: var(--ink-muted); font-size: .9rem; margin-top: .25rem; } @media (max-width: 767px) { .gemini .neb-auth .login-card .left-image { display: none; } } /* ════════════════════════════════════════════════════════════════════════ * LANDING — clean light storefront * ══════════════════════════════════════════════════════════════════════ */ .neb-landing { background: var(--canvas); color: var(--ink); } .neb-landing .navbar-custom { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--border); } .neb-landing .navbar-nav .nav-link { color: var(--ink-soft) !important; font-weight: 500; } .neb-landing .navbar-nav .nav-link:hover { color: var(--brand) !important; } .neb-landing .btn-primary, .neb-landing .btn-getstarted { background: var(--brand) !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; padding: .65rem 1.4rem; font-weight: 700; box-shadow: 0 2px 8px rgba(79,70,229,.22); transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); } .neb-landing .btn-primary:hover, .neb-landing .btn-getstarted:hover { background: var(--brand-hover) !important; transform: translateY(-1px); } .neb-landing .btn-login { color: var(--ink) !important; border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1.25rem; background: transparent; margin-inline-end: .5rem; } .neb-landing .btn-login:hover { background: var(--surface-muted); } .neb-landing .header { padding-top: 7rem; } .neb-landing .header .text-container h1 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 1.25rem; } .neb-landing .header .p-large { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.75rem; } .neb-landing .above-heading { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: .6rem; } .neb-landing .h2-heading, .neb-landing section h2 { color: var(--ink); font-weight: 800; } .neb-landing p { color: var(--ink-soft); } .neb-landing .counts-area .count-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-card); } .neb-landing .counts-area .count-box i { font-size: 2.2rem; color: var(--brand); } .neb-landing .counts-area .purecounter { font-size: 2rem; font-weight: 800; color: var(--ink); display: block; } .neb-landing .counts-area .count-box p { margin: 0; color: var(--ink-muted); font-size: .9rem; } .neb-landing .why-choose-us .box, .neb-landing .feature .icon-box, .neb-landing .social-icons .feature-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; height: 100%; box-shadow: var(--shadow-card); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .neb-landing .why-choose-us .box:hover, .neb-landing .feature .icon-box:hover, .neb-landing .social-icons .feature-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); } .neb-landing .why-choose-us .box img { max-height: 64px; width: auto; margin-bottom: 1rem; } .neb-landing .why-choose-us .box h3, .neb-landing .feature .icon-box h4, .neb-landing .social-icons .feature-box h3 { color: var(--ink); font-weight: 700; } .neb-landing .feature .icon-box .icon i, .neb-landing .social-icons .feature-box i { color: var(--brand); font-size: 1.8rem; } .neb-landing .work-process-area .single_work_step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.25rem; text-align: center; height: 100%; box-shadow: var(--shadow-card); } .neb-landing .work-process-area .step-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.3rem; } .neb-landing .work-process-area .step-icon i { font-style: normal; } .neb-landing .work-process-area h5 { color: var(--ink); font-weight: 700; } .neb-landing .faqs .faq-block__card .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: .8rem; box-shadow: var(--shadow-card); } .neb-landing .faqs .faq-block__header { padding: 1.1rem 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .neb-landing .faqs .faq-block__header h4 { color: var(--ink); font-size: 1rem; font-weight: 600; margin: 0; } .neb-landing .faqs .faq-block__header h4 i { color: var(--brand); margin-inline-end: .5rem; } .neb-landing .faqs .faq-block__header-icon i { color: var(--ink-muted); transition: transform var(--speed) var(--ease); } .neb-landing .faqs .faq-block__header:not(.collapsed) .faq-block__header-icon i { transform: rotate(180deg); color: var(--brand); } .neb-landing .faqs .faq-block__body-description { padding: 0 1.25rem 1.1rem; color: var(--ink-soft); } .neb-landing .slider-2 .swiper-slide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-card); } .neb-landing .slider-2 .image-wrapper img { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--brand-soft); } .neb-landing .slider-2 .testimonial-text { color: var(--ink-soft); line-height: 1.7; font-style: italic; } .neb-landing .slider-2 .testimonial-author { color: var(--ink); font-weight: 700; margin-top: .75rem; } .neb-landing .swiper-button-next, .neb-landing .swiper-button-prev { color: var(--brand); } .neb-landing .payment-methods .swiper-slide img { filter: grayscale(1) opacity(.55); transition: filter var(--speed) var(--ease); } .neb-landing .payment-methods .swiper-slide img:hover { filter: none; } .neb-landing .footer { background: var(--surface); border-block-start: 1px solid var(--border); padding-top: 3.5rem; } .neb-landing .footer .footer-info .logo img { max-height: 36px; width: auto; margin-bottom: 1rem; } .neb-landing .footer p { color: var(--ink-muted); } .neb-landing .footer h4 { color: var(--ink); font-weight: 700; } .neb-landing .footer .footer-lang-selector { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; margin-block: .75rem; } .neb-landing .footer .icon-container .fa-circle { color: var(--surface-muted); } .neb-landing .footer .icon-container a:hover .fa-stack-1x { color: var(--brand); } .neb-landing .footer .subscribe-box { display: flex; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .35rem; } .neb-landing .footer .subscribe-box input[type="email"] { flex: 1 1 auto; background: transparent; border: 0; color: var(--ink); padding: .5rem 1rem; outline: none; } .neb-landing .footer .subscribe-box .btn-submit { background: var(--brand); border: 0; color: #fff; border-radius: 8px; padding: .5rem 1.25rem; font-weight: 700; cursor: pointer; } .neb-landing .footer .footer-bottom { border-block-start: 1px solid var(--border); margin-top: 2.5rem; padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .neb-landing .footer .footer-links ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .neb-landing .footer .footer-links a { color: var(--ink-muted); text-decoration: none; } .neb-landing .footer .footer-links a:hover { color: var(--brand); } .neb-landing .footer .copyrights p { color: var(--ink-muted); margin: 0; } .neb-landing .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); } /* ════════════════════════════════════════════════════════════════════════ * Reduced motion * ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .gemini *, .gemini *::before, .gemini *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }