/* ============================================================ CX Excellence Hub — RTL (Arabic) Stylesheet Phase 3.1 · T2 · Generated from Arabic RTL source All LTR properties converted to RTL; Latin fonts replaced with Noto Sans Arabic + Cairo ============================================================ */ /* ---- Arabic Fonts loaded via in ---- */ /* Noto Sans Arabic + Cairo loaded externally */ /* ============================================================ CSS CUSTOM PROPERTIES (unchanged from source) ============================================================ */ :root { /* Brand colours */ --primary: #2979ff; --primary-dark: #1565c0; --primary-light: rgba(41,121,255,.12); --accent: #ffb300; --accent-dark: #e65100; --success: #00e676; --danger: #ff5252; --electric: #00e5ff; /* Obsidian Scale */ --dark: #0d0d0f; --darker: #080809; --mid-dark: #141418; --card-bg: #18181f; --border: #23232e; --mid: #8892a4; --light: #b8c4d0; --lighter: #dde4ee; --white: #f0f4ff; --pure-white: #ffffff; /* Sapphire glow */ --glow-blue: rgba(41,121,255,.25); --glow-blue-sm: rgba(41,121,255,.12); --glow-cyan: rgba(0,229,255,.15); /* Platinum tones */ --plat-100: #e8ecf0; --plat-200: #c8d0da; --plat-300: #a0aab8; /* Typography */ --font-primary: 'Noto Sans Arabic', 'Cairo', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Fira Code', monospace; --font-display: 'Cairo', system-ui, sans-serif; /* Layout */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow: 0 8px 32px rgba(0,0,0,.4); --shadow-lg: 0 16px 64px rgba(0,0,0,.5); --shadow-glow: 0 0 40px rgba(41,121,255,.2); /* Motion */ --transition: 0.3s cubic-bezier(0.4,0,0.2,1); } /* ============================================================ CSS RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-primary); background: var(--dark); color: var(--lighter); line-height: 1.6; direction: rtl; /* RTL */ text-align: right; /* RTL */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ============================================================ UTILITIES ============================================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section-header { text-align: center; margin-bottom: 64px; } .section-label { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-light); color: var(--primary); padding: 6px 16px; border-radius: 100px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; } .section-title { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; color: var(--white); line-height: 1.2; } .section-desc { font-size: 1.05rem; color: var(--mid); max-width: 600px; margin: 16px auto 0; line-height: 1.75; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: .95rem; transition: var(--transition); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; box-shadow: 0 4px 20px var(--glow-blue); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(41,121,255,.45); } .btn-accent { background: linear-gradient(135deg,var(--accent),var(--accent-dark)); color: #fff; box-shadow: 0 4px 16px rgba(255,179,0,.3); } .btn-accent:hover { transform: translateY(-2px); } .btn-outline { background: transparent; border: 2px solid rgba(255,255,255,.15); color: var(--white); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .btn-lg { padding: 18px 36px; font-size: 1.05rem; border-radius: var(--radius-lg); } .btn-full { width: 100%; justify-content: center; } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announcement-bar { background: linear-gradient(90deg,#1a1a2e,var(--primary-dark),#1a1a2e); color: var(--white); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .85rem; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(41,121,255,.2); position: relative; z-index: 100; } .announcement-bar .bar-badge { background: var(--accent); color: #000; padding: 2px 10px; border-radius: 100px; font-size: .72rem; font-weight: 800; white-space: nowrap; } /* ============================================================ STICKY OFFER BAR ============================================================ */ .sticky-offer-bar { position: fixed; top: 0; left: 0; right: 0; /* LTR: left→left */ z-index: 1000; background: linear-gradient(90deg,#0a0a12,var(--primary-dark),#0a0a12); border-bottom: 2px solid var(--primary); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; transform: translateY(-100%); transition: transform .4s ease; flex-wrap: wrap; } .sticky-offer-bar.show { transform: translateY(0); } .sticky-offer-bar .sob-text { color: var(--white); font-weight: 700; font-size: .88rem; } .sticky-offer-bar .sob-countdown { font-family: var(--font-mono); font-size: 1rem; color: var(--accent); font-weight: 800; background: rgba(255,179,0,.1); padding: 4px 12px; border-radius: 6px; letter-spacing: .05em; } .sticky-offer-bar .sob-cta { background: var(--accent); color: #000; padding: 7px 18px; border-radius: 8px; font-weight: 800; font-size: .82rem; transition: var(--transition); } .sticky-offer-bar .sob-cta:hover { background: var(--accent-dark); color: #fff; transform: scale(1.03); } .sticky-offer-bar .sob-close { position: absolute; left: 16px; top: 50%; /* RTL: dismiss btn on left */ transform: translateY(-50%); color: rgba(255,255,255,.5); font-size: 1.2rem; padding: 4px; cursor: pointer; transition: color .2s; } .sticky-offer-bar .sob-close:hover { color: var(--white); } /* ============================================================ PAGE PROGRESS BAR ============================================================ */ .progress-bar { position: fixed; top: 0; right: 0; /* RTL */ width: 100%; height: 3px; z-index: 2000; pointer-events: none; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg,var(--primary),var(--electric),var(--primary)); transition: width .1s linear; box-shadow: 0 0 8px var(--primary); } /* ============================================================ NAVBAR ============================================================ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 18px 0; transition: var(--transition); background: transparent; } #navbar.scrolled { background: rgba(13,13,15,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 0; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .nav-inner { display: flex; align-items: center; justify-content: space-between; /* RTL: logo right, nav left */ gap: 24px; } .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .nav-logo-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; font-weight: 900; letter-spacing: -.02em; box-shadow: 0 4px 12px var(--glow-blue); } .nav-logo-text { font-size: 1rem; font-weight: 800; color: var(--white); letter-spacing: -.01em; } .nav-logo-sub { font-size: .68rem; color: var(--mid); font-weight: 500; letter-spacing: .04em; margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { padding: 8px 14px; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--light); transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--white); background: rgba(255,255,255,.07); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-lang-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--light); font-size: .82rem; font-weight: 700; transition: var(--transition); text-decoration: none; } .nav-lang-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } .nav-cta { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; padding: 9px 20px; border-radius: 10px; font-size: .88rem; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px var(--glow-blue); transition: var(--transition); } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--glow-blue); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 8px; } .nav-hamburger span { width: 22px; height: 2px; background: var(--light); border-radius: 2px; transition: var(--transition); } /* ============================================================ MOBILE MENU ============================================================ */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1100; } .mobile-overlay.open { display: block; } .mobile-menu { position: fixed; right: -280px; left: auto; /* RTL: slides from right */ top: 0; height: 100vh; width: 280px; background: var(--mid-dark); z-index: 1200; padding: 24px; display: flex; flex-direction: column; gap: 8px; transition: left .3s ease; overflow-y: auto; } .mobile-menu.open { right: 0; } /* RTL slide-in */ .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; /* RTL */ margin-bottom: 16px; } .mobile-close { color: var(--light); font-size: 1.4rem; cursor: pointer; padding: 4px; transition: color .2s; } .mobile-close:hover { color: var(--white); } .mobile-nav-links { display: flex; flex-direction: column; gap: 4px; } .mobile-nav-links a { padding: 12px 16px; border-radius: 10px; font-size: .95rem; font-weight: 600; color: var(--light); transition: var(--transition); display: flex; align-items: center; gap: 10px; text-align: right; /* RTL */ } .mobile-nav-links a:hover { background: rgba(255,255,255,.08); color: var(--white); } .mobile-divider { height: 1px; background: var(--border); margin: 8px 0; } .mobile-cta { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; padding: 14px; border-radius: 12px; text-align: center; font-weight: 700; font-size: .95rem; margin-top: auto; box-shadow: 0 4px 16px var(--glow-blue); } /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 140px 0 80px; background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(41,121,255,.15) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(124,58,237,.1) 0%, transparent 60%), linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 600px at 20% 40%, rgba(41,121,255,.06) 0%, transparent 70%); animation: float1 8s ease-in-out infinite; pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 400px at 80% 60%, rgba(0,229,255,.04) 0%, transparent 60%); animation: float2 12s ease-in-out infinite; pointer-events: none; } @keyframes float1 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } } @keyframes float2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(20px) rotate(5deg); } } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; /* RTL: image left, text right */ gap: 64px; align-items: center; position: relative; z-index: 1; } .hero-content { text-align: right; } /* RTL */ .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--light); padding: 6px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; backdrop-filter: blur(4px); opacity: 0; transform: translateY(10px); animation: badgeIn .5s ease forwards; } .hero-badge:nth-child(2) { animation-delay: .1s; } .hero-badge:nth-child(3) { animation-delay: .2s; } .hero-badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } } @keyframes badgeIn { to { opacity: 1; transform: translateY(0); } } .hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.15; color: var(--white); margin-bottom: 20px; letter-spacing: -.03em; } .hero h1 .highlight { background: linear-gradient(90deg, var(--primary), var(--electric)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .hero-desc { font-size: 1.08rem; color: var(--light); line-height: 1.75; margin-bottom: 32px; max-width: 500px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } .hero-guarantee { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--mid); } .hero-guarantee i { color: var(--success); } /* Hero counters */ .hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); } .hero-stat-item { text-align: right; } /* RTL */ .hero-stat-val { font-size: 1.6rem; font-weight: 900; color: var(--white); line-height: 1; letter-spacing: -.03em; } .hero-stat-lbl { font-size: .75rem; color: var(--mid); margin-top: 4px; font-weight: 500; } /* Hero visual */ .hero-visual { position: relative; } .hero-mockup-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.08); } .hero-mockup-wrap img { width: 100%; } .hero-perf-card { position: absolute; bottom: -20px; right: -20px; /* RTL: bottom-right */ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: var(--shadow); width: 200px; animation: float1 6s ease-in-out infinite; } .hero-perf-card .pc-label { font-size: .72rem; color: var(--mid); margin-bottom: 8px; font-weight: 600; } .hero-perf-card .pc-value { font-size: 1.6rem; font-weight: 900; color: var(--success); line-height: 1; } .hero-perf-card .pc-trend { font-size: .75rem; color: var(--success); margin-top: 4px; } .hero-scroll-indicator { position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: bounce 2s infinite; } @keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } .hero-scroll-indicator span { font-size: .7rem; color: var(--mid); } .hero-scroll-indicator i { color: var(--mid); } /* ============================================================ A/B TEST DEBUG BADGE ============================================================ */ .ab-debug-badge { position: fixed; bottom: 16px; right: 16px; z-index: 9999; /* RTL */ background: #1a1a2e; border: 1px solid var(--primary); border-radius: 8px; padding: 8px 14px; font-family: var(--font-mono); font-size: .75rem; color: var(--primary); display: none; } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { background: var(--mid-dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px 0; } .trust-bar-inner { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 24px; } .t-item { display: flex; align-items: center; gap: 14px; } .t-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--primary); flex-shrink: 0; transition: var(--transition); } .t-item:hover .t-icon { transform: scale(1.1); background: var(--primary); color: #fff; } .t-info { text-align: right; } /* RTL */ .t-info .val { display: block; font-size: 1.3rem; font-weight: 900; color: var(--white); line-height: 1; } .t-info .lbl { font-size: .78rem; color: var(--mid); margin-top: 3px; font-weight: 500; } /* ============================================================ SECTION: WHO IS THIS FOR ============================================================ */ .for-section { background: var(--white); color: var(--dark); padding: 96px 0; } .for-section .section-title { color: var(--dark); } .for-section .section-desc { color: #555; } .for-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 0; } .for-card { background: var(--lighter); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; /* cards stay centered */ transition: var(--transition); cursor: default; position: relative; overflow: hidden; } .for-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--primary),#7C3AED); transform: scaleX(0); transition: var(--transition); transform-origin: right; /* RTL: expand from right */ } .for-card:hover { border-color: var(--primary); transform: translateY(-6px); box-shadow: var(--shadow); } .for-card:hover::before { transform: scaleX(1); } .for-card .fc-icon { width: 72px; height: 72px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 20px; transition: var(--transition); } .for-card:hover .fc-icon { transform: scale(1.1) rotate(5deg); } /* LTR: positive rotation */ .for-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--dark); margin-bottom: 12px; } .for-card p { font-size: .88rem; color: var(--mid); line-height: 1.7; margin-bottom: 20px; } .for-card .fc-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .fc-tag { background: var(--primary-light); color: var(--primary); padding: 4px 12px; border-radius: 100px; font-size: .72rem; font-weight: 700; } /* Color variants */ .for-card.blue .fc-icon { background: #EEF3FF; color: var(--primary); } .for-card.purple .fc-icon { background: #F5F3FF; color: #7C3AED; } .for-card.amber .fc-icon { background: #FFFBEB; color: var(--accent-dark); } .for-card.green .fc-icon { background: #ECFDF5; color: var(--success); } .for-card.red .fc-icon { background: #FEF2F2; color: var(--danger); } .for-card.teal .fc-icon { background: #F0FDFA; color: #0D9488; } .for-card.purple:hover { border-color: #7C3AED; } .for-card.purple::before{ background: linear-gradient(90deg,#7C3AED,#EC4899); } .for-card.amber:hover { border-color: var(--accent-dark); } .for-card.amber::before { background: linear-gradient(90deg,var(--accent),#F97316); } .for-card.green:hover { border-color: var(--success); } .for-card.green::before { background: linear-gradient(90deg,var(--success),#06B6D4); } .for-card.teal:hover { border-color: #0D9488; } .for-card.teal::before { background: linear-gradient(90deg,#0D9488,#0369A1); } /* ============================================================ SECTION: GRID LEARNING SYSTEM ============================================================ */ .grid-section { background: linear-gradient(135deg,#F8FAFC,#EEF3FF); padding: 96px 0; color: var(--dark); } .grid-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 64px; } .hours-split { background: var(--pure-white); border-radius: var(--radius-lg); padding: 32px; } .hours-split h4 { font-size: 1rem; font-weight: 800; color: var(--dark); margin-bottom: 20px; } .hours-bar { display: flex; border-radius: 8px; overflow: hidden; height: 32px; margin-bottom: 16px; } .hours-direct { background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 700; width: 20%; } .hours-indirect{ background: #7C3AED; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 700; width: 80%; } .hours-legend { display: flex; gap: 16px; flex-wrap: wrap; } .hours-legend li{ display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mid); font-weight: 600; } .hours-legend .dot { width: 10px; height: 10px; border-radius: 50%; } .hours-legend .dot.direct { background: var(--primary); } .hours-legend .dot.indirect { background: #7C3AED; } /* Depth levels */ .depth-levels h4 { font-size: 1rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; } .depth-list { display: flex; flex-direction: column; gap: 10px; } .depth-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; background: var(--pure-white); border: 1px solid var(--border); } .depth-badge { min-width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; } .depth-item.d1 .depth-badge { background: #EEF3FF; color: var(--primary); } .depth-item.d2 .depth-badge { background: #F5F3FF; color: #7C3AED; } .depth-item.d3 .depth-badge { background: #FFFBEB; color: var(--accent-dark); } .depth-item.d4 .depth-badge { background: #FEF2F2; color: var(--danger); } .depth-info strong { font-size: .88rem; color: var(--dark); } .depth-info span { font-size: .78rem; color: var(--mid); margin-right: 6px; } /* RTL */ /* Grid matrix */ .grid-matrix-wrap { overflow-x: auto; } .grid-matrix { width: 100%; border-collapse: collapse; min-width: 560px; } .grid-matrix th, .grid-matrix td { padding: 14px 16px; text-align: center; font-size: .85rem; border: 1px solid var(--border); } .grid-matrix thead th { background: var(--card-bg); color: var(--white); font-weight: 700; } .grid-matrix tbody tr:hover td { background: rgba(41,121,255,.04); } .grid-cell { cursor: pointer; border-radius: 8px; transition: var(--transition); font-weight: 700; color: var(--primary); } .grid-cell:hover, .grid-cell.active { background: var(--primary); color: #fff; } .grid-cell.locked { color: var(--mid); cursor: not-allowed; } .grid-cell .cell-badge { display: inline-block; font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 100px; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; } .cell-badge.free { background: #d1fae5; color: #065f46; } .cell-badge.best { background: var(--primary-light); color: var(--primary); } .cell-badge.premium { background: #fef3c7; color: #92400e; } .cell-badge.best-selling{ background: #ede9fe; color: #5b21b6; } /* Product cards */ .product-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; } .product-card { background: var(--pure-white); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: var(--transition); position: relative; overflow: hidden; display: none; /* shown by JS when cell selected */ } .product-card.visible { display: flex; flex-direction: column; gap: 12px; } .product-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow); } .pc-level-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 100px; } .product-card h4 { font-size: 1rem; font-weight: 800; color: var(--dark); line-height: 1.3; } .product-card p { font-size: .84rem; color: var(--mid); line-height: 1.65; flex: 1; } .product-card .pc-features { list-style: none; display: flex; flex-direction: column; gap: 7px; } .product-card .pc-features li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--dark); } .product-card .pc-features li i { color: var(--success); font-size: .85rem; flex-shrink: 0; } .product-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .product-price { font-size: 1.4rem; font-weight: 900; color: var(--primary); } .product-price-orig { font-size: .9rem; color: var(--mid); text-decoration: line-through; } .product-price-save { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 100px; background: #d1fae5; color: #065f46; } /* ============================================================ SECTION: TOOLS ============================================================ */ .tools-section { background: var(--dark); padding: 96px 0; } .tools-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 0; } .tool-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 20px; transition: var(--transition); position: relative; overflow: hidden; text-align: right; /* RTL */ } .tool-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(41,121,255,.04),transparent); opacity: 0; transition: var(--transition); } .tool-card:hover { border-color: rgba(41,121,255,.4); transform: translateY(-4px); box-shadow: var(--shadow-glow); } .tool-card:hover::after { opacity: 1; } .tool-icon { width: 52px; height: 52px; border-radius: var(--radius); background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--primary); margin-bottom: 16px; transition: var(--transition); position: relative; z-index: 1; } .tool-card:hover .tool-icon { background: var(--primary); color: #fff; transform: scale(1.1); } .tool-card h4 { font-size: .95rem; font-weight: 800; color: var(--white); margin-bottom: 8px; position: relative; z-index: 1; } .tool-card p { font-size: .8rem; color: var(--mid); line-height: 1.65; position: relative; z-index: 1; } .tool-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; z-index: 1; } .tool-tag { font-size: .65rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; border: 1px solid var(--border); color: var(--mid); text-transform: uppercase; letter-spacing: .05em; } .tool-counter-tag { position: absolute; top: 16px; left: 16px; /* RTL: top-left */ font-family: var(--font-mono); font-size: .68rem; color: var(--electric); background: rgba(0,229,255,.08); padding: 3px 8px; border-radius: 6px; font-weight: 700; } /* ============================================================ SECTION: CASE STUDIES ============================================================ */ .cases-section { background: var(--mid-dark); padding: 64px 0; } .cases-banner { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 0; } .case-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; transition: var(--transition); } .case-item:hover { border-color: rgba(41,121,255,.3); transform: translateY(-3px); box-shadow: var(--shadow); } .case-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.05); } .case-name { font-size: .95rem; font-weight: 800; color: var(--white); } .case-sector { font-size: .78rem; color: var(--mid); } .case-result { font-size: 1.1rem; font-weight: 900; color: var(--success); letter-spacing: -.02em; } .case-desc { font-size: .8rem; color: var(--light); line-height: 1.6; } /* ============================================================ SECTION: EXPERT ENDORSEMENTS ============================================================ */ .experts-section { background: var(--dark); padding: 96px 0; } .accreditation-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; } .accred-badge { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 22px; font-size: .8rem; font-weight: 700; color: var(--light); display: flex; align-items: center; gap: 10px; } .accred-badge i { color: var(--accent); font-size: 1.1rem; } .experts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .expert-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px 28px; transition: var(--transition); position: relative; display: flex; flex-direction: column; gap: 20px; } .expert-card:hover { border-color: rgba(41,121,255,.3); box-shadow: var(--shadow-glow); } .expert-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-light); } .expert-name { font-size: 1rem; font-weight: 800; color: var(--white); } .expert-title { font-size: .78rem; color: var(--primary); font-weight: 600; } .expert-org { font-size: .75rem; color: var(--mid); } .expert-quote { font-size: .88rem; color: var(--light); line-height: 1.75; font-style: italic; border-right: 3px solid var(--primary); /* RTL: right border quote */ padding-right: 16px; } .expert-cta-box { background: linear-gradient(135deg,var(--primary-light),rgba(124,58,237,.08)); border: 1px solid rgba(41,121,255,.2); border-radius: var(--radius-xl); padding: 40px; text-align: center; margin-top: 48px; } .expert-cta-box h3 { font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: 8px; } .expert-cta-box p { font-size: .9rem; color: var(--light); margin-bottom: 24px; } /* ============================================================ SECTION: TESTIMONIALS ============================================================ */ .testimonials-section { background: var(--mid-dark); padding: 96px 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .testimonial-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px 28px; transition: var(--transition); display: flex; flex-direction: column; gap: 16px; } .testimonial-card:hover { border-color: rgba(41,121,255,.3); transform: translateY(-4px); box-shadow: var(--shadow); } .stars { display: flex; gap: 3px; color: var(--accent); font-size: .9rem; } .testimonial-quote { font-size: .9rem; color: var(--light); line-height: 1.75; font-style: italic; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .t-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .t-name { font-size: .9rem; font-weight: 700; color: var(--white); } .t-role { font-size: .75rem; color: var(--mid); } /* ============================================================ SECTION: PRICING ============================================================ */ .pricing-section { background: var(--dark); padding: 96px 0; } /* Toggle */ .pricing-toggle { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 48px; } .prc-label { font-size: .9rem; color: var(--mid); font-weight: 600; } .prc-label.active { color: var(--white); } .prc-switch { position: relative; width: 52px; height: 28px; background: var(--primary); border-radius: 100px; cursor: pointer; transition: var(--transition); } .prc-knob { position: absolute; top: 3px; right: 3px; /* RTL: start from right */ width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: var(--transition); } .prc-switch.annual .prc-knob { right: auto; left: 3px; } .prc-save-pill { background: #d1fae5; color: #065f46; padding: 3px 10px; border-radius: 100px; font-size: .72rem; font-weight: 800; } /* Cards grid */ .pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; align-items: start; } .pricing-card { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-xl); padding: 32px 24px; transition: var(--transition); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; } .pricing-card.featured { border-color: var(--primary); background: linear-gradient(145deg, var(--card-bg), rgba(41,121,255,.06)); box-shadow: 0 0 60px rgba(41,121,255,.15), var(--shadow-lg); transform: scale(1.04); } .pricing-card:hover:not(.featured) { border-color: rgba(41,121,255,.3); transform: translateY(-4px); } .prc-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 5px 20px; border-radius: 0 0 var(--radius) var(--radius); font-size: .72rem; font-weight: 800; white-space: nowrap; text-transform: uppercase; letter-spacing: .08em; } .prc-icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--primary); } .prc-name { font-size: 1.1rem; font-weight: 800; color: var(--white); } .prc-tagline { font-size: .82rem; color: var(--mid); } .prc-price-block { display: flex; align-items: baseline; gap: 6px; } .prc-currency{ font-size: 1rem; color: var(--white); font-weight: 700; } .prc-amount { font-size: 2.2rem; font-weight: 900; color: var(--white); line-height: 1; letter-spacing: -.04em; } .prc-period { font-size: .78rem; color: var(--mid); } .prc-original{ font-size: .85rem; color: var(--mid); text-decoration: line-through; } .prc-save { font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 100px; background: #d1fae5; color: #065f46; } .prc-features{ list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; } .prc-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--light); } .prc-features li i { color: var(--success); flex-shrink: 0; margin-top: 2px; } .prc-features li.prc-no i { color: var(--mid); } .prc-features li.prc-no span { text-decoration: line-through; color: var(--mid); } .prc-cta { padding: 14px; border-radius: var(--radius); text-align: center; font-weight: 800; font-size: .95rem; transition: var(--transition); } .prc-cta.primary { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; box-shadow: 0 4px 16px var(--glow-blue); } .prc-cta.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow-blue); } .prc-cta.outline { border: 2px solid var(--border); color: var(--light); background: transparent; } .prc-cta.outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* Trust row */ .prc-trust-row { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); } .prc-trust-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--mid); } .prc-trust-item i { color: var(--success); } /* Money-back block */ .prc-money-back { background: linear-gradient(135deg,rgba(0,230,118,.06),rgba(41,121,255,.04)); border: 1px solid rgba(0,230,118,.15); border-radius: var(--radius-xl); padding: 32px; display: flex; align-items: center; gap: 24px; margin-top: 40px; text-align: right; /* RTL */ } .prc-mb-icon { font-size: 2.5rem; flex-shrink: 0; } .prc-mb-title { font-size: 1rem; font-weight: 800; color: var(--white); margin-bottom: 6px; } .prc-mb-text { font-size: .84rem; color: var(--light); line-height: 1.65; } .prc-mb-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .prc-mb-badges .badge-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mid); font-weight: 600; } .prc-mb-badges i { color: var(--electric); } /* Compare table */ .prc-compare-wrap { margin-top: 64px; overflow-x: auto; } .prc-compare-title { font-size: 1.2rem; font-weight: 800; color: var(--white); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .prc-compare-title i { color: var(--electric); margin-left: 10px; } /* RTL */ .prc-compare-table { width: 100%; border-collapse: collapse; min-width: 680px; } .prc-compare-table th, .prc-compare-table td { padding: 14px 16px; font-size: .85rem; border: 1px solid var(--border); text-align: center; } .prc-compare-table th { background: var(--mid-dark); color: var(--white); font-weight: 700; } .prc-compare-table td:first-child { text-align: right; color: var(--light); font-weight: 600; } /* RTL */ .prc-compare-table tr:hover td { background: rgba(41,121,255,.04); } .prc-check { color: var(--success); } .prc-x { color: var(--mid); } .prc-group-row td { background: var(--card-bg); color: var(--mid); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .prc-group-row td i { color: var(--electric); margin-left: 7px; opacity: .7; } /* RTL */ /* A/B ROI row */ .ab-roi-row { display: flex; direction: ltr; gap: 24px; flex-wrap: wrap; margin-top: 32px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card-bg); } .ab-roi-item { flex: 1; min-width: 120px; text-align: center; } .ab-roi-val { font-size: 1.5rem; font-weight: 900; color: var(--primary); } .ab-roi-lbl { font-size: .75rem; color: var(--mid); margin-top: 4px; } /* ============================================================ SECTION: AFFILIATE ============================================================ */ .affiliate-section { background: var(--mid-dark); padding: 96px 0; } .affiliate-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-bottom: 64px; } .aff-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: var(--transition); } .aff-stat-card:hover { border-color: rgba(41,121,255,.3); transform: translateY(-3px); } .aff-stat-val { font-size: 2rem; font-weight: 900; color: var(--primary); line-height: 1; } .aff-stat-lbl { font-size: .8rem; color: var(--mid); margin-top: 6px; } /* Commission tiers */ .commission-tiers { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 48px; } .tier-card { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: var(--transition); position: relative; } .tier-card.highlight { border-color: var(--primary); background: linear-gradient(145deg,var(--card-bg),rgba(41,121,255,.06)); } .tier-icon { font-size: 2rem; margin-bottom: 12px; } .tier-name { font-size: .88rem; font-weight: 800; color: var(--white); margin-bottom: 8px; } .tier-rate { font-size: 2rem; font-weight: 900; color: var(--primary); line-height: 1; } .tier-bonus{ font-size: .75rem; color: var(--success); font-weight: 700; margin-top: 4px; } .tier-req { font-size: .75rem; color: var(--mid); margin-top: 6px; } /* Earning examples */ .earning-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; } .earn-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; } .earn-card h4 { font-size: .95rem; font-weight: 800; color: var(--white); } .earn-row { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--light); } .earn-row .earn-val { font-weight: 700; color: var(--primary); } .earn-total { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; font-size: 1rem; font-weight: 900; color: var(--success); } /* Affiliate CTA */ .affiliate-cta { background: linear-gradient(135deg,rgba(41,121,255,.08),rgba(124,58,237,.06)); border: 1px solid rgba(41,121,255,.2); border-radius: var(--radius-xl); padding: 48px; text-align: center; } .affiliate-cta h3 { font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 12px; } .affiliate-cta p { font-size: .95rem; color: var(--light); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; } .aff-steps { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; } .aff-step { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--light); } .aff-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; } /* ============================================================ SECTION: FAQ ============================================================ */ .faq-section { background: var(--dark); padding: 96px 0; } .faq-search-wrap { max-width: 480px; margin: 0 auto 40px; position: relative; } .faq-search { width: 100%; padding: 14px 48px 14px 20px; /* RTL: icon on right */ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--white); font-size: .9rem; outline: none; transition: var(--transition); font-family: inherit; } .faq-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-blue-sm); } .faq-search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); /* RTL */ color: var(--mid); pointer-events: none; } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .faq-item.open { border-color: rgba(41,121,255,.3); } .faq-question { display: flex; align-items: center; justify-content: space-between; /* RTL */ padding: 20px 24px; cursor: pointer; gap: 16px; } .faq-question-text { font-size: .95rem; font-weight: 700; color: var(--white); flex: 1; text-align: right; } /* RTL */ .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; color: var(--mid); font-size: .8rem; flex-shrink: 0; transition: var(--transition); } .faq-item.open .faq-icon { background: var(--primary); color: #fff; transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; } .faq-answer-inner { padding: 0 24px 20px; font-size: .88rem; color: var(--light); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 16px; } .faq-item.open .faq-answer { max-height: 400px; } /* ============================================================ SECTION: NEWSLETTER / CTA ============================================================ */ .newsletter-section { background: linear-gradient(135deg, #0d1117, #0a1628, #0d1117); padding: 96px 0; position: relative; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); /* LTR centered */ width: 800px; height: 400px; background: radial-gradient(ellipse,rgba(41,121,255,.12),transparent 70%); pointer-events: none; } .newsletter-inner { text-align: center; position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .newsletter-inner h2 { font-size: clamp(1.8rem,4vw,2.4rem); font-weight: 900; color: var(--white); margin-bottom: 16px; } .newsletter-inner p { font-size: 1.05rem; color: var(--light); margin-bottom: 32px; line-height: 1.7; } .newsletter-gifts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; } .gift-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; font-size: .82rem; color: var(--light); } .gift-item i { color: var(--accent); } .newsletter-form { display: flex; gap: 12px; max-width: 500px; margin: 0 auto; } .newsletter-form input[type="email"] { flex: 1; padding: 14px 18px; background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: var(--radius); color: var(--white); font-size: .9rem; outline: none; transition: var(--transition); font-family: inherit; } .newsletter-form input:focus { border-color: var(--primary); background: rgba(41,121,255,.06); } .newsletter-form input::placeholder { color: var(--mid); } .newsletter-form .newsletter-btn { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; padding: 14px 24px; border-radius: var(--radius); font-weight: 700; font-size: .9rem; white-space: nowrap; transition: var(--transition); border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px var(--glow-blue); } .newsletter-form .newsletter-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow-blue); } .newsletter-privacy { font-size: .75rem; color: var(--mid); margin-top: 14px; } .newsletter-privacy a { color: var(--primary); text-decoration: underline; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--darker); border-top: 1px solid var(--border); padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; /* RTL: brand on right */ gap: 48px; margin-bottom: 48px; } .footer-brand .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer-brand p { font-size: .85rem; color: var(--mid); line-height: 1.75; max-width: 300px; } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--mid); font-size: .9rem; transition: var(--transition); } .footer-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .footer-col h4 { font-size: .88rem; font-weight: 800; color: var(--white); margin-bottom: 16px; letter-spacing: .04em; text-transform: uppercase; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col ul li a { font-size: .84rem; color: var(--mid); transition: color .2s; display: flex; align-items: center; gap: 6px; } .footer-col ul li a:hover { color: var(--primary); } .footer-divider { height: 1px; background: var(--border); margin: 0 0 32px; } .footer-trust-bar { background: var(--mid-dark); border-top: 1px solid var(--border); padding: 20px 24px; margin: 0 -24px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .ftrust-item { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--mid); } .ftrust-item i { color: var(--success); } .footer-bottom { border-top: 1px solid var(--border); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; /* RTL */ flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: .82rem; color: var(--mid); } .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; } .footer-legal a { font-size: .82rem; color: var(--mid); transition: color .2s; } .footer-legal a:hover { color: var(--primary); } /* ============================================================ BACK-TO-TOP BUTTON ============================================================ */ #backToTop { position: fixed; bottom: 28px; left: 28px; /* RTL: left side */ z-index: 800; width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; box-shadow: 0 4px 16px var(--glow-blue); opacity: 0; transform: translateY(20px); pointer-events: none; transition: var(--transition); } #backToTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; } #backToTop:hover { background: var(--primary-dark); transform: translateY(-2px); } /* ============================================================ TOAST NOTIFICATIONS ============================================================ */ .cx-toast { position: fixed; bottom: 28px; right: 28px; /* RTL: bottom-right */ z-index: 9000; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 20px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); font-size: .88rem; color: var(--white); transform: translateY(80px); opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(0.4,0,0.2,1); max-width: 360px; } .cx-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .cx-toast.success { border-color: rgba(0,230,118,.3); } .cx-toast.success i { color: var(--success); font-size: 1.1rem; } .cx-toast.error { border-color: rgba(255,82,82,.3); } .cx-toast.error i { color: var(--danger); font-size: 1.1rem; } /* ============================================================ COOKIE CONSENT BANNER ============================================================ */ #cx-consent-banner { position: fixed; bottom: 24px; left: 24px; right: auto; /* RTL: bottom-left */ z-index: 8999; max-width: 400px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 14px; } #cx-consent-banner.show { display: flex; } .consent-title { font-size: .95rem; font-weight: 800; color: var(--white); display: flex; align-items: center; gap: 8px; } .consent-title i { color: var(--primary); } .consent-text { font-size: .82rem; color: var(--mid); line-height: 1.65; } .consent-text a{ color: var(--primary); text-decoration: underline; } .consent-btns { display: flex; gap: 10px; } .consent-btns .accept-btn { flex: 1; padding: 10px; border-radius: var(--radius); text-align: center; background: var(--primary); color: #fff; font-weight: 700; font-size: .84rem; cursor: pointer; transition: var(--transition); } .consent-btns .accept-btn:hover { background: var(--primary-dark); } .consent-btns .decline-btn { flex: 1; padding: 10px; border-radius: var(--radius); text-align: center; border: 1px solid var(--border); color: var(--mid); font-size: .84rem; cursor: pointer; transition: var(--transition); } .consent-btns .decline-btn:hover { border-color: var(--primary); color: var(--primary); } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .6s ease, transform .6s ease; } .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .6s ease, transform .6s ease; } .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; } .stagger-1 { transition-delay: .1s; } .stagger-2 { transition-delay: .2s; } .stagger-3 { transition-delay: .3s; } .stagger-4 { transition-delay: .4s; } .stagger-5 { transition-delay: .5s; } /* ============================================================ CONSTELLATION BACKGROUND (subtle floating dots) ============================================================ */ .constellation-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .constellation-bg .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.4); animation: twinkle 3s ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: .2; transform: scale(1); } 50% { opacity: .8; transform: scale(1.5); } } /* ============================================================ TYPOGRAPHY SCALE (Inter / IBM Plex Sans) ============================================================ */ h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .mono { font-family: var(--font-mono); } /* ============================================================ RESPONSIVE — TABLET (≤ 1024px) ============================================================ */ @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } .tools-grid { grid-template-columns: repeat(3,1fr); } .cases-banner { grid-template-columns: repeat(2,1fr); } .for-grid { grid-template-columns: repeat(2,1fr); } .commission-tiers { grid-template-columns: repeat(2,1fr); } .affiliate-stats { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .product-cards { grid-template-columns: repeat(2,1fr); } .pricing-card.featured { transform: none; } .hero-grid { gap: 40px; } } /* ============================================================ RESPONSIVE — MOBILE (≤ 768px) ============================================================ */ @media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { display: none; } .hero-content { text-align: center; } .hero-ctas { justify-content: center; } .hero-stats { justify-content: center; } .hero-stat-item { text-align: center; } .hero-badges { justify-content: center; } .hero .hero-desc { margin: 0 auto 32px; } .nav-links, .nav-actions .nav-cta, .nav-lang-btn { display: none; } .nav-hamburger { display: flex; } .for-grid { grid-template-columns: 1fr; } .grid-explainer { grid-template-columns: 1fr; } .experts-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .affiliate-stats { grid-template-columns: repeat(2,1fr); } .commission-tiers { grid-template-columns: repeat(2,1fr); } .earning-examples { grid-template-columns: 1fr; } .tools-grid { grid-template-columns: repeat(2,1fr); } .cases-banner { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } .prc-money-back { flex-direction: column; text-align: center; } .prc-mb-badges { justify-content: center; } .aff-steps { flex-direction: column; } .trust-bar-inner { justify-content: center; } .footer-bottom { justify-content: center; text-align: center; } #cx-consent-banner { bottom: 12px; right: 12px; left: 12px; max-width: 100%; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (≤ 480px) ============================================================ */ @media (max-width: 480px) { .tools-grid { grid-template-columns: 1fr; } .affiliate-stats { grid-template-columns: 1fr; } .commission-tiers { grid-template-columns: 1fr; } .hero h1 { font-size: 1.9rem; } .product-cards { grid-template-columns: 1fr; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; justify-content: center; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ DARK-THEME OVERRIDES (same as Arabic, already dark-first) ============================================================ */ /* Cards in dark sections */ .dark-section .for-card { background: var(--card-bg); border-color: var(--border); } .dark-section .for-card h3 { color: var(--white); } .dark-section .for-card p { color: var(--mid); } /* Onboarding quiz */ .quiz-wrap { background: var(--pure-white); border-radius: var(--radius-xl); padding: 32px; } .quiz-title { font-size: 1rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; } .quiz-options { display: flex; flex-direction: column; gap: 8px; } .quiz-option { padding: 12px 16px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; font-size: .88rem; color: var(--dark); font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 10px; text-align: right; /* RTL */ } .quiz-option:hover { border-color: var(--primary); background: var(--primary-light); } .quiz-option.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary); } /* Inline trust strip */ .trust-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--border); margin-top: 24px; } .trust-inline-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mid); font-weight: 600; } .trust-inline-item i { color: var(--success); } /* ============================================================ END OF LTR STYLESHEET ============================================================ */ /* ── T10b: Accessibility additions ── */ /* Skip-to-content link */ .skip-link { position: absolute; top: -100px; left: 16px; background: var(--primary, #5b7cf6); color: #fff; padding: 10px 18px; border-radius: 6px; font-weight: 700; z-index: 99999; transition: top 0.2s; text-decoration: none; font-size: 0.9rem; } .skip-link:focus, .skip-link:focus-visible { top: 16px; } /* Enhanced focus-visible ring for all interactive elements */ *:focus-visible { outline: 3px solid var(--primary, #5b7cf6); outline-offset: 3px; border-radius: 4px; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primary, #5b7cf6); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(91,124,246,0.2); } /* High-contrast mode support */ @media (forced-colors: active) { *:focus-visible { outline: 3px solid ButtonText; } } /* ── T10c: Mobile sticky bar fix ── */ @media (max-width: 480px) { .sticky-offer-bar { padding: 8px 12px; gap: 8px; font-size: .78rem; } .sticky-offer-bar .sob-text { font-size: .78rem; } .sticky-offer-bar .sob-countdown { font-size: .85rem; } .sticky-offer-bar .sob-cta { font-size: .78rem; padding: 6px 12px; } } /* ── Performance: font-display:swap declaration (mirrors Google Fonts setting) ── */ @font-face { font-family: 'Noto Sans Arabic'; src: local('Noto Sans Arabic'), url('https://fonts.gstatic.com/s/notosansarabic/v18/nwpxtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlhQ5l3sQWIHPqzCfyGyvu3CBFQLaig.woff2') format('woff2'); font-display: swap; font-weight: 100 900; font-style: normal; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; } /* ============================================================ RTL-ONLY OVERRIDES Language: Arabic (ar) · Direction: rtl ============================================================ */ /* ── Typography ── */ body, h1, h2, h3, h4, h5, h6, p, li, td, th, label, input, textarea, button { font-family: 'Noto Sans Arabic', 'Cairo', system-ui, sans-serif; letter-spacing: 0; /* Arabic has no letter-spacing */ } /* ── Links & nav direction ── */ .nav-links { flex-direction: row-reverse; } .mobile-nav-links { text-align: right; } /* ── Hero grid: image appears on LEFT in RTL ── */ @media (min-width: 768px) { .hero-grid { direction: rtl; } .hero-content { order: 2; } .hero-visual { order: 1; } } /* ── Badges row ── */ .hero-badges { justify-content: flex-end; } @media (max-width: 768px) { .hero-badges { justify-content: center; } } /* ── CTA buttons ── */ .hero-ctas { justify-content: flex-end; } @media (max-width: 768px) { .hero-ctas { justify-content: center; } } /* ── Icon spacing flips ── */ .btn i:first-child { margin-right: 0; margin-left: 8px; } .nav-link i { margin-right: 0; margin-left: 6px; } .section-label i { margin-right: 0; margin-left: 6px; } .faq-question i { margin-right: 0; margin-left: 8px; } .tool-stat i { margin-right: 0; margin-left: 4px; } .footer-col ul li a i { margin-right: 0; margin-left: 6px; } /* ── Affiliate card alignment ── */ .affiliate-tier { text-align: right; } .aff-badge { margin-right: 0; margin-left: 8px; } /* ── Testimonial author ── */ .testimonial-author { flex-direction: row-reverse; text-align: right; } /* ── Newsletter form ── */ .nl-form { direction: rtl; } .nl-input { text-align: right; } /* ── Cookie consent ── */ .consent-btns { flex-direction: row-reverse; } /* ── FAQ chevron mirrors ── */ .faq-question::after { transform: rotate(180deg); } .faq-item.open .faq-question::after { transform: rotate(270deg); } /* ── Pricing toggle ── */ .prc-toggle-wrap { flex-direction: row-reverse; } .prc-save-badge { margin-right: 0; margin-left: 8px; } /* ── Breadcrumb / progress ── */ .progress-bar { transform-origin: right; } /* ── Responsive RTL adjustments ── */ @media (max-width: 768px) { .hero-content { text-align: center; } .hero-stat-item { text-align: center; } .t-info { text-align: center; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; text-align: center; } .footer-brand p { max-width: 100%; } .footer-social { justify-content: center; } } @media (max-width: 480px) { .hero-content { text-align: center; } .hero-badges { justify-content: center; } .hero-ctas { flex-direction: column; align-items: center; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: 1; } }