/* ========================================================================== Elthuraya Aviation — Custom Styles Brand tokens extracted from the legacy site (elthurayaaviation.com). ========================================================================== */ :root { /* Brand colors — gold/bronze palette */ --ela-primary: #dfa432; /* Gold (most used accent) */ --ela-primary-deep: #d09923; /* Gold deep */ --ela-secondary: #ca9127; /* Golden brown */ --ela-gold-dark: #a27015; /* Gradient start */ --ela-gold-light: #dda130; /* Gradient end */ /* Neutrals */ --ela-dark: #222323; /* Primary dark */ --ela-near-black: #131313; /* Near black (headings, footers) */ --ela-text: #222323; --ela-muted: #757574; /* Muted text */ --ela-border: #c4c4c4; /* Borders / dividers */ --ela-light-bg: #f5f5f5; /* Light section bg */ --ela-light-bg-2: #f0f0f0; /* Alt light bg */ --ela-white: #ffffff; /* Overlays */ --ela-overlay-30: rgba(0, 0, 0, 0.3); --ela-overlay-50: rgba(0, 0, 0, 0.5); --ela-overlay-70: rgba(0, 0, 0, 0.7); /* Signature gradient */ --ela-gradient-gold: linear-gradient(to right, #a27015, #dda130); /* Typography — family */ --ela-font-primary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ela-font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; /* Typography — sizes (from legacy site) */ --ela-fs-base: 14px; --ela-fs-sm: 13px; --ela-fs-md: 15px; --ela-fs-lg: 16px; --ela-fs-xl: 20px; --ela-fs-2xl: 24px; --ela-fs-3xl: 30px; --ela-fs-4xl: 40px; --ela-fs-5xl: 50px; --ela-fs-6xl: 55px; --ela-fs-7xl: 65px; /* Line heights */ --ela-lh-tight: 1.2; --ela-lh-snug: 1.3; --ela-lh-normal: 1.5; --ela-lh-relaxed: 1.7; /* Font weights */ --ela-fw-light: 300; --ela-fw-regular: 400; --ela-fw-medium: 500; --ela-fw-semibold: 600; --ela-fw-bold: 700; --ela-fw-black: 900; } /* Base typography */ html { font-size: var(--ela-fs-base); } body, button, input, select, textarea { font-family: var(--ela-font-primary); font-size: var(--ela-fs-md); line-height: var(--ela-lh-relaxed); color: var(--ela-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--ela-font-primary); font-weight: var(--ela-fw-bold); line-height: var(--ela-lh-snug); color: var(--ela-near-black); } h1 { font-size: var(--ela-fs-5xl); } h2 { font-size: var(--ela-fs-4xl); } h3 { font-size: var(--ela-fs-6xl); } h4 { font-size: var(--ela-fs-xl); } h5 { font-size: var(--ela-fs-lg); } h6 { font-size: var(--ela-fs-md); } a { color: var(--ela-primary); transition: color 0.2s ease; } a:hover, a:focus { color: var(--ela-secondary); } /* ========================================================================== ARABIC / RTL — Cairo font enforcement - Applies whenever OR . - Forces Cairo across body, headings, form controls, Elementor widgets, and theme widgets without touching Font Awesome icon fonts. ========================================================================== */ [dir="rtl"], [dir="rtl"] body, :lang(ar), :lang(ar) body { font-family: var(--ela-font-arabic); } /* Override Elementor's per-element font-family rules. Elementor emits typography from Group_Control_Typography with high specificity, so !important is needed to win the cascade for the Arabic locale. */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label, [dir="rtl"] blockquote, [dir="rtl"] figcaption, [dir="rtl"] strong, [dir="rtl"] em, [dir="rtl"] [class*="ela-"], [dir="rtl"] .elementor-widget-container, [dir="rtl"] .elementor-widget-heading .elementor-heading-title, [dir="rtl"] .elementor-widget-text-editor, [dir="rtl"] .elementor-button, :lang(ar) body, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) h5, :lang(ar) h6, :lang(ar) p, :lang(ar) span, :lang(ar) a, :lang(ar) li, :lang(ar) button, :lang(ar) input, :lang(ar) textarea, :lang(ar) select, :lang(ar) label, :lang(ar) blockquote, :lang(ar) figcaption, :lang(ar) strong, :lang(ar) em, :lang(ar) [class*="ela-"], :lang(ar) .elementor-widget-container, :lang(ar) .elementor-widget-heading .elementor-heading-title, :lang(ar) .elementor-widget-text-editor, :lang(ar) .elementor-button { font-family: var(--ela-font-arabic) !important; } /* Restore the icon fonts — Font Awesome 6 Free (solid/regular) and Brands. Without this, the !important rules above would obliterate the FA glyphs. */ [dir="rtl"] i.fa, [dir="rtl"] i.fas, [dir="rtl"] i.far, [dir="rtl"] i.fal, [dir="rtl"] i.fa-solid, [dir="rtl"] i.fa-regular, [dir="rtl"] i.fa-light, [dir="rtl"] i.fa-thin, [dir="rtl"] i[class*=" fa-"], [dir="rtl"] i[class^="fa-"], :lang(ar) i.fa, :lang(ar) i.fas, :lang(ar) i.far, :lang(ar) i.fal, :lang(ar) i.fa-solid, :lang(ar) i.fa-regular, :lang(ar) i.fa-light, :lang(ar) i.fa-thin, :lang(ar) i[class*=" fa-"], :lang(ar) i[class^="fa-"] { font-family: 'Font Awesome 6 Free' !important; } [dir="rtl"] i.fab, [dir="rtl"] i.fa-brands, :lang(ar) i.fab, :lang(ar) i.fa-brands { font-family: 'Font Awesome 6 Brands' !important; } /* Cairo lacks italic — keep emphasis legible by faking it with weight */ [dir="rtl"] em, [dir="rtl"] i:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands), :lang(ar) em, :lang(ar) i:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) { font-style: normal; font-weight: 600; } /* ========================================================================== PAGE WIDTH — prevent horizontal overflow from rogue absolute/decorative elements. `clip` is preferred over `hidden` because it doesn't break sticky positioning. Falls back to `hidden` for older browsers automatically (declaration order). ========================================================================== */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } /* Common Elementor wrapper safety — sections sometimes inherit a width calculation that overshoots the viewport in RTL when an inner widget uses physical positioning. */ .elementor-section, .elementor-section-wrap, .elementor, .elementor-element { max-width: 100%; } /* ========================================================================== HELLO ELEMENTOR RESET OVERRIDE -------------------------------------------------------------------------- The parent theme's reset.css globally styles every