1 2 3<!DOCTYPE html> 4<html lang="en" dir="ltr"> 5<head> 6 <meta charset="utf-8"> 7 8 <!-- 1. CONSENT DEFAULT SCRIPT - Must be FIRST --> 9
9<script nonce=""> 10window.dataLayer = window.dataLayer || []; 11function gtag() { 12dataLayer.push(arguments); 13} 14gtag('consent', 'default', { analytics_storage: 'denied' }); 15gtag('consent', 'default', { ad_storage: 'denied' }); 16gtag('consent', 'default', { ad_personalization: 'denied' }); 17gtag('consent', 'default', { ad_user_data: 'denied' }); 18</script>
18 19 20 <!-- 2. OneTrust Cookies Consent Notice start for saudinow.co --> 21
21<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-document-language="true" type="text/javascript" charset="UTF-8" data-domain-script="019a158a-0a09-70ed-ad5f-2508daa38943" nonce=""></script>
21 22
22<script type="text/javascript" nonce=""> 23 function OptanonWrapper() { } 24 </script>
24 25 <!-- OneTrust Cookies Consent Notice end for saudinow.co --> 26 27 <!-- 3. Google Tag Manager - Must come AFTER OneTrust --> 28
28<script nonce="">
vendor: 358 bytes, lines 28-38
28 29(function(w,d,s,l,i){ 30 w[l]=w[l]||[]; 31 w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); 32 var f=d.getElementsByTagName(s)[0], 33 j=d.createElement(s), 34 dl=l!='dataLayer'?'&l='+l:''; 35 j.async=true; 36 j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; 37 f.parentNode.insertBefore(j,f); 38})(window,document,'script','dataLayer','
38GTM-MMJ4T49P
vendor: 4 bytes, line 38
38');
39</script>
39 40 <!-- End Google Tag Manager --> 41 42 <!-- 4. Google Site Verification Meta Tag --> 43 <meta name="google-site-verification" content="x9ggKnvyL5jVBO7JwiZu2mQIIQLnT-t2kKa3tSyoaPo" /> 44 45 <meta name="viewport" content="width=device-width, initial-scale=1"> 46 <meta name="csrf-token" content="fMToHKIrUrjJmV5ye0u004uV4X0UtynGZtp3KTSc"> 47 48 49 <!-- Default Open Graph Meta Tags (Facebook, LinkedIn, WhatsApp, etc.) --> 50 <meta property="og:site_name" content="Saudi Now" /> 51 <meta property="og:url" content="https://saudinow.co" /> 52 <meta property="og:title" content="Saudi Now" /> 53 <meta property="og:description" content="Saudi Now connects UK and Saudi Arabian cultural sectors. Explore stories, events, opportunities, insights and resources on cultural collaboration between the United Kingdom and Saudi Arabia." /> 54 <meta property="og:image" content="https://saudinow.co/storage/uploads/meta/LV5X79Y6ryXt7ZpPBJ5nZ7CYYoUHcg24etv9S9dn.png" /> 55 <meta property="og:image:width" content="1200" /> 56 <meta property="og:image:height" content="630" /> 57 <meta property="og:type" content="website" /> 58 59 60 <!-- Default Twitter Meta Tags --> 61 <meta name="twitter:card" content="summary_large_image" /> 62 <meta name="twitter:title" content="Saudi Now" /> 63 <meta name="twitter:description" content="Saudi Now connects UK and Saudi Arabian cultural sectors. Explore stories, events, opportunities, insights and resources on cultural collaboration between the United Kingdom and Saudi Arabia." /> 64 <meta name="twitter:url" content="https://saudinow.co" /> 65 <meta name="twitter:image" content="https://saudinow.co/storage/uploads/meta/LV5X79Y6ryXt7ZpPBJ5nZ7CYYoUHcg24etv9S9dn.png" /> 66 67 <!-- Meta Description --> 68 <meta name="description" content="Saudi Now connects UK and Saudi Arabian cultural sectors. Explore stories, events, opportunities, insights and resources on cultural collaboration between the United Kingdom and Saudi Arabia." /> 69 70 <!-- Other Meta Tags --> 71 <meta name="MobileOptimized" content="width" /> 72 <meta name="HandheldFriendly" content="true" /> 73 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 74 75 <!-- Canonical URL (only if page doesn't define its own in ) --> 76 <link rel="canonical" href="https://saudinow.co" /> 77 78 <!-- Hreflang tags for multilingual SEO --> 79 <link rel="alternate" hreflang="en" href="https://saudinow.co/en/events" /> 80 <link rel="alternate" hreflang="ar" href="https://saudinow.co/ar/events" /> 81 <link rel="alternate" hreflang="x-default" href="https://saudinow.co/en/events" /> 82 83 <!-- Structured Data (Schema.org) --> 84
84<script type="application/ld+json" nonce=""> 85 { 86 "@context": "https://schema.org", 87 "@type": "WebPage", 88 "name": "Saudi Now", 89 "url": "https://saudinow.co", 90 "description": "Saudi Now connects UK and Saudi Arabian cultural sectors. Explore stories, events, opportunities, insights and resources on cultural collaboration between the United Kingdom and Saudi Arabia.", 91 "publisher": { 92 "@type": "Organization", 93 "name": "British Council", 94 "url": "https://www.britishcouncil.org/" 95 } 96 } 97 </script>
97 98 99 <!-- Page Title --> 100 <title>Saudi Now | Events</title> 101 102 <!-- Custom Meta Tags (for specific pages like items) - These override the default ones above --> 103 104 105 <!-- Favicon --> 106 <link rel="icon" href="https://saudinow.co/img/favicon.ico" type="image/vnd.microsoft.icon" />
vendor: 72 bytes, lines 106-111
106 107 108 109 110 111 <script async src="https://www.googletagmanager.com/gtag/js?id=
111G-RDMC028XTN
vendor: 25 bytes, lines 111-112
111" nonce=""></script> 112
112<script nonce=""> 113
vendor: 146 bytes, lines 113-117
113window.dataLayer = window.dataLayer || []; 114 function gtag(){dataLayer.push(arguments);} 115 gtag('js', new Date()); 116 117 gtag('config', '
117G-RDMC028XTN
vendor: 8 bytes, lines 117-118
117'); 118
118</script>
118 119 <!-- Fonts --> 120 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> 121 122 <!-- British Council Arabic Fonts - Saudi Now Design Guide --> 123 <style nonce=""> 124 @import url('https://fonts.googleapis.com/css2?family=British+Council+Arabic:wght@300;400;500;600;700;800;900&display=swap'); 125 126 /* Saudi Now Design Guide - Typography System */ 127 body { 128 font-family: 'British Council Arabic', Arial, sans-serif !important; 129 font-size: 16px; 130 line-height: 1.5; 131 } 132 133 /* Prevent horizontal scrolling and dragging on mobile */ 134 html, body { 135 max-width: 100vw !important; 136 overflow-x: hidden !important; 137 } 138 139 /* Fix paragraph spacing consistency between backend editor and frontend display */ 140 .quill-content p { 141 margin-bottom: 1em !important; 142 line-height: 1.6 !important; 143 } 144 145 .quill-content p:last-child { 146 margin-bottom: 0 !important; 147 } 148 149 * { 150 box-sizing: border-box !important; 151 } 152 153 /* Exception for Slick slider elements */ 154 .partner-logos-slider, 155 .partner-logos-slider *, 156 .slick-track, 157 .slick-slide { 158 max-width: none !important; 159 } 160 161 /* Search Overlay Positioning - ensure it appears above all content */ 162 .o-header__search { 163 position: fixed !important; 164 top: 0 !important; 165 left: 0 !important; 166 width: 100% !important; 167 height: 100vh !important; 168 background: rgba(255, 255, 255, 0.95) !important; 169 z-index: 10000 !important; 170 display: none !important; 171 backdrop-filter: blur(5px) !important; 172 } 173 174 .o-header__search.active { 175 display: block !important; 176 } 177 178 /* Close button styling - positioned in header area top-left */ 179 .o-header__search--close { 180 position: absolute !important; 181 top: 20px !important; 182 left: 20px !important; 183 background: none !important; 184 border: none !important; 185 color: #000 !important; 186 cursor: pointer !important; 187 z-index: 10002 !important; 188 padding: 10px !important; 189 border-radius: 50% !important; 190 transition: background-color 0.3s ease !important; 191 display: flex !important; 192 align-items: center !important; 193 justify-content: center !important; 194 } 195 196 .o-header__search--close:hover { 197 background-color: rgba(0, 0, 0, 0.1) !important; 198 } 199 200 .o-header__search--container { 201 position: relative !important; 202 top: 50% !important; 203 transform: translateY(-50%) !important; 204 z-index: 10001 !important; 205 } 206 207 /* Prevent viewport manipulation on mobile */ 208 @media (max-width: 768px) { 209 html, body { 210 width: 100% !important; 211 max-width: 100vw !important; 212 overflow-x: hidden !important; 213 position: relative !important; 214 touch-action: pan-y !important; 215 } 216 217 /* Prevent overwide elements */ 218 * { 219 max-width: 100vw !important; 220 box-sizing: border-box !important; 221 } 222 223 /* Ensure main containers stay within bounds */ 224 .grid, .container, .row { 225 max-width: 100% !important; 226 overflow-x: hidden !important; 227 } 228 229 /* Prevent horizontal pan on main content areas */ 230 main, .main-content, #main-content, .page-content { 231 width: 100% !important; 232 max-width: 100vw !important; 233 overflow-x: hidden !important; 234 touch-action: pan-y !important; 235 } 236 237 /* Prevent images from breaking layout */ 238 img { 239 max-width: 100% !important; 240 height: auto !important; 241 } 242 243 /* Prevent tables from overflowing */ 244 table { 245 max-width: 100% !important; 246 table-layout: fixed !important; 247 } 248 249 /* Mobile search overlay adjustments */ 250 .o-header__search { 251 padding: 20px !important; 252 } 253 254 .o-header__search--container { 255 top: 40% !important; 256 } 257 } 258 259 /* Header Typography - 40px */ 260 h1, .h1 { 261 font-family: 'British Council Arabic', Arial, sans-serif !important; 262 font-size: 40px !important; 263 font-weight: 700; 264 line-height: 1.2; 265 color: #000000 !important; 266 } 267
268 /* Section Headers - Large 40px for main section titles */ 269 .m-signposts-reference__header--intro h2, 270 .m-banner__content-below--content h1 { 271 font-family: 'British Council Arabic', Arial, sans-serif !important; 272 font-size: 40px !important; 273 font-weight: 700 !important; 274 line-height: 1.2; 275 color: #000000; 276 margin-bottom: 16px !important; 277 } 278 279 /* Exact background-to-text color mappings */ 280 281 /* Purple background #a5a0bd â dark purple text #342538 */ 282 .m-entity[style*="background-color: #a5a0bd"] { 283 color: #342538 !important; 284 } 285 .m-entity[style*="background-color: #a5a0bd"] .m-signposts-reference__header--intro h2, 286 .m-entity[style*="background-color: #a5a0bd"] .m-banner__content-below--content h1, 287 .m-entity[style*="background-color: #a5a0bd"] h1, 288 .m-entity[style*="background-color: #a5a0bd"] h2, 289 .m-entity[style*="background-color: #a5a0bd"] h3 { 290 color: #342538 !important; 291 } 292 .m-entity[style*="background-color: #a5a0bd"] p, 293 .m-entity[style*="background-color: #a5a0bd"] .o-teaser__content h2, 294 .m-entity[style*="background-color: #a5a0bd"] .card-title, 295 .m-entity[style*="background-color: #a5a0bd"] .card-title a, 296 .m-entity[style*="background-color: #a5a0bd"] .o-node h2, 297 .m-entity[style*="background-color: #a5a0bd"] .o-node h3 { 298 color: #342538 !important; 299 } 300 301 /* Light purple background #e2dcdc â dark brown text #372929 */ 302 .m-entity[style*="background-color: #e2dcdc"] { 303 color: #372929 !important; 304 } 305 .m-entity[style*="background-color: #e2dcdc"] .m-signposts-reference__header--intro h2, 306 .m-entity[style*="background-color: #e2dcdc"] .m-banner__content-below--content h1, 307 .m-entity[style*="background-color: #e2dcdc"] h1, 308 .m-entity[style*="background-color: #e2dcdc"] h2, 309 .m-entity[style*="background-color: #e2dcdc"] h3 { 310 color: #372929 !important; 311 } 312 .m-entity[style*="background-color: #e2dcdc"] p, 313 .m-entity[style*="background-color: #e2dcdc"] .o-teaser__content h2, 314 .m-entity[style*="background-color: #e2dcdc"] .card-title, 315 .m-entity[style*="background-color: #e2dcdc"] .card-title a, 316 .m-entity[style*="background-color: #e2dcdc"] .o-node h2, 317 .m-entity[style*="background-color: #e2dcdc"] .o-node h3 { 318 color: #372929 !important; 319 } 320 321 /* Olive background #bdbca0 â dark green text #25362f */ 322 .m-entity[style*="background-color: #bdbca0"] { 323 color: #25362f !important; 324 } 325 .m-entity[style*="background-color: #bdbca0"] .m-signposts-reference__header--intro h2, 326 .m-entity[style*="background-color: #bdbca0"] .m-banner__content-below--content h1, 327 .m-entity[style*="background-color: #bdbca0"] h1, 328 .m-entity[style*="background-color: #bdbca0"] h2, 329 .m-entity[style*="background-color: #bdbca0"] h3 { 330 color: #25362f !important; 331 } 332 .m-entity[style*="background-color: #bdbca0"] p, 333 .m-entity[style*="background-color: #bdbca0"] .o-teaser__content h2, 334 .m-entity[style*="background-color: #bdbca0"] .card-title, 335 .m-entity[style*="background-color: #bdbca0"] .card-title a, 336 .m-entity[style*="background-color: #bdbca0"] .o-node h2, 337 .m-entity[style*="background-color: #bdbca0"] .o-node h3 { 338 color: #25362f !important; 339 } 340 341 /* Teal background #99b8b0 â dark navy text #252438 */ 342 .m-entity[style*="background-color: #99b8b0"] { 343 color: #252438 !important; 344 } 345 .m-entity[style*="background-color: #99b8b0"] .m-signposts-reference__header--intro h2, 346 .m-entity[style*="background-color: #99b8b0"] .m-banner__content-below--content h1, 347 .m-entity[style*="background-color: #99b8b0"] h1, 348 .m-entity[style*="background-color: #99b8b0"] h2, 349 .m-entity[style*="background-color: #99b8b0"] h3 { 350 color: #252438 !important; 351 } 352 .m-entity[style*="background-color: #99b8b0"] p, 353 .m-entity[style*="background-color: #99b8b0"] .o-teaser__content h2, 354 .m-entity[style*="background-color: #99b8b0"] .card-title, 355 .m-entity[style*="background-color: #99b8b0"] .card-title a, 356 .m-entity[style*="background-color: #99b8b0"] .o-node h2, 357 .m-entity[style*="background-color: #99b8b0"] .o-node h3 { 358 color: #252438 !important; 359 } 360 361 /* Dark background text override (fallback) */ 362 .dark-bg-text .m-signposts-reference__header--intro h2, 363 .dark-bg-text .m-banner__content-below--content h1 { 364 color: #ffffff !important; 365 } 366 367 /* Sub-header Typography - 18px for content headers */ 368 h2, .h2, h3, .h3 { 369 font-family: 'British Council Arabic', Arial, sans-serif !important; 370 font-size: 18px !important; 371 font-weight: 600; 372 line-height: 1.3; 373 color: #000000; 374 } 375 376 /* Dark background override for sub-headers */ 377 .dark-bg-text h2, 378 .dark-bg-text h3, 379 .dark-bg-text .h2, 380 .dark-bg-text .h3 { 381 color: #ffffff !important; 382 } 383 384 /* Article titles in teasers */ 385 .o-teaser__content h2 { 386 font-family: 'British Council Arabic', Arial, sans-serif !important; 387 font-size: 18px !important; 388 font-weight: 600 !important; 389 color: #000000; 390 } 391 392 /* Dark background override for teaser titles */ 393 .dark-bg-text .o-teaser__content h2 { 394 color: #ffffff !important; 395 } 396 397 /* Small text - 12px */ 398 small, .small, .text-small {
399 font-family: 'British Council Arabic', Arial, sans-serif !important; 400 font-size: 12px !important; 401 font-weight: 400; 402 line-height: 1.4; 403 } 404 405 /* Button text - 15px */ 406 .a-btn--standard, .a-btn--alt, button { 407 font-family: 'British Council Arabic', Arial, sans-serif !important; 408 font-size: 15px !important; 409 font-weight: 600; 410 } 411 412 /* Navigation menu text */ 413 .m-navigation, .m-mobile-navigation { 414 font-family: 'British Council Arabic', Arial, sans-serif !important; 415 } 416 417 .m-navigation__parent--item a { 418 font-family: 'British Council Arabic', Arial, sans-serif !important; 419 font-size: 14px !important; 420 font-weight: 500 !important; 421 color: #000 !important; 422 text-decoration: none !important; 423 } 424 425 /* Footer text specifically */ 426 footer, footer * { 427 font-family: 'British Council Arabic', Arial, sans-serif !important; 428 } 429 430 /* Ensure all paragraphs use the correct font */ 431 p { 432 font-family: 'British Council Arabic', Arial, sans-serif !important; 433 font-size: 16px; 434 font-weight: 400; 435 line-height: 1.5; 436 color: #000000; 437 } 438 439 /* Dark background override for paragraphs */ 440 .dark-bg-text p { 441 color: #ffffff !important; 442 } 443 444 /* Section descriptions */ 445 .m-signposts-reference__header--intro p { 446 font-family: 'British Council Arabic', Arial, sans-serif !important; 447 font-size: 16px !important; 448 font-weight: 400 !important; 449 line-height: 1.5; 450 color: #000000; 451 } 452 453 /* Dark background override for section descriptions */ 454 .dark-bg-text .m-signposts-reference__header--intro p { 455 color: #ffffff !important; 456 } 457 458 /* Form elements */ 459 input, textarea, select { 460 font-family: 'British Council Arabic', Arial, sans-serif !important; 461 } 462 463 /* Language dropdown */ 464 .language-dropdown-toggle, .language-option { 465 font-family: 'British Council Arabic', Arial, sans-serif !important; 466 } 467 468 /* Teaser image height control - matching design guide */ 469 .o-teaser-teaser__thumb img, 470 .o-teaser__thumb img { 471 height: 272px !important; 472 width: 100% !important; 473 object-fit: cover !important; 474 object-position: center !important; 475 } 476 477 .o-teaser-teaser__thumb, 478 .o-teaser__thumb { 479 height: 272px !important; 480 overflow: hidden !important; 481 display: block !important; 482 } 483 </style> 484 485 486 487 488 489 <link rel="stylesheet" href="/css/app.css?id=21559aca84995385de50"> 490 491 492 <link rel="stylesheet" href="https://saudinow.co/css/custom.css"> 493 <link rel="stylesheet" href="https://saudinow.co/css/global.css"> 494 <link rel="stylesheet" href="https://saudinow.co/css/vendor/fontawesome.css"> 495 <link rel="stylesheet" href="https://saudinow.co/css/vendor/magnific-popup.css"> 496 <link href="https://saudinow.co/css/vendor/select2-4.1.0-rc.0.min.css" rel="stylesheet"> 497 <link href="https://saudinow.co/css/vendor/quill-1.3.6-snow.css" rel="stylesheet"> 498 <link rel="stylesheet" type="text/css" href="https://saudinow.co/css/vendor/slick-1.8.1.css"/> 499 <link rel="stylesheet" type="text/css" href="https://saudinow.co/css/vendor/slick-theme-1.8.1.css"/> 500 501 502 503</head> 504 505<style nonce=""> 506/* Mobile menu positioning - ensure it stays within viewport */ 507.o-header__mobile-menu { 508 position: fixed; 509 top: 100px; 510 right: -100vw; 511 width: 100vw; 512 max-width: 320px; 513 height: calc(100vh - 100px); 514 background: white; 515 z-index: 9999; 516 transition: right 0.3s ease; 517 overflow-y: auto; 518 box-shadow: -2px 0 10px rgba(0,0,0,0.1); 519 pointer-events: auto; 520} 521 522.o-header__mobile-menu.active { 523 right: 0; 524 pointer-events: auto; 525} 526 527/* Mobile Menu Responsive Adjustments */ 528@media (max-width: 768px) { 529 .o-header__mobile-menu { 530 width: 100vw !important; 531 max-width: 300px !important; 532 right: -100vw !important; 533 } 534 535 .o-header__mobile-menu.active { 536 right: 0 !important; 537 } 538 539 .o-header__mobile-menu .grid { 540 padding: 20px; 541 } 542 543 .o-header__mobile-menu .m-mobile-navigation__parent--item-link { 544 font-family: 'British Council Arabic', Arial, sans-serif !important; 545 font-size: 18px !important; 546 font-weight: 500 !important; 547 padding: 12px 0 !important; 548 } 549} 550 551/* Override compiled CSS conflicts */ 552@media (max-width: 889px) { 553 .o-header__mobile-menu { 554 width: 100vw !important; 555 max-width: 320px !important; 556 right: -100vw !important; 557 position: fixed !important; 558 top: 100px !important; 559 height: calc(100vh - 100px) !important; 560 z-index: 9999 !important; 561 } 562 563 .o-header__mobile-menu.active { 564 right: 0 !important; 565 } 566} 567 568@media (max-width: 480px) { 569 .o-header__mobile-menu { 570 width: 100vw !important; 571 max-width: 100vw !important; 572 right: -100vw !important; 573 } 574 575 .o-header__mobile-menu.active { 576 right: 0 !important; 577 } 578 579 .o-header__mobile-menu .grid { 580 padding: 15px; 581 } 582 583 .o-header__mobile-menu .m-mobile-navigation__parent--item-link { 584 font-size: 16px !important; 585 padding: 10px 0 !important; 586 } 587} 588 589@media (max-width: 360px) { 590 .o-header__mobile-menu { 591 width: 100vw !important; 592 max-width: 100vw !important; 593 right: -100vw; 594 } 595 596 .o-header__mobile-menu.active { 597 right: 0; 598 } 599 600 .o-header__mobile-menu .grid { 601 padding: 12px; 602 } 603} 604 605/* Landscape orientation adjustments for mobile */ 606@media screen and (orientation: landscape) and (max-height: 500px) { 607 .o-header__mobile-menu { 608 width: 100vw; 609 max-width: 250px; 610 right: -100vw; 611 height: 100vh; 612 max-height: 100vh; 613 } 614 615 .o-header__mobile-menu.active { 616 right: 0; 617 } 618 619 .o-header__mobile-menu .grid { 620 padding: 15px; /* Reduced padding for landscape */ 621 } 622 623 .o-header__mobile-menu .m-mobile-navigation__parent--item { 624 padding: 8px 0; /* Reduced spacing between items */ 625 } 626 627 .o-header__mobile-menu .m-mobile-navigation__parent--item-link { 628 font-size: 15px; /* Slightly smaller font for landscape */ 629 } 630 631 .o-header__mobile-menu .o-header__language { 632 margin-bottom: 15px; /* Reduced margin */ 633 } 634} 635 636/* Specific iPhone landscape fixes */ 637@media screen and (orientation: landscape) and (max-height: 450px) and (max-width: 900px) { 638 .o-header__mobile-menu { 639 width: 100vw; 640 max-width: 220px; 641 right: -100vw; 642 height: 100vh; 643 } 644 645 .o-header__mobile-menu.active { 646 right: 0; 647 } 648 649 .o-header__mobile-menu .grid { 650 padding: 10px; 651 } 652 653 .o-header__mobile-menu .m-mobile-navigation__parent--item { 654 padding: 8px 0; 655 } 656 657 .o-header__mobile-menu .m-mobile-navigation__parent--item-link { 658 font-size: 15px; 659 } 660 661 .o-header__mobile-menu .o-header__navigation--mobile--contact { 662 margin-top: 15px; 663 } 664} 665 666/* RTL support for mobile menu */ 667 668/* Mobile menu overlay - Fixed overlay system */ 669.mobile-menu-overlay { 670 position: fixed; 671 top: 0; 672 left: 0; 673 width: 100%; 674 height: 100vh; 675 background: rgba(0, 0, 0, 0.3); 676 z-index: 9998; 677 opacity: 0; 678 visibility: hidden; 679 transition: opacity 0.3s ease, visibility 0.3s ease; 680 pointer-events: none; 681} 682 683.mobile-menu-overlay.active { 684 opacity: 1; 685 visibility: visible; 686 pointer-events: auto; 687} 688 689/* Prevent body scroll when menu is open */ 690.no-scroll { 691 overflow: hidden !important; 692 height: 100% !important; 693 position: fixed !important; 694 width: 100% !important; 695 top: 0 !important; 696 left: 0 !important; 697} 698 699/* Additional fix for mobile browsers */ 700.no-scroll body { 701 overflow: hidden !important; 702 position: fixed !important; 703 width: 100% !important; 704} 705 706/* Prevent touch scrolling on mobile */ 707.mobile-menu-open { 708 touch-action: none !important; 709 -webkit-overflow-scrolling: none !important;
710 overscroll-behavior: none !important; 711} 712 713/* Ensure html element also doesn't scroll */ 714html.no-scroll { 715 overflow: hidden !important; 716 height: 100% !important; 717 position: fixed !important; 718 width: 100% !important; 719} 720 721/* Ensure mobile menu content is properly positioned */ 722.o-header__mobile-menu .grid { 723 padding: 20px; 724} 725 726/* Close button positioning in mobile menu */ 727.o-header__mobile-menu .o-header__language { 728 text-align: right; 729 margin-bottom: 20px; 730} 731 732 733/* Make sure buttons in mobile menu are clickable */ 734.o-header__mobile-menu button { 735 pointer-events: auto; 736 cursor: pointer; 737} 738 739/* Ensure menu items are clickable */ 740.o-header__mobile-menu a, 741.o-header__mobile-menu button { 742 position: relative; 743 z-index: 10000; 744 pointer-events: auto !important; 745 display: block; 746} 747 748/* Ensure clickable area for menu links */ 749.m-mobile-navigation__parent--item-link { 750 pointer-events: auto !important; 751 cursor: pointer !important; 752 display: block !important; 753 position: relative !important; 754 z-index: 10001 !important; 755} 756 757/* Footer links columns responsive */ 758@media (max-width: 768px) { 759 .footer-links-columns { 760 grid-template-columns: 1fr !important; 761 gap: 30px !important; 762 } 763 764 .footer-about-links, 765 .footer-menu-links { 766 margin-bottom: 4px; 767 } 768} 769 770 771/* Ensure submenu links are clickable */ 772.m-mobile-navigation__parent--child a { 773 pointer-events: auto !important; 774 cursor: pointer !important; 775 display: block !important; 776 position: relative !important; 777 z-index: 10001 !important; 778} 779 780/* Fix for mobile menu submenu clicks */ 781.m-mobile-navigation__parent--item-children { 782 cursor: pointer; 783} 784 785.m-mobile-navigation__parent--item-children .m-mobile-navigation__parent--child { 786 display: none; 787} 788 789.m-mobile-navigation__parent--item-children.active .m-mobile-navigation__parent--child { 790 display: block; 791} 792 793/* Language Dropdown Styles */ 794.language-dropdown { 795 position: relative; 796 display: inline-block; 797} 798 799.language-dropdown-toggle { 800 display: flex; 801 align-items: center; 802 padding: 0; 803 background: transparent; 804 border: 1px solid #dddddd00; 805 border-radius: 4px; 806 cursor: pointer; 807 color: #000; 808 font-size: 14px; 809 font-weight:600; 810 transition: all 0.2s ease; 811 min-width: 75px; 812 justify-content: space-between; 813} 814 815 816 817.language-dropdown-toggle svg { 818 transition: transform 0.2s ease; 819 flex-shrink: 0; 820} 821 822.language-dropdown.active .language-dropdown-toggle svg { 823 transform: rotate(180deg); 824} 825 826.language-dropdown-menu { 827 position: absolute; 828 top: 100%; 829 left: 0; 830 right: 0; 831 background: white; 832 border: 1px solid #ddd; 833 border-radius: 4px; 834 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 835 opacity: 0; 836 visibility: hidden; 837 transform: translateY(-10px); 838 transition: all 0.2s ease; 839 z-index: 1000; 840 margin-top: 4px; 841} 842 843.language-dropdown.active .language-dropdown-menu { 844 opacity: 1; 845 visibility: visible; 846 transform: translateY(0); 847} 848 849.language-option { 850 display: block; 851 padding: 10px 12px; 852 color: #000000; 853 text-decoration: none; 854 font-size: 14px; 855 font-weight: 500; 856 transition: background-color 0.2s ease; 857} 858 859.language-option:hover { 860 background-color: #f8f9fa; 861 color: #23085A; 862 text-decoration: none; 863} 864 865/* Mobile language dropdown adjustments */ 866.mobile-language-dropdown { 867 width: 100%; 868 margin-bottom: 20px; 869} 870 871.mobile-language-dropdown .language-dropdown-toggle { 872 width: 100%; 873 justify-content: space-between; 874 padding: 12px 16px; 875 font-size: 16px; 876} 877 878.mobile-language-dropdown .language-dropdown-menu { 879 width: 100%; 880} 881 882/* RTL support for language dropdown */ 883 884/* Partner slider arrows */ 885.partner-logos-slider .slick-prev, 886.partner-logos-slider .slick-next { 887 width: 50px; 888 height: 50px; 889 background-color: transparent; 890 border: none; 891 border-radius: 0; 892 z-index: 10; 893} 894 895.partner-logos-slider .slick-prev:before, 896.partner-logos-slider .slick-next:before { 897 content: ''; 898 display: block; 899 width: 0; 900 height: 0; 901 position: absolute; 902 top: 50%; 903 left: 50%; 904 transform: translate(-50%, -50%); 905} 906 907.partner-logos-slider .slick-prev:before { 908 border-top: 12px solid transparent; 909 border-bottom: 12px solid transparent; 910 border-right: 16px solid #000; 911} 912 913.partner-logos-slider .slick-next:before { 914 border-top: 12px solid transparent; 915 border-bottom: 12px solid transparent; 916 border-left: 16px solid #000; 917} 918 919.partner-logos-slider .slick-prev { 920 left: -50px; 921} 922 923.partner-logos-slider .slick-next { 924 right: -50px; 925} 926 927/* Saudi Now Design Guide - Exact Page Width & Margins */ 928@media (min-width: 1440px) { 929 /* Keep full-width backgrounds, constrain content only */ 930 .container, 931 .container-full { 932 max-width: 1440px; 933 margin: 0 auto; 934 padding-left: 213px; 935 padding-right: 213px; 936 } 937 938 /* Default grid width - will be overridden by specific sections */ 939 .grid { 940 max-width: 1440px; 941 margin: 0 auto; 942 padding-left: 213px; 943 padding-right: 213px; 944 } 945 946 /* Header content full width */ 947 header .container, 948 header .grid { 949 max-width: 1440px; 950 margin: 0 auto; 951 padding: 0; 952 } 953 954 /* Footer content constrained but footer background full width */ 955 footer .container, 956 footer .grid { 957 max-width: 1440px; 958 margin: 0 auto; 959 padding-left: 213px; 960 padding-right: 213px; 961 } 962 963 /* Exception for partner slider container - break out of grid constraints */ 964 footer .o-footer__partners { 965 margin-left: -213px !important; 966 margin-right: -213px !important; 967 padding: 20px 213px !important; 968 } 969 970} 971 972/* For smaller screens, maintain responsive behavior */ 973@media (max-width: 1439px) { 974 .container, 975 .container-full { 976 padding-left: 15px; 977 padding-right: 15px; 978 } 979} 980 981/* Saudi Now Design Guide - Header Heights */ 982.o-header__top { 983 height: 116px; /* Menu bar top section height from design guide */ 984} 985 986/* Ensure header follows exact specifications */ 987header { 988 min-height: 177px; 989} 990 991.o-header__top-bar { 992 display: flex; 993 justify-content: space-between; 994 align-items: center; 995 padding: 33px 20px 20px 20px; 996 border-bottom: none; 997 position: relative; 998} 999
1000/* Mobile Header Adjustments - Saudi Now responsive design */ 1001@media (max-width: 768px) { 1002 /* Prevent header overflow */ 1003 header { 1004 min-height: 120px !important; 1005 width: 100% !important; 1006 max-width: 100vw !important; 1007 overflow-x: hidden !important; 1008 } 1009 1010 /* Reduce header height for mobile */ 1011 .o-header__top { 1012 height: 80px !important; 1013 width: 100% !important; 1014 max-width: 100vw !important; 1015 } 1016 1017 .o-header__top-bar { 1018 padding: 15px 15px !important; 1019 height: 80px !important; 1020 min-height: 80px !important; 1021 width: 100% !important; 1022 max-width: 100vw !important; 1023 box-sizing: border-box !important; 1024 display: flex !important; 1025 justify-content: space-between !important; 1026 align-items: center !important; 1027 } 1028 1029 /* Mobile logo adjustments */ 1030 .o-header__logo { 1031 flex-shrink: 0 !important; 1032 } 1033 1034 .o-header__logo a { 1035 height: 42px !important; 1036 display: flex !important; 1037 align-items: center !important; 1038 } 1039 1040 .o-header__logo img { 1041 max-height: 42px !important; 1042 width: auto !important; 1043 } 1044 1045 /* Mobile header actions container */ 1046 .o-header__top-actions { 1047 display: flex !important; 1048 align-items: center !important; 1049 gap: 10px !important; 1050 flex-shrink: 0 !important; 1051 } 1052 1053 /* Hide desktop elements on mobile */ 1054 .o-header__top-actions .o-header__language, 1055 .o-header__top-actions .o-header__actions--contact { 1056 display: none !important; 1057 } 1058 1059 /* Mobile search button */ 1060 .o-header__actions--search { 1061 width: 40px !important; 1062 height: 40px !important; 1063 display: flex !important; 1064 align-items: center !important; 1065 justify-content: center !important; 1066 background: transparent !important; 1067 border: none !important; 1068 cursor: pointer !important; 1069 flex-shrink: 0 !important; 1070 } 1071 1072 .o-header__actions--search span { 1073 display: none !important; 1074 } 1075 1076 .o-header__actions--search svg:first-of-type { 1077 width: 20px !important; 1078 height: 20px !important; 1079 } 1080 1081 /* Mobile menu button */ 1082 #mobile-menu-toggle { 1083 width: 40px !important; 1084 height: 40px !important; 1085 display: flex !important; 1086 align-items: center !important; 1087 justify-content: center !important; 1088 background: transparent !important; 1089 border: none !important; 1090 cursor: pointer !important; 1091 margin-left: 5px !important; 1092 flex-shrink: 0 !important; 1093 } 1094 1095 #mobile-menu-toggle svg { 1096 width: 24px !important; 1097 height: 24px !important; 1098 } 1099} 1100 1101/* Small mobile devices */ 1102@media (max-width: 480px) { 1103 header { 1104 min-height: 100px !important; 1105 width: 100% !important; 1106 max-width: 100vw !important; 1107 overflow-x: hidden !important; 1108 } 1109 1110 .o-header__top { 1111 height: 70px !important; 1112 width: 100% !important; 1113 max-width: 100vw !important; 1114 } 1115 1116 .o-header__top-bar { 1117 padding: 10px 12px !important; 1118 height: 70px !important; 1119 width: 100% !important; 1120 max-width: 100vw !important; 1121 box-sizing: border-box !important; 1122 } 1123 1124 .o-header__logo a { 1125 height: 36px !important; 1126 } 1127 1128 .o-header__logo img { 1129 max-height: 28px !important; 1130 } 1131 1132 /* Tighter spacing for small screens */ 1133 .o-header__top-actions { 1134 gap: 5px !important; 1135 } 1136 1137 .o-header__actions--search, 1138 #mobile-menu-toggle { 1139 width: 36px !important; 1140 height: 36px !important; 1141 } 1142 1143 .o-header__actions--search svg:first-of-type { 1144 width: 18px !important; 1145 height: 18px !important; 1146 } 1147 1148 #mobile-menu-toggle svg { 1149 width: 20px !important; 1150 height: 20px !important; 1151 } 1152} 1153 1154/* Header scroll behavior */ 1155header.header-hidden { 1156 top: -248px !important; 1157 transition: top 0.3s ease; 1158} 1159 1160header { 1161 position: fixed; 1162 top: 0; 1163 width: 100%; 1164 z-index: 1000; 1165 transition: top 0.3s ease; 1166} 1167 1168.o-header__logo a { 1169 border-left: none !important;
1170 border-right: none !important; 1171} 1172 1173/* Footer separator lines matching header style */ 1174.o-footer__separator { 1175 max-width: 1440px; 1176 margin: 0 auto; 1177 padding: 0 15px; 1178 height: 10px; 1179 position: relative; 1180} 1181 1182.o-footer__separator::after { 1183 content: ''; 1184 position: absolute; 1185 bottom: 0; 1186 left: 0; 1187 right: 0; 1188 border-bottom: 2px solid #949299; 1189} 1190 1191/* Add padding on large screens for separators */ 1192@media (min-width: 1440px) { 1193 .o-footer__separator { 1194 padding: 0 213px; 1195 } 1196} 1197 1198/* Main content background */ 1199#m-block-pippip-content { 1200 background: white; 1201} 1202 1203/* Page headers - match homepage styling */ 1204.m-banner h1, 1205.m-banner__content h1 { 1206 font-family: 'British Council Arabic', Arial, sans-serif !important; 1207 font-size: 40px !important; 1208 font-weight: 700 !important; 1209 line-height: 1.2; 1210 color: white !important; 1211} 1212 1213/* Page filter labels - black for AAA accessibility */ 1214.o-reactlisting__filters h4, 1215.o-reactlisting__filters--item h4 { 1216 color: #000000 !important; 1217 font-family: 'British Council Arabic', Arial, sans-serif !important; 1218} 1219 1220/* Target by URL containing opportunities */ 1221body { 1222 background-color: #e2dcdc; 1223} 1224 1225 1226/* Global post/item title styling - ensure they inherit section colors */ 1227.o-node .card-title, 1228.o-node .card-title a, 1229.o-teaser .card-title, 1230.o-teaser .card-title a, 1231.o-teaser__content h2, 1232.o-teaser__content h3, 1233.o-teaser-teaser__content h2, 1234.o-teaser-teaser__content h3 { 1235 font-family: 'British Council Arabic', Arial, sans-serif !important; 1236 font-weight: 700 !important; 1237} 1238 1239/* Remove default link colors for post titles */ 1240.card-title a, 1241.o-teaser__content h2 a, 1242.o-teaser-teaser__content h2 a { 1243 text-decoration: none !important; 1244 color: inherit !important; 1245} 1246 1247.card-title a:hover, 1248.o-teaser__content h2 a:hover, 1249.o-teaser-teaser__content h2 a:hover { 1250 color: inherit !important; 1251 opacity: 0.8; 1252} 1253</style> 1254 1255 1256 <body class="d-flex flex-column min-vh-100 1257 page-events ">
vendor: 79 bytes, lines 1257-1259
1257 1258 <noscript> 1259 <iframe src="https://www.googletagmanager.com/ns.html?id=
1259GTM-MMJ4T49P
vendor: 95 bytes, lines 1259-1263
1259" 1260 height="0" width="0" style="display:none;visibility:hidden"></iframe> 1261</noscript> 1262 1263
1263<!-- Navigation --> 1264 <header> 1265 <div class="grid"> 1266 <div class="col-sm-12 no-p"> 1267 <!-- Top Bar --> 1268 <div class="o-header__top-bar"> 1269 <div class="o-header__logo d-inline-flex"> 1270 1271 <a href="/en" title="British Council" rel="home" aria-label="British Council" style="display: flex; align-items: center; height: 42px;"> 1272 <img src="https://saudinow.co/storage/uploads/header_logos/q2y3hzoeSsayCP4UtL149NZ73TOSLUQr5NM9mHy5.png" alt="Header Logo" style="height: 42px; display: block;"> 1273 <div style="width: 2px; height: 100%; background-color: #262437; margin: 0 15px; align-self: stretch;"></div> 1274 <img src="https://saudinow.co/storage/uploads/header_logos/jeV9gJO5GZV69DiQa8KBwuwIQoYSBKh70RRVsOrR.png" alt="Header Logo" style="height: 42px; display: block;"> 1275 </a> 1276 </div> 1277 1278 <div class="o-header__top-actions"> 1279 <button class="o-header__actions--search"> 1280 <span>Search</span> 1281 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 1282 <g fill-rule="evenodd" clip-rule="evenodd" fill="#000000"> 1283 <path d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"></path> 1284 <path d="M15.941 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 11-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"></path> 1285 </g> 1286 </svg> 1287 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 1288 <g fill-rule="evenodd" clip-rule="evenodd" fill="#000000"> 1289 <path d="M15.589 4.41a.833.833 0 010 1.18l-10 10a.833.833 0 01-1.179-1.18l10-10a.833.833 0 011.179 0z"></path> 1290 <path d="M4.41 4.41a.833.833 0 011.179 0l10 10a.834.834 0 01-1.179 1.18l-10-10a.833.833 0 010-1.18z"></path> 1291 </g> 1292 </svg> 1293 </button> 1294 1295 <div class="o-header__language"> 1296 <div class="language-dropdown"> 1297 <button class="language-dropdown-toggle" type="button"> 1298 <span class="current-language"> 1299 English 1300 </span> 1301 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1302 <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1303 </svg> 1304 </button> 1305 <div class="language-dropdown-menu"> 1306 <a href="https://saudinow.co/ar/events" class="language-option"> 1307 Ø§ÙØ¹Ø±Ø¨ÙØ© 1308 </a> 1309 </div> 1310 </div> 1311 </div> 1312 <div class="o-header__actions--more-menu" id="more-menu"> 1313 <button id="mobile-menu-toggle"> 1314 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 1315 <path d="M2.668 16c0-.736.597-1.333 1.333-1.333h24a1.333 1.333 0 110 2.666h-24A1.333 1.333 0 012.668 16zm0-8c0-.736.597-1.333 1.333-1.333h24a1.333 1.333 0 110 2.666h-24A1.333 1.333 0 012.668 8zm0 16c0-.736.597-1.333 1.333-1.333h24a1.333 1.333 0 110 2.666h-24A1.333 1.333 0 012.668 24z" fill-rule="evenodd" clip-rule="evenodd" fill="#23085A"></path> 1316 </svg> 1317 </button> 1318 </div> 1319 <div class="o-header__actions--close-menu" id="close-menu" style="display: none;"> 1320 <button id="mobile-menu-close">
1321 <svg width="25" height="25" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 1322 <g fill-rule="evenodd" clip-rule="evenodd" fill="#23085a"> 1323 <path d="M15.589 4.41a.833.833 0 010 1.18l-10 10a.833.833 0 01-1.179-1.18l10-10a.833.833 0 011.179 0z"></path> 1324 <path d="M4.41 4.41a.833.833 0 011.179 0l10 10a.834.834 0 01-1.179 1.18l-10-10a.833.833 0 010-1.18z"></path> 1325 </g> 1326 </svg> 1327 </button> 1328 </div> 1329 <div class="o-header__actions--contact"> 1330 <a href="https://saudinow.co/en/contact" title="Contact us" class="a-btn--standard">Contact us</a> 1331 </div> 1332 1333 </div> 1334 </div> 1335 1336 <!-- Navigation Bar --> 1337 <div class="o-header__nav-bar"> 1338 <div class="o-header__navigation o-header__navigation--desktop"> 1339 <nav class="m-navigation"> 1340 <ul class="m-navigation__parent"> 1341 <li class="m-navigation__parent--item " 1342 data-menu-item-id="14"> 1343 <a href="https://saudinow.co/en/page/about-us" >About us</a> 1344 </li> 1345 <li class="m-navigation__parent--item " 1346 data-menu-item-id="12"> 1347 <a href="https://saudinow.co/en/page/opportunities" >Opportunities</a> 1348 </li> 1349 <li class="m-navigation__parent--item " 1350 data-menu-item-id="13"> 1351 <a href="https://saudinow.co/en/page/stories" >Stories</a> 1352 </li> 1353 <li class="m-navigation__parent--item " 1354 data-menu-item-id="8"> 1355 <a href="https://saudinow.co/en/page/insights" >Insights</a> 1356 </li> 1357 <li class="m-navigation__parent--item " 1358 data-menu-item-id="9"> 1359 <a href="https://saudinow.co/en/page/resources" >Resources</a> 1360 </li> 1361 <li class="m-navigation__parent--item " 1362 data-menu-item-id="10"> 1363 <a href="https://saudinow.co/en/events" >Events</a> 1364 </li> 1365 </ul> 1366 </nav> 1367 1368 <div class="m-navigation__overlay"> 1369 </div> 1370 </div> 1371 1372 1373 </div> 1374 1375 <!-- Mobile Menu --> 1376 <div class="o-header__navigation o-header__navigation--mobile o-header__mobile-menu" id="mobile-menu"> 1377 <div class="grid"> 1378 <div class="col-sm-12"> 1379 <div class="o-header__language"> 1380 <div class="language-dropdown mobile-language-dropdown"> 1381 <button class="language-dropdown-toggle" type="button">
1382 <span class="current-language"> 1383 English 1384 </span> 1385 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1386 <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1387 </svg> 1388 </button> 1389 <div class="language-dropdown-menu"> 1390 <a href="https://saudinow.co/ar/events" class="language-option"> 1391 Ø§ÙØ¹Ø±Ø¨ÙØ© 1392 </a> 1393 </div> 1394 </div> 1395 </div> 1396 <nav class="m-mobile-navigation"> 1397 <ul class="m-mobile-navigation__parent"> 1398 <li class="m-mobile-navigation__parent--item " 1399 data-menu-item-id="14"> 1400 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/page/about-us" 1401 > 1402 <span>About us</span> 1403 </a> 1404 </li> 1405 <li class="m-mobile-navigation__parent--item " 1406 data-menu-item-id="12"> 1407 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/page/opportunities" 1408 > 1409 <span>Opportunities</span> 1410 </a> 1411 </li> 1412 <li class="m-mobile-navigation__parent--item " 1413 data-menu-item-id="13"> 1414 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/page/stories" 1415 > 1416 <span>Stories</span> 1417 </a> 1418 </li> 1419 <li class="m-mobile-navigation__parent--item " 1420 data-menu-item-id="8"> 1421 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/page/insights" 1422 > 1423 <span>Insights</span> 1424 </a> 1425 </li> 1426 <li class="m-mobile-navigation__parent--item " 1427 data-menu-item-id="9"> 1428 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/page/resources" 1429 > 1430 <span>Resources</span> 1431 </a> 1432 </li> 1433 <li class="m-mobile-navigation__parent--item " 1434 data-menu-item-id="10"> 1435 <a class="m-mobile-navigation__parent--item-link" href="https://saudinow.co/en/events" 1436 >
1437 <span>Events</span> 1438 </a> 1439 </li> 1440 </ul> 1441 </nav> 1442 <div class="o-header__navigation--mobile--contact"> 1443 <a href="https://saudinow.co/en/contact" title="Contact us" class="a-btn--standard">Contact us</a> 1444 </div> 1445 </div> 1446 </div> 1447 </div> 1448 1449 <!-- Mobile Menu Overlay --> 1450 <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div> 1451 1452 <!-- Search Overlay --> 1453 <div class="o-header__search"> 1454 <!-- Close button --> 1455 <button class="o-header__search--close" id="search-close-btn" aria-label="Close search"> 1456 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 1457 <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 1458 </svg> 1459 </button> 1460 1461 <div class="grid"> 1462 <div class="col-md-8 offset-md-2"> 1463 <div class="o-header__search--container"> 1464 <div class="o-header__search--content"> 1465 <h2>Search</h2> 1466 <div class="a-search-bar"> 1467 <form action="https://saudinow.co/en/search" method="GET"> 1468 <button type="submit">Search</button> 1469 <input type="search" name="q" placeholder="Search projects, opportunities and more..."> 1470 </form> 1471 </div> 1472 </div> 1473 </div> 1474 </div> 1475 </div> 1476 </div> 1477 </div> 1478 </div> 1479</header> 1480 1481 1482 <!-- Page Header --> 1483 1484 <!-- Page Content --> 1485 <main id="main-content" class="flex-grow-1"> 1486
1486<script nonce=""> 1487 var mc = document.getElementById('main-content'); 1488 if (mc && mc.style.paddingTop !== '') { mc.style.removeProperty('padding-top'); } 1489 new MutationObserver(function(mutations) { 1490 mutations.forEach(function(m) { 1491 if (m.attributeName === 'style' && mc.style.paddingTop === '0px') { 1492 mc.style.removeProperty('padding-top'); 1493 } 1494 }); 1495 }).observe(mc, { attributes: true, attributeFilter: ['style'] }); 1496 </script>
1496 1497 <section id="m-block-pippip-content" class="m-block m-block--system m-block--system-main-block m-block__ m-"> 1498 <div class="grid" > 1499 <div class="col-sm-12"> 1500 <h2 class="text-left">Events</h2> 1501 <p class="text-left">Discover current and upcoming events in Saudi Arabia's cultural scene.</p> 1502 1503 <h3 class="text-left"></h3> 1504 1505 1506 <div class="filters d-flex align-items-center my-3 pb-10 flex-wrap gap-2"> 1507 1508 1509 <div class="btn-group d-none d-md-flex" role="group" 1510 aria-label="Categories"> 1511 <button type="button" 1512 class="btn category-btn" 1513 data-category="3"> 1514 Literature, Publishing, and Translation 1515 </button> 1516 <button type="button" 1517 class="btn category-btn" 1518 data-category="4"> 1519 Architecture and Design 1520 </button> 1521 <button type="button" 1522 class="btn category-btn" 1523 data-category="5"> 1524 Fashion 1525 </button> 1526 <button type="button" 1527 class="btn category-btn" 1528 data-category="6"> 1529 Heritage 1530 </button> 1531 <button type="button" 1532 class="btn category-btn" 1533 data-category="7"> 1534 Film 1535 </button> 1536 <button type="button" 1537 class="btn category-btn" 1538 data-category="8"> 1539 Visual Arts 1540 </button> 1541 <button type="button" 1542 class="btn category-btn" 1543 data-category="9"> 1544 Museums 1545 </button> 1546 <button type="button" 1547 class="btn category-btn" 1548 data-category="10"> 1549 Theater and Performing Arts 1550 </button> 1551 <button type="button" 1552 class="btn category-btn" 1553 data-category="11"> 1554 Libraries 1555 </button> 1556 <button type="button" 1557 class="btn category-btn" 1558 data-category="13"> 1559 Music 1560 </button> 1561 <button type="button" 1562 class="btn category-btn" 1563 data-category="14"> 1564 Culinary Arts 1565 </button> 1566 <button type="button" 1567 class="btn category-btn" 1568 data-category="15"> 1569 Other 1570 </button> 1571 </div> 1572 1573 1574 <select id="category-dropdown" class="form-select d-md-none"> 1575 <option value="">Select Category</option> 1576 <option value="3"> 1577 Literature, Publishing, and Translation 1578 </option> 1579 <option value="4"> 1580 Architecture and Design 1581 </option> 1582 <option value="5"> 1583 Fashion 1584 </option> 1585 <option value="6"> 1586 Heritage 1587 </option> 1588 <option value="7"> 1589 Film 1590 </option> 1591 <option value="8"> 1592 Visual Arts 1593 </option> 1594 <option value="9"> 1595 Museums 1596 </option> 1597 <option value="10"> 1598 Theater and Performing Arts 1599 </option> 1600 <option value="11"> 1601 Libraries 1602 </option> 1603 <option value="13"> 1604 Music 1605 </option> 1606 <option value="14"> 1607 Culinary Arts 1608 </option> 1609 <option value="15"> 1610 Other 1611 </option> 1612 </select> 1613 1614 1615 <select id="event-filter" class="form-select ms-md-3"> 1616 <option value=""> 1617 Region 1618 </option> 1619 <option value="33"> 1620 Riyadh 1621 </option> 1622 <option value="34"> 1623 Jeddah 1624 </option> 1625 <option value="40"> 1626 Eastern Province 1627 </option> 1628 <option value="41"> 1629 AlUla 1630 </option> 1631 <option value="65"> 1632 Saudi Arabia 1633 </option> 1634 <option value="66"> 1635 United Kingdom 1636 </option> 1637 </select> 1638 1639 1640 <a id="clear-filters" class="ms-auto btn btn-outline-secondary btn-sm">Clear all</a> 1641 1642 1643 <button id="show-all-events" class="btn category-btn"> 1644 <i class="fas fa-calendar-alt me-1"></i>Show All Events 1645 </button> 1646 </div> 1647 1648 1649 <div id="calendar-container" class="calendar my-4"> 1650 <div id="calendar-header" class="d-flex align-items-center"> 1651 <button id="prev-month" class="btn btn-custom-cal">«</button> 1652 <h4 id="calendar-title" class="m-0 flex-fill text-center"></h4> 1653 <button id="next-month" class="btn btn-custom-cal">»</button> 1654 </div> 1655 <div id="calendar-body" class="table-responsive mt-3"></div> 1656 </div> 1657 </div> 1658</div> 1659 1660<section class="m-entity m-entity__highlight-panel--outer-container bgColor events-highlight-section" 1661 > 1662 <div class="grid"> 1663 <div class="col-sm-12"> 1664 <h3 class="mt-5 mb-5 ">Ongoing and Upcoming Events</h3> 1665 1666 1667 <div id="date-selection-indicator" > 1668 <div class="d-flex"> 1669 <i class="fas fa-calendar-day me-2"></i>
1670 <span id="selected-date-text"></span> 1671 <button id="clear-date-selection" class="btn btn-outline-primary btn-sm ms-3"> 1672 <i class="fas fa-times me-1"></i>Show All Events 1673 </button> 1674 </div> 1675 </div> 1676 1677 <div id="formatted-date" class="text-center my-3 pb-10"></div> 1678 <div id="events-list" 1679 class="m-signposts-reference__content m-signposts-reference__content--3"></div> 1680 </div> 1681 </div> 1682</section> 1683 1684 1685
1686<script nonce=""> 1687document.addEventListener('DOMContentLoaded', () => { 1688 1689 /* ======= DOM ======= */ 1690 const catBtns = document.querySelectorAll('.category-btn'); 1691 const catDrop = document.getElementById('category-dropdown'); 1692 const evtFilter = document.getElementById('event-filter'); 1693 const clearAll = document.getElementById('clear-filters'); 1694 const showAllEvts = document.getElementById('show-all-events'); 1695 const dateIndicator = document.getElementById('date-selection-indicator'); 1696 const selectedDateText = document.getElementById('selected-date-text'); 1697 const clearDateBtn = document.getElementById('clear-date-selection'); 1698 1699 const eventsBox = document.getElementById('events-list'); 1700 const calBody = document.getElementById('calendar-body'); 1701 const calTitle = document.getElementById('calendar-title'); 1702 const prevBtn = document.getElementById('prev-month'); 1703 const nextBtn = document.getElementById('next-month'); 1704 const dateBox = document.getElementById('formatted-date'); 1705 1706 const daysHead = ["SUN","MON","TUE","WED","THU","FRI","SAT"]; 1707 1708 /* ======= State ======= */ 1709 let categoryId = ''; 1710 let filterItemId = ''; 1711 let currentMonth = new Date(); 1712 let selectedDate = null; // Track if a specific date is selected 1713 1714 let eventsCache = []; // full event objects 1715 let eventDays = new Set(); // YYYYâMMâDD strings that belong to ANY range 1716 1717 const currentAppLocale = 'en'; // Get current locale 1718 const locale = 'en-US'; 1719 const t = {"from":"From","to":"to","none":"There are currently no upcoming events.","showing_events_for":"Showing events for:","registerNow":"Register Now"}; 1720 1721 /* ======= Helpers ======= */ 1722 const fmtShort = d => d.toLocaleString(locale,{day:'numeric',month:'long'}); 1723 1724 /** walk every day inside each event range and fill a Set */ 1725 const buildEventDateSet = (events) => { 1726 1727 const set = new Set(); 1728 events.forEach(ev => { 1729 ev.dates.forEach(r => { 1730 // Extract pure date strings without timezone conversion 1731 const startDateStr = r.start_date.split('T')[0].split(' ')[0]; 1732 const endDateStr = r.end_date.split('T')[0].split(' ')[0]; 1733 1734 // Work with date strings directly, no Date objects 1735 const startParts = startDateStr.split('-').map(Number); 1736 const endParts = endDateStr.split('-').map(Number); 1737 1738 let currentDate = new Date(startParts[0], startParts[1] - 1, startParts[2]); 1739 const endDate = new Date(endParts[0], endParts[1] - 1, endParts[2]); 1740 1741 while (currentDate <= endDate) { 1742 const year = currentDate.getFullYear();
1743 const month = String(currentDate.getMonth() + 1).padStart(2, '0'); 1744 const day = String(currentDate.getDate()).padStart(2, '0'); 1745 const dateStr = `${year}-${month}-${day}`; 1746 set.add(dateStr); 1747 currentDate.setDate(currentDate.getDate() + 1); 1748 } 1749 }); 1750 }); 1751 1752 1753 return set; 1754 }; 1755 1756 /** draw calendar for whichever month is in `currentMonth` */ 1757 const loadCalendar = () => { 1758 const y = currentMonth.getFullYear(), m = currentMonth.getMonth(); 1759 const firstIdx = new Date(y, m, 1).getDay(); 1760 const daysInMon = new Date(y, m + 1, 0).getDate(); 1761 const todayISO = new Date().toISOString().split('T')[0]; 1762 1763 calTitle.textContent = currentMonth.toLocaleString( 1764 locale === 'ar' ? 'ar' : 'en-US', 1765 {month:'long', year:'numeric'} 1766 ); 1767 calBody.innerHTML = ''; 1768 1769 let html = '<table class="table table-bordered"><thead><tr>'; 1770 daysHead.forEach(h => html += `<th class="text-center">${h}</th>`); 1771 html += '</tr></thead><tbody><tr>'; 1772 1773 for (let i = 0; i < firstIdx; i++) html += '<td></td>'; 1774 1775 for (let d = 1; d <= daysInMon; d++) { 1776 const iso = `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`; 1777 const hasEv = eventDays.has(iso); 1778 1779 html += `<td class="text-center${hasEv?' has-event':''}${iso===todayISO?' today':''}" 1780 data-date="${iso}"> 1781 ${d}${hasEv?'<div class="event-dot"></div>':''} 1782 </td>`; 1783 1784 if ((d + firstIdx) % 7 === 0 && d !== daysInMon) html += '</tr><tr>'; 1785 } 1786 1787 const trailing = 7 - ((daysInMon + firstIdx) % 7); 1788 for (let i = 0; i < trailing && trailing < 7; i++) html += '<td></td>'; 1789 html += '</tr></tbody></table>'; 1790 calBody.innerHTML = html; 1791 1792 // clickâaâday â list events 1793 calBody.querySelectorAll('td[data-date]').forEach(td => { 1794 td.addEventListener('click', () => { 1795 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 1796 td.classList.add('selected'); 1797 selectedDate = td.dataset.date; // Track selected date 1798 1799 // Show date selection indicator 1800 const dateObj = new Date(selectedDate); 1801 selectedDateText.textContent = `${t.showing_events_for} ${dateObj.toLocaleDateString(locale,{day:'numeric',month:'long',year:'numeric'})}`; 1802 dateIndicator.style.display = 'block'; 1803 showAllEvts.style.display = 'inline'; // Show "Show All Events" button 1804 1805 renderEventsForDay(td.dataset.date); 1806 1807 // Animated smooth scroll to events section 1808 // Check if day has events before scrolling 1809 if (eventDays.has(td.dataset.date)) { 1810 setTimeout(() => { 1811 const eventsSection = document.querySelector('.events-highlight-section'); 1812 if (eventsSection) { 1813 const offsetTop = eventsSection.offsetTop - 100; // 100px offset from top for better visibility 1814 window.scrollTo({ 1815 top: offsetTop, 1816 behavior: 'smooth' 1817 }); 1818 } 1819 }, 100); // Small delay to ensure content is rendered 1820 } 1821 }); 1822 }); 1823 }; 1824 1825 /** list all events in `eventsBox`; if `date` passed show heading - shows all events for current category/filter */ 1826 const renderEvents = (list, date='') => { 1827 eventsBox.innerHTML = ''; 1828 dateBox.innerHTML = ''; 1829 1830 if(date){ 1831 dateBox.innerHTML = 1832 `<p><strong>${new Date(date).toLocaleDateString( 1833 locale,{day:'numeric',month:'long',year:'numeric'})}</strong></p>`; 1834 } 1835 1836 if(!list.length){ 1837 eventsBox.innerHTML = `<p class="text-center">${t.none}</p>`; 1838 return; 1839 } 1840 1841 list.forEach(ev => { 1842 /* show the FIRST range in the array, no "futureâonly" cut */ 1843 const [r] = ev.dates 1844 .map(o => ({start:new Date(o.start_date), end:new Date(o.end_date)})) 1845 .sort((a,b)=>a.start - b.start); 1846 1847 const eventUrl = `/${currentAppLocale}/events/${ev.slug}`; 1848 1849 // Create elements safely to avoid CSP issues 1850 const article = document.createElement('article'); 1851 article.className = 'o-node o-opportunity-page o-teaser o-teaser-teaser'; 1852 1853 const thumbLink = document.createElement('a'); 1854 thumbLink.href = eventUrl; 1855 thumbLink.className = 'o-teaser-teaser__thumb o-teaser__thumb'; 1856 1857 const picture = document.createElement('picture'); 1858 const source = document.createElement('source'); 1859 source.setAttribute('data-srcset', ev.image || ''); 1860 source.type = 'image/jpeg'; 1861 1862 const img = document.createElement('img'); 1863 img.src = ev.image || ''; 1864 img.alt = ev.name || ''; 1865 1866 picture.appendChild(source); 1867 picture.appendChild(img); 1868 thumbLink.appendChild(picture); 1869 1870 const content = document.createElement('div'); 1871 content.className = 'o-teaser-teaser__content'; 1872 1873 const titleLink = document.createElement('a'); 1874 titleLink.href = eventUrl; 1875 const title = document.createElement('h2'); 1876 title.textContent = ev.name || ''; 1877 titleLink.appendChild(title); 1878 1879 const dateSpan = document.createElement('span'); 1880 dateSpan.className = 'first-date';
1881 const dateIcon = document.createElement('i'); 1882 dateIcon.className = 'fa fa-calendar-alt'; 1883 dateSpan.appendChild(dateIcon); 1884 dateSpan.appendChild(document.createTextNode(` ${t.from} ${fmtShort(r.start)} ${t.to} ${fmtShort(r.end)}`)); 1885 1886 const locationSpan = document.createElement('span'); 1887 const locationIcon = document.createElement('i'); 1888 locationIcon.className = 'fa fa-map-pin'; 1889 locationSpan.appendChild(locationIcon); 1890 locationSpan.appendChild(document.createTextNode(` ${ev.location || ''}`)); 1891 1892 content.appendChild(titleLink); 1893 content.appendChild(dateSpan); 1894 content.appendChild(locationSpan); 1895 1896 // Add external link button if available 1897 if (ev.external_link && ev.show_external_link_button) { 1898 const externalLinkDiv = document.createElement('div'); 1899 externalLinkDiv.className = 'external-link-container'; 1900 externalLinkDiv.style.marginTop = '10px'; 1901 1902 const externalLinkBtn = document.createElement('a'); 1903 externalLinkBtn.href = ev.external_link; 1904 externalLinkBtn.target = '_blank'; 1905 externalLinkBtn.rel = 'noopener noreferrer'; 1906 externalLinkBtn.className = 'btn btn-primary btn-sm external-link-btn'; 1907 externalLinkBtn.style.cssText = 'background-color: #007bff; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; display: inline-block; font-weight: 500; font-size: 14px; transition: background-color 0.3s;'; 1908 1909 const linkIcon = document.createElement('i'); 1910 linkIcon.className = 'fa fa-external-link-alt'; 1911 linkIcon.style.marginRight = '6px'; 1912 1913 externalLinkBtn.appendChild(linkIcon); 1914 externalLinkBtn.appendChild(document.createTextNode(ev.external_link_label || t.registerNow)); 1915 1916 // Add hover effect 1917 externalLinkBtn.addEventListener('mouseenter', function() { 1918 this.style.backgroundColor = '#0056b3'; 1919 }); 1920 externalLinkBtn.addEventListener('mouseleave', function() { 1921 this.style.backgroundColor = '#007bff'; 1922 }); 1923 1924 externalLinkDiv.appendChild(externalLinkBtn); 1925 content.appendChild(externalLinkDiv); 1926 } 1927 1928 article.appendChild(thumbLink); 1929 article.appendChild(content); 1930 1931 eventsBox.appendChild(article); 1932 }); 1933 }; 1934 1935 /** after clicking a day - shows events for specific date within current category/filter */ 1936 const renderEventsForDay = (isoDate) => { 1937 1938 1939 const list = eventsCache.filter(ev => { 1940 const matchesDate = ev.dates.some(r => { 1941 // Extract pure date strings without timezone conversion (same as buildEventDateSet) 1942 const startDateStr = r.start_date.split('T')[0].split(' ')[0]; 1943 const endDateStr = r.end_date.split('T')[0].split(' ')[0]; 1944 1945 // Work with date strings directly, no timezone conversion 1946 const startParts = startDateStr.split('-').map(Number); 1947 const endParts = endDateStr.split('-').map(Number); 1948 1949 let currentDate = new Date(startParts[0], startParts[1] - 1, startParts[2]); 1950 const endDate = new Date(endParts[0], endParts[1] - 1, endParts[2]); 1951 1952 // Check if clicked date is within the range 1953 const eventDates = []; 1954 while (currentDate <= endDate) { 1955 const year = currentDate.getFullYear();
1956 const month = String(currentDate.getMonth() + 1).padStart(2, '0'); 1957 const day = String(currentDate.getDate()).padStart(2, '0'); 1958 const dateStr = `${year}-${month}-${day}`; 1959 eventDates.push(dateStr); 1960 currentDate.setDate(currentDate.getDate() + 1); 1961 } 1962 1963 const matches = eventDates.includes(isoDate); 1964 return matches; 1965 }); 1966 1967 return matchesDate; 1968 }); 1969 1970 renderEvents(list, isoDate); 1971 }; 1972 1973 /** show all events (clear date selection) */ 1974 const showAllEvents = () => { 1975 selectedDate = null; 1976 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 1977 showAllEvts.style.display = 'none'; 1978 dateIndicator.style.display = 'none'; // Hide date indicator 1979 renderEvents(eventsCache); // Show all events without date filter 1980 }; 1981 1982 /** show all events for current category/filter (clear date selection) */ 1983 const showAllEventsForCurrentFilters = () => { 1984 selectedDate = null; 1985 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 1986 showAllEvts.style.display = 'none'; 1987 dateIndicator.style.display = 'none'; // Hide date indicator 1988 renderEvents(eventsCache); // Show all events for current category/filter 1989 }; 1990 1991 /* ======= AJAX ======= */ 1992 const fetchEvents = () => { 1993 fetch('https://saudinow.co/en/events/fetch', { 1994 method : 'POST', 1995 headers: { 1996 'Content-Type':'application/json', 1997 'X-CSRF-TOKEN':'fMToHKIrUrjJmV5ye0u004uV4X0UtynGZtp3KTSc' 1998 }, 1999 body: JSON.stringify({ 2000 category_id : categoryId, 2001 filter_item_id: filterItemId 2002 }) 2003 }) 2004 .then(r => r.ok ? r.json() : Promise.reject(r.statusText)) 2005 .then(data => { 2006 eventsCache = data; 2007 eventDays = buildEventDateSet(eventsCache); // <<ââ key line 2008 loadCalendar(); 2009 // Always show all events for the selected category/filter, not filtered by date 2010 renderEvents(eventsCache); 2011 }) 2012 .catch(err => { 2013 console.error('Error fetching events:', err); 2014 alert('Failed to fetch events!'); 2015 }); 2016 }; 2017 2018 /* ======= UI listeners ======= */ 2019 const showClear = () => { clearAll.style.display = (categoryId||filterItemId) ? '' : 'none'; }; 2020 2021 prevBtn.addEventListener('click', () => { 2022 currentMonth.setMonth(currentMonth.getMonth()-1); 2023 loadCalendar(); 2024 }); 2025 nextBtn.addEventListener('click', () => { 2026 currentMonth.setMonth(currentMonth.getMonth()+1); 2027 loadCalendar(); 2028 }); 2029 2030 catBtns.forEach(btn => btn.addEventListener('click', () => { 2031 catBtns.forEach(b=>b.classList.remove('active')); 2032 btn.classList.add('active'); 2033 categoryId = btn.dataset.category; 2034 // Clear date selection when category changes 2035 selectedDate = null; 2036 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 2037 showAllEvts.style.display = 'none'; 2038 dateIndicator.style.display = 'none'; 2039 showClear(); fetchEvents(); 2040 })); 2041 catDrop?.addEventListener('change', e => { 2042 const tgt = [...catBtns].find(b => b.dataset.category === e.target.value); 2043 if(tgt) tgt.click(); 2044 }); 2045 evtFilter?.addEventListener('change', e => { 2046 filterItemId = e.target.value; 2047 // Clear date selection when filter changes 2048 selectedDate = null; 2049 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 2050 showAllEvts.style.display = 'none'; 2051 dateIndicator.style.display = 'none'; 2052 showClear(); fetchEvents(); 2053 }); 2054 2055 clearAll.addEventListener('click', () => { 2056 catBtns.forEach(b=>b.classList.remove('active')); 2057 catDrop.value = evtFilter.value = ''; 2058 categoryId = filterItemId = ''; 2059 selectedDate = null; // Clear date selection when clearing filters 2060 calBody.querySelectorAll('td').forEach(c=>c.classList.remove('selected')); 2061 showAllEvts.style.display = 'none'; 2062 dateIndicator.style.display = 'none'; // Hide date indicator 2063 showClear(); fetchEvents(); 2064 }); 2065 clearAll.style.display = 'none'; 2066 2067 // Show all events button (both buttons) - these only appear when a date is selected 2068 showAllEvts.addEventListener('click', showAllEvents); 2069 clearDateBtn.addEventListener('click', showAllEvents); 2070 2071 /* ======= initial ======= */ 2072 // Start with no date selected, showing all events 2073 selectedDate = null; 2074 fetchEvents(); 2075}); 2076</script>
2076 2077 2078<style nonce=""> 2079/* Hidden elements by default */ 2080#show-all-events, 2081#date-selection-indicator { 2082 display: none; 2083} 2084 2085/* Date selection indicator styling */ 2086#date-selection-indicator { 2087 background-color: #f2a19d; 2088 border-radius: 8px; 2089 padding: 15px; 2090 margin-bottom: 20px; 2091} 2092 2093/* Events highlight section background */ 2094.events-highlight-section { 2095 background-color: #c29999; 2096} 2097 2098[dir] .btn-outline-primary { 2099 border-color: #6774DF !important; 2100} 2101 2102@keyframes slideDown { 2103 from { 2104 opacity: 0; 2105 transform: translateY(-10px); 2106 } 2107 to { 2108 opacity: 1; 2109 transform: translateY(0); 2110 } 2111} 2112 2113/* RTL support */ 2114[dir="rtl"] #date-selection-indicator { 2115 border: 2px solid #ad6865; 2116} 2117 2118#date-selection-indicator .d-flex { 2119 gap: 8px; 2120 line-height: 25px; 2121} 2122#formatted-date { 2123 display: none!important; 2124} 2125#date-selection-indicator { 2126 margin-bottom: 40px; 2127} 2128 2129/* Events page headers - match homepage styling */ 2130h2.text-left { 2131 font-family: 'British Council Arabic', Arial, sans-serif !important; 2132 font-size: 40px !important; 2133 font-weight: 700 !important; 2134 color: #000000 !important; 2135 line-height: 1.2; 2136} 2137 2138/* Ongoing and Upcoming Events header - Dark Red */ 2139h3.text-left, 2140h3.mt-5.mb-5 { 2141 font-family: 'British Council Arabic', Arial, sans-serif !important; 2142 font-size: 40px !important; 2143 font-weight: 700 !important; 2144 color: #382525 !important; 2145 line-height: 1.2; 2146} 2147 2148/* Event filter buttons - black to match homepage */ 2149.category-btn, 2150.btn.category-btn, 2151.select-location, 2152#clear-filters, 2153.clear-filters { 2154 color: #000000 !important; 2155 border-color: #000000 !important; 2156} 2157 2158.category-btn:hover, 2159.btn.category-btn:hover, 2160.category-btn:focus, 2161.btn.category-btn:focus { 2162 background-color: #000000 !important; 2163 color: #ffffff !important; 2164 border-color: #000000 !important; 2165} 2166 2167/* Events page background - Saudi Now Off-White */ 2168body { 2169 background-color: #e2dcdc !important; 2170} 2171 2172/* Main filter container - single row with wrapping */ 2173.filters.d-flex { 2174 flex-wrap: wrap !important; 2175 align-items: center !important; 2176 gap: 12px !important; 2177} 2178 2179/* Category button group - inline with dropdown */ 2180.btn-group.d-none.d-md-flex { 2181 display: inline-flex !important; 2182 flex-wrap: wrap !important; 2183 gap: 12px !important; 2184 align-items: center !important; 2185} 2186 2187.category-btn { 2188 flex: 0 0 auto !important; 2189 margin: 0 !important; 2190} 2191 2192/* Region dropdown - same styling as filter buttons */ 2193.select-location, 2194#event-filter, 2195.form-select { 2196 color: #000000 !important; 2197 border: 2px solid #000000 !important; 2198 background-color: #ffffff !important; 2199 display: inline-block !important; 2200 font-size: 12px !important; 2201 font-weight: 600 !important; 2202 padding: 4px 10px !important; 2203 border-radius: 6px !important; 2204 font-family: 'British Council Arabic', Arial, sans-serif !important; 2205 height: auto !important; 2206 margin: 0 !important; 2207 flex: 0 0 auto !important; 2208} 2209 2210/* Override Bootstrap margins */ 2211#event-filter.ms-md-3 { 2212 margin-left: 0 !important; 2213} 2214 2215/* Event titles - match homepage styling */ 2216.o-teaser-teaser__content h2, 2217#events-list .o-teaser-teaser__content h2, 2218.m-signposts-reference__content h2 { 2219 font-family: 'British Council Arabic', Arial, sans-serif !important; 2220 font-size: 18px !important; 2221 font-weight: 700 !important; 2222 color: #382525 !important; 2223 line-height: 24px !important; 2224} 2225 2226/* Event dates and location - black for AAA accessibility */ 2227.o-teaser-teaser__content .first-date, 2228.o-teaser-teaser__content span, 2229#events-list .o-teaser-teaser__content .first-date, 2230#events-list .o-teaser-teaser__content span, 2231.m-signposts-reference__content .first-date, 2232.m-signposts-reference__content span { 2233 color: #000000 !important; 2234 font-family: 'British Council Arabic', Arial, sans-serif !important; 2235} 2236 2237</style> 2238 2239 2240 </div> 2241</div> 2242 </section> 2243 2244 2245 2246 </main> 2247 <!-- Footer --> 2248 <footer style="background-color: #e2dcdc; color: #333; padding: 15px 0 5px;"> 2249 <div class="grid"> 2250 <div class="col-md-12"> 2251 <div class="o-footer" > 2252 2253 <!-- Partners Section --> 2254 <div class="o-footer__partners text-center" style="margin-bottom: 10px;"> 2255 <div style="margin-bottom: 8px;"> 2256 <img src="https://saudinow.co/img/our-partners-heading.png" alt="Our Partners" style="max-width: 400px; height: auto;"> 2257 </div> 2258 <div class="partner-logos-slider" style="max-width: 1000px; margin: 0 auto;"> 2259 <div style="padding: 0 20px;"> 2260 <img src="https://saudinow.co/storage/partners/ZTAVDjkGRYsydI7ioDe4RlmiZzps38NAJ
2260V2ADUkX.png" alt="eunic" style="height: 42px; width: auto;"> 2261 </div> 2262 <div style="padding: 0 20px;"> 2263 <img src="https://saudinow.co/storage/partners/QTv2D9sd2MTwN9izVUWJXBnqyFEu1cpIwNcvuo5J.png" alt="Ithraa" style="height: 42px; width: auto;"> 2264 </div> 2265 <div style="padding: 0 20px;"> 2266 <img src="https://saudinow.co/storage/partners/R9DNjcrieEsNDYIktGFoywlFukcJjokz4lCujvom.png" alt="Manchestercamerata" style="height: 42px; width: auto;"> 2267 </div> 2268 <div style="padding: 0 20px;"> 2269 <img src="https://saudinow.co/storage/partners/VPVuULUYg1qUBsaL2rpDSPMvP6eE5vCjmVWobVI2.png" alt="RCU" style="height: 42px; width: auto;"> 2270 </div> 2271 <div style="padding: 0 20px;"> 2272 <img src="https://saudinow.co/storage/partners/zFYIFq1v1pDtcfZBKGjv5d3syORUhqOmluTTR8rt.png" alt="RSIFF" style="height: 42px; width: auto;"> 2273 </div> 2274 <div style="padding: 0 20px;"> 2275 <img src="https://saudinow.co/storage/partners/jn7zAdaREnEcFJmDyaon3v4r3iJkG04wiKs1MM7i.png" alt="Shubbak" style="height: 42px; width: auto;"> 2276 </div> 2277 <div style="padding: 0 20px;"> 2278 <img src="https://saudinow.co/storage/partners/ACZbVhpzM9CPmQO1NwNHV8ZHdnq7mlTNFXZkjIy1.png" alt="VAC" style="height: 42px; width: auto;"> 2279 </div> 2280 <div style="padding: 0 20px;"> 2281 <img src="https://saudinow.co/storage/partners/E19Mezl9JTg40GSi3s8W76KiVQXK0GBb8AWgv28Y.png" alt="Music Commission" style="height: 42px; width: auto;"> 2282 </div> 2283 </div> 2284 </div> 2285 </div> 2286 </div> 2287 </div> 2288 2289 <!-- Centered Separator Line 1 --> 2290 <div class="o-footer__separator"></div> 2291 2292 <div class="grid"> 2293 <div class="col-md-12"> 2294 <div class="o-footer" > 2295 <!-- Newsletter Section --> 2296 <div class="o-footer__newsletter text-center" style="margin-bottom: 10px;"> 2297 <h3 style="font-size: 18px; font-weight: 900; margin-bottom: 5px; color: #000000 !important; font-family: 'British Council Arabic', Arial, sans-serif;"> 2298 Sign Up to Saudi Now Newsletter 2299 </h3> 2300 <div style="text-align: center;"> 2301 <a href="https://saudinow.co/en/newsletter-sign" 2302 title="Sign up" 2303 class="a-btn--alt" 2304 style="background-color: #000; color: #fff; padding: 0; height: 36px; line-height: 36px; border-radius: 40px; text-decoration: none; font-weight: bold; display: inline-block; font-size: 15px; font-family: 'British Council Arabic', Arial, sans-serif; padding-left: 24px; padding-right: 24px; min-width: 100px;"> 2305 Sign up 2306 </a> 2307 </div> 2308 </div> 2309 </div> 2310 </div> 2311 </div> 2312 2313 <!-- Centered Separator Line 2 --> 2314 <div class="o-footer__separator"></div> 2315 2316 <div class="grid"> 2317 <div class="col-md-12"> 2318 <div class="o-footer" > 2319 <!-- Connect with us & Social Media --> 2320 <div class="o-footer__about--social text-center" style="margin-bottom: 10px;"> 2321 <h3 style="font-size: 18px; font-weight: 900; margin-bottom: 5px; color: #000000 !important; font-family: 'British Council Arabic', Arial, sans-serif;"> 2322 Connect with us 2323 </h3> 2324 <div class="m-social-links" style="display: flex; justify-content: center; gap: 7px;"> 2325 <a href="https://www.instagram.com/britishcouncilksa" rel="nofollow noopener" class="m-social-links__link" 2326 aria-label="Follow us on Instagram" title="Follow us on Instagram" 2327 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2328 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2329 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" clip-rule="evenodd" fill="#fff"><path d="M9.332 4a5.333 5.333 0 00-5.333 5.333v13.333A5.333 5.333 0 009.332 28h13.333A5.333 5.333 0 0028 22.666V9.333A5.333 5.333 0 0022.665 4H9.332zm-8 5.333a8 8 0 018-8h13.333a8 8 0 018 8v13.333a8 8 0 01-8 8H9.332a8 8 0 01-8-8V9.333z"></path><path d="M16.644 11.985a4 4 0 10-1.173 7.914 4 4 0 001.173-7.914zm-3.657-1.96a6.667 6.667 0 116.14 11.834 6.667 6.667 0 01-6.14-11.834zM22 8.666c0-.736.597-1.333 1.333-1.333h.014a1.333 1.333 0 010 2.667h-.014A1.333 1.333 0 0122 8.666z"></path></g></svg> 2330 </div> 2331 </a> 2332 <a href="https://www.youtube.com/@BCMiddleEast" rel="nofollow noopener" class="m-social-links__link" 2333 aria-label="Watch our videos on YouTube" title="Watch our videos on YouTube" 2334 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2335 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2336 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2267_7560)" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
2336<path d="M16 4v2.667h-.1a122.106 122.106 0 00-1.354.01c-.89.009-2.1.028-3.379.066a91.42 91.42 0 00-3.777.179c-1.184.086-2.064.195-2.502.31A2.373 2.373 0 003.25 8.898a37.333 37.333 0 00-.584 6.762v.015a37.33 37.33 0 00.58 6.79 2.374 2.374 0 001.635 1.581c.437.116 1.319.225 2.508.312a91.4 91.4 0 003.777.18 181.273 181.273 0 004.733.075h.201a291.51 291.51 0 001.355-.01c.89-.009 2.1-.028 3.378-.066a91.396 91.396 0 003.777-.179c1.184-.086 2.064-.195 2.503-.31a2.373 2.373 0 001.637-1.666 37.33 37.33 0 00.583-6.71v-.014a37.338 37.338 0 00-.583-6.813 2.373 2.373 0 00-1.624-1.662c-.453-.107-1.336-.205-2.507-.283a100.87 100.87 0 00-3.782-.164 198.842 198.842 0 00-4.444-.068l-.292-.001H16V4h.106a128.787 128.787 0 011.376.009c.9.009 2.127.026 3.427.061 1.298.036 2.68.089 3.887.17 1.173.077 2.286.187 2.987.358l.046.012a5.04 5.04 0 013.536 3.713c.437 2.424.65 4.883.635 7.345a40.007 40.007 0 01-.635 7.235c-.005.03-.011.059-.018.087a5.039 5.039 0 01-3.518 3.626l-.018.005c-.712.19-1.834.311-3.007.397-1.21.088-2.593.146-3.891.185a183.439 183.439 0 01-4.807.077h-.213l-.298-.001a183.439 183.439 0 01-4.508-.076 93.893 93.893 0 01-3.892-.185c-1.172-.086-2.295-.206-3.006-.397l-.008-.002a5.04 5.04 0 01-3.517-3.48 1.332 1.332 0 01-.03-.129A40 40 0 010 15.666a40 40 0 01.634-7.29l.019-.086A5.04 5.04 0 014.17 4.664l.019-.005c.711-.19 1.834-.311 3.006-.397a93.996 93.996 0 013.892-.185A184.133 184.133 0 0115.894 4h.107z"></path><path d="M12.33 10.154c.411-.238.918-.24 1.33-.006l7.667 4.36a1.333 1.333 0 010 2.318l-7.667 4.36a1.333 1.333 0 01-1.992-1.159v-8.72c0-.475.253-.914.663-1.153zm2.005 3.445v4.136l3.636-2.068-3.636-2.068z"></path></g><defs><clipPath id="clip0_2267_7560"><path fill="#fff" d="M0 0h32v32H0z"></path></clipPath></defs></svg> 2337 </div> 2338 </a> 2339 <a href="https://www.facebook.com/BritishCouncilSaudiArabia/" rel="nofollow noopener" class="m-social-links__link" 2340 aria-label="Like us on Facebook" title="Like us on Facebook" 2341 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2342 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2343 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.343 3.676A8 8 0 0120 1.333h4c.736 0 1.333.597 1.333 1.333V8c0 .736-.597 1.333-1.333 1.333h-4V12h4a1.333 1.333 0 011.294 1.656L23.96 18.99A1.333 1.333 0 0122.667 20H20v9.333c0 .736-.597 1.333-1.333 1.333h-5.334A1.333 1.333 0 0112 29.333V20H9.333A1.333 1.333 0 018 18.666v-5.333C8 12.597 8.597 12 9.333 12H12V9.333a8 8 0 012.343-5.657zM20 4a5.333 5.333 0 00-5.333 5.333v4c0 .736-.597 1.333-1.334 1.333h-2.666v2.667h2.666c.737 0 1.334.597 1.334 1.333V28h2.666v-9.334c0-.736.597-1.333 1.334-1.333h2.959l.666-2.667h-3.625a1.333 1.333 0 01-1.334-1.333v-4A2.667 2.667 0 0120 6.666h2.667V4H20z" fill="#fff"></path></svg> 2344 </div> 2345 </a> 2346 <a href="https://x.com/ksaBritish" rel="nofollow noopener" class="m-social-links__link" 2347 aria-label="Follow us on X (Twitter)" title="Follow us on X (Twitter)" 2348 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2349 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2350 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.844 26.464l-7.825-12.298 7.721-8.494a1 1 0 00-1.48-1.345l-7.355 8.09-5.061-7.953A1 1 0 0012 4H6a1 1 0 00-.843 1.537l7.825 12.297-7.722 8.5a1 1 0 101.48 1.345l7.355-8.09 5.062 7.954A1 1 0 0020 28h6a1 1 0 00.844-1.536zM20.549 26L7.822 6h3.625l12.732 20h-3.63z" fill="#fff"></path></svg> 2351 </div> 2352 </a> 2353 <a href="https://www.tiktok.com/@britishcouncilmena" rel="nofollow noopener" class="m-social-links__link" 2354 aria-label="Follow us on TikTok" title="Follow us on TikTok" 2355 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2356 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2357 <svg width="32" height="32" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"> 2358 <path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" fill="#fff"></path> 2359</svg> 2360 </div> 2361 </a> 2362 2363 <!-- Email/Contact Icon --> 2364 <a href="https://saudinow.co/en/contact" rel="nofollow noopener" class="m-social-links__link" 2365 aria-label="Contact us via email" 2366 style="width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> 2367 <div style="width: 25px; height: 32px; display: flex; align-items: center; justify-content: center;"> 2368 <svg width="16" height="16" viewB
2368ox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 2369 <path fill-rule="evenodd" clip-rule="evenodd" d="M5.333 7.333A2.667 2.667 0 002.667 10v12A2.667 2.667 0 005.333 24.667h21.334A2.667 2.667 0 0029.333 22V10a2.667 2.667 0 00-2.666-2.667H5.333zm.886 3.423a.667.667 0 01.895-.295L16 14.902l8.886-4.441a.667.667 0 01.596 1.19l-9.333 4.668a.667.667 0 01-.596 0l-9.334-4.667a.667.667 0 01-.295-.896z" fill="#fff"/> 2370 </svg> 2371 </div> 2372 </a> 2373 </div> 2374 </div> 2375 </div> 2376 </div> 2377 </div> 2378 2379 <!-- Centered Separator Line 3 --> 2380 <div class="o-footer__separator"></div> 2381 2382 <div class="grid"> 2383 <div class="col-md-12"> 2384 <div class="o-footer" > 2385 <!-- Footer Links --> 2386 <div class="o-footer__about text-center" style="margin-bottom: 8px;"> 2387 <!-- Main Navigation Links --> 2388 <div class="footer-about-links"> 2389 <ul class="menu" style="list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 15px 25px; justify-content: center;"> 2390 <li style="display: inline-block; margin: 0;"> 2391 <a href="https://saudinow.co/en/page/about-us" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >About us</a> 2392 </li> 2393 <li style="display: inline-block; margin: 0;"> 2394 <a href="https://saudinow.co/en/page/opportunities" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >Opportunities</a> 2395 </li> 2396 <li style="display: inline-block; margin: 0;"> 2397 <a href="https://saudinow.co/en/page/stories" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >Stories</a> 2398 </li> 2399 <li style="display: inline-block; margin: 0;"> 2400 <a href="https://saudinow.co/en/page/insights" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >Insights</a> 2401 </li> 2402 <li style="display: inline-block; margin: 0;"> 2403 <a href="https://saudinow.co/en/page/resources" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >
2403Resources</a> 2404 </li> 2405 <li style="display: inline-block; margin: 0;"> 2406 <a href="https://saudinow.co/en/events" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;" >Events</a> 2407 </li> 2408 </ul> 2409 </div> 2410 2411 <!-- Secondary Footer Links --> 2412 <div class="footer-secondary-links"> 2413 <ul class="menu" style="list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 15px 25px; justify-content: center;"> 2414 <li style="display: inline-block; margin: 0;"> 2415 <a href="/en/page/accessibility" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">Accessibility</a> 2416 </li> 2417 <li style="display: inline-block; margin: 0;"> 2418 <a href="https://www.britishcouncil.org/terms" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">Terms of use</a> 2419 </li> 2420 <li style="display: inline-block; margin: 0;"> 2421 <a href="/en/cookies" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">Cookies</a> 2422 </li> 2423 <li style="display: inline-block; margin: 0;"> 2424 <a href="https://www.britishcouncil.org/statement-slavery" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">Modern Slavery Statement</a> 2425 </li> 2426 <li style="display: inline-block; margin: 0;"> 2427 <a href="https://www.britishcouncil.org/about-us/how-we-work/policies/safeguarding" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">Safeguarding Policy Statement</a> 2428 </li> 2429 <li style="display: inline-block; margin: 0;"> 2430 <a href="https://www.britishcouncil.org/about-us/our-values/equality-diversity-inclusion" style="color: #000; text-decoration: none; font-weight: 500; font-size: 14px; font-family: 'British Council Arabic', Arial, sans-serif;">EDI</a> 2431 </li> 2432 </ul> 2433 </div> 2434 </div> 2435 </div> 2436 </div> 2437 </div> 2438 2439 <!-- Centered Separator Line 4 --> 2440 <div class="o-footer__separator"></div> 2441 2442 <div class="grid"> 2443 <div class="col-md-12"> 2444 <div class="o-footer" > 2445 2446 2447 2448 2449 2450 2451 2452 </div> 2453 2454 2455 2456 2457 2458 2459 <!-- Copyright & Charity Info --> 2460 <div class="o-footer__bottom text-center" style="padding-top: 0;"> 2461 <div class="o-footer__bottom--content" style="font-size: 12px; color: #000; line-height: 1.4; font-family: 'British Council Arabic', Arial, sans-serif; font-weight: 400;"> 2462 <p style="margin: 4px 0; color: #000;">© British Council 2025. The United Kingdom's international organisation for cultural relations and educational opportunities.</p> 2463 <p style="margin: 4px 0; color: #000;">A registered charity: 209131 (England and Wales) SC037733 (Scotland).</p> 2464 </div> 2465 </div> 2466 2467 </div> 2468 </div> 2469 </div> 2470 </footer> 2471 2472 2473 2474 2475
2475<script src="https://saudinow.co/js/custom.js"></script>
2475 2476 2477 <!-- Scripts --> 2478
2478<script src="https://saudinow.co/js/vendor/bootstrap-5.3.0.bundle.min.js"></script>
2478 2479 2480 <!-- Select2 JS --> 2481 2482
2482<script src="https://saudinow.co/js/vendor/jquery-3.6.0.min.js"></script>
2482 2483 <!-- Select2 JS --> 2484
2484<script src="https://saudinow.co/js/vendor/select2-4.1.0-rc.0.min.js"></script>
2484 2485
2485<script src="https://saudinow.co/js/vendor/quill-1.3.6.min.js"></script>
2485 2486 2487
2487<script type="text/javascript" src="https://saudinow.co/js/vendor/slick-1.8.1.min.js"></script>
2487 2488 2489
2489<script nonce=""> 2490 document.addEventListener('DOMContentLoaded', function() { 2491 try { 2492 const toggleButton = document.getElementById('mobile-menu-toggle'); 2493 const closeButton = document.getElementById('mobile-menu-close'); 2494 const mobileMenu = document.getElementById('mobile-menu'); 2495 const moreMenu = document.getElementById('more-menu'); 2496 const closeMenu = document.getElementById('close-menu'); 2497 2498 // Store scroll position 2499 let scrollPosition = 0; 2500 2501 // Enhanced scroll prevention 2502 function preventScroll(e) { 2503 e.preventDefault(); 2504 e.stopPropagation(); 2505 return false; 2506 } 2507 2508 function disableScroll() { 2509 // Store current scroll position 2510 scrollPosition = window.pageYOffset || document.documentElement.scrollTop; 2511 2512 // Apply styles to prevent scrolling 2513 document.body.classList.add('no-scroll'); 2514 document.body.classList.add('mobile-menu-open'); 2515 document.documentElement.classList.add('no-scroll'); 2516 2517 // Set the body to fixed position at current scroll position 2518 document.body.style.top = `-${scrollPosition}px`; 2519 2520 // Prevent touch events on mobile 2521 document.addEventListener('touchmove', preventScroll, { passive: false }); 2522 document.addEventListener('wheel', preventScroll, { passive: false }); 2523 document.addEventListener('scroll', preventScroll, { passive: false }); 2524 } 2525 2526 function enableScroll() { 2527 // Remove classes and event listeners 2528 document.body.classList.remove('no-scroll'); 2529 document.body.classList.remove('mobile-menu-open'); 2530 document.documentElement.classList.remove('no-scroll'); 2531 2532 // Reset body styles 2533 document.body.style.top = ''; 2534 2535 // Restore scroll position 2536 window.scrollTo(0, scrollPosition); 2537 2538 // Remove event listeners 2539 document.removeEventListener('touchmove', preventScroll); 2540 document.removeEventListener('wheel', preventScroll); 2541 document.removeEventListener('scroll', preventScroll); 2542 } 2543 2544 // Function to open mobile menu 2545 function openMobileMenu() { 2546 if (mobileMenu) { 2547 mobileMenu.classList.add('active'); 2548 } 2549 if (moreMenu) { 2550 moreMenu.style.display = 'none'; 2551 } 2552 if (closeMenu) { 2553 closeMenu.style.display = 'block'; 2554 } 2555 disableScroll(); 2556 } 2557 2558 // Function to close mobile menu 2559 function closeMobileMenu() { 2560 if (mobileMenu) { 2561 mobileMenu.classList.remove('active'); 2562 } 2563 if (moreMenu) { 2564 moreMenu.style.display = 'block'; 2565 } 2566 if (closeMenu) { 2567 closeMenu.style.display = 'none'; 2568 } 2569 enableScroll(); 2570 2571 // Close all open submenus 2572 document.querySelectorAll('.m-mobile-navigation__parent--item-children.active').forEach(item => { 2573 item.classList.remove('active'); 2574 }); 2575 } 2576 2577 // Open menu when hamburger is clicked 2578 if (toggleButton) { 2579 toggleButton.addEventListener('click', function(e) { 2580 e.preventDefault(); 2581 e.stopPropagation(); 2582 openMobileMenu(); 2583 }); 2584 } 2585 2586 // Close menu when close button is clicked 2587 if (closeButton) { 2588 closeButton.addEventListener('click', function(e) { 2589 e.preventDefault(); 2590 e.stopPropagation(); 2591 closeMobileMenu(); 2592 }); 2593 } 2594 2595 // Close menu when escape key is pressed 2596 document.addEventListener('keydown', function(e) { 2597 if (e.key === 'Escape' && mobileMenu && mobileMenu.classList.contains('active')) { 2598 closeMobileMenu(); 2599 } 2600 }); 2601 2602 // Handle submenu toggles on mobile - only for parent items with children 2603 document.querySelectorAll('.m-mobile-navigation__parent--item-children > .m-mobile-navigation__parent--item-link').forEach(parentLink => { 2604 parentLink.addEventListener('click', function(e) { 2605 e.preventDefault(); 2606 e.stopPropagation(); 2607 2608 const parentItem = this.closest('.m-mobile-navigation__parent--item-children'); 2609 2610 // Close other open submenus 2611 document.querySelectorAll('.m-mobile-navigation__parent--item-children.active').forEach(otherItem => { 2612 if (otherItem !== parentItem) { 2613 otherItem.classList.remove('active'); 2614 } 2615 }); 2616 2617 // Toggle this submenu 2618 parentItem.classList.toggle('active'); 2619 }); 2620 }); 2621 2622 // Handle clicks on regular menu items (no children) - allow normal navigation 2623 document.querySelectorAll('.m-mobile-navigation__parent--item:not(.m-mobile-navigation__parent--item-children) .m-mobile-navigation__parent--item-link').forEach(link => { 2624 link.addEventListener('click', function(e) { 2625 // Allow normal navigation and close menu after a short delay 2626 setTimeout(() => { 2627 closeMobileMenu(); 2628 }, 50); 2629 }); 2630 }); 2631
2632 // Handle clicks on submenu child links - allow normal navigation 2633 document.querySelectorAll('.m-mobile-navigation__parent--child a').forEach(link => { 2634 link.addEventListener('click', function(e) { 2635 // Allow normal navigation and close menu after a short delay 2636 setTimeout(() => { 2637 closeMobileMenu(); 2638 }, 50); 2639 }); 2640 }); 2641 2642 // Search functionality 2643 const searchButton = document.querySelector('.o-header__actions--search'); 2644 const searchOverlay = document.querySelector('.o-header__search'); 2645 const searchCloseBtn = document.querySelector('#search-close-btn'); 2646 2647 if (searchButton && searchOverlay) { 2648 searchButton.addEventListener('click', function(e) { 2649 e.preventDefault(); 2650 searchOverlay.classList.toggle('active'); 2651 2652 // Close mobile menu if it's open 2653 if (mobileMenu && mobileMenu.classList.contains('active')) { 2654 closeMobileMenu(); 2655 } 2656 }); 2657 } 2658 2659 // Close search overlay functionality 2660 if (searchCloseBtn && searchOverlay) { 2661 searchCloseBtn.addEventListener('click', function(e) { 2662 e.preventDefault(); 2663 searchOverlay.classList.remove('active'); 2664 }); 2665 } 2666 2667 // Close search overlay when clicking outside 2668 document.addEventListener('click', function(e) { 2669 if (searchOverlay && searchOverlay.classList.contains('active')) { 2670 if (!searchOverlay.contains(e.target) && !searchButton.contains(e.target)) { 2671 searchOverlay.classList.remove('active'); 2672 } 2673 } 2674 }); 2675 2676 // Partner logos slider - removed from here, will be handled separately below 2677 2678 // Handle window resize and orientation change 2679 window.addEventListener('resize', function() { 2680 if (window.innerWidth > 768 && mobileMenu && mobileMenu.classList.contains('active')) { 2681 closeMobileMenu(); 2682 } 2683 }); 2684 2685 // Handle orientation change specifically 2686 window.addEventListener('orientationchange', function() { 2687 // Small delay to allow viewport to settle after rotation 2688 setTimeout(function() { 2689 if (mobileMenu && mobileMenu.classList.contains('active')) { 2690 // Recalculate positioning after orientation change 2691 mobileMenu.style.height = '100vh'; 2692 2693 // If landscape and small height, close menu for better UX 2694 if (window.innerHeight < 450 && window.innerWidth > window.innerHeight) { 2695 // Optional: auto-close in landscape if too cramped 2696 // closeMobileMenu(); 2697 } 2698 } 2699 }, 100); 2700 }); 2701 2702 // Language dropdown functionality 2703 document.querySelectorAll('.language-dropdown').forEach(dropdown => { 2704 const toggle = dropdown.querySelector('.language-dropdown-toggle'); 2705 const menu = dropdown.querySelector('.language-dropdown-menu'); 2706 2707 if (toggle && menu) { 2708 // Toggle dropdown on button click 2709 toggle.addEventListener('click', function(e) { 2710 e.preventDefault(); 2711 e.stopPropagation(); 2712 2713 // Close other dropdowns 2714 document.querySelectorAll('.language-dropdown.active').forEach(otherDropdown => { 2715 if (otherDropdown !== dropdown) { 2716 otherDropdown.classList.remove('active'); 2717 } 2718 }); 2719 2720 // Toggle current dropdown 2721 dropdown.classList.toggle('active'); 2722 }); 2723 } 2724 }); 2725 2726 // Close language dropdown when clicking outside 2727 document.addEventListener('click', function(e) { 2728 if (!e.target.closest('.language-dropdown')) { 2729 document.querySelectorAll('.language-dropdown.active').forEach(dropdown => { 2730 dropdown.classList.remove('active'); 2731 }); 2732 } 2733 }); 2734 2735 // Close dropdown on escape key 2736 document.addEventListener('keydown', function(e) { 2737 if (e.key === 'Escape') { 2738 document.querySelectorAll('.language-dropdown.active').forEach(dropdown => { 2739 dropdown.classList.remove('active'); 2740 }); 2741 } 2742 }); 2743 } catch (error) { 2744 console.warn('Menu initialization error:', error); 2745 } 2746 }); 2747 </script>
2747 2748 2749 <!-- Separate jQuery script block for partner logos slider --> 2750
2750<script nonce=""> 2751 // Wait for jQuery to be loaded 2752 $(document).ready(function() { 2753 // Partner logos slider - jQuery code 2754 if ($('.partner-logos-slider').length > 0) { 2755 $('.partner-logos-slider').slick({ 2756 slidesToShow: 5, 2757 slidesToScroll: 2, 2758 autoplay: true, 2759 arrows: true, 2760 dots: true, 2761 infinite: true, 2762 rtl: false, 2763 responsive: [ 2764 { 2765 breakpoint: 768, 2766 settings: { 2767 slidesToShow: 2, 2768 slidesToScroll: 1 2769 } 2770 }, 2771 { 2772 breakpoint: 480, 2773 settings: { 2774 slidesToShow: 1, 2775 slidesToScroll: 1 2776 } 2777 } 2778 ] 2779 }); 2780 } 2781 }); 2782 </script>
2782 2783 2784 <!-- Global error handler to catch unhandled JavaScript errors --> 2785
2785<script nonce=""> 2786 // Global error handler to prevent page breaking 2787 window.addEventListener('error', function(e) { 2788 if (e.message && e.message.includes("Cannot read properties of null (reading 'addEventListener')")) { 2789 console.warn('Caught addEventListener null error:', e.filename, 'line:', e.lineno); 2790 e.preventDefault(); 2791 return true; // Prevents the error from appearing in console 2792 } 2793 }); 2794 2795 // Also catch unhandled promise rejections 2796 window.addEventListener('unhandledrejection', function(e) { 2797 console.warn('Unhandled promise rejection:', e.reason); 2798 e.preventDefault(); 2799 }); 2800 </script>
2800 2801 2802 <!-- CSP-compliant logout functionality --> 2803
2803<script nonce=""> 2804 document.addEventListener('DOMContentLoaded', function() { 2805 try { 2806 // Handle logout links 2807 document.querySelectorAll('.logout-link').forEach(function(link) { 2808 link.addEventListener('click', function(event) { 2809 event.preventDefault(); 2810 // Find the closest form and submit it 2811 const form = this.closest('form'); 2812 if (form) { 2813 form.submit(); 2814 } 2815 }); 2816 }); 2817 } catch (error) { 2818 console.warn('Logout functionality error:', error); 2819 } 2820 }); 2821 </script>
2821 2822 2823 2824
2824<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"1c67476341e14b41a228c236b8663230","r":1,"spa":2}' crossorigin="anonymous"></script>
2824 2825</body> 2826</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.