/* ================================================== Codexal Site CSS — Light Theme (default) Palette based on brand squares (Google-like) All comments in English only ================================================== */ /* ===== Brand palette ===== */ :root{ --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853; /* UI tokens (light first) */ --bg:#ffffff; --panel:#ffffff; --text:#0B1220; --muted:#5f7586; --link:#1d4ed8; /* accessible link color */ --brand:var(--blue); /* primary */ --accent:var(--green); /* secondary */ --line:rgba(2,8,23,.08); /* Optional ultra-subtle glow (kept very faint) */ --glow: radial-gradient(700px 360px at 10% 0%, color-mix(in oklab, var(--blue) 7%, transparent), transparent 70%), radial-gradient(600px 320px at 95% 10%, color-mix(in oklab, var(--red) 6%, transparent), transparent 75%), radial-gradient(800px 420px at 20% 100%, color-mix(in oklab, var(--yellow) 6%, transparent), transparent 75%), radial-gradient(640px 320px at 90% 85%, color-mix(in oklab, var(--green) 5%, transparent), transparent 75%); } /* ===== Optional Dark theme (enable via .theme-dark on ) ===== */ html.theme-dark{ --bg:#0b0f17; --panel:#0e1523; --text:#e6edf6; --muted:#93a4b7; --link:#c6dcff; --line:rgba(148,163,184,.15); } /* ===== Base ===== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--text); background:var(--bg); /* add the next line if you want the faint glow: remove comment */ /* background-image:var(--glow); background-repeat:no-repeat; background-attachment:fixed; */ line-height:1.65; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:var(--link); text-decoration:none} a:hover{opacity:.92} .muted{color:var(--muted)} .container{width:min(1200px, 92vw); margin-inline:auto} /* ===== Header / Nav ===== */ .site-header{ position:sticky; top:0; z-index:50; background:var(--panel); border-bottom:1px solid var(--line); transition:box-shadow .2s ease, background .2s ease; } .nav{display:flex; align-items:center; gap:20px; padding:14px 0} .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px} .brand__img{height:28px; width:auto; display:block} @media (min-width: 960px){ .brand__img{height:32px} } .menu{margin-left:auto; display:flex; align-items:center; gap:16px} .menu a{ padding:10px 12px; border-radius:12px; font-weight:600; color:var(--text); } .menu a.active{ background:linear-gradient(135deg, color-mix(in oklab, var(--blue) 20%, transparent), color-mix(in oklab, var(--green) 18%, transparent)); border:1px solid var(--line); } .menu a.cta{ background:linear-gradient(135deg, color-mix(in oklab, var(--blue) 32%, transparent), color-mix(in oklab, var(--green) 28%, transparent)); color:#fff; border:1px solid rgba(0,0,0,.05); } .menu .sep{width:1px; height:20px; background:var(--line)} .menu .lang{font-variant:all-small-caps; letter-spacing:.8px} .burger{display:none; background:none; border:0; padding:8px; border-radius:8px} .burger span{display:block; width:22px; height:2px; background:#94a3b8; margin:4px 0; border-radius:2px} @media (max-width: 860px){ .burger{display:block} .menu{display:none} } /* Sticky shadow after scroll */ .stuck, .site-header.scrolled{box-shadow:0 6px 24px rgba(2,8,23,.06)} /* ===== Typography ===== */ h1,h2,h3,h4{font-family:Readex Pro, Inter, system-ui; letter-spacing:.2px; color:var(--text)} h1{font-weight:800} h2{font-weight:800} h3{font-weight:700} /* ===== Hero ===== */ .hero{ padding:80px 0 40px; position:relative; overflow:hidden; background:var(--panel); } .hero .eyebrow{color:var(--muted); font-weight:600; letter-spacing:.2em; text-transform:uppercase} .hero h1{font-size:clamp(32px, 6vw, 64px); margin:10px 0 8px} .hero .lead{font-size:clamp(16px, 2.2vw, 20px); color:#334155; max-width:820px} .hero .cta-wrap{display:flex; gap:12px; margin-top:18px} /* ===== Buttons ===== */ .btn{ padding:12px 18px; border-radius:14px; font-weight:700; border:1px solid var(--line); color:var(--text); display:inline-flex; align-items:center; justify-content:center; } .btn.primary{ color:#fff; background:linear-gradient(135deg, color-mix(in oklab, var(--blue) 60%, transparent), color-mix(in oklab, var(--green) 55%, transparent)); border-color:rgba(0,0,0,.04); } .btn.ghost{background:transparent} /* ===== Sections, Cards, Grids ===== */ .section{padding:64px 0; border-top:1px solid var(--line); background:var(--bg)} .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(2,8,23,.06)} .grid-3{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px} /* ===== Footer ===== */ .site-footer{ margin-top:40px; padding:30px 0; border-top:1px solid var(--line); background:var(--panel); } .brand-inline{display:flex; align-items:center; gap:10px} .site-footer h4{margin:0 0 10px} /* ===== Animations (reveal on scroll) ===== */ [data-animate]{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease} [data-animate].in{opacity:1; transform:none} [data-animate="fade-down"]{transform:translateY(-8px)} [data-animate="rise"]{transform:translateY(16px)} @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important} [data-animate]{opacity:1 !important; transform:none !important} } /* ===== Utilities ===== */ .text-blue{color:var(--blue)} .text-red{color:var(--red)} .text-yellow{color:var(--yellow)} .text-green{color:var(--green)} .border-brand{border-color:color-mix(in oklab, var(--blue) 35%, transparent)} .rtl{direction:rtl} .ltr{direction:ltr} /* ===== Responsive tweaks ===== */ @media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .cards{grid-template-columns:1fr} .hero{padding:64px 0 32px} } /* ===== Hero video background ===== */ .hero--video{position:relative; padding:0; background:var(--panel);} .hero--video .hero__bg{position:absolute; inset:0; overflow:hidden; z-index:0} .hero--video .hero__video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(105%) contrast(105%); } .hero--video .hero__overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.65) 38%, rgba(255,255,255,.40) 60%, rgba(255,255,255,.35)), radial-gradient(60% 80% at 10% 10%, color-mix(in oklab, var(--blue) 9%, transparent), transparent 70%), radial-gradient(60% 80% at 90% 10%, color-mix(in oklab, var(--green) 8%, transparent), transparent 70%); } html.theme-dark .hero--video .hero__overlay{ background: linear-gradient(180deg, rgba(11,15,23,.70), rgba(11,15,23,.55) 40%, rgba(11,15,23,.45)), radial-gradient(60% 80% at 10% 10%, color-mix(in oklab, var(--blue) 16%, transparent), transparent 70%), radial-gradient(60% 80% at 90% 10%, color-mix(in oklab, var(--green) 14%, transparent), transparent 70%); } .hero--video .hero__content{ position:relative; z-index:1; padding: min(18vh,120px) 0 min(12vh,96px); } /* Noscript/image fallback block (optional) */ .hero__noscript{ position:absolute; inset:0; background-size:cover; background-position:center; } /* Respect user preferences */ @media (prefers-reduced-motion: reduce){ .hero--video .hero__video{display:none} } @media (max-width:640px){ .hero--video .hero__content{padding:96px 0 72px} } /* ===== Professional footer layout ===== */ .site-footer.pro{background:var(--panel); border-top:1px solid var(--line)} .footer-wrap{ display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr 1fr; } .footer-col h4{margin:0 0 10px; font-weight:800} .footer-col ul{list-style:none; margin:0; padding:0} .footer-col ul li{margin:8px 0} .footer-col a{color:var(--text)} .footer-col a:hover{opacity:.9} .footer-brand{display:flex; flex-direction:column; gap:10px} .brand-inline{display:flex; align-items:center; gap:10px} .payments{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap} .payments .label{font-weight:700; color:var(--muted)} .pm{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; padding:2px 6px; background:#fff} .verifications{display:flex; flex-direction:column; gap:8px; margin:12px 0} .badge.verify{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:linear-gradient(180deg,#fff, #fafafa); color:var(--text); } html.theme-dark .badge.verify{background:linear-gradient(180deg,#0f172a, #0b1220)} .badge.verify svg{color:var(--green)} .contact-list li{margin:6px 0} @media (max-width:1024px){ .footer-wrap{grid-template-columns:1.5fr 1fr 1fr} } @media (max-width:720px){ .footer-wrap{grid-template-columns:1fr} } /* ===== Compact white footer ===== */ .site-footer.compact{ background:#fff; /* force white background */ border-top:1px solid var(--line); padding:14px 0; /* reduced vertical space */ } .fc-wrap{display:flex; flex-direction:column; gap:8px} .fc-row{ display:grid; gap:12px; grid-template-columns: 1fr 2fr auto; /* brand | links | right block */ align-items:center; } .fc-brand .brand__img{height:26px} .fc-quick{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.95rem; color:var(--text); } .fc-quick a{color:var(--text)} .fc-quick span{color:var(--muted)} .fc-right{display:flex; align-items:center; gap:14px; justify-content:flex-end} .fc-pay{display:flex; align-items:center; gap:8px} .pm{display:inline-block; border:1px solid var(--line); border-radius:6px; background:#fff} .fc-verify{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .v-link{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#fff; font-size:.9rem; } .v-link svg{color:var(--green)} .fc-meta{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; border-top:1px solid var(--line); color:var(--muted); } /* Responsive stacking */ @media (max-width: 900px){ .fc-row{grid-template-columns:1fr; justify-items:stretch} .fc-right{justify-content:flex-start} } /* ===== Partners strip (animated logos) ===== */ .partners{background:var(--bg)} .partners h2{margin-bottom:10px} .partners .sub{margin-top:-6px; margin-bottom:18px; color:var(--muted)} .partners-grid{ list-style:none; padding:0; margin:0; display:grid; gap:16px; grid-template-columns:repeat(6, minmax(0,1fr)); } .partner-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; height:96px; padding:16px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; animation:partner-float 6s ease-in-out infinite; } .partner-card img{ max-height:44px; width:auto; display:block; filter:grayscale(100%) contrast(95%); opacity:.9; transition:filter .25s ease, opacity .25s ease, transform .25s ease; } .partner-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(2,8,23,.08)} .partner-card:hover img{filter:none; opacity:1; transform:scale(1.02)} .partner-card .tag{ position:absolute; right:10px; bottom:8px; left:auto; font-size:.78rem; color:var(--muted); background:rgba(0,0,0,.04); padding:2px 6px; border-radius:8px; } html[dir="rtl"] .partner-card .tag{right:auto; left:10px} /* subtle top border tint using brand colors */ .partner-card:nth-child(4n+1){border-top:3px solid var(--blue)} .partner-card:nth-child(4n+2){border-top:3px solid var(--green)} .partner-card:nth-child(4n+3){border-top:3px solid var(--yellow)} .partner-card:nth-child(4n+4){border-top:3px solid var(--red)} @keyframes partner-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } /* Staggered delays */ .partner-card:nth-child(1){animation-delay:.0s} .partner-card:nth-child(2){animation-delay:.2s} .partner-card:nth-child(3){animation-delay:.4s} .partner-card:nth-child(4){animation-delay:.6s} .partner-card:nth-child(5){animation-delay:.8s} .partner-card:nth-child(6){animation-delay:1.0s} /* Responsive */ @media (max-width:1024px){ .partners-grid{grid-template-columns:repeat(4,1fr)} } @media (max-width:720px){ .partners-grid{grid-template-columns:repeat(2,1fr)} .partner-card{height:84px} } /* ===== Clickable service cards with icons ===== */ .card-link{display:block; color:inherit; text-decoration:none} .card-link:focus{outline:2px solid color-mix(in oklab, var(--blue) 40%, transparent); outline-offset:2px; border-radius:14px} .card .card-icon{ --card-color: var(--blue); width:44px; height:44px; border-radius:12px; background:color-mix(in oklab, var(--card-color) 12%, white); display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; border:1px solid var(--line); } .card .card-icon svg{width:22px; height:22px; color:var(--card-color)} .card:hover .card-icon{transform:translateY(-1px); transition:transform .2s ease} .case-studies { --cs-bg: #fff; --cs-border: rgba(2,8,23,.08); --cs-border-strong: rgba(2,8,23,.14); --cs-muted: #6b7280; --cs-title: #0f172a; --cs-brand: var(--brand, #0ea5e9); background: var(--cs-bg); padding-block: 40px; } .case-studies .wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(12px, 2vw, 24px); } .case-studies .head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .case-studies .head h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--cs-title); } .case-studies .head p { margin: 2px 0 0; color: var(--cs-muted); font-size: .98rem; } /* grid */ .case-studies .cs-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1024px) { .case-studies .cs-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .case-studies .cs-grid { grid-template-columns: 1fr; } } /* card */ .case-studies .cs-card { position: relative; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--cs-border); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; display: flex; flex-direction: column; } .case-studies .cs-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,8,23,.08); border-color: var(--cs-border-strong); } /* media */ .case-studies .cs-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; /* modern browsers */ background: #f1f5f9; } .case-studies .cs-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.0); transition: transform .35s ease; } .case-studies .cs-card:hover .cs-media img { transform: scale(1.05); } .case-studies .cs-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); pointer-events:none; } /* badge (category) - logical positioning for RTL/LTR */ .case-studies .cs-badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; /* flips in RTL automatically */ z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; color: #0f172a; border: 1px solid var(--cs-border); font-size: .86rem; font-weight: 600; } .case-studies .cs-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-brand); } /* body */ .case-studies .cs-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; } .case-studies .cs-title { font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.25; margin: 0; } .case-studies .cs-title a { color: var(--cs-title); text-decoration: none; } .case-studies .cs-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .case-studies .cs-excerpt { margin: 0; color: var(--cs-muted); font-size: .96rem; } /* meta */ .case-studies .cs-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 2px 0 0; color: #334155; font-size: .88rem; } .case-studies .cs-meta .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .case-studies .cs-meta .item svg { width: 16px; height: 16px; } .case-studies .cs-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--cs-brand); } .case-studies .cs-cta svg { width: 18px; height: 18px; } /* subtle entrance */ .case-studies [data-animate="rise"] { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; } .case-studies [data-animate="rise"].in { opacity: 1; transform: translateY(0); } /* ==== Header base ==== */ .site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee} .site-header .container.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;min-height:60px} .brand{display:inline-flex;align-items:center;text-decoration:none} .brand__img{height:28px;width:auto;display:block} /* Burger — visible + customizable color/background */ .site-header{ --burger-color:#0a58ff; --burger-bg:rgba(10,88,255,.08); --burger-border:rgba(10,88,255,.18); } .burger{ display:inline-flex !important; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:var(--burger-bg); border:1px solid var(--burger-border); border-radius:10px; cursor:pointer; position:relative; z-index:1101; -webkit-tap-highlight-color: transparent; } .burger span{ display:block; width:22px; height:2px; background:var(--burger-color); transition:transform .25s, opacity .2s, background-color .2s; } .burger:hover{ filter:brightness(.97); } .burger:focus-visible{ outline:2px solid var(--burger-color); outline-offset:2px; } .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* خيار للوضع العكسي (لو الهيدر فوق صورة غامقة): غيّر الألوان بسرعة */ .site-header.is-inverse{ --burger-color:#ffffff; --burger-bg:rgba(255,255,255,.22); --burger-border:rgba(255,255,255,.45); } /* Menu default (mobile) — hard override older CSS */ .menu{ position:fixed; left:0; right:0; top:0; /* سيتم ضبط top بالسكربت حسب ارتفاع الهيدر */ background:#fff;border-top:1px solid #eee; z-index:1100; display:none; /* ← اهم سطر */ flex-direction:column; gap:6px; padding:12px 16px 16px; max-height:80vh; overflow:auto; } .menu a{padding:10px 12px;border-radius:10px;text-decoration:none;color:#111;font-weight:500} .menu a:hover{background:#f6f7f9} .menu .cta{background:#111;color:#fff} .menu .cta:hover{filter:brightness(.95)} .menu .sep{display:none} .menu .lang{font-weight:700} /* Open state (bullet-proof) */ .menu.is-open{display:flex !important;visibility:visible !important;opacity:1 !important} /* Desktop ≥ 992px */ @media (min-width:992px){ .burger{display:none !important} .menu{ position:static;display:flex !important;flex-direction:row;align-items:center; gap:6px;padding:0;background:transparent;border:0;max-height:none;overflow:visible } .menu .sep{display:inline-block;width:1px;height:20px;background:#e6e6e6;margin-inline:6px} } /* Active link */ .menu a.active{color:#0a58ff;background:rgba(10,88,255,.08)} /* Burger: لون واضح وخلفية أخف */ .site-header{ --burger-color:#0a58ff; } .site-header .burger{ background:#eef2ff; border:1px solid #c7d2fe; box-shadow: inset 0 0 0 3px rgba(10,88,255,.06); } .site-header .burger span{ background:var(--burger-color) !important; /* يتخطى أي ستايل قديم */ } .site-header .burger:hover{ filter:brightness(.97); } /* استخدم لون الأيقونة من لون النص */ .site-header .burger{ position:relative; width:44px; height:44px; border-radius:10px; background:#eef2ff; border:1px solid #c7d2fe; color:#0a58ff; /* ثلاث خطوط الهامبرغر */ background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-size:22px 2px, 22px 2px, 22px 2px; background-position: 11px 14px, 11px 21px, 11px 28px; } .site-header .burger span{ display:none !important; } /* نتجاهل الـ spans */