/* ============================================================ ProgixSoft — Premium Design System v2 Colors extracted from progixsoft-logo.png Navy gradient base + gold accents + blue secondary ============================================================ */ /* ── Local fonts (self-hosted Tajawal — CSP-safe, no external dependency) ── */ @font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tajawal-400-ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tajawal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/tajawal-500-ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/tajawal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/tajawal-700-ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/tajawal-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/tajawal-800-ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/tajawal-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root { /* Brand — extracted from logo */ --navy-deep: #020B25;--navy-base: #001238;--navy-mid: #001133; --navy-light: #071536; --navy-surface: #0D1933; --navy-border: #1E4E8F; --gold-400: #E8CE6E; --gold-300: #f5de9e; --gold-200: #fee9a8; --blue-accent: #0566DB; --blue-light: #9CC3E4; --blue-glow: #0566DB; /* Functional */ --white: #ffffff; --silver: #c8cdd4; --silver-muted: #8a94a6; --gray-500: #94A3B8; --gray-700: #0B1220; --bg-primary: var(--navy-deep); --bg-secondary: var(--navy-base); --bg-card: rgba(0, 17, 51, 0.6); --bg-card-hover: rgba(7, 21, 54, 0.8); --bg-input: rgba(0, 18, 56, 0.8); --text-primary: #FFFFFF; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --border-color: rgba(30, 78, 143, 0.4); --border-accent: rgba(5, 102, 219, 0.5); --accent: var(--gold-400); --accent-glow: rgba(232, 206, 110, 0.12); --accent-hover: var(--gold-300); --link-color: var(--blue-light); /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Typography */ --font-main: 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif; --font-head: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; /* Layout */ --header-h: 56px; --container-max: 1200px; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; /* ── Type Scale ── */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem; /* ── Motion ── */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 400ms; /* ── CTA Token (single source of truth for gold button) ── */ --cta-bg: linear-gradient(135deg, #F5DE9E 0%, #E8CE6E 45%, #D4AF37 100%); --cta-text: #0B1220; --cta-hover-shadow: 0 8px 32px rgba(232, 206, 110, 0.3); --transition-fast: 150ms ease; --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1); } [data-reduced-motion="true"] { --transition-fast: 0ms; --transition: 0ms; --transition-slow: 0ms; } /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } [dir="rtl"] body { direction: rtl; } a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent); } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; border: none; background: none; } h1, h2, h3, h4 { color: var(--white); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); } h3 { font-size: 1.2rem; } /* ---------- Container ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 22px; border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: all var(--transition); cursor: pointer; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%); background-size: 200% 200%; opacity: 0; transition: opacity var(--transition); } .btn:hover::after { opacity: 1; } .btn-primary { background: linear-gradient(135deg, #f0b830, var(--gold-400), #e8a820); color: var(--navy-deep); box-shadow: 0 0 20px rgba(232, 206, 110, 0.15); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 35px rgba(232, 206, 110, 0.25); } .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-accent); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--accent); } .btn-sm { padding: 6px 14px; font-size: 0.85rem; } .btn-lg { padding: 14px 30px; font-size: 1.05rem; border-radius: var(--radius-lg); } /* ---------- Animated Background ---------- */ .animated-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .animated-bg .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.08; animation: orbFloat 20s ease-in-out infinite;; } @media (max-width: 768px) { .main-nav { display: none; } .main-nav.open { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; background: rgba(2, 11, 37, 0.98); border-bottom: 1px solid var(--border-color); padding: var(--space-md); backdrop-filter: blur(20px); } .main-nav.open .menu-toggle { display: block; } .form-row { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .products-toolbar { flex-direction: column; } .hero-stats { flex-wrap: wrap; } } @media (max-width: 480px) { .container { padding: 0 var(--space-md); } .hero { min-height: auto; padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-xl); } .hero-stats { gap: var(--space-lg); } .hero-stat .stat-number { font-size: 1.3rem; } .hero-device-stack { width: 220px; height: 280px; } .device-icon-badge { width: 70px; height: 70px; font-size: 1.5rem; } } /* ============================================================ ProgixSoft — Silicon Valley Creative Layer Particle network, glass morphism, 3D cards, animations ============================================================ */ /* ---- Particle Canvas ---- */ #particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.35} /* ---- Glow Cursor ---- */ .glow-cursor{position:fixed;pointer-events:none;z-index:9999;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(232,206,110,.08) 0%,transparent 70%);transform:translate(-50%,-50%);transition:opacity .3s;display:none}@media(hover:hover){.glow-cursor{display:block}} .hero-sv{position:relative;min-height:clamp(60vh, 70vh, 80vh);display:flex;align-items:center;overflow:hidden;z-index:1} .hero-sv .hero-content{display:flex;flex-direction:column;position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center;align-items:center} .hero-sv .hero-title{width:100%} .hero-sv .hero-badge{margin-inline:auto} .hero-static-gold{text-align:center} .hero-sv .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,206,110,.12);border:1px solid rgba(232,206,110,.2);border-radius:50px;padding:6px 20px;font-size:.85rem;color: var(--silver-muted, #8a94a6);margin-bottom:24px;animation:fadeInUp .5s var(--ease-out);align-self:flex-start} .hero-sv .hero-title{font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:800;line-height:1.4;margin-bottom:20px;color: var(--white);animation:fadeInUp .8s .1s ease both} .hero-sv .hero-subtitle{font-size:clamp(1.05rem,2vw,1.25rem);color:rgba(255,255,255,.55);line-height:1.8;margin:0 0 32px 0;animation:fadeInUp .8s .2s ease both;max-width:600px} .hero-sv .hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;animation:fadeInUp .8s .3s ease both} /* ---- Buttons ---- */ .btn-glowing:active::after{width:400px;height:400px} /* ---- Scroll Reveal ---- */ .scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.23,1,.32,1)} .scroll-reveal.revealed{opacity:1;transform:translateY(0)} /* ---- Keyframes ---- */ @keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(232,206,110,.3)}50%{box-shadow:0 0 40px rgba(232,206,110,.6)}} /* ---- Reduced Motion ---- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .scroll-reveal{opacity:1;transform:none} #particle-canvas{display:none} } /* ---- Accessibility ---- */ :focus-visible{outline:2px solid #E8CE6E;outline-offset:3px;border-radius:4px} /* ============================================================ Wave 2 — Product Galaxy ============================================================ */ .product-galaxy-hero{position:relative;min-height:80vh;display:flex;align-items:center;padding:80px 0 60px} /* Duplicate removed: .galaxy-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} */ @media(max-width:768px){.galaxy-grid{grid-template-columns:1fr;gap:40px}} .galaxy-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(232,206,110,.1);border:1px solid rgba(232,206,110,.2);border-radius:50px;padding:5px 16px;font-size:.8rem;color:var(--color-gold,#E8CE6E);margin-bottom:20px} .galaxy-desc{color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:28px;max-width:500px} .galaxy-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;align-items:center} /* Duplicate removed: .galaxy-meta{display:flex;gap:16px;flex-wrap:wrap} */ .meta-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:6px 16px;font-size:.85rem;color:rgba(255,255,255,.6)} .chip-dot{width:8px;height:8px;border-radius:50%;background: var(--accent)} .chip-dot-green{background:#22c55e} /* 3D Device */ /* Duplicate removed: .galaxy-visual{display:flex;justify-content:center;align-items:center} */ .device-3d{position:relative;width:280px;height:400px;perspective:1200px;transform-style:preserve-3d;transition:transform .3s ease} .device-screen{position:absolute;inset:20px;background:linear-gradient(145deg,#0d1f3c,#07142a);border-radius:24px;border:2px solid rgba(232,206,110,.15);box-shadow:0 0 60px rgba(232,206,110,.08),inset 0 0 40px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;overflow:hidden} .device-glow{position:absolute;inset:-10px;border-radius:34px;background:radial-gradient(ellipse at center,rgba(232,206,110,.15),transparent 70%);animation:pulse-glow 3s infinite;pointer-events:none} .screen-content{text-align:center;position:relative;z-index:1} .screen-icon{color:rgba(232,206,110,.5);margin-bottom:16px;animation:float 3s ease-in-out infinite} .screen-name{color:rgba(255,255,255,.8);font-weight:700;font-size:1.1rem} .screen-shine{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);animation:shine 3s infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes shine{0%{left:-100%}50%,100%{left:200%}} /* Feature Timeline */ .feature-timeline{position:relative;max-width:700px;margin:40px auto 0} .timeline-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(232,206,110,.2),rgba(232,206,110,.2),transparent);transform:translateX(-50%)} .timeline-item{position:relative;display:flex;align-items:flex-start;margin-bottom:40px} .timeline-item:nth-child(odd){flex-direction:row-reverse} .timeline-dot{position:relative;z-index:1;width:48px;height:48px;min-width:48px;border-radius:50%;background:rgba(232,206,110,.1);border:2px solid rgba(232,206,110,.3);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 24px} .timeline-card{flex:1;max-width:360px;padding:24px} .timeline-card h3{color: var(--white);font-size:1.05rem;margin-bottom:8px} .timeline-card p{color:rgba(255,255,255,.5);font-size:.9rem;line-height:1.6;margin:0} [dir=rtl] .timeline-item:nth-child(odd){flex-direction:row} [dir=rtl] .timeline-item:nth-child(even){flex-direction:row-reverse} @media(max-width:640px){ .timeline-line{left:24px} .timeline-item,.timeline-item:nth-child(odd),.timeline-item:nth-child(even), [dir=rtl] .timeline-item:nth-child(odd),[dir=rtl] .timeline-item:nth-child(even){flex-direction:row} .timeline-dot{margin:0 16px 0 0} } /* Release Timeline */ .release-timeline{position:relative;max-width:700px;margin:40px auto 0} .rtl-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(59,130,246,.2),transparent);transform:translateX(-50%)} .rtl-item{position:relative;display:flex;align-items:flex-start;margin-bottom:32px} .rtl-item:nth-child(odd){flex-direction:row-reverse} .rtl-dot{position:relative;z-index:1;width:32px;height:32px;min-width:32px;border-radius:50%;background:rgba(59,130,246,.15);border:2px solid rgba(59,130,246,.3);margin:0 24px;display:flex;align-items:center;justify-content:center;font-size:.7rem} .rtl-dot-mandatory{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)} .rtl-card{flex:1;max-width:400px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px} .rtl-header{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap} .rtl-version{font-weight:700;color: var(--white);font-size:1rem} .rtl-channel{font-size:.75rem;background:rgba(59,130,246,.15);color:#93c5fd;padding:2px 10px;border-radius:50px} .rtl-badge{font-size:.75rem;background:rgba(239,68,68,.15);color:#fca5a5;padding:2px 10px;border-radius:50px} .rtl-date{font-size:.8rem;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px} .rtl-notes{color:rgba(255,255,255,.55);font-size:.85rem;line-height:1.6} [dir=rtl] .rtl-item:nth-child(odd){flex-direction:row} [dir=rtl] .rtl-item:nth-child(even){flex-direction:row-reverse} @media(max-width:640px){ .rtl-line{left:16px} .rtl-item,.rtl-item:nth-child(odd),.rtl-item:nth-child(even), [dir=rtl] .rtl-item:nth-child(odd),[dir=rtl] .rtl-item:nth-child(even){flex-direction:row} .rtl-dot{margin:0 12px 0 0} } /* Download CTA Section */ .section-download-cta{padding:80px 0;background:linear-gradient(180deg,transparent,rgba(232,206,110,.03),transparent);text-align:center} /* Download Pulse Animation */ .download-pulse{animation:pulse-ring 2s infinite} @keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(232,206,110,.4)}70%{box-shadow:0 0 0 20px rgba(232,206,110,0)}100%{box-shadow:0 0 0 0 rgba(232,206,110,0)}} /* Section Badge */ .section-badge{display:inline-block;background:rgba(232,206,110,.1);border:1px solid rgba(232,206,110,.15);border-radius:50px;padding:4px 16px;font-size:.8rem;color:var(--color-gold,#E8CE6E);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px} /* ============================================================ Wave 3 — News Experience ============================================================ */ /* Breaking News Banner */ .breaking-news{background:linear-gradient(90deg,rgba(239,68,68,.15),rgba(239,68,68,.05));border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:12px 20px;display:flex;align-items:center;gap:12px;overflow:hidden;margin-bottom:32px} .breaking-label{background:#ef4444;color: var(--white);padding:4px 14px;border-radius:50px;font-weight:700;font-size:.75rem;white-space:nowrap;animation:pulse-ring 2s infinite} .breaking-text{color:rgba(255,255,255,.85);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* News Grid — RTL-safe vertical list (CSS columns broke RTL reading order) */ .news-masonry{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:768px){.news-masonry{grid-template-columns:1fr 1fr}} /* News Card Premium */ .news-card-premium{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,rgba(2,11,37,.95),rgba(11,32,64,.9));border:1px solid rgba(255,255,255,.06);transition:transform .3s ease,box-shadow .3s ease} .news-card-premium:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(0,0,0,.5)} .news-card-premium .news-card-body{padding:24px} .news-card-premium .news-tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;padding:3px 12px;border-radius:50px;margin-bottom:12px} .news-card-premium .news-tag.release{background:rgba(34,197,94,.15);color:#4ade80} .news-card-premium .news-tag.update{background:rgba(59,130,246,.15);color:#93c5fd} .news-card-premium .news-tag.announcement{background:rgba(232,206,110,.15);color: var(--accent)} .news-card-premium .news-tag.security{background:rgba(239,68,68,.15);color:#fca5a5} .news-card-premium h3{color: var(--white);font-size:1.05rem;line-height:1.4;margin-bottom:8px} .news-card-premium p{color:rgba(255,255,255,.5);font-size:.85rem;line-height:1.6;margin-bottom:12px} .news-card-premium .news-date{font-size:.75rem;color:rgba(255,255,255,.3)} /* Tag Filter Pills */ .tag-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px} .tag-filter{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:8px 20px;font-size:.85rem;color:rgba(255,255,255,.6);cursor:pointer;transition:all .25s} .tag-filter:hover,.tag-filter.active{background:rgba(232,206,110,.1);border-color:rgba(232,206,110,.3);color: var(--accent)} /* ============================================================ Wave 4 — Admin Command Center ============================================================ */ /* Admin Dashboard Cards */ .admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px} .admin-stat-card{background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s} .admin-stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px -8px rgba(0,0,0,.4)} .admin-stat-card .stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px} .admin-stat-card .stat-value{font-size:2rem;font-weight:800;color: var(--white);margin-bottom:4px} .admin-stat-card .stat-label{color:rgba(255,255,255,0.5);font-size:.85rem} .admin-stat-card .stat-trend{font-size:.75rem;margin-top:8px;display:flex;align-items:center;gap:4px} .admin-stat-card .stat-trend.up{color:#4ade80}.admin-stat-card .stat-trend.down{color:#f87171} .admin-stat-card::after{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.02);pointer-events:none} /* Quick Actions */ .quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:32px} .quick-action{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px 16px;text-align:center;color:rgba(255,255,255,.7);text-decoration:none;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.85rem} .quick-action:hover{background:rgba(232,206,110,.08);border-color:rgba(232,206,110,.2);color: var(--accent);transform:translateY(-2px)} .quick-action svg{width:28px;height:28px;opacity:.7} /* Activity Feed */ .activity-feed{list-style:none;padding:0;margin:0} .activity-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04)} .activity-item:last-child{border-bottom:none} .activity-dot{width:10px;height:10px;min-width:10px;border-radius:50%;margin-top:5px} .activity-dot.product{background:#3b82f6}.activity-dot.news{background: var(--accent)} .activity-dot.release{background:#22c55e}.activity-dot.system{background:#8b5cf6} .activity-info{flex:1} .activity-info p{color:rgba(255,255,255,.7);font-size:.85rem;margin:0 0 2px} .activity-info time{color:rgba(255,255,255,.25);font-size:.7rem} /* Fix text-center utility (already in base CSS) */ .text-muted{color:rgba(255,255,255,0.5)} /* ============================================================ Auth & Utility (no conflicts with base CSS) ============================================================ */ /* Auth page (unique — not in base CSS) */ .auth-page{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:40px 20px} .auth-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:40px;width:100%;max-width:420px} .auth-card h1{color: var(--white);font-size:1.5rem;margin-bottom:8px;text-align:center} .auth-card .auth-subtitle{color:rgba(255,255,255,0.5);font-size:.9rem;text-align:center;margin-bottom:32px} .auth-card .form-group{margin-bottom:20px} .auth-card label{display:block;color:rgba(255,255,255,.7);margin-bottom:6px;font-size:.85rem} .auth-card input[type="text"],.auth-card input[type="email"],.auth-card input[type="password"]{width:100%;padding:12px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;color: var(--white);font-size:1rem;transition:border-color .25s;box-sizing:border-box} .auth-card input:focus{outline:none;border-color: var(--accent)} .auth-card .btn{width:100%;padding:14px;font-size:1rem} .auth-card .auth-links{text-align:center;margin-top:20px} .auth-card .auth-links a{color:rgba(255,255,255,0.5);font-size:.85rem;text-decoration:none} .auth-card .auth-links a:hover{color: var(--accent)} .auth-card .auth-logo{text-align:center;margin-bottom:24px} .auth-card .auth-logo img{display:inline-block} .auth-card .otp-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--white);font-size:1.5rem;letter-spacing:.35em;text-align:center;box-sizing:border-box;transition:border-color .25s} .auth-card .otp-input:focus{outline:none;border-color:var(--accent)} /* ============================================================ Waves 5-10 — Micro-Interactions, Mobile, Visual, Performance, Accessibility, Polish ============================================================ */ /* ==== Wave 5: Micro-Interactions ==== */ /* Button Ripple */ .btn-ripple{position:relative;overflow:hidden} .btn-ripple .ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,0.5);transform:scale(0);animation:ripple-anim .6s ease-out;pointer-events:none} @keyframes ripple-anim{to{transform:scale(4);opacity:0}} /* Card Hover Lift */ .card-lift{transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease} .card-lift:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(0,0,0,.5)} /* Loading Skeleton Pulse */ .skeleton-pulse{animation:skeleton-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.04) 80%);background-size:200% 100%} @keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Toast Refined */ .toast-container{position:fixed;bottom:24px;inset-inline-end:24px;z-index:9998;display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{pointer-events:auto;padding:14px 20px;border-radius:12px;color: var(--white);font-size:.88rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:toast-in .35s cubic-bezier(.23,1,.32,1);max-width:380px;box-shadow:0 8px 32px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);cursor:pointer} .toast.success{background:rgba(22,163,74,.9)}.toast.error{background:rgba(220,38,38,.9)} .toast.info{background:rgba(5,102,219,.9)}.toast.warning{background:rgba(217,119,6,.9)} @keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} .toast.out{animation:toast-out .25s ease forwards} @keyframes toast-out{to{opacity:0;transform:translateY(-4px) scale(.95)}} /* Form Field Shake on Error */ @keyframes field-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} .field-error{animation:field-shake .5s ease;border-color:#ef4444!important} /* ==== Wave 6: Mobile Excellence ==== */ /* Touch-friendly tap targets */ @media(max-width:768px){ .nav-link,.btn,a[role="button"]{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center} input,select,textarea{font-size:16px!important} /* prevent iOS zoom */ } /* Bottom Sheet */ .bottom-sheet{position:fixed;bottom:0;inset-inline:0;z-index:9990;background:rgba(2,11,37,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px 20px 0 0;padding:24px 20px 40px;transform:translateY(100%);transition:transform .35s cubic-bezier(.23,1,.32,1);max-height:80vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.5)} .bottom-sheet.open{transform:translateY(0)} .bottom-sheet-overlay{position:fixed;inset:0;z-index:9989;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s} .bottom-sheet-overlay.open{opacity:1;pointer-events:auto} /* Safe area for notched phones */ @supports(padding-bottom:env(safe-area-inset-bottom)){ .floating-cta,.bottom-sheet,.toast-container{padding-bottom:calc(24px + env(safe-area-inset-bottom))} .site-footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))} } /* ==== Wave 7: Visual Storytelling ==== */ /* Parallax Layer */ .parallax-layer{will-change:transform;transition:transform .1s linear} /* Visual hierarchy policy (step 6): gold FILL = primary CTA only. Accents (icons, dots, small text) may use gold; large gold surfaces must be CTAs. */ /* Animated SVG Icon */ .icon-anim{transition:transform .3s cubic-bezier(.23,1,.32,1)} .icon-anim:hover{transform:scale(1.15) rotate(5deg)} .icon-spin{animation:icon-spin 2s linear infinite}@keyframes icon-spin{to{transform:rotate(360deg)}} /* Image Reveal on Scroll */ .img-reveal{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.23,1,.32,1)} .img-reveal.revealed{clip-path:inset(0 0 0 0)} /* Section Wave Divider (pure CSS) */ .wave-divider{position:relative;height:80px;overflow:hidden} .wave-divider::after{content:'';position:absolute;bottom:0;left:-5%;width:110%;height:40px;background:radial-gradient(ellipse at 50% 0%,rgba(232,206,110,.08) 0%,transparent 70%)} /* ==== Wave 8: Performance ==== */ /* Lazy image blur-up */ img[loading="lazy"]{transition:opacity .4s ease,filter .4s ease} img.lazy-loading{filter:blur(10px);opacity:.3} img.lazy-loaded{filter:blur(0);opacity:1} /* Content-visibility for off-screen sections */ @media(min-width:769px){ .section:not(.hero-sv):not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 500px} } /* Font optimization */ @font-face{font-family:'ProgixSoft-system';src:local('Segoe UI'),local('Tahoma');font-display:swap} /* ==== Wave 9: Accessibility ==== */ /* Skip to content */ .skip-to-content{position:fixed;top:-100px;inset-inline-start:16px;z-index:10001;background: var(--accent);color:#020B25;padding:12px 24px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .3s} .skip-to-content:focus{top:16px} /* High contrast focus */ :focus-visible{outline:3px solid #E8CE6E;outline-offset:3px;border-radius:4px} /* Screen reader only */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Print styles */ @media print{ body,.section{background:#fff!important;color:#000!important;padding:20px!important} a{color:#000!important;text-decoration:underline!important} } /* Reduced data usage */ @media(prefers-reduced-data:reduce){ #particle-canvas{display:none} img[loading="lazy"]{display:none} } /* ==== RTL Logical Property Fixes ==== */ /* Replaces physical left/right with logical properties for perfect RTL */ .site-header{display:block} .header-inner{display:flex;width:100%;align-items:center;justify-content:space-between;height:100%;padding:0 var(--space-lg);gap:16px} .text-start{text-align:start}.text-end{text-align:end} .ml-auto{margin-inline-start:auto}.mr-auto{margin-inline-end:auto} .inset-x-0{inset-inline:0} @media(max-width:768px){ .mb-mobile{margin-bottom:24px} .hide-mobile{display:none!important} } /* Hero text fix - prevent overlap */ .hero-static{display:block;color: var(--white);line-height:1.3} .hero-static-gold{display:block;margin-top:4px;line-height:1.3;font-size:.9em;background:linear-gradient(135deg,#E8CE6E,#D4AF37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* === Critical Layout Fixes === */ /* Prevent hero orb overlap */ .animated-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} /* Ensure proper stacking */ .site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(2,11,37,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)} .main-content{position:relative;z-index:1;background:transparent} /* Fix product card overflow */ .product-card-compact{overflow:hidden;word-break:break-word} .product-card-body{overflow:hidden} /* Fix nav menu mobile overflow — dropdown panel below header (logo stays visible) */ @media(max-width:768px){ .main-nav.nav-open{position:fixed;top:var(--header-h);inset-inline:0;width:100%;height:auto;max-height:calc(100vh - var(--header-h));overflow-y:auto;background:rgba(2,11,37,.98);backdrop-filter:blur(20px);z-index:999;display:flex;flex-direction:column;padding:16px 24px 28px;border-bottom:1px solid rgba(255,255,255,.08)} .main-nav.nav-open .nav-list{width:100%;gap:0} .main-nav.nav-open .nav-link{font-size:1rem;padding:12px 0;color:rgba(255,255,255,.85);text-decoration:none;font-weight:500;transition:color .2s;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.05)} .main-nav.nav-open .nav-link:last-of-type{border-bottom:none} body.menu-open{overflow:hidden} } /* Fix footer link wrapping */ .footer-links ul,.footer-legal ul,.footer-contact ul{list-style:none;padding:0;margin:0} .footer-links li,.footer-legal li,.footer-contact li{margin-bottom:6px;word-break:break-word} /* Fix empty states */ .empty-state{padding:60px 0;text-align:center;color:rgba(255,255,255,0.5)} /* Fix prose content overflow */ .prose{word-wrap:break-word;overflow-wrap:break-word;line-height:1.8} .prose img{max-width:100%;height:auto} /* Fix auth card on mobile */ @media(max-width:480px){ .auth-card{padding:28px 20px;margin:0 12px} } /* ============================================================ SILICON VALLEY PREMIUM LAYER — Dramatic Visual Upgrade ============================================================ */ /* Hero enhancement */ .hero-sv{background:radial-gradient(ellipse at 50% 0%,rgba(232,206,110,.04) 0%,transparent 60%)} .hero-sv::before{content:'';position:absolute;top:20%;left:10%;width:40%;height:60%;background:radial-gradient(ellipse,rgba(5,102,219,.08) 0%,transparent 70%);pointer-events:none} .hero-sv .hero-content{gap:8px} .hero-sv .hero-badge{animation:fadeInUp .6s ease;box-shadow:0 0 30px rgba(232,206,110,.1)} .hero-sv .hero-title{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-0.02em} .hero-static{background:linear-gradient(180deg,#fff 0%,#c8cdd4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-static-gold{font-size:clamp(1.4rem,3vw,2rem);margin-top:12px;letter-spacing:-0.01em} /* Premium gold button */ .btn-gold{background:var(--cta-bg);color:var(--cta-text);font-weight:700;border:none;padding:16px 36px;border-radius:14px;font-size:1.05rem;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(232,206,110,.25);letter-spacing:0.01em} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(232,206,110,.4)} .btn-gold:active{transform:translateY(-1px)} .btn-ghost-sv{background:rgba(255,255,255,.03);color: var(--white);border:1px solid rgba(255,255,255,.12);padding:15px 32px;border-radius:14px;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .btn-ghost-sv:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)} /* Stats row premium */ .stats-row{margin:40px 0;padding:24px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:center;flex-wrap:wrap} .stat-item{position:relative;text-align:center;min-width:110px} .stat-item::after{content:'';position:absolute;inset-inline-end:-12px;top:20%;height:60%;width:1px;background:rgba(255,255,255,.06)} .stat-item:last-child::after{display:none} .stat-number{font-size:clamp(2.2rem,4vw,3.5rem)} .stat-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-top:6px} /* Product card premium */ .product-card-3d{background:linear-gradient(160deg,rgba(0,18,56,.95) 0%,rgba(2,11,37,.98) 100%);border:1px solid rgba(232,206,110,.08);border-radius:20px;padding:0;transition:all .4s cubic-bezier(.23,1,.32,1)} .product-card-3d:hover{transform:translateY(-4px);box-shadow:0 32px 64px -16px rgba(0,0,0,.6),0 0 0 1px rgba(232,206,110,.15);border-color:rgba(232,206,110,.2)} .product-card-3d .glow-line{height:2px;background:linear-gradient(90deg,transparent,rgba(232,206,110,.6),transparent)} .product-card-link{padding:24px} .product-card-icon{width:48px;height:48px;border-radius:12px;background:rgba(232,206,110,.06);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent);font-size:1.2rem;flex-shrink:0;overflow:hidden} .product-card-3d:hover .product-card-icon{width:48px;height:48px;border-radius:12px;background:rgba(232,206,110,.06);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent);font-size:1.2rem;flex-shrink:0;overflow:hidden} .product-card-name{font-size:1.2rem;font-weight:700;margin-bottom:6px;color: var(--white)} .product-card-tagline{font-size:.88rem;color:rgba(255,255,255,0.55);line-height:1.5;margin-bottom:20px} .product-card-meta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid rgba(255,255,255,.04)} .badge-free{background:rgba(34,197,94,.12);color:#4ade80;padding:4px 12px;border-radius:50px;font-size:.75rem;font-weight:600} .product-card-action{color: var(--silver, #c8cdd4);font-size:.85rem;font-weight:600;transition:transform .2s} .product-card-3d:hover .product-card-action{transform:translateX(4px)} [dir=rtl] .product-card-3d:hover .product-card-action{transform:translateX(-4px)} /* Section spacing */ .section{padding:100px 0} .section-alt{background:linear-gradient(180deg,transparent,rgba(232,206,110,.015),transparent)} .section-head{margin-bottom:48px} .section-head h2{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800;color: var(--white);letter-spacing:-0.01em} .section-link{color: var(--silver, #c8cdd4);font-weight:600;font-size:.9rem;transition:gap .3s;display:flex;align-items:center;gap:4px} .section-link:hover{gap:8px} /* Footer premium */ .site-footer{background:rgba(2,11,37,.6);border-top:1px solid rgba(255,255,255,.04);padding:60px 0 30px} .footer-logo{opacity:.9} .footer-tagline{color:rgba(255,255,255,0.5);font-size:.85rem;line-height:1.7;margin:16px 0} .footer-codext a{color: var(--accent);text-decoration:none} .footer-links h4,.footer-legal h4,.footer-contact h4{color:rgba(255,255,255,.6);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px} .footer-links a,.footer-legal a{color:rgba(255,255,255,0.5);text-decoration:none;font-size:.85rem;transition:color .2s} .footer-links a:hover,.footer-legal a:hover{color: var(--accent)} .footer-bottom{border-top:1px solid rgba(255,255,255,.04);margin-top:40px;padding-top:20px;color:rgba(255,255,255,.2);font-size:.75rem;text-align:center} /* Smooth product grid */ .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px} @media(max-width:640px){.product-grid{grid-template-columns:1fr;gap:20px}} /* Container */ /* ── Premium Typography ── */ body{font-family:'Tajawal','Inter',system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:'Tajawal','Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.25} h5,h6{font-family:'Tajawal','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-0.01em} code,pre,kbd,samp,.mono{font-family:'JetBrains Mono','Fira Code',monospace} p{color:rgba(255,255,255,.6);line-height:1.8} .hero-sv .hero-title{font-weight:900;letter-spacing:-0.03em} .hero-sv .hero-subtitle{font-weight:400;letter-spacing:0} .hero-static-gold{font-weight:800;letter-spacing:-0.02em} .stat-number{font-family:'Inter','Tajawal',system-ui,sans-serif;font-weight:800;letter-spacing:-0.03em} .stat-label{font-weight:500;letter-spacing:.06em} .btn-gold,.btn-ghost-sv{font-family:'Tajawal','Inter',system-ui,sans-serif;font-weight:700} .product-card-name{font-weight:700} .footer-links h4,.footer-legal h4,.footer-contact h4{font-weight:700} @media(max-width:640px){.hero-sv .hero-title{letter-spacing:-0.015em;line-height:1.3}} .container{max-width:1200px;margin:0 auto;padding:0 28px} @media(max-width:480px){.container{padding:0 16px}} /* ============================================================ */ /* 🌉 BRIDGE — Template Classes */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 0 — CSS Bridge for ACTUAL Template Classes Matches: galaxy-*, rtl-*, timeline-*, device-* Fixes all class name mismatches between Wave CSS & PHP templates ============================================================ */ /* ── Product Galaxy Hero ── */ .product-galaxy-hero{padding:100px 0 60px} /* Duplicate removed: .galaxy-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} */ @media(max-width:768px){.galaxy-grid{grid-template-columns:1fr;gap:36px}} .galaxy-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(232,206,110,.1);border:1px solid rgba(232,206,110,.28);border-radius:50px;padding:9px 18px;font-size:.92rem;color:#E8CE6E;margin-bottom:20px;box-shadow:0 0 24px rgba(232,206,110,.12),inset 0 0 12px rgba(232,206,110,.05);text-shadow:0 1px 0 rgba(0,0,0,.25)} .galaxy-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-0.02em;color: var(--white);margin-bottom:12px;line-height:1.2} .galaxy-tagline{font-size:1.1rem;color:rgba(255,255,255,.68);margin-bottom:8px;line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.35)} .galaxy-desc{font-size:1rem;color:rgba(255,255,255,0.55);line-height:1.8;margin-bottom:28px} .galaxy-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px} /* Duplicate removed: .galaxy-meta{display:flex;gap:16px;flex-wrap:wrap} */ .meta-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:50px;padding:8px 18px;font-size:.85rem;color:rgba(255,255,255,.5)} .chip-dot{width:8px;height:8px;border-radius:50%;background: var(--accent);box-shadow:0 0 8px rgba(232,206,110,.4)} .chip-dot-green{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.4)} /* ── 3D Device Mockup ── */ /* Duplicate removed: .galaxy-visual{display:flex;justify-content:center;align-items:center} */ .device-3d{width:280px;height:380px;perspective:800px;position:relative} .device-screen{width:100%;height:100%;background:linear-gradient(160deg,rgba(0,17,51,.9),rgba(2,11,37,.95));border:1px solid rgba(232,206,110,.1);border-radius:28px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transform:rotateY(-8deg) rotateX(4deg);transition:transform .4s cubic-bezier(.23,1,.32,1);box-shadow:0 0 0 1px rgba(232,206,110,.05),0 30px 80px rgba(0,0,0,.5)} .device-3d:hover .device-screen{transform:rotateY(0) rotateX(0)} .screen-content{text-align:center;z-index:1} .screen-icon{color:rgba(232,206,110,.15);margin-bottom:16px} .screen-name{font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.7)} .screen-shine{position:absolute;top:-40%;left:-40%;width:80%;height:100%;background:radial-gradient(ellipse,rgba(232,206,110,.06),transparent 70%);pointer-events:none;transform:rotate(-20deg)} .device-glow{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:180px;height:6px;background:radial-gradient(ellipse,rgba(232,206,110,.25),transparent 70%);border-radius:50%;filter:blur(4px)} @media(max-width:768px){.galaxy-visual{display:none}} /* ── Feature Timeline ── */ .feature-timeline{position:relative;padding:20px 0} .timeline-line{position:absolute;inset-inline-start:28px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,rgba(232,206,110,.15),transparent)} .timeline-item{position:relative;padding-inline-start:72px;padding-bottom:48px;display:flex;flex-direction:column} .timeline-item:last-child{padding-bottom:0} .timeline-dot{position:absolute;inset-inline-start:14px;top:4px;width:30px;height:30px;border-radius:50%;background: var(--cta-bg);display:flex;align-items:center;justify-content:center;font-size:.9rem;z-index:1;box-shadow:0 0 20px rgba(232,206,110,.3)} .timeline-card{ background:linear-gradient(160deg,rgba(25,53,94,.25),rgba(0,18,56,.7)); border:1px solid rgba(255,255,255,.04); border-radius:16px;padding:24px 28px; transition:all .3s cubic-bezier(.23,1,.32,1); } .timeline-card:hover{transform:translateY(-3px);border-color:rgba(232,206,110,.08);box-shadow:0 16px 40px rgba(0,0,0,.3)} .timeline-card h3{font-size:1.1rem;font-weight:700;color: var(--white);margin-bottom:8px} .timeline-card p{font-size:.9rem;color:rgba(255,255,255,0.5);line-height:1.7;margin:0} .glass-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* Scroll reveal variants */ .reveal-left{transform:translateX(-30px)}.reveal-right{transform:translateX(30px)} .reveal-scale{transform:scale(.95)} .scroll-revealed.reveal-left,.scroll-revealed.reveal-right{transform:translateX(0)} .scroll-revealed.reveal-scale{transform:scale(1)} /* ── Release Timeline (rtl classes) ── */ .rtl-line{position:absolute;inset-inline-start:28px;top:8px;bottom:8px;width:1px;background:rgba(232,206,110,.1)} .rtl-item{position:relative;padding-inline-start:72px;padding-bottom:36px} .rtl-item:last-child{padding-bottom:0} .rtl-dot{position:absolute;inset-inline-start:18px;top:8px;width:22px;height:22px;border-radius:50%;background: var(--accent);border:3px solid var(--navy-base);display:flex;align-items:center;justify-content:center;font-size:.6rem;z-index:1;box-shadow:0 0 16px rgba(232,206,110,.2)} .rtl-dot-mandatory{background:#ef4444;box-shadow:0 0 16px rgba(239,68,68,.3)} .rtl-card{ background:linear-gradient(160deg,rgba(25,53,94,.2),rgba(0,18,56,.6)); border:1px solid rgba(255,255,255,.03); border-radius:14px;padding:20px 24px; transition:all .3s; } .rtl-card:hover{border-color:rgba(232,206,110,.06);box-shadow:0 8px 32px rgba(0,0,0,.25)} .rtl-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px} .rtl-version{font-size:1.1rem;font-weight:700;color: var(--accent)} .rtl-channel{font-size:.72rem;padding:2px 10px;border-radius:50px;background:rgba(34,197,94,.08);color:#4ade80;font-weight:600} .rtl-badge{font-size:.72rem;padding:2px 10px;border-radius:50px;background:rgba(239,68,68,.08);color:#ef4444;font-weight:600} .rtl-date{font-size:.8rem;color:rgba(255,255,255,.2);margin-bottom:10px;display:block} .rtl-notes{font-size:.88rem;color:rgba(255,255,255,0.5);line-height:1.7} /* ── Download CTA ── */ .section-download-cta{ background:linear-gradient(180deg,transparent, rgba(232,206,110,.02), transparent); border-top:1px solid rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.03); padding:80px 0; } .text-center{text-align:center} /* ── Section Badge ── */ .section-badge{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(232,206,110,.6);margin-bottom:12px;font-weight:600} /* ── Description Content ── */ .content-area h2{font-size:1.6rem;font-weight:800;color: var(--white);margin-bottom:20px} .prose{color:rgba(255,255,255,0.55);line-height:1.9;font-size:.95rem;max-width:800px} .prose p{margin-bottom:16px} /* ── Product Cards (home page) ── */ /* Ensure the template's product-card component works with our styles */ .product-card-3d{ background:linear-gradient(160deg,rgba(25,53,94,.25),rgba(0,18,56,.8)); border:1px solid rgba(232,206,110,.06); border-radius:18px;overflow:hidden; transition:all .5s cubic-bezier(.23,1,.32,1); } .product-card-3d:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(232,206,110,.08); } .product-card-link{padding:24px;display:block;text-decoration:none;color:inherit} /* Responsive */ @media(max-width:768px){ .product-galaxy-hero{padding:80px 0 40px} .timeline-item{padding-inline-start:56px;padding-bottom:36px} .rtl-item{padding-inline-start:56px} .timeline-dot{inset-inline-start:8px;width:26px;height:26px} .rtl-dot{inset-inline-start:12px;width:20px;height:20px} } /* ============================================================ */ /* ✨ EFFECTS — Scroll/Ripple/Toast/Skeleton */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 1 — CSS Activation Layer Activates all existing JS features: scroll-reveal, ripple, toast, skeleton, parallax, card-tilt, particle canvas, lazy-load ============================================================ */ /* ── Scroll Reveal ── */ .scroll-reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1)} .scroll-revealed{opacity:1;transform:translateY(0)} .scroll-reveal[data-delay="100"]{transition-delay:.1s} .scroll-reveal[data-delay="200"]{transition-delay:.2s} .scroll-reveal[data-delay="300"]{transition-delay:.3s} .scroll-reveal[data-delay="400"]{transition-delay:.4s} .scroll-reveal[data-delay="500"]{transition-delay:.5s} .scroll-reveal[data-direction="left"]{transform:translateX(-40px)} .scroll-reveal[data-direction="right"]{transform:translateX(40px)} /* ── Button Ripple ── */ /* Duplicate removed: .btn-ripple{position:relative;overflow:hidden} */ .ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none} @keyframes rippleAnim{to{transform:scale(4);opacity:0}} /* ── Toast Notifications ── */ .toast-container{position:fixed;bottom:32px;inset-inline-end:32px;z-index:10000;display:flex;flex-direction:column;gap:12px;pointer-events:none} .toast{background:var(--navy-surface,#0D1933);border:1px solid rgba(232,206,110,.15);border-radius:14px;padding:14px 20px;min-width:280px;max-width:420px;color: var(--white);font-size:.9rem;box-shadow:0 16px 48px rgba(0,0,0,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto;transform:translateY(120%);opacity:0;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s} .toast-show{transform:translateY(0);opacity:1} .toast-fade{transform:translateY(120%);opacity:0} .toast-success{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.1)} .toast-error{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.1)} .toast-info{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.1)} .toast-icon{margin-inline-end:10px} .toast-close{position:absolute;top:10px;inset-inline-end:14px;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:1.1rem;padding:0} /* ── Skeleton Loading ── */ .skeleton{background:linear-gradient(90deg,var(--navy-surface,#0D1933) 25%,rgba(255,255,255,.03) 50%,var(--navy-surface,#0D1933) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;border-radius:8px} .skeleton-text{height:14px;margin-bottom:8px;border-radius:6px} .skeleton-text:last-child{width:60%} .skeleton-heading{height:24px;width:40%;margin-bottom:16px;border-radius:8px} .skeleton-card{height:180px;border-radius:14px} @keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ── Parallax ── */ .parallax-layer{will-change:transform} .parallax-slow{transform:translateY(calc(var(--scroll-y,0) * .05px))} .parallax-fast{transform:translateY(calc(var(--scroll-y,0) * .12px))} /* ── Card 3D Tilt ── */ .card-tilt-container{perspective:1000px} .card-tilt{transition:transform .1s ease-out;will-change:transform;transform-style:preserve-3d} .card-tilt:hover{transition:transform .15s ease-out} /* ── Particle Canvas Background ── */ .particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.6} /* ── Lazy Images ── */ img.lazy-img{opacity:0;transition:opacity .5s ease} img.lazy-loaded{opacity:1} /* ── Floating CTA (Mobile) ── */ .floating-cta{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);z-index:900;transition:transform .4s cubic-bezier(.23,1,.32,1);box-shadow:0 8px 32px rgba(232,206,110,.2)} .floating-cta-visible{transform:translateX(-50%) translateY(0)} /* ── Mobile Menu ── */ .mobile-menu{position:fixed;top:0;right:0;width:100%;height:100vh;background:rgba(2,11,37,.98);z-index:5000;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);transform:translateX(100%);transition:transform .4s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;padding:80px 32px 32px} [dir=rtl] .mobile-menu{right:auto;left:0;transform:translateX(-100%)} .mobile-menu-open{transform:translateX(0)} .mobile-menu a{color:rgba(255,255,255,.7);font-size:1.3rem;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);text-decoration:none;transition:color .2s} .mobile-menu a:hover{color: var(--accent)} .mobile-menu-close{position:absolute;top:24px;right:24px;background:none;border:none;color: var(--white);font-size:1.5rem;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)} [dir=rtl] .mobile-menu-close{right:auto;left:24px} /* ── Navbar scroll state ── */ .nav-scrolled{background:rgba(2,11,37,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 4px 30px rgba(0,0,0,.3)} /* ── Bottom Sheet (Mobile) ── */ .bottom-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:6000;opacity:0;pointer-events:none;transition:opacity .3s} .bottom-sheet-overlay.active{opacity:1;pointer-events:auto} .bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--navy-base,#001238);border-radius:24px 24px 0 0;z-index:6001;transform:translateY(100%);transition:transform .4s cubic-bezier(.23,1,.32,1);max-height:85vh;overflow-y:auto;padding:24px} .bottom-sheet-open{transform:translateY(0)} .bottom-sheet::before{content:'';display:block;width:40px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin:0 auto 20px} .sheet-close{position:absolute;top:20px;right:20px;background:none;border:none;color:rgba(255,255,255,.5);font-size:1.3rem;cursor:pointer} /* ── Skip to Content (Accessibility) ── */ .skip-to-content{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-120px);z-index:99999;background: var(--accent);color:#020B25;padding:12px 24px;border-radius:10px;font-weight:700;text-decoration:none;transition:transform .3s cubic-bezier(.23,1,.32,1);font-size:.9rem} .skip-to-content:focus{transform:translateX(-50%) translateY(0);outline:none;box-shadow:0 0 0 3px rgba(232,206,110,.4)} .skip-link-visible{transform:translateX(-50%) translateY(0)} /* ── Glowing Button Pulse ── */ @keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.8}} /* ── Gradient text animation ── */ @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .animate-gradient{background-size:200% 200%;animation:gradientShift 4s ease infinite} /* ── Pulse dot ── */ @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}} .pulse-dot{animation:pulseDot 2s ease-in-out infinite} /* ── Subtle float animation ── */ @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} .float-anim{animation:float 4s ease-in-out infinite} /* ── Shimmer line ── */ @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .shimmer-line{position:relative;overflow:hidden} .shimmer-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);animation:shimmer 2s infinite} /* ============================================================ */ /* 📐 LAYOUT — Sections, Cards, Grid */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 3 — Premium UX & Layout Enhancement Spacing, grid, cards, hero depth, sections ============================================================ */ /* ── Hero Depth ── */ .hero-sv{ background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(232,206,110,.06) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(5,102,219,.1) 0%, transparent 60%), radial-gradient(ellipse 50% 30% at 20% 70%, rgba(156,195,228,.05) 0%, transparent 50%); position:relative; z-index:1; } .hero-sv::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(232,206,110,.15), transparent); } /* ── Section Spacing ── */ .section{padding:120px 0} .section+.section{padding-top:0} /* ── Section Head ── */ .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px;gap:20px} .section-head h2{font-size:clamp(1.8rem,3.5vw,2.5rem);position:relative} .section-head h2::after{content:'';position:absolute;bottom:-12px;inset-inline-start:0;width:48px;height:3px;background: linear-gradient(90deg, var(--accent), transparent);border-radius:2px} /* ── Product Grid ── */ .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px} @media(max-width:768px){.product-grid{grid-template-columns:1fr;gap:20px}} /* ── Premium Product Card ── */ .product-card-3d{ background:linear-gradient(160deg, rgba(25,53,94,.3) 0%, rgba(0,18,56,.8) 100%); border:1px solid rgba(232,206,110,.06); border-radius:20px; overflow:hidden; transition:all .5s cubic-bezier(.23,1,.32,1); position:relative; } .product-card-3d::before{ content:''; position:absolute; inset:0; border-radius:20px; padding:1px; background:linear-gradient(135deg, transparent 30%, rgba(232,206,110,.1) 70%, transparent); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s; } .product-card-3d:hover::before{opacity:1} .product-card-link{padding:36px 28px;display:block;text-decoration:none} .product-card-name{font-size:1.15rem;font-weight:700;color: var(--white);margin-bottom:8px} .product-card-tagline{font-size:.88rem;color:rgba(255,255,255,0.5);line-height:1.6;margin-bottom:20px} .product-card-meta{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid rgba(255,255,255,.04)} .badge-free{background:rgba(34,197,94,.08);color:#4ade80;padding:4px 14px;border-radius:50px;font-size:.75rem;font-weight:600;letter-spacing:.02em} .product-card-action{color: var(--silver, #c8cdd4);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;transition:all .3s} .product-card-3d:hover .product-card-action{gap:10px} /* ── Releases Feed (home) ── */ .releases-feed{display:flex;flex-direction:column;gap:14px;margin-top:36px} .release-row{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"ver prod chan date" ". notes notes .";gap:6px 16px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 20px;transition:all .3s;text-decoration:none} .release-row:hover{transform:translateY(-2px);border-color:rgba(232,206,110,.45);background:rgba(232,206,110,.05)} .release-version{grid-area:ver;font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace);font-weight:700;font-size:.95rem;color:var(--gold,#E8CE6E);background:rgba(232,206,110,.1);border:1px solid rgba(232,206,110,.3);padding:4px 12px;border-radius:50px;white-space:nowrap} .release-product{grid-area:prod;font-weight:700;color:var(--white,#fff);font-size:.95rem} .release-channel{grid-area:chan;font-size:.72rem;color:var(--muted,#8b95a5);border:1px solid rgba(255,255,255,.12);padding:2px 10px;border-radius:50px;white-space:nowrap} .release-date{grid-area:date;font-size:.78rem;color:var(--muted,#8b95a5);white-space:nowrap} .release-notes{grid-area:notes;font-size:.85rem;color:var(--muted,#8b95a5);line-height:1.6;overflow:hidden} @media(max-width:640px){ .release-row{grid-template-columns:auto 1fr auto;grid-template-areas:"ver prod chan" ". notes notes" "date date date"} } /* ── Alerts (public site) ── */ .alert{padding:14px 18px;border-radius:12px;font-size:.9rem;line-height:1.6;margin:0 0 20px;border:1px solid} .alert-success{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.35);color:#4ade80} .alert-error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35);color:#f87171} /* ── Compact feedback form (product pages) ── */ .contact-form-sm{max-width:680px;margin:0 auto} .contact-form-sm .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.contact-form-sm .form-row{grid-template-columns:1fr}} /* ── Page Hero (shared — used by 8 subpages) ── */ .page-hero{position:relative;padding:96px 0 64px;text-align:center;overflow:hidden;background:radial-gradient(ellipse 90% 130% at 50% -30%,rgba(232,206,110,.09),transparent 62%),linear-gradient(180deg,rgba(2,11,37,.55),transparent 85%);border-bottom:1px solid rgba(255,255,255,.04)} .page-hero-sm{padding:72px 0 48px} .page-hero h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;color:var(--white,#fff);margin:0 0 14px;letter-spacing:-.01em;line-height:1.25} .page-hero p{font-size:clamp(.95rem,1.4vw,1.06rem);color:var(--muted,#8b95a5);max-width:640px;margin:0 auto;line-height:1.8} .page-hero::after{content:"";display:block;width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold-400,#E8CE6E),rgba(232,206,110,.15));margin:22px auto 0} @media(max-width:640px){.page-hero{padding:64px 0 44px}.page-hero-sm{padding:56px 0 36px}} /* ── Contact Page ── */ .contact-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start} .contact-form-wrapper{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:34px;backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.28)} .contact-sidebar{display:flex;flex-direction:column;gap:18px} .contact-form label{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.62);margin-bottom:8px} .contact-form .required{color:var(--gold-400,#E8CE6E)} /* Larger responsive fields — fill the form block (was flex:1 with no width → tiny inputs) */ .contact-form input,.contact-form select,.contact-form textarea{width:100%;box-sizing:border-box;padding:14px 18px;font-size:1rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--white,#fff)} .contact-form select{font-size:.95rem;padding:14px 16px} .contact-form textarea{min-height:150px;line-height:1.7;resize:vertical} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:rgba(232,206,110,.55);box-shadow:0 0 0 3px rgba(232,206,110,.14)} /* Send-via segmented control (email | whatsapp) */ .send-via{display:grid;grid-template-columns:1fr 1fr;gap:12px} .send-via-opt{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.7);font-weight:600;font-size:.92rem;cursor:pointer;transition:all .25s;user-select:none} .send-via-opt svg{width:20px;height:20px;flex:0 0 20px} .send-via-opt:hover{border-color:rgba(255,255,255,.28)} .send-via-opt.is-active[data-via="email"]{border-color:rgba(232,206,110,.6);background:rgba(232,206,110,.1);color:var(--gold-400,#E8CE6E)} .send-via-opt.is-active[data-via="whatsapp"]{border-color:rgba(37,211,102,.6);background:rgba(37,211,102,.1);color:#4ade80} .send-via-hint{display:block;font-size:.78rem;color:rgba(255,255,255,.42);margin-top:10px;min-height:1.2em;line-height:1.5} #contact-submit.btn-via-whatsapp{background:#25d366;color:#06281a} #contact-submit.btn-via-whatsapp:hover{box-shadow:0 10px 28px rgba(37,211,102,.35)} @media(max-width:520px){.send-via{grid-template-columns:1fr}} .contact-form .btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px} .contact-link[dir="ltr"]{unicode-bidi:embed;direction:ltr} .contact-info-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.5rem;backdrop-filter:blur(8px);overflow:hidden} .contact-info-card>h3{margin:0 0 6px;font-size:1.05rem} .contact-item{display:flex;align-items:center;gap:.8rem;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)} .contact-item:last-child{border-bottom:none;padding-bottom:0} .contact-icon{flex:0 0 40px;width:40px;height:40px;padding:11px;margin-top:0;background:rgba(232,206,110,.09);border:1px solid rgba(232,206,110,.22);border-radius:12px;color:var(--gold-400,#E8CE6E)} .contact-link:hover{color:var(--gold-400,#E8CE6E)} .contact-whatsapp .btn-whatsapp{width:100%;justify-content:center;padding:14px 18px;font-size:.98rem} .contact-note{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(232,206,110,.05);border:1px solid rgba(232,206,110,.18);border-radius:14px;color:rgba(255,255,255,.75);font-size:.85rem;line-height:1.6} .contact-note svg{flex:0 0 22px;color:var(--gold-400,#E8CE6E)} @media(max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-form-wrapper{padding:24px}} /* ── Help Center ── */ .help-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:8px} .help-product-card{display:flex;align-items:center;gap:16px;padding:22px 24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;text-decoration:none;transition:all .3s;color:inherit} .help-product-card:hover{transform:translateY(-3px);border-color:rgba(232,206,110,.45);background:rgba(232,206,110,.05);box-shadow:0 16px 40px rgba(0,0,0,.3)} .help-product-icon{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(232,206,110,.1);border:1px solid rgba(232,206,110,.25);color:var(--gold-400,#E8CE6E)} .help-product-info{display:flex;flex-direction:column;gap:4px;min-width:0} .help-product-info h3{margin:0;font-size:1.05rem;color:var(--white,#fff)} .help-article-count{font-size:.8rem;color:var(--muted,#8b95a5)} .help-search{max-width:560px;margin:0 auto 44px} .search-input-lg{width:100%;box-sizing:border-box;padding:15px 20px;font-size:1rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--white,#fff);transition:border-color .25s,box-shadow .25s} .search-input-lg:focus{outline:none;border-color:rgba(232,206,110,.55);box-shadow:0 0 0 3px rgba(232,206,110,.14)} .help-category{margin-bottom:38px} .help-category>h3{display:flex;align-items:center;gap:10px;font-size:1.1rem;margin:0 0 16px;color:var(--white,#fff)} .help-category>h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,206,110,.35),transparent)} .help-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .help-article-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;text-decoration:none;transition:all .25s;color:rgba(255,255,255,.85)} .help-article-link:hover{border-color:rgba(232,206,110,.4);background:rgba(232,206,110,.05);color:var(--gold-400,#E8CE6E);transform:translateX(-3px)} .help-article-link::after{content:"←";opacity:.5;transition:opacity .2s} .help-article-link:hover::after{opacity:1} .help-article-title{font-size:.92rem;font-weight:600} .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted,#8b95a5);text-decoration:none;font-size:.85rem;margin-bottom:14px;transition:color .2s} .back-link:hover{color:var(--gold-400,#E8CE6E)} .help-breadcrumb{color:var(--muted,#8b95a5);font-size:.85rem;margin-top:-6px} @media(max-width:640px){.help-articles-grid{grid-template-columns:1fr}.help-products-grid{grid-template-columns:1fr}} /* ── Codext Attribution Section ── */ .section-codext{ background:linear-gradient(180deg, transparent, rgba(232,206,110,.02), transparent); border-top:1px solid rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.03); } /* ── Responsive Adjustments ── */ @media(max-width:768px){ .section{padding:80px 0} .section-head{margin-bottom:40px} .section-head h2::after{bottom:-8px;width:32px;height:2px} .hero-sv{min-height:85vh} } /* ── Animations ── */ @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} /* ============================================================ */ /* 📦 PRODUCT — Features, Releases, Download */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 4 — Product Page Premium Feature grid, release timeline, download cards ============================================================ */ /* ── Product Hero ── */ .product-hero{padding:80px 0 60px} .product-hero .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media(max-width:768px){.product-hero .container{grid-template-columns:1fr;gap:36px}} .product-hero-icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,rgba(232,206,110,.15),rgba(232,206,110,.04));display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:20px} .product-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:900;letter-spacing:-0.02em;margin-bottom:12px} .product-hero .tagline{font-size:1.1rem;color:rgba(255,255,255,0.55);line-height:1.7;margin-bottom:28px} .product-hero .actions{display:flex;gap:14px;flex-wrap:wrap} .hero-visual{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 10px 14px;min-height:440px} .hero-core{position:relative;width:min(280px,72vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none} .hero-core .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(103,156,200,.22)} .hero-core .ring.r2{inset:13%;border-color:rgba(232,206,110,.2)} .hero-core .ring.r3{inset:26%;border-style:dashed;border-color:rgba(5,102,219,.3);animation:orbitSpin 40s linear infinite} .hero-core img{position:relative;z-index:2;width:62%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));animation:float 6s ease-in-out infinite} .hero-core .orb{position:absolute;width:14px;height:14px;border-radius:50%;background:#E8CE6E;box-shadow:0 0 18px rgba(232,206,110,.8);animation:orbitSpin 14s linear infinite} .hero-visual img{width:100%;border-radius:20px} .hero-visual::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse at 30% 20%,rgba(232,206,110,.1) 0%,transparent 60%);z-index:1;pointer-events:none} /* ── Feature Grid ── */ .features-section{padding:100px 0;background:rgba(232,206,110,.01)} .feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px} .feature-card{ background:linear-gradient(160deg,rgba(25,53,94,.2),rgba(0,18,56,.6)); border:1px solid rgba(255,255,255,.04); border-radius:16px;padding:28px; transition:all .3s cubic-bezier(.23,1,.32,1); } .feature-card:hover{ transform:translateY(-4px); border-color:rgba(232,206,110,.1); box-shadow:0 16px 48px rgba(0,0,0,.3); } .feature-icon{width:44px;height:44px;border-radius:12px;background:rgba(232,206,110,.08);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px} .feature-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color: var(--white)} .feature-card p{font-size:.88rem;color:rgba(255,255,255,0.5);line-height:1.6;margin:0} /* ── Release Timeline ── */ .releases-section{padding:100px 0} .release-timeline{position:relative} .release-timeline::before{content:'';position:absolute;inset-inline-start:20px;top:8px;bottom:8px;width:1px;background:rgba(232,206,110,.12)} .release-item{position:relative;padding-inline-start:52px;padding-bottom:36px} .release-item:last-child{padding-bottom:0} .release-item::before{content:'';position:absolute;inset-inline-start:14px;top:8px;width:13px;height:13px;border-radius:50%;background: var(--accent);box-shadow:0 0 16px rgba(232,206,110,.3);z-index:1} .release-item:last-child::after{content:'';position:absolute;inset-inline-start:20px;top:21px;bottom:0;width:1px;background:var(--navy-base);z-index:0} .release-version{font-size:1.1rem;font-weight:700;color: var(--accent);margin-bottom:4px} .release-date{font-size:.8rem;color:rgba(255,255,255,.25);margin-bottom:8px} .release-notes{font-size:.9rem;color:rgba(255,255,255,0.55);line-height:1.7} .release-channel{display:inline-block;padding:2px 10px;border-radius:50px;font-size:.7rem;font-weight:600;margin-inline-start:8px} .release-channel.stable{background:rgba(34,197,94,.1);color:#4ade80} .release-channel.beta{background:rgba(232,206,110,.1);color: var(--accent)} /* ── Download Card ── */ .download-card{ background:linear-gradient(135deg,rgba(232,206,110,.08),rgba(232,206,110,.02)); border:1px solid rgba(232,206,110,.12); border-radius:16px;padding:32px;text-align:center; max-width:440px;margin:0 auto; } .download-card .version{font-size:.85rem;color:rgba(255,255,255,0.5);margin-bottom:8px} .download-card h3{font-size:1.3rem;font-weight:700;margin-bottom:8px} .download-card .size{font-size:.85rem;color:rgba(255,255,255,.3);margin-bottom:24px} .download-card .btn-gold{width:100%;justify-content:center;display:flex;align-items:center;gap:8px} /* ── Product Meta Bar ── */ .product-meta-bar{display:flex;gap:24px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);margin:24px 0} .meta-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.5);font-size:.85rem} .meta-item .label{color:rgba(255,255,255,.2)} .meta-item .value{color: var(--white);font-weight:600} /* ── Empty State ── */ .empty-state{text-align:center;padding:60px 20px} .empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:.3} .empty-state h3{color:rgba(255,255,255,.3);font-size:1.1rem;margin-bottom:8px} .empty-state p{color:rgba(255,255,255,.15);font-size:.9rem;max-width:400px;margin-inline:auto} /* ── Tabs (for help, docs) ── */ .tab-nav{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:32px;overflow-x:auto;-webkit-overflow-scrolling:touch} .tab-btn{padding:12px 24px;background:none;border:none;color:rgba(255,255,255,0.5);font-size:.9rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;font-family:inherit} .tab-btn:hover{color:rgba(255,255,255,.6)} .tab-btn.active{color: var(--accent);border-bottom-color: var(--accent)} /* ============================================================ */ /* 🇸🇦 RTL — Arabic, Mobile, Print */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 5 — RTL & Arabic Typography Polish Proper right-to-left animations, Arabic font tuning, mobile layout fixes, cultural polish ============================================================ */ /* ── Arabic typography fine-tuning ── */ [lang="ar"] .hero-sv .hero-title{letter-spacing:-0.01em;line-height:1.5} [lang="ar"] .hero-sv .hero-subtitle{line-height:1.9} [lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{letter-spacing:0} [lang="ar"] .stat-number{font-family:'Tajawal',system-ui,sans-serif} [lang="ar"] .stat-label{font-size:.8rem;letter-spacing:.04em} [lang="ar"] .btn-gold{padding:16px 36px;font-size:1rem} [lang="ar"] .btn-ghost-sv{padding:15px 32px;font-size:.95rem} /* ── RTL scroll reveal animations ── */ [dir="rtl"] .scroll-reveal[data-direction="left"]{transform:translateX(40px)} [dir="rtl"] .scroll-reveal[data-direction="right"]{transform:translateX(-40px)} [dir="rtl"] .reveal-left{transform:translateX(30px)} [dir="rtl"] .reveal-right{transform:translateX(-30px)} [dir="rtl"] .scroll-revealed.reveal-left, [dir="rtl"] .scroll-revealed.reveal-right{transform:translateX(0)} /* ── RTL card hover ── */ [dir="rtl"] .product-card-3d:hover .product-card-action{gap:10px} [dir="rtl"] .product-card-action{flex-direction:row-reverse} /* ── RTL icons and arrows ── */ [dir="rtl"] .btn-gold svg,[dir="rtl"] .btn-ghost-sv svg{transform:scaleX(-1)} [dir="rtl"] .section-link{direction:rtl} [dir="rtl"] .section-link::after{content:'→';margin-inline-start:4px} /* ── RTL timeline ── */ [dir="rtl"] .timeline-line{inset-inline-start:auto;inset-inline-end:28px} [dir="rtl"] .timeline-item{padding-inline-start:0;padding-inline-end:72px} [dir="rtl"] .timeline-dot{inset-inline-start:auto;inset-inline-end:14px} [dir="rtl"] .rtl-line{inset-inline-start:auto;inset-inline-end:28px} [dir="rtl"] .rtl-item{padding-inline-start:0;padding-inline-end:72px} [dir="rtl"] .rtl-dot{inset-inline-start:auto;inset-inline-end:18px} @media(max-width:768px){ [dir="rtl"] .timeline-item{padding-inline-end:56px} [dir="rtl"] .rtl-item{padding-inline-end:56px} [dir="rtl"] .timeline-dot{inset-inline-end:8px} [dir="rtl"] .rtl-dot{inset-inline-end:12px} } /* ── Mobile enhancements ── */ @media(max-width:640px){ .hero-sv .hero-title{font-size:clamp(1.8rem,7vw,2.5rem)} .hero-sv .hero-badge{font-size:.78rem;padding:5px 16px} .hero-sv .hero-subtitle{font-size:.95rem} .hero-actions{flex-direction:column;width:100%} .hero-actions .btn-gold,.hero-actions .btn-ghost-sv{width:100%;text-align:center;justify-content:center} .stats-row{gap:16px} .stat-item{padding:12px 0} .stat-number{font-size:1.8rem} .section-head{flex-direction:column;align-items:flex-start;gap:12px} .section-head h2{font-size:1.5rem} .galaxy-title{font-size:1.8rem} .galaxy-actions{flex-direction:column;width:100%} .galaxy-actions .btn-gold,.galaxy-actions .btn-ghost-sv{width:100%;justify-content:center;text-align:center} .rtl-header{flex-direction:column;align-items:flex-start;gap:6px} } /* ── Floating CTA mobile visibility ── */ @media(min-width:641px){.floating-cta{display:none}} /* ── Print styles ── */ @media print{ .animated-bg,.hero-sv::before,.hero-sv::after,.floating-cta, .device-glow,.screen-shine,.particle-canvas{display:none!important} body{background:#fff!important;color:#000!important} a{color:#000!important;text-decoration:underline} .hero-sv{min-height:auto;padding:20px 0} .hero-sv .hero-title,.hero-sv .hero-subtitle{color:#000!important;-webkit-text-fill-color:#000!important} .product-card-3d{border:1px solid #ccc!important;box-shadow:none!important;break-inside:avoid} .btn-gold,.btn-ghost-sv{display:none!important} } /* ── Touch device optimizations ── */ @media(hover:none){ .product-card-3d:hover{transform:none} .product-card-3d:active{transform:scale(.98)} .btn-gold:hover{transform:none} .btn-gold:active{transform:scale(.97)} } /* ============================================================ */ /* 📰 NEWS — Cards, Filters, Polish */ /* ============================================================ */ /* ============================================================ 🌊 WAVE 6 — News Page & Content Polish Breaking news banner, masonry grid, tag filters, cards ============================================================ */ /* ── Breaking News Banner ── */ .breaking-news{ background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02)); border:1px solid rgba(239,68,68,.1); border-radius:14px;padding:14px 24px; display:flex;align-items:center;gap:16px; margin-bottom:36px; } .breaking-label{color:#ef4444;font-weight:700;font-size:.85rem;white-space:nowrap;animation:pulseDot 2s ease-in-out infinite} .breaking-text{color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.6} /* ── Tag Filters ── */ .tag-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.04)} .tag-filter{ background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,0.5);padding:8px 20px;border-radius:50px; font-size:.85rem;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit; } .tag-filter:hover{color: var(--white);border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06)} .tag-filter.active{background:rgba(232,206,110,.12);border-color:rgba(232,206,110,.25);color: var(--accent)} /* News helpers (no inline styles) */ .section-sub{color:rgba(255,255,255,.45);margin-top:8px} .news-title-link{color:inherit;text-decoration:none;transition:color .2s} .news-title-link:hover{color:var(--accent)} .news-empty{text-align:center;padding:60px 0} .news-empty-icon{font-size:3rem;margin-bottom:16px;opacity:.3} .news-empty p{color:rgba(255,255,255,.35)} .news-badge-icon{width:16px;height:16px;vertical-align:-3px;margin-inline-end:6px;color:var(--accent)} /* ── Premium News Card ── */ .news-card-premium{ background:linear-gradient(160deg,rgba(25,53,94,.2),rgba(0,18,56,.7)); border:1px solid rgba(255,255,255,.03); border-radius:16px;overflow:hidden; transition:all .4s cubic-bezier(.23,1,.32,1); } .news-card-premium:hover{ transform:translateY(-4px); border-color:rgba(232,206,110,.08); box-shadow:0 20px 48px rgba(0,0,0,.35); } .news-card-body{padding:28px} .news-tag{ display:inline-block;padding:3px 12px;border-radius:50px; font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em; margin-bottom:14px; } .news-tag.release{background:rgba(34,197,94,.1);color:#4ade80} .news-tag.update{background:rgba(59,130,246,.1);color:#60a5fa} .news-tag.announcement{background:rgba(232,206,110,.1);color: var(--accent)} .news-tag.security{background:rgba(239,68,68,.1);color:#ef4444} .news-card-body h3{font-size:1.1rem;font-weight:700;color: var(--white);margin-bottom:10px;line-height:1.5} .news-card-body p{font-size:.88rem;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:14px} .news-date{font-size:.78rem;color:rgba(255,255,255,.2)} /* ── Content: Links inside cards ── */ .news-card-body h3 a{transition:color .2s} .news-card-body h3 a:hover{color: var(--accent)} /* ── Home page polish ── */ @media(min-width:1024px){ .hero-sv .hero-content{padding:0 0} .section-head h2{font-size:clamp(2rem,4vw,2.8rem)} } /* ── Navbar link hover ── */ .nav-link{position:relative;padding:8px 0;transition:color .2s} .nav-link::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:2px;background:linear-gradient(90deg,#E8CE6E,transparent);border-radius:1px;transition:width .3s cubic-bezier(.23,1,.32,1)} .nav-link:hover::after{width:100%} [dir="rtl"] .nav-link::after{background:linear-gradient(-90deg,#E8CE6E,transparent)} /* ── Focus visible (global) ── */ :focus-visible{outline:2px solid rgba(232,206,110,.6);outline-offset:3px;border-radius:4px} .btn-gold:focus-visible,.btn-ghost-sv:focus-visible{outline-offset:6px} /* ── Selection color ── */ ::selection{background:rgba(232,206,110,.2);color: var(--white)} /* ── Scrollbar styling ── */ ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--navy-deep,#020B25)} ::-webkit-scrollbar-thumb{background:rgba(232,206,110,.15);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(232,206,110,.25)} /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .scroll-reveal{opacity:1;transform:none} } /* RTL masonry fallback no longer needed — grid is RTL-safe natively */ /* ── Only primary CTA glows ── */ .btn-gold.btn-glowing{position:relative} .btn-gold.btn-glowing::after{content:"";position:absolute;inset:-3px;border-radius:17px;background:var(--cta-bg);z-index:-1;animation:glowPulse 2.5s ease-in-out infinite;opacity:.4;filter:blur(8px)} @keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.6}} /* ── Touch devices: no hover transforms ── */ @media(hover:none){ .product-card-3d:hover,.btn-gold:hover,.btn-ghost-sv:hover,.timeline-card:hover,.rtl-card:hover,.news-card-premium:hover,.ourproduct-card:hover{transform:none!important} .product-card-3d:active{transform:scale(.98)!important} .news-card-premium:active,.ourproduct-card:active{transform:scale(.98)} } /* ── Our Products cards ── */ .ourproduct-card{ display:flex;align-items:flex-start;gap:20px; background:linear-gradient(160deg,rgba(25,53,94,.2),rgba(0,18,56,.7)); border:1px solid rgba(255,255,255,.04); border-radius:16px;padding:24px;text-decoration:none; transition:all .2s var(--ease-out); } .ourproduct-card:hover{border-color:rgba(255,255,255,.08);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25)} .ourproduct-icon{width:64px;height:64px;border-radius:14px;background:rgba(232,206,110,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)} .ourproduct-info{flex:1;min-width:0} .ourproduct-info h3{font-size:1.05rem;font-weight:700;color: var(--white);margin-bottom:4px} .ourproduct-info p{font-size:.85rem;color:rgba(255,255,255,0.5);line-height:1.5;margin-bottom:10px} .ourproduct-badge{display:inline-block;padding:3px 12px;border-radius:50px;font-size:.7rem;font-weight:600} .ourproduct-badge.free{background:rgba(34,197,94,.08);color:#4ade80} .ourproduct-badge.paid{background:rgba(232,206,110,.08);color:var(--accent)} .ourproduct-footer{text-align:center;padding-top:40px;margin-top:20px;border-top:1px solid rgba(255,255,255,.04)} .ourproduct-footer p{color:rgba(255,255,255,.3);font-size:.85rem;margin-bottom:16px} @media(max-width:640px){ .ourproduct-card{flex-direction:column;align-items:center;text-align:center} .ourproduct-icon{margin:0 auto} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .scroll-reveal{opacity:1;transform:none!important} } @media(max-width:768px){.nav-list{gap:8px;flex-direction:column}.nav-link{font-size:1rem;padding:10px 0}} /* ── Nav list desktop spacing ── */ @media(min-width:769px){ .site-header .nav-list{display:flex;flex-direction:row;align-items:center;list-style:none;gap:28px} } /* ── Section spacing fix ── */ @media(max-width:768px){ .section{padding:64px 0} .section+.section{padding-top:0} } /* ============================================================ 🌙 DARK THEME — Explicit & Complete Activated via data-theme="dark" (default in theme-init.js) ============================================================ */ [data-theme="dark"] { --bg-primary: #020B25; --bg-secondary: #001238; --bg-card: rgba(0, 17, 51, 0.7); --bg-card-hover: rgba(7, 21, 54, 0.85); --bg-input: rgba(0, 18, 56, 0.9); --text-primary: #FFFFFF; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --border-color: rgba(255, 255, 255, 0.06); --border-accent: rgba(232, 206, 110, 0.12); color-scheme: dark; } /* Ensure all text is visible on dark bg */ [data-theme="dark"] body { background: #020B25; color: #FFFFFF; } /* Cards visible */ [data-theme="dark"] .product-card-3d, [data-theme="dark"] .news-card-premium, [data-theme="dark"] .feature-card, [data-theme="dark"] .ourproduct-card, [data-theme="dark"] .rtl-card, [data-theme="dark"] .timeline-card { background: linear-gradient(160deg, rgba(25,53,94,.3), rgba(0,18,56,.8)); border-color: rgba(255,255,255,.05); } /* Section backgrounds */ [data-theme="dark"] .section-alt { background: linear-gradient(180deg, transparent, rgba(232,206,110,.015), transparent); } /* Hero text boost */ [data-theme="dark"] .hero-sv .hero-title { color: var(--white); } [data-theme="dark"] .hero-sv .hero-subtitle { color: rgba(255,255,255,.65); } /* Links */ [data-theme="dark"] a { color: var(--blue-light, #9CC3E4); } [data-theme="dark"] .nav-link { color: rgba(255,255,255,.75); } /* ── Utility Classes ── */ .text-white{color:var(--white)} .text-muted{color:rgba(255,255,255,.55)} .mx-auto{margin-inline:auto} .mb-sm{margin-bottom:12px} .mb-lg{margin-bottom:28px} .btn-lg{font-size:1.15rem;padding:16px 40px} .hero-badge-centered{display:inline-flex;margin-bottom:16px} .stats-row-hero{margin-bottom:32px} .nav-link:hover{color:var(--accent)} /* ── Logo fix ── */ .logo-link{flex-shrink:0;display:flex;align-items:center} .main-nav{flex:1;display:flex;justify-content:center} .header-actions{flex-shrink:0;display:flex;align-items:center;gap:12px} .lang-pill{color:rgba(255,255,255,.6);font-size:.8rem;text-decoration:none;padding:4px 10px;border:1px solid rgba(255,255,255,.15);border-radius:6px;transition:all .2s} .lang-pill:hover{color:#fff;border-color:rgba(255,255,255,.3)} /* ============================================================ STEP 2 — Logo (SVG horizontal) + Mobile menu polish ============================================================ */ .site-logo{display:block;width:auto;height:36px;max-width:60vw;object-fit:contain} @media(max-width:768px){.site-logo{height:32px}} .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none} .brand-logo-frame{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,rgba(232,206,110,.15),rgba(232,206,110,.04));border:1px solid rgba(232,206,110,.35);box-shadow:0 0 24px rgba(232,206,110,.18);flex-shrink:0} .brand-logo-frame img{width:32px;height:32px;object-fit:contain} .brand-name{display:flex;flex-direction:column;font-family:var(--font-head);font-weight:800;font-size:1.2rem;line-height:1.2;color:#fff} .brand-name small{display:block;font-size:.66rem;font-weight:400;color:#E8CE6E;letter-spacing:.02em;opacity:.95;margin-top:3px;white-space:nowrap} /* Hamburger: hidden on desktop, styled on mobile */ .menu-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:10px;cursor:pointer;transition:border-color .2s} .menu-toggle:hover{border-color:rgba(255,255,255,.3)} .menu-toggle .menu-bar{display:block;width:20px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .25s ease,opacity .25s ease} .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:768px){.menu-toggle{display:flex}} /* Mobile menu: hidden by default, fullscreen overlay when open */ @media(max-width:768px){ .main-nav{display:none} .main-nav.nav-open{display:flex} } /* Lang switcher copy inside the mobile menu (vital top-bar items need a mobile copy) */ .nav-lang-mobile{display:none} @media(max-width:768px){ .main-nav.nav-open .nav-lang-mobile{display:flex;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)} .main-nav.nav-open .nav-lang-mobile .lang-pill{font-size:.95rem;padding:8px 16px} } /* ============================================================ FOOTER GRID — desktop 4 columns, mobile stacked (root cause: the @media wrapper for the old mobile block was missing, and no desktop grid rule existed after the CSS merge) ============================================================ */ .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl)} @media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}} /* ===== Contact items (footer + contact page): icons, LTR values, clickable links ===== */ .footer-contact .footer-contact-list, .contact-info-card .footer-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .footer-contact .contact-item, .contact-info-card .contact-item{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:0} .contact-icon{flex:0 0 20px;width:20px;height:20px;color:var(--accent);margin-top:3px} .contact-icon svg{width:20px;height:20px;display:block} .contact-body{display:flex;flex-direction:column;gap:2px;min-width:0} .contact-label{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.45)} .contact-link{color:inherit;text-decoration:none;font-size:.85rem;line-height:1.55;word-break:break-word;transition:color .2s} .contact-link:hover{color:var(--accent);text-decoration:underline} .contact-link[dir="ltr"]{unicode-bidi:embed;direction:ltr;text-align:left;display:inline-block} .footer-contact .contact-link{color:rgba(255,255,255,.85)} .footer-contact .contact-label{color:rgba(255,255,255,.42)} .contact-info-card .contact-link{color:rgba(255,255,255,.85)} .contact-info-card .contact-label{color:rgba(255,255,255,.45)} /* Contact page sidebar card + WhatsApp CTA */ .contact-info-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.25rem;margin-bottom:1rem;backdrop-filter:blur(6px)} .contact-info-card h3{color:var(--gold-300);font-size:1rem;margin-bottom:1rem} .contact-whatsapp .btn-whatsapp{display:inline-flex;align-items:center;gap:.5rem;background:#25d366;color:#06281a;font-weight:700;padding:.65rem 1.1rem;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s} .contact-whatsapp .btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.35);color:#06281a} /* ===== Products toolbar (search + filters) — /products and /ourproducts ===== */ .products-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px;padding:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px} .products-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:440px} .search-input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;color:var(--white);font-size:.9rem;transition:border-color .2s} .search-input::placeholder{color:rgba(255,255,255,.35)} .search-input:focus{outline:none;border-color:var(--accent)} .search-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--accent);cursor:pointer;transition:border-color .2s,color .2s,transform .2s} .search-btn:hover{border-color:rgba(232,206,110,.4);transform:translateY(-1px)} .products-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .filter-select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;color:var(--white);font-size:.85rem;cursor:pointer;transition:border-color .2s} .category-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px} .chip{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:50px;border:1px solid rgba(232,206,110,.22);background:rgba(232,206,110,.05);color:rgba(255,255,255,.72);font-size:.88rem;transition:all .25s ease;text-decoration:none} .chip:hover{border-color:rgba(232,206,110,.55);color:#E8CE6E;transform:translateY(-1px)} .chip-active{background:linear-gradient(135deg,#F5DE9E,#D4AF37);color:#020B25;border-color:transparent;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.25);box-shadow:0 4px 18px rgba(232,206,110,.25)} @media(max-width:640px){.category-chips{gap:8px}.chip{padding:7px 14px;font-size:.82rem}} .filter-select:focus{outline:none;border-color:var(--accent)} .filter-select option{background:#0d1b2e;color:#fff} /* ============================================================ Native select dropdown options — explicit colors Fix: option text was inheriting light color from select; when the browser renders the native dropdown list over a light background the text became invisible. ============================================================ */ select option { background: #0d1b2e; color: #fff; } select option:disabled { color: rgba(255, 255, 255, 0.4); } /* ============================================================ Releases / Changelog cards (public product pages) ============================================================ */ .releases-list { display: flex; flex-direction: column; gap: 18px; max-width: 860px; margin: 0 auto; } .release-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 22px 24px; transition: border-color 0.25s, transform 0.25s; } .release-card:hover { border-color: rgba(232, 206, 110, 0.35); transform: translateY(-2px); } .release-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .release-version { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .release-badge { font-size: 1.05rem; font-weight: 700; color: var(--accent, #E8CE6E); background: rgba(232, 206, 110, 0.12); border: 1px solid rgba(232, 206, 110, 0.3); padding: 4px 14px; border-radius: 999px; } .release-tag { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .release-tag.tag-mandatory { color: #fcd34d; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); } .release-tag.tag-security { color: #fca5a5; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); } .release-tag.tag-channel { color: #93c5fd; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); } .release-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .release-date { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; } .release-notes { color: rgba(255, 255, 255, 0.85); line-height: 1.8; font-size: 0.95rem; white-space: normal; } @media (max-width: 640px) { .release-head { flex-direction: column; align-items: flex-start; } } /* ===== Contact: human verification + form errors (2026-08-13) ===== */ .human-question-row { display: flex; align-items: center; gap: 10px; } .human-math { font-size: 1.1rem; font-weight: 700; color: var(--accent-gold, #d4af37); background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .3); border-radius: 8px; padding: 8px 14px; letter-spacing: 1px; direction: ltr; unicode-bidi: isolate; } .human-question input[type="number"] { text-align: center; } .alert .err-line + .err-line { margin-top: 4px; } /* ===== /Contact human verification ===== */ /* ===== Ticket tracking page (2026-08-13) ===== */ .track-wrap { max-width: 720px; margin: 0 auto; } .track-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .track-result { margin-top: 28px; background: var(--navy-surface, #0D1933); border: 1px solid var(--navy-border, #1E4E8F); border-radius: 12px; padding: 20px; } .track-result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .track-result-head h2 { margin: 0; } .track-ticket-no { font-weight: 700; letter-spacing: 1px; color: var(--gold-400, #E8CE6E); direction: ltr; unicode-bidi: isolate; } .track-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .track-meta-item { background: rgba(255, 255, 255, .04); border-radius: 8px; padding: 10px 12px; } .track-meta-label { display: block; font-size: 12px; opacity: .65; margin-bottom: 2px; } .track-meta-value { font-weight: 600; } .track-replies-title { margin-top: 20px; } .track-reply { border-right: 3px solid var(--gold-400, #E8CE6E); background: rgba(255, 255, 255, .03); padding: 10px 14px; border-radius: 8px; margin-top: 10px; } .track-reply-meta { display: flex; justify-content: space-between; font-size: 12px; opacity: .65; margin-bottom: 6px; } .track-reply-body { white-space: pre-wrap; line-height: 1.7; } .badge-status.badge-new, .badge-new { background: rgba(156, 195, 228, .15); color: #8fb3e8; border: 1px solid rgba(156, 195, 228, .4); } .badge-status.badge-in-progress, .badge-in-progress { background: rgba(232, 206, 110, .12); color: var(--gold-400, #E8CE6E); border: 1px solid rgba(232, 206, 110, .4); } .badge-status.badge-replied, .badge-replied { background: rgba(46, 204, 113, .12); color: #2ecc71; border: 1px solid rgba(46, 204, 113, .4); } .badge-status.badge-closed, .badge-closed { background: rgba(255, 255, 255, .08); color: #9db1c7; border: 1px solid rgba(255, 255, 255, .2); } @media (max-width: 600px) { .track-fields { grid-template-columns: 1fr; } } /* ===== /Ticket tracking ===== */ /* ===== Release download button (2026-08-13) ===== */ .release-download { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); } .release-download .btn-gold { display: inline-flex; align-items: center; gap: 6px; } /* ===== /Release download ===== */ /* ===== Product media gallery (2026-08-13) ===== */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; } .gallery-item { margin: 0; border: 1px solid var(--navy-border, #1E4E8F); border-radius: 12px; overflow: hidden; background: var(--navy-surface, #0D1933); transition: transform .25s ease, border-color .25s ease; } .gallery-item:hover { transform: translateY(-4px); border-color: var(--gold-400, #E8CE6E); } .gallery-link { display: block; } .gallery-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .gallery-item figcaption { padding: 10px 14px; font-size: .9rem; opacity: .85; border-top: 1px solid rgba(255, 255, 255, .06); } @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .gallery-item figcaption { font-size: .78rem; padding: 8px 10px; } } /* ===== /Product media gallery ===== */ /* ===== Hero — Codext Signature (2026-08-13 phase 1) ===== */ .hero-sv { position: relative; overflow: hidden; } .hero-sv .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 84px 0 72px; } .hero-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(232, 206, 110, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 206, 110, .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); } .hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .hero-glow.one { width: 460px; height: 460px; top: -140px; right: -80px; background: rgba(232, 206, 110, .16); animation: glowDrift 14s ease-in-out infinite alternate; } .hero-glow.two { width: 420px; height: 420px; bottom: -160px; left: -100px; background: rgba(5, 102, 219, .18); animation: glowDrift 18s ease-in-out infinite alternate-reverse; } @keyframes glowDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.15); } } .badge-gold { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(232, 206, 110, .35); background: rgba(232, 206, 110, .08); color: var(--gold-300, #E8CE6E); font-size: .85rem; font-weight: 600; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #E8CE6E; box-shadow: 0 0 0 0 rgba(232, 206, 110, .6); animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(232, 206, 110, .55); } 70% { box-shadow: 0 0 0 9px rgba(232, 206, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 206, 110, 0); } } .hero-rotator { position: relative; display: inline-block; min-height: 1.25em; } .hero-rotator-caret { display: inline-block; width: 3px; height: .95em; margin-inline-start: 6px; background: #E8CE6E; vertical-align: -0.12em; animation: caretBlink 1s steps(2, start) infinite; } @keyframes caretBlink { to { visibility: hidden; } } /* Visual card + orbits */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; } .hero-card { position: relative; z-index: 2; width: 300px; padding: 26px 24px 22px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, rgba(11, 58, 143, .92), rgba(2, 11, 37, .96)); border: 1px solid rgba(232, 206, 110, .25); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); transform-style: preserve-3d; } .hero-card-glow { position: absolute; inset: -1px; border-radius: 20px; z-index: -1; opacity: .5; background: radial-gradient(ellipse at 50% 0%, rgba(232, 206, 110, .25), transparent 65%); filter: blur(6px); } .hero-card-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(232, 206, 110, .14); border: 1px solid rgba(232, 206, 110, .4); color: #E8CE6E; font-size: .75rem; font-weight: 700; letter-spacing: .3px; } .hero-card-icon { width: 72px; height: 72px; margin: 18px auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 18px; color: #E8CE6E; background: linear-gradient(150deg, rgba(232, 206, 110, .2), rgba(232, 206, 110, .06)); border: 1px solid rgba(232, 206, 110, .3); box-shadow: 0 10px 26px rgba(232, 206, 110, .12); } .hero-card-name { margin: 0 0 6px; font-size: 1.35rem; color: #fff; } .hero-card-desc { margin: 0 0 14px; font-size: .88rem; opacity: .75; min-height: 2.4em; } .hero-card-meta { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } .hero-card-version, .hero-card-channel { padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); } .hero-card-channel { color: #6fd08c; border-color: rgba(111, 208, 140, .35); } .hero-card .btn-sm { padding: 10px 22px; font-size: .9rem; } .hero-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(232, 206, 110, .28); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; } .orbit-outer { width: 380px; height: 380px; animation: orbitSpin 26s linear infinite; } .orbit-inner { width: 240px; height: 240px; border-color: rgba(232, 206, 110, .18); animation: orbitSpin 18s linear infinite reverse; } .orbit-dot { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #E8CE6E; box-shadow: 0 0 14px rgba(232, 206, 110, .9); } .orbit-inner .orbit-dot { top: auto; bottom: -5px; width: 7px; height: 7px; background: #6fd08c; box-shadow: 0 0 12px rgba(111, 208, 140, .9); } @keyframes orbitSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .hero-sv .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); } @media (max-width: 960px) { .hero-sv .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 56px; text-align: center; } .hero-sv .hero-actions { justify-content: center; } .hero-visual { min-height: 320px; order: 2; } .orbit-outer { width: 300px; height: 300px; } .orbit-inner { width: 200px; height: 200px; } .hero-card { width: 260px; } } @media (max-width: 600px) { .hero-visual { min-height: 270px; } .hero-card { width: 230px; padding: 20px 16px 18px; } .hero-card-icon { width: 56px; height: 56px; margin: 14px auto 10px; } } @media (prefers-reduced-motion: reduce) { .hero-glow, .hero-orbit, .badge-dot, .hero-rotator-caret { animation: none !important; } .hero-particles { display: none; } } /* ===== /Hero — Codext Signature ===== */ /* ===== Phase 2 — App cards + process + FAQ + stats (2026-08-13) ===== */ /* Stats gold */ .stats-row { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; } .stat-item { padding: 14px 26px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, rgba(5, 102, 219, .22), rgba(5, 102, 219, .05)); border: 1px solid rgba(232, 206, 110, .16); min-width: 130px; } .stat-number { font-size: 1.9rem; font-weight: 800; color: #E8CE6E; font-variant-numeric: tabular-nums; letter-spacing: .5px; text-shadow: 0 0 18px rgba(232, 206, 110, .35); } .stat-label { font-size: .82rem; opacity: .75; margin-top: 4px; } /* App grid — media-card style (Codext signature) */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 26px; } .media-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(11, 58, 143, .85), rgba(2, 11, 37, .92)); border: 1px solid rgba(255, 255, 255, .08); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; overflow: hidden; text-decoration: none; color: inherit; } .media-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; opacity: 0; background: radial-gradient(ellipse at 30% 0%, rgba(232, 206, 110, .14), transparent 60%); transition: opacity .3s ease; pointer-events: none; } .media-card:hover { transform: translateY(-6px); border-color: rgba(232, 206, 110, .45); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 1px rgba(232, 206, 110, .12); } .media-card:hover::before { opacity: 1; } .card-tag { position: absolute; top: 16px; inset-inline-start: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(232, 206, 110, .12); border: 1px solid rgba(232, 206, 110, .3); color: #E8CE6E; font-size: .72rem; font-weight: 700; } .card-icon { width: 60px; height: 60px; margin: 26px 0 14px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #E8CE6E; background: linear-gradient(150deg, rgba(232, 206, 110, .18), rgba(232, 206, 110, .05)); border: 1px solid rgba(232, 206, 110, .28); box-shadow: 0 8px 22px rgba(232, 206, 110, .1); transition: transform .3s ease; } .media-card:hover .card-icon { transform: scale(1.08) rotate(-3deg); } .card-title { margin: 0 0 8px; font-size: 1.22rem; color: #fff; } .card-desc { margin: 0 0 18px; font-size: .88rem; opacity: .72; line-height: 1.6; flex: 1; } .card-link { display: inline-flex; align-items: center; gap: 6px; color: #E8CE6E; font-weight: 700; font-size: .88rem; } .card-link svg { transition: transform .25s ease; width: 11px; height: 11px; } html[lang="en"] .card-link svg { transform: scaleX(-1); } .media-card:hover .card-link svg { transform: translateX(-4px); } /* Process track */ .process-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; position: relative; } .process-track::before { content: ''; position: absolute; top: 34px; inset-inline: 12%; height: 2px; background: linear-gradient(90deg, transparent, rgba(232, 206, 110, .5), transparent); } .process-step { text-align: center; padding: 0 12px; } .process-node { position: relative; width: 68px; height: 68px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #E8CE6E; background: linear-gradient(160deg, rgba(11, 58, 143, .9), rgba(2, 11, 37, .95)); border: 2px solid rgba(232, 206, 110, .4); box-shadow: 0 0 0 6px rgba(232, 206, 110, .06), 0 10px 26px rgba(0, 0, 0, .35); transition: transform .3s ease, box-shadow .3s ease; } .process-step:hover .process-node { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(232, 206, 110, .1), 0 14px 30px rgba(0, 0, 0, .4); } .process-num { position: absolute; top: -6px; inset-inline-end: -6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E8CE6E; color: #001133; font-size: .78rem; font-weight: 800; } .process-title { margin: 0 0 8px; font-size: 1.1rem; color: #fff; } .process-desc { margin: 0; font-size: .86rem; opacity: .7; line-height: 1.65; max-width: 280px; margin-inline: auto; } /* FAQ accordion */ .faq-wrap { max-width: 760px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 12px; } .faq-item { border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .25s ease; } .faq-item.open { border-color: rgba(232, 206, 110, .35); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: 0; cursor: pointer; color: #eef3fb; font-size: .98rem; font-weight: 600; text-align: start; } .faq-q:hover { color: #E8CE6E; } .faq-arrow { color: #E8CE6E; transition: transform .3s ease; display: inline-flex; width: 24px; height: 24px; } .faq-item.open .faq-arrow { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .faq-a-inner { padding: 0 20px 18px; font-size: .9rem; opacity: .78; line-height: 1.75; } @media (max-width: 760px) { .process-track { grid-template-columns: 1fr; gap: 18px; } .process-track::before { display: none; } .app-grid { grid-template-columns: 1fr; } } /* ===== /Phase 2 ===== */ /* ===== Phase 3-5 — Unified identity + CTA + a11y (2026-08-13) ===== */ .cta-banner { position: relative; overflow: hidden; text-align: center; padding: 54px 28px; border-radius: 22px; background: linear-gradient(150deg, rgba(11, 58, 143, .9), rgba(2, 11, 37, .96)); border: 1px solid rgba(232, 206, 110, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .cta-banner-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 520px; height: 220px; border-radius: 50%; background: radial-gradient(ellipse, rgba(232, 206, 110, .22), transparent 70%); filter: blur(10px); pointer-events: none; } .cta-banner-title { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; } .cta-banner-desc { margin: 0 auto 24px; max-width: 560px; opacity: .78; line-height: 1.7; } .cta-banner-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Unified focus ring (accessibility) */ :focus-visible { outline: 2px solid #E8CE6E; outline-offset: 3px; border-radius: 4px; } /* Subtle page entrance */ body { animation: pageIn .5s ease; } @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* ===== /Phase 3-5 ===== */ /* media-card as component (article > a) */ .media-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; } .media-card-link .card-tag { position: absolute; top: 16px; inset-inline-start: 16px; } /* Nav link golden underline (micro-interaction) */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -5px; inset-inline-start: 0; width: 0; height: 2px; border-radius: 2px; background: #E8CE6E; box-shadow: 0 0 8px rgba(232, 206, 110, .6); transition: width .3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } @media (prefers-reduced-motion: reduce) { .nav-link::after { transition: none; } } /* ===== Real tickets strip (honest social proof — 2026-08-13) ===== */ .section-desc { max-width: 560px; margin: 10px auto 0; opacity: .75; line-height: 1.7; } .tickets-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 26px; } .ticket-card { padding: 18px 18px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: transform .25s ease, border-color .25s ease; } .ticket-card:hover { transform: translateY(-3px); border-color: rgba(232, 206, 110, .35); } .ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .ticket-name { font-weight: 700; font-size: .92rem; color: #fff; } .ticket-status { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; } .st-new { background: rgba(232, 206, 110, .14); color: #E8CE6E; border: 1px solid rgba(232, 206, 110, .3); } .st-progress { background: rgba(156, 195, 228, .16); color: #8fb3e8; border: 1px solid rgba(156, 195, 228, .35); } .st-replied { background: rgba(111, 208, 140, .14); color: #6fd08c; border: 1px solid rgba(111, 208, 140, .35); } .st-closed { background: rgba(138, 148, 166, .14); color: #8a94a6; border: 1px solid rgba(138, 148, 166, .3); } .ticket-subject { margin: 0 0 12px; font-size: .88rem; opacity: .85; line-height: 1.6; } .ticket-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; opacity: .55; } .ticket-no { font-family: 'Courier New', monospace; direction: ltr; letter-spacing: .3px; } .mt-lg { margin-top: 26px; } /* ===== /Tickets strip ===== */ /* Consent row (privacy-first) */ .consent-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .88rem; opacity: .9; line-height: 1.6; } .consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: #E8CE6E; cursor: pointer; flex-shrink: 0; } .consent-text { display: inline-block; } #home_label { margin-top: 10px; } /* ===== Inner pages — unified badges + bold type (2026-08-13) ===== */ .section-head h1, .section-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.2px; } .section-head .section-badge { margin-bottom: 8px; display: inline-flex; } .galaxy-title { margin-top: 6px; } /* subtle button lift (micro-interaction) */ .btn-gold, .btn-ghost-sv { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease; } .btn-gold:hover { transform: translateY(-2px); } .btn-ghost-sv:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .btn-gold:hover, .btn-ghost-sv:hover { transform: none; } } /* ===== Codext brand card (elegant attribution — 2026-08-13) ===== */ .section-codext { padding-top: 0; } .codext-banner { position: relative; overflow: hidden; text-align: center; padding: 44px 28px 46px; border-radius: 22px; background: linear-gradient(150deg, rgba(11, 58, 143, .9), rgba(2, 11, 37, .96)); border: 1px solid rgba(232, 206, 110, .22); box-shadow: 0 22px 55px rgba(0, 0, 0, .38); } .codext-banner-glow { position: absolute; bottom: -90px; left: 50%; transform: translateX(-50%); width: 480px; height: 210px; border-radius: 50%; background: radial-gradient(ellipse, rgba(232, 206, 110, .16), transparent 70%); filter: blur(10px); pointer-events: none; } .codext-banner-title { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; font-weight: 800; } .codext-slogan { margin: 0 auto 24px; max-width: 460px; font-size: .95rem; line-height: 1.8; opacity: .78; } .codext-banner .btn-gold { position: relative; z-index: 1; } /* ===== /Codext brand card ===== */ /* CTA text crispness on gold (contrast fix — charter §40) */ /* Codext card balance (badge size vs brand) — charter §40 */ /* CTA text crispness (navy on gold — charter §41) */ .btn-gold { text-shadow: 0 1px 0 rgba(255, 255, 255, .25); } /* ══════════════════════════════════════════════════════════ §51 — Bold Typography + Unified Micro-interactions (2026-08-13) الدفعة الختامية من الخطة المعتمدة (المرحلة 5 الاختيارية) ══════════════════════════════════════════════════════════ */ /* ── ب1: طباعة جريئة — عناوين أكبر + تباين محسّن ── */ .section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } .page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); } .cta-banner-title, .codext-banner-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); } .card-title { font-size: 1.3rem; } .text-muted { color: rgba(255,255,255,.62); } .hero-subtitle { color: rgba(255,255,255,.65); } .galaxy-desc { color: rgba(255,255,255,.6); } .page-hero p { color: var(--muted, #9aa5b5); } /* ── ب2: micro-interactions موحّدة — سطر ذهبي للروابط ── */ .section-link, .card-link { background: linear-gradient(90deg, #E8CE6E, #E8CE6E) no-repeat left bottom / 0% 2px; transition: gap .3s ease, background-size .35s ease; } .section-link:hover, .card-link:hover { background-size: 100% 2px; } [dir="rtl"] .section-link, [dir="rtl"] .card-link { background-position: right bottom; } /* ── ب2: نبض ذهبي موحّد للأزرار الرئيسية (لمعة عابرة عند hover) ── */ .btn-gold::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .btn-gold:hover::after { animation: goldSweep .8s ease-out; } @keyframes goldSweep { 0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.4); } 100% { box-shadow: inset 0 0 0 12px rgba(255,255,255,0); } } /* احترام تفضيل تقليل الحركة */ @media (prefers-reduced-motion: reduce) { .btn-gold:hover::after { animation: none; } .section-link, .card-link { transition: none; } } /* ══ §53 — خريطة التواصل: بهوية بروجيكس (معلومات موحّدة مع كوديكست) ══ */ .map-card { margin-top: 44px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; } .map-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(232,206,110,.55), transparent); } .map-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; } .map-head h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 6px 0 0; letter-spacing: -.01em; } .map-head p { color: rgba(255,255,255,.6); font-size: .92rem; margin: 0; } .btn-map { margin-top: 8px; padding: 10px 22px; font-size: .92rem; border-radius: 12px; } .map-frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(232,206,110,.18); box-shadow: 0 10px 34px rgba(0,0,0,.35); background: #0a1420; } .map-frame iframe { display: block; width: 100%; height: 340px; border: 0; } @media (max-width: 640px) { .map-frame iframe { height: 260px; } .map-card { padding: 20px; margin-top: 32px; } } /* ══ §54 — القائمة البريدية: نموذج الاشتراك + إلغاء الاشتراك ══ */ .newsletter-block { border-top: 1px solid rgba(255,255,255,.07); padding: 34px 0 6px; margin-bottom: 22px; } .newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .newsletter-text h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: #fff; } .newsletter-text p { margin: 0; color: rgba(255,255,255,.58); font-size: .9rem; } .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; justify-content: flex-end; min-width: 260px; } .newsletter-form input[type="email"] { flex: 1; min-width: 210px; padding: 13px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; font-size: .95rem; transition: border-color .25s, box-shadow .25s; } .newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.4); } .newsletter-form input[type="email"]:focus { outline: none; border-color: rgba(232,206,110,.55); box-shadow: 0 0 0 3px rgba(232,206,110,.12); } .newsletter-form .btn-gold { padding: 13px 26px; font-size: .95rem; border-radius: 12px; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .newsletter-msg { width: 100%; margin-top: 12px; padding: 10px 16px; border-radius: 10px; font-size: .9rem; } .newsletter-msg.ok { background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .3); color: #7fe0a8; } .newsletter-msg.err { background: rgba(231, 76, 60, .12); border: 1px solid rgba(231, 76, 60, .3); color: #f0a39a; } .unsub-card { max-width: 560px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 44px 32px; } .unsub-icon { color: #E8CE6E; margin-bottom: 14px; } .unsub-card h2 { color: #fff; font-size: 1.4rem; font-weight: 800; margin: 0 0 10px; } .unsub-card p { color: rgba(255,255,255,.62); margin: 0 0 26px; } @media (max-width: 640px) { .newsletter-inner { flex-direction: column; align-items: flex-start; } .newsletter-form { justify-content: stretch; width: 100%; } .newsletter-form input[type="email"] { min-width: 100%; } .newsletter-form .btn-gold { width: 100%; justify-content: center; } } /* ══ §56 — رخامة الكحلي: عمق + توهجات زرقاء (توحيد البصمة مع كوديكست) ══ */ body { background-color: #020B25; background-image: linear-gradient(180deg, #001238 0%, #020B25 55%); } .hero { background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(5, 102, 219, .13), transparent 60%), radial-gradient(ellipse 50% 45% at 8% 92%, rgba(11, 58, 143, .16), transparent 62%); } .page-hero { background: radial-gradient(ellipse 55% 45% at 82% 8%, rgba(5, 102, 219, .16), transparent 60%), radial-gradient(ellipse 45% 40% at 12% 85%, rgba(11, 58, 143, .22), transparent 62%), radial-gradient(ellipse 90% 130% at 50% -30%, rgba(232, 206, 110, .09), transparent 62%), linear-gradient(180deg, rgba(2, 11, 37, .55), transparent 85%); } :root { --blue-light: #6d90c9; } /* ══ §56b — رخامة حقيقية: قوة توهج مضاعفة + تركيز + بطاقات متدرجة (محاكاة كوديكست بهوية بروجيكس) ══ */ .hero { background: radial-gradient(ellipse 70% 55% at 75% 20%, rgba(5, 102, 219, .24), transparent 60%), radial-gradient(ellipse 45% 40% at 12% 75%, rgba(11, 58, 143, .30), transparent 65%); } .page-hero { background: radial-gradient(ellipse 60% 50% at 82% 8%, rgba(5, 102, 219, .22), transparent 60%), radial-gradient(ellipse 50% 45% at 12% 85%, rgba(11, 58, 143, .26), transparent 62%), radial-gradient(ellipse 90% 130% at 50% -30%, rgba(232, 206, 110, .09), transparent 62%), linear-gradient(180deg, rgba(2, 11, 37, .55), transparent 85%); } /* كرات التوهج: تركيز أقوى (blur 45px بدل 90) + ألوان العائلة النابضة */ .hero-glow { filter: blur(45px); } .hero-glow.one { background: rgba(232, 206, 110, .2); } .hero-glow.two { background: rgba(5, 102, 219, .24); } /* بطاقات الإصدارات: تدرج داخلي بدل المسطح */ .release-card { background: linear-gradient(160deg, rgba(11, 58, 143, .5), rgba(2, 11, 37, .78)); border: 1px solid rgba(255, 255, 255, .1); } /* hover: توهج أزرق + حد ذهبي (عائلة + هوية) */ .media-card:hover, .release-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 26px rgba(5, 102, 219, .16), 0 0 0 1px rgba(232, 206, 110, .12); } /* الأقسام البديلة: لمسة زرقاء علوية مع الذهبية القديمة */ .section-alt { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(5, 102, 219, .06), transparent 60%), linear-gradient(180deg, transparent, rgba(232, 206, 110, .02), transparent); } /* ══ §56c — الرخامة الجذرية: إشباع الأزرق النابض في العناصر الدقيقة (محاكاة كوديكست) ══ */ body { background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .10), transparent 60%), linear-gradient(180deg, #001238 0%, #020B25 55%); } .hero { background: radial-gradient(ellipse 70% 55% at 75% 20%, rgba(5, 102, 219, .28), transparent 60%), radial-gradient(ellipse 45% 40% at 12% 75%, rgba(11, 58, 143, .35), transparent 65%); } :root { --border-accent: rgba(30, 90, 168, .6); } .btn-outline { background: rgba(5, 102, 219, .07); border-color: rgba(94, 152, 224, .5); color: #a9c7ec; } .btn-outline:hover { border-color: #7fb0e8; color: #fff; background: rgba(5, 102, 219, .16); } .hero-grid-bg { background-image: linear-gradient(rgba(103, 156, 200, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 156, 200, .07) 1px, transparent 1px); } .site-header { border-bottom: 1px solid rgba(103, 156, 200, .14); } .site-footer { border-top: 1px solid rgba(103, 156, 200, .12); } .site-footer::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 206, 110, .45), transparent); } /* ══ §57 — توصيات Gemini المتوافقة مع هوية بروجيكس (عين ثالثة — 60-30-10 بلا قلب الأدوار) ══ */ .section:not(.section-alt):not(.section-codext) { background-image: radial-gradient(circle at 50% 30%, rgba(5, 102, 219, .06) 0%, transparent 70%); } .cta-banner { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 44px rgba(5, 102, 219, .08); } /* ══ §58 — موازنة التوهجات: عمق هادئ بدل صراخ (جولة جلال — اقتراح دقيق) ══ */ body { background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .05), transparent 60%), linear-gradient(180deg, #001238 0%, #020B25 55%); } .hero { background: radial-gradient(ellipse 70% 55% at 75% 20%, rgba(5, 102, 219, .20), transparent 60%), radial-gradient(ellipse 45% 40% at 12% 75%, rgba(11, 58, 143, .26), transparent 65%); } .page-hero { background: radial-gradient(ellipse 60% 50% at 82% 8%, rgba(5, 102, 219, .18), transparent 60%), radial-gradient(ellipse 50% 45% at 12% 85%, rgba(11, 58, 143, .22), transparent 62%), radial-gradient(ellipse 90% 130% at 50% -30%, rgba(232, 206, 110, .09), transparent 62%), linear-gradient(180deg, rgba(2, 11, 37, .55), transparent 85%); } .section:not(.section-alt):not(.section-codext) { background-image: radial-gradient(circle at 50% 30%, rgba(5, 102, 219, .04) 0%, transparent 70%); } /* ══ §59 — عمق الليل الأزرق: خلفية أغمق وأكثر زرقة (هدف رقمي: ~#071529 بدل #19262E) ══ */ body { background-color: #041021; background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .05), transparent 60%), linear-gradient(180deg, #0a1830 0%, #020B25 45%, #041021 100%); } /* ══ §60 — زوال الفيروزي: ذهب الخلفيات إلى النصف + ليل أزرق أعمق (تشخيص جلال البصري) ══ */ body { background-color: #03091a; background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .06), transparent 60%), linear-gradient(180deg, #071530 0%, #051224 45%, #03091a 100%); } .hero-glow.one { background: rgba(232, 206, 110, .12); } .cta-banner-glow { background: radial-gradient(ellipse, rgba(232, 206, 110, .12), transparent 70%); } .section-codext { background: linear-gradient(180deg, transparent, rgba(232, 206, 110, .01), transparent); } .page-hero { background: radial-gradient(ellipse 60% 50% at 82% 8%, rgba(5, 102, 219, .18), transparent 60%), radial-gradient(ellipse 50% 45% at 12% 85%, rgba(11, 58, 143, .22), transparent 62%), radial-gradient(ellipse 90% 130% at 50% -30%, rgba(232, 206, 110, .05), transparent 62%), linear-gradient(180deg, rgba(2, 11, 37, .55), transparent 85%); } .section-download-cta { background: linear-gradient(180deg, transparent, rgba(232, 206, 110, .015), transparent); } /* ══ §61 — الضربة القاصمة: منتصف أزرق نقي (عين جلال + عيناي الرقميتان: G 24→17) ══ */ body { background-color: #03091a; background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .06), transparent 60%), linear-gradient(180deg, #071530 0%, #051127 45%, #03091a 100%); } /* ══ §62 — مطابقة ليل كوديكست: قيم مضبوطة من مقارنة اللقطات الحية (أعلى 051230 / وسط 061733 / أسفل 03091a) ══ */ body { background-color: #03091a; background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .05), transparent 60%), linear-gradient(180deg, #051230 0%, #061733 45%, #03091a 100%); } /* ══ §64 — الاستنساخ الكامل: لوحة كوديكست (الجينات) مع تاج بروجيكس الذهبي ══ */ :root { --navy-deep: #020B25; --navy-base: #001238; --navy-mid: #001133; --navy-light: #071536; --navy-surface: #0D1933; --navy-border: #1E4E8F; --gold-400: #E8CE6E; --gold-300: #f5de9e; --gold-200: #fee9a8; --blue-accent: #0566DB; --blue-light: #9CC3E4; --blue-glow: #0566DB; --silver: #CDD2D4; --silver-muted: #5B6B82; --gray-500: #5B6B82; --gray-700: #0B1220; --bg-primary: var(--navy-deep); --bg-secondary: var(--navy-base); --bg-card: rgba(13, 25, 51, 0.6); --bg-card-hover: rgba(13, 25, 51, 0.85); --bg-input: rgba(13, 25, 51, 0.8); --text-primary: #FFFFFF; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --border-color: rgba(59, 130, 246, 0.18); --border-accent: rgba(59, 130, 246, 0.35); --accent: var(--gold-400); --accent-glow: rgba(232, 206, 110, 0.12); --accent-hover: var(--gold-300); --link-color: var(--blue-light); } /* تدرج كوديكست الحرفي (navy-900 → navy-850 → navy-950) */ body { background-color: #020B25; background-image: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(5, 102, 219, .05), transparent 60%), linear-gradient(180deg, #001238 0%, #001133 45%, #020B25 100%); } /* ══ §64c — سبيكة واضحة: إزالة ظل النص الأبيض + توحيد الأزرار الذهبية ══ */ .btn-gold { text-shadow: none; color: #0B1220; } .btn-primary { background: var(--cta-bg); color: var(--cta-text); box-shadow: 0 0 20px rgba(232, 206, 110, 0.15); } /* ══ §64d — فرخ الشبح مطفأ: توهج خافت + نص حديدي مضمون على السبائك ══ */ .btn-gold.btn-glowing::after { opacity: .15; filter: blur(12px); } .btn-gold, .btn-gold:hover, .btn-gold:active, .btn-gold:focus, .btn-gold:visited { color: #0B1220 !important; text-shadow: none !important; } /* ══ §64e — محفور في الذهب: كحلي ملكي (blue-800) + حافة سفلية مضيئة (Emboss) ══ */ .btn-gold, .btn-gold:hover, .btn-gold:active, .btn-gold:focus, .btn-gold:visited { color: #0B1220 !important; text-shadow: none !important; font-weight: 700; } /* ══ §64f — بطاقات تذوب في الخلفية (نمط كوديكست الشفاف — لا فيروزي ولا بقايا) ══ */ .media-card, .release-card, .product-card { background: linear-gradient(160deg, rgba(11, 58, 143, .22), rgba(2, 11, 37, .6)); border: 1px solid rgba(103, 156, 200, .16); } .media-card:hover, .release-card:hover, .product-card:hover { border-color: rgba(103, 156, 200, .4); } /* ══ §64g — شبح الهيرو الأخير: بطاقة الهاتف تذوب (نمط كوديكست الشفاف) ══ */ .hero-card { background: linear-gradient(160deg, rgba(11, 58, 143, .35), rgba(2, 11, 37, .72)); border: 1px solid rgba(232, 206, 110, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ===== §70: Newsletter — editor + unsubscribe page + actions ===== */ .editor-wrap { border: 1px solid rgba(59,130,246,.18); border-radius: 10px; overflow: hidden; background: rgba(2,11,37,.55); } .editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid rgba(59,130,246,.18); background: rgba(11,58,143,.15); } .editor-toolbar button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary, #CBD5E1); font-size: 13px; cursor: pointer; transition: all .15s; } .editor-toolbar button:hover { background: rgba(59,130,246,.2); color: #fff; border-color: rgba(59,130,246,.35); } .editor-toolbar .editor-html-toggle.active { background: rgba(5,102,219,.35); color: #fff; border-color: var(--blue-accent, #0566DB); } .editor-sep { width: 1px; margin: 4px 6px; background: rgba(148,163,184,.25); } .editor-area { min-height: 190px; max-height: 420px; overflow-y: auto; padding: 12px 14px; color: var(--text-primary, #fff); font-size: 14px; line-height: 1.75; outline: none; } .editor-area:empty::before { content: attr(data-placeholder); color: rgba(148,163,184,.5); pointer-events: none; } .editor-area h2 { margin: 8px 0 6px; font-size: 20px; color: var(--gold-400, #E8CE6E); } .editor-area h3 { margin: 8px 0 5px; font-size: 16px; color: #fff; } .editor-area blockquote { margin: 8px 0; padding: 6px 12px; border-inline-start: 3px solid var(--gold-400, #E8CE6E); color: var(--text-secondary, #CBD5E1); background: rgba(11,58,143,.15); border-radius: 0 6px 6px 0; } .editor-area a { color: var(--blue-light, #9CC3E4); text-decoration: underline; } .btn-xs { padding: 3px 10px; font-size: 12px; border-radius: 6px; } .btn-xs.btn-outline { border: 1px solid rgba(59,130,246,.35); color: var(--text-secondary, #CBD5E1); background: transparent; } .btn-xs.btn-outline:hover { background: rgba(59,130,246,.15); color: #fff; } .th-actions, .td-actions { width: 150px; text-align: end; white-space: nowrap; } .td-actions { display: flex; gap: 6px; justify-content: flex-end; } .cell-sub { font-size: 12px; color: var(--text-secondary, #CBD5E1); margin-top: 2px; } .newsletter-unsub-link { margin-top: 10px; font-size: 12px; } .newsletter-unsub-link a { color: var(--text-secondary, #CBD5E1); text-decoration: underline; opacity: .8; } .newsletter-unsub-link a:hover { color: var(--blue-light, #9CC3E4); opacity: 1; } .unsub-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .unsub-form .form-input { flex: 1 1 260px; max-width: 380px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(59,130,246,.25); background: rgba(2,11,37,.6); color: #fff; } .unsub-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .unsub-note { margin-top: 18px; font-size: 13px; } .unsub-note a { color: var(--blue-light, #9CC3E4); text-decoration: underline; } .send-card form .form-group label { display: block; margin-bottom: 6px; font-weight: 600; } .send-card form input[type=text], .send-card form input[type=email], .send-card form select, .send-card form input[type=file] { width: 100%; max-width: 560px; } .send-card .small { font-size: 12px; margin-top: 4px; } /* ===== §71: Newsletter admin — stats cards + bulk bar + avatars ===== */ .nl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; } .nl-stat-card { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(59,130,246,.18); background: linear-gradient(160deg, rgba(11,58,143,.22), rgba(2,11,37,.6)); display: flex; flex-direction: column; gap: 4px; } .nl-stat-card .nl-stat-num { font-size: 26px; font-weight: 800; line-height: 1; } .nl-stat-card .nl-stat-label { font-size: 12px; color: var(--text-secondary, #CBD5E1); } .nl-stat-card.total .nl-stat-num { color: var(--gold-400, #E8CE6E); } .nl-stat-card.active .nl-stat-num { color: #4ADE80; } .nl-stat-card.unsub .nl-stat-num { color: #94A3B8; } .nl-stat-card.active { border-color: rgba(74,222,128,.3); } .nl-stat-card.unsub { border-color: rgba(148,163,184,.2); } .nl-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.12); font-weight: 700; color: #FCA5A5; } .nl-bulk-bar[hidden] { display: none; } .nl-bulk-label { font-weight: 400; font-size: 13px; color: var(--text-secondary, #CBD5E1); } .th-check, .td-check { width: 40px; text-align: center; } .th-check input, .td-check input { width: 16px; height: 16px; accent-color: var(--gold-400, #E8CE6E); cursor: pointer; } .nl-email-cell { display: flex; align-items: center; gap: 10px; } .nl-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #0B1220; background: linear-gradient(135deg, var(--gold-400, #E8CE6E), #D4AF37); } /* ===== §72: Send page — preview modal + attach list ===== */ .send-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .nl-attach-list { margin-top: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(59,130,246,.2); background: rgba(11,58,143,.12); list-style: none; } .nl-attach-list li { font-size: 12px; color: var(--text-secondary, #CBD5E1); padding: 2px 0; } .nl-preview-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(2,11,37,.75); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .nl-preview-modal[hidden] { display: none; } .nl-preview-box { width: min(680px, 100%); max-height: 82vh; overflow-y: auto; background: #ffffff; color: #1f2937; border-radius: 14px; padding: 20px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .nl-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .nl-preview-head h3 { margin: 0; color: #0B3A8F; font-size: 17px; } .nl-preview-box .muted { color: #6b7280; font-size: 12px; margin: 0 0 10px; } .nl-preview-body { border-top: 1px solid #e5e7eb; padding-top: 14px; } /* ===== §81 Pricing (خطط التسعير) ===== */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px} .pricing-card{position:relative;padding:32px 26px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;transition:transform .25s ease,box-shadow .25s ease} .pricing-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.16)} .pricing-card.featured{border:2px solid var(--gold,#d4a94e);box-shadow:0 10px 30px rgba(212,169,78,.18)} .pricing-card.featured::before{content:"★";position:absolute;top:-14px;right:50%;transform:translateX(50%);background:var(--gold,#d4a94e);color:#1a1a1a;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px} .pricing-type{font-weight:700;font-size:1.05rem;letter-spacing:.3px} .pricing-price{font-size:2.1rem;font-weight:800;color:var(--gold,#d4a94e);line-height:1} .pricing-price .price-free{color:#2ecc71} .pricing-duration{color:var(--muted,#8a8f98);font-size:.95rem} .pricing-badge{background:rgba(212,169,78,.12);color:var(--gold,#d4a94e);padding:4px 14px;border-radius:999px;font-size:.8rem;font-weight:600} .pricing-card .btn{margin-top:14px;width:100%} .pricing-payment{margin-top:34px;padding:22px 26px;background:rgba(212,169,78,.06);border:1px dashed rgba(212,169,78,.35);border-radius:14px;text-align:center} .pricing-payment h3{margin-bottom:8px;color:var(--gold,#d4a94e)} .pricing-payment p{margin:0;font-size:.95rem} @media(max-width:860px){.pricing-grid{grid-template-columns:1fr;gap:18px}} @media(max-width:860px){.pricing-card{max-width:420px;margin:0 auto;width:100%}} /* ── §108 — تذييل كوديكست: فصل زر Visit عن العبارات (منع التغطية) ── */ .section-codext .btn-ghost-sv { display: inline-block; margin-top: 18px; } /* ── §109 — منطقة اللصق المباشر (مكتبة الوسائط) ── */ .paste-zone { border: 2px dashed rgba(232,206,110,.35); border-radius: 14px; padding: 28px; text-align: center; cursor: pointer; transition: .2s; background: rgba(255,255,255,.02); } .paste-zone:hover, .paste-zone:focus { border-color: #E8CE6E; background: rgba(232,206,110,.05); outline: none; } .paste-zone span { display: block; font-weight: 700; margin-bottom: 4px; } /* ── §111 — صور المنتجات (بطاقة + شاشة المنتج) ── */ .card-media { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: rgba(5,102,219,.06); } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ── §113 — حماية صور المنتجات من أي إخفاء/غبش موروث ── */ .card-media img, .card-media, .screen-img, .gallery-item img, footer img, .footer-logo { opacity: 1 !important; transform: none !important; filter: none !important; } /* ============================================================ Offers — العروض التسويقية (شريط الرئيسية + صفحة العروض) ============================================================ */ .offers-strip { position: relative; padding: 14px 0; background: linear-gradient(90deg, rgba(5,102,219,.18), rgba(232,206,110,.10), rgba(5,102,219,.18)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .offers-strip-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .offers-strip-head { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .offers-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400); animation: offersPulse 1.8s infinite; } @keyframes offersPulse { 0% { box-shadow: 0 0 0 0 rgba(232,206,110,.55); } 70% { box-shadow: 0 0 0 9px rgba(232,206,110,0); } 100% { box-shadow: 0 0 0 0 rgba(232,206,110,0); } } .offers-strip-title { font-family: var(--font-head); font-weight: 700; color: var(--gold-300); font-size: var(--text-sm); white-space: nowrap; } .offers-marquee { overflow: hidden; flex: 1; min-width: 0; } .offers-track { display: flex; width: max-content; flex-shrink: 0; animation: offerScroll 32s linear infinite; } .offers-track:hover { animation-play-state: paused; } .offers-group { display: flex; gap: 10px; flex-shrink: 0; padding-inline-end: 10px; } @keyframes offerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* العربية (RTL): انسياب معكوس (يسار→يمين) — keyframes مستقلة تبدأ من الموضع الأصلي بلا فجوة */ html[dir="rtl"] .offers-track { animation-name: offerScrollRtl; } @keyframes offerScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .offers-track { animation: none; } } .offer-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 7px 14px 7px 10px; white-space: nowrap; color: var(--text-secondary); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; } .offer-chip:hover { border-color: var(--gold-400); background: var(--bg-card-hover); transform: translateY(-1px); } .offer-badge { background: linear-gradient(135deg, var(--gold-400), var(--gold-300)); color: #020B25; font-weight: 800; font-size: var(--text-xs); border-radius: 999px; padding: 2px 9px; } .offer-text { font-size: var(--text-sm); font-weight: 600; } .offer-disc { color: var(--gold-300); font-weight: 800; font-size: var(--text-sm); } .offer-arrow { color: var(--silver-muted); flex-shrink: 0; } html[lang="en"] .offer-arrow { transform: scaleX(-1); } .offers-all { flex-shrink: 0; color: var(--gold-300); font-weight: 700; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; } .offers-all:hover { color: var(--gold-400); } /* صفحة العروض */ .offers-page .section-head { margin-bottom: var(--space-xl); } .section-sub { color: var(--text-muted); font-size: var(--text-base); margin-top: 8px; } .offers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .offer-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: border-color .25s, transform .25s, box-shadow .25s; } .offer-card:hover { border-color: var(--gold-400); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.35); } .offer-card-featured { border-color: rgba(232,206,110,.45); background: linear-gradient(160deg, rgba(232,206,110,.08), var(--bg-card)); } .offer-card-badge { position: absolute; top: -11px; right: 18px; background: linear-gradient(135deg, var(--gold-400), var(--gold-300)); color: #020B25; font-weight: 800; font-size: var(--text-sm); border-radius: 999px; padding: 4px 13px; box-shadow: 0 6px 16px rgba(232,206,110,.35); } html[lang="en"] .offer-card-badge { right: auto; left: 18px; } .offer-card-title { font-family: var(--font-head); font-size: var(--text-lg); color: var(--text-primary); margin: 0; line-height: 1.45; } .offer-card-product { display: inline-block; align-self: flex-start; color: var(--blue-light); font-size: var(--text-sm); font-weight: 600; } .offer-card-desc { color: var(--text-muted); font-size: var(--text-sm); margin: 0; line-height: 1.6; } .offer-card-pricing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .offer-price { color: var(--gold-300); font-weight: 800; font-size: var(--text-lg); } .offer-old-price { color: var(--text-muted); text-decoration: line-through; font-size: var(--text-sm); } .offer-disc-pill { background: rgba(232,206,110,.15); color: var(--gold-300); font-weight: 800; font-size: var(--text-xs); border-radius: 999px; padding: 3px 10px; } .offer-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .offer-validity { color: var(--text-muted); font-size: var(--text-xs); } /* Product detail hero image (large, standalone) */ .product-hero-shot{width:100%;max-width:560px;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(232,206,110,.22);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 50px rgba(232,206,110,.1);background:rgba(2,11,37,.6)} .product-hero-shot img{display:block;width:100%;height:auto} /* ── Lightbox — معرض لقطات المنتجات (تكبير في نفس النافذة) ── */ .lightbox-overlay{position:fixed;inset:0;z-index:10000;background:rgba(1,6,20,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease} .lightbox-overlay.open{opacity:1;pointer-events:auto} .lightbox-frame{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center} .lightbox-img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 40px rgba(232,206,110,.08)} .lightbox-caption{color:rgba(255,255,255,.75);margin-top:14px;font-size:.95rem;text-align:center} .lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;z-index:2} .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(232,206,110,.18);border-color:rgba(232,206,110,.4)} .lightbox-close{top:18px;inset-inline-end:18px} .lightbox-prev{top:50%;inset-inline-start:14px;transform:translateY(-50%)} .lightbox-next{top:50%;inset-inline-end:14px;transform:translateY(-50%)} @media(max-width:640px){.lightbox-prev{inset-inline-start:6px}.lightbox-next{inset-inline-end:6px}} /* ── Help Guide Modal — دليل الاستخدام مضمّناً في صفحة المنتج ── */ .help-modal-overlay{position:fixed;inset:0;z-index:10001;background:rgba(1,6,20,.93);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease} .help-modal-overlay.open{opacity:1;pointer-events:auto} .help-modal{width:min(1100px,95vw);height:min(88vh,920px);background:#fff;border:1px solid rgba(232,206,110,.35);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.65)} .help-modal-head{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#020B25;color:#fff;border-bottom:1px solid rgba(232,206,110,.25)} .help-modal-title{flex:1;font-weight:700;font-size:1.02rem;color:#E8CE6E} .help-modal-newtab,.help-modal-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:1.05rem;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s} .help-modal-newtab:hover,.help-modal-close:hover{background:rgba(232,206,110,.18);border-color:rgba(232,206,110,.45)} .help-modal-body{flex:1;background:#fff} .help-modal-frame{width:100%;height:100%;border:0;display:block} @media(max-width:640px){.help-modal{width:97vw;height:92vh;border-radius:10px}}