/* ========================================================= * NextOpinion UI — Design System 2.0 * Camada de tema moderna aplicada sobre o Soft UI Dashboard. * Carregar SEMPRE depois de soft-ui-dashboard.css. * Temas: claro (padrão) e escuro via . * ========================================================= */ /* ---------------------------------------------------------- * 1. Design tokens * -------------------------------------------------------- */ :root { --no-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Superfícies (tema claro) */ --no-bg: #f4f6fb; --no-surface: #ffffff; --no-surface-2: #f8fafc; --no-border: #e5e9f2; --no-border-strong: #d6dcea; /* Texto */ --no-text: #101828; --no-text-2: #5b6577; --no-text-3: #98a2b3; /* Acento (indigo → violeta) */ --no-accent: #6366f1; --no-accent-strong: #4f46e5; --no-accent-soft: rgba(99, 102, 241, 0.1); --no-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* Estados */ --no-success: #10b981; --no-success-soft: rgba(16, 185, 129, 0.12); --no-warning: #f59e0b; --no-warning-soft: rgba(245, 158, 11, 0.14); --no-danger: #ef4444; --no-danger-soft: rgba(239, 68, 68, 0.12); --no-info: #0ea5e9; --no-info-soft: rgba(14, 165, 233, 0.12); /* Sidebar (escura nos dois temas) */ --no-side-bg: #0d1220; --no-side-border: rgba(255, 255, 255, 0.07); --no-side-text: #9aa4bd; --no-side-text-hover: #e7eaf3; --no-side-hover: rgba(255, 255, 255, 0.055); --no-side-section: #5d6883; /* Geometria e sombras */ --no-radius: 16px; --no-radius-sm: 10px; --no-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 24px -10px rgba(16, 24, 40, 0.08); --no-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, 0.18); --no-topbar-bg: rgba(244, 246, 251, 0.82); } html[data-theme="dark"] { --no-bg: #0b0f1a; --no-surface: #121828; --no-surface-2: #182036; --no-border: #222c45; --no-border-strong: #2c3854; --no-text: #e8ebf4; --no-text-2: #96a0b8; --no-text-3: #667089; --no-accent: #818cf8; --no-accent-strong: #6366f1; --no-accent-soft: rgba(129, 140, 248, 0.14); --no-side-bg: #0a0e19; --no-side-border: rgba(255, 255, 255, 0.06); --no-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -12px rgba(0, 0, 0, 0.5); --no-shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, 0.6); --no-topbar-bg: rgba(11, 15, 26, 0.8); } /* ---------------------------------------------------------- * 2. Base * -------------------------------------------------------- */ body { font-family: var(--no-font) !important; background-color: var(--no-bg) !important; color: var(--no-text-2); font-size: 0.875rem; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--no-font) !important; color: var(--no-text); letter-spacing: -0.02em; } p, label, .form-label { font-family: var(--no-font); } a { color: var(--no-accent-strong); } a:hover { color: var(--no-accent); } .bg-gray-100 { background-color: var(--no-bg) !important; } .bg-gray-200 { background-color: var(--no-surface-2) !important; } .bg-white { background-color: var(--no-surface) !important; } .text-dark, .text-body { color: var(--no-text) !important; } .text-secondary, .text-muted { color: var(--no-text-2) !important; } .text-xs.text-secondary, .text-sm.text-secondary { color: var(--no-text-2) !important; } hr.horizontal.dark { background-image: none; background-color: var(--no-border); opacity: 1; height: 1px; } /* Barras de rolagem */ * { scrollbar-width: thin; scrollbar-color: var(--no-border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--no-border-strong); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: var(--no-text-3); } /* Anel de foco acessível */ :focus-visible { outline: 2px solid var(--no-accent); outline-offset: 2px; border-radius: 4px; } /* Seleção */ ::selection { background: var(--no-accent-soft); color: var(--no-text); } /* ---------------------------------------------------------- * 3. Sidebar * -------------------------------------------------------- */ .sidenav { background: var(--no-side-bg) !important; border: 0 !important; border-right: 1px solid var(--no-side-border) !important; border-radius: 0 !important; margin: 0 !important; height: 100vh; max-height: 100vh; width: 16.5rem; box-shadow: none !important; display: flex; flex-direction: column; } .sidenav .navbar-collapse { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; } .sidenav .navbar-brand { padding: 1.15rem 1.25rem; } .sidenav .navbar-brand .no-brand-badge { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; background: var(--no-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.7); } .sidenav .navbar-brand .no-brand-name { color: #f2f4fb; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } .sidenav .navbar-brand .no-brand-sub { color: var(--no-side-section); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .sidenav hr.horizontal.dark { background-color: var(--no-side-border); margin: 0 1.25rem; } .sidenav .navbar-collapse.collapse { padding: 0.5rem 0.85rem 1rem; } /* Títulos de seção */ .sidenav .no-section { color: var(--no-side-section) !important; font-size: 0.64rem !important; font-weight: 700 !important; letter-spacing: 0.1em; text-transform: uppercase; padding: 1.1rem 0.75rem 0.35rem !important; margin: 0 !important; opacity: 1 !important; } /* Links */ .sidenav .navbar-nav .nav-link { display: flex; align-items: center; gap: 0.7rem; margin: 1px 0; padding: 0.55rem 0.75rem !important; border-radius: 10px; color: var(--no-side-text) !important; font-size: 0.83rem; font-weight: 500; background: transparent; box-shadow: none !important; transition: background 0.15s ease, color 0.15s ease; } .sidenav .navbar-nav .nav-link:hover { background: var(--no-side-hover); color: var(--no-side-text-hover) !important; } .sidenav .navbar-nav .nav-link.active { background: var(--no-gradient) !important; color: #fff !important; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.65) !important; } .sidenav .navbar-nav .nav-link .no-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; color: inherit; background: none !important; box-shadow: none !important; } .sidenav .navbar-nav .nav-link .no-icon svg { width: 18px; height: 18px; stroke: currentColor; } .sidenav .navbar-nav .nav-link .nav-link-text { margin-left: 0 !important; } /* Cartão do usuário no rodapé da sidebar */ .no-side-user { margin: 0.75rem 0.85rem 0.9rem; padding: 0.65rem 0.75rem; border: 1px solid var(--no-side-border); border-radius: 14px; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; gap: 0.65rem; } .no-side-user .no-avatar { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; background: var(--no-gradient); color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .no-side-user .no-user-name { color: #e7eaf3; font-size: 0.78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; } .no-side-user .no-user-mail { color: var(--no-side-section); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; } .no-side-user .no-logout { margin-left: auto; color: var(--no-side-text); display: flex; padding: 6px; border-radius: 8px; transition: all 0.15s ease; } .no-side-user .no-logout:hover { background: var(--no-danger-soft); color: #f87171; } /* Offset do conteúdo para a nova largura da sidebar */ @media (min-width: 1200px) { .sidenav.fixed-start + .main-content { margin-left: 16.5rem !important; } } /* Sidebar mobile: slide-in + overlay */ @media (max-width: 1199.98px) { .g-sidenav-show:not(.rtl):not(.g-sidenav-pinned) .sidenav { transform: translateX(calc(-100% - 1px)); } .g-sidenav-show.g-sidenav-pinned .sidenav { transform: translateX(0) !important; z-index: 1050 !important; } .g-sidenav-show.g-sidenav-pinned::before { content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1040; } .g-sidenav-show.g-sidenav-pinned .sidenav.fixed-start + .main-content { margin-left: 0 !important; } } /* Botão hamburger e fechar (mobile) */ #iconNavbarSidenav { cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } #iconSidenav { color: var(--no-side-text) !important; z-index: 10; cursor: pointer; } .g-sidenav-show.g-sidenav-pinned #iconSidenav { display: block !important; } /* ---------------------------------------------------------- * 4. Topbar * -------------------------------------------------------- */ .navbar-main { position: sticky; top: 0; z-index: 900; margin: 0 !important; padding: 0.55rem 1rem !important; border-radius: 0 !important; background: var(--no-topbar-bg) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--no-border); box-shadow: none !important; } .navbar-main .breadcrumb { background: transparent; } .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a { color: var(--no-text-3); font-weight: 500; } .navbar-main .breadcrumb-item.active { color: var(--no-text-2); } .breadcrumb-item + .breadcrumb-item::before { color: var(--no-text-3); } .navbar-main h6 { color: var(--no-text); font-weight: 700; } .navbar .sidenav-toggler-inner .sidenav-toggler-line { background: var(--no-text-2); } /* Botões de ação da topbar (tema, usuário) */ .no-topbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 36px; min-width: 36px; padding: 0 0.6rem; border: 1px solid var(--no-border); border-radius: 10px; background: var(--no-surface); color: var(--no-text-2) !important; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .no-topbar-btn:hover { border-color: var(--no-border-strong); color: var(--no-text) !important; background: var(--no-surface-2); } .no-topbar-btn svg { width: 16px; height: 16px; } .no-topbar-avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--no-gradient); color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } html[data-theme="dark"] .no-theme-icon-sun { display: inline-flex; } html[data-theme="dark"] .no-theme-icon-moon { display: none; } html:not([data-theme="dark"]) .no-theme-icon-sun { display: none; } html:not([data-theme="dark"]) .no-theme-icon-moon { display: inline-flex; } /* ---------------------------------------------------------- * 5. Cards * -------------------------------------------------------- */ .card { background-color: var(--no-surface); border: 1px solid var(--no-border) !important; border-radius: var(--no-radius); box-shadow: var(--no-shadow-card); color: var(--no-text-2); } .card .card-header { background-color: transparent !important; border-bottom: 0; border-radius: var(--no-radius) var(--no-radius) 0 0 !important; } .card .card-footer { background-color: transparent !important; border-top: 1px solid var(--no-border); } .card.card-plain { border: 0 !important; background: transparent; box-shadow: none; } /* ---------------------------------------------------------- * 6. Tabelas * -------------------------------------------------------- */ .table { --bs-table-bg: transparent; color: var(--no-text-2); } .table thead th { color: var(--no-text-3) !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--no-border) !important; opacity: 1 !important; padding-top: 0.65rem; padding-bottom: 0.65rem; } .table > :not(caption) > * > * { border-color: var(--no-border); color: var(--no-text-2); background-color: transparent; } .table tbody tr { transition: background 0.12s ease; } .table tbody tr:hover { background: var(--no-surface-2); } .table .text-dark, .table h6 { color: var(--no-text) !important; } .table .text-xs, .table .text-sm { color: var(--no-text-2); } /* ---------------------------------------------------------- * 7. Botões * -------------------------------------------------------- */ .btn { font-family: var(--no-font); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--no-radius-sm); box-shadow: none; transition: all 0.15s ease; } .btn:hover { transform: none; box-shadow: 0 6px 16px -8px rgba(16, 24, 40, 0.3); } .btn:active { transform: scale(0.98); } .btn.bg-gradient-primary, .btn.bg-gradient-info, .btn-primary, .btn-info { background: var(--no-gradient) !important; border: 0; color: #fff !important; } .btn.bg-gradient-primary:hover, .btn.bg-gradient-info:hover, .btn-primary:hover, .btn-info:hover { box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.7); } .btn.bg-gradient-success, .btn-success { background: linear-gradient(135deg, #10b981, #059669) !important; border: 0; color: #fff !important; } .btn.bg-gradient-danger, .btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; border: 0; color: #fff !important; } .btn.bg-gradient-warning, .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border: 0; color: #fff !important; } .btn.bg-gradient-dark, .btn-dark { background: #1e293b !important; border: 0; color: #fff !important; } html[data-theme="dark"] .btn.bg-gradient-dark, html[data-theme="dark"] .btn-dark { background: #334155 !important; } .btn.bg-gradient-secondary, .btn-secondary { background: var(--no-surface-2) !important; border: 1px solid var(--no-border) !important; color: var(--no-text-2) !important; } .btn-outline-primary, .btn-outline-info { border-color: var(--no-accent) !important; color: var(--no-accent-strong) !important; background: transparent !important; } .btn-outline-primary:hover, .btn-outline-info:hover { background: var(--no-accent-soft) !important; color: var(--no-accent-strong) !important; } .btn-white, .btn-light { background: var(--no-surface) !important; border: 1px solid var(--no-border) !important; color: var(--no-text) !important; } .btn-link { color: var(--no-accent-strong) !important; box-shadow: none !important; } /* ---------------------------------------------------------- * 8. Formulários * -------------------------------------------------------- */ .form-control, .form-select { background-color: var(--no-surface) !important; border: 1px solid var(--no-border-strong); border-radius: var(--no-radius-sm); color: var(--no-text) !important; font-size: 0.85rem; padding: 0.55rem 0.8rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control::placeholder { color: var(--no-text-3); } .form-control:focus, .form-select:focus { border-color: var(--no-accent) !important; box-shadow: 0 0 0 3px var(--no-accent-soft) !important; background-color: var(--no-surface) !important; } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a2b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 14px; } .input-group .input-group-text { background: var(--no-surface-2); border: 1px solid var(--no-border-strong); color: var(--no-text-3); border-radius: var(--no-radius-sm); } .input-group .form-control { border-radius: var(--no-radius-sm); } label, .form-label { color: var(--no-text); font-size: 0.78rem; font-weight: 600; } .form-check-input { border-color: var(--no-border-strong); background-color: var(--no-surface); } .form-check-input:checked { background-color: var(--no-accent-strong); border-color: var(--no-accent-strong); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--no-accent-soft); } .form-switch .form-check-input:checked { background-color: var(--no-accent-strong) !important; border-color: var(--no-accent-strong) !important; } /* ---------------------------------------------------------- * 9. Badges, alertas, paginação, dropdowns, modais * -------------------------------------------------------- */ .badge { font-family: var(--no-font); font-weight: 600; letter-spacing: 0.02em; text-transform: none; border-radius: 999px; padding: 0.35em 0.75em; } .badge.bg-gradient-success, .badge.bg-success { background: var(--no-success-soft) !important; color: #059669 !important; } .badge.bg-gradient-danger, .badge.bg-danger { background: var(--no-danger-soft) !important; color: #dc2626 !important; } .badge.bg-gradient-warning, .badge.bg-warning { background: var(--no-warning-soft) !important; color: #b45309 !important; } .badge.bg-gradient-info, .badge.bg-info { background: var(--no-info-soft) !important; color: #0284c7 !important; } .badge.bg-gradient-primary, .badge.bg-primary { background: var(--no-accent-soft) !important; color: var(--no-accent-strong) !important; } .badge.bg-gradient-secondary, .badge.bg-secondary { background: var(--no-surface-2) !important; color: var(--no-text-2) !important; border: 1px solid var(--no-border); } html[data-theme="dark"] .badge.bg-gradient-success, html[data-theme="dark"] .badge.bg-success { color: #34d399 !important; } html[data-theme="dark"] .badge.bg-gradient-danger, html[data-theme="dark"] .badge.bg-danger { color: #f87171 !important; } html[data-theme="dark"] .badge.bg-gradient-warning, html[data-theme="dark"] .badge.bg-warning { color: #fbbf24 !important; } html[data-theme="dark"] .badge.bg-gradient-info, html[data-theme="dark"] .badge.bg-info { color: #38bdf8 !important; } .alert { border-radius: var(--no-radius-sm); font-weight: 500; border: 0; } .pagination .page-link { background: var(--no-surface); border-color: var(--no-border); color: var(--no-text-2); border-radius: 8px; margin: 0 2px; } .pagination .page-item.active .page-link { background: var(--no-gradient); border-color: transparent; color: #fff; } .dropdown-menu { background: var(--no-surface); border: 1px solid var(--no-border); border-radius: 12px; box-shadow: var(--no-shadow-pop); padding: 0.4rem; } .dropdown-item { color: var(--no-text-2); border-radius: 8px; font-size: 0.82rem; font-weight: 500; padding: 0.5rem 0.75rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--no-surface-2); color: var(--no-text); } .dropdown-divider { border-color: var(--no-border); opacity: 1; } .modal-content { background: var(--no-surface); border: 1px solid var(--no-border); border-radius: var(--no-radius); box-shadow: var(--no-shadow-pop); color: var(--no-text-2); } .modal-header { border-bottom: 1px solid var(--no-border); } .modal-footer { border-top: 1px solid var(--no-border); } .modal-title { color: var(--no-text); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Nav pills/tabs */ .nav-pills .nav-link { color: var(--no-text-2); border-radius: var(--no-radius-sm); } .nav-pills .nav-link.active { background: var(--no-gradient); color: #fff; } .nav-pills { background: var(--no-surface-2) !important; border-radius: var(--no-radius-sm); } /* Avatares */ .avatar { border-radius: 10px; } /* Progresso */ .progress { background-color: var(--no-surface-2); border-radius: 999px; overflow: hidden; } .progress .progress-bar { background: var(--no-gradient); border-radius: 999px; } /* Tooltips */ .tooltip-inner { background: #1e293b; border-radius: 8px; font-family: var(--no-font); } /* ---------------------------------------------------------- * 10. Footer * -------------------------------------------------------- */ .footer .copyright, .footer .text-muted { color: var(--no-text-3) !important; font-size: 0.78rem; } .footer a { color: var(--no-text-2); font-weight: 600; } .footer a:hover { color: var(--no-accent-strong); } /* ---------------------------------------------------------- * 11. Compatibilidade com utilitários legados do Soft UI * -------------------------------------------------------- */ .text-gradient.text-primary, .text-gradient.text-info { background-image: var(--no-gradient); -webkit-background-clip: text; background-clip: text; } .text-gradient.text-success { background-image: linear-gradient(135deg, #10b981, #059669); } .text-gradient.text-danger { background-image: linear-gradient(135deg, #f43f5e, #e11d48); } .icon-shape.bg-gradient-primary, .icon-shape.bg-gradient-info { background: var(--no-gradient) !important; } .bg-gradient-primary, .bg-gradient-info { background-image: var(--no-gradient) !important; } .bg-gradient-dark { background-image: linear-gradient(135deg, #1e293b, #0f172a) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--no-border) !important; } html[data-theme="dark"] .bg-light { background-color: var(--no-surface-2) !important; } html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > * { background-color: var(--no-surface-2) !important; color: var(--no-text-2); } .shadow, .shadow-sm, .shadow-lg { box-shadow: var(--no-shadow-card) !important; } .blur { background: var(--no-topbar-bg) !important; } /* Textos escuros do tema antigo em modo escuro */ html[data-theme="dark"] .text-gradient.text-dark { background-image: linear-gradient(135deg, #e8ebf4, #96a0b8); } html[data-theme="dark"] .opacity-6.text-dark, html[data-theme="dark"] svg .color-background { fill: #e8ebf4; } /* ---------------------------------------------------------- * 12. SweetAlert2 com tema * -------------------------------------------------------- */ .swal2-popup { background: var(--no-surface) !important; color: var(--no-text-2) !important; border-radius: var(--no-radius) !important; font-family: var(--no-font) !important; } .swal2-title { color: var(--no-text) !important; } .swal2-html-container { color: var(--no-text-2) !important; } .swal2-confirm { background: var(--no-gradient) !important; border-radius: var(--no-radius-sm) !important; box-shadow: none !important; } .swal2-cancel { border-radius: var(--no-radius-sm) !important; } /* ---------------------------------------------------------- * 13. Toast de sessão * -------------------------------------------------------- */ .no-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; display: flex; align-items: center; gap: 0.6rem; background: var(--no-surface); border: 1px solid var(--no-border); border-left: 3px solid var(--no-success); border-radius: 12px; box-shadow: var(--no-shadow-pop); color: var(--no-text); font-size: 0.83rem; font-weight: 500; padding: 0.75rem 1rem; animation: no-toast-in 0.25s ease; } .no-toast.no-toast-hide { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; } @keyframes no-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------- * 14. Login * -------------------------------------------------------- */ .no-auth-wrap { min-height: 100vh; display: flex; background: var(--no-bg); } .no-auth-panel { flex: 1 1 46%; position: relative; display: none; overflow: hidden; background: #0d1220; color: #fff; } @media (min-width: 992px) { .no-auth-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; } } .no-auth-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(99, 102, 241, 0.35), transparent 60%), radial-gradient(ellipse 60% 50% at 20% 90%, rgba(139, 92, 246, 0.28), transparent 60%); } .no-auth-panel::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 30%, transparent 75%); } .no-auth-panel > * { position: relative; z-index: 1; } .no-auth-quote { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; max-width: 30rem; color: #fff; } .no-auth-quote-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; margin-top: 0.9rem; max-width: 26rem; } .no-auth-form-side { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .no-auth-card { width: 100%; max-width: 25rem; }