/* ========================================================================= panel.monaqasat.net — Main Stylesheet Font: Monaqasat (Arabic + Latin) Colours: from brand color.txt ========================================================================= */ /* ── Font Face ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'Monaqasat'; src: url('../fonts/monaqasat-font.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ── CSS Custom Properties (Brand Palette) ─────────────────────────────── */ :root { --primary: #19597a; /* Primary – dark navy-blue */ --secondary: #f05d22; /* Secondary – vibrant orange */ --dark-blue: #23849f; /* Accent – medium teal-blue */ --light-blue: #6ccad0; /* Accent – light teal */ --dark-orange: #f68a1f; /* Accent – warm orange */ --light-orange: #ffcd05; /* Accent – golden yellow */ --grey: #989898; /* Neutral grey */ --white: #ffffff; --off-white: #f4f7f9; --border: #dce3ea; --shadow: rgba(25, 89, 122, 0.12); --shadow-hover: rgba(25, 89, 122, 0.22); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --transition: 0.22s ease; } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Monaqasat', 'Segoe UI', Tahoma, Arial, sans-serif; background-color: var(--off-white); color: #1a2d3a; line-height: 1.6; min-height: 100vh; } /* RTL support — toggled by */ [dir="rtl"] body { text-align: right; } [dir="ltr"] body { text-align: left; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button, input, select, textarea { font-family: inherit; } /* ── Utility ────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= LOGIN PAGE ========================================================================= */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary) 0%, var(--dark-blue) 100%); padding: 1.5rem; position: relative; overflow: hidden; } /* Decorative circles */ .login-page::before, .login-page::after { content: ''; position: absolute; border-radius: 50%; opacity: 0.08; background: var(--white); } .login-page::before { width: 500px; height: 500px; top: -180px; right: -120px; } .login-page::after { width: 320px; height: 320px; bottom: -100px; left: -80px; } .login-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 20px 60px var(--shadow); width: 100%; max-width: 440px; padding: 2.75rem 2.5rem 2.5rem; position: relative; z-index: 1; animation: slideUp 0.4s ease both; } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Logo */ .login-logo { text-align: center; margin-bottom: 1.5rem; } .login-logo img { height: 80px; margin-inline: auto; } /* Language toggle */ .login-lang { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; } .lang-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--off-white); border: 1px solid var(--border); border-radius: 20px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--dark-blue); cursor: pointer; transition: background var(--transition), color var(--transition); text-decoration: none; } .lang-btn:hover { background: var(--dark-blue); color: var(--white); border-color: var(--dark-blue); } /* Title */ .login-title { text-align: center; margin-bottom: 1.75rem; } .login-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; } .login-title p { font-size: 0.9rem; color: var(--grey); } /* Form */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--primary); margin-bottom: 0.45rem; } .form-control { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; color: #1a2d3a; background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(35, 132, 159, 0.15); } .form-control::placeholder { color: #b0bec5; } /* Password wrapper with show/hide toggle */ .input-wrapper { position: relative; } .input-wrapper .form-control { padding-inline-end: 2.75rem; } .input-wrapper .toggle-pw { position: absolute; inset-block-start: 50%; inset-inline-end: 0.85rem; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--grey); font-size: 1rem; padding: 0; line-height: 1; transition: color var(--transition); } .input-wrapper .toggle-pw:hover { color: var(--dark-blue); } /* Alert / Error */ .alert { border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.9rem; margin-bottom: 1.25rem; display: none; } .alert.show { display: block; } .alert-danger { background: #fff0f0; border: 1px solid #f5c6cb; color: #842029; } .alert-success { background: #f0fff4; border: 1px solid #b7e4c7; color: #155724; } /* Submit button */ .btn-login { width: 100%; padding: 0.85rem; background: var(--secondary); color: var(--white); border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 4px 14px rgba(240, 93, 34, 0.35); } .btn-login:hover { background: #d44d1a; box-shadow: 0 6px 20px rgba(240, 93, 34, 0.45); transform: translateY(-1px); } .btn-login:active { transform: translateY(0); } .btn-login:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } /* Button wrapper + spinner */ .btn-login-wrap { position: relative; } .btn-login-wrap .btn-login { width: 100%; position: relative; z-index: 1; } .login-spinner { display: none; position: absolute; inset-inline-end: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.45); border-top-color: var(--white); border-radius: 50%; animation: spin 0.7s linear infinite; pointer-events: none; z-index: 2; } .btn-login-wrap.loading .login-spinner { display: block; } .btn-login-wrap.loading .btn-login { opacity: 0.8; cursor: not-allowed; } /* Captcha */ .captcha-row { display: flex; align-items: stretch; gap: 0.6rem; margin-bottom: 0.6rem; } .captcha-img { flex: 1; height: 54px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); display: block; object-fit: cover; background: var(--off-white); user-select: none; -webkit-user-select: none; } .captcha-refresh { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; background: var(--off-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--dark-blue); font-size: 1rem; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .captcha-refresh:hover { background: var(--dark-blue); color: var(--white); border-color: var(--dark-blue); } .captcha-input { letter-spacing: 0.25em; text-transform: uppercase; direction: ltr; text-align: center; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================= SITE HEADER ========================================================================= */ .site-header { background: var(--primary); color: var(--white); height: 64px; display: flex; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.18); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header-logo { display: flex; align-items: center; gap: 0.75rem; } .header-logo img { height: 38px; filter: brightness(0) invert(1); } .header-logo .site-name { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.3px; color: var(--white); } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .staff-badge { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); border-radius: 20px; padding: 0.3rem 0.9rem; font-size: 0.88rem; font-weight: 600; } .staff-badge i { font-size: 0.95rem; opacity: 0.8; } .header-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 0.3rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--white); cursor: pointer; transition: background var(--transition); text-decoration: none; } .header-btn:hover { background: rgba(255,255,255,0.22); color: var(--white); } .header-btn.logout { border-color: rgba(240,93,34,0.5); } .header-btn.logout:hover { background: rgba(240,93,34,0.3); } /* Mobile: hide text labels */ @media (max-width: 480px) { .header-btn .btn-label { display: none; } .staff-badge .staff-name-text { display: none; } } /* ========================================================================= MAIN CONTENT WRAPPER ========================================================================= */ .main-content { flex: 1; padding: 2rem 0 3rem; min-height: calc(100vh - 64px - 60px); } /* ========================================================================= DASHBOARD LAYOUT ========================================================================= */ .dashboard-welcome { margin-bottom: 1.75rem; } .dashboard-welcome h2 { font-size: 1.35rem; font-weight: 700; color: var(--primary); } .dashboard-welcome p { font-size: 0.9rem; color: var(--grey); margin-top: 0.2rem; } /* ── Button Grid ─────────────────────────────────────────────────────────── */ .dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } /* Tablet */ @media (max-width: 1024px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } } /* Phablet */ @media (max-width: 768px) { .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } } /* ── Dashboard Button Tile ───────────────────────────────────────────────── */ .dash-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; aspect-ratio: 1 / 1; border-radius: var(--radius-md); color: var(--white); cursor: pointer; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); box-shadow: 0 4px 16px var(--shadow); padding: 1.25rem 0.75rem; position: relative; overflow: hidden; } /* Subtle inner highlight */ .dash-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%); border-radius: inherit; pointer-events: none; } .dash-btn:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 10px 28px var(--shadow-hover); filter: brightness(1.07); color: var(--white); } .dash-btn:active { transform: translateY(-1px) scale(1.005); } .dash-btn-icon { font-size: 2rem; line-height: 1; opacity: 0.95; } .dash-btn-title { font-size: 0.88rem; font-weight: 700; text-align: center; line-height: 1.3; letter-spacing: 0.2px; } /* Mobile adjustments */ @media (max-width: 480px) { .dash-btn-icon { font-size: 1.6rem; } .dash-btn-title { font-size: 0.8rem; } } /* ── Colour Variants ─────────────────────────────────────────────────────── */ .dash-primary { background: linear-gradient(140deg, var(--primary) 0%, #1e6d94 100%); } .dash-blue { background: linear-gradient(140deg, var(--dark-blue) 0%, #1a9dbe 100%); } .dash-teal { background: linear-gradient(140deg, #4aa8af 0%, var(--light-blue) 100%); } .dash-orange { background: linear-gradient(140deg, var(--secondary) 0%, var(--dark-orange) 100%); } .dash-dark-orange { background: linear-gradient(140deg, var(--dark-orange)0%, #e07600 100%); } .dash-gold { background: linear-gradient(140deg, #c9a100 0%, var(--light-orange) 100%); } .dash-grey { background: linear-gradient(140deg, #6b7d8a 0%, var(--grey) 100%); } /* ========================================================================= SITE FOOTER ========================================================================= */ .site-footer { background: var(--primary); color: rgba(255,255,255,0.65); text-align: center; padding: 1rem; font-size: 0.8rem; height: 60px; display: flex; align-items: center; justify-content: center; } .site-footer a { color: rgba(255,255,255,0.85); } .site-footer a:hover { color: var(--white); } /* ========================================================================= PAGE WRAPPER (login has its own layout, other pages use this) ========================================================================= */ .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; } /* ========================================================================= ERROR / UTILITY PAGES ========================================================================= */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .error-page .error-code { font-size: 5rem; font-weight: 900; color: var(--primary); line-height: 1; } .error-page .error-msg { font-size: 1.2rem; color: var(--grey); margin: 1rem 0 2rem; } .btn-back { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary); color: var(--white); padding: 0.7rem 1.75rem; border-radius: 30px; font-weight: 600; transition: background var(--transition); } .btn-back:hover { background: var(--dark-blue); color: var(--white); } /* ========================================================================= MESSAGE / ERROR PAGE (error.aspx — standalone, no master page) ========================================================================= */ .msg-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary) 0%, var(--dark-blue) 100%); padding: 1.5rem; position: relative; overflow: hidden; } .msg-page::before, .msg-page::after { content: ''; position: absolute; border-radius: 50%; opacity: 0.07; background: var(--white); pointer-events: none; } .msg-page::before { width: 520px; height: 520px; top: -200px; right: -130px; } .msg-page::after { width: 340px; height: 340px; bottom: -110px; left: -90px; } .msg-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 24px 72px rgba(0, 0, 0, .22); width: 100%; max-width: 440px; padding: 2.5rem 2rem 2.25rem; text-align: center; position: relative; z-index: 1; animation: slideUp .4s ease both; } .msg-logo { margin-bottom: 1.5rem; } .msg-logo img { height: 60px; margin-inline: auto; } /* Icon circle */ .msg-icon { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-size: 2.2rem; color: var(--white); animation: msgIconPop .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; } @keyframes msgIconPop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .msg-icon-404 { background: linear-gradient(135deg, var(--primary), var(--dark-blue)); } .msg-icon-403 { background: linear-gradient(135deg, #b71c1c, #e53935); } .msg-icon-500 { background: linear-gradient(135deg, #37474f, #546e7a); } .msg-icon-default { background: linear-gradient(135deg, var(--dark-orange), var(--secondary)); } /* Error code watermark */ .msg-code-num { font-size: 5.5rem; font-weight: 900; line-height: 1; letter-spacing: -4px; color: var(--primary); opacity: .08; margin-bottom: -.5rem; user-select: none; pointer-events: none; } .msg-heading { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin: .6rem 0 .5rem; } .msg-desc { font-size: .92rem; color: var(--grey); line-height: 1.6; margin-bottom: 1.75rem; } .msg-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--secondary); color: var(--white); border-radius: var(--radius-sm); padding: .7rem 1.75rem; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 4px 14px rgba(240, 93, 34, .35); transition: background var(--transition), transform var(--transition); } .msg-btn:hover { background: #d44d1a; transform: translateY(-1px); } .msg-btn:active { transform: translateY(0); } /* ========================================================================= AWESOME MESSAGE WIDGET (global, lives in Site.Master) Usage: showAwesomeMessage({ ar:'...', en:'...', icon:'fa-solid fa-star' }) showAwesomeMessage({ ar:'...', en:'...', subtitleAr:'...', subtitleEn:'...' }) ========================================================================= */ .aw-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9000; align-items: center; justify-content: center; padding: 1rem; } .aw-overlay.open { display: flex; } .aw-dialog { background: var(--white); border-radius: 20px; width: 100%; max-width: 380px; padding: 2.25rem 2rem 2rem; text-align: center; box-shadow: 0 24px 72px rgba(0, 0, 0, .28); position: relative; animation: awIn .3s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes awIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } } /* corner close × */ .aw-x { position: absolute; top: .8rem; inset-inline-end: .9rem; background: none; border: none; font-size: 1.1rem; color: var(--grey); cursor: pointer; line-height: 1; padding: .25rem .4rem; border-radius: 4px; transition: color var(--transition), background var(--transition); } .aw-x:hover { color: var(--primary); background: var(--off-white); } /* icon circle */ .aw-icon-wrap { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--dark-blue) 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.4rem; font-size: 2.1rem; color: var(--white); animation: awIconPop .45s cubic-bezier(.34, 1.56, .64, 1) .1s both; } @keyframes awIconPop { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0deg); } } .aw-message { font-size: 1.45rem; font-weight: 700; color: var(--primary); margin-bottom: .4rem; line-height: 1.3; } .aw-subtitle { font-size: .9rem; color: var(--grey); margin-bottom: 1.5rem; line-height: 1.5; } .aw-subtitle:empty { margin-bottom: 1.5rem; } .aw-ok { background: var(--secondary); color: var(--white); border: none; border-radius: var(--radius-sm); padding: .6rem 2.25rem; font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(240, 93, 34, .35); transition: background var(--transition), transform var(--transition); } .aw-ok:hover { background: #d44d1a; transform: translateY(-1px); } .aw-ok:active { transform: translateY(0); }