/** * Homepage styles — loaded in via cms_index_index.xml. * Moved out of CMS HTML so the first paint is not an unstyled FOUC. */ .cms-home.cms-index-index .page-title-wrapper { display: none; } .block.widget.block-new-products.grid .block-title { display: none; } .column.main { padding-bottom: 0px !important; } /* ============================================= AALOGICS HOMEPAGE - COMPLETE CSS Font Awesome Icons - No Emoji SEO Friendly - Magento CMS Compatible ============================================= */ /* Homepage scoped baselines (avoid global * reset fighting Magento chrome) */ body.cms-index-index { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Cart / session flash messages must not sit above the homepage hero banner */ body.cms-index-index .page.messages, body.cms-index-index .page.messages .messages, body.cms-index-index [data-placeholder="messages"] { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; } .cms-index-index .page-wrapper, .cms-index-index .page-main, .cms-index-index .columns, .cms-index-index .column.main, .cms-index-index #maincontent { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .cms-index-index .column.main *, .cms-index-index .column.main *::before, .cms-index-index .column.main *::after { box-sizing: border-box; } .cms-index-index .column.main img { max-width: 100%; height: auto; display: block; } .cms-index-index .column.main a { text-decoration: none; color: inherit; } ul, ol { list-style: none } button { cursor: pointer; font-family: 'Inter', sans-serif; border: none; outline: none; background: none } input { font-family: 'Inter', sans-serif } :root { --or: #FF5722; --or2: #E64A19; --or-light: #FFF3F0; --or-mid: #FFCCBC; --dark: #0F1724; --dark2: #1A2438; --dark3: #253350; --g1: #F7F9FC; --g2: #F0F3F8; --g3: #E8ECF0; --g4: #D0D8E4; --txt: #1A1A2E; --txt2: #4A5568; --txt3: #8493A8; --txt4: #A0AABB; --white: #fff; --green: #2E7D32; --gl: #E8F5E9; --gc: #C8E6C9; --blue: #1565C0; --bl: #E3F2FD; --teal: #00838F; --tl: #E0F7FA; --pur: #6A1B9A; --pl: #F3E5F5; --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --r24: 24px; --sh1: 0 2px 8px rgba(0, 0, 0, .06); --sh2: 0 4px 20px rgba(0, 0, 0, .09); --sh3: 0 8px 40px rgba(0, 0, 0, .13); --tr: all .22s ease; --mw: 1280px; } .wrap { width: 100%; max-width: var(--mw); margin: 0 auto; padding: 0 40px } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: var(--r12); font-size: 14px; font-weight: 600; transition: var(--tr); white-space: nowrap; border: 2px solid transparent; line-height: 1 } .btn-or { background: var(--or); color: #fff; border-color: var(--or) } .btn-or:hover { background: var(--or2); border-color: var(--or2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 87, 34, .32) } .btn-outline-w { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55) } .btn-outline-w:hover { background: rgba(255, 255, 255, .1); border-color: #fff } .btn-dark { background: var(--dark); color: #fff !important; border-color: var(--dark) } .btn-dark:hover { background: #1a2a40; transform: translateY(-1px) } .btn-outline-d { background: transparent; color: var(--txt); border-color: var(--g3) } .btn-outline-d:hover { border-color: var(--or); color: var(--or) } .btn-sm { padding: 8px 16px; font-size: 13px; border-radius: var(--r8) } .btn-lg { padding: 13px 28px; font-size: 15px } .stars { color: #FFB300; letter-spacing: 1px; font-size: 13px } .ptag { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; border: 1px solid } .ptag-m2 { background: #FFF3E0; color: #E65100; border-color: #FFCC80 } .ptag-woo { background: #F3E5F5; color: #6A1B9A; border-color: #CE93D8 } .ptag-od { background: #EDE7F6; color: #4527A0; border-color: #B39DDB } .ptag-sh { background: #E8F5E9; color: #1B5E20; border-color: #A5D6A7 } .sec-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--txt); margin-bottom: 10px } .sec-sub { font-size: 15px; color: var(--txt2); line-height: 1.7; max-width: 520px } /* ============================================ TOPBAR ============================================ */ .aa-topbar { background: var(--or); padding: 9px 0; text-align: center; font-size: 13px; font-weight: 500; color: #fff; position: relative; overflow: hidden } .aa-topbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%); animation: tb-shine 3s linear infinite } @keyframes tb-shine { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .aa-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600 } .aa-topbar a:hover { text-decoration: none } .aa-topbar i { margin-right: 6px } /* ============================================ HERO ============================================ */ .aa-hero { background: linear-gradient(140deg, #0F1724 0%, #1A2438 55%, #0D1931 100%); padding: 72px 0 64px; position: relative; overflow: hidden } .aa-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none } .aa-hero::after { content: ''; position: absolute; top: -120px; right: -120px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(255, 87, 34, .1) 0%, transparent 65%); pointer-events: none } .aa-hero-inner { position: relative; z-index: 1; text-align: center } .aa-hero-partner { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 100px; padding: 6px 16px 6px 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .8); margin-bottom: 26px } .aa-hero-partner-icon { width: 28px; height: 28px; border-radius: 6px; background: #FF0000; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .aa-hero-partner-icon svg { display: block } .aa-hero h1 { font-size: clamp(30px, 4.8vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; margin-bottom: 16px } .aa-hero-sub { font-size: clamp(14px, 1.6vw, 17px); color: rgba(255, 255, 255, .6); line-height: 1.7; font-weight: 400; max-width: 580px; margin: 0 auto 32px } .aa-hero-sub strong { color: #FF8A65; font-weight: 600 } .aa-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 52px; flex-wrap: wrap } .aa-hero-stats { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r16); padding: 22px 0; flex-wrap: wrap; max-width: 760px; margin: 0 auto } .aa-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 36px } .aa-stat-num { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em } .aa-stat-label { font-size: 12px; color: rgba(255, 255, 255, .45); white-space: nowrap } .aa-stat-div { width: 1px; height: 42px; background: rgba(255, 255, 255, .14); flex-shrink: 0 } /* ============================================ PLATFORM + PRODUCTS ============================================ */ .aa-platform { padding: 80px 0; background: #fff } .aa-plat-tabs { display: flex; gap: 14px; margin: 36px 0 44px; flex-wrap: wrap } .aa-plat-tab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 24px; min-width: 138px; background: #fff; border: 2px solid var(--g3); border-radius: var(--r16); cursor: pointer; transition: var(--tr) } .aa-plat-tab:hover { border-color: var(--or); background: var(--or-light) } .aa-plat-tab.active { border-color: var(--or); background: var(--or-light); box-shadow: 0 4px 18px rgba(255, 87, 34, .13) } .aa-plat-icon { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff } .pi-m2 { background: linear-gradient(135deg, #F46F25, #C0390B) } .pi-od { background: linear-gradient(135deg, #714B67, #A44A7C) } .pi-woo { background: linear-gradient(135deg, #7F54B3, #B07AE8) } .pi-sh { background: linear-gradient(135deg, #5E8E3E, #96BF48) } .aa-plat-icon i { font-size: 22px } .aa-plat-name { font-size: 13px; font-weight: 600; color: var(--txt) } .aa-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px } /* .aa-prod-card{background:#fff;border:1.5px solid var(--g3);border-radius:var(--r16);overflow:hidden;transition:var(--tr);display:flex;flex-direction:column} .aa-prod-card:hover{transform:translateY(-4px);box-shadow:var(--sh3);border-color:var(--g4)} */ .aa-prod-img { height: 175px; overflow: hidden; background: var(--g1); position: relative; display: flex; align-items: center; justify-content: center } .aa-prod-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .4s ease } .aa-prod-card:hover .aa-prod-img img { transform: scale(1.05) } .aa-prod-img-icon { font-size: 52px; color: var(--g4); position: relative; z-index: 1 } .aa-prod-img-icon i { font-size: 52px } /* Colored placeholder backgrounds */ .ph-blue { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) } .ph-green { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) } .ph-orange { background: linear-gradient(135deg, #FFF3E0, #FFCC80) } .ph-purple { background: linear-gradient(135deg, #EDE7F6, #D1C4E9) } .ph-pink { background: linear-gradient(135deg, #F3E5F5, #E1BEE7) } .ph-indigo { background: linear-gradient(135deg, #E8EAF6, #C5CAE9) } .ph-teal { background: linear-gradient(135deg, #E0F7FA, #B2EBF2) } .ph-red { background: linear-gradient(135deg, #FFEBEE, #FFCDD2) } /* Icon colors on placeholders */ .ph-blue .aa-prod-img-icon i { color: #1565C0 } .ph-green .aa-prod-img-icon i { color: #2E7D32 } .ph-orange .aa-prod-img-icon i { color: #E65100 } .ph-purple .aa-prod-img-icon i { color: #4527A0 } .ph-pink .aa-prod-img-icon i { color: #6A1B9A } .ph-indigo .aa-prod-img-icon i { color: #283593 } .ph-teal .aa-prod-img-icon i { color: #00838F } .ph-red .aa-prod-img-icon i { color: #C62828 } .aa-prod-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; z-index: 2 } .badge-new { background: var(--or); color: #fff } .badge-hot { background: #E53935; color: #fff } .badge-sale { background: var(--green); color: #fff } .badge-zatca { background: #00838F; color: #fff } .aa-prod-body { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1 } .aa-prod-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--txt) } .aa-prod-title a { color: inherit; transition: color .2s } .aa-prod-title a:hover { color: var(--or) } .aa-prod-rating { display: flex; align-items: center; gap: 5px } .aa-prod-reviews { font-size: 12px; color: var(--txt3) } .aa-prod-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--g2) } .aa-prod-price { display: flex; flex-direction: column; gap: 1px } .aa-prod-price-old { font-size: 12px; color: var(--txt4); text-decoration: line-through; line-height: 1 } .aa-prod-price-now { font-size: 19px; font-weight: 700; color: var(--txt) } .aa-view-all { text-align: center; margin-top: 40px } /* ============================================ ZATCA COMPLIANCE (DARK) ============================================ */ .aa-zatca { background: linear-gradient(135deg, #0F1724 0%, #1A2438 60%, #0D1931 100%); padding: 80px 0; position: relative; overflow: hidden } .aa-zatca::before { content: ''; position: absolute; right: -80px; top: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255, 87, 34, .09), transparent 65%); pointer-events: none } .aa-zatca::after { content: ''; position: absolute; left: -80px; bottom: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(21, 101, 192, .08), transparent 65%); pointer-events: none } .aa-zatca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; position: relative; z-index: 1 } .aa-zatca-label { font-size: 11px; font-weight: 700; color: #FF8A65; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px } .aa-zatca-title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; margin-bottom: 18px } .aa-zatca-desc { font-size: 15px; color: rgba(255, 255, 255, .52); line-height: 1.75; margin-bottom: 32px } .aa-zatca-ctas { display: flex; gap: 13px; flex-wrap: wrap } .aa-zatca-card { background: #1A2438; border: 1.5px solid #253350; border-radius: var(--r20); padding: 30px; position: relative; overflow: hidden } .aa-zatca-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(0, 172, 193, .07), transparent 65%); pointer-events: none } .aa-zatca-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px } .aa-zatca-flag-box { width: 44px; height: 44px; background: #253350; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .aa-zatca-flag-box i { font-size: 20px; color: #4DD0E1 } .aa-zatca-card-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 3px } .aa-zatca-card-sub { font-size: 12px; color: #8FA3BF } .aa-zatca-feats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px } .aa-zatca-feat { display: flex; align-items: flex-start; gap: 12px; background: #141C2E; border: 1px solid #1E2D45; border-radius: 11px; padding: 13px 15px } .aa-zf-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .aa-zf-icon i { font-size: 13px } .zf-teal { background: rgba(0, 172, 193, .14) } .zf-teal i { color: #4DD0E1 } .zf-green { background: rgba(76, 175, 80, .12) } .zf-green i { color: #81C784 } .zf-orange { background: rgba(255, 87, 34, .12) } .zf-orange i { color: #FF8A65 } .aa-zatca-feat strong { display: block; font-size: 13px; font-weight: 600; color: #E2E8F4; margin-bottom: 3px } .aa-zatca-feat span { font-size: 12px; color: #8FA3BF; line-height: 1.4 } .aa-zatca-price-row { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #253350 } .aa-zatca-price-label { font-size: 11px; color: #8FA3BF; margin-bottom: 5px; font-weight: 500 } .aa-zatca-price { font-size: 28px; font-weight: 800; color: #fff; line-height: 1 } .aa-zatca-price sub { font-size: 13px; color: #8FA3BF; font-weight: 400; vertical-align: baseline } /* ============================================ POPULAR EXTENSIONS ============================================ */ .aa-popular { padding: 80px 0; background: var(--g1) } .aa-sec-center { text-align: center; margin-bottom: 36px } .aa-pop-tabs { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 44px; flex-wrap: wrap } .aa-pop-tab { padding: 8px 22px; border-radius: 100px; font-size: 14px; font-weight: 500; background: #fff; border: 1.5px solid var(--g3); color: var(--txt2); transition: var(--tr) } .aa-pop-tab:hover { border-color: var(--or); color: var(--or) } .aa-pop-tab.active { background: var(--or); border-color: var(--or); color: #fff } .aa-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px } .aa-pop-card { border-radius: var(--r16); overflow: hidden; transition: var(--tr) } /* .aa-pop-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--g4) } */ .aa-pop-img { height: 170px; overflow: hidden; background: var(--g2); display: flex; align-items: center; justify-content: center } .aa-pop-img i { font-size: 52px } .aa-pop-body { padding: 15px; display: flex; flex-direction: column; gap: 7px } .aa-pop-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--txt) } .aa-pop-title a { color: inherit } .aa-pop-title a:hover { color: var(--or) } .aa-pop-rating { display: flex; align-items: center; gap: 5px } .aa-pop-rev { font-size: 12px; color: var(--txt3) } .aa-pop-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--g2); margin-top: 4px } .aa-pop-price { font-size: 18px; font-weight: 700; color: var(--txt) } /* ============================================ MARQUEE ============================================ */ .aa-marquee { padding: 24px 0; background: #fff; border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3); overflow: hidden } .aa-marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: aa-scroll 22s linear infinite } .aa-marquee-track:hover { animation-play-state: paused } @keyframes aa-scroll { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } } .aa-logo-item { font-size: 17px; font-weight: 700; color: #888; white-space: nowrap; flex-shrink: 0; opacity: .45; font-family: 'Inter', sans-serif } /* ============================================ WHY AALOGICS ============================================ */ .aa-why { padding: 80px 0; background: #fff } .aa-why-grid { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start } .aa-why-intro-desc { font-size: 15px; color: var(--txt2); line-height: 1.75; margin-top: 16px } .aa-why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px } .aa-why-card { background: #fff; border: 1.5px solid var(--g3); border-radius: var(--r16); padding: 26px 22px; transition: var(--tr); position: relative; overflow: hidden } .aa-why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0; opacity: 0; transition: opacity .25s } .aa-why-card:hover { box-shadow: var(--sh2); border-color: var(--g4); transform: translateY(-3px) } .aa-why-card:hover::before { opacity: 1 } .aa-why-card:nth-child(1)::before { background: var(--or) } .aa-why-card:nth-child(2)::before { background: var(--blue) } .aa-why-card:nth-child(3)::before { background: var(--teal) } .aa-why-card:nth-child(4)::before { background: var(--green) } .aa-why-card:nth-child(5)::before { background: var(--pur) } .aa-why-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px } .aa-why-icon i { font-size: 22px } .wi-or { background: #FFF3E0 } .wi-or i { color: var(--or) } .wi-bl { background: #E3F2FD } .wi-bl i { color: var(--blue) } .wi-te { background: #E0F7FA } .wi-te i { color: var(--teal) } .wi-gr { background: #E8F5E9 } .wi-gr i { color: var(--green) } .wi-pu { background: #F3E5F5 } .wi-pu i { color: var(--pur) } .aa-why-card-title { font-size: 14.5px; font-weight: 700; color: var(--txt); margin-bottom: 9px; line-height: 1.35 } .aa-why-card-desc { font-size: 13px; color: var(--txt2); line-height: 1.65 } /* ============================================ MOBILE APP ============================================ */ .aa-mobile { padding: 80px 0; background: var(--g1) } .aa-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center } .aa-phone-visual { display: flex; justify-content: center; align-items: center; position: relative } .aa-phone-wrap { width: 230px; height: 470px; background: var(--dark); border-radius: 36px; border: 2.5px solid #2D3A50; position: relative; overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, .25) } .aa-phone-notch { width: 72px; height: 19px; background: #1A2438; border-radius: 0 0 13px 13px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2 } .aa-phone-screen { position: absolute; inset: 19px 8px 8px; background: var(--g1); border-radius: 27px; overflow: hidden } .aa-ps-header { background: var(--or); padding: 11px 12px; display: flex; align-items: center; gap: 8px } .aa-ps-logo { font-size: 11px; font-weight: 700; color: #fff } .aa-ps-body { padding: 10px } .aa-ps-banner { height: 68px; background: linear-gradient(135deg, #1565C0, #42A5F5); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px } .aa-ps-banner i { font-size: 28px; color: #fff } .aa-ps-label { font-size: 7.5px; font-weight: 700; color: var(--txt); margin-bottom: 8px } .aa-ps-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px } .aa-ps-prod { background: #fff; border-radius: 8px; padding: 8px; border: 1px solid var(--g3) } .aa-ps-prod i { font-size: 14px; color: var(--or); margin-bottom: 3px; display: block } .aa-ps-prod-name { font-size: 6.5px; color: var(--txt2); line-height: 1.3 } .aa-ps-prod-price { font-size: 7.5px; font-weight: 700; color: var(--or); margin-top: 2px } .aa-ps-nav { display: flex; justify-content: space-around; padding: 8px; background: #fff; border-top: 1px solid var(--g3); position: absolute; bottom: 0; left: 0; right: 0 } .aa-ps-nav-item { text-align: center; font-size: 6.5px; color: var(--txt3) } .aa-ps-nav-item i { display: block; font-size: 12px; margin-bottom: 2px; color: var(--txt3) } .aa-phone-glow { position: absolute; bottom: -50px; width: 260px; height: 160px; background: radial-gradient(ellipse, rgba(255, 87, 34, .12), transparent 70%) } .aa-mobile-info .sec-title em { font-style: normal; color: var(--or) } .aa-mobile-desc { font-size: 16px; color: var(--txt2); line-height: 1.7; margin: 16px 0 24px } .aa-mobile-feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px } .aa-mobile-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--txt); font-weight: 500 } .aa-feat-check { width: 22px; height: 22px; border-radius: 6px; background: var(--gl); border: 1.5px solid var(--gc); display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .aa-feat-check i { font-size: 11px; color: var(--green) } .aa-app-btns { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap } .aa-app-btn { background: var(--dark); color: #fff; border-radius: var(--r12); padding: 10px 18px; display: flex; align-items: center; gap: 10px; transition: var(--tr) } .aa-app-btn:hover { background: #1a2a40; transform: translateY(-1px) } .aa-app-btn i { font-size: 22px; color: #fff } .aa-app-btn sub { display: block; font-size: 10px; color: rgba(255, 255, 255, .6); font-weight: 400 } .aa-app-btn strong { display: block; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2 } /* ============================================ REVIEWS ============================================ */ .aa-reviews { padding: 80px 0; background: #fff } .aa-reviews-avg { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap } .aa-avg-num { font-size: 28px; font-weight: 800; color: var(--txt) } .aa-avg-label { font-size: 14px; color: var(--txt3) } .aa-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px } .aa-rev-card { background: #fff; border: 1.5px solid var(--g3); border-radius: var(--r16); padding: 24px; transition: var(--tr) } .aa-rev-card:hover { box-shadow: var(--sh2); border-color: var(--g4) } .aa-rev-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px } .aa-rev-platform { font-size: 11px; font-weight: 600; color: var(--or); background: var(--or-light); padding: 3px 10px; border-radius: 100px; border: 1px solid var(--or-mid) } .aa-rev-title { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 8px } .aa-rev-text { font-size: 13px; color: var(--txt2); line-height: 1.65; font-style: italic; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden } .aa-rev-footer { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--g2) } .aa-rev-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0 } .aa-rev-name { font-size: 13.5px; font-weight: 600; color: var(--txt) } .aa-rev-source { font-size: 11.5px; color: var(--txt3); margin-top: 2px } /* ============================================ SERVICES ============================================ */ .aa-services { padding: 80px 0; background: var(--g1) } .aa-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px } .aa-svc-card { background: #fff; border: 1.5px solid var(--g3); border-radius: var(--r16); padding: 22px; transition: var(--tr); position: relative } .aa-svc-card:hover { box-shadow: var(--sh2); border-color: var(--g4); transform: translateY(-3px) } .aa-svc-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--or-light); border: 1.5px solid var(--or-mid); display: flex; align-items: center; justify-content: center; margin-bottom: 16px } .aa-svc-icon i { font-size: 24px; color: var(--or) } .aa-svc-arrow { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--g2); border: 1px solid var(--g3); display: flex; align-items: center; justify-content: center; transition: var(--tr) } .aa-svc-arrow i { font-size: 12px; color: var(--txt3); transition: var(--tr) } .aa-svc-card:hover .aa-svc-arrow { background: var(--or); border-color: var(--or) } .aa-svc-card:hover .aa-svc-arrow i { color: #fff } .aa-svc-title { font-size: 14px; font-weight: 700; color: var(--txt); margin-bottom: 8px } .aa-svc-desc { font-size: 13px; color: var(--txt2); line-height: 1.6 } /* ============================================ NEWSLETTER ============================================ */ .aa-newsletter { background: var(--or); padding: 56px 0; position: relative; overflow: hidden } .aa-newsletter::before { content: ''; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 65%); pointer-events: none } .aa-nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; position: relative; z-index: 1 } .aa-nl-title { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 6px } .aa-nl-sub { font-size: 15px; color: rgba(255, 255, 255, .72) } .aa-nl-form { flex-shrink: 0; min-width: 380px } .aa-nl-wrap { display: flex; gap: 10px; margin-bottom: 8px } .aa-nl-input { flex: 1; background: #fff; border: none; border-radius: var(--r12); padding: 13px 18px; font-size: 14px; color: var(--txt); outline: none; font-family: 'Inter', sans-serif } .aa-nl-input::placeholder { color: var(--txt3) } .aa-nl-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3) } .aa-newsletter .btn-dark { background: var(--dark); border-color: var(--dark) } .aa-nl-privacy { font-size: 12px; color: rgba(255, 255, 255, .58) } .aa-nl-privacy a { color: rgba(255, 255, 255, .82); text-decoration: underline } /* ============================================ RESPONSIVE ============================================ */ @media(max-width:1100px) { .aa-prod-grid { grid-template-columns: repeat(2, 1fr) } .aa-pop-grid { grid-template-columns: repeat(2, 1fr) } .aa-why-grid { grid-template-columns: 1fr; gap: 32px } .aa-why-cards { grid-template-columns: repeat(2, 1fr) } .aa-zatca-grid { grid-template-columns: 1fr; gap: 40px } .aa-mobile-grid { grid-template-columns: 1fr; gap: 40px } .aa-phone-visual { order: 2 } .aa-svc-grid { grid-template-columns: repeat(2, 1fr) } .aa-reviews-grid { grid-template-columns: 1fr } } @media(max-width:768px) { .wrap { padding: 0 20px } .aa-hero { padding: 52px 0 44px } .aa-stat { padding: 0 18px } .aa-stat-div { display: none } .aa-prod-grid { grid-template-columns: 1fr } .aa-pop-grid { grid-template-columns: 1fr } .aa-why-cards { grid-template-columns: 1fr } .aa-svc-grid { grid-template-columns: 1fr } .aa-nl-inner { flex-direction: column; align-items: flex-start } .aa-nl-form { min-width: 0; width: 100% } .aa-nl-wrap { flex-direction: column } .aa-plat-tab { min-width: 110px; padding: 15px 14px } .aa-mobile-grid { gap: 32px } } @media(prefers-reduced-motion:reduce) { .aa-marquee-track { animation: none } * { transition: none !important } } [data-content-type=row][data-appearance=contained] { max-width: 100%; } /* Popular tabs: hide inactive panels before JS (prevents stacked flash) */ .cms-index-index .aa-popular .aa-pop-grid-1 { display: none; } .cms-index-index .aa-popular .aa-pop-grid-1:first-of-type, .cms-index-index .aa-popular .aa-pop-grid-1.is-active { display: block; } /* Stabilize first viewport */ .cms-index-index .aa-hero { min-height: 420px; }