/* ============================================================ OPERONIX — Corporate Consulting Platform Shared design system • RTL/LTR • Brand: Navy / Silver ============================================================ */ /* ---------- Fonts ---------- */ /* Loaded via in HTML: Tajawal (AR), Inter (EN), Sora (display) */ /* ---------- Design Tokens ---------- */ :root { /* Brand */ --navy-900: #021A3E; /* exact logo navy */ --navy-800: #06162B; /* spec primary */ --navy-700: #0B2350; --navy-600: #103069; --navy-500: #1B4D93; --navy-400: #3A6FBF; --silver-500: #9C9C9C; /* exact logo grey */ --silver-400: #A3A6A8; /* spec secondary */ --silver-300: #C4C7C9; --silver-200: #E4E6E8; --accent: #2E7BE4; /* interactive blue, derived from navy family */ --accent-soft: #E8F1FD; /* Surfaces */ --bg: #FFFFFF; --bg-alt: #F8F9FA; --bg-tint: #F2F5F9; --line: #E7EAEE; /* Text */ --ink: #0E1B2E; --ink-soft: #46586E; --ink-mute: #7C8AA0; --on-navy: #EAF0F8; --on-navy-mute: #9FB1CC; /* Effects */ --shadow-sm: 0 1px 2px rgba(2,26,62,.06), 0 1px 3px rgba(2,26,62,.05); --shadow-md: 0 8px 24px -8px rgba(2,26,62,.18); --shadow-lg: 0 28px 60px -20px rgba(2,26,62,.28); --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --container: 1200px; --header-h: 84px; --font-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-ar-display: 'Rubik', 'IBM Plex Sans Arabic', sans-serif; --font-en: 'Inter', system-ui, sans-serif; --font-display: 'Sora', var(--font-en); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-en); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Language-driven font + direction. The dir/lang is set by JS. */ html[lang="ar"] body { font-family: var(--font-ar); } html[dir="rtl"] { direction: rtl; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: var(--font-ar-display); letter-spacing: 0; font-weight: 700; } /* ---------- Layout helpers ---------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .section { padding: 96px 0; } .section--alt { background: var(--bg-alt); } .section--navy { background: var(--navy-900); color: var(--on-navy); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-en); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } html[lang="ar"] .eyebrow { font-family: var(--font-ar); letter-spacing: .04em; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 18px 0 14px; } .section-head p { color: var(--ink-soft); font-size: 17px; } .section-head--center { margin-inline: auto; text-align: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border-radius: 999px; font-family: var(--font-en); font-weight: 600; font-size: 15px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease); white-space: nowrap; cursor: pointer; } html[lang="ar"] .btn { font-family: var(--font-ar); } .btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .btn-primary { background: var(--navy-900); color: #fff; box-shadow: 0 10px 24px -10px rgba(2,26,62,.7); } .btn-primary:hover { background: var(--navy-600); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(2,26,62,.75); } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(46,123,228,.8); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(46,123,228,.85); } .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); } .btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); } .btn-outline { border: 1.5px solid var(--silver-300); color: var(--navy-900); background: #fff; } .btn-outline:hover { border-color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-lg { padding: 16px 32px; font-size: 16px; } /* Arrow flips with direction */ html[dir="rtl"] .btn .icon-go { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .icon-go { transform: scaleX(-1) translateX(4px); } html[dir="ltr"] .btn:hover .icon-go { transform: translateX(4px); } /* ============================================================ HEADER / NAVBAR ============================================================ */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--header-h); background: rgba(2,26,62,.0); transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease); } .site-header.scrolled { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 var(--line), var(--shadow-sm); height: 70px; } .nav { display: flex; align-items: center; gap: 28px; height: 100%; } .nav-logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; } .nav-logo img { height: 40px; width: auto; } .site-header.scrolled .nav-logo img { height: 34px; } /* Show white-text logo on transparent/dark header, navy logo when scrolled */ .nav-logo .logo-light { display: block; } .nav-logo .logo-dark { display: none; } .site-header.scrolled .nav-logo .logo-light { display: none; } .site-header.scrolled .nav-logo .logo-dark { display: block; } .nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav-links a { position: relative; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--on-navy); transition: color .2s var(--ease), background .2s var(--ease); } .site-header.scrolled .nav-links a { color: var(--ink-soft); } .nav-links a:hover { color: #fff; background: rgba(255,255,255,.1); } .site-header.scrolled .nav-links a:hover { color: var(--navy-900); background: var(--bg-tint); } .nav-links a.active { color: #fff; } .site-header.scrolled .nav-links a.active { color: var(--navy-900); } .nav-links a.active::after { content: ""; position: absolute; inset-block-end: 2px; inset-inline: 14px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Language switcher */ .lang-switch { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: var(--on-navy); font-size: 14px; font-weight: 600; transition: all .2s var(--ease); } .lang-switch svg { width: 16px; height: 16px; } .lang-switch:hover { background: rgba(255,255,255,.12); color: #fff; } .site-header.scrolled .lang-switch { border-color: var(--silver-300); color: var(--ink-soft); } .site-header.scrolled .lang-switch:hover { border-color: var(--navy-900); color: var(--navy-900); } .nav-cta { display: inline-flex; } .drawer-cta { display: none; } .site-header:not(.scrolled) .nav-cta.btn-primary { background: #fff; color: var(--navy-900); } .site-header:not(.scrolled) .nav-cta.btn-primary:hover { background: var(--silver-200); } /* Mobile burger */ .nav-burger { display: none; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; } .nav-burger span { display: block; width: 20px; height: 2px; background: var(--on-navy); position: relative; transition: .3s var(--ease); } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: var(--on-navy); transition: .3s var(--ease); } .nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; } .site-header.scrolled .nav-burger span, .site-header.scrolled .nav-burger span::before, .site-header.scrolled .nav-burger span::after { background: var(--navy-900); } body.nav-open .nav-burger span { background: transparent; } body.nav-open .nav-burger span::before { top: 0; transform: rotate(45deg); } body.nav-open .nav-burger span::after { top: 0; transform: rotate(-45deg); } /* ============================================================ NAV DROPDOWN (.nav-item-dd) ============================================================ */ .nav-item-dd { position: relative; display: flex; align-items: center; } .nav-dd-trigger { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--on-navy); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); white-space: nowrap; text-decoration: none; } .nav-dd-trigger svg { width: 16px; height: 16px; transition: transform .25s var(--ease); flex-shrink: 0; } .site-header.scrolled .nav-dd-trigger { color: var(--ink-soft); } .nav-dd-trigger:hover { color: #fff; background: rgba(255,255,255,.1); } .site-header.scrolled .nav-dd-trigger:hover { color: var(--navy-900); background: var(--bg-tint); } /* Open state via hover */ .nav-item-dd:hover .nav-dd-trigger svg { transform: rotate(180deg); } /* The dropdown panel */ .nav-dd-menu { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%); min-width: 380px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); padding: 10px; padding-top: 18px; /* visual gap without breaking hover zone */ display: flex; flex-direction: column; gap: 2px; /* hidden by default */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity .22s var(--ease), visibility .22s var(--ease), transform .22s var(--ease); z-index: 200; } html[dir="rtl"] .nav-dd-menu { transform: translateX(50%); } html[dir="rtl"] .nav-item-dd:hover .nav-dd-menu { transform: translateX(50%) translateY(0); } .nav-item-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Individual item */ .nav-dd-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease); text-decoration: none; } .nav-dd-item:hover { background: var(--bg-tint); color: var(--navy-900); } /* Icon column */ .nav-dd-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-top: 2px; } .nav-dd-ic svg, .nav-dd-ic img { width: 20px; height: 20px; } /* Text column */ .nav-dd-item > span:last-child { display: flex; flex-direction: column; gap: 3px; } .nav-dd-item b { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .nav-dd-item span span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } /* Mobile: show as flat list inside open drawer */ @media (max-width: 860px) { .nav-item-dd { flex-direction: column; align-items: stretch; width: 100%; } .nav-dd-trigger { width: 100%; border-radius: 10px; color: var(--on-navy); font-size: 16px; padding: 15px 16px; } .nav-dd-menu { position: static; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: none; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); border-radius: 10px; margin-top: 6px; display: none; } .nav-item-dd.open .nav-dd-menu { display: flex; } .nav-dd-item { color: var(--on-navy); } .nav-dd-item:hover { background: rgba(255,255,255,.08); color: #fff; } .nav-dd-ic { background: rgba(255,255,255,.1); color: #fff; } .nav-dd-item b { color: #fff; } .nav-dd-item span span { color: rgba(234,240,248,.75); } } /* ============================================================ HERO (carousel) ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-start; background: var(--navy-900); color: #fff; overflow: hidden; padding: max(26vh, calc(var(--header-h) + 80px)) 0 64px; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 10%, rgba(46,123,228,.28), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(27,77,147,.35), transparent 60%); } html[dir="rtl"] .hero::before { transform: scaleX(-1); } .hero-grid-bg { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent); } /* ============================================================ HERO SLIDER (Homepage) ============================================================ */ .hero-slider { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; background: var(--navy-900); color: #fff; padding-top: var(--header-h); } @media (min-height: 900px){ .hero-slider { min-height: 760px; } } .hero-slide { position: absolute; inset: 0; display: none; align-items: flex-start; } .hero-slide.active { display: flex; animation: heroSlideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes heroSlideIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } } .hero-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,26,62,0.9) 0%, rgba(2,26,62,0.5) 100%); z-index: 2; } .hero-slide-content { position: relative; z-index: 3; width: 100%; max-width: 800px; } .hero-slide-content h1 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.15; margin-bottom: 24px; } .hero-slide-content p { font-size: clamp(16px, 1.6vw, 19px); color: var(--on-navy-mute); max-width: 640px; line-height: 1.6; margin-bottom: 18px; } .hero-slide-content p:last-of-type { margin-bottom: 34px; } .hero-slide-content .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-slider-nav { position: absolute; bottom: 40px; right: 5%; z-index: 10; display: flex; gap: 12px; } html[dir="rtl"] .hero-slider-nav { right: auto; left: 5%; } .hero-slider-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s var(--ease); backdrop-filter: blur(4px); } .hero-slider-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .hero-slider-btn svg { width: 20px; height: 20px; } html[dir="rtl"] .hero-slider-btn.next svg { transform: scaleX(-1); } html[dir="rtl"] .hero-slider-btn.prev svg { transform: scaleX(-1); } .hero-chevron { position: absolute; inset-inline-end: -60px; inset-block-start: 50%; transform: translateY(-50%); width: 520px; height: 520px; opacity: .07; color: var(--silver-400); } html[dir="rtl"] .hero-chevron { inset-inline-end: auto; inset-inline-start: -60px; transform: translateY(-50%) scaleX(-1); } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; margin-bottom: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 600; color: var(--on-navy); letter-spacing: .04em; } .hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 4px rgba(54,211,153,.2); } .hero h1 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.12; margin-bottom: 20px; } .hero h1 .grad { background: linear-gradient(90deg, #fff, var(--silver-300)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: clamp(16px, 1.6vw, 19px); color: var(--on-navy-mute); max-width: 560px; margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-stats { display: flex; gap: 36px; margin-top: 36px; flex-wrap: wrap; } .hero-stat strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 700; } html[lang="ar"] .hero-stat strong { font-family: var(--font-ar-display); } .hero-stat span { font-size: 14px; color: var(--on-navy-mute); } .hero-dots { display: flex; gap: 10px; margin-top: 32px; } .hero-dot { width: 30px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); transition: .3s var(--ease); cursor: pointer; } .hero-dot.active { background: var(--accent); width: 46px; } .scroll-hint { position: absolute; inset-block-end: 28px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 2; color: var(--on-navy-mute); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-hint .mouse { width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.3); border-radius: 12px; position: relative; } .scroll-hint .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; border-radius: 2px; background: #fff; animation: scrollDot 1.6s infinite; } @keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,10px)} } /* ============================================================ FEATURE / TOOLS CARDS ============================================================ */ .grid { display: grid; gap: 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .card-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 22px; transition: background .3s var(--ease), color .3s var(--ease); } .card-icon svg { width: 26px; height: 26px; } .card:hover .card-icon { background: var(--navy-900); color: #fff; } .card h3 { font-size: 21px; margin-bottom: 10px; } .card p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px; } .card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 15px; } .card-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } html[dir="ltr"] .card:hover .card-link svg { transform: translateX(4px); } html[dir="rtl"] .card .card-link svg { transform: scaleX(-1); } html[dir="rtl"] .card:hover .card-link svg { transform: scaleX(-1) translateX(4px); } /* Tool card variant with price/badge for the Tools page */ .tool-card { padding: 0; display: flex; flex-direction: column; } .tool-card .tool-top { padding: 30px 30px 24px; } .tool-badge { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .tool-badge.pro { background: #FFF2D8; color: #B7791F; } .tool-badge.free { background: #DCFCE7; color: #16A34A; } .tool-features { display: flex; flex-direction: column; gap: 11px; margin: 8px 0 0; } .tool-features li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-soft); } .tool-features svg { width: 18px; height: 18px; color: #16a34a; flex-shrink: 0; } .tool-foot { margin-top: auto; padding: 22px 30px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-alt); } .tool-price { font-family: var(--font-display); } html[lang="ar"] .tool-price { font-family: var(--font-ar-display); } .tool-price strong { font-size: 24px; color: var(--navy-900); } .tool-price span { font-size: 13px; color: var(--ink-mute); } /* ============================================================ BLOG CARDS ============================================================ */ .post-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; } .post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .post-thumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--bg-tint); } .post-thumb img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); } .post-card:hover .post-thumb img { transform: scale(1.06); } .post-cat { position:absolute; inset-block-start:14px; inset-inline-start:14px; padding:5px 12px; border-radius:999px; background: rgba(2,26,62,.85); color:#fff; font-size:12px; font-weight:600; backdrop-filter: blur(4px); } .post-body { padding: 24px; display:flex; flex-direction:column; flex:1; } .post-meta { display:flex; align-items:center; gap:10px; font-size:13px; color: var(--ink-mute); margin-bottom:12px; } .post-body h3 { font-size:19px; line-height:1.35; margin-bottom:10px; } .post-body p { color: var(--ink-soft); font-size:14.5px; margin-bottom:18px; flex:1; } .post-author { display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--line); } .post-author img { width:34px; height:34px; border-radius:50%; } .post-author small { color: var(--ink-mute); font-size:12.5px; } .post-author b { font-size:13.5px; } /* Featured Post Card */ .featured-card { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 56px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .featured-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .featured-card-info { padding: 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; } html[dir="rtl"] .featured-card { grid-template-columns: 1fr 1.15fr; } html[dir="rtl"] .featured-card-img { order: -1; } html[dir="rtl"] .featured-card-info { align-items: flex-start; } .featured-card-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-size: 12.5px; font-weight: 700; } .featured-card-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .featured-card-title { font-size: clamp(20px, 2.4vw, 28px); color: var(--navy-900); line-height: 1.35; margin: 0; font-weight: 700; } .featured-card-title a { color: inherit; text-decoration: none; transition: color .2s; } .featured-card-title a:hover { color: var(--accent); } .featured-card-excerpt { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; } .featured-card-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-mute); } .featured-card-img { position: relative; overflow: hidden; background: var(--bg-tint); min-height: 340px; } .featured-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .featured-card:hover .featured-card-img img { transform: scale(1.04); } @media (max-width: 991px) { .featured-card { grid-template-columns: 1fr; } .featured-card-info { padding: 32px 24px; order: 2; } .featured-card-img { order: 1; min-height: 240px; aspect-ratio: 16/10; } } /* ============================================================ CLIENTS MARQUEE ============================================================ */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; gap: 64px; width: max-content; animation: scrollX 36s linear infinite; } html[dir="rtl"] .marquee-track { animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--silver-400); white-space: nowrap; opacity: .75; transition: opacity .3s, transform 0.3s var(--ease), color .3s; letter-spacing: -.02em; display: inline-flex; align-items: center; justify-content: center; height: 60px; } .marquee-item:hover { opacity: 1; color: var(--navy-900); transform: scale(1.05); } @keyframes scrollX { to { transform: translateX(-50%); } } /* ============================================================ ABOUT / VALUES / STATS strip ============================================================ */ .stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--radius-lg); overflow: hidden; } .stat-cell { background: var(--navy-900); padding: 34px 28px; text-align: center; } .stat-cell strong { display:block; font-family: var(--font-display); font-size: 40px; font-weight:700; background: linear-gradient(90deg,#fff,var(--silver-300)); -webkit-background-clip:text; background-clip:text; color:transparent; } html[lang="ar"] .stat-cell strong { font-family: var(--font-ar-display); } .stat-cell span { color: var(--on-navy-mute); font-size: 14px; } .value-item { display:flex; gap:16px; align-items:flex-start; } .value-item .vnum { font-family: var(--font-display); font-size: 14px; font-weight:700; color: var(--accent); border:1.5px solid var(--accent-soft); background: var(--accent-soft); width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; } html[lang="ar"] .value-item .vnum { font-family: var(--font-ar-display); } .value-item h4 { font-size:18px; margin-bottom:6px; } .value-item p { color: var(--ink-soft); font-size:15px; } /* ============================================================ CTA band ============================================================ */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-900); color:#fff; padding: 64px; text-align:center; } .cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 120% at 50% 0%, rgba(46,123,228,.4), transparent 60%); } .cta-band > * { position: relative; z-index:1; } .cta-band h2 { font-size: clamp(26px,3.4vw,40px); margin-bottom:14px; } .cta-band p { color: var(--on-navy-mute); max-width:560px; margin: 0 auto 28px; font-size:17px; } .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--navy-900); color: var(--on-navy-mute); padding: 72px 0 32px; } .footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-brand img { height: 38px; margin-bottom: 18px; } .footer-brand p { font-size: 14.5px; line-height:1.7; max-width: 300px; } .footer-social { display:flex; gap:10px; margin-top:22px; } .footer-social a { width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.06); display:grid; place-items:center; color: var(--on-navy); transition:.2s var(--ease); } .footer-social a:hover { background: var(--accent); color:#fff; transform: translateY(-2px); } .footer-social svg { width:18px; height:18px; } .footer-col h5 { color:#fff; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; font-family: var(--font-en); } html[lang="ar"] .footer-col h5 { font-family: var(--font-ar); } .footer-col a { display:block; font-size:14.5px; padding:7px 0; transition: color .2s, padding-inline-start .2s; } .footer-col a:hover { color:#fff; padding-inline-start: 5px; } .footer-bottom { padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13.5px; } .footer-bottom a:hover { color:#fff; } /* ============================================================ PAGE HEADER (inner pages) ============================================================ */ .page-hero { background: var(--navy-900); color:#fff; padding: calc(var(--header-h) + 40px) 0 48px; position: relative; overflow:hidden; } .page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 90% at 80% 0%, rgba(46,123,228,.25), transparent 60%); } html[dir="rtl"] .page-hero::before { transform: scaleX(-1); } .page-hero-inner { position:relative; z-index:1; max-width:680px; } .page-hero h1 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0 10px; } .page-hero p { color: var(--on-navy-mute); font-size:18px; } .breadcrumb { display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--on-navy-mute); } .breadcrumb a:hover { color:#fff; } .breadcrumb svg { width:14px; height:14px; opacity:.6; } html[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); } /* ============================================================ REVEAL animation utility ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"]{ transition-delay:.08s } .reveal[data-delay="2"]{ transition-delay:.16s } .reveal[data-delay="3"]{ transition-delay:.24s } .reveal[data-delay="4"]{ transition-delay:.32s } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .stat-strip { grid-template-columns: repeat(2,1fr); } } @media (max-width: 860px) { .section { padding: 64px 0; } /* Burger visible, desktop CTA hidden */ .nav-burger { display: flex; z-index: 102; } .nav-cta { display: none; } /* Drawer panel slides from the END side (right in LTR, left in RTL) */ .nav-links { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; width: min(80vw, 320px); flex-direction: column; align-items: stretch; gap: 4px; background: var(--navy-900); padding: calc(var(--header-h) + 12px) 22px 32px; box-shadow: -20px 0 50px -20px rgba(0,0,0,.6); transform: translateX(100%); transition: transform .38s var(--ease); z-index: 101; overflow-y: auto; } html[dir="rtl"] .nav-links { box-shadow: 20px 0 50px -20px rgba(0,0,0,.6); transform: translateX(-100%); } body.nav-open .nav-links { transform: translateX(0) !important; } /* Links always light inside the dark drawer, full-width rows */ .nav-links a, .site-header.scrolled .nav-links a { color: var(--on-navy); font-size: 16px; padding: 15px 16px; border-radius: 10px; } .nav-links a:hover, .site-header.scrolled .nav-links a:hover { color:#fff; background: rgba(255,255,255,.08); } .nav-links a.active, .site-header.scrolled .nav-links a.active { color:#fff; background: rgba(46,123,228,.16); } .nav-links a.active::after { display:none; } /* In-drawer CTA appears at the bottom */ .nav-links .drawer-cta { display: inline-flex; margin-top: 18px; justify-content: center; } /* Burger sits above the drawer; turns into X (handled in base burger rules) */ /* Dim overlay behind drawer */ .nav-overlay { position: fixed; inset: 0; background: rgba(2,12,28,.55); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; z-index: 100; } body.nav-open .nav-overlay { opacity: 1; visibility: visible; } /* Lock background scroll when menu open */ body.nav-open { overflow: hidden; } .grid-3, .grid-4, .grid-2, .footer-grid, .stat-strip { grid-template-columns: 1fr; } .hero-stats { gap: 28px; } .cta-band { padding: 40px 24px; } .footer-bottom { flex-direction: column; text-align:center; } } @media (max-width: 860px) { /* keep burger lines visible on transparent header too */ .nav-burger span, .nav-burger span::before, .nav-burger span::after { background: var(--on-navy); } body.nav-open .nav-burger span { background: transparent; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .marquee-track { animation: none; } } /* ============================================================ ABOUT page extras ============================================================ */ .vmv-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .vmv-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); } .vmv-card .card-icon { margin-bottom:18px; } .vmv-card h3 { font-size:20px; margin-bottom:10px; } .vmv-card p { color:var(--ink-soft); font-size:15px; } .team-card { text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 22px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .team-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); } .team-card img { width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 16px; border:3px solid var(--bg-tint); } .team-avatar { width:96px; height:96px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background: linear-gradient(150deg, var(--bg-tint), var(--silver-200)); color: var(--silver-400); border:3px solid #fff; box-shadow: inset 0 0 0 1px var(--line); } .team-avatar svg { width:46px; height:46px; } .team-card h4 { font-size:17px; margin-bottom:4px; } .team-card span { color:var(--ink-mute); font-size:13.5px; } .team-social { display:flex; gap:8px; justify-content:center; margin-top:14px; } .team-social a { width:32px;height:32px;border-radius:8px;background:var(--bg-tint);display:grid;place-items:center;color:var(--ink-soft);transition:.2s var(--ease); } .team-social a:hover { background:var(--navy-900); color:#fff; } .team-social svg { width:15px;height:15px; } .timeline { position:relative; max-width:760px; margin-inline:auto; } .timeline::before { content:""; position:absolute; inset-inline-start:20px; inset-block:8px; width:2px; background:var(--line); } .tl-item { position:relative; padding-inline-start:60px; padding-bottom:36px; } .tl-item:last-child { padding-bottom:0; } .tl-dot { position:absolute; inset-inline-start:11px; inset-block-start:4px; width:20px; height:20px; border-radius:50%; background:var(--accent); border:4px solid var(--accent-soft); } .tl-year { font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:15px; margin-bottom:4px; } html[lang="ar"] .tl-year { font-family:var(--font-ar); } .tl-item h4 { font-size:18px; margin-bottom:6px; } .tl-item p { color:var(--ink-soft); font-size:15px; } /* ============================================================ BLOG page extras ============================================================ */ .filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:40px; } .filter-chip { padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.2s var(--ease); font-family:var(--font-en); } html[lang="ar"] .filter-chip { font-family:var(--font-ar); } .filter-chip:hover { border-color:var(--navy-900); color:var(--navy-900); } .filter-chip.active { background:var(--navy-900); border-color:var(--navy-900); color:#fff; } .blog-search { margin-inline-start:auto; position:relative; } .blog-search input { padding:10px 16px 10px 40px; border:1.5px solid var(--line); border-radius:999px; font:inherit; font-size:14px; width:240px; outline:none; transition:.2s; } html[dir="rtl"] .blog-search input { padding:10px 40px 10px 16px; } .blog-search input:focus { border-color:var(--accent); } .blog-search svg { position:absolute; inset-block-start:50%; transform:translateY(-50%); inset-inline-start:14px; width:16px; height:16px; color:var(--ink-mute); } html[dir="rtl"] .blog-search svg { inset-inline-start:auto; inset-inline-end:14px; } .featured-post { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:48px; } .featured-post .fp-img { background:var(--bg-tint); min-height:340px; } .featured-post .fp-img img { width:100%; height:100%; object-fit:cover; } .featured-post .fp-body { padding:40px; display:flex; flex-direction:column; justify-content:center; } .fp-tag { display:inline-block; align-self:flex-start; padding:5px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; margin-bottom:16px; } .featured-post h2 { font-size:28px; line-height:1.25; margin-bottom:14px; } .featured-post p { color:var(--ink-soft); margin-bottom:22px; } /* ============================================================ MEDIA page extras ============================================================ */ .file-row { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; transition:.25s var(--ease); } .file-row:hover { border-color:var(--silver-300); box-shadow:var(--shadow-sm); transform:translateY(-2px); } .file-icon { width:52px; height:52px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; font-family:var(--font-display); font-weight:700; font-size:12px; color:#fff; letter-spacing:.02em; } .file-icon.pdf { background:#D7373F; } .file-icon.doc { background:#2B579A; } .file-icon.png { background:#16a34a; } .file-icon.xls { background:#1D6F42; } .file-meta { flex:1; min-width:0; } .file-meta h4 { font-size:16px; margin-bottom:3px; } .file-meta span { color:var(--ink-mute); font-size:13px; } .file-dl { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); color:var(--navy-900); font-weight:600; font-size:14px; transition:.2s var(--ease); font-family:var(--font-en); } html[lang="ar"] .file-dl { font-family:var(--font-ar); } .file-dl:hover { background:var(--navy-900); border-color:var(--navy-900); color:#fff; } .file-dl svg { width:16px; height:16px; } /* ============================================================ CONTACT page extras ============================================================ */ .contact-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; } .form-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm); } .form-card h3 { font-size:22px; margin-bottom:24px; } .field { margin-bottom:18px; } .field label { display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--ink); } .field input, .field textarea { width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:15px; outline:none; transition:.2s var(--ease); background:var(--bg); } html[lang="ar"] .field input, html[lang="ar"] .field textarea { font-family:var(--font-ar); } .field input:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .field textarea { resize:vertical; min-height:120px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-success { display:none; background:#ECFDF3; border:1px solid #A6F4C5; color:#067647; padding:14px 18px; border-radius:var(--radius-sm); font-size:14.5px; margin-bottom:18px; } .form-success.show { display:block; } .info-card { background:var(--navy-900); color:var(--on-navy); border-radius:var(--radius-lg); padding:36px; } .info-card h3 { color:#fff; font-size:20px; margin-bottom:24px; } .info-item { display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); } .info-item:last-of-type { border-bottom:none; } .info-item .ii-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--accent); flex-shrink:0; } .info-item .ii-icon svg { width:20px; height:20px; } .info-item b { display:block; color:#fff; font-size:14px; margin-bottom:3px; } .info-item span { font-size:14.5px; color:var(--on-navy-mute); } .map-wrap { margin-top:20px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); height:320px; } .map-wrap iframe { width:100%; height:100%; border:0; display:block; filter:grayscale(.2); } @media (max-width:860px) { .featured-post { grid-template-columns:1fr; } .featured-post .fp-img { min-height:220px; } .contact-grid { grid-template-columns:1fr; gap:28px; } .blog-search { margin-inline-start:0; width:100%; } .blog-search input { width:100%; } .field-row { grid-template-columns:1fr; } } /* ============================================================ HERO — taller + per-slide imagery ============================================================ */ .hero { min-height: 760px; } @keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero .hero-slide { position: static; inset: auto; display: none; align-items: stretch; width: auto; height: auto; opacity: 1; visibility: visible; max-width: 740px; } .hero .hero-slide.active { display: block; animation: heroIn .7s var(--ease) both; } @media (min-height: 900px){ .hero { min-height: 88vh; } } /* Two-column hero: text + visual */ .hero-inner.has-visual { display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:flex-start; } html[dir="rtl"] .hero-inner.has-visual { direction: rtl; } .hero-visual { position:relative; z-index:2; } .hero-figure { position:relative; } .hero-figure .hero-img { width:100%; aspect-ratio: 4/3.4; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid rgba(255,255,255,.12); display:none; background: var(--navy-700); } .hero-figure .hero-img.active { display:block; animation: heroIn .7s var(--ease) both; } .hero-figure::after { content:""; position:absolute; inset-block-end:-18px; inset-inline-end:-18px; width:120px; height:120px; border-radius:20px; z-index:-1; background: linear-gradient(135deg, var(--accent), transparent); opacity:.5; } html[dir="rtl"] .hero-figure::after { inset-inline-end:auto; inset-inline-start:-18px; } .hero-badge { position:absolute; inset-block-start:18px; inset-inline-start:18px; background: rgba(2,26,62,.78); backdrop-filter: blur(8px); color:#fff; padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:600; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:8px; } .hero-badge svg { width:16px; height:16px; color:var(--accent); } @media (max-width: 980px){ .hero-inner.has-visual { grid-template-columns: 1fr; gap:36px; } .hero-visual { order:2; max-width:520px; } } /* ============================================================ AUTH pages (login / register) ============================================================ */ .auth-wrap { min-height: calc(100vh - var(--header-h)); display:grid; grid-template-columns: 1fr 1fr; } .auth-aside { background: var(--navy-900); color:#fff; position:relative; overflow:hidden; padding: 64px; display:flex; flex-direction:column; justify-content:center; } .auth-aside::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 80% 10%, rgba(46,123,228,.3), transparent 60%); } .auth-aside-grid { position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:50px 50px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000,transparent); mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000,transparent); } .auth-aside-inner { position:relative; z-index:1; max-width:420px; } .auth-aside img.brand { height:38px; margin-bottom:32px; } .auth-aside h2 { font-size: clamp(26px,3vw,38px); margin-bottom:16px; } .auth-aside p { color:var(--on-navy-mute); font-size:16.5px; margin-bottom:28px; } .auth-points { display:flex; flex-direction:column; gap:14px; } .auth-point { display:flex; align-items:center; gap:12px; font-size:15px; } .auth-point svg { width:22px; height:22px; color:#36d399; flex-shrink:0; } .auth-main { display:flex; align-items:center; justify-content:center; padding: 56px 32px; background: var(--bg-alt); } .auth-card { width:100%; max-width: 460px; } .auth-card .auth-logo { display:none; } .auth-card h1 { font-size: 28px; margin-bottom:8px; } .auth-card > p.lead { color:var(--ink-soft); margin-bottom:28px; } .auth-section-label { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin:8px 0 14px; font-family:var(--font-en); } html[lang="ar"] .auth-section-label { font-family:var(--font-ar); } .auth-card form .field { margin-bottom:16px; } .auth-card select { width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:15px; background:#fff; outline:none; transition:.2s var(--ease); color:var(--ink); cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8AA0' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: left 16px center; } html[dir="rtl"] .auth-card select { background-position: left 16px center; } html[dir="ltr"] .auth-card select { background-position: right 16px center; } html[lang="ar"] .auth-card select { font-family:var(--font-ar); } .auth-card select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .auth-card .field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .auth-options { display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; font-size:14px; } .auth-options label { display:flex; align-items:center; gap:8px; color:var(--ink-soft); cursor:pointer; } .auth-options a { color:var(--accent); font-weight:600; } .auth-foot { text-align:center; margin-top:22px; font-size:14.5px; color:var(--ink-soft); } .auth-foot a { color:var(--accent); font-weight:600; } .auth-agree { font-size:13px; color:var(--ink-mute); margin:4px 0 18px; line-height:1.6; } @media (max-width: 900px){ .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display:none; } .auth-main { padding: 40px 22px; min-height: calc(100vh - var(--header-h)); } .auth-card .auth-logo { display:flex; justify-content:center; margin-bottom:24px; } .auth-card .auth-logo img { height:36px; } .auth-card .field-row { grid-template-columns:1fr; } } /* auth pages use light header always (not transparent over content) */ .site-header.auth-header { position: sticky; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); height: var(--header-h); } .site-header.auth-header .nav-logo .logo-light { display:none; } .site-header.auth-header .nav-logo .logo-dark { display:block; } .site-header.auth-header .nav-links a { color: var(--ink-soft); } /* ============================================================ AUTH pages (login / register) — professional floating-label ============================================================ */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } /* Visual panel with image + navy overlay */ .auth-aside { position: relative; color:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding: 56px 52px; background: var(--navy-900); } .auth-aside .auth-bg { position:absolute; inset:0; z-index:0; } .auth-aside .auth-bg img { width:100%; height:100%; object-fit:cover; opacity:.42; } .auth-aside .auth-bg svg { width:100%; height:100%; display:block; } .auth-aside::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(160deg, rgba(2,26,62,.78) 0%, rgba(2,26,62,.62) 45%, rgba(6,22,43,.92) 100%); } .auth-aside > * { position:relative; z-index:2; } .auth-aside .a-logo img { height: 42px; } .auth-aside-body { max-width: 460px; } .auth-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:13px; font-weight:600; margin-bottom:22px; } .auth-badge .dot { width:7px;height:7px;border-radius:50%;background:#36d399;box-shadow:0 0 0 4px rgba(54,211,153,.2); } .auth-aside h2 { font-size: clamp(28px,2.8vw,40px); color:#fff; margin-bottom:16px; line-height:1.22; } .auth-aside p.lead { color: rgba(234,240,248,.8); font-size:16.5px; line-height:1.7; } .auth-points { margin-top:30px; display:flex; flex-direction:column; gap:16px; } .auth-point { display:flex; align-items:center; gap:13px; color:var(--on-navy); font-size:15.5px; } .auth-point .ap-ic { width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0; } .auth-point .ap-ic svg { width:17px;height:17px;color:#fff; } .auth-quote { border-inline-start:3px solid var(--accent); padding-inline-start:16px; margin-top:6px; } .auth-quote p { color:rgba(234,240,248,.92); font-size:15px; font-style:italic; margin-bottom:8px; } .auth-quote span { color:var(--on-navy-mute); font-size:13px; } .auth-foot { color:rgba(159,177,204,.7); font-size:13px; } /* Form side */ .auth-main { display:flex; align-items:center; justify-content:center; padding: 48px 40px; background:#fff; } .auth-card { width:100%; max-width: 470px; } .auth-mobile-logo { display:none; text-align:center; margin-bottom:28px; } .auth-mobile-logo img { height:42px; display:inline-block; } .auth-card .a-head { margin-bottom: 30px; } .auth-card .a-head .eyebrow { margin-bottom:14px; } .auth-card .a-head h1 { font-size: clamp(26px,3vw,34px); margin:0 0 8px; } .auth-card .a-head p { color: var(--ink-soft); font-size:15.5px; } /* Floating-label field */ .ff { position: relative; margin-bottom: 18px; } .ff-input { width:100%; padding: 22px 46px 8px 16px; /* top room for label, start room for icon */ border:1.5px solid var(--line); border-radius: var(--radius); background:#fff; font:inherit; font-size:15px; color:var(--ink); outline:none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } html[dir="ltr"] .ff-input { padding: 22px 16px 8px 46px; } html[lang="ar"] .ff-input { font-family:var(--font-ar); } .ff-input::placeholder { color:transparent; } textarea.ff-input { min-height:108px; resize:vertical; padding-top:26px; } select.ff-input { appearance:none; -webkit-appearance:none; cursor:pointer; color:var(--ink); padding-block:14px 14px; } select.ff-input.has-val { padding-block:22px 8px; } .ff-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* the floating label */ .ff-label { position:absolute; inset-block-start:50%; inset-inline-start:46px; transform:translateY(-50%); color:var(--ink-mute); font-size:15px; pointer-events:none; transition:.18s var(--ease); background:transparent; padding:0 4px; } html[dir="ltr"] .ff-label { inset-inline-start:46px; } /* float up when focused or filled */ .ff-input:focus ~ .ff-label, input.ff-input:not(:placeholder-shown) ~ .ff-label, textarea.ff-input:not(:placeholder-shown) ~ .ff-label, .ff-input.has-val ~ .ff-label { inset-block-start:13px; transform:none; font-size:11.5px; font-weight:600; color:var(--accent); } /* icon */ .ff-icon { position:absolute; inset-block-start:50%; inset-inline-start:15px; transform:translateY(-50%); width:20px;height:20px;color:var(--ink-mute); pointer-events:none; transition:color .2s; } html[dir="ltr"] .ff-icon { inset-inline-start:auto; inset-inline-end:15px; } .ff-input:focus ~ .ff-icon { color:var(--accent); } textarea.ff-input ~ .ff-icon, textarea.ff-input ~ .ff-label { inset-block-start:26px; transform:none; } textarea.ff-input:focus ~ .ff-label, textarea.ff-input:not(:placeholder-shown) ~ .ff-label { inset-block-start:10px; } /* select chevron */ .ff.is-select::after { content:""; position:absolute; inset-block-start:50%; inset-inline-end:16px; transform:translateY(-50%) rotate(45deg); width:9px;height:9px;border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute); pointer-events:none; } html[dir="ltr"] .ff.is-select::after { inset-inline-end:auto; inset-inline-start:16px; } /* password visibility toggle */ .ff-eye { position:absolute; inset-block-start:50%; inset-inline-end:14px; transform:translateY(-50%); width:22px;height:22px; color:var(--ink-mute); cursor:pointer; background:none; border:none; padding:0; z-index:2; } html[dir="ltr"] .ff-eye { inset-inline-end:auto; inset-inline-start:14px; } .ff-eye svg { width:20px;height:20px; } .ff-eye:hover { color:var(--navy-900); } .ff:has(.ff-eye) .ff-input { padding-inline-end:44px; } .auth-row { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .btn-submit { width:100%; margin-top:10px; } .auth-aux { display:flex; justify-content:flex-end; margin:-6px 0 16px; } .auth-aux a { color:var(--accent); font-size:13.5px; font-weight:600; } .auth-alt { text-align:center; margin-top:22px; font-size:14.5px; color:var(--ink-soft); } .auth-alt a { color:var(--accent); font-weight:600; } .auth-divider { display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--ink-mute); font-size:13px; } .auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--line); } .auth-back { display:inline-flex; align-items:center; gap:6px; color:var(--ink-mute); font-size:13.5px; margin-top:22px; width:100%; justify-content:center; } .auth-back svg { width:15px;height:15px; } html[dir="rtl"] .auth-back svg { transform: scaleX(-1); } .form-success { display:none; background:#ECFDF3; border:1px solid #A6F4C5; color:#067647; padding:13px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; text-align:center; } .form-success.show { display:block; } @media (max-width: 940px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display:none; } .auth-mobile-logo { display:block; } .auth-main { padding: 40px 22px; min-height:100vh; align-items:flex-start; padding-top:48px; } .auth-row { grid-template-columns:1fr; gap:0; } } /* nav login link (beside CTA) */ .nav-login { cursor:pointer; padding:9px 18px; border-radius:999px; font-size:14.5px; font-weight:600; color:var(--on-navy); border:1px solid rgba(255,255,255,.28); transition:all .2s var(--ease); } .nav-login:hover { background:rgba(255,255,255,.12); color:#fff; } .site-header.scrolled .nav-login { color:var(--ink-soft); border-color:var(--silver-300); } .site-header.scrolled .nav-login:hover { color:var(--navy-900); border-color:var(--navy-900); } @media (max-width: 860px) { .nav-login { display:none; } /* desktop login hidden in drawer; drawer has its own */ .nav-links-login { display:block; color:var(--on-navy); font-size:16px; padding:15px 16px; border-radius:10px; margin-top:8px; border:1px solid rgba(255,255,255,.16); } .nav-links-login:hover { background:rgba(255,255,255,.08); color:#fff; } } @media (min-width: 861px) { .nav-links-login { display:none; } } /* ============================================================ BACK TO TOP button ============================================================ */ .footer-bottom { justify-content:center; } .to-top { position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color:#fff; display:grid; place-items:center; box-shadow: 0 10px 28px -8px rgba(46,123,228,.7); cursor:pointer; opacity:0; visibility:hidden; transform: translateY(16px) scale(.9); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s; border:none; } .to-top.show { opacity:1; visibility:visible; transform: translateY(0) scale(1); } .to-top:hover { background: var(--navy-900); transform: translateY(-3px) scale(1.05); } .to-top svg { width:22px; height:22px; } @media (max-width:760px){ .to-top { inset-block-end:18px; inset-inline-end:18px; width:46px; height:46px; } } /* ============================================================ AUTH as internal page (navbar + footer + centered card) ============================================================ */ .auth-section { background: var(--bg-alt); padding: 56px 0 80px; } .auth-page-card { max-width: 760px; margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 48px 56px; } .auth-page-card.narrow { max-width: 580px; } .auth-page-card .a-head { text-align:center; margin-bottom:30px; } .auth-page-card .a-head .eyebrow { justify-content:center; margin-bottom:12px; } .auth-page-card .a-head h1 { font-size: clamp(24px,3vw,32px); margin:0 0 8px; } .auth-page-card .a-head p { color:var(--ink-soft); font-size:15px; } /* benefits row under the page hero */ .auth-benefits { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin-top:22px; } .auth-benefit { display:flex; align-items:center; gap:9px; color:var(--on-navy); font-size:14.5px; } .auth-benefit svg { width:18px; height:18px; color:#36d399; flex-shrink:0; } @media (max-width:600px){ .auth-page-card { padding: 30px 22px; } .auth-benefits { gap:14px; } } /* ============================================================ AUTH internal — two-column (visual beside form) ============================================================ */ .auth-page-card.with-visual { max-width: 1040px; padding: 0; overflow: hidden; } .auth-split { display: grid; grid-template-columns: .85fr 1fr; } .auth-split .as-visual { position: relative; background: var(--navy-900); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 36px; } .auth-split .as-visual .as-bg { position:absolute; inset:0; z-index:0; } .auth-split .as-visual .as-bg img { width:100%; height:100%; object-fit:cover; opacity:.5; } .auth-split .as-visual::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(160deg, rgba(2,26,62,.72), rgba(6,22,43,.94)); } .auth-split .as-visual > * { position:relative; z-index:2; } .as-visual .as-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:12px; font-weight:600; color:var(--on-navy); } .as-visual .as-badge .dot { width:6px;height:6px;border-radius:50%;background:#36d399;box-shadow:0 0 0 4px rgba(54,211,153,.2); } .as-visual h3 { color:#fff; font-size:24px; line-height:1.3; margin-bottom:12px; } .as-visual p { color:rgba(234,240,248,.82); font-size:14.5px; line-height:1.7; } .as-points { margin-top:22px; display:flex; flex-direction:column; gap:13px; } .as-point { display:flex; align-items:center; gap:11px; color:var(--on-navy); font-size:14px; } .as-point .ap-ic { width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0; } .as-point .ap-ic svg { width:15px;height:15px;color:#fff; } .auth-split .as-form { padding: 44px 48px; } @media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-split .as-visual { display:none; } /* hide visual on mobile, keep form clean */ .auth-split .as-form { padding: 32px 24px; } .auth-page-card.with-visual { max-width: 560px; } }