/* ═══════════════════════════════════════════════ SSAM — Public homepage (index.html) ─────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:'Almarai',sans-serif;background:#fff;color:#111827;overflow-x:hidden;direction:rtl;} /* ── NAV ── */ nav{position:fixed;top:0;right:0;left:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);padding:0 2rem;display:flex;align-items:center;gap:0;height:68px;border-bottom:1px solid var(--bd);box-shadow:0 1px 0 rgba(0,0,0,.06);} /* logo on right, links right after it */ .nav-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0;} .nav-brand img{width:38px;height:38px;object-fit:contain;} .nav-brand-text .t1{font-size:.82rem;font-weight:800;color:var(--gd);line-height:1.2;} .nav-brand-text .t2{font-size:.55rem;color:var(--go);} .nav-menu{display:flex;align-items:center;gap:1.25rem;margin-inline-start:1.5rem;flex:1;} .nav-menu a{color:var(--tl);font-size:.8rem;font-weight:700;text-decoration:none;transition:color .2s;white-space:nowrap;} .nav-menu a:hover{color:var(--g);} .nav-actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto;flex-shrink:0;} .nav-lang{font-size:.7rem;color:var(--tl);cursor:pointer;padding:.28rem .55rem;border:1px solid var(--bd);border-radius:50px;transition:all .2s;background:none;font-family:inherit;} .nav-lang:hover{color:var(--g);border-color:var(--g);} /* Theme toggle — icon-only, sits next to .nav-lang in nav-actions. Same circular shape, slightly larger touch target for the emoji. On mobile this stays visible (single character, takes minimal width) whereas .nav-lang is hidden into the drawer. */ .nav-theme{font-size:.9rem;line-height:1;color:var(--tl);cursor:pointer;padding:.22rem .42rem;border:1px solid var(--bd);border-radius:50px;transition:all .2s;background:none;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;} .nav-theme:hover{border-color:var(--g);transform:scale(1.05);} .nav-join{background:var(--go);color:#fff !important;padding:.38rem 1rem;border-radius:50px;font-size:.76rem;font-weight:800 !important;white-space:nowrap;} .nav-join:hover{background:var(--gg) !important;} .nav-login{color:var(--go) !important;font-size:.73rem !important;border:1.5px solid var(--go);padding:.32rem .8rem;border-radius:50px;white-space:nowrap;} .nav-login:hover{background:var(--gob);color:var(--go) !important;} .nav-hamburger{display:none;background:none;border:none;color:var(--gd);font-size:1.3rem;cursor:pointer;padding:.25rem;} .mobile-nav{display:none;position:fixed;top:68px;right:0;left:0;background:#fff;z-index:199;padding:1rem 1.5rem;flex-direction:column;gap:.75rem;border-bottom:1px solid var(--bd);box-shadow:0 8px 24px rgba(0,0,0,.08);} .mobile-nav.open{display:flex;} .mobile-nav a{color:var(--tl);font-size:.9rem;font-weight:600;text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--bd);display:block;} /* toggleLang() flips data-en/data-ar elements to display:inline globally; force display:block back on drawer anchors so each link renders as a full-width row with its border and padding intact. Anchored to `body` instead of `:not(.en-lang)` directly — the latter would match the element too (which never has the class) and incorrectly trigger in EN mode. */ .mobile-nav a[data-ar], .mobile-nav a[data-en]{display:none;} body:not(.en-lang) .mobile-nav a[data-ar]{display:block !important;} body.en-lang .mobile-nav a[data-en]{display:block !important;} /* ── HERO ── */ .hero{min-height:100vh;background:linear-gradient(160deg,#0a2814,var(--gd) 40%,#1a5c2e 70%,#0d3318);display:flex;align-items:center;justify-content:center;padding:100px 2rem 4rem;position:relative;overflow:hidden;text-align:center;} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 25% 40%,rgba(184,147,42,.1),transparent 60%),radial-gradient(ellipse 40% 60% at 75% 65%,rgba(26,92,46,.2),transparent 55%);pointer-events:none;} .hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;} .hero-logo{display:block;width:170px;height:170px;margin:0 auto 2rem;filter:drop-shadow(0 8px 28px rgba(0,0,0,.45));object-fit:contain;} .hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(184,147,42,.14);border:1px solid rgba(184,147,42,.28);color:rgba(201,160,50,.9);font-size:.73rem;font-weight:700;padding:.3rem .9rem;border-radius:50px;margin-bottom:1.4rem;} .hero h1{font-size:clamp(1.85rem,4.5vw,3.2rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:.35rem;} .hero h2{font-size:clamp(1rem,2vw,1.5rem);font-weight:400;color:rgba(255,255,255,.5);margin-bottom:.8rem;letter-spacing:.03em;} .hero-desc{font-size:clamp(.88rem,1.7vw,1rem);color:rgba(255,255,255,.6);line-height:1.85;margin-bottom:2.25rem;max-width:560px;margin-right:auto;margin-left:auto;} .hero-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.75rem;} .btn-primary{background:var(--go);color:#fff;padding:.72rem 2rem;border-radius:50px;font-size:.9rem;font-weight:800;text-decoration:none;box-shadow:0 4px 20px rgba(184,147,42,.4);transition:all .22s;} .btn-primary:hover{background:var(--gg);transform:translateY(-2px);} .btn-secondary{background:rgba(255,255,255,.09);color:#fff;padding:.72rem 2rem;border-radius:50px;font-size:.9rem;font-weight:700;text-decoration:none;border:1.5px solid rgba(255,255,255,.22);transition:all .22s;} .btn-secondary:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);} .hero-stats{display:flex;gap:2.25rem;justify-content:center;flex-wrap:wrap;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08);} .stat-n{font-size:1.85rem;font-weight:800;color:var(--gg);line-height:1;} .stat-l{font-size:.7rem;color:rgba(255,255,255,.5);margin-top:.22rem;} .stat-l-en{font-size:.62rem;color:rgba(255,255,255,.3);} /* ── SECTIONS ── */ section{padding:5rem 2rem;} .section-inner{max-width:1100px;margin:0 auto;} .eyebrow{display:inline-block;background:var(--gl);color:var(--g);font-size:.7rem;font-weight:800;padding:.27rem .8rem;border-radius:50px;margin-bottom:.85rem;letter-spacing:.05em;text-transform:uppercase;} .eyebrow.gold{background:rgba(184,147,42,.1);color:var(--go);} .section-title{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;color:var(--gd);margin-bottom:.3rem;line-height:1.25;} .section-title-en{font-size:clamp(.8rem,1.5vw,1rem);font-weight:400;color:var(--tm);margin-bottom:.7rem;} .section-desc{font-size:.95rem;color:var(--tl);line-height:1.82;max-width:560px;} /* ── ABOUT ── */ .about{background:#fff;} .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center;margin-top:3rem;} .about-body p{font-size:.94rem;color:var(--tl);line-height:1.88;margin-bottom:1rem;} .about-body p:last-child{margin:0;} /* Accent bar with a green stripe on the reading-start side. The * matching rounded corners live on the SAME side as the stripe so it * reads as a single "anchored" edge — preserves the original RTL look * (stripe + rounded both on the right) and auto-flips in English mode * (stripe + rounded both on the left). */ .sacm-bar{background:var(--gl);border-inline-start:3px solid var(--g);border-start-start-radius:var(--rs);border-end-start-radius:var(--rs);border-start-end-radius:0;border-end-end-radius:0;padding:.7rem 1rem;font-size:.82rem;color:var(--gd);font-weight:700;margin-top:1.4rem;display:flex;justify-content:space-between;align-items:center;} .sacm-bar span{font-size:.68rem;color:var(--tm);direction:ltr;} .kpis{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;} .kpi{background:var(--gl);border-radius:var(--r);padding:1.25rem;border:1px solid rgba(26,92,46,.1);} .kpi-n{font-size:1.6rem;font-weight:800;color:var(--g);line-height:1;} .kpi-l{font-size:.75rem;color:var(--tl);margin-top:.18rem;} .kpi-l-en{font-size:.63rem;color:var(--tm);} /* ── EVENTS ── */ .events{background:#f8faf8;} .events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:3rem;} .ev-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid #e8f0e8;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;} .ev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} .ev-hdr{padding:1.25rem;color:#fff;position:relative;} .ev-hdr.green{background:linear-gradient(135deg,var(--gd),#2a8f48);} .ev-hdr.gold{background:linear-gradient(135deg,#7a5000,#d4992e);} .ev-hdr.blue{background:linear-gradient(135deg,#0a1a3c,#1d4ed8);} .ev-month{font-size:.67rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;} .ev-month-en{font-size:.6rem;color:rgba(255,255,255,.35);} .ev-name{font-size:.98rem;font-weight:800;margin-top:.22rem;line-height:1.3;} .ev-name-en{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:.15rem;} .ev-badge{position:absolute;top:.85rem;left:.85rem;background:var(--go);color:#fff;font-size:.58rem;font-weight:800;padding:.15rem .42rem;border-radius:50px;} .ev-body{padding:1.2rem;flex:1;display:flex;flex-direction:column;} .ev-meta{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.8rem;} .ev-meta-row{font-size:.77rem;color:var(--tm);display:flex;gap:.4rem;align-items:flex-start;} .ev-dot{width:4px;height:4px;border-radius:50%;background:var(--go);flex-shrink:0;margin-top:.42rem;} .ev-desc{font-size:.83rem;color:var(--tl);line-height:1.68;flex:1;} .ev-foot{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;} .ev-tag{background:var(--gl);color:var(--g);font-size:.67rem;font-weight:700;padding:.18rem .58rem;border-radius:50px;} .ev-tag.gold{background:rgba(184,147,42,.1);color:var(--go);} .ev-btn{background:var(--g);color:#fff;font-size:.75rem;font-weight:700;padding:.3rem .82rem;border-radius:50px;text-decoration:none;transition:background .18s;} .ev-btn:hover{background:var(--gm);} /* ── MEMBERSHIP ── */ .membership{background:#fff;} .mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:3rem;} .mb-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem;} .mb-item{display:flex;gap:.75rem;align-items:flex-start;} .mb-dot{width:6px;height:6px;border-radius:50%;background:var(--go);flex-shrink:0;margin-top:.5rem;} .mb-text{font-size:.9rem;color:var(--tl);line-height:1.65;} .mb-text-en{font-size:.75rem;color:var(--tm);} .mb-cta{background:linear-gradient(135deg,var(--gd),var(--gm));border-radius:var(--r);padding:2.25rem;color:#fff;text-align:center;} .mb-cta h3{font-size:1.1rem;font-weight:800;margin-bottom:.3rem;} .mb-cta h3 span{font-size:.82rem;font-weight:400;color:rgba(255,255,255,.5);display:block;margin-top:.15rem;} .mb-cta p{font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.72;margin:.85rem 0 1.75rem;} .btn-join{display:inline-block;background:var(--go);color:#fff;padding:.72rem 2.25rem;border-radius:50px;font-size:.9rem;font-weight:800;text-decoration:none;transition:all .2s;box-shadow:0 4px 16px rgba(184,147,42,.4);} .btn-join:hover{background:var(--gg);transform:translateY(-2px);} .mb-note{font-size:.72rem;color:rgba(255,255,255,.38);margin-top:.9rem;} /* ── COMMITTEES ── */ .committees{background:#f8faf8;} .com-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.15rem;margin-top:3rem;} .com-card{background:#fff;border-radius:var(--r);padding:1.25rem;border:1.5px solid var(--bd);transition:all .18s;} .com-card:hover{border-color:var(--g);background:var(--gl);transform:translateY(-2px);} .com-top{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.85rem;} .com-indicator{width:3px;min-height:30px;background:var(--g);border-radius:2px;flex-shrink:0;} .com-name-ar{font-size:.9rem;font-weight:800;color:var(--gd);line-height:1.3;} .com-name-en{font-size:.68rem;color:var(--tm);margin-top:.12rem;} .com-head-row{display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;background:var(--gl);border-radius:var(--rs);margin-bottom:.75rem;} .com-head-label-txt{font-size:.65rem;color:var(--tm);flex-shrink:0;} .com-head-name{font-size:.78rem;font-weight:700;color:var(--gd);} .com-members-wrap{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem;} .cm-name{background:#f3f4f6;color:var(--tl);font-size:.67rem;padding:.15rem .5rem;border-radius:50px;} .cm-more{background:var(--gl);color:var(--g);font-size:.67rem;font-weight:700;padding:.15rem .5rem;border-radius:50px;} .com-count{font-size:.68rem;color:var(--tm);text-align:left;direction:ltr;} /* ── EVENT REPORT ── */ .report{background:#f8faf8;} .report .eyebrow{background:var(--gl);color:var(--g);} .report .section-title{color:var(--gd);} .report .section-title-en{color:var(--tl);} .report-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.5rem;align-items:start;} .report-desc{font-size:.9rem;color:var(--tl);line-height:1.85;margin-bottom:1.5rem;} .report-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;} .rk{background:#fff;border:1px solid var(--bd);border-radius:var(--rs);padding:1rem;text-align:center;box-shadow:var(--shadow);} .rk-n{font-size:1.5rem;font-weight:800;color:var(--g);line-height:1;} .rk-l{font-size:.67rem;color:var(--tl);margin-top:.18rem;} .report-highlights{display:flex;flex-direction:column;gap:.7rem;} .rh-item{display:flex;gap:.65rem;align-items:flex-start;} .rh-dot{width:5px;height:5px;border-radius:50%;background:var(--go);flex-shrink:0;margin-top:.45rem;} .rh-text{font-size:.85rem;color:var(--tl);line-height:1.65;} .report-rating{margin-top:1.5rem;background:var(--gold-light,#fdf6e3);border:1px solid rgba(184,147,42,.3);border-radius:var(--r);padding:1.25rem;text-align:center;} .rr-n{font-size:2.5rem;font-weight:800;color:var(--go);line-height:1;} .rr-l{font-size:.78rem;color:var(--tl);margin-top:.25rem;} .rr-stars{font-size:1rem;color:var(--go);margin:.35rem 0 .15rem;} /* ── SPONSORS ── */ .sponsors{background:#fff;} .sp-section-label{font-size:.68rem;font-weight:800;color:var(--tm);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:1.1rem;} .sp-row{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;} .sp-card{background:#fff;border:1.5px solid var(--bd);border-radius:var(--r);padding:1.25rem 2rem;display:flex;align-items:center;justify-content:center;min-width:170px;transition:all .18s;flex-direction:column;gap:.4rem;} .sp-card:hover{border-color:var(--g);box-shadow:var(--shadow-md);transform:translateY(-2px);} .sp-badge{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;} .sp-name{font-size:.82rem;font-weight:700;color:var(--tx);} .sp-type{font-size:.64rem;color:var(--tm);} .sp-divider{border:none;border-top:1px solid var(--bd);margin:1.5rem 0;} .uni-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;} .uni-card{background:#f8faf8;border:1px solid var(--bd);border-radius:var(--rs);padding:.8rem 1.4rem;display:flex;align-items:center;gap:.65rem;transition:all .18s;} .uni-card:hover{border-color:var(--g);background:var(--gl);} .uni-badge{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:#fff;flex-shrink:0;} .uni-name{font-size:.8rem;font-weight:700;color:var(--gd);} .uni-type{font-size:.63rem;color:var(--tm);} /* ── SOCIAL ── */ .social-sec{background:linear-gradient(135deg,var(--gd),#1a5c2e);} .social-sec .eyebrow{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);} .social-sec .section-title{color:#fff;} .social-sec .section-title-en{color:rgba(255,255,255,.4);} .social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-top:2.5rem;} .sc-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.5rem;text-align:center;text-decoration:none;color:#fff;transition:all .2s;display:block;} .sc-card:hover{background:rgba(255,255,255,.14);transform:translateY(-3px);} .sc-platform{font-size:.88rem;font-weight:800;margin-bottom:.2rem;} .sc-handle{font-size:.7rem;color:rgba(255,255,255,.45);margin-bottom:.7rem;} .sc-num{font-size:1.35rem;font-weight:800;color:var(--gg);} .sc-num-l{font-size:.63rem;color:rgba(255,255,255,.4);margin-top:.12rem;} /* ── LEADERSHIP ── */ .leadership{background:#f8faf8;} .ld-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;} .ld-card{background:#fff;border-radius:var(--r);padding:1.7rem;text-align:center;border:1.5px solid var(--bd);box-shadow:var(--shadow);transition:all .2s;} .ld-card:hover{border-color:var(--g);transform:translateY(-3px);box-shadow:var(--shadow-md);} .ld-av{width:65px;height:65px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--gm));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;margin:0 auto 1rem;border:3px solid var(--gl);} .ld-name{font-size:.98rem;font-weight:800;color:var(--gd);margin-bottom:.2rem;} .ld-name-en{font-size:.73rem;color:var(--tm);margin-bottom:.5rem;} .ld-badge{display:inline-block;background:var(--gl);color:var(--g);font-size:.65rem;font-weight:700;padding:.18rem .62rem;border-radius:50px;} /* ── CONTACT ── */ .contact{background:#fff;} .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-top:3rem;align-items:start;} .ct-list{display:flex;flex-direction:column;gap:1.1rem;} .ct-item{display:flex;align-items:flex-start;gap:.82rem;} .ct-icon{width:40px;height:40px;border-radius:10px;background:var(--gl);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;color:var(--g);font-weight:800;} .ct-label{font-size:.7rem;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:.05em;} .ct-val{font-size:.88rem;font-weight:600;color:var(--tx);margin-top:.1rem;} .ct-val a{color:var(--g);text-decoration:none;} .ct-val a:hover{text-decoration:underline;} .ct-box{background:linear-gradient(135deg,var(--gd),var(--gm));border-radius:var(--r);padding:2rem;color:#fff;text-align:center;} .ct-box h3{font-size:1.05rem;font-weight:800;margin-bottom:.2rem;} .ct-box h3 span{font-size:.78rem;font-weight:400;color:rgba(255,255,255,.5);display:block;} .ct-box p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.7;margin:.85rem 0 1.65rem;} .btn-admin{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.12);color:#fff;padding:.62rem 1.5rem;border-radius:50px;font-size:.82rem;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.2);transition:all .2s;} .btn-admin:hover{background:rgba(255,255,255,.2);transform:translateY(-1px);} /* ── FOOTER ── */ footer{background:var(--gd);padding:2.5rem 2rem;border-top:1px solid rgba(184,147,42,.18);} .footer-inner{max-width:1100px;margin:0 auto;} .ft-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.07);} .ft-brand{display:flex;align-items:center;gap:.75rem;} .ft-brand img{width:38px;height:38px;object-fit:contain;} .ft-brand-text .t1{font-size:.87rem;font-weight:800;color:#fff;} .ft-brand-text .t2{font-size:.62rem;color:rgba(255,255,255,.38);} .ft-links{display:flex;gap:1.35rem;flex-wrap:wrap;} .ft-links a{color:rgba(255,255,255,.42);font-size:.78rem;text-decoration:none;transition:color .2s;} .ft-links a:hover{color:var(--gg);} .ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.85rem;} .ft-copy{font-size:.7rem;color:rgba(255,255,255,.26);} .ft-reg{font-size:.65rem;color:rgba(255,255,255,.2);direction:ltr;text-align:left;} /* ── RESPONSIVE ── */ @media(max-width:900px){ .nav-menu{display:none;} .nav-hamburger{display:block;} /* Mobile nav layout: logo + hamburger cluster on the right (RTL start), login + apply pills cluster on the left. The full link list lives in the hamburger drawer (.mobile-nav). */ .nav-brand-text{display:none;} /* drop the long club name on mobile, logo speaks for itself */ .nav-brand{gap:.4rem;} .nav-actions{display:flex;gap:.35rem;align-items:center;} .nav-actions .nav-lang{display:none;} /* lang toggle moves into the drawer */ .nav-join{padding:.35rem .85rem;font-size:.7rem;} .nav-login{padding:.3rem .7rem;font-size:.66rem;} nav{padding:0 1rem;gap:.4rem;} .about-grid,.mb-grid,.ct-grid,.report-grid{grid-template-columns:1fr;} .ld-grid{grid-template-columns:1fr 1fr;} .social-grid{grid-template-columns:1fr 1fr;} .hero-stats{gap:1.5rem;} } /* Extra-narrow phones (≤340px, mostly old / folded devices): pills get a tiny bit smaller so both still fit alongside the logo + hamburger. */ @media(max-width:340px){ .nav-join,.nav-login{padding:.28rem .6rem;font-size:.62rem;} } @media(max-width:520px){ .ld-grid{grid-template-columns:1fr;} .report-kpis{grid-template-columns:1fr 1fr;} nav{padding:0 1.25rem;} section{padding:3.5rem 1.25rem;} } /* ── LANG SWITCH ── */ .ev-done-badge{position:absolute;top:.65rem;left:.65rem;background:rgba(255,255,255,.18);color:rgba(255,255,255,.9);font-size:.6rem;font-weight:700;padding:.12rem .45rem;border-radius:50px;letter-spacing:.03em;} .ev-btn-disabled{background:#f3f4f6;color:#9ca3af;font-size:.72rem;font-weight:700;padding:.28rem .75rem;border-radius:50px;border:1px dashed #d1d5db;cursor:not-allowed;display:inline-block;} html[dir="ltr"] html[dir="ltr"] .tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--bd);margin-bottom:1.75rem} .tbtn{background:none;border:none;padding:.6rem 1.1rem;font-size:.84rem;font-weight:700;color:var(--tm);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all .18s;font-family:inherit} .tbtn.ac{color:var(--g);border-bottom-color:var(--g)} .tbtn:hover{color:var(--g)} .tpnl{display:none}.tpnl.ac{display:block} .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .bcard{background:#fff;border-radius:var(--r);border:1.5px solid var(--bd);padding:1.5rem;text-align:center;transition:all .2s} .bcard:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07)} .bcard.pres{border-color:var(--go);background:linear-gradient(to bottom,#fffbf0,#fff)} .bav{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--g));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;margin:0 auto .9rem;border:3px solid var(--gl)} .bav.f{background:linear-gradient(135deg,#6d28d9,#8b5cf6)} .bnm{font-size:.98rem;font-weight:800;color:var(--gd);margin-bottom:.25rem} .brl{font-size:.78rem;color:var(--go);font-weight:600} .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem} .ccard{background:#fff;border-radius:var(--r);border:1.5px solid var(--bd);padding:1.1rem;cursor:pointer;transition:all .18s;text-align:center} .ccard:hover{border-color:var(--g);background:var(--gl);transform:translateY(-2px);box-shadow:0 6px 18px rgba(26,92,46,.1)} .cic{font-size:1.6rem;margin-bottom:.5rem} .cnm{font-size:.86rem;font-weight:800;color:var(--gd);margin-bottom:.3rem;line-height:1.3} .chd{font-size:.76rem;font-weight:700;margin-bottom:.18rem} .cdep{font-size:.68rem;color:var(--tl);margin-bottom:.3rem} .cct{font-size:.7rem;font-weight:700;color:#fff;background:var(--g);display:inline-block;padding:.12rem .5rem;border-radius:50px;margin-bottom:.3rem} .cexp{font-size:.65rem;color:var(--tm)} .drw{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s} .drw.op{opacity:1;pointer-events:all} .drwbg{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)} .drwpanel{position:relative;z-index:1;background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:580px;max-height:85vh;overflow-y:auto;padding:1.5rem} .drwhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--bd)} .drwic{font-size:2rem;line-height:1} .drwnm{font-size:1.02rem;font-weight:800;color:var(--gd)} .drwhd{font-size:.78rem;color:var(--go);font-weight:700;margin-top:.2rem} .drwclose{background:none;border:none;font-size:1rem;color:var(--tm);cursor:pointer;padding:.25rem;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0} .drwclose:hover{background:var(--gl)} .drwmbs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem} .drwmb{display:flex;align-items:center;gap:.55rem;background:#f8faf8;border-radius:10px;padding:.55rem .65rem;border:1px solid var(--bd)} .drwmb.f{background:#fdf4ff;border-color:rgba(109,40,217,.1)} .drwav{width:34px;height:34px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0} .drwav.f{background:linear-gradient(135deg,#6d28d9,#8b5cf6)} .drwmn{font-size:.8rem;font-weight:700;color:var(--gd)} .drwmg{font-size:.63rem;color:var(--tm)} @media(max-width:600px){.bgrid{grid-template-columns:1fr}.drwmbs{grid-template-columns:1fr}} /* Scroll-state nav: slightly more opaque + shadow once the user scrolls past the hero. Dark-mode counterpart below in the @media + data-theme blocks. The JS scroll handler in index.js just toggles this class — the actual visual change lives here so dark mode can override it. */ nav.scrolled{background:rgba(255,255,255,.99);box-shadow:0 2px 16px rgba(0,0,0,.1);} /* Language system */ .sc-icon{font-size:1.6rem;margin-bottom:.5rem;line-height:1;display:flex;justify-content:center;} .sc-icon svg{opacity:.85;} .sc-card:hover .sc-icon svg{opacity:1;} /* ── LANGUAGE SYSTEM ── */ .ar-only{display:block}.ar-only.i{display:inline} .en-only{display:none}.en-only.i{display:none} [data-ar]{}.en-lang [data-ar]{display:none !important} [data-en]{display:none}.en-lang [data-en]{display:block} .en-lang a[data-en],.en-lang span[data-en],.en-lang button[data-en]{display:inline} .en-lang .ar-only{display:none !important} .en-lang .ar-only.i{display:none !important} .en-lang .en-only{display:block} .en-lang .en-only.i{display:inline} .en-lang{direction:ltr} /* Past events — compact horizontal list */ .events-past-section{margin-top:.5rem} .events-past-label{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem} .events-past-label-line{flex:1;height:1px;background:var(--bd)} .events-past-label-txt{font-size:.68rem;font-weight:700;color:var(--tm);white-space:nowrap;padding:.18rem .6rem;background:var(--bd);border-radius:50px} .past-grid{display:flex;flex-wrap:wrap;gap:.55rem} .past-pill{ display:flex;align-items:center;gap:.5rem; background:#f8f9fa;border:1px solid var(--bd);border-radius:50px; padding:.4rem .85rem .4rem .5rem; cursor:default;transition:all .2s; font-size:.78rem; } .past-pill:hover{ background:#fff;border-color:var(--g); box-shadow:0 2px 8px rgba(0,0,0,.07); transform:translateY(-1px); } .past-pill-ic{font-size:.9rem;line-height:1;opacity:.6} .past-pill:hover .past-pill-ic{opacity:1} .past-pill-name{font-weight:600;color:var(--tl)} .past-pill:hover .past-pill-name{color:var(--gd)} .past-pill-mo{font-size:.67rem;color:var(--tm);margin-inline-start:.2rem} .past-pill-done{ font-size:.6rem;font-weight:700;color:#6b7280; background:#e5e7eb;border-radius:50px; padding:.1rem .4rem;margin-inline-start:.15rem; } /* Events tabs */ .ev-tabs{display:flex;gap:.35rem;margin-bottom:1.75rem;border-bottom:2px solid var(--bd);} .ev-tbtn{background:none;border:none;padding:.55rem 1.2rem;font-size:.85rem;font-weight:700; color:var(--tm);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px; transition:all .18s;font-family:inherit;border-radius:6px 6px 0 0;} .ev-tbtn.ac{color:var(--g);border-bottom-color:var(--g);background:var(--gl);} .ev-tbtn:hover:not(.ac){color:var(--g);background:var(--gl);} .ev-tbtn .ev-cnt{display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%;font-size:.65rem;font-weight:800; margin-inline-start:.4rem;background:var(--bd);color:var(--tm);} .ev-tbtn.ac .ev-cnt{background:var(--g);color:#fff;} .ev-panel{display:none}.ev-panel.ac{display:block} /* Past event cards */ .pc-gallery-badge{position:absolute;bottom:.6rem;left:.6rem;background:rgba(0,0,0,.45);color:#fff;font-size:.6rem;font-weight:700;padding:.18rem .5rem;border-radius:50px;display:flex;align-items:center;gap:.25rem;} .past-card.has-gallery{cursor:pointer;} .past-card.has-gallery:hover .pc-hdr{filter:brightness(1.1);} .lrep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin-top:2rem;} .lrep-loading{color:var(--tm);font-size:.85rem;text-align:center;padding:2rem;grid-column:1/-1;} .lrep-card{background:#fff;border-radius:var(--r);border:1.5px solid var(--bd);overflow:hidden;box-shadow:var(--shadow);transition:all .2s;cursor:default;} .lrep-card.has-gallery{cursor:pointer;} .lrep-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .lrep-card-hdr{padding:1rem 1.15rem .85rem;color:#fff;position:relative;} .lrep-card-done{font-size:.58rem;font-weight:700;background:rgba(255,255,255,.2);padding:.1rem .4rem;border-radius:50px;display:inline-block;margin-bottom:.3rem;} .lrep-card-date{font-size:.68rem;color:rgba(255,255,255,.7);margin-bottom:.25rem;} .lrep-card-name{font-size:.95rem;font-weight:800;line-height:1.3;} .lrep-card-gallery-tag{position:absolute;bottom:.6rem;left:.6rem;background:rgba(0,0,0,.4);color:#fff;font-size:.58rem;font-weight:700;padding:.15rem .45rem;border-radius:50px;} .lrep-card-body{padding:.85rem 1rem;} .lrep-card-loc{display:flex;align-items:center;gap:.3rem;font-size:.74rem;color:var(--tl);margin-bottom:.6rem;} .lrep-card-mgr{display:flex;align-items:center;gap:.55rem;background:var(--gl);border-radius:8px;padding:.5rem .65rem;} .lrep-card-mgr-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--g));display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;color:#fff;flex-shrink:0;} .lrep-card-mgr-t{font-size:.62rem;color:var(--tm);font-weight:600;} .lrep-card-mgr-n{font-size:.82rem;font-weight:700;color:var(--gd);} .lrep-card-stats{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;flex-wrap:wrap;} .lrep-card-stat{font-size:.72rem;font-weight:700;color:var(--g);background:var(--gl);padding:.2rem .55rem;border-radius:50px;} /* ── LATEST EVENT REPORT ── */ .latest-report{background:#f8faf8;border-top:1px solid var(--bd);} .lrep-wrap{background:#fff;border-radius:var(--r);border:1.5px solid var(--bd);overflow:hidden;box-shadow:var(--shadow-md);cursor:pointer;transition:box-shadow .2s;} .lrep-wrap:hover{box-shadow:var(--shadow-md),0 0 0 2px var(--go);} .lrep-top{background:linear-gradient(135deg,#0e3a1c,#1A5C2E);padding:1.4rem 2rem 1.2rem;} .lrep-badges{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:.65rem;flex-wrap:wrap;} .lrep-badge{font-size:.6rem;font-weight:800;padding:.2rem .65rem;border-radius:50px;letter-spacing:.04em;} .lrep-badge.gold{background:rgba(184,147,42,.25);color:var(--go);border:1px solid rgba(184,147,42,.35);} .lrep-badge.white{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15);} .lrep-title{font-size:1.35rem;font-weight:800;color:#fff;text-align:center;line-height:1.3;margin-bottom:.6rem;} .lrep-chips{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;} .lrep-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:.25rem .75rem;font-size:.72rem;color:#fff;display:flex;align-items:center;gap:.3rem;} .lrep-chip.gold{background:rgba(184,147,42,.2);border-color:rgba(184,147,42,.35);color:var(--go);} .lrep-date{font-size:.7rem;color:rgba(255,255,255,.5);text-align:center;margin-top:.5rem;} .lrep-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--bd);} /* 3-column stat grid separators. Each cell carries a border on its * reading-start (inline-start) side; the last cell of every row has * the border suppressed so the grid edges stay clean. Logical * properties auto-flip in English mode. */ .lrep-stat{padding:.85rem .5rem;text-align:center;border-inline-start:1px solid var(--bd);} .lrep-stat:nth-child(3n){border-inline-start:none;} .lrep-stat-n{font-size:1.2rem;font-weight:800;color:var(--gd);} .lrep-stat-l{font-size:.6rem;color:var(--tm);font-weight:600;margin-top:.1rem;} .lrep-body{display:grid;grid-template-columns:1fr 1fr;gap:0;} @media(max-width:680px){.lrep-body{grid-template-columns:1fr;}.lrep-stats{grid-template-columns:repeat(2,1fr);}.lrep-stat:nth-child(3n){border-inline-start:1px solid var(--bd);}.lrep-stat:nth-child(2n){border-inline-start:none!important;}} .lrep-desc-col{padding:1.2rem 1.5rem;border-inline-start:1px solid var(--bd);} .lrep-desc{font-size:.8rem;color:var(--tl);line-height:1.75;margin-bottom:.85rem;} .lrep-hl{list-style:none;padding:0;margin:0;} .lrep-hl li{font-size:.78rem;color:var(--tl);padding:.2rem 0;display:flex;align-items:flex-start;gap:.4rem;} .lrep-hl li::before{content:"•";color:var(--g);font-weight:800;flex-shrink:0;} .lrep-rating-col{padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:center;} .lrep-rating-box{text-align:center;background:var(--gl);border-radius:var(--r);border:1.5px solid rgba(26,92,46,.12);padding:1.4rem 1.8rem;width:100%;} .lrep-rating-n{font-size:2.6rem;font-weight:800;color:var(--go);line-height:1;} .lrep-rating-den{font-size:.95rem;font-weight:600;color:var(--tm);} .lrep-stars{font-size:1rem;margin:.35rem 0;color:var(--go);} .lrep-rating-l{font-size:.7rem;color:var(--tl);font-weight:600;} .lrep-gallery-hint{font-size:.68rem;color:rgba(255,255,255,.5);text-align:center;padding:.4rem;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:.3rem;} /* ── EVENTS STRIP ── */ .ev-strip{position:relative;height:320px;overflow:hidden;background:#0e3a1c;} .ev-strip-track{display:flex;height:100%;will-change:transform;} .ev-strip-slide{flex-shrink:0;width:100%;height:100%;position:absolute;inset:0;opacity:0;transition:opacity .8s ease;} .ev-strip-slide.active{opacity:1;z-index:1;} .ev-strip-img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);} .ev-strip-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 50%,transparent 100%);} /* text-align:end + align-items:flex-end both follow the inline * direction — title sits at the trailing edge of the slide in both * RTL (visual right) and LTR (visual left). */ .ev-strip-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:1.5rem 2.5rem;text-align:end;z-index:2;} .ev-strip-title{font-size:1.6rem;font-weight:800;color:#fff;line-height:1.3;max-width:480px;margin-bottom:.5rem;} .ev-strip-meta{font-size:.78rem;color:rgba(255,255,255,.65);margin-bottom:1rem;} .ev-strip-btn{background:var(--go);color:#fff;border:none;border-radius:50px;padding:.5rem 1.2rem;font-size:.78rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.4rem;} .ev-strip-btn:hover{background:#d4a030;transform:translateY(-1px);} .ev-strip-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem;z-index:3;} .ev-strip-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:all .25s;} .ev-strip-dot.active{background:#fff;transform:scale(1.3);} .ev-strip-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--go);z-index:3;transition:width linear;} @media(max-width:600px){ .ev-strip{height:240px;} .ev-strip-content{padding:1.2rem 1.5rem;} .ev-strip-title{font-size:1.15rem;} } .past-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:.5rem} .past-card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--bd); transition:all .22s;opacity:.75;filter:saturate(.55);} .past-card:hover{opacity:1;filter:saturate(1);transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:transparent;} .pc-hdr{padding:1rem 1.1rem .8rem;color:#fff;position:relative} .pc-done{position:absolute;top:.6rem;left:.75rem;font-size:.6rem;font-weight:700; background:rgba(255,255,255,.2);padding:.1rem .45rem;border-radius:50px;letter-spacing:.03em} .pc-date{font-size:.7rem;color:rgba(255,255,255,.75);margin-top:.2rem;margin-inline-start:0;padding-top:.5rem} .pc-name{font-size:.95rem;font-weight:800;line-height:1.3;margin-top:.25rem} .pc-body{padding:.85rem 1rem} .pc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem} .pc-loc{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--tl)} .pc-loc-ic{font-size:.75rem} .pc-tag{font-size:.65rem;font-weight:700;padding:.18rem .55rem;border-radius:50px} .pc-mgr{display:flex;align-items:center;gap:.6rem;background:var(--gl); border-radius:8px;padding:.5rem .65rem} .pc-mgr-av{width:30px;height:30px;border-radius:50%;background:var(--g); display:flex;align-items:center;justify-content:center; font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0} .pc-mgr-t{font-size:.63rem;color:var(--tm);font-weight:600} .pc-mgr-n{font-size:.8rem;font-weight:700;color:var(--gd)} .pc-stat{margin-inline-start:auto;text-align:center;padding-inline-start:.6rem; border-inline-start:1px solid var(--bd)} .pc-stat-n{font-size:1.1rem;font-weight:800;color:var(--g);line-height:1} .pc-stat-l{font-size:.6rem;color:var(--tm);font-weight:600} .sp-logo{max-height:70px;max-width:160px;object-fit:contain;display:block;margin:0 auto} .sp-card-logo{display:flex;flex-direction:column;align-items:center;gap:.65rem; background:#fff;border-radius:var(--r);border:1px solid var(--bd); padding:1.25rem 1.5rem;transition:all .2s;min-width:170px;} .sp-card-logo:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px);} .sp-type-lbl{font-size:.68rem;font-weight:700;color:var(--tm);text-align:center} /* Advisors tab */ .adv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.25rem} .adv-card{ display:flex;align-items:center;gap:.75rem; background:#fff;border-radius:var(--r); border:1px solid var(--bd);padding:.85rem 1.15rem; min-width:200px;flex:1;max-width:220px; transition:all .2s; } .adv-card:hover{border-color:var(--go);box-shadow:0 4px 14px rgba(184,147,42,.12);transform:translateY(-2px);} .adv-av{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,var(--gd),var(--g)); display:flex;align-items:center;justify-content:center; font-size:.95rem;font-weight:800;color:#fff; border:2px solid rgba(184,147,42,.3); } .adv-name{font-size:.88rem;font-weight:700;color:var(--gd);line-height:1.3} .adv-role{font-size:.68rem;color:var(--go);font-weight:600;margin-top:.15rem} .adv-section-lbl{ font-size:.72rem;font-weight:700;color:var(--tm); text-align:center;margin-bottom:.75rem; display:flex;align-items:center;gap:.5rem; } .adv-section-lbl::before,.adv-section-lbl::after{ content:"";flex:1;height:1px;background:rgba(184,147,42,.25); } /* ── RECENT EVENTS ── */ #recent-events-section{background:#fff;border-top:1px solid var(--bd);} .latest-ev-wrap{margin-top:2rem;background:#fff;border-radius:var(--r);border:1.5px solid var(--bd);overflow:hidden;box-shadow:var(--shadow-md);} .latest-ev-top{background:linear-gradient(135deg,#0e3a1c 0%,#1A5C2E 100%);padding:1.5rem 2rem 1.2rem;} .latest-ev-eyebrow{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:.75rem;} .latest-ev-badge{font-size:.6rem;font-weight:800;padding:.2rem .65rem;border-radius:50px;letter-spacing:.05em;text-transform:uppercase;} .latest-ev-badge.ar{background:rgba(184,147,42,.25);color:var(--go);border:1px solid rgba(184,147,42,.35);} .latest-ev-badge.en{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15);} .latest-ev-title{font-size:1.55rem;font-weight:800;color:#fff;text-align:center;line-height:1.3;margin-bottom:.75rem;} .latest-ev-meta{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;} .latest-ev-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:50px;padding:.28rem .8rem;font-size:.72rem;color:#fff;display:flex;align-items:center;gap:.3rem;} .latest-ev-chip.gold{background:rgba(184,147,42,.18);border-color:rgba(184,147,42,.35);color:var(--go);} .latest-ev-date{font-size:.72rem;color:rgba(255,255,255,.55);text-align:center;margin-top:.55rem;} .latest-ev-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--bd);} /* Same 3-column-stat-separator pattern as .lrep-stat above. Logical * properties so the English-mode render flips the separators correctly. */ .latest-ev-stat{padding:.85rem .5rem;text-align:center;border-inline-start:1px solid var(--bd);} .latest-ev-stat:nth-child(3n){border-inline-start:none;} @media(max-width:480px){.latest-ev-stats{grid-template-columns:repeat(2,1fr);}.latest-ev-stat:nth-child(2n){border-inline-start:none;}.latest-ev-stat:nth-child(3n){border-inline-start:1px solid var(--bd);}.latest-ev-stat:nth-child(even){border-inline-start:none!important;}} .latest-ev-stat-n{font-size:1.25rem;font-weight:800;color:var(--gd);} .latest-ev-stat-l{font-size:.6rem;color:var(--tm);font-weight:600;margin-top:.1rem;} .latest-ev-body{display:grid;grid-template-columns:1fr 1fr;gap:0;} @media(max-width:700px){.latest-ev-body{grid-template-columns:1fr;}} .latest-ev-desc-col{padding:1.25rem 1.5rem;border-inline-start:1px solid var(--bd);} .latest-ev-desc-text{font-size:.82rem;color:var(--tl);line-height:1.75;margin-bottom:.85rem;} .latest-ev-highlights{list-style:none;padding:0;margin:0;} .latest-ev-highlights li{font-size:.78rem;color:var(--tl);padding:.2rem 0;display:flex;align-items:flex-start;gap:.45rem;line-height:1.5;} .latest-ev-highlights li::before{content:"•";color:var(--g);font-weight:800;flex-shrink:0;margin-top:.05rem;} .latest-ev-rating-col{padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:center;} .latest-ev-rating-box{text-align:center;background:var(--gl);border-radius:var(--r);border:1.5px solid rgba(26,92,46,.12);padding:1.5rem 2rem;width:100%;} .latest-ev-rating-n{font-size:2.8rem;font-weight:800;color:var(--go);line-height:1;} .latest-ev-rating-denom{font-size:1rem;font-weight:600;color:var(--tm);} .latest-ev-stars{font-size:1.1rem;margin:.4rem 0;} .latest-ev-rating-l{font-size:.72rem;color:var(--tl);font-weight:600;} /* ── GALLERY MODAL ── */ .gallery-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s;} .gallery-modal.open{opacity:1;pointer-events:all;} .gallery-inner{width:100%;max-width:860px;display:flex;flex-direction:column;gap:.75rem;} .gallery-head{display:flex;align-items:center;justify-content:space-between;} .gallery-head-title{font-size:1rem;font-weight:800;color:#fff;} .gallery-head-sub{font-size:.7rem;color:rgba(255,255,255,.5);margin-top:.15rem;} .gallery-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;} .gallery-close:hover{background:rgba(255,255,255,.25);} /* Slideshow */ .gallery-slide-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111;} .gallery-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease;background:#111;} .gallery-slide-img.active{opacity:1;} .gallery-slide-img.prev{opacity:0;} .gallery-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:.85rem;} .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2;} .gallery-nav:hover{background:rgba(0,0,0,.8);} .gallery-nav.prev{right:.75rem;} .gallery-nav.next{left:.75rem;} /* Dots */ .gallery-dots{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;max-height:28px;overflow:hidden;} .gallery-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .2s;flex-shrink:0;} .gallery-dot.active{background:#fff;transform:scale(1.25);} /* Counter & footer */ .gallery-footer{display:flex;align-items:center;justify-content:space-between;} .gallery-counter{font-size:.72rem;color:rgba(255,255,255,.5);} .gallery-open-link{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.3rem;text-decoration:none;} .gallery-open-link:hover{color:#fff;} /* Progress bar */ .gallery-progress{height:2px;background:rgba(255,255,255,.15);border-radius:1px;overflow:hidden;margin-top:-.25rem;} .gallery-progress-fill{height:100%;background:var(--go);border-radius:1px;transition:width linear;} /* Card hint */ .latest-ev-wrap{cursor:pointer;transition:box-shadow .2s;} .latest-ev-wrap:hover{box-shadow:0 8px 30px rgba(0,0,0,.15);} .gallery-trigger-hint{font-size:.68rem;color:rgba(255,255,255,.5);text-align:center;padding:.45rem;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:.35rem;} /* ─── DARK MODE OVERRIDES ─────────────────────────────────────────── * The public homepage was originally designed light-only. Branch 3 * (feature/spa-and-pwa) added dark mode for the admin UI via a * three-way toggle, but didn't audit the marketing pages. Result: on * an OS-dark-mode visitor (or any visitor who toggled dark in admin — * the preference persists via localStorage), section backgrounds stay * white but card text colors collapse to invisible because they sit * on top of dark variable backgrounds (e.g. .kpi-n in #1A5C2E green * on a .kpi background of #18342a — 6 brightness points apart, fully * unreadable). * * Two-mode pattern matches base.css: * - @media (prefers-color-scheme: dark) with `:root:not([data-theme="light"]):not([data-theme="dark"])` — * applies dark overrides only when theme is auto/unset * - :root[data-theme="dark"] — applies dark overrides unconditionally * * This pass is INTENTIONALLY minimal: covers only the visible-broken * sections (about/kpi cards, .about background, .events section bg, * .ev-card background, .committees + .leadership + .sponsors + .report * + .contact + .membership section backgrounds). Deeper coverage * (committee cards, leadership cards, contact form fields, etc.) is a * follow-up if needed — flag the visible-broken element and we add * targeted rules. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) body { background-color: #0f1410; color: #e5e7eb; } :root:not([data-theme="light"]):not([data-theme="dark"]) .about, :root:not([data-theme="light"]):not([data-theme="dark"]) .membership, :root:not([data-theme="light"]):not([data-theme="dark"]) .sponsors, :root:not([data-theme="light"]):not([data-theme="dark"]) .contact { background-color: #0f1410; } :root:not([data-theme="light"]):not([data-theme="dark"]) .events, :root:not([data-theme="light"]):not([data-theme="dark"]) .committees, :root:not([data-theme="light"]):not([data-theme="dark"]) .leadership, :root:not([data-theme="light"]):not([data-theme="dark"]) .report { background-color: #161b16; } /* About-section stat cards: bg goes to a slightly-lighter-than-section panel + numbers swap to brand gold for high contrast on dark green. */ :root:not([data-theme="light"]):not([data-theme="dark"]) .kpi { background-color: #18342a; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .kpi-n { color: #c9a032; } :root:not([data-theme="light"]):not([data-theme="dark"]) .kpi-l { color: #e5e7eb; } :root:not([data-theme="light"]):not([data-theme="dark"]) .kpi-l-en{ color: #9ca3af; } /* Event cards: white card backgrounds → invisible on white-ish events section. Swap to dark card panels. The colored .ev-hdr (green/gold/ blue) doesn't need overrides — those gradients already have white text and look correct in either mode. */ :root:not([data-theme="light"]):not([data-theme="dark"]) .ev-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .ev-card .ev-desc { color: #cbd5e1; } :root:not([data-theme="light"]):not([data-theme="dark"]) .ev-card .ev-meta-row { color: #9ca3af; } :root:not([data-theme="light"]):not([data-theme="dark"]) .ev-card .ev-foot { border-top-color: rgba(255,255,255,.08); } :root:not([data-theme="light"]):not([data-theme="dark"]) .ev-tag { background-color: rgba(184,147,42,.15); color: #c9a032; } } /* Same overrides for the explicit data-theme="dark" case (when the visitor toggled dark mode via the admin's theme switch — the preference persists across pages). */ :root[data-theme="dark"] body { background-color: #0f1410; color: #e5e7eb; } :root[data-theme="dark"] .about, :root[data-theme="dark"] .membership, :root[data-theme="dark"] .sponsors, :root[data-theme="dark"] .contact { background-color: #0f1410; } :root[data-theme="dark"] .events, :root[data-theme="dark"] .committees, :root[data-theme="dark"] .leadership, :root[data-theme="dark"] .report { background-color: #161b16; } :root[data-theme="dark"] .kpi { background-color: #18342a; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .kpi-n { color: #c9a032; } :root[data-theme="dark"] .kpi-l { color: #e5e7eb; } :root[data-theme="dark"] .kpi-l-en{ color: #9ca3af; } :root[data-theme="dark"] .ev-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .ev-card .ev-desc { color: #cbd5e1; } :root[data-theme="dark"] .ev-card .ev-meta-row { color: #9ca3af; } :root[data-theme="dark"] .ev-card .ev-foot { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .ev-tag { background-color: rgba(184,147,42,.15); color: #c9a032; } /* ─── Second-pass dark-mode coverage (May 15 follow-up) ────────────── * The May 15 first pass covered .kpi cards + section backgrounds. * User testing on a phone surfaced the rest: every other card class * still had hardcoded `background:#fff` or near-white, producing * white panels stamped on the dark sections — visually broken on * Leadership, Sponsors, Universities, Past Events, Committee * shortcut cards, Reports. * * Same value palette as the first pass: card surface `#1c241e`, * nested-on-card surface `#252e26`, borders rgba(255,255,255,.06). * Dark-green text (`color: var(--gd)`) inside cards swaps to light * grey/white since --gd doesn't have a dark-mode variant (and * shouldn't — it's the brand primary). We override per-element. * * Both the auto/unset and explicit data-theme="dark" cases are * covered. Body of the rules is identical between the two blocks — * duplicated rather than abstracted via a custom-property indirection * because nesting is shallow and grep-ability matters more than DRY * for this defensive CSS layer. */ /* --- auto/unset (OS prefers dark) ------------------------------- */ @media (prefers-color-scheme: dark) { /* Past events strip — section uses var(--bg) which IS theme-aware, but card BODY (.past-card itself) and the manager sub-block are both hardcoded light. */ :root:not([data-theme="light"]):not([data-theme="dark"]) .past-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .pc-loc { color: #cbd5e1; } :root:not([data-theme="light"]):not([data-theme="dark"]) .pc-mgr { background-color: rgba(255,255,255,.04); } :root:not([data-theme="light"]):not([data-theme="dark"]) .pc-mgr-n { color: #e5e7eb; } :root:not([data-theme="light"]):not([data-theme="dark"]) .pc-stat-n { color: #c9a032; } :root:not([data-theme="light"]):not([data-theme="dark"]) .pc-stat { border-inline-start-color: rgba(255,255,255,.08); } /* Committee cards (Governance → اللجان التنفيذية tab) */ :root:not([data-theme="light"]):not([data-theme="dark"]) .com-card, :root:not([data-theme="light"]):not([data-theme="dark"]) .ccard { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .com-name-ar, :root:not([data-theme="light"]):not([data-theme="dark"]) .com-head-name { color: #e5e7eb; } :root:not([data-theme="light"]):not([data-theme="dark"]) .cm-name { background-color: rgba(255,255,255,.06); color: #cbd5e1; } /* Board cards (مجلس الإدارة tab) — bcard.pres has a cream gradient in light mode; reuse the same tinted concept with a gold-on-dark gradient so the president card still stands out. */ :root:not([data-theme="light"]):not([data-theme="dark"]) .bcard { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .bcard.pres { background: linear-gradient(to bottom, #2a2418, #1c241e); border-color: rgba(201,160,50,.5); } /* Leadership cards (Governance → مجلس الإدارة landing layout) */ :root:not([data-theme="light"]):not([data-theme="dark"]) .ld-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .ld-name { color: #e5e7eb; } /* .ld-name-en uses var(--tm) which already adapts in dark mode */ /* Report KPIs (admin overview surfaced on homepage) */ :root:not([data-theme="light"]):not([data-theme="dark"]) .rk { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root:not([data-theme="light"]):not([data-theme="dark"]) .rk-n { color: #c9a032; } /* Sponsor cards (الشركاء section) */ :root:not([data-theme="light"]):not([data-theme="dark"]) .sp-card, :root:not([data-theme="light"]):not([data-theme="dark"]) .sp-card-logo { background-color: #1c241e; border-color: rgba(255,255,255,.06); } /* University partner pills (lighter tint than other cards in light mode → match a slightly lighter dark surface for consistency). */ :root:not([data-theme="light"]):not([data-theme="dark"]) .uni-card { background-color: #252e26; border-color: rgba(255,255,255,.06); } } /* --- explicit data-theme="dark" (toggled via the new theme btn) -- */ :root[data-theme="dark"] .past-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .pc-loc { color: #cbd5e1; } :root[data-theme="dark"] .pc-mgr { background-color: rgba(255,255,255,.04); } :root[data-theme="dark"] .pc-mgr-n { color: #e5e7eb; } :root[data-theme="dark"] .pc-stat-n { color: #c9a032; } :root[data-theme="dark"] .pc-stat { border-inline-start-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .com-card, :root[data-theme="dark"] .ccard { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .com-name-ar, :root[data-theme="dark"] .com-head-name { color: #e5e7eb; } :root[data-theme="dark"] .cm-name { background-color: rgba(255,255,255,.06); color: #cbd5e1; } :root[data-theme="dark"] .bcard { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .bcard.pres { background: linear-gradient(to bottom, #2a2418, #1c241e); border-color: rgba(201,160,50,.5); } :root[data-theme="dark"] .ld-card { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .ld-name { color: #e5e7eb; } :root[data-theme="dark"] .rk { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .rk-n { color: #c9a032; } :root[data-theme="dark"] .sp-card, :root[data-theme="dark"] .sp-card-logo { background-color: #1c241e; border-color: rgba(255,255,255,.06); } :root[data-theme="dark"] .uni-card { background-color: #252e26; border-color: rgba(255,255,255,.06); } /* ─── Third-pass: nav bar + latest-report section (May 15) ────────── * User reported the past-events strip still looks light. Reading * more carefully revealed the section in the screenshot is actually * `.latest-report` with `.lrep-card` children — a SEPARATE section * from .events / .past-card that I'd been styling. Also the