/*================================================================================ Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template Version: 2.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ================================================================================ NOTE: ------ PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ /*================================================================================ Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template Version: 2.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ================================================================================ NOTE: ------ PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ /* ============================================================ Domini Green - Global Fonts (match main website assets/css/style.css) ============================================================ */ :root{ --font-body: 'Barlow', 'IBM Plex Sans', 'Nata Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Outfit', 'Nata Sans', 'Barlow', 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Vuexy/Vuexy-Cal bootstrap variables (vendor CSS sets these to Montserrat) */ --font-family-sans-serif: var(--font-body); --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } html, body{ font-family: var(--font-body) !important; } /* Strong typography override for Vuexy screens that hardcode Montserrat on inner nodes. IMPORTANT: Don't touch icon fonts (Font Awesome / Material Icons / Feather). */ body :where( p, span, div, a, li, ul, ol, small, strong, em, b, label, th, td, caption, input, textarea, select, button ){ font-family: var(--font-body) !important; } /* make sure form controls & buttons follow the same global font */ input, select, textarea, button, .btn, .form-control{ font-family: var(--font-body) !important; } /* Vuexy layout wrappers sometimes set Montserrat deep in the tree */ .vertical-layout, .app-content, .content, .content-wrapper, .content-body, .main-menu, .navigation, .header-navbar, .navbar, .dropdown-menu, .card, .modal, .table, .dataTables_wrapper, .select2-container, .apexcharts-canvas, .swal2-popup{ font-family: var(--font-body) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-title, .section-title, .navbar-brand, .sidebar-header, button.btn, a.btn{ font-family: var(--font-heading) !important; } /* ============================================================ Domini Green - Backoffice Login Redesign (matches main login.php) Scoped to login wrappers by adding .dg-login-page on . ============================================================ */ .dg-login-page { --dg-bg: #050810; --dg-bg2: #0a0f1a; --dg-text: rgba(255, 255, 255, 0.92); --dg-muted: rgba(255, 255, 255, 0.68); --dg-border: rgba(255, 255, 255, 0.12); --dg-neon: #DAFF47; --dg-green: #10B981; --dg-cyan: #22D3EE; --dg-heading: var(--font-heading); } .dg-login-page .app-content.content, .dg-login-page .content-wrapper, .dg-login-page .content-body { padding: 0 !important; margin: 0 !important; } .dg-login-page .login-hero { position: relative; min-height: 100vh; padding: clamp(3.5rem, 6vw, 5.25rem) 0; overflow: hidden; } .dg-login-page .login-hero-bg { position: absolute; inset: 0; background: radial-gradient(900px 400px at 20% 10%, rgba(218,255,71,0.16), transparent 60%), radial-gradient(800px 360px at 80% 0%, rgba(16,185,129,0.16), transparent 55%), radial-gradient(900px 520px at 50% 95%, rgba(34,211,238,0.10), transparent 60%), linear-gradient(180deg, rgba(10,15,26,1), rgba(5,8,16,1)); } .dg-login-page .login-hero-bg::after { content: ""; position: absolute; inset: 0; background: url("../images/hero_bg.png") center/cover no-repeat; opacity: 0.14; mix-blend-mode: screen; pointer-events: none; } .dg-login-page .login-hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.15), rgba(0,0,0,0.65)); pointer-events: none; } .dg-login-page .login-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; } @media (max-width: 1024px) { .dg-login-page .login-hero-grid { grid-template-columns: 1fr; align-items: start; } } .dg-login-page .login-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .dg-login-page .login-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 999px; font-weight: 800; font-size: 0.82rem; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(10px); } .dg-login-page .login-badge i { color: rgba(218,255,71,0.95); } .dg-login-page .login-badge-muted i { color: rgba(34,211,238,0.9); } .dg-login-page .login-title { font-family: var(--dg-heading); font-weight: 950; color: var(--dg-text); font-size: clamp(2.2rem, 4.2vw, 3.35rem); line-height: 1.06; letter-spacing: -0.02em; } .dg-login-page .login-subtitle { margin-top: 0.9rem; color: rgba(255,255,255,0.72); font-size: 1.06rem; line-height: 1.65; max-width: 56ch; } .dg-login-page .login-kpis { margin-top: 1.35rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; max-width: 520px; } .dg-login-page .login-kpi { padding: 0.9rem 0.95rem; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 20px 70px rgba(0,0,0,0.25); } .dg-login-page .login-kpi-label { color: rgba(255,255,255,0.62); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; } .dg-login-page .login-kpi-value { margin-top: 0.25rem; color: rgba(218,255,71,0.95); font-family: var(--dg-heading); font-weight: 950; font-size: 1.25rem; } .dg-login-page .login-points { margin-top: 1.25rem; display: grid; gap: 0.55rem; max-width: 560px; } .dg-login-page .login-point { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.78); font-weight: 700; } .dg-login-page .login-point .material-icons { color: rgba(218,255,71,0.9); font-size: 20px; } .dg-login-page .login-card { border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 28px 110px rgba(0,0,0,0.50); padding: 1.25rem; backdrop-filter: blur(14px); position: relative; overflow: hidden; } .dg-login-page .login-card::before { content: ""; position: absolute; inset: -1px; border-radius: 24px; background: radial-gradient(600px 220px at 10% 0%, rgba(218,255,71,0.18), transparent 60%), radial-gradient(600px 220px at 90% 100%, rgba(16,185,129,0.18), transparent 60%); opacity: 0.9; pointer-events: none; filter: blur(18px); } .dg-login-page .login-card > * { position: relative; z-index: 2; } .dg-login-page .login-card-top { display: flex; align-items: center; gap: 0.9rem; padding: 0.35rem 0.2rem 1.05rem; } .dg-login-page .login-card-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(218,255,71,0.12); border: 1px solid rgba(218,255,71,0.22); box-shadow: 0 18px 60px rgba(218,255,71,0.14); } .dg-login-page .login-card-icon .material-icons { color: rgba(218,255,71,0.95); } .dg-login-page .login-card-title { color: rgba(255,255,255,0.95); font-family: var(--dg-heading); font-weight: 950; font-size: 1.35rem; line-height: 1.15; } .dg-login-page .login-card-sub { margin-top: 0.2rem; color: rgba(255,255,255,0.62); font-size: 0.92rem; } .dg-login-page .login-form { display: grid; gap: 0.9rem; } .dg-login-page .login-field { display: grid; gap: 0.45rem; } .dg-login-page .login-label { color: rgba(255,255,255,0.70); font-weight: 800; font-size: 0.86rem; } .dg-login-page .login-input { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 0.95rem; border-radius: 14px; background: rgba(17,24,39,0.55); border: 1px solid rgba(255,255,255,0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .dg-login-page .login-input:focus-within { border-color: rgba(218,255,71,0.35); box-shadow: 0 18px 65px rgba(218,255,71,0.10); transform: translateY(-1px); } .dg-login-page .login-input .material-icons { color: rgba(255,255,255,0.52); font-size: 20px; } .dg-login-page .login-input input { width: 100%; background: transparent !important; border: 0 !important; outline: none !important; color: rgba(255,255,255,0.92) !important; font-weight: 700; } .dg-login-page .login-input input::placeholder { color: rgba(255,255,255,0.45); } .dg-login-page .login-eye { background: transparent; border: 0; padding: 0; color: rgba(255,255,255,0.65); cursor: pointer; } .dg-login-page .login-eye:hover { color: rgba(255,255,255,0.9); } .dg-login-page .login-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.15rem; } .dg-login-page .login-link { color: rgba(218,255,71,0.95); font-weight: 800; font-size: 0.9rem; text-decoration: none; } .dg-login-page .login-link:hover { text-decoration: underline; } .dg-login-page .login-btn { margin-top: 0.2rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 14px; font-family: var(--dg-heading); font-weight: 950; color: #000; background: linear-gradient(90deg, rgba(218,255,71,0.95), rgba(16,185,129,0.92)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 22px 70px rgba(218,255,71,0.16); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .dg-login-page .login-btn:hover { transform: translateY(-2px); box-shadow: 0 30px 90px rgba(218,255,71,0.22); filter: saturate(1.04); } .dg-login-page .login-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); margin: 1rem 0; } .dg-login-page .login-btn-ghost { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 14px; font-family: var(--dg-heading); font-weight: 950; color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .dg-login-page .login-btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); border-color: rgba(218,255,71,0.22); } .dg-login-page .dg-alert { border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); padding: 0.85rem 0.95rem; margin: 0 0 0.85rem; } .dg-login-page .dg-alert.error { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); } .dg-login-page .dg-alert.info { border-color: rgba(34,211,238,0.30); background: rgba(34,211,238,0.10); } /* ============================================================ Domini Green - Backoffice Register Page (modern theme) Scoped using .dg-login-page.dg-register-page on . ============================================================ */ .dg-login-page.dg-register-page { background: radial-gradient(900px 420px at 20% 10%, rgba(218,255,71,0.14), transparent 60%), radial-gradient(800px 360px at 80% 0%, rgba(16,185,129,0.14), transparent 55%), linear-gradient(180deg, rgba(10,15,26,1), rgba(5,8,16,1)); min-height: 100vh; } .dg-login-page.dg-register-page .dg-register-card { border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 28px 110px rgba(0,0,0,0.50); backdrop-filter: blur(14px); max-width: 780px; margin-left: auto; width: 100%; overflow: hidden; isolation: isolate; } .dg-login-page.dg-register-page .dg-register-logo { height: 78px; width: auto; max-width: 320px; object-fit: contain; filter: drop-shadow(0 12px 40px rgba(218,255,71,0.12)); } @media (min-width: 992px) { .dg-login-page.dg-register-page .dg-register-logo { height: 92px; } } .dg-login-page.dg-register-page .dg-register-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; position: relative; } .dg-login-page.dg-register-page .dg-register-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; flex: 0 0 auto; max-width: 240px; } .dg-login-page.dg-register-page #google_translate_element { display: flex; justify-content: flex-end; width: 100%; font-size: 12px; opacity: 0.98; } .dg-login-page.dg-register-page #google_translate_element .goog-te-gadget { display: flex !important; align-items: center; justify-content: flex-end; gap: 0.5rem; line-height: 1.1; color: rgba(255,255,255,0.72) !important; font-family: 'Outfit', sans-serif !important; } .dg-login-page.dg-register-page #google_translate_element select { max-width: 170px; width: 100%; padding: 0.38rem 0.6rem; border-radius: 12px; background: rgba(17,24,39,0.60); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); outline: none; } .dg-login-page.dg-register-page #google_translate_element select:focus { border-color: rgba(218,255,71,0.35); box-shadow: 0 14px 48px rgba(218,255,71,0.10); } .dg-login-page.dg-register-page .nev_right ul.nav, .dg-login-page.dg-register-page .nev_right .nav { margin: 0 !important; } .dg-login-page.dg-register-page .nev_right .dropdown-menu { right: 0; left: auto; } @media (max-width: 575px) { .dg-login-page.dg-register-page .dg-register-topbar { flex-direction: column; gap: 0.75rem; } .dg-login-page.dg-register-page .dg-register-actions { align-items: flex-start; max-width: 100%; width: 100%; } .dg-login-page.dg-register-page #google_translate_element { justify-content: flex-start; } } .dg-login-page.dg-register-page .login-hero-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } @media (min-width: 1200px) { .dg-login-page.dg-register-page .login-hero-grid { grid-template-columns: 0.85fr 1.15fr; } } .dg-login-page.dg-register-page .dg-register-art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.14; filter: saturate(1.06) contrast(1.06); pointer-events: none; mix-blend-mode: screen; } .dg-login-page.dg-register-page .dg-register-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 420px at 75% 35%, rgba(218,255,71,0.15), transparent 58%), radial-gradient(700px 420px at 85% 75%, rgba(34,211,238,0.10), transparent 55%), linear-gradient(90deg, rgba(5,8,16,0.92) 0%, rgba(5,8,16,0.55) 40%, rgba(5,8,16,0.92) 100%); } .dg-login-page.dg-register-page .dg-left-kpis { margin-top: 1.15rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 560px; } .dg-login-page.dg-register-page .dg-left-kpi { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem; border-radius: 18px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 70px rgba(0,0,0,0.22); } .dg-login-page.dg-register-page .dg-left-kpi-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(218,255,71,0.12); border: 1px solid rgba(218,255,71,0.20); color: rgba(218,255,71,0.95); box-shadow: 0 16px 60px rgba(218,255,71,0.10); } .dg-login-page.dg-register-page .dg-left-kpi-label { color: rgba(255,255,255,0.62); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .dg-login-page.dg-register-page .dg-left-kpi-value { margin-top: 0.1rem; color: rgba(255,255,255,0.94); font-family: 'Outfit', sans-serif; font-weight: 950; font-size: 0.98rem; line-height: 1.1; } .dg-login-page.dg-register-page .dg-left-steps { margin-top: 1.05rem; display: grid; gap: 0.65rem; max-width: 560px; } .dg-login-page.dg-register-page .dg-left-step { position: relative; display: flex; gap: 0.75rem; padding: 0.85rem 0.95rem; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); } .dg-login-page.dg-register-page .dg-left-step::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(380px 120px at 10% 0%, rgba(34,211,238,0.10), transparent 60%); pointer-events: none; opacity: 0.9; } .dg-login-page.dg-register-page .dg-left-step > * { position: relative; z-index: 1; } .dg-login-page.dg-register-page .dg-left-step-dot { width: 12px; height: 12px; margin-top: 0.25rem; border-radius: 999px; background: rgba(218,255,71,0.95); box-shadow: 0 0 0 6px rgba(218,255,71,0.10), 0 0 34px rgba(218,255,71,0.18); flex: 0 0 auto; } .dg-login-page.dg-register-page .dg-left-step-title { color: rgba(255,255,255,0.94); font-family: 'Outfit', sans-serif; font-weight: 950; font-size: 1.02rem; line-height: 1.15; } .dg-login-page.dg-register-page .dg-left-step-sub { margin-top: 0.15rem; color: rgba(255,255,255,0.68); font-weight: 750; font-size: 0.92rem; } .dg-login-page.dg-register-page .dg-left-trust { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; } .dg-login-page.dg-register-page .dg-left-trust-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 999px; font-weight: 900; font-size: 0.82rem; color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(10px); } .dg-login-page.dg-register-page .dg-left-trust-pill i { color: rgba(34,211,238,0.92); } @media (max-width: 1199px) { .dg-login-page.dg-register-page .dg-left-kpis { grid-template-columns: 1fr; max-width: 420px; } } .dg-login-page.dg-register-page .dg-register-heading { color: rgba(255,255,255,0.95); font-family: 'Outfit', sans-serif; font-weight: 950; font-size: 1.6rem; line-height: 1.15; margin: 0.35rem 0 0; } .dg-login-page.dg-register-page .dg-register-sub { color: rgba(255,255,255,0.64); font-weight: 700; margin: 0.35rem 0 0; font-size: 0.95rem; } .dg-login-page.dg-register-page label, .dg-login-page.dg-register-page .form-label { color: rgba(255,255,255,0.74); font-weight: 800; } .dg-login-page.dg-register-page .requred { color: rgba(239,68,68,0.95); font-weight: 900; } .dg-login-page.dg-register-page .form-group { margin-bottom: 0.95rem; } .dg-login-page.dg-register-page .form-control, .dg-login-page.dg-register-page select.form-control { border-radius: 14px; background: rgba(17,24,39,0.55) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.92) !important; padding: 0.85rem 0.95rem; box-shadow: none !important; } .dg-login-page.dg-register-page .form-control::placeholder { color: rgba(255,255,255,0.45); } .dg-login-page.dg-register-page .form-control:not(textarea), .dg-login-page.dg-register-page select.form-control { /* Keep every field height consistent across inputs & dropdowns */ min-height: 52px; height: 52px; line-height: 1.25; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; } .dg-login-page.dg-register-page select.form-control option { /* Ensure readable options in the dropdown list */ color: #0b1020; } .dg-login-page.dg-register-page .form-control:focus, .dg-login-page.dg-register-page select.form-control:focus { border-color: rgba(218,255,71,0.35) !important; box-shadow: 0 18px 65px rgba(218,255,71,0.10) !important; } .dg-login-page.dg-register-page .dg-register-submit.btn-success { border-radius: 14px; font-family: 'Outfit', sans-serif; font-weight: 950; padding: 0.95rem 1.2rem; color: #000 !important; background: linear-gradient(90deg, rgba(218,255,71,0.95), rgba(16,185,129,0.92)) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 22px 70px rgba(218,255,71,0.16); } .dg-login-page.dg-register-page .dg-register-submit.btn-success:hover { transform: translateY(-2px); box-shadow: 0 30px 90px rgba(218,255,71,0.22); } .dg-login-page.dg-register-page .dg-register-terms { display: flex; align-items: flex-start; gap: 0.6rem; color: rgba(255,255,255,0.76); font-weight: 750; } .dg-login-page.dg-register-page .dg-register-terms a { color: rgba(218,255,71,0.95); font-weight: 900; text-decoration: none; } .dg-login-page.dg-register-page .dg-register-terms a:hover { text-decoration: underline; } .dg-login-page.dg-register-page .dg-register-hint { display: block; margin-top: 0.35rem; font-weight: 800; color: rgba(34,211,238,0.92); } .dg-login-page.dg-register-page #txtHint, .dg-login-page.dg-register-page #usernameHint { display: block; margin-top: 0.4rem; font-weight: 800; } .dg-login-page.dg-register-page #google_translate_element { opacity: 0.98; }