* {
box-sizing: border-box;
}
html {
direction: rtl;
}
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-main);
background:
radial-gradient(circle at top right, rgba(196,153,91,.26), transparent 32%),
radial-gradient(circle at bottom left, rgba(255,255,255,.08), transparent 30%),
linear-gradient(135deg, #111111, #1b1714);
color: #fff;
}
.auth-page {
min-height: 100vh;
padding: 18px;
display: grid;
place-items: center;
}
.auth-card {
width: 100%;
max-width: 460px;
padding: 28px;
border-radius: 30px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(20px);
box-shadow: 0 28px 90px rgba(0,0,0,.42);
}
.auth-brand {
display: grid;
gap: 8px;
justify-items: center;
margin-bottom: 28px;
}
.auth-brand span {
font-size: 34px;
font-weight: 900;
letter-spacing: .5px;
}
.auth-brand small {
color: rgba(255,255,255,.58);
font-size: 14px;
}
.auth-heading {
margin-bottom: 24px;
text-align: center;
}
.auth-heading h1 {
margin: 0;
font-size: 28px;
line-height: 1.5;
}
.auth-heading p {
margin: 8px 0 0;
color: rgba(255,255,255,.58);
line-height: 2;
font-size: 14px;
}
.auth-error {
margin-bottom: 18px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(220,70,70,.14);
border: 1px solid rgba(220,70,70,.28);
color: #ffd5d5;
line-height: 1.8;
font-size: 14px;
}
.auth-form {
display: grid;
gap: 16px;
}
.auth-field label {
display: block;
margin-bottom: 9px;
color: rgba(255,255,255,.72);
font-size: 14px;
font-weight: 800;
}
.auth-field input {
width: 100%;
min-height: 54px;
padding: 0 16px;
border-radius: 17px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.075);
color: #fff;
font-family: var(--font-main);
font-size: 15px;
outline: none;
}
.auth-field input::placeholder {
color: rgba(255,255,255,.38);
}
.auth-field input:focus {
border-color: rgba(196,153,91,.55);
box-shadow: 0 0 0 4px rgba(196,153,91,.12);
}
.auth-submit {
min-height: 54px;
margin-top: 6px;
border: 0;
border-radius: 18px;
background: rgba(196,153,91,.9);
color: #111;
font-family: var(--font-main);
font-size: 15px;
font-weight: 900;
cursor: pointer;
box-shadow: 0 18px 46px rgba(196,153,91,.2);
}
.auth-note {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.1);
text-align: center;
color: rgba(255,255,255,.46);
font-size: 13px;
line-height: 1.9;
}
/* Light mode support if browser keeps body class later */
body.light-mode {
background:
radial-gradient(circle at top right, rgba(196,153,91,.17), transparent 34%),
radial-gradient(circle at bottom left, rgba(120,82,45,.08), transparent 32%),
linear-gradient(135deg, #eee4d6, #f8f3ea);
color: #2a2118;
}
body.light-mode .auth-card {
background: rgba(255, 250, 241, .66);
border-color: rgba(92,66,38,.12);
color: #2a2118;
box-shadow: 0 26px 80px rgba(83,58,30,.13);
}
body.light-mode .auth-brand small,
body.light-mode .auth-heading p,
body.light-mode .auth-note {
color: rgba(42,33,24,.54);
}
body.light-mode .auth-field label {
color: rgba(42,33,24,.66);
}
body.light-mode .auth-field input {
background: rgba(255,253,248,.72);
border-color: rgba(92,66,38,.13);
color: #2a2118;
}
body.light-mode .auth-field input::placeholder {
color: rgba(42,33,24,.34);
}
body.light-mode .auth-submit {
background: rgba(196,153,91,.72);
color: #24180d;
}
@media (max-width: 480px) {
.auth-page {
padding: 12px;
}
.auth-card {
padding: 22px;
border-radius: 26px;
}
.auth-brand span {
font-size: 30px;
}
.auth-heading h1 {
font-size: 24px;
}
}
.auth-theme-row {
display: flex;
justify-content: center;
margin: -8px 0 20px;
}
.auth-brand em {
font-style: normal;
}
/* ماتوس V3 Core Polish: responsive glass UI, upload buttons, selects, scroll top */
:root{--matus-radius:28px;--matus-gold:#c4995b;--matus-gold-soft:#edcf9c;--matus-glass-border:rgba(255,255,255,.12)}
select,input[type="file"]{font-family:var(--font-main,Vazirmatn,Tahoma,Arial,sans-serif)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:left 18px center,left 12px center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-left:38px!important;cursor:pointer}
input[type="file"]{position:relative;padding:13px!important;border-radius:18px!important;border:1px dashed rgba(196,153,91,.28)!important;background:radial-gradient(circle at top right,rgba(196,153,91,.16),transparent 44%),rgba(255,255,255,.07)!important;color:rgba(255,255,255,.76)!important;cursor:pointer}
body.light-mode input[type="file"],html[data-theme="light"] input[type="file"]{color:rgba(31,26,21,.72)!important;background:radial-gradient(circle at top right,rgba(196,153,91,.14),transparent 44%),rgba(255,255,255,.76)!important;border-color:rgba(90,68,43,.16)!important}
.matus-scrolltop{position:fixed;left:18px;bottom:18px;width:52px;height:52px;border-radius:22px;z-index:999;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at top right,rgba(196,153,91,.26),transparent 44%),rgba(20,18,16,.58);color:#fff;box-shadow:0 18px 46px rgba(0,0,0,.24);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transform:translateY(12px);transition:.22s ease;cursor:pointer}.matus-scrolltop.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.matus-scrolltop svg{width:22px;height:22px}.matus-scrolltop:hover{transform:translateY(-3px)}
@media(max-width:860px){.matus-scrolltop{left:14px;bottom:92px;width:48px;height:48px;border-radius:20px}}
.settings-shell{overflow:visible!important;max-width:100%!important}.settings-sections{display:block!important}.settings-accordion:not([open]){display:none!important}.settings-accordion[open]{display:block!important;min-width:0!important}.settings-fields-grid{min-width:0}.settings-field,.settings-field input,.settings-field textarea,.settings-field select{min-width:0!important;max-width:100%!important}.settings-mobile-tabs{max-width:100%;overflow-x:auto!important}
.matus-panel,.role-card,.matus-list-card,.staff-stock-card,.customer-admin-card{padding:16px;border-radius:24px;background:radial-gradient(circle at top right,rgba(196,153,91,.10),transparent 42%),rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 45px rgba(0,0,0,.12)}.matus-admin-grid,.roles-layout,.customer-admin-grid,.staff-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.matus-list-card{display:grid;gap:7px;margin-bottom:10px}.matus-list-card p,.role-card p{color:var(--muted-text,rgba(255,255,255,.58));line-height:1.9}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.permission-grid label{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);font-size:12px}.mini-badge,.vip-badge-mini{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(196,153,91,.18);border:1px solid rgba(196,153,91,.25);font-size:11px;font-weight:900}.vip-badge-logo{width:16px;height:16px}.matus-error-page{min-height:100vh;display:grid;place-items:center;padding:24px}.matus-error-card{width:min(560px,100%);padding:34px;border-radius:34px;text-align:center;background:radial-gradient(circle at top right,rgba(196,153,91,.18),transparent 42%),rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(22px);box-shadow:0 30px 80px rgba(0,0,0,.24)}.matus-error-card .error-logo{width:88px;height:88px}.matus-error-card span{display:block;color:var(--matus-gold-soft);font-size:42px;font-weight:950}.matus-error-card code{display:block;direction:ltr;margin:16px auto;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.18);color:#edcf9c}.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
@media(max-width:760px){.matus-admin-grid,.roles-layout,.customer-admin-grid,.staff-stock-grid,.permission-grid{grid-template-columns:1fr}.settings-mobile-tabs button{min-width:122px!important}.main-card{overflow:hidden}}
body.light-mode .matus-panel,body.light-mode .role-card,body.light-mode .matus-list-card,body.light-mode .staff-stock-card,body.light-mode .customer-admin-card,html[data-theme="light"] .matus-panel,html[data-theme="light"] .role-card,html[data-theme="light"] .matus-list-card,html[data-theme="light"] .staff-stock-card,html[data-theme="light"] .customer-admin-card{background:rgba(255,255,255,.72);border-color:rgba(90,68,43,.12);box-shadow:0 18px 45px rgba(80,60,35,.10);color:#1f1a15}body.light-mode .matus-scrolltop,html[data-theme="light"] .matus-scrolltop{background:radial-gradient(circle at top right,rgba(196,153,91,.18),transparent 44%),rgba(255,255,255,.72);color:#1f1a15;border-color:rgba(90,68,43,.14)}
/* HOTFIX: keep inline SVG logos inside auth cards under control */
.auth-brand .auth-brand-logo,
.auth-brand svg.auth-brand-logo {
width: 92px !important;
height: 92px !important;
max-width: 92px !important;
max-height: 92px !important;
display: block !important;
margin: 0 auto 12px !important;
color: currentColor !important;
flex: 0 0 auto !important;
}
.auth-brand .auth-brand-logo * {
vector-effect: non-scaling-stroke;
}
@media (max-width: 480px) {
.auth-brand .auth-brand-logo,
.auth-brand svg.auth-brand-logo {
width: 78px !important;
height: 78px !important;
max-width: 78px !important;
max-height: 78px !important;
}
}
/* --------------------------------------------------
MATUS Recovery v3.5 - clean auth pages
-------------------------------------------------- */
body { padding-bottom: 0; }
.auth-page { min-height: calc(100vh - 104px); padding: 10px 14px 28px; place-items:start center; }
.auth-card { margin-top: 8px; }
.auth-brand-compact { margin-bottom: 22px; }
.auth-brand-compact span { font-size:28px; letter-spacing:0; }
.auth-brand-compact small { line-height:1.8; }
.auth-footer-link { margin-top:18px; display:flex; align-items:center; justify-content:center; gap:9px; color:rgba(255,255,255,.44); font-size:13px; font-weight:850; }
.auth-footer-link a { color:#edcf9c; text-decoration:none; }
.auth-field { display:grid; gap:8px; }
.auth-field label { margin:0!important; text-align:right; }
@media(max-width:520px){.auth-page{padding:6px 10px 24px}.auth-card{border-radius:28px;padding:20px}.auth-brand-compact span{font-size:24px}}
/* --------------------------------------------------
MATUS v3.6 Design System Recovery
Cafe glass tokens + scroll/layout fixes
-------------------------------------------------- */
:root {
--matus-coffee-950: #0e0a07;
--matus-coffee-900: #15100c;
--matus-coffee-800: #21170f;
--matus-coffee-700: #352314;
--matus-latte-50: #fff8ed;
--matus-latte-100: #f7ead7;
--matus-latte-200: #ead3af;
--matus-gold: #c4995b;
--matus-gold-soft: #edcf9c;
--matus-caramel: #a86f38;
--matus-text: rgba(255, 250, 241, .94);
--matus-muted: rgba(255, 240, 218, .62);
--matus-glass: rgba(255, 255, 255, .075);
--matus-glass-strong: rgba(255, 255, 255, .105);
--matus-border: rgba(255, 255, 255, .12);
--matus-shadow: 0 26px 75px rgba(0, 0, 0, .34);
--matus-radius-xl: 34px;
--matus-radius-lg: 26px;
--matus-radius-md: 18px;
--matus-blur: 24px;
}
html, body {
min-height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
scroll-behavior: smooth;
}
body {
background:
radial-gradient(circle at 84% 7%, rgba(196, 153, 91, .24), transparent 30%),
radial-gradient(circle at 14% 14%, rgba(122, 77, 39, .18), transparent 34%),
linear-gradient(135deg, var(--matus-coffee-950), var(--matus-coffee-800) 55%, #100d0a) !important;
}
body.light-mode,
html[data-theme="light"] body {
background:
radial-gradient(circle at 84% 7%, rgba(196, 153, 91, .18), transparent 30%),
radial-gradient(circle at 14% 16%, rgba(168, 111, 56, .12), transparent 35%),
linear-gradient(135deg, #f3e5d2, #fff9ef 54%, #f6ead8) !important;
}
.admin-layout,
.customer-shell,
.public-layout {
overflow: visible !important;
}
.content,
.customer-main,
.public-layout main {
min-width: 0;
overflow: visible !important;
}
.main-card,
.glass-panel,
.customer-card,
.matus-panel,
.public-menu-section,
.public-hero,
.matus-page-card {
background:
radial-gradient(circle at 88% 9%, rgba(196, 153, 91, .16), transparent 38%),
radial-gradient(circle at 8% 110%, rgba(255, 255, 255, .07), transparent 42%),
var(--matus-glass) !important;
border: 1px solid var(--matus-border) !important;
box-shadow: var(--matus-shadow) !important;
backdrop-filter: blur(var(--matus-blur)) saturate(1.15) !important;
-webkit-backdrop-filter: blur(var(--matus-blur)) saturate(1.15) !important;
}
.main-card {
min-height: auto !important;
}
@media (min-width: 1024px) {
.admin-layout {
align-items: flex-start !important;
min-height: 100vh;
}
.sidebar {
position: sticky !important;
top: 16px !important;
height: calc(100vh - 32px) !important;
overflow: visible !important;
}
.sidebar-inner {
max-height: calc(100vh - 32px) !important;
overflow-y: auto !important;
}
.content {
padding-bottom: 24px !important;
}
.settings-shell {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Public header harmony */
.public-topbar,
.auth-topbar,
.customer-header {
border-radius: 26px !important;
background:
radial-gradient(circle at 84% 16%, rgba(196, 153, 91, .17), transparent 36%),
rgba(18, 13, 9, .56) !important;
border: 1px solid rgba(255,255,255,.13) !important;
box-shadow: 0 18px 55px rgba(0,0,0,.22) !important;
backdrop-filter: blur(24px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}
.public-nav a,
.public-login,
.btn-primary,
.btn-secondary,
.top-icon,
.theme-toggle,
button,
input,
select,
textarea {
transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.public-nav a:hover,
.public-login:hover,
.btn-primary:hover,
.btn-secondary:hover,
.top-icon:hover,
.theme-toggle:hover {
transform: translateY(-2px);
}
/* Coffee ambience */
.public-site::before,
.customer-page::before,
.admin-layout::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 12% 32%, rgba(237,207,156,.08), transparent 18%),
radial-gradient(circle at 88% 68%, rgba(168,111,56,.09), transparent 22%);
animation: matusSteamDrift 12s ease-in-out infinite alternate;
}
@keyframes matusSteamDrift {
from { transform: translate3d(0,0,0) scale(1); opacity: .72; }
to { transform: translate3d(0,-12px,0) scale(1.03); opacity: 1; }
}
@keyframes matusFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.main-card,
.public-product-card,
.matus-special-card,
.customer-card,
.matus-panel,
.settings-home-card,
.matus-qr-card {
animation: matusFadeUp .42s ease both;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* Settings dashboard cards */
.settings-home-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.settings-home-card {
min-height: 170px;
padding: 18px;
border-radius: 28px;
display: grid;
align-content: space-between;
gap: 14px;
text-decoration: none;
color: inherit;
background:
radial-gradient(circle at top right, rgba(196,153,91,.18), transparent 44%),
rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 18px 54px rgba(0,0,0,.18);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
.settings-home-card:hover {
transform: translateY(-4px);
border-color: rgba(196,153,91,.30);
background:
radial-gradient(circle at top right, rgba(196,153,91,.24), transparent 44%),
rgba(255,255,255,.095);
}
.settings-home-card span {
width: 42px;
height: 42px;
border-radius: 17px;
display: grid;
place-items: center;
color: var(--matus-gold-soft);
background: rgba(196,153,91,.13);
border: 1px solid rgba(196,153,91,.20);
}
.settings-home-card h3 {
margin: 0;
font-size: 18px;
font-weight: 950;
line-height: 1.6;
}
.settings-home-card p {
margin: 0;
color: var(--matus-muted);
font-size: 12px;
font-weight: 800;
line-height: 1.9;
}
.settings-section-toolbar {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 16px 0;
}
.settings-single-panel {
margin-top: 14px;
padding: 20px;
border-radius: 30px;
background: rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.10);
}
/* QR */
.matus-v36-hero-card,
.matus-pwa-panel {
padding: 22px;
border-radius: 30px;
background:
radial-gradient(circle at top right, rgba(196,153,91,.16), transparent 42%),
rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.10);
margin: 16px 0;
}
.matus-v36-hero-card span { color: var(--matus-gold-soft); font-weight: 950; font-size: 12px; letter-spacing: .5px; }
.matus-v36-hero-card h1 { margin: 8px 0; font-size: clamp(26px,5vw,42px); }
.matus-v36-hero-card p,.matus-pwa-panel p { color: var(--matus-muted); line-height: 2; }
.matus-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.matus-qr-card { padding: 18px; border-radius: 30px; display: grid; grid-template-columns: 190px 1fr; gap: 18px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.10); }
.matus-qr-box { padding: 12px; border-radius: 24px; background: #fff8ed; display: grid; place-items: center; }
.matus-qr-box img { width: 100%; height: auto; display: block; }
.matus-qr-info h3 { margin: 0 0 8px; }
.matus-qr-info p { color: var(--matus-muted); line-height: 1.9; }
.matus-qr-info code { display: block; direction: ltr; text-align: left; color: var(--matus-gold-soft); word-break: break-all; margin: 10px 0; }
/* Menu polish */
.public-menu-section {
position: relative;
overflow: hidden;
}
.public-menu-section::before {
content: "";
position: absolute;
inset: 18px auto auto 18px;
width: 150px;
height: 150px;
border-radius: 999px;
background: radial-gradient(circle, rgba(237,207,156,.16), transparent 65%);
pointer-events: none;
}
.public-product-card {
border-radius: 28px !important;
background:
radial-gradient(circle at 92% 8%, rgba(196,153,91,.13), transparent 42%),
rgba(255,255,255,.068) !important;
}
.public-product-card:hover,
.matus-special-card:hover {
transform: translateY(-5px);
border-color: rgba(196,153,91,.28) !important;
}
.matus-special-badge,
.public-card-special-badge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
color: #2b1a0d;
background: linear-gradient(135deg, #edcf9c, #c4995b);
font-size: 11px;
font-weight: 950;
box-shadow: 0 10px 24px rgba(196,153,91,.20);
}
.matus-favorite-welcome {
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background:
radial-gradient(circle at 90% 12%, rgba(237,207,156,.19), transparent 45%),
rgba(255,255,255,.075);
border: 1px solid rgba(237,207,156,.17);
}
.matus-favorite-welcome b { display:block; font-size: 15px; line-height: 1.7; }
.matus-favorite-welcome span { display:block; color: var(--matus-muted); font-size: 12px; line-height: 1.9; }
/* Forms and uploads */
input, select, textarea,
.form-group input, .form-group select, .form-group textarea,
.settings-field input, .settings-field select, .settings-field textarea {
border-radius: 18px !important;
background: rgba(255,255,255,.075) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
input:focus, select:focus, textarea:focus {
border-color: rgba(196,153,91,.38) !important;
box-shadow: 0 0 0 4px rgba(196,153,91,.10) !important;
}
input[type="file"] {
cursor: pointer;
padding: 13px !important;
}
input[type="file"]::file-selector-button {
border: 0;
border-radius: 14px;
padding: 10px 14px;
margin-left: 12px;
color: #20150c;
background: linear-gradient(135deg, #edcf9c, #c4995b);
font-weight: 900;
cursor: pointer;
}
/* Customer/admin avatar */
.customer-avatar, .profile-avatar, .admin-avatar, .user-avatar {
border-radius: 999px !important;
overflow: hidden !important;
border: 1px solid rgba(237,207,156,.28) !important;
box-shadow: 0 16px 44px rgba(0,0,0,.22), 0 0 0 6px rgba(196,153,91,.07) !important;
}
@media (max-width: 980px) {
.settings-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.matus-qr-grid { grid-template-columns: 1fr; }
.matus-qr-card { grid-template-columns: 160px 1fr; }
}
@media (max-width: 640px) {
.settings-home-grid { grid-template-columns: 1fr; }
.settings-home-card { min-height: 138px; }
.matus-qr-card { grid-template-columns: 1fr; }
.matus-qr-box { width: min(240px, 100%); margin: 0 auto; }
.public-topbar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 8px !important; }
.public-nav { overflow-x: auto !important; scrollbar-width: none; }
.public-nav::-webkit-scrollbar { display: none; }
}
/* --------------------------------------------------
MATUS v3.6 Design System Recovery
Cafe glass tokens + scroll/layout fixes
-------------------------------------------------- */
:root {
--matus-coffee-950: #0e0a07;
--matus-coffee-900: #15100c;
--matus-coffee-800: #21170f;
--matus-coffee-700: #352314;
--matus-latte-50: #fff8ed;
--matus-latte-100: #f7ead7;
--matus-latte-200: #ead3af;
--matus-gold: #c4995b;
--matus-gold-soft: #edcf9c;
--matus-caramel: #a86f38;
--matus-text: rgba(255, 250, 241, .94);
--matus-muted: rgba(255, 240, 218, .62);
--matus-glass: rgba(255, 255, 255, .075);
--matus-glass-strong: rgba(255, 255, 255, .105);
--matus-border: rgba(255, 255, 255, .12);
--matus-shadow: 0 26px 75px rgba(0, 0, 0, .34);
--matus-radius-xl: 34px;
--matus-radius-lg: 26px;
--matus-radius-md: 18px;
--matus-blur: 24px;
}
html, body {
min-height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
scroll-behavior: smooth;
}
body {
background:
radial-gradient(circle at 84% 7%, rgba(196, 153, 91, .24), transparent 30%),
radial-gradient(circle at 14% 14%, rgba(122, 77, 39, .18), transparent 34%),
linear-gradient(135deg, var(--matus-coffee-950), var(--matus-coffee-800) 55%, #100d0a) !important;
}
body.light-mode,
html[data-theme="light"] body {
background:
radial-gradient(circle at 84% 7%, rgba(196, 153, 91, .18), transparent 30%),
radial-gradient(circle at 14% 16%, rgba(168, 111, 56, .12), transparent 35%),
linear-gradient(135deg, #f3e5d2, #fff9ef 54%, #f6ead8) !important;
}
.admin-layout,
.customer-shell,
.public-layout {
overflow: visible !important;
}
.content,
.customer-main,
.public-layout main {
min-width: 0;
overflow: visible !important;
}
.main-card,
.glass-panel,
.customer-card,
.matus-panel,
.public-menu-section,
.public-hero,
.matus-page-card {
background:
radial-gradient(circle at 88% 9%, rgba(196, 153, 91, .16), transparent 38%),
radial-gradient(circle at 8% 110%, rgba(255, 255, 255, .07), transparent 42%),
var(--matus-glass) !important;
border: 1px solid var(--matus-border) !important;
box-shadow: var(--matus-shadow) !important;
backdrop-filter: blur(var(--matus-blur)) saturate(1.15) !important;
-webkit-backdrop-filter: blur(var(--matus-blur)) saturate(1.15) !important;
}
.main-card {
min-height: auto !important;
}
@media (min-width: 1024px) {
.admin-layout {
align-items: flex-start !important;
min-height: 100vh;
}
.sidebar {
position: sticky !important;
top: 16px !important;
height: calc(100vh - 32px) !important;
overflow: visible !important;
}
.sidebar-inner {
max-height: calc(100vh - 32px) !important;
overflow-y: auto !important;
}
.content {
padding-bottom: 24px !important;
}
.settings-shell {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Public header harmony */
.public-topbar,
.auth-topbar,
.customer-header {
border-radius: 26px !important;
background:
radial-gradient(circle at 84% 16%, rgba(196, 153, 91, .17), transparent 36%),
rgba(18, 13, 9, .56) !important;
border: 1px solid rgba(255,255,255,.13) !important;
box-shadow: 0 18px 55px rgba(0,0,0,.22) !important;
backdrop-filter: blur(24px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}
.public-nav a,
.public-login,
.btn-primary,
.btn-secondary,
.top-icon,
.theme-toggle,
button,
input,
select,
textarea {
transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.public-nav a:hover,
.public-login:hover,
.btn-primary:hover,
.btn-secondary:hover,
.top-icon:hover,
.theme-toggle:hover {
transform: translateY(-2px);
}
/* Coffee ambience */
.public-site::before,
.customer-page::before,
.admin-layout::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 12% 32%, rgba(237,207,156,.08), transparent 18%),
radial-gradient(circle at 88% 68%, rgba(168,111,56,.09), transparent 22%);
animation: matusSteamDrift 12s ease-in-out infinite alternate;
}
@keyframes matusSteamDrift {
from { transform: translate3d(0,0,0) scale(1); opacity: .72; }
to { transform: translate3d(0,-12px,0) scale(1.03); opacity: 1; }
}
@keyframes matusFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.main-card,
.public-product-card,
.matus-special-card,
.customer-card,
.matus-panel,
.settings-home-card,
.matus-qr-card {
animation: matusFadeUp .42s ease both;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* Settings dashboard cards */
.settings-home-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.settings-home-card {
min-height: 170px;
padding: 18px;
border-radius: 28px;
display: grid;
align-content: space-between;
gap: 14px;
text-decoration: none;
color: inherit;
background:
radial-gradient(circle at top right, rgba(196,153,91,.18), transparent 44%),
rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 18px 54px rgba(0,0,0,.18);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
.settings-home-card:hover {
transform: translateY(-4px);
border-color: rgba(196,153,91,.30);
background:
radial-gradient(circle at top right, rgba(196,153,91,.24), transparent 44%),
rgba(255,255,255,.095);
}
.settings-home-card span {
width: 42px;
height: 42px;
border-radius: 17px;
display: grid;
place-items: center;
color: var(--matus-gold-soft);
background: rgba(196,153,91,.13);
border: 1px solid rgba(196,153,91,.20);
}
.settings-home-card h3 {
margin: 0;
font-size: 18px;
font-weight: 950;
line-height: 1.6;
}
.settings-home-card p {
margin: 0;
color: var(--matus-muted);
font-size: 12px;
font-weight: 800;
line-height: 1.9;
}
.settings-section-toolbar {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 16px 0;
}
.settings-single-panel {
margin-top: 14px;
padding: 20px;
border-radius: 30px;
background: rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.10);
}
/* QR */
.matus-v36-hero-card,
.matus-pwa-panel {
padding: 22px;
border-radius: 30px;
background:
radial-gradient(circle at top right, rgba(196,153,91,.16), transparent 42%),
rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.10);
margin: 16px 0;
}
.matus-v36-hero-card span { color: var(--matus-gold-soft); font-weight: 950; font-size: 12px; letter-spacing: .5px; }
.matus-v36-hero-card h1 { margin: 8px 0; font-size: clamp(26px,5vw,42px); }
.matus-v36-hero-card p,.matus-pwa-panel p { color: var(--matus-muted); line-height: 2; }
.matus-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.matus-qr-card { padding: 18px; border-radius: 30px; display: grid; grid-template-columns: 190px 1fr; gap: 18px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.10); }
.matus-qr-box { padding: 12px; border-radius: 24px; background: #fff8ed; display: grid; place-items: center; }
.matus-qr-box img { width: 100%; height: auto; display: block; }
.matus-qr-info h3 { margin: 0 0 8px; }
.matus-qr-info p { color: var(--matus-muted); line-height: 1.9; }
.matus-qr-info code { display: block; direction: ltr; text-align: left; color: var(--matus-gold-soft); word-break: break-all; margin: 10px 0; }
/* Menu polish */
.public-menu-section {
position: relative;
overflow: hidden;
}
.public-menu-section::before {
content: "";
position: absolute;
inset: 18px auto auto 18px;
width: 150px;
height: 150px;
border-radius: 999px;
background: radial-gradient(circle, rgba(237,207,156,.16), transparent 65%);
pointer-events: none;
}
.public-product-card {
border-radius: 28px !important;
background:
radial-gradient(circle at 92% 8%, rgba(196,153,91,.13), transparent 42%),
rgba(255,255,255,.068) !important;
}
.public-product-card:hover,
.matus-special-card:hover {
transform: translateY(-5px);
border-color: rgba(196,153,91,.28) !important;
}
.matus-special-badge,
.public-card-special-badge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
color: #2b1a0d;
background: linear-gradient(135deg, #edcf9c, #c4995b);
font-size: 11px;
font-weight: 950;
box-shadow: 0 10px 24px rgba(196,153,91,.20);
}
.matus-favorite-welcome {
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background:
radial-gradient(circle at 90% 12%, rgba(237,207,156,.19), transparent 45%),
rgba(255,255,255,.075);
border: 1px solid rgba(237,207,156,.17);
}
.matus-favorite-welcome b { display:block; font-size: 15px; line-height: 1.7; }
.matus-favorite-welcome span { display:block; color: var(--matus-muted); font-size: 12px; line-height: 1.9; }
/* Forms and uploads */
input, select, textarea,
.form-group input, .form-group select, .form-group textarea,
.settings-field input, .settings-field select, .settings-field textarea {
border-radius: 18px !important;
background: rgba(255,255,255,.075) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
input:focus, select:focus, textarea:focus {
border-color: rgba(196,153,91,.38) !important;
box-shadow: 0 0 0 4px rgba(196,153,91,.10) !important;
}
input[type="file"] {
cursor: pointer;
padding: 13px !important;
}
input[type="file"]::file-selector-button {
border: 0;
border-radius: 14px;
padding: 10px 14px;
margin-left: 12px;
color: #20150c;
background: linear-gradient(135deg, #edcf9c, #c4995b);
font-weight: 900;
cursor: pointer;
}
/* Customer/admin avatar */
.customer-avatar, .profile-avatar, .admin-avatar, .user-avatar {
border-radius: 999px !important;
overflow: hidden !important;
border: 1px solid rgba(237,207,156,.28) !important;
box-shadow: 0 16px 44px rgba(0,0,0,.22), 0 0 0 6px rgba(196,153,91,.07) !important;
}
@media (max-width: 980px) {
.settings-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.matus-qr-grid { grid-template-columns: 1fr; }
.matus-qr-card { grid-template-columns: 160px 1fr; }
}
@media (max-width: 640px) {
.settings-home-grid { grid-template-columns: 1fr; }
.settings-home-card { min-height: 138px; }
.matus-qr-card { grid-template-columns: 1fr; }
.matus-qr-box { width: min(240px, 100%); margin: 0 auto; }
.public-topbar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 8px !important; }
.public-nav { overflow-x: auto !important; scrollbar-width: none; }
.public-nav::-webkit-scrollbar { display: none; }
}
.matus-coffee-beans{position:fixed;inset:auto 4vw 10vh auto;z-index:-1;pointer-events:none;opacity:.28;filter:blur(.1px)}.matus-coffee-beans i{display:block;width:22px;height:34px;margin:12px;border-radius:50%;background:linear-gradient(135deg,#3b2414,#c4995b);box-shadow:inset 7px 0 0 rgba(255,255,255,.09);transform:rotate(28deg);animation:matusBeanFloat 8s ease-in-out infinite}.matus-coffee-beans i:nth-child(2){animation-delay:1.4s;transform:rotate(-18deg);margin-right:42px}.matus-coffee-beans i:nth-child(3){animation-delay:2.3s;transform:rotate(45deg);margin-right:16px}@keyframes matusBeanFloat{0%,100%{transform:translateY(0) rotate(28deg)}50%{transform:translateY(-18px) rotate(42deg)}}.is-loading{opacity:.72;pointer-events:none}.is-loading::after{content:"";width:14px;height:14px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;display:inline-block;margin-right:8px;vertical-align:-3px;animation:matusSpin .75s linear infinite}@keyframes matusSpin{to{transform:rotate(360deg)}}
/* MATUS Auth Security: local captcha */
.matus-captcha-card {
display: grid;
gap: .55rem;
padding: .85rem .95rem;
border: 1px solid rgba(196, 153, 91, .24);
border-radius: 18px;
background: rgba(255, 255, 255, .055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.matus-captcha-card label {
margin: 0;
font-size: .82rem;
color: rgba(244, 238, 229, .78);
}
.matus-captcha-question {
font-weight: 800;
color: var(--matus-gold, #c4995b);
letter-spacing: -.01em;
}
.matus-captcha-card input {
width: 100%;
min-height: 44px;
border-radius: 14px;
text-align: center;
font-weight: 800;
}
.matus-google-auth-button {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
text-decoration: none;
font-weight: 900;
box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.matus-google-auth-button span {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.94);
color: #1f1b16;
font-family: Arial, sans-serif;
font-weight: 900;
}
.matus-auth-divider {
margin: 18px 0;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,.42);
font-size: 13px;
font-weight: 800;
}
.matus-auth-divider::before,
.matus-auth-divider::after {
content: "";
height: 1px;
flex: 1;
background: rgba(255,255,255,.12);
}
html[data-theme="light"] .matus-google-auth-button,
body.light-mode .matus-google-auth-button {
border-color: rgba(60,45,30,.14);
background: rgba(255,255,255,.72);
color: #2d241d;
}
html[data-theme="light"] .matus-auth-divider,
body.light-mode .matus-auth-divider {
color: rgba(45,36,29,.46);
}
html[data-theme="light"] .matus-auth-divider::before,
html[data-theme="light"] .matus-auth-divider::after,
body.light-mode .matus-auth-divider::before,
body.light-mode .matus-auth-divider::after {
background: rgba(45,36,29,.14);
}
/* MATUS AUTH DARK ONLY */
:root { color-scheme: dark; }
body,
body.light-mode,
html[data-theme="light"] body {
background:
radial-gradient(circle at 86% 2%, rgba(196,153,91,.22), transparent 30%),
radial-gradient(circle at 8% 78%, rgba(237,207,156,.075), transparent 28%),
linear-gradient(135deg, #09090b 0%, #11100f 44%, #211913 100%) !important;
color:#fff !important;
}
.auth-card,
.auth-card.light-mode,
html[data-theme="light"] .auth-card {
background: radial-gradient(circle at top right, rgba(196,153,91,.105), transparent 44%), rgba(255,255,255,.082) !important;
border-color: rgba(255,255,255,.13) !important;
color:#fff !important;
}
.auth-field input,
.auth-field select,
.auth-field textarea {
background: rgba(255,255,255,.075) !important;
border-color: rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.92) !important;
}
.auth-theme-row,[data-theme-toggle],.theme-switch,.theme-toggle{display:none!important;}
/* MATUS AUTH DARK FINAL POLISH */
.auth-page,
.auth-card,
.auth-panel{
color-scheme: dark;
}
.auth-card,.auth-panel{
background:radial-gradient(circle at top right, rgba(196,153,91,.14), transparent 42%), rgba(255,255,255,.066)!important;
border-color:rgba(255,255,255,.13)!important;
box-shadow:0 30px 90px rgba(0,0,0,.35)!important;
}
.auth-card input,.auth-card select,.auth-card textarea{
background:rgba(255,255,255,.062)!important;
border-color:rgba(255,255,255,.12)!important;
color:#fff!important;
}
.auth-card select option{background:#16120f!important;color:#fff!important;}
/* --------------------------------------------------
Auth UI v5 - connected to MATUS UI foundation
Pages affected: admin login, customer login/register/reset.
-------------------------------------------------- */
body,
body.light-mode,
html[data-theme="light"] body,
.auth-page {
background: var(--matus-ui-page-bg) !important;
color: var(--matus-ui-text) !important;
}
.auth-card,
.auth-panel,
.auth-box,
.auth-brand {
background: var(--matus-ui-gold-wash), var(--matus-ui-glass) !important;
border-color: var(--matus-ui-line) !important;
box-shadow: var(--matus-ui-shadow-soft) !important;
backdrop-filter: var(--matus-ui-blur) !important;
-webkit-backdrop-filter: var(--matus-ui-blur) !important;
color: var(--matus-ui-text) !important;
}
.auth-card { border-radius: var(--matus-ui-radius-xl) !important; }
.auth-brand small,
.auth-field label,
.auth-footer-link,
.auth-footer-link a { color: var(--matus-ui-text-soft) !important; }
.auth-submit { border-radius: var(--matus-ui-radius-sm) !important; }
/* --------------------------------------------------
MATUS Auth v5.1 - premium customer login/register
-------------------------------------------------- */
.matus-auth-body {
min-height: 100vh;
color: var(--matus-ui-text, #fff8ee);
background:
radial-gradient(circle at 82% 10%, rgba(196,153,91,.22), transparent 32%),
radial-gradient(circle at 15% 78%, rgba(168,111,56,.14), transparent 35%),
linear-gradient(145deg, #0e0a07 0%, #17110d 48%, #21170f 100%) !important;
overflow-x: hidden;
}
.matus-auth-body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255,255,255,.06), transparent 28%, rgba(196,153,91,.05) 74%, transparent),
radial-gradient(circle at 50% 120%, rgba(196,153,91,.12), transparent 44%);
opacity: .86;
}
.matus-auth-header {
position: fixed;
top: 14px;
right: 14px;
left: 14px;
z-index: 60;
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 28px;
background:
linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
radial-gradient(circle at 86% 16%, rgba(196,153,91,.14), transparent 42%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 20px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(24px) saturate(1.18);
-webkit-backdrop-filter: blur(24px) saturate(1.18);
}
.matus-auth-logo {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 18px;
color: #f4d7a3;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
text-decoration: none;
}
.matus-auth-logo svg { width: 30px; height: 30px; }
.matus-auth-back {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 14px;
border-radius: 18px;
color: rgba(255,250,241,.84);
text-decoration: none;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.10);
font-size: 13px;
font-weight: 900;
}
.matus-auth-back .ui-icon { width: 17px; height: 17px; transform: rotate(180deg); }
.matus-auth-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 108px 18px 28px;
}
.matus-auth-wrap {
width: min(1040px, 100%);
display: grid;
grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr);
gap: 18px;
align-items: stretch;
}
.matus-auth-showcase,
.matus-auth-panel {
position: relative;
overflow: hidden;
border-radius: 38px;
border: 1px solid rgba(255,255,255,.14);
background:
linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
radial-gradient(circle at 85% 12%, rgba(196,153,91,.18), transparent 42%),
rgba(17,13,10,.58);
box-shadow: 0 32px 95px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13);
backdrop-filter: blur(28px) saturate(1.18);
-webkit-backdrop-filter: blur(28px) saturate(1.18);
}
.matus-auth-showcase {
min-height: 620px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 34px;
isolation: isolate;
}
.matus-auth-showcase::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(180deg, transparent 0%, rgba(7,5,4,.26) 48%, rgba(7,5,4,.78) 100%),
radial-gradient(circle at 40% 18%, rgba(255,255,255,.12), transparent 26%),
radial-gradient(circle at 76% 72%, rgba(196,153,91,.18), transparent 34%);
}
.matus-auth-orb {
position: absolute;
width: 260px;
height: 260px;
right: -86px;
top: -72px;
border-radius: 50%;
background: radial-gradient(circle, rgba(237,207,156,.38), rgba(196,153,91,.10) 48%, transparent 72%);
filter: blur(3px);
opacity: .82;
}
.matus-auth-logo-mark {
width: 116px;
height: 116px;
display: grid;
place-items: center;
margin-bottom: auto;
border-radius: 34px;
color: #f3d7a8;
background:
linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
radial-gradient(circle at top right, rgba(196,153,91,.17), transparent 48%);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 22px 62px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.matus-auth-logo-mark svg { width: 76px; height: 76px; }
.matus-auth-kicker,
.matus-auth-heading > span {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
color: #edcf9c;
background: rgba(196,153,91,.13);
border: 1px solid rgba(196,153,91,.20);
font-size: 12px;
font-weight: 950;
}
.matus-auth-showcase h1 {
margin: 14px 0 6px;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.18;
letter-spacing: -.05em;
}
.matus-auth-showcase p {
margin: 0;
max-width: 430px;
color: rgba(255,244,226,.68);
line-height: 2;
font-size: 15px;
}
.matus-auth-points {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.matus-auth-points span {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 12px;
border-radius: 999px;
color: rgba(255,250,241,.82);
background: rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.11);
font-size: 12px;
font-weight: 900;
}
.matus-auth-points .ui-icon { width: 16px; height: 16px; color: #edcf9c; }
.matus-auth-panel {
padding: 30px;
display: grid;
align-content: center;
}
.matus-auth-heading {
display: grid;
gap: 8px;
margin-bottom: 20px;
}
.matus-auth-heading h2 {
margin: 0;
font-size: clamp(25px, 3vw, 36px);
line-height: 1.35;
letter-spacing: -.035em;
}
.matus-auth-heading p {
margin: 0;
color: rgba(255,244,226,.60);
line-height: 1.9;
font-size: 14px;
}
.matus-auth-alert {
margin-bottom: 16px !important;
border-radius: 20px !important;
background: rgba(255,90,90,.11) !important;
border-color: rgba(255,120,120,.24) !important;
}
.matus-auth-form {
display: grid;
gap: 13px;
}
.matus-auth-register-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.matus-auth-register-form .auth-submit,
.matus-auth-register-form .matus-auth-divider,
.matus-auth-register-form .auth-error,
.matus-auth-register-form .matus-captcha-field,
.matus-auth-register-form .captcha-field,
.matus-auth-register-form [class*="captcha"] {
grid-column: 1 / -1;
}
.matus-auth-field {
display: grid;
gap: 8px;
margin: 0;
}
.matus-auth-field > span,
.matus-auth-field > label {
margin: 0;
color: rgba(255,250,241,.72);
font-size: 13px;
font-weight: 950;
}
.matus-auth-input-wrap {
min-height: 58px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 0 14px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.13);
background:
linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045)),
rgba(255,255,255,.035);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.matus-auth-input-wrap:focus-within {
border-color: rgba(237,207,156,.42);
box-shadow: 0 0 0 4px rgba(196,153,91,.11), inset 0 1px 0 rgba(255,255,255,.12);
background:
linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)),
rgba(255,255,255,.045);
}
.matus-auth-input-wrap .ui-icon {
width: 18px;
height: 18px;
color: rgba(237,207,156,.78);
}
.matus-auth-input-wrap input,
.auth-field .matus-auth-input-wrap input {
min-height: 56px !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: none !important;
background: transparent !important;
color: #fffaf2 !important;
box-shadow: none !important;
font-size: 14px;
text-align: right;
}
.matus-auth-input-wrap input[dir="ltr"] { text-align: left; direction: ltr; }
.matus-auth-input-wrap input::placeholder { color: rgba(255,244,226,.35) !important; }
.matus-auth-input-wrap .password-toggle-button {
width: 40px;
height: 40px;
margin-left: -6px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.11);
background: rgba(255,255,255,.065);
color: rgba(255,250,241,.78);
display: grid;
place-items: center;
}
.matus-auth-input-wrap .password-toggle-button .ui-icon { color: currentColor; width: 17px; height: 17px; }
.matus-auth-submit {
min-height: 58px !important;
border-radius: 22px !important;
color: #fff8ee !important;
background:
linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
radial-gradient(circle at top right, rgba(237,207,156,.22), transparent 45%),
rgba(196,153,91,.16) !important;
border: 1px solid rgba(237,207,156,.32) !important;
box-shadow: 0 20px 56px rgba(0,0,0,.24), 0 0 38px rgba(196,153,91,.10), inset 0 1px 0 rgba(255,255,255,.14) !important;
font-weight: 950 !important;
cursor: pointer;
}
.matus-auth-submit:hover { transform: translateY(-2px); }
.matus-auth-google {
min-height: 54px;
margin-bottom: 14px;
border-radius: 20px !important;
background: rgba(255,255,255,.075) !important;
border-color: rgba(255,255,255,.14) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.matus-auth-divider {
margin: 2px 0 14px;
display: grid;
place-items: center;
color: rgba(255,244,226,.46);
font-size: 12px;
}
.matus-auth-divider::before {
content: "";
width: 100%;
height: 1px;
grid-area: 1 / 1;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.matus-auth-divider span {
grid-area: 1 / 1;
padding: 0 12px;
background: rgba(17,13,10,.88);
border-radius: 999px;
}
.matus-auth-switch {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.10);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: rgba(255,244,226,.56);
font-size: 13px;
}
.matus-auth-switch a {
color: #edcf9c;
text-decoration: none;
font-weight: 950;
}
.matus-auth-empty {
border-radius: 24px;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.11) !important;
}
@media (max-width: 900px) {
.matus-auth-wrap {
grid-template-columns: 1fr;
max-width: 560px;
}
.matus-auth-showcase {
min-height: auto;
padding: 26px;
}
.matus-auth-logo-mark {
width: 86px;
height: 86px;
border-radius: 28px;
margin-bottom: 38px;
}
.matus-auth-logo-mark svg { width: 58px; height: 58px; }
}
@media (max-width: 560px) {
.matus-auth-page {
padding: 92px 10px 18px;
place-items: start center;
}
.matus-auth-header {
top: 8px;
right: 8px;
left: 8px;
border-radius: 24px;
}
.matus-auth-showcase,
.matus-auth-panel {
border-radius: 30px;
padding: 20px;
}
.matus-auth-showcase h1 {
font-size: 31px;
}
.matus-auth-showcase p,
.matus-auth-heading p {
font-size: 13px;
}
.matus-auth-panel {
padding: 20px;
}
.matus-auth-register-form {
grid-template-columns: 1fr;
}
.matus-auth-points {
gap: 6px;
}
.matus-auth-points span {
min-height: 32px;
font-size: 11px;
padding: 0 9px;
}
}
.matus-google-auth-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 16px;
color: rgba(255,250,241,.9);
text-decoration: none;
font-weight: 950;
}
.matus-google-auth-button span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 13px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.12);
color: #edcf9c;
direction: ltr;
}
.matus-captcha-card {
grid-column: 1 / -1;
display: grid;
gap: 8px;
padding: 12px;
border-radius: 22px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.10);
}
.matus-captcha-card label {
margin: 0;
color: rgba(255,250,241,.72);
font-size: 13px;
font-weight: 950;
}
.matus-captcha-question {
color: #edcf9c;
font-size: 13px;
font-weight: 900;
}
.matus-captcha-card input {
min-height: 48px !important;
width: 100%;
padding: 0 14px !important;
border-radius: 17px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.055) !important;
color: #fffaf2 !important;
outline: none !important;
}
/* MATUS Auth Experience Final Polish: login / recovery / reset */
.matus-auth-wrap-login,
.matus-auth-wrap-recovery {
width: min(1000px, 100%);
}
.matus-auth-unified-login-page .matus-auth-showcase,
.matus-auth-recovery-page .matus-auth-showcase,
.matus-auth-reset-page .matus-auth-showcase {
min-height: 590px;
}
.matus-auth-unified-login-page .matus-auth-panel,
.matus-auth-recovery-page .matus-auth-panel,
.matus-auth-reset-page .matus-auth-panel {
background:
linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.038)),
radial-gradient(circle at 90% 8%, rgba(237,207,156,.15), transparent 42%),
radial-gradient(circle at 8% 100%, rgba(196,153,91,.09), transparent 44%),
rgba(13,10,8,.62);
}
.matus-auth-success {
background: rgba(79, 210, 145, .11) !important;
border-color: rgba(110, 230, 170, .26) !important;
color: rgba(219,255,236,.92) !important;
}
.matus-auth-form-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: -2px 0 2px;
padding: 0 3px;
color: rgba(255,244,226,.52);
font-size: 12px;
font-weight: 800;
}
.matus-auth-form-tools a {
color: #edcf9c;
text-decoration: none;
font-weight: 950;
padding: 8px 10px;
margin-left: -8px;
border-radius: 14px;
background: rgba(237,207,156,.065);
border: 1px solid rgba(237,207,156,.12);
}
.matus-auth-help-card {
margin-top: 16px;
padding: 14px 15px;
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.032)),
rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.105);
color: rgba(255,244,226,.62);
line-height: 1.9;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.matus-auth-help-card strong {
display: block;
color: rgba(255,250,241,.88);
font-size: 13px;
margin-bottom: 3px;
}
.matus-auth-help-card p {
margin: 0;
font-size: 12px;
}
.matus-auth-link-submit {
display: grid;
place-items: center;
text-decoration: none;
margin-top: 4px;
}
.matus-auth-wrap-recovery .matus-auth-panel {
align-content: center;
}
.matus-auth-wrap-recovery .matus-auth-showcase::after,
.matus-auth-wrap-login .matus-auth-showcase::after {
content: "";
position: absolute;
inset: 18px;
border-radius: 30px;
pointer-events: none;
border: 1px solid rgba(255,255,255,.06);
background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 30%, rgba(237,207,156,.045) 78%, transparent);
opacity: .75;
}
.matus-auth-unified-login-page .matus-auth-logo-mark,
.matus-auth-recovery-page .matus-auth-logo-mark,
.matus-auth-reset-page .matus-auth-logo-mark {
box-shadow:
0 26px 76px rgba(0,0,0,.30),
0 0 42px rgba(237,207,156,.09),
inset 0 1px 0 rgba(255,255,255,.18);
}
@media (max-width: 900px) {
.matus-auth-unified-login-page .matus-auth-showcase,
.matus-auth-recovery-page .matus-auth-showcase,
.matus-auth-reset-page .matus-auth-showcase {
min-height: auto;
}
}
@media (max-width: 560px) {
.matus-auth-form-tools {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.matus-auth-form-tools a {
margin-left: 0;
margin-right: -2px;
}
.matus-auth-help-card {
border-radius: 20px;
padding: 12px 13px;
}
}
/* --------------------------------------------------
MATUS Auth v6.2 - login page premium parity
ورود باید همسطح ثبتنام و بازیابی رمز دیده شود.
-------------------------------------------------- */
.matus-auth-login-page {
background:
radial-gradient(circle at 78% 8%, rgba(237,207,156,.13), transparent 28%),
radial-gradient(circle at 18% 88%, rgba(196,153,91,.10), transparent 36%);
}
.matus-auth-login-page .matus-auth-wrap-login {
width: min(980px, 100%);
align-items: stretch;
}
.matus-auth-login-page .matus-auth-showcase {
background:
linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.040)),
radial-gradient(circle at 76% 8%, rgba(237,207,156,.24), transparent 34%),
radial-gradient(circle at 20% 96%, rgba(196,153,91,.13), transparent 42%),
rgba(15,11,8,.58) !important;
border-color: rgba(255,255,255,.15) !important;
}
.matus-auth-login-page .matus-auth-showcase::before {
background:
linear-gradient(160deg, rgba(255,255,255,.09), transparent 28%, rgba(237,207,156,.050) 76%, transparent),
radial-gradient(circle at 48% 22%, rgba(255,255,255,.105), transparent 26%),
radial-gradient(circle at 82% 78%, rgba(196,153,91,.18), transparent 36%),
linear-gradient(180deg, rgba(7,5,4,.06) 0%, rgba(7,5,4,.38) 52%, rgba(7,5,4,.76) 100%);
}
.matus-auth-login-page .matus-auth-showcase::after {
inset: 16px;
border-radius: 32px;
background:
linear-gradient(125deg, rgba(255,255,255,.10), transparent 32%, rgba(237,207,156,.045) 82%, transparent),
radial-gradient(circle at 84% 8%, rgba(237,207,156,.055), transparent 34%);
border-color: rgba(255,255,255,.075);
opacity: .88;
}
.matus-auth-login-page .matus-auth-orb {
width: 300px;
height: 300px;
right: -108px;
top: -104px;
background: radial-gradient(circle, rgba(237,207,156,.40), rgba(196,153,91,.095) 50%, transparent 72%);
filter: blur(5px);
}
.matus-auth-login-page .matus-auth-logo-mark {
width: 110px;
height: 110px;
border-radius: 32px;
color: #fff8ee;
background:
linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.045)),
radial-gradient(circle at 72% 18%, rgba(237,207,156,.18), transparent 42%),
rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.18);
box-shadow:
0 28px 78px rgba(0,0,0,.34),
0 0 48px rgba(237,207,156,.10),
inset 0 1px 0 rgba(255,255,255,.20);
}
.matus-auth-login-page .matus-auth-logo-mark svg {
width: 72px;
height: 72px;
}
.matus-auth-login-page .matus-auth-kicker,
.matus-auth-login-page .matus-auth-heading > span {
background:
linear-gradient(145deg, rgba(237,207,156,.16), rgba(237,207,156,.055)),
rgba(255,255,255,.025);
border-color: rgba(237,207,156,.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.matus-auth-login-page .matus-auth-showcase h1,
.matus-auth-login-page .matus-auth-heading h2 {
text-shadow: 0 18px 44px rgba(0,0,0,.30);
}
.matus-auth-login-page .matus-auth-panel {
padding: 32px;
background:
linear-gradient(145deg, rgba(255,255,255,.125), rgba(255,255,255,.040)),
radial-gradient(circle at 90% 7%, rgba(237,207,156,.17), transparent 42%),
radial-gradient(circle at 5% 105%, rgba(196,153,91,.10), transparent 45%),
rgba(13,10,8,.60) !important;
border-color: rgba(255,255,255,.145) !important;
}
.matus-auth-login-page .matus-auth-panel::before {
content: "";
position: absolute;
inset: 14px;
border-radius: 30px;
pointer-events: none;
border: 1px solid rgba(255,255,255,.055);
background: linear-gradient(130deg, rgba(255,255,255,.055), transparent 38%, rgba(237,207,156,.035) 82%, transparent);
opacity: .82;
}
.matus-auth-login-page .matus-auth-heading,
.matus-auth-login-page .matus-auth-form,
.matus-auth-login-page .matus-auth-switch,
.matus-auth-login-page .matus-auth-alert,
.matus-auth-login-page .matus-google-auth-button,
.matus-auth-login-page .matus-auth-divider {
position: relative;
z-index: 1;
}
.matus-auth-login-page .matus-auth-form {
gap: 15px;
}
.matus-auth-login-page .matus-auth-input-wrap {
min-height: 62px;
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.040)),
rgba(255,255,255,.035) !important;
border-color: rgba(255,255,255,.135);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.11),
0 12px 34px rgba(0,0,0,.10);
}
.matus-auth-login-page .matus-auth-input-wrap:focus-within {
border-color: rgba(237,207,156,.48);
box-shadow:
0 0 0 4px rgba(196,153,91,.115),
0 18px 46px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.15);
}
/* مرورگر روی فیلدهای ورود رنگ آبی/زرد اتوفیل نریزد */
.matus-auth-login-page input:-webkit-autofill,
.matus-auth-login-page input:-webkit-autofill:hover,
.matus-auth-login-page input:-webkit-autofill:focus,
.matus-auth-login-page input:-webkit-autofill:active {
-webkit-text-fill-color: #fff8ee !important;
caret-color: #fff8ee !important;
transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s !important;
box-shadow: 0 0 0 1000px rgba(255,255,255,.02) inset !important;
}
.matus-auth-login-page .matus-captcha-card {
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
rgba(255,255,255,.030);
border-color: rgba(255,255,255,.115);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.matus-auth-login-page .matus-captcha-card input {
background:
linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
rgba(255,255,255,.035) !important;
border-color: rgba(255,255,255,.12) !important;
}
.matus-auth-login-page .matus-auth-form-tools {
padding: 3px 4px 0;
}
.matus-auth-login-page .matus-auth-form-tools a {
background:
linear-gradient(145deg, rgba(237,207,156,.13), rgba(237,207,156,.045)),
rgba(255,255,255,.018);
border-color: rgba(237,207,156,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.matus-auth-login-page .matus-auth-submit {
color: #fff8ee !important;
background:
linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
radial-gradient(circle at 72% 12%, rgba(237,207,156,.26), transparent 45%),
rgba(196,153,91,.14) !important;
border-color: rgba(237,207,156,.34) !important;
}
@media (max-width: 900px) {
.matus-auth-login-page .matus-auth-showcase {
min-height: 280px;
padding: 22px;
justify-content: flex-end;
}
.matus-auth-login-page .matus-auth-logo-mark {
width: 92px;
height: 92px;
border-radius: 30px;
margin-bottom: 26px;
}
.matus-auth-login-page .matus-auth-logo-mark svg {
width: 62px;
height: 62px;
}
}
@media (max-width: 560px) {
.matus-auth-login-page .matus-auth-wrap-login {
gap: 14px;
}
.matus-auth-login-page .matus-auth-showcase {
min-height: 246px;
border-radius: 32px;
padding: 20px;
}
.matus-auth-login-page .matus-auth-panel {
border-radius: 32px;
padding: 22px 20px;
}
.matus-auth-login-page .matus-auth-showcase h1 {
font-size: 30px;
margin-top: 10px;
}
.matus-auth-login-page .matus-auth-showcase p {
font-size: 12px;
line-height: 1.85;
}
.matus-auth-login-page .matus-auth-points {
margin-top: 14px;
}
.matus-auth-login-page .matus-auth-input-wrap {
min-height: 60px;
border-radius: 22px;
}
}
/* --------------------------------------------------
MATUS Auth v7.0 - structural login rebuild
این بلوک با کلاس اختصاصی، صفحه ورود جدید را از CSS قدیمی جدا میکند.
-------------------------------------------------- */
.matus-auth-login-v7 {
--login-glass: rgba(255,255,255,.070);
--login-glass-strong: rgba(255,255,255,.105);
--login-border: rgba(255,255,255,.135);
--login-gold: rgba(226,188,126,.90);
--login-gold-soft: rgba(226,188,126,.16);
background:
radial-gradient(circle at 82% 7%, rgba(226,188,126,.14), transparent 30%),
radial-gradient(circle at 12% 88%, rgba(139,89,46,.12), transparent 36%);
}
.matus-auth-login-v7 .matus-auth-wrap-login-v7 {
width: min(1000px, 100%);
grid-template-columns: minmax(300px,.92fr) minmax(360px,1.08fr);
gap: 18px;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7,
.matus-auth-login-v7 .matus-auth-login-panel-v7 {
border: 1px solid var(--login-border) !important;
box-shadow:
0 34px 100px rgba(0,0,0,.36),
inset 0 1px 0 rgba(255,255,255,.12) !important;
backdrop-filter: blur(26px) saturate(1.16) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.16) !important;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7 {
min-height: 640px;
padding: 36px;
background:
linear-gradient(150deg, rgba(255,255,255,.095), rgba(255,255,255,.026)),
radial-gradient(circle at 80% 10%, rgba(226,188,126,.18), transparent 38%),
radial-gradient(circle at 14% 94%, rgba(146,92,48,.13), transparent 44%),
rgba(12,9,7,.68) !important;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7::before {
background:
linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(8,6,5,.16) 44%, rgba(8,6,5,.78) 100%),
radial-gradient(circle at 48% 16%, rgba(255,255,255,.09), transparent 25%),
radial-gradient(circle at 78% 74%, rgba(226,188,126,.14), transparent 34%) !important;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7::after {
content: "";
position: absolute;
inset: 15px;
border-radius: 30px;
pointer-events: none;
border: 1px solid rgba(255,255,255,.055);
background: linear-gradient(132deg, rgba(255,255,255,.045), transparent 40%, rgba(226,188,126,.030) 84%, transparent);
}
.matus-auth-login-v7 .matus-auth-logo-mark {
width: 112px;
height: 112px;
border-radius: 34px;
color: #fff8ed;
background:
linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
radial-gradient(circle at 72% 18%, rgba(226,188,126,.17), transparent 46%),
rgba(255,255,255,.035);
border-color: rgba(255,255,255,.16);
box-shadow:
0 26px 74px rgba(0,0,0,.34),
0 0 42px rgba(226,188,126,.085),
inset 0 1px 0 rgba(255,255,255,.18);
}
.matus-auth-login-v7 .matus-auth-kicker,
.matus-auth-login-v7 .matus-auth-heading > span {
color: #f2d3a2;
background: linear-gradient(145deg, rgba(226,188,126,.14), rgba(226,188,126,.040));
border-color: rgba(226,188,126,.22);
}
.matus-auth-login-v7 .matus-auth-login-panel-v7 {
position: relative;
padding: 34px;
background:
linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.030)),
radial-gradient(circle at 90% 7%, rgba(226,188,126,.125), transparent 42%),
rgba(15,11,9,.72) !important;
}
.matus-auth-login-v7 .matus-auth-login-panel-v7::before {
content: "";
position: absolute;
inset: 14px;
border-radius: 30px;
pointer-events: none;
border: 1px solid rgba(255,255,255,.045);
background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 38%, rgba(226,188,126,.026) 82%, transparent);
}
.matus-auth-login-v7 .matus-auth-heading,
.matus-auth-login-v7 .matus-auth-login-trust-v7,
.matus-auth-login-v7 .matus-auth-form,
.matus-auth-login-v7 .matus-auth-switch,
.matus-auth-login-v7 .matus-auth-alert,
.matus-auth-login-v7 .matus-google-auth-button,
.matus-auth-login-v7 .matus-auth-divider {
position: relative;
z-index: 1;
}
.matus-auth-login-v7 .matus-auth-login-trust-v7 {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -4px 0 18px;
}
.matus-auth-login-v7 .matus-auth-login-trust-v7 span {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 11px;
border-radius: 999px;
color: rgba(255,248,236,.76);
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.085);
font-size: 11px;
font-weight: 900;
}
.matus-auth-login-v7 .matus-auth-login-trust-v7 .ui-icon {
width: 15px;
height: 15px;
color: #e4bd7d;
}
.matus-auth-login-v7 .matus-auth-form {
gap: 15px;
}
.matus-auth-login-v7 .matus-auth-input-wrap {
min-height: 61px;
border-radius: 23px;
background:
linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.026)),
rgba(255,255,255,.020) !important;
border-color: rgba(255,255,255,.115) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.085), 0 12px 30px rgba(0,0,0,.08) !important;
}
.matus-auth-login-v7 .matus-auth-input-wrap:focus-within {
border-color: rgba(226,188,126,.44) !important;
box-shadow:
0 0 0 4px rgba(226,188,126,.095),
0 18px 46px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.matus-auth-login-v7 .matus-captcha-card {
border-radius: 23px;
padding: 14px;
background:
linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.024)),
rgba(255,255,255,.018) !important;
border: 1px solid rgba(255,255,255,.095) !important;
}
.matus-auth-login-v7 .matus-captcha-question {
color: #f1cb91 !important;
}
.matus-auth-login-v7 .matus-captcha-card input {
min-height: 53px !important;
border-radius: 18px !important;
color: #fff8ee !important;
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.095) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.matus-auth-login-v7 .matus-auth-form-tools {
padding: 0 2px;
}
.matus-auth-login-v7 .matus-auth-form-tools a {
color: #efc98d;
}
.matus-auth-login-v7 .matus-auth-submit {
min-height: 60px !important;
border-radius: 22px !important;
color: #fff9ef !important;
background:
linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.028)),
radial-gradient(circle at 72% 12%, rgba(226,188,126,.17), transparent 48%),
rgba(226,188,126,.095) !important;
border-color: rgba(226,188,126,.29) !important;
box-shadow:
0 20px 54px rgba(0,0,0,.23),
0 0 28px rgba(226,188,126,.07),
inset 0 1px 0 rgba(255,255,255,.13) !important;
}
.matus-auth-login-v7 input:-webkit-autofill,
.matus-auth-login-v7 input:-webkit-autofill:hover,
.matus-auth-login-v7 input:-webkit-autofill:focus,
.matus-auth-login-v7 input:-webkit-autofill:active {
-webkit-text-fill-color: #fff8ee !important;
caret-color: #fff8ee !important;
transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s !important;
box-shadow: 0 0 0 1000px rgba(32,25,20,.96) inset !important;
}
@media (max-width: 900px) {
.matus-auth-login-v7 .matus-auth-wrap-login-v7 {
grid-template-columns: 1fr;
width: min(560px,100%);
gap: 15px;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7 {
display: flex !important;
min-height: 305px;
padding: 24px;
justify-content: flex-end;
}
.matus-auth-login-v7 .matus-auth-logo-mark {
width: 92px;
height: 92px;
border-radius: 29px;
margin-bottom: auto;
}
.matus-auth-login-v7 .matus-auth-logo-mark svg {
width: 62px;
height: 62px;
}
.matus-auth-login-v7 .matus-auth-login-panel-v7 {
padding: 24px;
}
}
@media (max-width: 560px) {
.matus-auth-login-v7 {
padding-top: 92px;
}
.matus-auth-login-v7 .matus-auth-wrap-login-v7 {
gap: 13px;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7 {
min-height: 282px;
border-radius: 31px;
padding: 21px;
}
.matus-auth-login-v7 .matus-auth-login-panel-v7 {
border-radius: 31px;
padding: 22px 20px;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7 h1 {
font-size: 31px;
margin-top: 10px;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7 p {
font-size: 12px;
line-height: 1.85;
}
.matus-auth-login-v7 .matus-auth-heading h2 {
font-size: 28px;
}
.matus-auth-login-v7 .matus-auth-login-trust-v7 {
margin-bottom: 15px;
}
.matus-auth-login-v7 .matus-auth-input-wrap {
min-height: 59px;
}
.matus-auth-login-v7 .matus-auth-submit {
min-height: 58px !important;
}
}
/* MATUS Auth v7.1 - clearer customer-facing copy spacing */
@media (max-width: 900px) {
.matus-auth-login-v7 .matus-auth-login-showcase-v7 {
justify-content: flex-start;
}
.matus-auth-login-v7 .matus-auth-logo-mark {
margin-bottom: 22px;
}
.matus-auth-login-v7 .matus-auth-kicker {
margin-top: 0;
}
}
@media (max-width: 560px) {
.matus-auth-login-v7 .matus-auth-login-showcase-v7 {
min-height: 300px;
}
.matus-auth-login-v7 .matus-auth-logo-mark {
margin-bottom: 18px;
}
}
/* MATUS login showcase chips: keep all three items in one aligned row */
.matus-auth-login-page .matus-auth-points {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
}
.matus-auth-login-page .matus-auth-points > span,
.matus-auth-login-page .matus-auth-points > a {
min-width: 0;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 8px;
border-radius: 999px;
color: rgba(255,250,241,.86);
background: rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.11);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
font-size: 10.5px;
font-weight: 900;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.matus-auth-login-page .matus-auth-points > a:hover,
.matus-auth-login-page .matus-auth-points > a:focus-visible {
transform: translateY(-1px);
color: #fff6e7;
background: rgba(226,188,126,.11);
border-color: rgba(226,188,126,.28);
outline: none;
}
.matus-auth-login-page .matus-auth-points > span .ui-icon,
.matus-auth-login-page .matus-auth-points > a .ui-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
@media (max-width: 390px) {
.matus-auth-login-page .matus-auth-points {
gap: 5px;
}
.matus-auth-login-page .matus-auth-points > span,
.matus-auth-login-page .matus-auth-points > a {
min-height: 34px;
padding: 0 5px;
gap: 4px;
font-size: 9.4px;
}
.matus-auth-login-page .matus-auth-points > span .ui-icon,
.matus-auth-login-page .matus-auth-points > a .ui-icon {
width: 12px;
height: 12px;
}
}
/* --------------------------------------------------
Password reset v2 — dedicated recovery surface
-------------------------------------------------- */
.matus-auth-reset-v2 .matus-auth-reset-wrap-v2 {
width: min(1000px, 100%);
align-items: stretch;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2,
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 {
position: relative;
overflow: hidden;
border-radius: 34px;
background:
radial-gradient(circle at 90% 0%, rgba(196,153,91,.15), transparent 40%),
linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.028)),
rgba(13,10,8,.62) !important;
border: 1px solid rgba(255,255,255,.13) !important;
box-shadow: 0 28px 86px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.08) !important;
backdrop-filter: blur(20px) saturate(124%);
-webkit-backdrop-filter: blur(20px) saturate(124%);
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 {
min-height: 560px;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2::before {
content: "";
position: absolute;
inset: 14px;
border-radius: 26px;
border: 1px solid rgba(255,255,255,.07);
background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 34%, rgba(196,153,91,.035) 78%, transparent);
pointer-events: none;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 h1 {
max-width: 440px;
margin: 14px auto 8px;
color: #fffaf2;
font-size: clamp(28px, 4.4vw, 46px);
line-height: 1.4;
font-weight: 1000;
letter-spacing: -.04em;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 > p {
max-width: 500px;
margin: 0 auto;
color: rgba(255,244,226,.62);
font-size: 13px;
font-weight: 760;
line-height: 2;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 .matus-auth-points {
width: 100%;
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 8px;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 .matus-auth-points > span {
min-height: 38px;
padding: 0 9px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: rgba(255,250,242,.78);
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.09);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 {
align-content: center;
padding: clamp(22px, 4vw, 38px);
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 .matus-auth-heading h2 {
color: #fffaf2;
font-size: clamp(24px, 3.5vw, 36px);
line-height: 1.5;
font-weight: 1000;
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 .matus-auth-heading p {
color: rgba(255,244,226,.58);
line-height: 1.95;
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 .matus-auth-input-wrap {
min-height: 56px;
background: rgba(255,255,255,.055);
border-color: rgba(255,255,255,.105);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 .matus-auth-input-wrap:focus-within {
background: rgba(255,255,255,.07);
border-color: rgba(237,207,156,.28);
box-shadow: 0 0 0 4px rgba(196,153,91,.08), inset 0 1px 0 rgba(255,255,255,.07);
}
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 .matus-auth-submit {
min-height: 54px;
border-radius: 19px;
color: #18110b;
background:
linear-gradient(180deg, rgba(255,239,202,.34), transparent 42%),
linear-gradient(135deg, #e2c38a, #bf9252);
border: 1px solid rgba(255,229,179,.34);
box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 18px 42px rgba(154,102,40,.23);
}
@media (max-width: 900px) {
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 {
min-height: auto;
}
}
@media (max-width: 560px) {
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2,
.matus-auth-reset-v2 .matus-auth-reset-panel-v2 {
border-radius: 28px;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 {
padding: 24px 16px;
}
.matus-auth-reset-v2 .matus-auth-reset-showcase-v2 .matus-auth-points {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------
MATUS v3.6 — Android/PWA login performance guard
Keeps the visual language while reducing GPU-heavy blur and motion on phones.
-------------------------------------------------- */
@media (max-width: 720px), (display-mode: standalone) {
.matus-auth-body,
.matus-auth-page {
background-attachment: scroll !important;
}
.matus-auth-login-v7 .matus-auth-orb,
.matus-auth-page::before,
.matus-auth-page::after,
.matus-coffee-beans,
.matus-coffee-beans i {
animation: none !important;
will-change: auto !important;
}
.matus-auth-login-v7 .matus-auth-login-showcase-v7,
.matus-auth-login-v7 .matus-auth-login-panel-v7,
.matus-auth-header {
-webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
backdrop-filter: blur(10px) saturate(1.04) !important;
box-shadow: 0 18px 48px rgba(0,0,0,.24) !important;
}
.matus-auth-login-v7 .matus-auth-orb {
filter: none !important;
opacity: .42 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.matus-auth-body *,
.matus-auth-body *::before,
.matus-auth-body *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
}
/* --------------------------------------------------
MATUS Register v8 - unified with the modern login shell
-------------------------------------------------- */
.matus-auth-register-v8 .matus-auth-wrap-register-v8 {
width: min(1160px, 100%);
grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.18fr);
}
.matus-auth-register-v8 .matus-auth-register-showcase-v8 {
min-height: 720px;
}
.matus-auth-register-v8 .matus-auth-register-panel-v8 {
align-content: start;
padding: 32px;
}
.matus-auth-register-v8 .matus-auth-field-wide {
grid-column: 1 / -1;
}
.matus-auth-register-v8 .matus-auth-register-form .matus-captcha-card,
.matus-auth-register-v8 .matus-auth-register-form .matus-captcha-field,
.matus-auth-register-v8 .matus-auth-register-form .captcha-field,
.matus-auth-register-v8 .matus-auth-register-form [class*="captcha"] {
min-width: 0;
}
.matus-auth-register-v8 .matus-auth-input-wrap {
min-width: 0;
}
.matus-auth-register-v8 .matus-auth-field small {
color: rgba(255, 244, 226, .46);
font-size: 11px;
}
.matus-auth-register-v8 .matus-auth-register-switch-v8 i {
color: rgba(255, 244, 226, .25);
font-style: normal;
}
.matus-auth-register-v8 input:-webkit-autofill,
.matus-auth-register-v8 input:-webkit-autofill:hover,
.matus-auth-register-v8 input:-webkit-autofill:focus,
.matus-auth-register-v8 input:-webkit-autofill:active {
-webkit-text-fill-color: #fffaf2 !important;
transition: background-color 9999s ease-out 0s;
box-shadow: 0 0 0 1000px transparent inset !important;
}
@media (max-width: 960px) {
.matus-auth-register-v8 .matus-auth-wrap-register-v8 {
grid-template-columns: 1fr;
max-width: 640px;
}
.matus-auth-register-v8 .matus-auth-register-showcase-v8 {
min-height: auto;
}
}
@media (max-width: 620px) {
.matus-auth-register-v8 .matus-auth-register-panel-v8 {
padding: 20px;
}
.matus-auth-register-v8 .matus-auth-register-form {
grid-template-columns: 1fr;
}
.matus-auth-register-v8 .matus-auth-field-wide {
grid-column: auto;
}
}