/* ========================================================================== utility-critical.css — Above-fold critical styles Loaded synchronously in . Keep this file small (~12 KB). ========================================================================== */ /* 1. VARIABLES */ :root { /* Colors */ --color-primary: #076FC6; --color-secondary: #FF692E; --color-tertiary: #ED8911; --color-background-light: #FEF6EE; --color-background-primary-light: rgba(7, 111, 198, 0.10); --color-text-base: #414651; --color-text-dark: #181D27; --color-text-medium: #414651; --color-text-medium-light: #414651B2; --color-muted: rgba(67, 74, 84, 0.50); --color-text-light: #757A85; --color-border-secondary: #D5D7DA; --color-white: #FFFFFF; --color-green-light: #4CA30D; --color-gray-light: #E0E0E0; --color-text-extra-dark: #434A54; --Colors-Border-border-secondary: #E9EAEB; --Component-colors-Alpha-alpha-white-90: rgba(255, 255, 255, 0.90); /* Typography */ --font-family-base: 'Inter', sans-serif; --font-family-arabic: 'Cairo', 'Amiri', 'Noto Sans Arabic', sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Font Sizes (Mobile First) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-xxl: 2rem; --font-size-xxxl: 3rem; --font-size-4xl: 3.5rem; --font-size-5xl: 4rem; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 4rem; --spacing-6xl: 5rem; --spacing-9xl: 6rem; --spacing-11xl: 10rem; /* Borders */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-xl: 10px; --border-radius-lg: 20px; --border-radius-hero: 12rem; /* Breakpoints */ --breakpoint-md: 768px; --breakpoint-lg: 1024px; /* Input Variables */ --Colors-Border-border-primary: #D5D7DA; --Colors-Background-bg-primary: #FFF; --Colors-Effects-Shadows-shadow-xs: rgba(10, 13, 18, 0.05); --radius-md: 8px; --input-padding-y: 8px; --input-padding-x: 12px; --input-border-width: 1px; --input-font-size: var(--font-size-base); --input-line-height: 1.5; --input-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Input States */ --input-border-color: var(--Colors-Border-border-primary); --input-border-color-focus: var(--color-primary); --input-border-color-error: #DC2626; --input-border-color-success: #16A34A; --input-bg-color: var(--Colors-Background-bg-primary); --input-bg-color-disabled: #F9FAFB; --input-text-color: var(--color-text-dark); --input-text-color-disabled: var(--color-text-light); --input-placeholder-color: var(--color-text-light); } /* 2. RESET & BASE */ .mobile-dropdown-list { display: none; } .header__nav-list { display: flex; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-base); background-color: var(--color-white); } html[dir="rtl"] { direction: rtl; } .rtl { direction: rtl; font-family: var(--font-family-arabic); } :lang(ar) { font-family: var(--font-family-arabic), sans-serif; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* 3. CONTAINER */ .container { width: 100%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); margin-left: auto; margin-right: auto; } @media (min-width: 1200px) { .container { max-width: 1400px; } } /* 4. FLEXBOX */ .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .flex-row { flex-direction: row; } @media (max-width: 768px) { .flex-row { flex-direction: column; } } .flex-column { flex-direction: column; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between !important; } .align-center { align-items: center; } .align-self-stretch { align-self: stretch; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .flex-grow { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .d-center { display: flex; align-items: center; justify-content: center; } .d-center--no-justify { display: flex; align-items: center; } /* 5. GAP */ .gap-0 { gap: 0; } .gap-xs { gap: var(--spacing-xs); } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } .gap-xl { gap: var(--spacing-xl); } .gap-xxl { gap: var(--spacing-xxl); } /* 6. SPACING (margin & padding) */ .mb-0 { margin-bottom: 0 !important; } .mt-xs { margin-top: var(--spacing-xs) !important; } .mt-sm { margin-top: var(--spacing-sm) !important; } .mb-sm { margin-bottom: var(--spacing-sm) !important; } .mr-sm { margin-right: var(--spacing-sm) !important; } .mt-md { margin-top: var(--spacing-md) !important; } .mb-md { margin-bottom: var(--spacing-md) !important; } .my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; } .mt-lg { margin-top: var(--spacing-lg) !important; } .mb-lg { margin-bottom: var(--spacing-lg) !important; } .m-xl { margin: var(--spacing-xl) !important; } .mb-xl { margin-bottom: var(--spacing-xl) !important; } .my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; } .my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; } .mt-xxl { margin-top: var(--spacing-xxl) !important; } .mb-xxl { margin-bottom: var(--spacing-xxl) !important; } .mt-9xl { margin-top: var(--spacing-9xl) !important; } .my-9xl { margin-top: var(--spacing-9xl) !important; margin-bottom: var(--spacing-9xl) !important; } .p-0 { padding: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-sm { padding: var(--spacing-sm) !important; } .py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; } .py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; } .px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; } .p-lg { padding: var(--spacing-lg) !important; } .pb-lg { padding-bottom: var(--spacing-lg) !important; } .px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; } .pt-xl { padding-top: var(--spacing-xl) !important; } .pr-xl { padding-right: var(--spacing-xl) !important; } .py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; } .px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; } .pl-md { padding-left: var(--spacing-md) !important; } /* 7. DISPLAY */ .d-none { display: none; } .d-inline-block { display: inline-block; } @media (max-width: 575px) { .d-xs-none { display: none !important; } } @media (min-width: 768px) { .d-md-inline { display: inline !important; } } @media (min-width: 1024px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } } @media (max-width: 767px) { .d-mobile-none { display: none !important; } } @media (min-width: 768px) { .d-desktop-none { display: none !important; } } /* 8. TEXT ALIGNMENT & COLORS */ .text-left { text-align: left; } .text-center { text-align: center !important; } .text-right { text-align: right !important; font-family: var(--font-family-arabic); } [lang="ar"], html[dir="rtl"] { font-family: var(--font-family-arabic); } .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-tertiary { color: var(--color-tertiary) !important; } .stroke-primary { stroke: var(--color-primary); } .text-dark { color: var(--color-text-dark); } .text-extra-dark { color: var(--color-text-extra-dark); } .text-medium { color: var(--color-text-medium); } .text-medium-light { color: var(--color-text-medium-light); } .text-white { color: var(--color-white) !important; } .text-muted { color: var(--color-muted); } .text-green-light { color: var(--color-green-light); } /* 9. BACKGROUNDS & BORDERS */ .bg-primary { background-color: var(--color-primary) !important; } .bg-primary-light { background-color: var(--color-background-primary-light) !important; } .border-primary { border: 1px solid var(--color-primary) !important; } .border-gray { border: 1px solid #D5D7DA !important; } .border-tertiary:hover { border-color: var(--color-tertiary) !important; } .bg-secondary { background-color: var(--color-secondary); } .bg-white { background-color: var(--color-white); } .bg-light { background-color: var(--color-background-light); } /* 10. FONT WEIGHT & SIZE */ .font-weight-bold { font-weight: var(--font-weight-bold); } .font-weight-semibold { font-weight: var(--font-weight-semibold); } .fw-regular { font-weight: var(--font-weight-regular); } .fw-medium { font-weight: var(--font-weight-medium); } .fw-semibold { font-weight: var(--font-weight-semibold); } .fw-bold { font-weight: var(--font-weight-bold); } .font-italic { font-style: italic; } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-md { font-size: var(--font-size-md); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-xxl { font-size: var(--font-size-xxl); } .fs-xs { font-size: var(--font-size-xs) !important; } .fs-base { font-size: var(--font-size-base) !important; } .fs-md { font-size: var(--font-size-md) !important; } .fs-lg { font-size: var(--font-size-lg) !important; } .fs-xl { font-size: var(--font-size-xl) !important; } .fs-xxl { font-size: var(--font-size-xxl) !important; } /* 11. BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; text-decoration: none; cursor: pointer; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); transition: all 0.2s ease-in-out; white-space: nowrap; user-select: none; box-shadow: 0px 1px 2px rgba(10, 12.67, 18, 0.05); box-sizing: border-box; vertical-align: middle; line-height: 1.5; background-color: var(--color-white); color: var(--color-text-medium); } button.btn { margin: 0; font: inherit; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a.btn { text-decoration: none; } button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); font-weight: var(--font-weight-semibold); text-align: center; cursor: pointer; border-radius: var(--border-radius-md); transition: all 0.2s ease-in-out; white-space: nowrap; user-select: none; box-shadow: 0px 1px 2px rgba(10, 12.67, 18, 0.05); } .btn:hover { background-color: #f9fafb; border-color: #c8cacc; text-decoration: none; } .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(7, 111, 198, 0.3); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .btn--primary { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .btn--primary:hover { background-color: #0761aa; border-color: #0761aa; color: var(--color-white); } a.btn--secondary, button.btn--secondary { background-color: var(--color-secondary); color: var(--color-white); border-color: var(--color-secondary); } a.btn--secondary:hover, button.btn--secondary:hover { background-color: #e6561a; border-color: #e6561a; color: var(--color-white); } .btn--outline-primary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline-primary:hover { background-color: var(--color-primary); color: var(--color-white); } .btn--outline-secondary { background-color: transparent; color: var(--color-secondary); border-color: var(--color-secondary); } .btn--outline-secondary:hover { background-color: var(--color-secondary); color: var(--color-white); } .btn--outline-white { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .btn--outline-white:hover { background-color: var(--color-white); color: var(--color-primary); } .btn--white { background-color: var(--color-white); color: inherit; border-color: var(--color-white); } .btn--white:hover { background-color: #f8f9fa; border-color: #f8f9fa; color: var(--color-primary); } .btn--color-primary { color: var(--color-primary); } .btn--color-secondary { color: var(--color-secondary); } .btn--white.btn--color-secondary:hover { color: var(--color-secondary); } .btn--white.btn--color-primary:hover { color: var(--color-primary); } .btn--xs { padding: 6px 12px; font-size: var(--font-size-sm); gap: 6px; } .btn--sm { padding: 10px 16px; font-size: var(--font-size-xs); gap: 4px; } .btn:disabled, .btn--disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn--grey { background-color: #F1F1F1; color: #979797; border-color: #F1F1F1; } .btn--grey:hover { background-color: #f0f0f0; } .btn--full { width: 100%; justify-content: center; } /* 12. ROUNDED */ .rounded-sm { border-radius: var(--border-radius-sm); } .rounded-md { border-radius: var(--border-radius-md); } .rounded-xl { border-radius: var(--border-radius-xl); } .rounded-lg { border-radius: var(--border-radius-lg); } /* 13. POSITION */ .position-relative { position: relative; } /* 14. BASIC DIMENSIONS */ .w-full { width: 100%; } .w-100 { width: 100%; } .h-full { height: 100%; } .w-fit { width: fit-content; } /* 15. LIST GRIDS */ .list-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .list-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .list-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .list-grid-2, .list-grid-3, .list-grid-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .list-grid-3, .list-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* 16. LIST STYLES */ .list-unstyled { list-style: none; } .list-styled { list-style: disc; padding-left: var(--spacing-lg); margin: 0; } .list-spacing-sm>li { margin-bottom: var(--spacing-sm); } .list-spacing-sm>li:last-child { margin-bottom: 0; } /* 17. LINE HEIGHT */ .lh-1 { line-height: 1; } .lh-sm { line-height: 1.25; } /* 18. OVERFLOW & LINE CLAMP */ .overflow-hidden { overflow: hidden !important; } .line-limit-1 { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; } .line-limit-2 { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .line-limit-3 { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } /* 19. SECTION BORDER */ .section-border { width: 100%; padding: 20px; background: var(--Component-colors-Components-Buttons-Secondary-button-secondary-bg, white); box-shadow: 0px 1px 2px rgba(10, 12.67, 18, 0.05); border-radius: 8px; outline: 1px var(--Component-colors-Components-Buttons-Secondary-button-secondary-border, #D5D7DA) solid; outline-offset: -1px; flex-direction: column; justify-content: center; gap: 20px; } .card-border { border: 1px solid #E9EAEB; border-radius: 8px; }