/* Inter la 400/500 pentru titluri și corp (diacriticele românești sunt complete în latin-ext), JetBrains Mono pentru date. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================================= NOVANEX — WHMCS child theme (parent: Twenty-One) Scoping: body.primary-bg-color — clasa pe care tema Twenty-One o pune deja pe . Deci tema funcționează și fără niciun fișier .tpl propriu (mod CSS-only). Paginile cu fără clasă (viewinvoice, viewemail, popup-uri) rămân pe stilul deschis al părintelui — facturile se printează corect. ========================================================================== */ :root { /* Marker de versiune — JS-ul îl citește ca să confirme că CSS-ul e cel curent. Îl crește odată cu ?nx= din header.tpl la fiecare modificare. */ --nx-version: "1.12.0"; /* Suprafețe — o singură familie de nuanță (indigo-void), fără gri neutru */ --nx-void: #050614; --nx-deep: #07081b; --nx-surface: #0c0f25; --nx-raised: #131839; --nx-line: rgba(226, 230, 255, 0.08); --nx-line-2: rgba(226, 230, 255, 0.16); /* Text */ --nx-text: #eef0ff; --nx-text-1: #cdd1ea; --nx-text-2: #a2a7c6; --nx-text-3: #6f7494; /* Accent — bioluminiscent: cian → lavandă. Cianul e singura voce cromatică pentru UI. */ --nx-cyan: #5ee7d6; --nx-cyan-2: #1fb8a8; --nx-cyan-dim: rgba(94, 231, 214, 0.14); --nx-violet: #a58bff; --nx-phosphor: #f2cdff; --nx-gradient: linear-gradient(90deg, #1fb8a8 0%, #6eecdc 38%, #d9f8ff 60%, #c9a6ff 100%); /* Semantic (reținute, necesare în WHMCS: status facturi/servicii/tichete) */ --nx-ok: #4fd39a; --nx-warn: #f0be6a; --nx-bad: #ff6b7a; --nx-info: #6db8ff; /* Tipografie */ --nx-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nx-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Forme — tensiune deliberată: butoane pastilă, carduri 16, controale 8 */ --nx-r-pill: 999px; --nx-r-card: 16px; --nx-r-control: 8px; --nx-r-sm: 6px; /* Relief fără umbre: rim-light interior + treaptă de suprafață */ --nx-rim: inset 0 0 0 1px rgba(226, 230, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06); --nx-rim-hover: inset 0 0 0 1px rgba(94, 231, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); --nx-focus: 0 0 0 3px rgba(94, 231, 214, 0.35); } /* ----------------------------------------------------------------------------- Bază -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.primary-bg-color { background-color: var(--nx-void); color: var(--nx-text-1); font-family: var(--nx-font-body); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } body.primary-bg-color #main-body { flex: 1 0 auto; } .primary-bg-color ::selection { background: rgba(94, 231, 214, 0.28); color: #fff; } .primary-bg-color h1, .primary-bg-color h2, .primary-bg-color h3, .primary-bg-color h4, .primary-bg-color h5, .primary-bg-color h6, .primary-bg-color .h1, .primary-bg-color .h2, .primary-bg-color .h3, .primary-bg-color .h4, .primary-bg-color .h5, .primary-bg-color .h6 { font-family: var(--nx-font-display); font-weight: 500; color: var(--nx-text); letter-spacing: -0.01em; line-height: 1.15; } .primary-bg-color h1, .primary-bg-color .h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); letter-spacing: -0.03em; line-height: 1.02; } .primary-bg-color h2, .primary-bg-color .h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.08; } .primary-bg-color h3, .primary-bg-color .h3 { font-size: 1.375rem; } .primary-bg-color h4, .primary-bg-color .h4 { font-size: 1.125rem; } .primary-bg-color h5, .primary-bg-color .h5 { font-size: 1rem; } .primary-bg-color a { color: var(--nx-cyan); text-decoration: none; transition: color .15s ease; } .primary-bg-color a:hover { color: #fff; text-decoration: none; } .primary-bg-color hr { border-top-color: var(--nx-line); } .primary-bg-color code, .primary-bg-color pre, .primary-bg-color kbd, .primary-bg-color .text-monospace { font-family: var(--nx-font-mono); color: var(--nx-phosphor); } .primary-bg-color pre { background: var(--nx-deep); border: 1px solid var(--nx-line); border-radius: var(--nx-r-control); padding: 14px 16px; } .primary-bg-color .text-muted { color: var(--nx-text-3) !important; } .primary-bg-color small, .primary-bg-color .small { color: var(--nx-text-2); } .primary-bg-color .bg-white, .primary-bg-color .bg-light { background-color: var(--nx-surface) !important; } .primary-bg-color .text-dark { color: var(--nx-text) !important; } .primary-bg-color .border, .primary-bg-color .border-top, .primary-bg-color .border-bottom { border-color: var(--nx-line) !important; } .primary-bg-color :focus-visible { outline: none; box-shadow: var(--nx-focus); border-radius: var(--nx-r-sm); } /* ----------------------------------------------------------------------------- Câmp de stele (fundal fix) -------------------------------------------------------------------------- */ .primary-bg-color .nx-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; } .primary-bg-color .nx-header, .primary-bg-color .master-breadcrumb, .primary-bg-color #main-body, .primary-bg-color .nx-footer, .primary-bg-color .network-issues-notifications, .primary-bg-color .verification-banner { position: relative; z-index: 1; } /* ----------------------------------------------------------------------------- Header — bară de sticlă mată pe o singură linie -------------------------------------------------------------------------- */ .primary-bg-color .nx-header { position: sticky; top: 0; z-index: 1030; background: rgba(5, 6, 20, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--nx-line); transition: background .2s ease; } .primary-bg-color .nx-header.is-scrolled { background: rgba(5, 6, 20, 0.88); } /* topbar (doar autentificat) */ .primary-bg-color .topbar.nx-topbar { background: var(--nx-deep); color: var(--nx-text-2); padding: 4px 0; border-bottom: 1px solid var(--nx-line); font-size: 13px; } .primary-bg-color .nx-topbar .btn, .primary-bg-color .nx-topbar .active-client .input-group-text, .primary-bg-color .nx-topbar .btn-active-client { color: var(--nx-text-2); font-size: 13px; background: transparent; border: 0; box-shadow: none; border-radius: var(--nx-r-pill); } .primary-bg-color .nx-topbar .btn:hover { color: #fff; background: rgba(255,255,255,.04); } .primary-bg-color .nx-topbar .btn-active-client span { color: var(--nx-text); font-weight: 500; } .primary-bg-color .nx-topbar-count { display: inline-block; min-width: 18px; padding: 0 6px; margin: 0 2px; border-radius: var(--nx-r-pill); background: var(--nx-cyan); color: #04120f; font-family: var(--nx-font-mono); font-size: 11px; line-height: 18px; text-align: center; } .primary-bg-color .btn-return-to-admin { color: var(--nx-warn) !important; } /* navbar */ .primary-bg-color .nx-nav { padding: 0; min-height: 68px; } .primary-bg-color .nx-nav > .container { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; } .primary-bg-color .nx-nav .navbar-brand.nx-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; margin-right: 28px; color: var(--nx-text); } .primary-bg-color .nx-logo-img { max-height: 34px; width: auto; } .primary-bg-color .nx-mark { display: inline-flex; line-height: 0; } .primary-bg-color .nx-wordmark { font-family: var(--nx-font-display); font-weight: 500; font-size: 19px; letter-spacing: 0.08em; color: var(--nx-text); } .primary-bg-color .nx-nav .navbar-nav > li { display: block; } .primary-bg-color .nx-nav .navbar-nav > li > a, .primary-bg-color .header .navbar-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-family: var(--nx-font-display); font-weight: 500; font-size: 14.5px; letter-spacing: 0.005em; color: var(--nx-text-2); border-radius: var(--nx-r-pill); transition: color .15s ease, background .15s ease; } .primary-bg-color .nx-nav .navbar-nav > li > a.pr-4 { padding-right: 12px !important; } .primary-bg-color .nx-nav .navbar-nav > li > a:hover, .primary-bg-color .nx-nav .navbar-nav > li.show > a, .primary-bg-color .nx-nav .navbar-nav > li.active > a { color: var(--nx-text); background: rgba(226, 230, 255, 0.05); } .primary-bg-color .nx-nav .navbar-nav > li > a .badge { background: var(--nx-cyan); color: #04120f; font-family: var(--nx-font-mono); font-weight: 500; border-radius: var(--nx-r-pill); } .primary-bg-color .nx-nav .dropdown-toggle::after { opacity: .55; margin-left: 2px; } .primary-bg-color .nx-nav-tools { flex-direction: row; align-items: center; gap: 4px; } .primary-bg-color .nx-nav .nx-cart-btn, .primary-bg-color .nx-nav .nx-burger { position: relative; color: var(--nx-text-2) !important; background: transparent; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-pill); width: 40px; height: 40px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none; } .primary-bg-color .nx-nav .nx-cart-btn:hover, .primary-bg-color .nx-nav .nx-burger:hover { color: #fff !important; border-color: var(--nx-cyan); } .primary-bg-color .nx-cart-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; border-radius: var(--nx-r-pill); background: var(--nx-cyan); color: #04120f; font-family: var(--nx-font-mono); font-size: 11px; font-weight: 500; } /* dropdown-uri (nav + orice altă locație) */ .primary-bg-color .dropdown-menu { background: var(--nx-raised); border: 1px solid var(--nx-line-2); border-radius: 12px; padding: 6px; box-shadow: var(--nx-rim), 0 24px 60px -20px rgba(0, 0, 0, .8); min-width: 220px; } .primary-bg-color .dropdown-menu .dropdown-item, .primary-bg-color .dropdown-menu li.dropdown-item { background: transparent; padding: 0; color: var(--nx-text-1); } .primary-bg-color .dropdown-menu li.dropdown-item > a.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px !important; border-radius: var(--nx-r-control); color: var(--nx-text-1); font-family: var(--nx-font-body); font-size: 14px; font-weight: 400; } .primary-bg-color .dropdown-menu a.dropdown-item:hover, .primary-bg-color .dropdown-menu a.dropdown-item:focus { background: rgba(94, 231, 214, 0.1); color: #fff; } .primary-bg-color .dropdown-menu .dropdown-divider { border-top-color: var(--nx-line); margin: 6px 4px; } .primary-bg-color .dropdown-menu .badge { background: var(--nx-cyan-dim); color: var(--nx-cyan); } /* colapsat (mobil) */ @media (max-width: 991.98px) { .primary-bg-color .nx-collapse { width: 100%; padding: 10px 0 14px; border-top: 1px solid var(--nx-line); margin-top: 8px; } .primary-bg-color .nx-collapse .navbar-nav { width: 100%; } .primary-bg-color .nx-nav .navbar-nav > li > a { display: flex; width: 100%; border-radius: var(--nx-r-control); padding: 11px 12px; } .primary-bg-color .nx-nav-search { margin-bottom: 10px; } .primary-bg-color .nx-nav .dropdown-menu { position: static; float: none; width: 100%; margin: 2px 0 8px; box-shadow: none; } } /* căutare KB din meniul mobil */ .primary-bg-color .nx-nav-search .input-group .btn { border-radius: var(--nx-r-control) 0 0 var(--nx-r-control); } .primary-bg-color .nx-nav-search .form-control { border-radius: 0 var(--nx-r-control) var(--nx-r-control) 0; } /* notificări (popover) */ .primary-bg-color .popover { background: var(--nx-raised); border: 1px solid var(--nx-line-2); border-radius: 12px; color: var(--nx-text-1); box-shadow: var(--nx-rim), 0 24px 60px -20px rgba(0, 0, 0, .8); } .primary-bg-color .popover .arrow::before { border-bottom-color: var(--nx-line-2); border-top-color: var(--nx-line-2); } .primary-bg-color .popover .arrow::after { border-bottom-color: var(--nx-raised); border-top-color: var(--nx-raised); } .primary-bg-color .popover-header { background: transparent; border-bottom: 1px solid var(--nx-line); color: var(--nx-text); } .primary-bg-color .popover-body { color: var(--nx-text-1); } .primary-bg-color .client-alerts li a { color: var(--nx-text-1); } .primary-bg-color .client-alerts li a:hover { color: #fff; } .primary-bg-color .client-alerts li { border-bottom: 1px solid var(--nx-line); } /* ----------------------------------------------------------------------------- Breadcrumb -------------------------------------------------------------------------- */ .primary-bg-color .master-breadcrumb { background: transparent; border-bottom: 1px solid var(--nx-line); } .primary-bg-color .master-breadcrumb .breadcrumb { background: transparent; margin: 0; padding: 10px 0; font-size: 13px; color: var(--nx-text-3); } .primary-bg-color .breadcrumb-item a { color: var(--nx-text-2); } .primary-bg-color .breadcrumb-item a:hover { color: var(--nx-cyan); } .primary-bg-color .breadcrumb-item.active { color: var(--nx-text); } .primary-bg-color .breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-3); content: "/"; } /* ----------------------------------------------------------------------------- Corp pagină -------------------------------------------------------------------------- */ .primary-bg-color #main-body { padding: 32px 0 64px; } .primary-bg-color.nx-home #main-body { padding: 0; } .primary-bg-color .primary-content > h1:first-child, .primary-bg-color .primary-content > .h1:first-child { margin-bottom: 20px; } .primary-bg-color .primary-content > h2:first-child { margin-bottom: 18px; } /* ----------------------------------------------------------------------------- Carduri — suprafață ridicată, rim-light, fără umbre -------------------------------------------------------------------------- */ .primary-bg-color .card, .primary-bg-color .mc-promo-manage, .primary-bg-color .mc-promo-login, .primary-bg-color .panel { background: var(--nx-surface); border: 0; border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); color: var(--nx-text-1); } .primary-bg-color .card .card-header, .primary-bg-color .panel .panel-heading { background: transparent; border-bottom: 1px solid var(--nx-line); padding: 16px 22px; color: var(--nx-text); font-family: var(--nx-font-display); font-weight: 500; border-radius: var(--nx-r-card) var(--nx-r-card) 0 0; } .primary-bg-color .card .card-header .card-title, .primary-bg-color .card .card-header h3, .primary-bg-color .card .card-header h4, .primary-bg-color .panel-title { font-size: 15px; margin: 0; letter-spacing: 0; } .primary-bg-color .card .card-body { padding: 22px; } .primary-bg-color .card .card-footer { background: var(--nx-deep); border-top: 1px solid var(--nx-line); border-radius: 0 0 var(--nx-r-card) var(--nx-r-card); color: var(--nx-text-2); } .primary-bg-color .card .card-title { color: var(--nx-text); } .primary-bg-color .card-text, .primary-bg-color .card .text-muted { color: var(--nx-text-2); } /* accentele Twenty-One (border-top colorat) → linie de 2px în paleta noastră */ .primary-bg-color [class*="card-accent-"] { border-top: 2px solid var(--nx-cyan) !important; } .primary-bg-color .card-accent-green, .primary-bg-color .card-accent-emerald, .primary-bg-color .card-accent-lime, .primary-bg-color .card-accent-turquoise { border-top-color: var(--nx-ok) !important; } .primary-bg-color .card-accent-pomegranate, .primary-bg-color .card-accent-red, .primary-bg-color .card-accent-magenta, .primary-bg-color .card-accent-pink { border-top-color: var(--nx-bad) !important; } .primary-bg-color .card-accent-sun-flower, .primary-bg-color .card-accent-orange, .primary-bg-color .card-accent-gold, .primary-bg-color .card-accent-brand-cpanel-orange { border-top-color: var(--nx-warn) !important; } .primary-bg-color .card-accent-purple, .primary-bg-color .card-accent-amethyst { border-top-color: var(--nx-violet) !important; } .primary-bg-color .card-accent-asbestos, .primary-bg-color .card-accent-silver, .primary-bg-color .card-accent-wet-asphalt, .primary-bg-color .card-accent-midnight-blue { border-top-color: var(--nx-line-2) !important; } /* culori de fundal folosite de Twenty-One pe butoane mici din carduri (bg-color-*) */ .primary-bg-color [class*="bg-color-"] { background: var(--nx-cyan-dim) !important; color: var(--nx-cyan) !important; border: 0; } /* list-group în carduri */ .primary-bg-color .list-group-item { background: transparent; border-color: var(--nx-line); color: var(--nx-text-1); } .primary-bg-color .list-group-item-action:hover, .primary-bg-color .list-group-item-action:focus { background: rgba(226, 230, 255, 0.04); color: #fff; } .primary-bg-color .list-group-item.active { background: var(--nx-cyan-dim); border-color: var(--nx-line); color: var(--nx-cyan); } .primary-bg-color .list-group-item.disabled { color: var(--nx-text-3); background: transparent; } /* ----------------------------------------------------------------------------- Sidebar (client area) -------------------------------------------------------------------------- */ .primary-bg-color .card-sidebar { overflow: hidden; } .primary-bg-color .card-sidebar .card-header { padding: 14px 18px; } .primary-bg-color .card-sidebar .card-header .card-title { font-size: 14px; color: var(--nx-text); } .primary-bg-color .card-sidebar .card-minimise { color: var(--nx-text-3); font-size: 12px; margin-top: 3px; } .primary-bg-color .card-sidebar .list-group-item { padding: 10px 18px; font-size: 14px; border-left: 0; border-right: 0; position: relative; } .primary-bg-color .card-sidebar .list-group-item:last-child { border-bottom: 0; } .primary-bg-color .card-sidebar .list-group-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--nx-cyan); } .primary-bg-color .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; } .primary-bg-color .sidebar-menu-item-label { flex: 1 1 auto; } .primary-bg-color .sidebar-menu-item-badge { margin-left: auto; } .primary-bg-color .sidebar-menu-item-icon { color: var(--nx-text-3); } .primary-bg-color .list-group-item.active .sidebar-menu-item-icon { color: var(--nx-cyan); } .primary-bg-color .sidebar-menu-item-badge .badge, .primary-bg-color .card-sidebar .badge { background: var(--nx-raised); color: var(--nx-text-1); font-family: var(--nx-font-mono); font-weight: 500; border-radius: var(--nx-r-pill); } .primary-bg-color .card-sidebar .card-body { padding: 16px 18px; font-size: 14px; } .primary-bg-color .card-sidebar .alert { border-radius: var(--nx-r-control); } /* ----------------------------------------------------------------------------- Butoane — pastilă. Primar = gradient bioluminiscent cu text închis (singurul loc unde apare gradientul la scară de UI). Restul: ghost cu linie subțire. -------------------------------------------------------------------------- */ .primary-bg-color .btn { font-family: var(--nx-font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.01em; border-radius: var(--nx-r-pill); padding: 9px 18px; line-height: 1.3; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .primary-bg-color .btn:focus, .primary-bg-color .btn.focus { box-shadow: var(--nx-focus); } .primary-bg-color .btn-lg { padding: 13px 26px; font-size: 15px; } .primary-bg-color .btn-sm, .primary-bg-color .btn-xs { padding: 5px 12px; font-size: 12.5px; } .primary-bg-color .btn-block { display: block; width: 100%; } .primary-bg-color .btn-primary, .primary-bg-color .btn-primary:not(:disabled):not(.disabled):active, .primary-bg-color .btn-primary:not(:disabled):not(.disabled).active, .primary-bg-color .show > .btn-primary.dropdown-toggle { background: var(--nx-gradient); background-size: 200% 100%; background-position: 0 0; color: #04120f; border-color: transparent; } .primary-bg-color .btn-primary:hover, .primary-bg-color .btn-primary:focus { background-position: 60% 0; color: #02100d; border-color: transparent; } .primary-bg-color .btn-primary.disabled, .primary-bg-color .btn-primary:disabled { background: var(--nx-raised); color: var(--nx-text-3); } .primary-bg-color .btn-default, .primary-bg-color .btn-secondary, .primary-bg-color .btn-light, .primary-bg-color .btn-outline-secondary, .primary-bg-color .btn-outline-primary, .primary-bg-color .btn-outline-light, .primary-bg-color .btn-outline-dark, .primary-bg-color .btn-dark { background: transparent; color: var(--nx-text); border-color: var(--nx-line-2); } .primary-bg-color .btn-default:hover, .primary-bg-color .btn-secondary:hover, .primary-bg-color .btn-light:hover, .primary-bg-color .btn-outline-secondary:hover, .primary-bg-color .btn-outline-primary:hover, .primary-bg-color .btn-outline-light:hover, .primary-bg-color .btn-outline-dark:hover, .primary-bg-color .btn-dark:hover, .primary-bg-color .btn-default:focus, .primary-bg-color .btn-default:active, .primary-bg-color .btn-default.active, .primary-bg-color .open > .dropdown-toggle.btn-default { background: rgba(226, 230, 255, 0.06); color: #fff; border-color: var(--nx-cyan); } .primary-bg-color .btn-outline-primary { color: var(--nx-cyan); border-color: rgba(94, 231, 214, .45); } .primary-bg-color .btn-success { background: rgba(79, 211, 154, .16); color: var(--nx-ok); border-color: rgba(79, 211, 154, .35); } .primary-bg-color .btn-success:hover { background: rgba(79, 211, 154, .28); color: #fff; } .primary-bg-color .btn-danger { background: rgba(255, 107, 122, .14); color: var(--nx-bad); border-color: rgba(255, 107, 122, .35); } .primary-bg-color .btn-danger:hover { background: rgba(255, 107, 122, .26); color: #fff; } .primary-bg-color .btn-warning { background: rgba(240, 190, 106, .14); color: var(--nx-warn); border-color: rgba(240, 190, 106, .35); } .primary-bg-color .btn-warning:hover { background: rgba(240, 190, 106, .26); color: #fff; } .primary-bg-color .btn-info { background: var(--nx-cyan-dim); color: var(--nx-cyan); border-color: rgba(94, 231, 214, .35); } .primary-bg-color .btn-info:hover { background: rgba(94, 231, 214, .26); color: #fff; } .primary-bg-color .btn-outline-success { color: var(--nx-ok); border-color: rgba(79, 211, 154, .45); } .primary-bg-color .btn-outline-danger { color: var(--nx-bad); border-color: rgba(255, 107, 122, .45); } .primary-bg-color .btn-outline-warning { color: var(--nx-warn); border-color: rgba(240, 190, 106, .45); } .primary-bg-color .btn-outline-info { color: var(--nx-cyan); border-color: rgba(94, 231, 214, .45); } .primary-bg-color .btn-link { color: var(--nx-cyan); border: 0; padding-left: 4px; padding-right: 4px; } .primary-bg-color .btn-link:hover { color: #fff; text-decoration: none; } .primary-bg-color .btn-group > .btn { border-radius: 0; } .primary-bg-color .btn-group > .btn:first-child { border-top-left-radius: var(--nx-r-pill); border-bottom-left-radius: var(--nx-r-pill); } .primary-bg-color .btn-group > .btn:last-child { border-top-right-radius: var(--nx-r-pill); border-bottom-right-radius: var(--nx-r-pill); } .primary-bg-color .btn-group > .btn + .btn { margin-left: -1px; } .primary-bg-color .btn-social, .primary-bg-color .btn-facebook, .primary-bg-color .btn-twitter { border-radius: var(--nx-r-pill); } /* butoanele din input-group nu sunt pastilă — se aliniază la câmp */ .primary-bg-color .input-group > .input-group-prepend > .btn, .primary-bg-color .input-group > .input-group-append > .btn { border-radius: var(--nx-r-control); } .primary-bg-color .input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .primary-bg-color .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ----------------------------------------------------------------------------- Formulare -------------------------------------------------------------------------- */ .primary-bg-color label, .primary-bg-color .form-control-label, .primary-bg-color .col-form-label { color: var(--nx-text-1); font-weight: 500; font-size: 14px; } .primary-bg-color .form-control, .primary-bg-color .custom-select, .primary-bg-color select.form-control, .primary-bg-color textarea.form-control { background-color: var(--nx-deep); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-control); color: var(--nx-text); height: auto; padding: 10px 14px; font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease; } .primary-bg-color .form-control-sm, .primary-bg-color .input-group-sm .form-control { padding: 6px 10px; font-size: 13px; } .primary-bg-color .form-control-lg { padding: 13px 16px; font-size: 16px; } .primary-bg-color .form-control::placeholder { color: var(--nx-text-3); } .primary-bg-color .form-control:focus, .primary-bg-color .custom-select:focus { background-color: var(--nx-deep); color: var(--nx-text); border-color: var(--nx-cyan); box-shadow: var(--nx-focus); } .primary-bg-color .form-control:disabled, .primary-bg-color .form-control[readonly] { background-color: var(--nx-surface); color: var(--nx-text-2); } .primary-bg-color .custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%23a2a7c6' stroke-width='1.6' d='M2 4l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; } .primary-bg-color .form-control.is-invalid, .primary-bg-color .was-validated .form-control:invalid { border-color: var(--nx-bad); } .primary-bg-color .invalid-feedback { color: var(--nx-bad); } .primary-bg-color .valid-feedback { color: var(--nx-ok); } .primary-bg-color .form-text { color: var(--nx-text-3); } .primary-bg-color .input-group-text { background: var(--nx-surface); border: 1px solid var(--nx-line-2); color: var(--nx-text-2); border-radius: var(--nx-r-control); } .primary-bg-color .input-group-merge .input-group-text { border-right: 0; } .primary-bg-color .input-group-merge .form-control { border-left: 0; } .primary-bg-color .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .primary-bg-color .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .primary-bg-color .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .primary-bg-color .input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } .primary-bg-color .custom-control-label::before { background: var(--nx-deep); border: 1px solid var(--nx-line-2); } .primary-bg-color .custom-control-input:checked ~ .custom-control-label::before { background: var(--nx-cyan); border-color: var(--nx-cyan); } .primary-bg-color .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2304120f' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } .primary-bg-color .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--nx-focus); } .primary-bg-color .custom-switch .custom-control-label::after { background: var(--nx-text-2); } .primary-bg-color .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: #04120f; } .primary-bg-color input[type="checkbox"], .primary-bg-color input[type="radio"] { accent-color: var(--nx-cyan); } /* iCheck (folosit de Twenty-One la checkbox-uri) */ .primary-bg-color .icheckbox_square-blue, .primary-bg-color .iradio_square-blue { background-image: none !important; background: var(--nx-deep) !important; border: 1px solid var(--nx-line-2); border-radius: 5px; } .primary-bg-color .iradio_square-blue { border-radius: 50%; } .primary-bg-color .icheckbox_square-blue.checked, .primary-bg-color .iradio_square-blue.checked { background: var(--nx-cyan) !important; border-color: var(--nx-cyan); } .primary-bg-color .icheckbox_square-blue.checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #04120f; border-width: 0 2px 2px 0; transform: rotate(45deg); } .primary-bg-color .iradio_square-blue.checked::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #04120f; } /* editor markdown (tichete) */ .primary-bg-color .md-editor { border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-control); background: var(--nx-deep); } .primary-bg-color .md-editor > .md-header { background: var(--nx-surface); border-bottom: 1px solid var(--nx-line); border-radius: var(--nx-r-control) var(--nx-r-control) 0 0; } .primary-bg-color .md-editor .btn-default { border-color: transparent; } .primary-bg-color .md-editor textarea.md-input { background: var(--nx-deep); color: var(--nx-text); } .primary-bg-color .md-editor.active { border-color: var(--nx-cyan); box-shadow: var(--nx-focus); } .primary-bg-color .md-editor > .md-preview { background: var(--nx-deep); color: var(--nx-text-1); } /* ----------------------------------------------------------------------------- Tabele -------------------------------------------------------------------------- */ .primary-bg-color .table { color: var(--nx-text-1); border-color: var(--nx-line); } .primary-bg-color .table th, .primary-bg-color .table td { border-top: 1px solid var(--nx-line); padding: 12px 14px; vertical-align: middle; } .primary-bg-color .table thead th { border-bottom: 1px solid var(--nx-line-2); color: var(--nx-text-2); font-family: var(--nx-font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; } .primary-bg-color .table-striped tbody tr:nth-of-type(odd) { background: rgba(226, 230, 255, 0.025); } .primary-bg-color .table-hover tbody tr:hover { background: rgba(94, 231, 214, 0.05); color: #fff; } .primary-bg-color .table-bordered, .primary-bg-color .table-bordered th, .primary-bg-color .table-bordered td { border-color: var(--nx-line); } .primary-bg-color .table-list, .primary-bg-color .dataTables_wrapper table.table-list { border: 1px solid var(--nx-line) !important; border-radius: 12px; overflow: hidden; background: var(--nx-surface); } .primary-bg-color .table-list thead th, .primary-bg-color .dataTables_wrapper table.table-list thead th { border-bottom: 1px solid var(--nx-line-2); background: var(--nx-deep); } .primary-bg-color table.dataTable thead .sorting::after, .primary-bg-color table.dataTable thead .sorting_asc::after, .primary-bg-color table.dataTable thead .sorting_desc::after { opacity: .5; } .primary-bg-color .dataTables_wrapper .dataTables_filter input, .primary-bg-color .dataTables_wrapper .dataTables_length select { background: var(--nx-deep); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-control); color: var(--nx-text); padding: 7px 12px; } .primary-bg-color .dataTables_wrapper .dataTables_info, .primary-bg-color .dataTables_wrapper .dataTables_length, .primary-bg-color .dataTables_wrapper .dataTables_filter { color: var(--nx-text-3); font-size: 13px; } .primary-bg-color .table td.text-center a, .primary-bg-color .table a { color: var(--nx-cyan); } .primary-bg-color .table-dark { background: var(--nx-deep); color: var(--nx-text-1); } .primary-bg-color .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .primary-bg-color .card-body.p-0 .table-list, .primary-bg-color .card-body.p-0 .table { border: 0 !important; border-radius: 0; margin: 0 !important; } /* paginare */ .primary-bg-color .page-link { background: transparent; border: 1px solid var(--nx-line); color: var(--nx-text-2); margin: 0 2px; border-radius: var(--nx-r-sm); font-family: var(--nx-font-mono); font-size: 13px; } .primary-bg-color .page-link:hover { background: rgba(226,230,255,.06); color: #fff; border-color: var(--nx-line-2); } .primary-bg-color .page-item.active .page-link { background: var(--nx-cyan); border-color: var(--nx-cyan); color: #04120f; } .primary-bg-color .page-item.disabled .page-link { background: transparent; color: var(--nx-text-3); border-color: var(--nx-line); } .primary-bg-color .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--nx-text-2) !important; border: 1px solid var(--nx-line) !important; border-radius: var(--nx-r-sm); background: transparent !important; font-family: var(--nx-font-mono); font-size: 13px; } .primary-bg-color .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #fff !important; border-color: var(--nx-line-2) !important; } .primary-bg-color .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--nx-cyan) !important; color: #04120f !important; border-color: var(--nx-cyan) !important; } .primary-bg-color .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--nx-text-3) !important; } /* ----------------------------------------------------------------------------- Alerte, badge-uri, etichete de status -------------------------------------------------------------------------- */ .primary-bg-color .alert { border: 1px solid transparent; border-radius: var(--nx-r-control); padding: 12px 16px; font-size: 14px; } .primary-bg-color .alert-info { background: var(--nx-cyan-dim); border-color: rgba(94,231,214,.3); color: #cfeeea; } .primary-bg-color .alert-success { background: rgba(79,211,154,.12); border-color: rgba(79,211,154,.3); color: #cdeedd; } .primary-bg-color .alert-warning { background: rgba(240,190,106,.12); border-color: rgba(240,190,106,.3); color: #f3e2c2; } .primary-bg-color .alert-danger { background: rgba(255,107,122,.12); border-color: rgba(255,107,122,.32); color: #f7d3d8; } .primary-bg-color .alert-secondary, .primary-bg-color .alert-light, .primary-bg-color .alert-dark { background: var(--nx-raised); border-color: var(--nx-line-2); color: var(--nx-text-1); } .primary-bg-color .alert a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .primary-bg-color .alert .close { color: #fff; text-shadow: none; opacity: .6; } .primary-bg-color .badge { font-family: var(--nx-font-mono); font-weight: 500; font-size: 11px; padding: 3px 8px; border-radius: var(--nx-r-pill); letter-spacing: 0.02em; } .primary-bg-color .badge-info, .primary-bg-color .badge-primary { background: var(--nx-cyan-dim); color: var(--nx-cyan); } .primary-bg-color .badge-success { background: rgba(79,211,154,.16); color: var(--nx-ok); } .primary-bg-color .badge-warning { background: rgba(240,190,106,.16); color: var(--nx-warn); } .primary-bg-color .badge-danger { background: rgba(255,107,122,.16); color: var(--nx-bad); } .primary-bg-color .badge-secondary, .primary-bg-color .badge-light, .primary-bg-color .badge-dark { background: var(--nx-raised); color: var(--nx-text-1); } /* .label.status-* (servicii, facturi, tichete, domenii) */ .primary-bg-color .label { display: inline-block; padding: 3px 10px; border-radius: var(--nx-r-pill); font-family: var(--nx-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; background: var(--nx-raised); color: var(--nx-text-1); border: 1px solid var(--nx-line); } .primary-bg-color .status-active, .primary-bg-color .status-paid, .primary-bg-color .status-completed, .primary-bg-color .status-accepted, .primary-bg-color .status-delivered, .primary-bg-color .status-answered, .primary-bg-color .status-open, .primary-bg-color .status-transferred-away { background: rgba(79,211,154,.14); color: var(--nx-ok); border-color: rgba(79,211,154,.3); } .primary-bg-color .status-pending, .primary-bg-color .status-pending-registration, .primary-bg-color .status-pending-transfer, .primary-bg-color .status-unpaid, .primary-bg-color .status-payment-pending, .primary-bg-color .status-inprogress, .primary-bg-color .status-grace, .primary-bg-color .status-customer-reply, .primary-bg-color .status-onhold, .primary-bg-color .status-redemption { background: rgba(240,190,106,.14); color: var(--nx-warn); border-color: rgba(240,190,106,.3); } .primary-bg-color .status-suspended, .primary-bg-color .status-terminated, .primary-bg-color .status-cancelled, .primary-bg-color .status-expired, .primary-bg-color .status-fraud, .primary-bg-color .status-collections, .primary-bg-color .status-dead, .primary-bg-color .status-lost, .primary-bg-color .status-refunded { background: rgba(255,107,122,.14); color: var(--nx-bad); border-color: rgba(255,107,122,.3); } .primary-bg-color .status-closed { background: var(--nx-raised); color: var(--nx-text-2); } /* bară de progres */ .primary-bg-color .progress { background: var(--nx-deep); border-radius: var(--nx-r-pill); height: 8px; box-shadow: var(--nx-rim); } .primary-bg-color .progress-bar { background: var(--nx-gradient); } /* ----------------------------------------------------------------------------- Client area — pagina principală (tiles + carduri) Cele 4 tiles devin o singură bandă-instrument cu separatoare, nu 4 carduri. -------------------------------------------------------------------------- */ .primary-bg-color .tiles { margin-bottom: 20px; } .primary-bg-color .tiles .row.no-gutters { background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); overflow: hidden; } .primary-bg-color .tiles .tile { display: block; position: relative; text-decoration: none; background: transparent; border: 0; border-right: 1px solid var(--nx-line); border-radius: 0; padding: 20px 22px 18px; color: var(--nx-text-1); transition: background .15s ease; } .primary-bg-color .tiles .row > div:last-child .tile { border-right: 0; } .primary-bg-color .tiles .tile:hover { background: rgba(94, 231, 214, 0.05); color: #fff; cursor: pointer; } .primary-bg-color .tiles .tile i { position: absolute; top: 20px; right: 22px; font-size: 20px; line-height: 1; color: var(--nx-text-3); transition: color .15s ease; } .primary-bg-color .tiles .tile:hover i { font-size: 20px; color: var(--nx-cyan); } .primary-bg-color .tiles .tile .stat { margin-top: 18px; font-family: var(--nx-font-display); font-weight: 500; font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--nx-phosphor); } .primary-bg-color .tiles .tile .title { margin-top: 6px; font-family: var(--nx-font-body); font-weight: 500; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--nx-text-2); } .primary-bg-color .tiles .tile .highlight, .primary-bg-color .tiles .tile .highlight[class*="bg-color-"] { margin-top: 12px; height: 2px; width: 36px; border-radius: 2px; background: var(--nx-cyan) !important; opacity: .7; } @media (max-width: 1199.98px) { .primary-bg-color .tiles div:nth-child(1) > .tile, .primary-bg-color .tiles div:nth-child(2) > .tile { border-bottom: 1px solid var(--nx-line); } .primary-bg-color .tiles div:nth-child(2) > .tile, .primary-bg-color .tiles div:nth-child(4) > .tile { border-right: 0; } } .primary-bg-color .client-home-cards .card { font-size: 14px; } .primary-bg-color .client-home-cards .card-header { background: transparent; border-bottom: 1px solid var(--nx-line); font-weight: 500; } .primary-bg-color .client-home-cards .card-header .btn { color: var(--nx-cyan); } .primary-bg-color .client-home-cards .card-header .btn:hover { color: #fff; } .primary-bg-color .client-home-cards .card-body .text-muted, .primary-bg-color .client-home-cards .text-center.text-muted { color: var(--nx-text-3) !important; } .primary-bg-color .client-home-cards .card .list-group-item { font-size: 14px; } /* butoane-icon de acțiune (Twenty-One: action-icon-btns) */ .primary-bg-color .action-icon-btns a { background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); color: var(--nx-text-1); padding: 18px 8px 20px; font-size: 14px; } .primary-bg-color .action-icon-btns a:hover { color: #fff; box-shadow: var(--nx-rim-hover); } .primary-bg-color .action-icon-btns a .ico-container i { color: var(--nx-cyan); } .primary-bg-color .action-icon-btns a[class*="card-accent-"] { border-top: 0 !important; } /* ----------------------------------------------------------------------------- Pagini specifice: login, KB, tichete, facturi (listă), domenii, comandă -------------------------------------------------------------------------- */ .primary-bg-color .login-form .card, .primary-bg-color .mw-540 { max-width: 460px; } .primary-bg-color .login-form .card-body { padding: 36px 32px; } .primary-bg-color .login-form h6.h3 { margin-bottom: 4px; } .primary-bg-color .btn-reveal-pw { border-radius: 0 var(--nx-r-control) var(--nx-r-control) 0 !important; border-left: 0; } .primary-bg-color .kb-search .form-control { padding-left: 16px; } .primary-bg-color .kb-category, .primary-bg-color .kb-article-item { border-color: var(--nx-line); } .primary-bg-color .kb-article-item a, .primary-bg-color .kb-category a { color: var(--nx-text); } .primary-bg-color .kb-article-item a:hover, .primary-bg-color .kb-category a:hover { color: var(--nx-cyan); } .primary-bg-color .ticket-reply { background: var(--nx-surface); border: 0; box-shadow: var(--nx-rim); border-radius: var(--nx-r-card); } .primary-bg-color .ticket-reply .card-header, .primary-bg-color .ticket-reply .card-body { color: var(--nx-text-1); } .primary-bg-color .ticket-reply.staff { box-shadow: var(--nx-rim), inset 3px 0 0 var(--nx-cyan); } .primary-bg-color .ticket-reply .date { color: var(--nx-text-3); font-family: var(--nx-font-mono); font-size: 12px; } .primary-bg-color .view-ticket .ticket-subject, .primary-bg-color .ticket-subject { color: var(--nx-text); } .primary-bg-color .invoice-summary-table td { color: var(--nx-text-1); } .primary-bg-color .nav-tabs { border-bottom: 1px solid var(--nx-line); } .primary-bg-color .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--nx-text-2); font-family: var(--nx-font-display); font-weight: 500; padding: 10px 14px; margin-bottom: -1px; border-radius: 0; } .primary-bg-color .nav-tabs .nav-link:hover { color: var(--nx-text); border-color: transparent; } .primary-bg-color .nav-tabs .nav-link.active { color: var(--nx-cyan); background: transparent; border-bottom-color: var(--nx-cyan); } .primary-bg-color .nav-pills .nav-link { border-radius: var(--nx-r-pill); color: var(--nx-text-2); } .primary-bg-color .nav-pills .nav-link.active { background: var(--nx-cyan-dim); color: var(--nx-cyan); } .primary-bg-color .tab-content { color: var(--nx-text-1); } .primary-bg-color .domain-pricing .table th { background: var(--nx-deep); } .primary-bg-color .featured-tld { background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); } .primary-bg-color .domain-checker-bg, .primary-bg-color .domain-checker-search { background: transparent !important; } .primary-bg-color .domain-checker-result-headline, .primary-bg-color .domainchecker-homepage-captcha { color: var(--nx-text); } .primary-bg-color .promo-banner, .primary-bg-color .promo-banner-slim, .primary-bg-color .promo-container, .primary-bg-color .store-promoted-product, .primary-bg-color .store-order-container, .primary-bg-color .panel-mc-sso { background: var(--nx-surface) !important; border: 0 !important; box-shadow: var(--nx-rim); border-radius: var(--nx-r-card); color: var(--nx-text-1); } .primary-bg-color .upgrade .card, .primary-bg-color .twofa-module, .primary-bg-color .twofa-setup { background: var(--nx-surface); color: var(--nx-text-1); } /* coș / order form (standard_cart) — aducem panourile în paletă */ .primary-bg-color.nx-cart #main-body { padding-top: 24px; } .primary-bg-color .view-cart-items, .primary-bg-color .order-summary, .primary-bg-color .summary-container, .primary-bg-color .cart-body, .primary-bg-color .product-info, .primary-bg-color .sidebar-summary, .primary-bg-color .checkout-security-msg, .primary-bg-color .domain-selection-options, .primary-bg-color .domain-checker-container, .primary-bg-color .cart-header { background: var(--nx-surface) !important; color: var(--nx-text-1); border-color: var(--nx-line) !important; } .primary-bg-color .products .product, .primary-bg-color .product-selection-container .product, .primary-bg-color .products .product .product-desc, .primary-bg-color .product-selection-container .product .product-desc { background: var(--nx-surface) !important; border-color: var(--nx-line) !important; color: var(--nx-text-1); border-radius: var(--nx-r-card); } .primary-bg-color .products .product header, .primary-bg-color .product-selection-container .product header, .primary-bg-color .products .product .product-pricing { background: var(--nx-deep) !important; color: var(--nx-text); } .primary-bg-color .products .product .product-pricing .price { color: var(--nx-phosphor); font-family: var(--nx-font-display); font-weight: 500; } .primary-bg-color .products .product header h3, .primary-bg-color .product header h3 { color: var(--nx-text); font-family: var(--nx-font-display); font-weight: 500; } .primary-bg-color .product-desc ul li, .primary-bg-color .product .features li { color: var(--nx-text-1); } .primary-bg-color .order-summary { color: var(--nx-text); } .primary-bg-color .order-summary .summary-totals, .primary-bg-color .order-summary h2 { color: var(--nx-text); } .primary-bg-color .order-summary .summary-totals .total-due-today-amt { color: var(--nx-phosphor); } .primary-bg-color .view-cart-items .item, .primary-bg-color .view-cart-items .item-title, .primary-bg-color .view-cart-items .item-group { color: var(--nx-text); } .primary-bg-color .view-cart-items .item .item-price span { color: var(--nx-phosphor); } .primary-bg-color .view-cart-tabs .nav-tabs .nav-link { background: transparent; } .primary-bg-color .sub-heading span, .primary-bg-color .cart-heading span { background: var(--nx-void); color: var(--nx-text-2); } .primary-bg-color .sub-heading::before, .primary-bg-color .cart-heading::before { border-top-color: var(--nx-line); } .primary-bg-color .domain-checker-container .domain-checker-result-headline { color: var(--nx-text); } .primary-bg-color .domain-lookup-result .domain-lookup-primary-loader, .primary-bg-color .domain-lookup-result .domain-lookup-loader { background: var(--nx-surface); } .primary-bg-color .domain-lookup-result .domain-price, .primary-bg-color .domain-lookup-result .domain-name { color: var(--nx-text); } .primary-bg-color .cart-header .cart-title, .primary-bg-color .cart-header .cart-title h2 { color: var(--nx-text); } .primary-bg-color #checkout .card, .primary-bg-color #order-standard_cart .card { background: var(--nx-surface); } .primary-bg-color #order-standard_cart .form-control, .primary-bg-color #order-standard_cart .custom-select { background-color: var(--nx-deep); } .primary-bg-color #order-standard_cart .payment-methods label, .primary-bg-color #order-standard_cart label { color: var(--nx-text-1); } .primary-bg-color #order-standard_cart .promotion-code { color: var(--nx-text-1); } .primary-bg-color #order-standard_cart .cart-item-summary, .primary-bg-color #order-standard_cart .cart-item-summary .item { color: var(--nx-text-1); } .primary-bg-color .domain-pricing .table, .primary-bg-color #order-standard_cart .table { color: var(--nx-text-1); } .primary-bg-color #order-standard_cart .btn-default { color: var(--nx-text); } .primary-bg-color .config-options-container .configurable-options label { color: var(--nx-text-1); } .primary-bg-color .order-summary .summary-totals .total-due-today-amt, .primary-bg-color .order-summary .summary-totals .total-due-today { color: var(--nx-phosphor); } .primary-bg-color #frmDomainHomepage .btn-primary { border-radius: var(--nx-r-pill); } /* ----------------------------------------------------------------------------- Modale, tooltip-uri, overlay -------------------------------------------------------------------------- */ .primary-bg-color .modal-content { background: var(--nx-surface); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-card); color: var(--nx-text-1); box-shadow: var(--nx-rim), 0 40px 80px -30px rgba(0,0,0,.9); } .primary-bg-color .modal-header { border-bottom: 1px solid var(--nx-line); padding: 18px 22px; } .primary-bg-color .modal-title { color: var(--nx-text); font-family: var(--nx-font-display); font-weight: 500; } .primary-bg-color .modal-footer { border-top: 1px solid var(--nx-line); } .primary-bg-color .modal .close { color: var(--nx-text-2); text-shadow: none; opacity: 1; } .primary-bg-color .modal .close:hover { color: #fff; } .primary-bg-color .modal-backdrop.show { opacity: .7; background: #02030a; } .primary-bg-color .modal-localisation .modal-content { background: var(--nx-surface); } .primary-bg-color .modal-localisation .item-selector .item { display: block; padding: 10px 12px; border-radius: var(--nx-r-control); color: var(--nx-text-1); border: 1px solid var(--nx-line); margin-bottom: 8px; font-size: 14px; } .primary-bg-color .modal-localisation .item-selector .item:hover { border-color: var(--nx-line-2); color: #fff; } .primary-bg-color .modal-localisation .item-selector .item.active { background: var(--nx-cyan-dim); color: var(--nx-cyan); border-color: rgba(94,231,214,.4); } .primary-bg-color .tooltip-inner { background: var(--nx-raised); color: var(--nx-text); border: 1px solid var(--nx-line-2); font-size: 12.5px; } .primary-bg-color .bs-tooltip-top .arrow::before, .primary-bg-color .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--nx-line-2); } .primary-bg-color .bs-tooltip-bottom .arrow::before, .primary-bg-color .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--nx-line-2); } .primary-bg-color #fullpage-overlay { background: rgba(5, 6, 20, 0.86); color: var(--nx-text); } .primary-bg-color .toast { background: var(--nx-raised); color: var(--nx-text); border: 1px solid var(--nx-line-2); } .primary-bg-color .toast-header { background: transparent; color: var(--nx-text); border-bottom-color: var(--nx-line); } /* bannere de sistem (verificare e-mail, probleme rețea) */ .primary-bg-color .verification-banner, .primary-bg-color .network-issues-notifications .alert { background: rgba(240,190,106,.1); border-bottom: 1px solid rgba(240,190,106,.25); color: #f3e2c2; } .primary-bg-color .verification-banner .btn { border-color: rgba(240,190,106,.4); color: var(--nx-warn); } /* ----------------------------------------------------------------------------- HOMEPAGE -------------------------------------------------------------------------- */ .primary-bg-color .nx-section { padding: 88px 0; } .primary-bg-color .nx-section-head { max-width: 640px; margin-bottom: 40px; } .primary-bg-color .nx-section-head h2 { margin-bottom: 14px; } .primary-bg-color .nx-section-head p { color: var(--nx-text-2); font-size: 16.5px; margin: 0; } /* ----------------------------------------------------------------------------- HERO — un ecran plin: text în stânga, planeta în dreapta. Canvasul e absolut în interiorul secțiunii (care e position:relative). Fără sticky și fără fixed — amândouă se rup dacă un părinte din WHMCS are overflow sau transform, și atunci macheta sare din poziție. -------------------------------------------------------------------------- */ .primary-bg-color .nx-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 88px 0; overflow: hidden; } .primary-bg-color .nx-orb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; } .primary-bg-color .nx-hero-inner { position: relative; z-index: 1; width: 100%; } .primary-bg-color .nx-hero-copy { max-width: 46%; will-change: transform, opacity; } .primary-bg-color .nx-hero-copy h1 { margin: 0 0 22px; max-width: 15ch; } .primary-bg-color .nx-lead { color: var(--nx-text-2); font-size: 17.5px; line-height: 1.6; max-width: 52ch; margin: 0 0 30px; } .primary-bg-color .nx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* caseta de domenii urcă peste finalul efectului */ .primary-bg-color .nx-domain-section { padding: 0 0 72px; position: relative; z-index: 2; } .primary-bg-color [data-nx-reveal] { will-change: transform, opacity; } /* nimic nu are voie să iasă lateral din pagină */ .primary-bg-color #main-body, .primary-bg-color .nx-home-wrap { overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { .primary-bg-color .nx-hero-copy, .primary-bg-color [data-nx-reveal] { transform: none !important; opacity: 1 !important; } } /* ----------------------------------------------------------------------------- Căutare de domenii — markup-ul WHMCS, adus complet în paletă. Include reCAPTCHA / hCaptcha, care vin cu fundal alb din iframe: le punem într-un panou propriu, centrat, ca să nu mai pară o pată în pagină. -------------------------------------------------------------------------- */ .primary-bg-color .nx-domain .home-domain-search, .primary-bg-color .home-domain-search, .primary-bg-color .home-domain-search.bg-white { background: var(--nx-surface) !important; border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); color: var(--nx-text-1); } .primary-bg-color .nx-domain .home-domain-search > .container { padding: 0; max-width: none; } .primary-bg-color .nx-domain .home-domain-search .p-5 { padding: 32px !important; } .primary-bg-color .nx-domain .home-domain-search h2, .primary-bg-color .nx-domain .home-domain-search .h2 { font-size: 1.35rem; text-align: left !important; margin: 0 0 18px; letter-spacing: -0.01em; color: var(--nx-text); } .primary-bg-color .nx-domain .home-domain-search p { color: var(--nx-text-2); } /* WHMCS pune fundal alb pe containerul câmpului (.bg-white / .input-group-wrapper); îl scoatem, altfel rămâne un dreptunghi alb în jurul input-ului și al butoanelor */ .primary-bg-color .nx-domain .input-group-wrapper, .primary-bg-color .nx-domain .input-group, .primary-bg-color .nx-domain form, .primary-bg-color .nx-domain .home-domain-search .bg-white, .primary-bg-color .nx-domain .home-domain-search .container, .primary-bg-color .nx-domain .home-domain-search .card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; } /* câmp + butoane: pastile separate, fără suprapunere */ .primary-bg-color .nx-domain .input-group-wrapper .input-group { display: flex; flex-wrap: nowrap; gap: 10px; } .primary-bg-color .nx-domain .input-group > .form-control, .primary-bg-color .nx-domain .input-group > input[type="text"] { border-radius: var(--nx-r-pill) !important; padding: 14px 22px; font-size: 16px; font-family: var(--nx-font-mono); background: var(--nx-deep); border: 1px solid var(--nx-line-2); color: var(--nx-text); flex: 1 1 auto; min-width: 0; } .primary-bg-color .nx-domain .input-group-append, .primary-bg-color .nx-domain .input-group-prepend { display: flex; gap: 8px; margin: 0; } .primary-bg-color .nx-domain .input-group-append .btn, .primary-bg-color .nx-domain .input-group-prepend .btn { border-radius: var(--nx-r-pill) !important; padding: 13px 24px; white-space: nowrap; } /* butonul de transfer trebuie să se vadă clar lângă cel de căutare */ .primary-bg-color .nx-domain .input-group-append .btn-success, .primary-bg-color .nx-domain #btnTransfer { background: transparent !important; color: var(--nx-text) !important; border: 1px solid var(--nx-line-2) !important; } .primary-bg-color .nx-domain .input-group-append .btn-success:hover, .primary-bg-color .nx-domain #btnTransfer:hover { background: rgba(226, 230, 255, 0.06) !important; border-color: var(--nx-cyan) !important; color: #fff !important; } /* lista de extensii/prețuri */ .primary-bg-color .nx-domain .home-domain-search .tld-logos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--nx-text-2); font-family: var(--nx-font-mono); font-size: 13px; } .primary-bg-color .nx-domain .home-domain-search .tld-logos li { float: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; } .primary-bg-color .nx-domain .home-domain-search .tld-logos img { width: 44px; filter: grayscale(1) brightness(1.6) contrast(.8); } .primary-bg-color .nx-domain .home-domain-search .btn-link { color: var(--nx-text-2); } .primary-bg-color .nx-domain .home-domain-search .btn-link:hover { color: var(--nx-cyan); } .primary-bg-color .nx-domain .home-domain-search .row.d-sm-none .btn { border-radius: var(--nx-r-pill); } /* captcha: iframe alb → îl izolăm într-un panou propriu, centrat */ .primary-bg-color .domainchecker-homepage-captcha, .primary-bg-color .nx-domain .g-recaptcha, .primary-bg-color .nx-domain .h-captcha, .primary-bg-color .nx-domain [class*="captcha"] { display: flex; justify-content: center; margin: 22px auto 0; } /* caseta captcha primește un cadru propriu, ca să arate ca un element al paginii, nu ca o pată albă lipită peste card */ .primary-bg-color .domainchecker-homepage-captcha { width: -moz-fit-content; width: fit-content; padding: 12px; background: var(--nx-deep); border-radius: var(--nx-r-control); box-shadow: var(--nx-rim); } .primary-bg-color .nx-domain .g-recaptcha > div, .primary-bg-color .nx-domain .h-captcha > div, .primary-bg-color .nx-domain iframe[src*="recaptcha"], .primary-bg-color .nx-domain iframe[src*="hcaptcha"] { border-radius: var(--nx-r-control); overflow: hidden; box-shadow: var(--nx-rim); } /* Notă: conținutul iframe-ului aparține Google/hCaptcha și nu poate fi restilizat. Dacă pata albă tot deranjează, în WHMCS: Configuration → System Settings → General → Security → Captcha Type = "Invisible reCAPTCHA" (nu mai apare nicio casetă). */ /* ----------------------------------------------------------------------------- Glow + fum pe caseta de domenii. Trei straturi, toate pe pseudo-elemente (fără imagini, fără markup în plus): ::before pe .nx-domain → halo colorat, difuz, în spatele cardului ::after pe card → fum interior, două pete care se rotesc foarte lent box-shadow → margine care respiră -------------------------------------------------------------------------- */ .primary-bg-color .nx-domain { position: relative; isolation: isolate; } .primary-bg-color .nx-domain::before { content: ""; position: absolute; inset: -26% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(42% 52% at 26% 42%, rgba(94, 231, 214, .55), transparent 70%), radial-gradient(40% 50% at 74% 62%, rgba(165, 139, 255, .48), transparent 72%), radial-gradient(64% 42% at 50% 16%, rgba(110, 236, 220, .28), transparent 76%), radial-gradient(50% 40% at 55% 92%, rgba(200, 170, 255, .22), transparent 76%); filter: blur(56px); opacity: 1; pointer-events: none; animation: nxHalo 18s ease-in-out infinite alternate; } @keyframes nxHalo { 0% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .75; } 50% { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: 1; } 100% { transform: translate3d(1%, 2%, 0) scale(1.02); opacity: .8; } } .primary-bg-color .nx-domain .home-domain-search { position: relative; overflow: hidden; box-shadow: var(--nx-rim), 0 0 0 1px rgba(110, 236, 220, .14), 0 30px 90px -28px rgba(94, 231, 214, .5); } /* fumul: pete difuze care se rotesc lent în interiorul cardului */ .primary-bg-color .nx-domain .home-domain-search::after { content: ""; position: absolute; inset: -40%; z-index: 0; background: radial-gradient(28% 34% at 24% 32%, rgba(94, 231, 214, .22), transparent 70%), radial-gradient(30% 30% at 76% 62%, rgba(165, 139, 255, .20), transparent 72%), radial-gradient(40% 28% at 50% 88%, rgba(110, 236, 220, .14), transparent 74%); filter: blur(26px); pointer-events: none; animation: nxSmoke 26s linear infinite; } @keyframes nxSmoke { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } } /* conținutul stă peste fum */ .primary-bg-color .nx-domain .home-domain-search > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .primary-bg-color .nx-domain::before, .primary-bg-color .nx-domain .home-domain-search::after { animation: none; } } /* varianta cu căutare avansată (WHMCS 8.13) */ .primary-bg-color .nx-domain .advanced-input textarea, .primary-bg-color .nx-domain .advanced-input .multiselect { background: var(--nx-deep); color: var(--nx-text); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-control); padding: 12px 16px; } .primary-bg-color .nx-domain .advanced-input label { color: var(--nx-text-2); font-weight: 400; } /* servicii — bento asimetric, primul grup e lat. overflow ascuns: cardurile ies lateral din ecran fără să apară bară de derulare orizontală. */ .primary-bg-color .nx-services { overflow: hidden; } .primary-bg-color .nx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .primary-bg-color .nx-tile { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px; min-height: 220px; background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); color: var(--nx-text-1); transition: box-shadow .18s ease, background .18s ease; } .primary-bg-color .nx-tile:hover, .primary-bg-color .nx-tile:focus-visible { box-shadow: var(--nx-rim-hover); background: var(--nx-raised); color: var(--nx-text-1); } .primary-bg-color .nx-tile-wide { grid-column: span 2; } /* tile-ul „Servicii IT” e ultimul și umple exact restul rândului, oricâte grupuri de produse există */ .primary-bg-color .nx-tile-it:nth-child(3n+1) { grid-column: span 2; } .primary-bg-color .nx-tile-it:nth-child(3n) { grid-column: span 3; flex-direction: row; align-items: center; min-height: 0; } .primary-bg-color .nx-tile-it:nth-child(3n) .nx-tile-body { max-width: 60ch; } .primary-bg-color .nx-tile-it:nth-child(3n) .nx-tile-cta { margin-left: auto; } .primary-bg-color .nx-tile-wide .nx-tile-body { max-width: 46ch; } .primary-bg-color .nx-tile-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-cyan-dim); color: var(--nx-cyan); font-size: 18px; } .primary-bg-color .nx-tile-it .nx-tile-icon { background: rgba(165,139,255,.14); color: var(--nx-violet); } .primary-bg-color .nx-tile-body { display: flex; flex-direction: column; gap: 8px; flex: 1; } .primary-bg-color .nx-tile-title { font-family: var(--nx-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; color: var(--nx-text); line-height: 1.2; } .primary-bg-color .nx-tile-text { color: var(--nx-text-2); font-size: 14.5px; line-height: 1.5; } .primary-bg-color .nx-tile-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-cyan); font-family: var(--nx-font-display); font-weight: 500; font-size: 14px; } .primary-bg-color .nx-tile-cta i { font-size: 12px; transition: transform .18s ease; } .primary-bg-color .nx-tile:hover .nx-tile-cta i { transform: translateX(3px); } /* ----------------------------------------------------------------------------- Carduri care converg — la scroll, cardurile vin din stânga și din dreapta, se adună în mijloc când ajung în centrul ecranului, apoi se despart la loc. Deplasarea o calculează js/novanex.js din poziția cardului în viewport. -------------------------------------------------------------------------- */ .primary-bg-color [data-nx-converge] .nx-tile { will-change: transform, opacity; transition: none; } .primary-bg-color [data-nx-converge] .nx-tile:hover { transition: box-shadow .18s ease, background .18s ease; } @media (prefers-reduced-motion: reduce) { .primary-bg-color [data-nx-converge] .nx-tile { transform: none !important; opacity: 1 !important; } } /* ----------------------------------------------------------------------------- Apariții la scroll [data-nx-converge] → copiii vin din stânga/dreapta spre centru [data-nx-rise] → copiii cresc din spate (scale + fade), fără să se mute [data-nx-rise-self] → același efect, dar pe elementul însuși [data-nx-appear] → titlurile de secțiune: urcă, se aprind, linia se întinde Toate sunt calculate în js/novanex.js din poziția în viewport, deci merg și înapoi. -------------------------------------------------------------------------- */ .primary-bg-color [data-nx-rise] > *, .primary-bg-color [data-nx-rise-self], .primary-bg-color [data-nx-appear] { will-change: transform, opacity; } .primary-bg-color [data-nx-appear] { position: relative; } .primary-bg-color [data-nx-appear]::after { content: ""; position: absolute; left: 0; bottom: -14px; width: 64px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--nx-cyan), rgba(165, 139, 255, .5)); transform: scaleX(var(--nx-in, 0)); transform-origin: left center; opacity: var(--nx-in, 0); } @media (prefers-reduced-motion: reduce) { .primary-bg-color [data-nx-rise] > *, .primary-bg-color [data-nx-rise-self], .primary-bg-color [data-nx-appear] { transform: none !important; opacity: 1 !important; } .primary-bg-color [data-nx-appear]::after { transform: scaleX(1); opacity: 1; } } /* ----------------------------------------------------------------------------- Anunțuri recente (necesită hook-ul includes/hooks/novanex_announcements.php) -------------------------------------------------------------------------- */ .primary-bg-color .nx-news { overflow: hidden; } .primary-bg-color .nx-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; } .primary-bg-color .nx-news-head p { margin: 0; } .primary-bg-color .nx-news-head .btn { flex: 0 0 auto; } .primary-bg-color .nx-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .primary-bg-color .nx-news-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); color: var(--nx-text-1); transition: box-shadow .18s ease, background .18s ease; } .primary-bg-color .nx-news-card:hover { background: var(--nx-raised); box-shadow: var(--nx-rim-hover); color: var(--nx-text-1); } .primary-bg-color .nx-news-date { font-family: var(--nx-font-mono); font-size: 12px; color: var(--nx-text-3); letter-spacing: 0.02em; } .primary-bg-color .nx-news-title { font-family: var(--nx-font-display); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--nx-text); } .primary-bg-color .nx-news-text { color: var(--nx-text-2); font-size: 14.5px; line-height: 1.5; flex: 1; } .primary-bg-color .nx-news-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--nx-cyan); font-family: var(--nx-font-display); font-weight: 500; font-size: 14px; } .primary-bg-color .nx-news-cta i { font-size: 12px; transition: transform .18s ease; } .primary-bg-color .nx-news-card:hover .nx-news-cta i { transform: translateX(3px); } /* rețea */ .primary-bg-color .nx-network { background: linear-gradient(180deg, transparent, rgba(7,8,27,.7) 20%, rgba(7,8,27,.7) 80%, transparent); } .primary-bg-color .nx-network-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; } .primary-bg-color .nx-network-copy h2 { margin-bottom: 18px; } .primary-bg-color .nx-network-copy p { color: var(--nx-text-2); font-size: 16px; max-width: 60ch; } .primary-bg-color .nx-checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; } .primary-bg-color .nx-checks li { position: relative; padding-left: 26px; color: var(--nx-text-1); font-size: 15px; } .primary-bg-color .nx-checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--nx-cyan); border-bottom: 2px solid var(--nx-cyan); transform: rotate(-45deg); } .primary-bg-color .nx-console { background: var(--nx-deep); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); overflow: hidden; font-family: var(--nx-font-mono); } .primary-bg-color .nx-console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--nx-line); background: var(--nx-surface); } .primary-bg-color .nx-console-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-raised); box-shadow: inset 0 0 0 1px var(--nx-line-2); } .primary-bg-color .nx-console-bar em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--nx-text-3); } .primary-bg-color .nx-console-list { margin: 0; padding: 8px 0; } .primary-bg-color .nx-console-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 11px 20px; font-size: 13.5px; border-bottom: 1px solid var(--nx-line); } .primary-bg-color .nx-console-list > div:last-child { border-bottom: 0; } .primary-bg-color .nx-console-list dt { color: var(--nx-text-3); font-weight: 400; } .primary-bg-color .nx-console-list dd { margin: 0; color: var(--nx-text); } .primary-bg-color .nx-console-list dd::before { content: "●"; color: var(--nx-cyan); font-size: 9px; margin-right: 10px; vertical-align: 1px; } .primary-bg-color .nx-console-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-cyan); font-family: var(--nx-font-display); font-weight: 500; font-size: 14px; } .primary-bg-color .nx-console-link:hover { color: #fff; } /* ----------------------------------------------------------------------------- Carduri de prezentare (secțiunea „Rețea proprie") -------------------------------------------------------------------------- */ .primary-bg-color .nx-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .primary-bg-color .nx-feature { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: var(--nx-surface); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); transition: box-shadow .18s ease, background .18s ease; } .primary-bg-color .nx-feature:hover { background: var(--nx-raised); box-shadow: var(--nx-rim-hover); } .primary-bg-color .nx-feature-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-cyan-dim); color: var(--nx-cyan); font-size: 17px; } .primary-bg-color .nx-feature-title { font-family: var(--nx-font-display); font-weight: 500; font-size: 16.5px; line-height: 1.3; color: var(--nx-text); } .primary-bg-color .nx-feature-text { color: var(--nx-text-2); font-size: 14.5px; line-height: 1.5; } /* secțiunea „Toate serviciile" — consola pe lățime mai mare, două coloane de rânduri */ .primary-bg-color .nx-allservices .nx-console-wide { max-width: 980px; margin: 0 auto; } .primary-bg-color .nx-console-wide .nx-console-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } .primary-bg-color .nx-console-wide .nx-console-list > div { border-right: 1px solid var(--nx-line); } .primary-bg-color .nx-console-wide .nx-console-list > div:nth-child(2n) { border-right: 0; } .primary-bg-color .nx-console-wide .nx-console-list > div:nth-last-child(-n+2) { border-bottom: 0; } .primary-bg-color .nx-console-wide .nx-console-list > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px; } .primary-bg-color .nx-console-wide dt { color: var(--nx-text); font-size: 14px; } .primary-bg-color .nx-console-wide dd { color: var(--nx-text-3); font-size: 13px; } .primary-bg-color .nx-console-wide dd::before { content: none; } /* ajutor */ .primary-bg-color .nx-help { padding-top: 40px; padding-bottom: 40px; } .primary-bg-color .nx-help-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: center; padding: 32px 0; border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); } .primary-bg-color .nx-help-row h2 { font-size: 1.5rem; margin: 0; } .primary-bg-color .nx-help-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .primary-bg-color .nx-help-links a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--nx-r-pill); border: 1px solid var(--nx-line); color: var(--nx-text-1); font-family: var(--nx-font-display); font-weight: 500; font-size: 14px; transition: border-color .15s ease, color .15s ease, background .15s ease; } .primary-bg-color .nx-help-links a i { color: var(--nx-cyan); font-size: 15px; } .primary-bg-color .nx-help-links a:hover { color: #fff; border-color: var(--nx-cyan); background: var(--nx-cyan-dim); } /* CTA — puț adânc (suprafață recesată) */ .primary-bg-color .nx-cta { padding-top: 40px; } .primary-bg-color .nx-cta-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; padding: 56px; background: var(--nx-deep); border-radius: var(--nx-r-card); box-shadow: var(--nx-rim); position: relative; overflow: hidden; } .primary-bg-color .nx-cta-card::after { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(165,139,255,.16), transparent); pointer-events: none; } .primary-bg-color .nx-cta-card h2 { margin-bottom: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); } .primary-bg-color .nx-cta-card p { color: var(--nx-text-2); margin: 0; } .primary-bg-color .nx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; position: relative; } /* ----------------------------------------------------------------------------- Footer — nivelul cel mai adânc -------------------------------------------------------------------------- */ .primary-bg-color .nx-footer { background: var(--nx-deep); border-top: 1px solid var(--nx-line); color: var(--nx-text-2); padding: 64px 0 32px; font-size: 14px; margin-top: auto; } .primary-bg-color .nx-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--nx-line); } .primary-bg-color .nx-footer-logo { display: inline-flex; align-items: center; color: var(--nx-text); margin-bottom: 14px; } .primary-bg-color .nx-footer-logo img { max-height: 30px; } .primary-bg-color .nx-footer-tagline { color: var(--nx-text-2); max-width: 36ch; margin-bottom: 14px; } .primary-bg-color .nx-footer-net { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nx-font-mono); font-size: 12.5px; color: var(--nx-text-3); margin: 0; } .primary-bg-color .nx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 10px var(--nx-cyan); } .primary-bg-color .nx-footer-col h4 { font-size: 13.5px; color: var(--nx-text); margin-bottom: 14px; letter-spacing: 0; } .primary-bg-color .nx-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .primary-bg-color .nx-footer-col a { color: var(--nx-text-2); } .primary-bg-color .nx-footer-col a:hover { color: var(--nx-cyan); } .primary-bg-color .nx-footer-company li { color: var(--nx-text-2); } .primary-bg-color .nx-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; } .primary-bg-color .nx-footer .copyright { color: var(--nx-text-3); font-size: 13px; } .primary-bg-color .nx-footer-tools { display: flex; align-items: center; gap: 6px; } .primary-bg-color .nx-footer .btn, .primary-bg-color .nx-locale-btn { background: transparent; color: var(--nx-text-2); border: 1px solid var(--nx-line); font-size: 13px; padding: 6px 12px; line-height: 1.5; } .primary-bg-color .nx-footer .btn:hover { color: #fff; border-color: var(--nx-line-2); } .primary-bg-color .nx-footer .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* ----------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* pe ecrane mici: planeta stă sus, textul începe sub ea; fără secvență la scroll */ .primary-bg-color .nx-hero { min-height: 0; padding: 46vh 0 48px; } .primary-bg-color .nx-hero-copy { max-width: none; } .primary-bg-color .nx-hero-copy h1 { max-width: none; } .primary-bg-color .nx-domain-section { padding-top: 8px; } .primary-bg-color .nx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .primary-bg-color .nx-news-grid { grid-template-columns: 1fr; } .primary-bg-color .nx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .primary-bg-color .nx-news-head { flex-direction: column; align-items: flex-start; } .primary-bg-color .nx-tile-it:nth-child(3n+1), .primary-bg-color .nx-tile-it:nth-child(3n) { grid-column: span 1; flex-direction: column; align-items: stretch; } .primary-bg-color .nx-tile-it:nth-child(3n) .nx-tile-cta { margin-left: 0; } .primary-bg-color .nx-tile-it:nth-child(2n) { grid-column: span 2; } .primary-bg-color .nx-network-grid { grid-template-columns: 1fr; gap: 32px; } .primary-bg-color .nx-help-row { grid-template-columns: 1fr; gap: 18px; } .primary-bg-color .nx-help-links { justify-content: flex-start; } .primary-bg-color .nx-cta-card { grid-template-columns: 1fr; padding: 36px; } .primary-bg-color .nx-cta-actions { justify-content: flex-start; } .primary-bg-color .nx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .primary-bg-color .nx-section { padding: 64px 0; } } @media (max-width: 575.98px) { .primary-bg-color .nx-bento { grid-template-columns: 1fr; } .primary-bg-color .nx-tile-wide, .primary-bg-color .nx-tile-it:nth-child(2n), .primary-bg-color .nx-tile-it:nth-child(3n+1), .primary-bg-color .nx-tile-it:nth-child(3n) { grid-column: auto; } .primary-bg-color .nx-tile { min-height: 0; } .primary-bg-color .nx-feature-grid { grid-template-columns: 1fr; } .primary-bg-color .nx-console-wide .nx-console-list { grid-template-columns: 1fr; } .primary-bg-color .nx-console-wide .nx-console-list > div { border-right: 0; } .primary-bg-color .nx-footer-grid { grid-template-columns: 1fr; gap: 28px; } .primary-bg-color .nx-domain .home-domain-search .p-5 { padding: 22px !important; } .primary-bg-color .nx-domain .input-group-wrapper .input-group { flex-direction: column; flex-wrap: wrap; } .primary-bg-color .nx-domain .input-group > .form-control { width: 100%; flex: 0 0 auto; } .primary-bg-color .nx-domain .input-group-append { width: 100%; } .primary-bg-color .nx-domain .input-group-append .btn { flex: 1 1 0; } /* caseta captcha are lățime fixă (304px) — o micșorăm ca să încapă în card */ .primary-bg-color .domainchecker-homepage-captcha { padding: 8px; max-width: 100%; } .primary-bg-color .domainchecker-homepage-captcha .g-recaptcha, .primary-bg-color .domainchecker-homepage-captcha > div { transform: scale(.86); transform-origin: top center; margin-bottom: -11px; } .primary-bg-color .nx-console-list > div { grid-template-columns: 96px 1fr; } .primary-bg-color .nx-hero-actions .btn { width: 100%; } .primary-bg-color .nx-cta-actions .btn { width: 100%; } .primary-bg-color .tiles .col-sm-3 { margin-bottom: 10px; } } /* ----------------------------------------------------------------------------- Accesibilitate & print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .primary-bg-color *, .primary-bg-color *::before, .primary-bg-color *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { body.primary-bg-color { background: #fff !important; color: #000 !important; } .primary-bg-color .nx-stars, .primary-bg-color .nx-header, .primary-bg-color .nx-footer, .primary-bg-color .master-breadcrumb { display: none !important; } .primary-bg-color .card { box-shadow: none; border: 1px solid #ccc; color: #000; } }