/* Tarqem shape & chrome layer. Radius, shadow and easing values come from the marketing site's globals.css; colours stay the POS's own. Must be the last stylesheet in the layout . */ :root { --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .08); --shadow-xl: 0 24px 56px rgba(15, 23, 42, .12); --ease-out-quart: cubic-bezier(.25, 1, .5, 1); } /* --- Rounder corners ------------------------------------------------------ Plain class selectors on purpose: Bootstrap's joined-edge rules (.input-group > .form-control:not(:last-child), .btn-group > .btn…) are more specific, so inner corners of grouped controls stay square. */ .btn, .form-control, .custom-select, .input-group-text, .alert, .nav-pills .nav-link, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-dropdown, #toast-container > div { border-radius: var(--radius-lg); } .btn-sm, .form-control-sm, .badge, .dropdown-item { border-radius: var(--radius-md); } .card, .card-box, .modal-content, .list-group { border-radius: var(--radius-xl); } /* No overflow:hidden on cards (it would clip dropdowns), so round the edge children instead. */ .card > .card-header:first-child, .card > .card-img-top, .card > .list-group:first-child .list-group-item:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .card > .card-footer:last-child, .card > .card-img-bottom { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .modal-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .modal-footer { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .dropdown-menu { border-radius: var(--radius-lg); padding: 6px; } .page-item:first-child .page-link, .page-item:last-child .page-link, .page-link { border-radius: var(--radius-md); } .pagination .page-item + .page-item { margin-inline-start: 4px; } /* --- Frosted top bar (_Layout, _LayoutCustomer) ---------------------------- backdrop-filter makes the bar a containing block for position:fixed descendants; nothing inside .navbar-custom is fixed (modals live outside it). */ .left-side-menu-dark .navbar-custom { background-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); /* Inset hairline instead of border-bottom, so the fixed 70px height and nav-link line-height stay exact. */ box-shadow: inset 0 -1px 0 rgba(48, 48, 47, .08), var(--shadow-sm); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .left-side-menu-dark .navbar-custom { background-color: #fff; } } /* --- Auth pages (_LayoutLogin) -------------------------------------------- */ .auth-body { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; /* app.css reserves 60px for the absolute footer */ background-color: #f7f7f7; background-image: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(27, 110, 194, .12), transparent 70%), radial-gradient(ellipse 50% 45% at 90% 100%, rgba(23, 67, 132, .10), transparent 70%); background-attachment: fixed; } .auth-body .account-pages { flex: 1; display: flex; align-items: center; padding-block: 40px; } .auth-body .account-pages > .container { width: 100%; } .auth-body .card { border: 1px solid rgba(48, 48, 47, .06); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .auth-body .card > .card-body { padding: 32px; } @media (max-width: 575.98px) { .auth-body .card > .card-body { padding: 24px 20px; } } .auth-body .form-control { height: 44px; } .auth-body .btn-block { min-height: 44px; font-size: 15px; } .auth-body .btn-block + .btn-block { margin-top: 10px; } .auth-body .btn-light { background-color: #fff; border: 1px solid #a7a7a5; transition: border-color 200ms var(--ease-out-quart), background-color 200ms var(--ease-out-quart); } .auth-body .btn-light:hover, .auth-body .btn-light:focus { background-color: #f7f7f7; border-color: #174384; } .auth-body .footer-alt { position: static; padding-block: 16px 24px; } /* Login-specific pieces (Views/Account/Login.cshtml) */ .auth-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .auth-logo img { height: 44px; width: auto; } .auth-lang { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid #a7a7a5; border-radius: 999px; font-size: 12px; color: #30302f; transition: border-color 200ms var(--ease-out-quart); } .auth-lang:hover, .auth-lang:focus { border-color: #174384; color: #174384; text-decoration: none; } .auth-title { margin: 0 0 20px; font-size: 20px; } .auth-divider { height: 1px; margin-block: 20px; background-color: #dee2e6; } @media (prefers-reduced-motion: reduce) { .auth-body .btn-light, .auth-lang { transition: none; } }