@font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal/Tajawal-Regular.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-VariableFont_wdth_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-sans: 'Roboto', 'Tajawal', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-heading: 'Roboto'; --sidebar-width: 280px; /* Accessibility tokens (reuse Tailwind brand palette) */ --brand-red: #a61d24; --brand-dark: #192a48; --brand-light: #f1f5f9; } [dir="rtl"] { --font-sans: 'Tajawal', 'Roboto', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-heading: 'Tajawal'; } /* ----------------------------------------------------------------------- */ /* FONT AWESOME COMPATIBILITY (legacy `fa fa-*` markup) */ /* ----------------------------------------------------------------------- */ /* The project uses a mix of Font Awesome v4/v5-style markup (`fa fa-*`) and newer v6/v7-style markup (`fa-solid fa-*`). The bundled Font Awesome CSS does not apply the base icon font styles to `.fa` by default, causing icons to disappear anywhere only `fa` is used. */ .fa { --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free")); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: var(--fa-display, inline-block); font-family: var(--_fa-family); font-feature-settings: normal; font-style: normal; font-synthesis: none; font-variant: normal; font-weight: var(--fa-style, 900); line-height: 1; text-align: center; text-rendering: auto; width: var(--fa-width, 1.25em); } html { scroll-behavior: smooth; } /* ----------------------------------------------------------------------- */ /* ACCESSIBILITY TOOLBAR (TAILWIND FALLBACKS) */ /* ----------------------------------------------------------------------- */ /* The UI primarily relies on Tailwind utility classes. If Tailwind fails to load for any reason, the toolbar panel can become part of normal flow and cause horizontal overflow ("page width broken"). These rules intentionally use :where() to keep specificity at 0, so Tailwind utilities will override them whenever Tailwind is available. */ :where([data-a11y-toolbar]) { position: fixed; inset-inline-start: 2rem; bottom: 2rem; z-index: 95; } :where([data-a11y-toolbar-toggle]) { width: 3rem; height: 3rem; border-radius: 9999px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-dark); color: #fff; } :where(#a11y-toolbar-panel) { position: absolute; inset-inline-start: 0; bottom: calc(100% + 0.75rem); width: 16rem; max-width: calc(100vw - 2rem); box-sizing: border-box; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.10), 0 10px 20px -5px rgba(0, 0, 0, 0.04); overflow: hidden; } /* Ensure the toolbar cannot force horizontal scrollbars */ :where(html, body) { max-width: 100%; } /* ----------------------------------------------------------------------- */ /* ACCESSIBILITY GLOBALS (WCAG 2.2 AA) */ /* ----------------------------------------------------------------------- */ /* Skip link: first focusable element in */ .skip-link { position: absolute; top: 0.75rem; inset-inline-start: 0.75rem; transform: translateY(-200%); padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--brand-dark); color: #fff; font-weight: 700; letter-spacing: 0.02em; z-index: 10000; text-decoration: none; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); } /* Visible focus styles (do not rely on browser defaults; override outline-none) */ *:focus-visible { outline: 3px solid var(--brand-red) !important; outline-offset: 3px !important; } /* Avoid double outlines when focus is programmatically moved to main */ [tabindex='-1']:focus { outline: none !important; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body { animation: none !important; opacity: 1 !important; } } /* ----------------------------------------------------------------------- */ /* ACCESSIBILITY PREFERENCES (ENHANCEMENT ONLY) */ /* ----------------------------------------------------------------------- */ /* Text size scaling via the accessibility toolbar */ html { font-size: var(--a11y-font-size, 100%); } /* Visual filters (contrast / grayscale). Keep them optional and reversible. */ html.a11y-contrast :where(#page-wrapper, #backToTop, #quickAccessOverlay, #searchOverlay, #quickAccessToggle, #authLangSwitcher) { filter: contrast(1.2); } html.a11y-grayscale :where(#page-wrapper, #backToTop, #quickAccessOverlay, #searchOverlay, #quickAccessToggle, #authLangSwitcher) { filter: grayscale(1); } html.a11y-contrast.a11y-grayscale :where(#page-wrapper, #backToTop, #quickAccessOverlay, #searchOverlay, #quickAccessToggle, #authLangSwitcher) { filter: grayscale(1) contrast(1.2); } /* Highlight links (do not override focus styles) */ html.a11y-highlight-links #page-wrapper a { text-decoration-line: underline !important; text-decoration-thickness: 2px; text-underline-offset: 2px; } /* Force reduced motion (in addition to OS setting) */ html.a11y-reduce-motion { scroll-behavior: auto !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body { font-family: var(--font-sans), sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), sans-serif; } /* Premium hover effects */ .hover-lift { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .hover-lift:hover { transform: translateY(-2px); } /* Desktop Hover Logic */ @media (min-width: 1024px) { .group:hover>.dropdown-menu { display: block; /* Animation removed for reliability */ } /* Safe Bridge for Safe Hovering - Huge Catch Area */ .group>.dropdown-menu::before { content: ''; position: absolute; top: -30px; left: -10px; right: -10px; height: 30px; background: transparent; z-index: 10; cursor: default; } /* Submenu handling */ .sub-group:hover>.sub-menu, .sub-group:focus-within>.sub-menu { display: block; } } /* Keyboard/touch open for dropdowns (language/user menus) */ .group[data-a11y-dropdown="true"]:focus-within>.dropdown-menu { display: block; } /* Allow ESC to close dropdown while keeping focus on trigger */ .group[data-a11y-dropdown="true"][data-a11y-force-close="true"]>.dropdown-menu { display: none !important; } .search-open { overflow: hidden; } /* Mobile Accordion */ .mobile-dropdown { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; max-height: 0; background-color: rgba(0, 0, 0, 0.2); } .mobile-dropdown.active { max-height: 500px; } /* Quick Access Trigger replaced by Tailwind */ .no-scroll { overflow: hidden; } /* Global Smoothness */ body { opacity: 0; animation: pageFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Smooth Transition Defaults */ a, button, input, .transition-all { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; } /* ----------------------------------------------------------------------- */ /* CUSTOM DASHBOARD LAYOUT */ /* ----------------------------------------------------------------------- */ /* Main Layout Wrapper */ .layout-wrapper { display: flex; flex-direction: column; min-height: 100vh; transition: all 0.3s ease; } /* Desktop Sidebar Logic */ @media (min-width: 1024px) { .sidebar { width: var(--sidebar-width); } /* LTR Content Push */ html[dir="ltr"] .layout-wrapper { margin-left: var(--sidebar-width); } /* RTL Content Push */ html[dir="rtl"] .layout-wrapper { margin-right: var(--sidebar-width); margin-left: 0; } } /* Mobile Sidebar Logic */ @media (max-width: 1023px) { .sidebar { transform: translateX(-100%); /* Default Hidden LTR */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } html[dir="rtl"] .sidebar { transform: translateX(100%); /* Default Hidden RTL */ } /* Open State */ body.sidebar-open .sidebar { transform: translateX(0) !important; display: flex !important; /* Override hidden class if needed */ } /* Overlay */ body.sidebar-open::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 15; /* Behind sidebar (z-20) */ animation: fadeIn 0.3s forwards; } } /* Sidebar Scrollbar */ .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }