/* Theme Name: Care House Child Theme URI: https://carehouse.com Description: Hello Elementor Child Theme for Care House.com Author: Care House Engineering Author URI: https://carehouse.com Template: hello-elementor Version: 1.6.4 License: GNU General Public License v2 or later Text Domain: carehouse-child */ /* ════════════════════════════════════════════════════════════ CARE HOUSE — design tokens (measured from reference, re/) Light theme default + dark mode via [data-theme="dark"]. All colors flow through CSS vars so dark mode is one switch. ════════════════════════════════════════════════════════════ */ :root { /* Brand palette measured directly from the official logo.png pixels: indigo #230F57 (heart mark "h" + HOSPITAL) + teal #49D4AB ("c" + CARE/HOUSE). */ --c-primary: #230F57; /* brand indigo — buttons, structure, headings */ --c-primary-alt: #362170; /* lighter indigo — hover */ --c-green: #49D4AB; /* brand teal — accent, secondary actions */ --c-green-lt: #6FE0C0; /* lighter teal */ --c-text: #454152; /* neutral, faintly indigo-tinted body text */ --c-heading: #230F57; /* headings in brand indigo */ --c-bg: #FFFFFF; --c-bg-soft: #F1EFF8; /* light indigo band */ --c-bg-soft2: #EAF9F3; /* light teal band */ --c-border: #E4E1EE; /* faint indigo-tinted border */ --c-card: #FFFFFF; --shadow: 0 2px 16px rgba(35,15,87,.08); } [data-theme="dark"] { /* Dark mode flips the roles: teal becomes primary (indigo is too dark to read on a dark canvas), lavender-lifted indigo becomes the accent. */ --c-primary: #5FDCB8; /* teal, pops on dark */ --c-primary-alt: #7FE6C8; --c-green: #8E7FD8; /* lifted lavender-indigo accent */ --c-green-lt: #A99CE6; --c-text: #C9C6D6; --c-heading: #ECEAF6; --c-bg: #14102A; /* deep indigo-black (brand-tinted, not neutral) */ --c-bg-soft: #1E1842; --c-bg-soft2: #16302A; --c-border: #2E2856; --c-card: #1B1638; --shadow: 0 2px 16px rgba(0,0,0,.45); } html { scroll-behavior: auto; } /* Lenis owns smoothness */ body { background: var(--c-bg); color: var(--c-text); transition: background-color .35s ease, color .35s ease; } h1,h2,h3,h4,h5,h6 { color: var(--c-heading); } a { color: var(--c-primary); } /* Elementor surfaces follow the theme (client edits content freely; dark mode remaps the canvas without touching their settings) */ [data-theme="dark"] .elementor-section, [data-theme="dark"] .elementor-widget-container { background-color: transparent; } [data-theme="dark"] .chs-band-soft { background-color: var(--c-bg-soft) !important; } [data-theme="dark"] .chs-band-soft2 { background-color: var(--c-bg-soft2) !important; } .chs-band-soft { background-color: var(--c-bg-soft); } .chs-band-soft2 { background-color: var(--c-bg-soft2); } .chs-card { background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--shadow); border-radius: 10px; } /* ── Dark-mode toggle button (fixed, unobtrusive) ── */ .chs-theme-toggle { position: fixed; bottom: 1.25rem; inset-inline-start: 1.25rem; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-heading); cursor: pointer; font-size: 1.15rem; line-height: 1; box-shadow: var(--shadow); transition: transform .2s ease, background-color .35s ease; } .chs-theme-toggle:hover { transform: scale(1.08); } /* ── Gentle reveal (JS adds .chs-reveal; visible state .is-in) ── */ .chs-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; } .chs-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .chs-reveal { opacity: 1; transform: none; transition: none; } } /* a11y focus */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; } /* ── Developer credit (PHP-injected, wp_footer) ── */ .chs-dev-credit { background: var(--c-bg-soft); border-top: 1px solid var(--c-border); padding: .6rem 1.5rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .72rem; letter-spacing: .03em; } .chs-dev-credit__label { color: var(--c-text); } .chs-dev-credit__name { color: var(--c-primary); text-decoration: none; font-weight: 600; } .chs-dev-credit__name:hover { color: var(--c-primary-alt); } /* ── Header (Hello Elementor default, brand-styled) ── */ .site-header { background: var(--c-bg); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; transition: background-color .35s ease; } .site-header .site-title, .site-header .site-title a { color: var(--c-primary) !important; font-weight: 800; } .site-header nav a { color: var(--c-heading); font-weight: 600; padding: .4rem .7rem; } .site-header nav a:hover { color: var(--c-primary); } .site-header nav .current-menu-item > a { color: var(--c-primary); } /* ── Buttons: brand + inline on hero ── */ .elementor-button { background: var(--c-primary); border-radius: 8px; } .elementor-button:hover { background: var(--c-primary-alt); } .chs-hero .elementor-widget-button { display: inline-block; margin-inline-end: .6rem; } /* ── Footer ── */ .site-footer { background: var(--c-bg-soft); color: var(--c-text); border-top: 1px solid var(--c-border); } /* ── Section rhythm ── */ .elementor-section.elementor-top-section { padding-block: clamp(2rem,5vw,3.5rem); } .chs-hero { padding-block: clamp(3rem,8vw,6rem); min-height: 480px; } .chs-card { transition: transform .25s ease, box-shadow .25s ease; } .chs-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,60,120,.12); } /* ── Hero band (gradient until client adds a hero image) ── */ .chs-hero-band { background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-bg) 55%, var(--c-bg-soft2) 100%); } .chs-hero .elementor-widget-heading h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.25; } .chs-hero-band .elementor-widget-button { display: inline-block; } /* ── RTL menu order: first item nearest the logo (right) ── */ [dir="rtl"] .site-header nav > ul, [dir="rtl"] .elementor-nav-menu { flex-direction: row; } /* ── Inner-section card rows: even gap ── */ .elementor-inner-section .elementor-column { padding-inline: 10px; } /* ── RTL nav order (real Hello markup: nav.site-navigation > ul.menu) ── */ [dir="rtl"] .site-navigation ul.menu, [dir="rtl"] .site-header ul.menu { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .2rem; } /* Hero CTAs side by side */ .chs-hero .elementor-widget-button { display: inline-block; width: auto; } .chs-hero .elementor-widget-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 0; } .chs-hero .elementor-widget-heading, .chs-hero .elementor-widget-text-editor { flex: 1 1 100%; } /* Hero CTA buttons inline (Elementor gives widgets width:100% → force auto) */ .chs-hero .elementor-widget-button { flex: 0 0 auto !important; width: auto !important; } /* ── Utility bar (measured: re/DESIGN_TOKEN_OUTPUT.md §Header) ── */ .chs-utility-bar { background: var(--c-bg-soft); height: 44px; } .chs-utility-bar__inner { max-width: 1280px; margin: 0 auto; height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 8px 32px; } .chs-utility-bar a { font-size: 14px; line-height: 20px; color: var(--c-text); text-decoration: none; } .chs-utility-bar a:hover { color: var(--c-primary); } .chs-utility-bar__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); color: #fff !important; border-radius: 8px; padding: 6px 16px; font-weight: 500; } /* NOTE: no RTL override here — `justify-content:flex-end` in the base rule above is ALREADY direction-aware (CSS flex-end follows the writing mode's main-end, which is the LEFT in RTL). This matches the reference's Tailwind `justify-end` exactly. An earlier `flex-start` "RTL fix" here was WRONG — it packed the bar to the right instead of the left. Confirmed by comparing against the reference's actual outerHTML (utility bar wrapper classes: `flex gap-4 justify-end items-center`). */ @media (max-width: 767px) { .chs-utility-bar { display: none; } } /* ── Hero: full-bleed photo with legible-text overlay (measured pattern) ── */ .chs-hero-photo { position: relative; display: flex; align-items: center; min-height: 520px; } /* Fallback gradient ONLY when no hero image is set in Elementor. Scoped with :not([style*="background-image"]) — the previous version used `!important` on the base rule, which OVERRODE the real uploaded hero photo (Elementor sets it via a non-important inline style, which !important beats) so the photo never showed. Now the photo wins when present; this brand indigo→teal gradient shows only as a true fallback. */ .chs-hero-photo:not([style*="background-image"]) { background: linear-gradient( 135deg, var(--c-primary) 0%, /* brand indigo */ #2E1A6B 45%, /* mid indigo */ var(--c-green) 100% /* brand teal */ ); } /* Soft overlay: only when an actual background image is present */ .chs-hero-photo[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,20,30,.72) 0%, rgba(8,20,30,.25) 60%, rgba(8,20,30,.05) 100%); pointer-events: none; } /* When no photo: a subtle pattern instead of a flat overlay */ .chs-hero-photo:not([style*="background-image"])::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.07) 0%, transparent 60%); pointer-events: none; } .chs-hero-photo .elementor-widget-wrap { position: relative; z-index: 1; } .chs-hero-photo .elementor-widget-heading h1, .chs-hero-photo .elementor-widget-text-editor { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.25); } .chs-hero-photo .elementor-widget-text-editor p { color: rgba(255,255,255,.9) !important; } /* Quick-action cards overlap the hero's bottom edge (measured: cards anchored at the photo's lower boundary in the reference, not a separate band below) */ .chs-quick--overlap { position: relative; z-index: 2; margin-top: -64px !important; padding-inline: clamp(1rem, 4vw, 2rem); } @media (max-width: 767px) { .chs-quick--overlap { margin-top: -32px !important; } } /* ── Icon-box cards (quick-actions + About-page explore grid — matched to reference outerHTML: whole-card link, icon inline-start, descriptions). .chs-cardgrid marks any other section reusing the same card pattern. ── */ .chs-quick .chs-card, .chs-cardgrid .chs-card { text-align: start; position: relative; } /* relative = anchor for the stretched link */ /* !important on colors: Elementor's Kit global colors (default #6EC1E4 primary, #7A7A7A text) style icon-box internals with later-loading equal-specificity rules — Known Issue #11. Verified via getComputedStyle. */ .chs-quick .elementor-icon, .chs-cardgrid .elementor-icon { font-size: 24px; color: var(--c-primary) !important; fill: var(--c-primary) !important; } .chs-quick .elementor-icon svg, .chs-cardgrid .elementor-icon svg { fill: currentColor; width: 1em; height: 1em; } .chs-quick .elementor-icon-box-title, .chs-cardgrid .elementor-icon-box-title { font-size: 16px; font-weight: 700; color: var(--c-heading) !important; margin: 0 0 6px; } .chs-quick .elementor-icon-box-title a, .chs-cardgrid .elementor-icon-box-title a { color: inherit !important; text-decoration: none; } .chs-quick .elementor-icon-box-description, .chs-cardgrid .elementor-icon-box-description { font-size: 13px; color: var(--c-text) !important; margin: 0; } /* Whole card clickable (reference cards are one big ): stretch the title's link over the card. icon-box only links the icon+title natively. */ .chs-quick .elementor-icon-box-title a::after, .chs-cardgrid .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; } /* CTA card (احجز موعدًا): filled brand indigo, white content */ .chs-card--cta .elementor-icon { color: #fff !important; fill: #fff !important; } .chs-card--cta .elementor-icon-box-title, .chs-card--cta .elementor-icon-box-title a, .chs-card--cta .elementor-icon-box-description { color: #fff !important; } /* Match reference responsive behavior: descriptions only on xl screens */ @media (max-width: 1199px) { .chs-quick .elementor-icon-box-description { display: none; } } /* Reference grid is 2-cols below xl (Elementor default would stack to 1) */ @media (max-width: 767px) { .chs-quick .elementor-container { flex-wrap: wrap !important; } .chs-quick .elementor-column { width: 50% !important; } } /* ══ INNER-PAGE INTRO + ABOUT PAGE (.chs-page-intro / .chs-about-*) ══ */ .chs-page-intro { padding-block: 44px 36px !important; } .chs-page-intro .elementor-heading-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } .chs-page-intro p { font-size: 17px; max-width: 760px; margin: 10px 0 0; } .chs-about-banner img { width: 100%; border-radius: 16px; box-shadow: 0 12px 34px rgba(35,15,87,.14); } .chs-about-text p { font-size: 16.5px; line-height: 2; max-width: 900px; } .chs-about-explore .elementor-heading-title { margin-bottom: 18px; } /* explore grid rows: small gap between the two inner rows */ .chs-about-explore .elementor-inner-section + .elementor-inner-section { margin-top: 20px; } /* ── Departments page (.chs-departments — specialties grid) ── */ .chs-dept-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 6px 20px rgba(35,15,87,.07); } .chs-dept-card .elementor-icon-box-description { display: none; } .chs-dept-card .elementor-icon-box-title { margin: 0; } .chs-dept-list { list-style: none; margin: 12px 0 0; padding: 0; } .chs-dept-list li { position: relative; padding-inline-start: 18px; margin-bottom: 7px; font-size: 13.5px; color: var(--c-text); } .chs-dept-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); } /* ── Accordion (.chs-accordion-sec — patient rights/responsibilities) ── */ .chs-accordion-sec .elementor-accordion-item { border: 1px solid var(--c-border) !important; border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .chs-accordion-sec .elementor-tab-title { background: var(--c-bg-soft); font-weight: 700; font-size: 15px; color: var(--c-heading) !important; border: 0 !important; padding: 14px 18px; } .chs-accordion-sec .elementor-tab-title.elementor-active { background: var(--c-primary); color: #fff !important; } .chs-accordion-sec .elementor-tab-title.elementor-active .elementor-accordion-icon { color: #fff !important; } .chs-accordion-sec .elementor-accordion-icon { color: var(--c-primary); } .chs-accordion-sec .elementor-tab-content { font-size: 14px; line-height: 1.9; color: var(--c-text); border: 0 !important; padding: 16px 18px; } /* ── Chairman message block ── */ .chs-chairman .elementor-widget-text-editor p { font-size: 15.5px; line-height: 2.05; } /* ── Stats counters (.chs-stats — facts-and-figures page) ── */ .chs-stats { padding-block: 40px !important; } .chs-stats .elementor-counter { text-align: center; } .chs-stats .elementor-counter-number-wrapper { color: var(--c-primary) !important; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; justify-content: center; } .chs-stats .elementor-counter-title { color: var(--c-text) !important; font-size: 15px; text-align: center; } /* ── Utility bar v2: 7 links + lang + search (exact match, no phone) ── */ .chs-utility-bar__inner { flex-wrap: wrap; gap: 16px; } .chs-utility-bar__lang { color: var(--c-primary) !important; font-weight: 600; border: 1px solid var(--c-primary); border-radius: 6px; padding: 2px 10px; font-size: 13px !important; } .chs-utility-bar__search { display: inline-flex; align-items: center; gap: 4px; } /* ── Main-header phone CTA (appended into the nav menu as a styled li) ── */ [dir="rtl"] .site-header nav > ul { flex-direction: row; } /* CTA (last item) lands at the visual LEFT, matching reference */ /* CTA
  • is appended LAST in the menu's DOM order (wp_nav_menu_items filter); with dir=rtl + flex-direction:row that alone renders it at the visual LEFT (farthest from the logo) — matching the reference. No `order` override. */ .chs-header-cta { display: inline-flex !important; align-items: center; gap: 8px; background: var(--c-primary); color: #fff !important; border-radius: 8px; padding: 12px 24px; height: 48px; font-weight: 500; font-size: 16px; } .chs-header-cta:hover { background: var(--c-primary-alt); } /* ── Logo icon mark — own 2-colour design (4 rounded squares, brand blue + green), placed before the site-title text via a real background-image (not a mask, so both colours render). Pure CSS on the theme's own `.site-title a` markup — no dependency on an unverified theme hook. ── */ .site-branding .site-title a::before { content: ""; display: inline-block; width: 28px; height: 28px; margin-inline-end: 8px; vertical-align: middle; background: url('assets/placeholders/logo-mark.svg') center/contain no-repeat; } /* ══ CENTERS CAROUSEL (.chs-centers — Elementor Pro media-carousel) ══ Card look: rounded photo card + center-name band (the widget's text overlay, fed from the attachment title) pinned to the card bottom, brand indigo. */ .chs-centers .elementor-swiper { direction: ltr; } /* Swiper positions math is LTR-based; content stays RTL */ .chs-centers .swiper-slide { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(35, 15, 87, .12); position: relative; } .chs-centers .elementor-carousel-image { background-size: cover; background-position: center; aspect-ratio: 305 / 230; /* reference card ratio */ } /* Center-name band over the photo bottom (overlay:'text' renders it) */ .chs-centers .elementor-carousel-image-overlay { position: absolute; inset-inline: 0; bottom: 0; top: auto !important; background: rgba(35, 15, 87, .88) !important; /* brand indigo, translucent */ color: #fff !important; font-weight: 700; font-size: 15px; padding: 12px 16px; text-align: center; direction: rtl; height: auto !important; opacity: 1 !important; } .chs-centers .swiper-slide:hover .elementor-carousel-image-overlay { background: var(--c-primary) !important; } /* Pagination bullets in brand colors */ .chs-centers .swiper-pagination-bullet { background: var(--c-border); opacity: 1; } .chs-centers .swiper-pagination-bullet-active { background: var(--c-green); } /* ── CTA quick-card (احجز موعدًا) — filled brand blue, matches reference's highlighted 4th card. Persona-selector dropdown ("ضبط تجربتي...") is intentionally NOT built — excluded per instruction. ── */ .chs-card--cta { background: var(--c-primary) !important; border-color: var(--c-primary) !important; } .chs-card--cta .elementor-heading-title, .chs-card--cta p { color: #fff !important; } .chs-card--cta:hover { background: var(--c-primary-alt) !important; } /* ════════════════════════════════════════════════════════════════ ELEMENTOR HEADER — precisely matched to Cleveland Clinic Abu Dhabi reference layout. Measured from reference outerHTML + screenshot. ════════════════════════════════════════════════════════════════ */ /* ── Sticky header: JS class .chs-header-fixed is added by scroll handler ── */ /* Base state: normal flow */ header[data-elementor-type="header"], .elementor-location-header { position: relative; top: 0; z-index: 1000; width: 100%; background: var(--c-bg); box-shadow: 0 2px 12px rgba(0, 40, 80, 0.06); transition: box-shadow .25s ease; } /* Fixed state: applied by JS once scrolled past the full header height. Smart-sticky: only the MAIN row (logo+nav+phone) sticks — the utility bar is hidden while sticky (its secondary links aren't needed mid-browse, and this keeps the sticky bar short). Slides in on scroll-up, out on scroll-down. */ .chs-header-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; box-shadow: 0 4px 24px rgba(35, 15, 87, 0.14) !important; transform: translateY(0); transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .25s ease; will-change: transform; } /* While sticky, drop the utility bar — only the main nav row travels with you. */ .chs-header-fixed .chs-eb-bar { display: none !important; } /* Scroll-down: slide the sticky header up out of view (reveals on scroll-up). */ .chs-header-fixed.chs-header-hidden { transform: translateY(-100%); } /* Respect reduced-motion: snap instead of slide. */ @media (prefers-reduced-motion: reduce) { .chs-header-fixed { transition: none; } } /* Ensure no ancestor clips the fixed header */ body, .site-content, #content { overflow-x: clip !important; } /* ══ TOP UTILITY BAR (.chs-eb-bar) ══════════════════════════════ */ .chs-eb-bar { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); /* !important: same global `.elementor-top-section{padding-block:clamp(…56px)}` bug as .chs-eb-main — it made this bar 177px tall (content is only 44px). Keep it compact so the row height matches the main nav and frees vertical space for the hero. */ padding-block: 0 !important; } /* The HTML widget wraps all links in .chs-eb-utility */ .chs-eb-utility { display: flex; align-items: center; flex-wrap: nowrap; /* RTL: utility links are on the RIGHT (reading start), lang+search pushed to LEFT */ justify-content: flex-start; gap: 0; height: 44px; padding: 0; width: 100%; } /* ── Utility nav links (المختصون الطبيون … المواعيد) ── */ .chs-eb-utility > a:not(.chs-eb-utility__lang):not(.chs-eb-utility__search) { font-size: 13px; line-height: 44px; color: var(--c-text); text-decoration: none; white-space: nowrap; flex: 0 0 auto; padding: 0 10px; transition: color .2s ease; } .chs-eb-utility > a:not(.chs-eb-utility__lang):not(.chs-eb-utility__search):hover { color: var(--c-primary); } /* ── ENGLISH language switcher — outlined pill, pushed to left ── */ .chs-eb-utility__lang { margin-inline-start: auto; /* key: pushes everything after it to the left in RTL */ display: inline-flex; align-items: center; color: var(--c-primary) !important; font-weight: 600; font-size: 13px !important; border: 1.5px solid var(--c-primary); border-radius: 20px; padding: 3px 14px; text-decoration: none !important; transition: background .2s ease, color .2s ease; white-space: nowrap; flex: 0 0 auto; } .chs-eb-utility__lang:hover { background: var(--c-primary); color: #fff !important; } /* ── Search button — icon + text ── */ .chs-eb-utility__search { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text); text-decoration: none; font-size: 13px; padding: 0 12px; height: 44px; flex: 0 0 auto; white-space: nowrap; transition: color .2s ease; } .chs-eb-utility__search svg { width: 14px; height: 14px; flex: 0 0 auto; } .chs-eb-utility__search:hover { color: var(--c-primary); } /* Hide utility bar on tablet/mobile */ @media (max-width: 1024px) { .chs-eb-bar { display: none; } } /* ══ MAIN NAV BAR (.chs-eb-main) ════════════════════════════════ */ .chs-eb-main { background: var(--c-bg); min-height: 72px; /* !important: the global `.elementor-top-section { padding-block: clamp(...56px) }` rule (higher specificity) was adding 56px top+bottom, making the header row ~188px tall. Keep the header compact (~76px) regardless. */ padding-block: 2px !important; } .chs-eb-main > .elementor-container { align-items: center; flex-wrap: nowrap !important; min-height: 72px; gap: 28px; } /* Layout = reference: logo(right) | big gap | [nav + phone] grouped tight (left). !important is REQUIRED — Elementor's per-post CSS (.elementor-{id} .elementor-col-*) sets width:16%/50%/34% at equal specificity but loads AFTER this stylesheet, so it wins ties without !important. Verified via live getComputedStyle. - LOGO col GROWS (flex:1 1 auto): logo hugs the right edge (RTL start), and the free space becomes the gap between the logo and the nav+phone group. - NAV + PHONE cols shrink to content (flex:0 0 auto), so they sit tight together on the left, separated only by the 28px container gap. */ .chs-eb-main > .elementor-container > .elementor-col-16 { flex: 1 1 auto !important; width: auto !important; } .chs-eb-main > .elementor-container > .elementor-col-50 { flex: 0 0 auto !important; width: auto !important; min-width: 0; } .chs-eb-main > .elementor-container > .elementor-col-34 { flex: 0 0 auto !important; width: auto !important; } /* ── Logo ── */ .chs-eb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding-block: 12px; } /* Real logo is a wide lockup (icon + 3-line wordmark, ~1.71:1). Size by height so the width follows naturally; hug it to the right edge in the grown column. */ /* margin-inline-start:auto pushes the logo right within its grown column; the small negative inline-end nudges it a touch closer to the right edge so it sits flush and balanced with the utility bar above it. */ .chs-eb-logo { margin-inline-start: auto; margin-inline-end: -6px; } /* !important: Elementor's `.elementor img { height:auto }` (frontend.min.css) has equal specificity and loads later, so it wins the tie and the logo rendered at its full 213px natural height. Verified via getComputedStyle. */ .chs-eb-logo img { display: block; height: 56px !important; width: auto !important; } .chs-eb-logo__stack { display: flex; flex-direction: column; line-height: 1.2; } .chs-eb-logo__stack strong { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 17px; color: var(--c-primary); white-space: nowrap; letter-spacing: -.02em; } .chs-eb-logo__stack small { font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: 11px; color: var(--c-text); white-space: nowrap; } /* ── Nav menu — underline-fade hover (mirrors reference e--pointer-underline e--animation-fade) ── */ .chs-eb-main .elementor-nav-menu--main { width: 100%; } .chs-eb-main .elementor-nav-menu { display: flex !important; flex-wrap: nowrap !important; /* !important: Elementor's default sets wrap and wins otherwise → menu broke onto 2 lines */ align-items: center; justify-content: flex-start !important; /* RTL: items start from the right */ gap: 0; list-style: none; margin: 0; padding: 0; } .chs-eb-main .elementor-nav-menu > li { position: relative; } .chs-eb-main .elementor-item, .chs-eb-main .elementor-item.elementor-item-active, .chs-eb-main li .elementor-item { /* inline-flex (was block): the dropdown caret (span.sub-arrow, injected at runtime by SmartMenus) wrapped onto its own line under the label and broke the row's alignment — flex keeps label + caret on one line, centered. */ display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--c-heading) !important; text-decoration: none !important; /* !important: Elementor's .elementor-item padding (13px 20px) loads later and wins ties. Horizontal kept tight (12px) so all 5 items fit on one line. */ padding: 24px 12px 21px !important; /* asymmetric: 1px less bottom leaves room for underline */ white-space: nowrap; position: relative; /* Underline via border-bottom — NOT ::after, which Elementor's SmartMenus pointer-underline system overrides. border-bottom is reliable. */ border-bottom: 3px solid transparent; transition: color .2s ease, border-color .2s ease; box-sizing: border-box; } .chs-eb-main .elementor-nav-menu > li:hover > .elementor-item, .chs-eb-main li > a.elementor-item:hover, .chs-eb-main .elementor-item.elementor-item-active { color: var(--c-primary) !important; border-bottom-color: var(--c-primary) !important; } /* Disable Elementor's own pointer-underline so there's no clash */ .chs-eb-main .e--pointer-underline .elementor-item::before, .chs-eb-main .e--pointer-underline .elementor-item::after { display: none !important; } /* ── Phone CTA button (مستقيم left side per RTL) ── */ .chs-eb-main .elementor-button, .chs-eb-main .elementor-button-link { display: inline-flex !important; align-items: center; gap: 8px; background: var(--c-primary) !important; color: #fff !important; border-radius: 8px !important; padding: 11px 20px !important; font-weight: 600 !important; font-size: 15px !important; white-space: nowrap; text-decoration: none; transition: background .2s ease, box-shadow .2s ease !important; box-shadow: 0 2px 10px rgba(0, 120, 191, 0.22); } .chs-eb-main .elementor-button:hover, .chs-eb-main .elementor-button-link:hover { background: var(--c-primary-alt) !important; box-shadow: 0 4px 18px rgba(0, 120, 191, 0.32) !important; } /* Right-align the CTA within its column */ .chs-eb-main .elementor-col-34 .elementor-widget-button { display: flex; justify-content: flex-end; } /* ── Nav dropdowns ───────────────────────────────────────────────── CRITICAL SCOPING BUG FIXED (2026-07-09): desktop hover sub-menus render as `ul.sub-menu.elementor-nav-menu--dropdown` — the SAME class as the MOBILE dropdown nav. The old rule `.elementor-nav-menu--dropdown{display:none !important}` therefore force-hid every submenu (board page etc. looked "missing"). Suppress ONLY the mobile