/* ---- ../design-system/tokens.css ---- */ /* ========================================================================== مديد — Design Tokens (Phase 1) كل القيم البصرية في النظام تُقرأ من هنا فقط. لا تكتب ألوانًا أو مقاسات مباشرة داخل المكونات. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap"); :root { /* ---------- Brand ---------- */ --color-primary: #142D44; --color-primary-dark: #0E2235; --color-primary-darker: #0A1A29; /* Active/pressed */ --color-primary-50: #E8EEF4; --color-primary-100: #D2DDE8; --color-primary-200: #A9BCCF; --color-secondary: #00A99D; /* للزخارف والمؤشرات والرسوم، لا لنص أبيض صغير */ --color-secondary-text: #00776E; /* نص بلون الـ Secondary على خلفية فاتحة (AA) */ --color-secondary-50: #E8F5F3; --color-secondary-100: #C9EBE6; --color-teal: #00857B; /* Formal Teal */ --color-teal-text: #00706A; --color-teal-50: #E8F5F3; --color-teal-100: #CDEBE6; /* ---------- Neutrals ---------- */ --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-surface-muted: #FAFBFD; --color-border: #DCE3EA; --color-border-strong: #BAC6D2; --color-text: #142D44; --color-text-muted: #5E6E7E; /* AA على Surface الأبيض فقط */ --color-text-disabled: #9AA7B4; --color-text-inverse: #FFFFFF; --color-neutral-50: #EEF2F6; --color-neutral-100: #E3E9EF; --color-neutral-text: #4A5A69; /* ---------- Semantic ---------- */ --color-success: #1F8A5B; --color-success-solid: #197A50; /* خلفية ممتلئة عليها نص أبيض (AA) */ --color-success-text: #17724B; --color-success-50: #E8F4EE; --color-success-100: #CBE6D8; --color-warning: #C98A1A; /* أيقونات وحدود وأشرطة فقط */ --color-warning-text: #8A5D0C; /* نص تحذيري (AA) */ --color-warning-50: #FBF3E4; --color-warning-100: #F3E0BC; --color-danger: #B44545; --color-danger-dark: #9A3838; --color-danger-text: #9A3838; --color-danger-50: #F8EBEB; --color-danger-100: #EED0D0; /* حرج — للنوافذ التشغيلية الحرجة فقط (وصول ولي الأمر/طلب متأخر) */ --color-critical: #C62828; --color-critical-dark: #A82B2B; --color-critical-50: #FDECEC; /* ---------- Typography ---------- */ --font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --font-regular: 400; --font-semibold: 600; --font-bold: 700; /* size / line-height */ --text-h1: 2rem; --lh-h1: 2.75rem; /* 32 / 44 */ --text-h2: 1.625rem; --lh-h2: 2.25rem; /* 26 / 36 */ --text-h3: 1.375rem; --lh-h3: 2rem; /* 22 / 32 */ --text-h4: 1.125rem; --lh-h4: 1.75rem; /* 18 / 28 */ --text-body: 1rem; --lh-body: 1.75rem; /* 16 / 28 */ --text-small: 0.875rem; --lh-small: 1.5rem; /* 14 / 24 */ --text-caption: 0.75rem;--lh-caption: 1.25rem;/* 12 / 20 */ --text-table: 0.9375rem;--lh-table: 1.5rem; /* 15 / 24 */ --text-kpi: 2rem; --lh-kpi: 2.5rem; /* أرقام KPI */ /* ---------- Spacing (4px base) ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ---------- Radius ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ---------- Elevation ---------- */ --shadow-xs: 0 1px 2px rgba(20, 45, 68, 0.06); --shadow-sm: 0 1px 3px rgba(20, 45, 68, 0.08), 0 1px 2px rgba(20, 45, 68, 0.04); --shadow-md: 0 6px 16px rgba(20, 45, 68, 0.08), 0 2px 4px rgba(20, 45, 68, 0.04); --shadow-lg: 0 18px 40px rgba(20, 45, 68, 0.14), 0 4px 10px rgba(20, 45, 68, 0.06); --overlay: rgba(16, 34, 30, 0.48); /* ---------- Focus ---------- */ --focus-ring: 0 0 0 3px rgba(0, 169, 157, 0.38); /* تركواز الهوية — ظاهر على الكحلي والأبيض */ --focus-ring-danger: 0 0 0 3px rgba(180, 69, 69, 0.24); --focus-ring-success: 0 0 0 3px rgba(31, 138, 91, 0.22); /* ---------- Control sizes (أزرار وحقول كبيرة وواضحة) ---------- */ --control-sm: 36px; --control-md: 44px; /* الافتراضي — يحقق حد اللمس 44px */ --control-lg: 52px; /* إجراءات رئيسية على الجوال/البوابة */ /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; /* ---------- Layers ---------- */ --z-dropdown: 30; --z-sticky: 40; --z-drawer: 60; --z-modal: 70; --z-toast: 80; --z-tooltip: 90; /* ---------- Breakpoints (مرجعية — تُستخدم في media queries) ---------- mobile < 640 tablet 640 – 1023 laptop 1024 – 1279 desktop ≥ 1280 */ } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } } /* ---- landing.css ---- */ /* ========================================================================== مديد — Landing Page (PHASE 1 · Visual Design & Prototype) LandingLayout مستقل تمامًا عن School / Parent / Admin layouts. يقرأ الألوان والمقاسات من design-system/tokens.css فقط. التسمية: .lp-{block} / .lp-{block}__{el} / .is-{state} ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-family); font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } .num { font-variant-numeric: tabular-nums; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root { --lp-max: 1200px; --lp-gutter: 24px; --lp-header-h: 72px; --lp-section-y: 112px; --lp-ink-deep: #0B1C2C; /* خلفية قسم الخروج النهائي (مشتق من Primary Dark) */ --lp-ink-deep-2: #0D2133; --lp-on-deep-muted: #A9C3D6; /* نص ثانوي على الخلفية الداكنة (AA) */ } @media (max-width: 1023px) { :root { --lp-section-y: 88px; } } @media (max-width: 639px) { :root { --lp-gutter: 16px; --lp-section-y: 64px; --lp-header-h: 64px; } } .lp-container { width: 100%; max-width: calc(var(--lp-max) + var(--lp-gutter) * 2); margin-inline: auto; padding-inline: var(--lp-gutter); } /* ---------- Icons ---------- */ .ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic--sm { width: 16px; height: 16px; } .ic--lg { width: 24px; height: 24px; } .ic--xl { width: 28px; height: 28px; } /* ---------- Focus ---------- */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .lp-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none; } .lp-skip:focus { top: 12px; } /* ========================================================================== Buttons ========================================================================== */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-md); padding-inline: 20px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-body); font-weight: var(--font-bold); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .lp-btn:active { transform: translateY(1px); } .lp-btn--lg { min-height: var(--control-lg); padding-inline: 26px; font-size: 1.0625rem; } .lp-btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgba(20, 45, 68, .22); } .lp-btn--primary:hover { background: var(--color-primary-dark); } .lp-btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border-strong); } .lp-btn--secondary:hover { border-color: var(--color-primary); background: var(--color-primary-50); } .lp-btn--ghost { background: transparent; color: var(--color-text); } .lp-btn--ghost:hover { background: var(--color-neutral-50); } .lp-btn--light { background: #fff; color: var(--color-primary-dark); } .lp-btn--light:hover { background: var(--color-primary-50); } .lp-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .lp-btn--outline-light:hover { background: rgba(255,255,255,.08); border-color: #fff; } .lp-btn--block { width: 100%; } .lp-btn .ic { width: 18px; height: 18px; } .lp-btn[disabled] { opacity: .55; cursor: not-allowed; } /* ---------- Chips / badges ---------- */ .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 12px; border: 1px solid var(--color-primary-100); border-radius: var(--radius-pill); background: var(--color-primary-50); color: var(--color-primary-dark); font-size: var(--text-small); font-weight: var(--font-semibold); } .lp-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(0, 169, 157,.18); } .lp-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding-inline: 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--font-bold); white-space: nowrap; } .lp-badge--new { background: var(--color-warning-50); color: var(--color-warning-text); } .lp-badge--ok { background: var(--color-success-50); color: var(--color-success-text); } .lp-badge--arrived { background: var(--color-teal); color: #fff; } .lp-badge--done { background: var(--color-neutral-50); color: var(--color-neutral-text); } .lp-badge--review { background: var(--color-teal-50); color: var(--color-teal-text); } .lp-badge--danger { background: var(--color-danger-50); color: var(--color-danger-text); } .lp-demo-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-inline: 8px; border-radius: var(--radius-pill); border: 1px dashed var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-semibold); white-space: nowrap; } /* ========================================================================== Header ========================================================================== */ .lp-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--lp-header-h); background: rgba(245, 248, 247, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--duration-base), background var(--duration-base); } .lp-header.is-scrolled { border-color: var(--color-border); background: rgba(255, 255, 255, .92); } .lp-header__in { display: flex; align-items: center; gap: 24px; height: 100%; } .lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-primary-dark); font-weight: 700; font-size: 1.375rem; flex: none; } .lp-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary); } .lp-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 8px; } .lp-nav a { display: inline-flex; align-items: center; height: 40px; padding-inline: 12px; border-radius: var(--radius-md); color: var(--color-neutral-text); text-decoration: none; font-size: 0.9375rem; font-weight: var(--font-semibold); transition: color var(--duration-base), background var(--duration-base); } .lp-nav a:hover { color: var(--color-primary); background: var(--color-primary-50); } .lp-nav a.is-active { color: var(--color-primary); } .lp-header__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .lp-menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); align-items: center; justify-content: center; cursor: pointer; } .lp-mobile-nav { position: fixed; inset: var(--lp-header-h) 0 auto 0; z-index: var(--z-drawer); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 12px var(--lp-gutter) 20px; max-height: calc(100dvh - var(--lp-header-h)); overflow-y: auto; animation: lp-drop .22s var(--ease-out); } .lp-mobile-nav a.lp-mobile-nav__link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-inline: 8px; border-bottom: 1px solid var(--color-neutral-50); text-decoration: none; font-weight: var(--font-semibold); } .lp-mobile-nav__cta { display: grid; gap: 10px; margin-top: 16px; } .lp-scrim { position: fixed; inset: var(--lp-header-h) 0 0 0; z-index: calc(var(--z-drawer) - 1); background: var(--overlay); animation: lp-fade .2s ease; } @keyframes lp-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1179px) { .lp-nav a { padding-inline: 9px; font-size: 0.875rem; } } @media (max-width: 1079px) { .lp-nav, .lp-header__login { display: none; } .lp-menu-btn { display: inline-flex; } } @media (max-width: 479px) { .lp-header__cta { padding-inline: 14px; font-size: 0.9375rem; } } @media (max-width: 359px) { .lp-header__cta { display: none; } } /* ========================================================================== Sections — shared ========================================================================== */ .lp-section { padding-block: var(--lp-section-y); } .lp-section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); } .lp-section__head { max-width: 860px; margin-inline: auto; text-align: center; margin-bottom: 56px; } .lp-section__head--start { margin-inline: 0; text-align: start; } .lp-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--color-secondary-text); font-size: var(--text-small); font-weight: var(--font-bold); margin-bottom: 12px; } .lp-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--color-secondary); } .lp-h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.4; font-weight: 700; letter-spacing: -0.005em; } .lp-lead { margin-top: 14px; color: var(--color-text-muted); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.85; } .lp-h3 { font-size: 1.1875rem; line-height: 1.6; font-weight: 700; } @media (max-width: 639px) { .lp-section__head { margin-bottom: 36px; } } /* subtle pattern — شبكة نقاط هادئة */ .lp-pattern { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(20, 45, 68, .13) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%); } /* ========================================================================== Mock frames (Browser / Phone / TV) ========================================================================== */ .lp-browser { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; } .lp-browser__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding-inline: 14px; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); } .lp-browser__dots { display: flex; gap: 6px; direction: ltr; } .lp-browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-100); } .lp-browser__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; max-width: 320px; margin-inline: auto; padding-inline: 10px; border-radius: 8px; background: var(--color-neutral-50); color: var(--color-text-muted); font-size: 12px; } .lp-browser__body { position: relative; } .lp-phone { position: relative; width: 100%; max-width: 280px; aspect-ratio: 9 / 19; padding: 10px; border-radius: 40px; background: #111F2C; box-shadow: var(--shadow-lg), inset 0 0 0 2px #253647; } .lp-phone__screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; } .lp-phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: #111F2C; z-index: 2; } .lp-phone__status { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 10px 22px 0; font-size: 11px; font-weight: 700; color: var(--color-text); direction: ltr; } .lp-phone__app-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 10px; } .lp-phone__title { font-size: 14px; font-weight: 700; } .lp-phone__body { flex: 1; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .lp-tv { position: relative; border-radius: 18px; padding: 12px; background: #0A1520; box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 2px #1D2C3A; } .lp-tv__screen { position: relative; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #F8FAFC, #EEF3F7); aspect-ratio: 16 / 9; display: flex; flex-direction: column; } .lp-tv__stand { width: 22%; height: 14px; margin: 0 auto; background: #0A1520; border-radius: 0 0 10px 10px; } /* ========================================================================== HERO ========================================================================== */ .lp-hero { position: relative; padding-block: 64px 96px; overflow: hidden; } .lp-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; } .lp-hero h1 { margin-top: 20px; font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.125rem); line-height: 1.38; font-weight: 700; letter-spacing: -0.01em; } .lp-hero h1 .lp-hero__brand { color: var(--color-primary); } .lp-hero h1 .lp-hero__sub { display: block; color: var(--color-text); } .lp-hero__desc { margin-top: 20px; max-width: 560px; color: var(--color-text-muted); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.9; } .lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .lp-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; color: var(--color-neutral-text); font-size: var(--text-small); font-weight: var(--font-semibold); } .lp-hero__trust span { display: inline-flex; align-items: center; gap: 6px; } .lp-hero__trust .ic { color: var(--color-success); width: 18px; height: 18px; } .lp-hero__visual { position: relative; padding-block: 24px 40px; padding-inline-end: 88px; } .lp-hero__visual .lp-browser { z-index: 1; } /* mini dashboard داخل الـ Hero */ .lp-mini { display: grid; grid-template-columns: 52px 1fr; min-height: 380px; } .lp-mini__rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 14px; background: var(--color-primary-dark); } .lp-mini__rail i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: rgba(255,255,255,.7); } .lp-mini__rail i.is-on { background: rgba(255,255,255,.18); color: #fff; } .lp-mini__rail .ic { width: 15px; height: 15px; } .lp-mini__main { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--color-bg); min-width: 0; } .lp-mini__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lp-mini__title { font-size: 15px; font-weight: 700; } .lp-mini__date { font-size: 12px; color: var(--color-text-muted); } .lp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .lp-kpi { padding: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; min-width: 0; } .lp-kpi__label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; } .lp-kpi__label i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .lp-kpi__value { margin-top: 2px; font-size: 1.375rem; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; } .lp-mini__cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; min-height: 0; } .lp-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; min-width: 0; } .lp-panel__h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; } .lp-feed { display: flex; flex-direction: column; gap: 6px; } .lp-feed__row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; background: var(--color-surface-muted); border: 1px solid var(--color-neutral-50); transition: background .4s var(--ease-out), border-color .4s; } .lp-feed__row.is-flash { background: var(--color-primary-50); border-color: var(--color-primary-100); } .lp-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--color-primary-50); color: var(--color-primary-dark); font-size: 11px; font-weight: 700; } .lp-feed__who { flex: 1; min-width: 0; } .lp-feed__name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-feed__meta { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; } .lp-feed .lp-badge { transition: background .35s, color .35s; } .lp-gatebars { display: flex; flex-direction: column; gap: 9px; } .lp-gatebar { display: grid; grid-template-columns: 52px 1fr 26px; align-items: center; gap: 6px; font-size: 11.5px; } .lp-gatebar__track { height: 8px; border-radius: 5px; background: var(--color-neutral-50); overflow: hidden; } .lp-gatebar__fill { height: 100%; border-radius: 5px; background: var(--color-secondary); transform-origin: right; transition: transform 1s var(--ease-out); } .lp-gatebar b { font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; } .lp-wait { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--color-text-muted); } .lp-wait b { color: var(--color-text); font-size: 1.125rem; font-variant-numeric: tabular-nums; } .lp-float { position: absolute; z-index: 2; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-lg); } .lp-float--toast { top: 0; inset-inline-start: -28px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 230px; animation: lp-bob 6s ease-in-out infinite; } .lp-float--toast .lp-float__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--color-teal); color: #fff; flex: none; } .lp-float__t { font-size: 13px; font-weight: 700; } .lp-float__s { font-size: 11.5px; color: var(--color-text-muted); } .lp-float--phone { inset-inline-end: -12px; bottom: -8px; width: 172px; padding: 0; border: 0; background: transparent; box-shadow: none; animation: lp-bob 7s ease-in-out -2s infinite; } .lp-float--phone .lp-phone { max-width: 172px; padding: 7px; border-radius: 28px; } .lp-float--phone .lp-phone__screen { border-radius: 22px; } .lp-float--phone .lp-phone__notch { width: 54px; height: 14px; top: 6px; } @keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* phone mini content (hero) */ .lp-pm { padding: 26px 10px 10px; display: flex; flex-direction: column; gap: 7px; height: 100%; } .lp-pm__h { font-size: 11px; font-weight: 700; } .lp-pm__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; } .lp-pm__steps { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .lp-pm__step { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--color-text-muted); } .lp-pm__step i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-border-strong); flex: none; } .lp-pm__step.is-done { color: var(--color-text); font-weight: 600; } .lp-pm__step.is-done i { border-color: var(--color-success); background: var(--color-success); } .lp-pm__step.is-now { color: var(--color-teal-text); font-weight: 700; } .lp-pm__step.is-now i { border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--color-teal-50); } .lp-pm__btn { margin-top: auto; height: 30px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; } @media (max-width: 1179px) { .lp-hero__grid { grid-template-columns: 1fr; gap: 48px; } .lp-hero__copy { text-align: center; max-width: 760px; margin-inline: auto; } .lp-hero__desc { margin-inline: auto; } .lp-hero__ctas, .lp-hero__trust { justify-content: center; } .lp-hero__visual { max-width: 860px; margin-inline: auto; width: 100%; } .lp-float--toast { inset-inline-start: 8px; } } @media (max-width: 767px) { .lp-hero { padding-block: 40px 64px; } .lp-hero__visual { padding-inline-end: 0; padding-block: 36px 0; } .lp-float--phone { display: none; } .lp-float--toast { inset-inline-start: 8px; top: 0; min-width: 0; max-width: calc(100% - 16px); } .lp-mini { grid-template-columns: 1fr; min-height: 0; } .lp-mini__rail { display: none; } .lp-mini__main { padding: 12px; } .lp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-kpis .lp-kpi:nth-child(n+4) { grid-column: span 1; } .lp-mini__cols { grid-template-columns: 1fr; } .lp-mini__cols .lp-panel--gates { display: none; } } @media (max-width: 639px) { .lp-hero__ctas .lp-btn { width: 100%; } .lp-hero__trust { justify-content: center; font-size: 13px; gap: 6px 14px; } } @media (max-width: 389px) { .lp-kpi { padding: 8px; } .lp-kpi__value { font-size: 1.125rem; } .lp-kpi__label { font-size: 10px; } } /* ========================================================================== SECTION 4 — How it works ========================================================================== */ .lp-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .lp-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-flow--3 .lp-flow__line { inset-inline: 16.7%; } .lp-flow__line { position: absolute; top: 31px; inset-inline: 12.5%; height: 2px; background: repeating-linear-gradient(to left, var(--color-primary-200) 0 8px, transparent 8px 14px); } .lp-flow__pulse { position: absolute; top: -5px; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 5px rgba(0, 169, 157,.18); animation: lp-travel 6s var(--ease-out) infinite; } @keyframes lp-travel { 0% { inset-inline-start: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { inset-inline-start: calc(100% - 12px); opacity: 0; } } .lp-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .lp-step__num { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 2px solid var(--color-primary); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; box-shadow: 0 0 0 8px var(--color-bg); transition: background .4s, color .4s; } .lp-step.is-active .lp-step__num { background: var(--color-primary); color: #fff; } .lp-step__title { margin-top: 18px; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; } .lp-step__who { margin-top: 4px; font-size: 13px; color: var(--color-text-muted); font-weight: 600; } .lp-step__card { margin-top: 18px; width: 100%; padding: 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); text-align: start; box-shadow: var(--shadow-sm); transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-out); } .lp-step.is-active .lp-step__card { border-color: var(--color-primary-200); box-shadow: var(--shadow-md); transform: translateY(-4px); } .lp-step__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; } .lp-step__row + .lp-step__row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-neutral-50); } .lp-step__row > span:first-child { color: var(--color-text-muted); } .lp-step__row b { font-weight: 700; } @media (max-width: 1023px) { .lp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .lp-flow.lp-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-flow__line { display: none; } } @media (max-width: 639px) { .lp-flow, .lp-flow.lp-flow--3 { grid-template-columns: 1fr; gap: 0; } .lp-step { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; text-align: start; align-items: start; padding-bottom: 20px; } .lp-step::before { content: ""; position: absolute; top: 48px; bottom: 0; inset-inline-start: 23px; width: 2px; background: var(--color-primary-100); } .lp-step:last-child::before { display: none; } .lp-step__num { width: 48px; height: 48px; font-size: 1.125rem; grid-row: span 3; box-shadow: none; } .lp-step__title { margin-top: 8px; } .lp-step__card { margin-top: 10px; } } /* ========================================================================== SECTION 6 — Final dismissal spotlight (dark) ========================================================================== */ .lp-dis { position: relative; padding-block: var(--lp-section-y); background: var(--lp-ink-deep); color: #fff; overflow: hidden; } .lp-dis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(159,227,214,.10) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); } .lp-dis .lp-kicker { color: #8FE0D7; } .lp-dis .lp-kicker::before { background: #8FE0D7; } .lp-dis .lp-lead { color: var(--lp-on-deep-muted); } .lp-dis__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; } .lp-gates { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .lp-gate-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #DCEFEC; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; } .lp-gate-tab:hover { background: rgba(255,255,255,.08); } .lp-gate-tab[aria-selected="true"] { background: #fff; color: var(--color-primary-dark); border-color: #fff; } .lp-gate-tab small { font-size: 11px; font-weight: 600; opacity: .7; direction: ltr; } .lp-gate-tab__q { min-width: 24px; height: 22px; padding-inline: 6px; border-radius: 11px; display: grid; place-items: center; background: rgba(159,227,214,.18); color: #8FE0D7; font-size: 12px; font-variant-numeric: tabular-nums; } .lp-gate-tab[aria-selected="true"] .lp-gate-tab__q { background: var(--color-primary-50); color: var(--color-primary-dark); } .lp-call { flex: 1; display: grid; grid-template-columns: 1fr 30%; min-height: 0; } .lp-call__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; padding: 3cqw; text-align: center; container-type: inline-size; } .lp-call__head { position: absolute; top: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6% 2.4%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: clamp(10px, 1.35vw, 17px); z-index: 1; } .lp-call__head span { display: inline-flex; align-items: center; gap: 6px; } .lp-tv__screen { container-type: inline-size; } .lp-tv__screen > .lp-call { padding-top: 7%; } .lp-call__now { font-size: clamp(9px, 1.6cqw, 15px); font-weight: 700; color: var(--color-secondary-text); display: inline-flex; align-items: center; gap: 6px; padding: .4cqw 1.4cqw; border-radius: 99px; background: var(--color-secondary-50); } .lp-call__name { font-size: clamp(20px, 8.4cqw, 76px); line-height: 1.3; font-weight: 700; color: var(--color-text); transition: opacity .35s, transform .35s var(--ease-out); } .lp-call__class { font-size: clamp(11px, 2.6cqw, 26px); font-weight: 600; color: var(--color-text-muted); } .lp-call__name.is-swap, .lp-call__class.is-swap { opacity: 0; transform: translateY(8px); } .lp-call__gate { display: inline-flex; align-items: center; gap: 6px; padding: .6cqw 2cqw; border-radius: 1.2cqw; background: var(--color-primary); color: #fff; font-size: clamp(11px, 2.3cqw, 22px); font-weight: 700; } .lp-wave { display: flex; align-items: center; gap: .55cqw; height: 5.5cqw; min-height: 18px; direction: ltr; } .lp-wave i { width: .65cqw; min-width: 3px; height: 100%; border-radius: 4px; background: var(--color-secondary); transform-origin: center; animation: lp-wave 1.1s ease-in-out infinite; } .lp-wave.is-paused i { animation-play-state: paused; transform: scaleY(.2); } @keyframes lp-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } .lp-call__rep { font-size: clamp(9px, 1.5cqw, 14px); color: var(--color-text-muted); font-weight: 600; } .lp-call__queue { background: var(--color-surface); border-inline-start: 1px solid var(--color-border); padding: 3cqw 2cqw; display: flex; flex-direction: column; gap: 1cqw; min-width: 0; } .lp-call__qh { font-size: clamp(9px, 1.55cqw, 15px); font-weight: 700; color: var(--color-text-muted); } .lp-call__qi { display: flex; align-items: center; gap: 1cqw; padding: 1cqw; border-radius: 1cqw; background: var(--color-bg); font-size: clamp(9px, 1.6cqw, 15px); font-weight: 700; color: var(--color-text); min-width: 0; } .lp-call__qi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-call__qi em { font-style: normal; flex: none; width: 2.6cqw; min-width: 16px; height: 2.6cqw; min-height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-50); color: var(--color-primary-dark); font-size: clamp(8px, 1.3cqw, 13px); font-variant-numeric: tabular-nums; } .lp-dis__note { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--lp-on-deep-muted); font-size: 13px; } .lp-dis__note .lp-demo-tag { background: transparent; color: var(--lp-on-deep-muted); border-color: rgba(255,255,255,.25); } .lp-dis__ctrl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; } .lp-dis__ctrl:hover { background: rgba(255,255,255,.08); } .lp-dis__list { display: grid; gap: 10px; } .lp-dis__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 0.9375rem; font-weight: 600; color: #E8F5F3; line-height: 1.7; } .lp-dis__list li .ic { margin-top: 3px; color: #8FE0D7; } .lp-dis__list small { display: block; font-weight: 400; color: var(--lp-on-deep-muted); font-size: 13px; } .lp-dis__phone { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .lp-dis__phone-btn { flex: 1; display: grid; gap: 8px; } .lp-dis__fake-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px; background: #fff; color: var(--color-primary-dark); font-weight: 700; font-size: 14px; border: 0; cursor: pointer; } .lp-dis__fake-btn--alt { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; } .lp-dis__gps { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lp-on-deep-muted); } @media (max-width: 1023px) { .lp-dis__grid { grid-template-columns: 1fr; } } @media (max-width: 639px) { .lp-tv { padding: 6px; border-radius: 12px; } .lp-call { grid-template-columns: 1fr; } .lp-call__queue { display: none; } .lp-gate-tab { flex: 1; justify-content: center; gap: 6px; padding-inline: 6px; font-size: 13px; } .lp-gate-tab small, .lp-gate-tab .ic { display: none; } .lp-gate-tab { white-space: nowrap; } .lp-gates { flex-wrap: nowrap; } .lp-tv__screen { aspect-ratio: 4 / 3; } } /* ========================================================================== SECTION 9 — Notifications ========================================================================== */ .lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .lp-split--rev .lp-split__visual { order: -1; } @media (max-width: 1023px) { .lp-split { grid-template-columns: 1fr; gap: 36px; } .lp-split--rev .lp-split__visual { order: 0; } } .lp-bullets { display: grid; gap: 10px; margin-top: 24px; } .lp-bullets li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; } .lp-bullets li .ic { margin-top: 4px; color: var(--color-primary); } .lp-bullets small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 14px; } .lp-stage { position: relative; padding: 28px; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; } .lp-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20, 45, 68,.08) 1px, transparent 1.2px); background-size: 18px 18px; } .lp-stage > * { position: relative; } .lp-pop { max-width: 420px; margin-inline: auto; background: var(--color-surface); border-radius: 18px; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; animation: lp-popin .6s var(--ease-out) both; } @keyframes lp-popin { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .lp-pop__top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--color-warning-50); border-bottom: 1px solid var(--color-warning-100); } .lp-pop__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--color-warning); color: #fff; flex: none; animation: lp-ring 1.8s ease-in-out infinite; } .lp-pop__t { font-weight: 700; color: var(--color-warning-text); } .lp-pop__ago { margin-inline-start: auto; font-size: 12px; color: var(--color-warning-text); font-weight: 600; } .lp-pop__body { padding: 16px; display: flex; align-items: center; gap: 12px; } .lp-pop__name { font-size: 1.0625rem; font-weight: 700; } .lp-pop__meta { font-size: 13px; color: var(--color-text-muted); } .lp-pop__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; } .lp-pop__act .lp-btn { min-height: 40px; font-size: 14px; } .lp-ctrls { margin-top: 18px; display: grid; gap: 12px; max-width: 420px; margin-inline: auto; } .lp-ctrl { padding: 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); } .lp-ctrl__l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; } .lp-ctrl__l span { font-weight: 600; color: var(--color-text-muted); font-size: 12px; } .lp-segbig { display: flex; padding: 3px; border-radius: 11px; background: var(--color-neutral-50); gap: 2px; } .lp-segbig button { flex: 1; min-height: 36px; border: 0; border-radius: 9px; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--color-neutral-text); cursor: pointer; } .lp-segbig button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: var(--shadow-sm); } .lp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lp-chip { min-height: 34px; padding-inline: 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: 12.5px; font-weight: 700; color: var(--color-neutral-text); cursor: pointer; } .lp-chip:hover { border-color: var(--color-primary); } .lp-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .lp-mutebar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-neutral-50); border: 1px solid var(--color-neutral-100); font-size: 13px; font-weight: 700; color: var(--color-neutral-text); } .lp-mutebar .ic { color: var(--color-neutral-text); } .lp-mutebar button { margin-inline-start: auto; border: 0; background: transparent; color: var(--color-primary); font-weight: 700; font-size: 12.5px; cursor: pointer; min-height: 32px; padding-inline: 6px; } /* ========================================================================== SECTION 13 — Security ========================================================================== */ .lp-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); } .lp-sec__i { display: flex; gap: 14px; padding: 24px; border-inline-start: 1px solid var(--color-border); border-top: 1px solid var(--color-border); } .lp-sec__i:nth-child(3n+1) { border-inline-start: 0; } .lp-sec__i:nth-child(-n+3) { border-top: 0; } .lp-sec__ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--color-teal-50); color: var(--color-teal-text); } .lp-sec__t { font-weight: 700; } .lp-sec__d { margin-top: 2px; font-size: 14px; color: var(--color-text-muted); line-height: 1.75; } @media (max-width: 1023px) { .lp-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-sec__i, .lp-sec__i:nth-child(3n+1), .lp-sec__i:nth-child(-n+3) { border-inline-start: 1px solid var(--color-border); border-top: 1px solid var(--color-border); } .lp-sec__i:nth-child(2n+1) { border-inline-start: 0; } .lp-sec__i:nth-child(-n+2) { border-top: 0; } } @media (max-width: 639px) { .lp-sec { grid-template-columns: 1fr; } .lp-sec__i, .lp-sec__i:nth-child(n) { border-inline-start: 0; border-top: 1px solid var(--color-border); padding: 18px 16px; } .lp-sec__i:first-child { border-top: 0; } } /* ========================================================================== SECTION 14 — Pricing ========================================================================== */ .lp-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin-inline: auto; align-items: stretch; } .lp-pricing.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; } .lp-pctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; max-width: 1180px; margin: 0 auto 32px; } .lp-pctl__g { display: grid; gap: 8px; min-width: 0; } .lp-pctl__l { font-size: 13px; font-weight: 700; color: var(--color-neutral-text); } .lp-seg { display: flex; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: var(--color-neutral-50); gap: 4px; } .lp-seg button { flex: 1 1 auto; min-height: 42px; padding-inline: 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--color-neutral-text); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } .lp-seg button[aria-checked="true"] { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: var(--shadow-sm); } .lp-seg button:disabled { opacity: .45; cursor: not-allowed; } .lp-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .lp-price-custom { margin-top: 20px; min-height: 104px; display: grid; align-content: start; gap: 6px; } .lp-price-custom b { font-size: 1.75rem; line-height: 1.3; } .lp-price-custom span { font-size: 14px; color: var(--color-text-muted); line-height: 1.8; } .lp-price-custom[hidden], .lp-price[hidden] { display: none; } .lp-addons { max-width: 1180px; margin: 48px auto 0; } .lp-addons[hidden] { display: none; } .lp-addons .lp-h3 { text-align: center; margin-bottom: 18px; } .lp-addons__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); overflow: hidden; } .lp-addons__list li { display: grid; gap: 4px; padding: 18px 20px; border-inline-start: 1px solid var(--color-neutral-50); } .lp-addons__list li:first-child { border-inline-start: 0; } .lp-addons__list b { font-size: 15.5px; } .lp-addons__list span { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; } .lp-addons__list .lp-addons__price { margin-top: 4px; color: var(--color-primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; } .lp-pcard-x { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 28px; } .lp-pcard-x.is-highlight { border: 2px solid var(--color-primary); box-shadow: 0 24px 56px rgba(20, 45, 68,.14); padding: 27px; } .lp-pcard-x__flag { position: absolute; top: -14px; inset-inline-start: 28px; height: 28px; padding-inline: 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .lp-pcard-x__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--color-primary-50); color: var(--color-primary); margin-bottom: 16px; } .lp-pcard-x.is-highlight .lp-pcard-x__ic { background: var(--color-primary); color: #fff; } .lp-pcard-x__name { font-size: 1.375rem; font-weight: 700; line-height: 1.5; } .lp-pcard-x__sub { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--color-secondary-text); } .lp-pcard-x__desc { margin-top: 8px; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.8; min-height: 3.6em; } .lp-price { margin-top: 20px; min-height: 104px; } .lp-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .lp-price__amt { font-size: 2.75rem; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: opacity .2s, transform .2s; } .lp-price__amt.is-swap { opacity: 0; transform: translateY(6px); } .lp-price__cur { font-size: 1rem; font-weight: 700; color: var(--color-neutral-text); } .lp-price__per { font-size: 14px; color: var(--color-text-muted); font-weight: 600; } .lp-price__old { font-size: 1rem; color: var(--color-text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; font-weight: 600; } .lp-price__disc { display: inline-flex; align-items: center; height: 26px; padding-inline: 10px; border-radius: var(--radius-pill); background: var(--color-success-50); color: var(--color-success-text); font-size: 12.5px; font-weight: 700; } .lp-price__meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; } .lp-price__offer { display: inline-flex; align-items: center; gap: 5px; color: var(--color-warning-text); } .lp-price__offer .ic { width: 14px; height: 14px; } .lp-pcard-x .lp-btn--block { margin-top: 20px; } .lp-pfl { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-neutral-50); } .lp-pfl__h { font-size: 13px; font-weight: 700; color: var(--color-neutral-text); margin-bottom: 10px; } .lp-pfl ul { display: grid; gap: 7px; } .lp-pfl li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.7; } .lp-pfl li .ic { margin-top: 4px; width: 16px; height: 16px; color: var(--color-success); } .lp-pfl--x li { color: var(--color-text-muted); } .lp-pfl--x li .ic { color: var(--color-text-disabled); } .lp-pfl__inherit { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--color-primary-50); color: var(--color-primary-darker); font-size: 14px; font-weight: 700; margin-bottom: 12px; } .lp-pfl__more { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--color-primary); font-weight: 700; font-size: 14px; cursor: pointer; min-height: 36px; padding: 0; } .lp-pfl__more .ic { width: 16px; height: 16px; transition: transform .2s; } .lp-pfl__more[aria-expanded="true"] .ic { transform: rotate(180deg); } .lp-pricenote { margin-top: 20px; text-align: center; font-size: 13px; color: var(--color-text-muted); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 1023px) { .lp-pricing, .lp-pricing.is-pair { grid-template-columns: 1fr; max-width: 560px; } } @media (max-width: 639px) { .lp-pctl, .lp-pctl__g { width: 100%; } .lp-seg--size button { flex: 1 1 calc(50% - 4px); } .lp-addons__list li { border-inline-start: 0; border-top: 1px solid var(--color-neutral-50); } .lp-addons__list li:first-child { border-top: 0; } } @media (max-width: 639px) { .lp-pcard-x { padding: 24px 18px; } .lp-pcard-x.is-highlight { padding: 23px 17px; } .lp-price__amt { font-size: 2.25rem; } } /* comparison */ .lp-cmp { margin-top: 56px; max-width: 1040px; margin-inline: auto; } .lp-cmp__h { text-align: center; margin-bottom: 20px; } .lp-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; } .lp-cmp th, .lp-cmp td { padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--color-neutral-50); font-size: 15px; } .lp-cmp tbody tr:last-child th, .lp-cmp tbody tr:last-child td { border-bottom: 0; } .lp-cmp thead th { background: var(--color-surface-muted); font-weight: 700; font-size: 14.5px; border-bottom: 1px solid var(--color-border); vertical-align: bottom; } .lp-cmp thead th.is-hl { background: var(--color-primary-50); color: var(--color-primary-darker); } .lp-cmp tbody th { text-align: start; font-weight: 600; } .lp-cmp td.is-hl { background: rgba(231, 242, 239, .45); } .lp-cmp .grp th { background: var(--color-bg); font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); padding-block: 8px; text-align: start; } .lp-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-success-50); color: var(--color-success); } .lp-yes .ic { width: 15px; height: 15px; stroke-width: 2.6; } .lp-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-danger-50); color: var(--color-danger); } .lp-no .ic { width: 15px; height: 15px; stroke-width: 2.6; } .lp-cmp__short { display: none; } @media (max-width: 639px) { .lp-cmp th, .lp-cmp td { padding: 11px 8px; font-size: 13.5px; } .lp-cmp tbody th { padding-inline-start: 12px; } .lp-cmp thead th { font-size: 12.5px; } .lp-cmp__long { display: none; } .lp-cmp__short { display: inline; } .lp-cmp col.c-val { width: 74px; } } /* ========================================================================== SECTION 16 — FAQ ========================================================================== */ .lp-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; } .lp-faq details { border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color .2s, box-shadow .2s; } .lp-faq details[open] { border-color: var(--color-primary-200); box-shadow: var(--shadow-sm); } .lp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer; font-weight: 700; font-size: 1rem; border-radius: 16px; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary .ic { flex: none; color: var(--color-primary); transition: transform .25s var(--ease-out); } .lp-faq details[open] summary .ic { transform: rotate(180deg); } .lp-faq__a { padding: 0 20px 18px; color: var(--color-text-muted); line-height: 1.85; } .lp-faq__a b { color: var(--color-text); } /* ========================================================================== SECTION 17 — Final CTA ========================================================================== */ .lp-final { position: relative; overflow: hidden; border-radius: 28px; padding: 64px 48px; background: var(--color-primary); color: #fff; text-align: center; } .lp-final::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); } .lp-final > * { position: relative; } .lp-final__mark { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 20px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); } .lp-final h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.5; font-weight: 700; max-width: 880px; margin-inline: auto; } .lp-final p { margin-top: 14px; color: #D3EEEA; font-size: 1.0625rem; } .lp-final__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; } @media (max-width: 639px) { .lp-final { padding: 44px 18px; border-radius: 20px; } .lp-final__ctas .lp-btn { width: 100%; } } /* ========================================================================== SECTION 18 — Footer ========================================================================== */ .lp-footer { margin-top: var(--lp-section-y); background: var(--color-surface); border-top: 1px solid var(--color-border); padding-block: 56px 28px; } .lp-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; } .lp-footer__about p { margin-top: 14px; max-width: 320px; color: var(--color-text-muted); font-size: 14px; line-height: 1.85; } .lp-footer h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; } .lp-footer ul { display: grid; gap: 4px; } .lp-footer ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-text-muted); text-decoration: none; font-size: 14.5px; font-weight: 600; } .lp-footer ul a:hover { color: var(--color-primary); } .lp-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-neutral-50); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); } @media (max-width: 1023px) { .lp-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp-footer__about { grid-column: 1 / -1; } } @media (max-width: 559px) { .lp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } } /* ========================================================================== Subscribe dialog (Phase 1: تصميم النموذج فقط — بلا إرسال) ========================================================================== */ .lp-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); } .lp-dialog::backdrop { background: var(--overlay); } .lp-dialog[open] { animation: lp-popin .25s var(--ease-out); } .lp-dialog__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--color-neutral-50); } .lp-dialog__h h2 { font-size: 1.25rem; font-weight: 700; } .lp-dialog__h p { font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px; } .lp-dialog__x { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--color-neutral-50); display: grid; place-items: center; cursor: pointer; flex: none; } .lp-form { padding: 18px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lp-form .full { grid-column: 1 / -1; } .lp-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--color-neutral-text); } .lp-form input, .lp-form select { width: 100%; min-height: 44px; padding-inline: 12px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font: inherit; font-size: 15px; color: var(--color-text); } .lp-form input:focus, .lp-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } .lp-form__sel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--color-primary-50); color: var(--color-primary-darker); font-size: 14px; font-weight: 700; } .lp-form__note { grid-column: 1 / -1; font-size: 12.5px; color: var(--color-text-muted); display: flex; gap: 6px; align-items: center; } @media (max-width: 479px) { .lp-form { grid-template-columns: 1fr; padding-inline: 16px; } .lp-dialog__h { padding-inline: 16px; } } /* ========================================================================== Animations — Scroll reveal (خفيفة، تحترم reduce-motion) ========================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0ms); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .lp-wave i { transform: scaleY(.6); } } /* Phase-1 review ribbon (يُحذف في المرحلة 2) */ .lp-review { position: fixed; inset-block-end: 14px; inset-inline-start: 14px; z-index: var(--z-toast); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; border-radius: var(--radius-pill); background: var(--color-text); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg); } .lp-review i { width: 8px; height: 8px; border-radius: 50%; background: #F3C66B; } @media (max-width: 639px) { .lp-review { display: none; } } .is-embed .lp-review { display: none; } /* وضع المراجعة ?static=1 — الرسوم تظهر مكتملة فورًا */ .is-static .lp-chart *, .is-static .lp-hbar__fill, .is-static .lp-gatebar__fill, .is-static .lp-donut .seg { animation-duration: 1ms !important; animation-delay: 0s !important; transition: none !important; } .lp-req { color: var(--color-danger); font-weight: 700; } /* ========================================================================== Gold accent — #C98A1A مع الأخضر الغامق الذهبي للأيقونات والزخارف فقط (لا نص صغير بالذهبي على الأبيض). على الخلفية الفاتحة يُستخدم الذهبي الداكن #8A5D0C (AA). ========================================================================== */ :root { --lp-gold: #C98A1A; --lp-gold-text: #8A5D0C; --lp-gold-50: #FBF3E4; --lp-gold-100: #F3E0BC; --lp-ic-deep: var(--color-primary-dark); /* #0E2235 */ } /* زخارف العناوين */ .lp-eyebrow__dot { background: var(--lp-gold); box-shadow: 0 0 0 4px rgba(201,138,26,.18); } .lp-kicker::before { background: var(--lp-gold); } .lp-dis .lp-kicker { color: var(--lp-gold-100); } .lp-dis .lp-kicker::before { background: var(--lp-gold); } /* شريط المميزات: تناوب أخضر غامق+ذهبي / أخضر فاتح+أخضر */ .lp-strip__item:nth-child(odd) .lp-strip__ic, .lp-strip__list li:nth-child(odd) .lp-strip__ic { background: var(--lp-ic-deep); color: var(--lp-gold); } .lp-strip__list li:nth-child(even) .lp-strip__ic { background: var(--color-primary-50); color: var(--color-primary); } /* قبل / مع مديد */ .lp-ba__card--after .lp-ba__label i { background: var(--lp-ic-deep); color: var(--lp-gold); } /* Bento */ .lp-tile__ic { background: var(--lp-ic-deep); color: var(--lp-gold); } /* الخروج النهائي (خلفية داكنة) */ .lp-dis__list li .ic { color: var(--lp-gold); } .lp-call__now { background: var(--lp-gold-50); color: var(--lp-gold-text); } /* التنبيهات والاستدعاء */ .lp-bullets li .ic { color: var(--lp-gold); } /* الأمان */ .lp-sec__ic { background: var(--lp-ic-deep); color: var(--lp-gold); } /* الباقات */ .lp-pcard-x__ic { background: var(--lp-gold-50); color: var(--lp-gold-text); } .lp-pcard-x.is-highlight .lp-pcard-x__ic { background: var(--lp-ic-deep); color: var(--lp-gold); } /* لماذا مديد؟ */ .lp-why__n { color: var(--lp-gold-text); } .lp-why__i { border-top: 3px solid var(--lp-gold); } /* CTA النهائي */ .lp-final__mark { background: var(--lp-ic-deep); border-color: rgba(201,138,26,.55); } /* ========================================================================== PHASE 2 — الحالات التشغيلية ========================================================================== */ /* أداء: تأجيل رسم الأقسام البعيدة عن الشاشة */ .lp-section, .lp-dis { content-visibility: auto; contain-intrinsic-size: auto 900px; } #problem { content-visibility: visible; } /* Skeleton أثناء تحميل الأسعار */ .lp-skel { display: block; height: 1em; width: 100%; margin-block: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--color-neutral-50), var(--color-neutral-100), var(--color-neutral-50)); background-size: 200% 100%; animation: lp-shimmer 1.2s linear infinite; } .lp-price__amt .lp-skel { display: inline-block; } @keyframes lp-shimmer { to { background-position: -200% 0; } } .lp-pricing.is-single { grid-template-columns: minmax(0, 560px); justify-content: center; } .lp-pricing-state { margin: 20px auto 0; max-width: 560px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--color-warning-50); color: var(--color-warning-text); font-weight: 600; text-align: center; } /* النماذج */ .lp-form textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font: inherit; font-size: 15px; color: var(--color-text); resize: vertical; min-height: 96px; } .lp-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } .lp-form [aria-invalid="true"] { border-color: var(--color-danger) !important; box-shadow: var(--focus-ring-danger); } .lp-err { min-height: 0; color: var(--color-danger-text); font-size: 12.5px; font-weight: 600; line-height: 1.5; } .lp-err:empty { display: none; } .lp-form__alert { padding: 10px 12px; border-radius: 10px; background: var(--color-danger-50); color: var(--color-danger-text); font-size: 14px; font-weight: 700; } .lp-form__price { padding: 10px 12px; border-radius: 10px; background: var(--color-primary-50); color: var(--color-primary-darker); font-size: 13.5px; font-weight: 700; } .lp-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .lp-done { padding: 32px 22px 28px; text-align: center; display: grid; justify-items: center; gap: 10px; outline: none; } .lp-done__ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-50); color: var(--color-success); } .lp-done h3 { font-size: 1.25rem; } .lp-done p { color: var(--color-text-muted); max-width: 380px; } .lp-done b { color: var(--color-text); } .lp-dialog form[hidden] { display: none; } /* كتم مخصص */ .lp-mute-custom { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .lp-mute-custom label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--color-neutral-text); } .lp-mute-custom input { width: 110px; min-height: 36px; padding-inline: 10px; border-radius: 9px; border: 1px solid var(--color-border-strong); font: inherit; } .lp-mute-custom small { width: 100%; font-size: 11.5px; color: var(--color-text-muted); } /* الصفحات القانونية */ .lp-legal { max-width: 820px; padding-block: 48px 24px; } .lp-legal h1 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.5; } .lp-legal__meta { margin-top: 6px; color: var(--color-text-muted); font-size: 14px; } .lp-legal section { margin-top: 28px; } .lp-legal h2 { font-size: 1.1875rem; margin-bottom: 8px; } .lp-legal p, .lp-legal li { color: var(--color-neutral-text); line-height: 1.95; } .lp-legal ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 4px; } .lp-legal-page .lp-footer { margin-top: 48px; } /* بيانات المدرسة الأهلية (اختيارية) في نموذج الاشتراك */ .lp-private { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; padding: 14px; border: 1px dashed var(--lp-border, #DCE3EA); border-radius: 12px; background: #F8FAFC; } .lp-private[hidden] { display: none; } .lp-private__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #5E6E7E; display: flex; gap: 6px; align-items: flex-start; line-height: 1.8; } @media (max-width: 640px) { .lp-private { grid-template-columns: 1fr; } } /* ========================================================================== إعادة التصميم 2026-10 (الإصدار الثاني) — لون واحد (أخضر مديد) · بلا أقواس البداية تعرض المنتج وهو يعمل: طلب من جوال ولي الأمر ← شاشة المدرسة ← الاعتماد يصل للجوال. ========================================================================== */ :root { --lp-g: var(--color-primary); --lp-g-deep: #0E2235; --lp-g-50: var(--color-primary-50); --lp-soft: #F3F6F9; } /* ---------- البداية ---------- */ .lp-hero--live { padding-block: 48px 72px; background: linear-gradient(180deg, var(--lp-soft), var(--color-bg) 78%); } .lp-hl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; } .lp-hero__kicker { color: var(--lp-g-deep); font-weight: var(--font-bold); font-size: var(--text-small); } .lp-hero--live h1 { margin-top: 10px; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); line-height: 1.45; font-weight: 800; } .lp-hero--live h1 .lp-hero__brand { display: block; color: var(--lp-g); font-size: 1.25em; line-height: 1.2; } .lp-hero--live h1 .lp-hero__sub { display: block; margin-top: 6px; } .lp-hero--live .lp-hero__desc { max-width: 520px; } .lp-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; } .lp-who__q { color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--font-bold); } .lp-who__b { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--lp-g-deep); font-weight: var(--font-bold); font-size: var(--text-small); text-decoration: none; } .lp-who__b:hover { border-color: var(--lp-g); background: var(--lp-g-50); } .lp-who__b .ic { width: 18px; height: 18px; } /* المشهد: شاشة المدرسة + جوال ولي الأمر */ .lp-hl__stage { position: relative; padding: 8px 0 40px; padding-inline-end: 120px; } .lp-scr { border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 24px 60px rgba(6, 54, 45, .14); overflow: hidden; } .lp-scr__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lp-soft); border-bottom: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); } .lp-scr__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); } .lp-scr__bar span { margin-inline-start: 8px; } .lp-scr__body { position: relative; padding: 18px; display: grid; gap: 14px; align-content: start; min-height: 330px; } .lp-scr__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lp-scr__stats div { padding: 12px; border-radius: 12px; background: var(--lp-soft); } .lp-scr__stats b { display: block; font-size: 1.5rem; color: var(--lp-g-deep); line-height: 1.2; } .lp-scr__stats span { font-size: 12px; color: var(--color-text-muted); } .lp-scr__rows { display: grid; gap: 10px; } .lp-scr__rows i { height: 12px; border-radius: 6px; background: var(--color-neutral-50); } .lp-scr__rows i:nth-child(2) { width: 82%; } .lp-scr__rows i:nth-child(3) { width: 90%; } .lp-scr__rows i:nth-child(4) { width: 64%; } .lp-scr__alert { position: absolute; inset-inline: 18px; bottom: 18px; border-radius: 14px; overflow: hidden; background: #fff; border: 2px solid var(--color-danger); box-shadow: 0 16px 34px rgba(180, 35, 24, .18); } .lp-scr__alert-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--color-danger); color: #fff; font-weight: 800; font-size: 13px; } .lp-scr__alert-body { padding: 10px 12px 4px; display: grid; } .lp-scr__alert-body span { font-size: 12px; color: var(--color-text-muted); } .lp-scr__alert-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 12px; } .lp-scr__alert-btns span { text-align: center; padding: 7px; border-radius: 9px; font-weight: 800; font-size: 13px; border: 1px solid var(--color-border-strong); } .lp-scr__alert-btns .is-ok { background: var(--lp-g); border-color: var(--lp-g); color: #fff; } .lp-ph { position: absolute; inset-inline-end: 0; bottom: 0; width: 196px; padding: 26px 12px 14px; border-radius: 30px; background: #fff; border: 7px solid #15222F; box-shadow: 0 24px 50px rgba(6, 54, 45, .22); display: grid; gap: 8px; font-size: 12px; } .lp-ph__notch { position: absolute; top: 6px; inset-inline: 0; margin: auto; width: 58px; height: 6px; border-radius: 6px; background: #15222F; } .lp-ph__t { font-weight: 800; font-size: 13px; } .lp-ph__req { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 12px; background: var(--lp-soft); min-height: 38px; } .lp-ph__st { grid-column: 2; grid-row: 1; justify-self: end; padding: 2px 8px; border-radius: 999px; background: var(--color-warning-50); color: var(--color-warning-text); font-weight: 700; font-size: 11px; } .lp-ph__st--ok { background: var(--color-success-50); color: var(--color-success-text); } .lp-ph__toast { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--lp-g); color: #fff; font-weight: 700; } .lp-ph__btn { text-align: center; padding: 8px; border-radius: 10px; border: 1px dashed var(--color-border-strong); color: var(--color-text-muted); font-weight: 700; } .lp-hl__tag { position: absolute; bottom: 4px; inset-inline-start: 24px; padding: 4px 10px; border-radius: 999px; background: var(--lp-g-deep); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; } /* الحركة الوحيدة في الصفحة: مرة واحدة عند الفتح (بلا حركة = الحالة النهائية مباشرة) */ @media (prefers-reduced-motion: no-preference) { .lp-scr__alert { animation: lp-pop .5s 0.9s var(--ease-out) both; } .lp-scr__alert-btns .is-ok { animation: lp-press .35s 2.1s ease-out both; } .lp-ph__st:not(.lp-ph__st--ok) { animation: lp-out .3s 2.5s ease-out both; } .lp-ph__st--ok { animation: lp-in .35s 2.6s ease-out both; } .lp-ph__toast { animation: lp-drop .5s 2.7s var(--ease-out) both; } .lp-hl__tag { animation: lp-in .4s .6s ease-out both; } } @media (prefers-reduced-motion: reduce) { .lp-ph__st:not(.lp-ph__st--ok) { display: none; } } @keyframes lp-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes lp-press { 0% { transform: none; } 50% { transform: scale(.94); } 100% { transform: none; box-shadow: 0 0 0 4px rgba(20, 45, 68, .2); } } @keyframes lp-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lp-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes lp-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @media (max-width: 1023px) { .lp-hl { grid-template-columns: 1fr; gap: 36px; } .lp-hl__copy { text-align: center; } .lp-hero--live .lp-hero__desc { margin-inline: auto; } .lp-hero--live .lp-hero__ctas, .lp-who { justify-content: center; } .lp-hl__stage { max-width: 620px; margin-inline: auto; width: 100%; } } @media (max-width: 639px) { .lp-hero--live { padding-block: 28px 48px; } .lp-hl__stage { padding-inline-end: 0; padding-bottom: 150px; } .lp-scr__body { min-height: 300px; padding: 14px; } .lp-ph { width: 172px; inset-inline-end: 8px; } .lp-hl__tag { bottom: 60px; inset-inline-start: 8px; } .lp-who__b { flex: 1 1 140px; justify-content: center; } } /* ---------- رأس المسار ---------- */ .lp-path__head { max-width: 760px; margin: 0 auto 40px; text-align: center; } .lp-path__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 800; font-size: var(--text-small); margin-bottom: 14px; background: var(--lp-g-50); color: var(--lp-g-deep); } .lp-path__badge--light { background: rgba(255,255,255,.1); color: #fff; } .lp-path--parent { background: var(--lp-soft); border-block: 1px solid var(--color-border); } .lp-path__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; } @media (max-width: 639px) { .lp-path__cta .lp-btn { width: 100%; } } /* ---------- تبويبات المدرسة: الأمر المختار أخضر غامق بكتابة بيضاء ---------- */ .lp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; } .lp-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-weight: var(--font-bold); cursor: pointer; } .lp-tab:hover { border-color: var(--lp-g); color: var(--lp-g-deep); } .lp-tab[aria-selected="true"] { background: var(--lp-g-deep); border-color: var(--lp-g-deep); color: #fff; } .lp-tabpanel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; } .lp-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .lp-feats li { display: flex; gap: 12px; align-items: flex-start; } .lp-feats__ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--lp-g-50); color: var(--lp-g-deep); } .lp-feats h3 { font-size: 1.0625rem; font-weight: 800; } .lp-feats p { margin-top: 4px; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.85; } @media (max-width: 1023px) { .lp-tabpanel { grid-template-columns: 1fr; } } @media (max-width: 639px) { .lp-feats { grid-template-columns: 1fr; } .lp-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--lp-gutter) * -1); padding-inline: var(--lp-gutter); scrollbar-width: none; } .lp-tab { flex: none; } } /* ---------- لقطات توضيحية ---------- */ .lp-mock { border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 18px 40px rgba(6, 54, 45, .10); padding: 18px; font-size: var(--text-small); } .lp-mock--alert { padding: 0; overflow: hidden; border: 2px solid var(--color-danger); } .lp-mock__alert-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--color-danger); color: #fff; font-weight: 800; } .lp-mock__alert-body { padding: 16px; display: grid; gap: 6px; } .lp-mock__alert-body > b { font-size: 1.0625rem; } .lp-mock__alert-body > span { color: var(--color-text-muted); } .lp-mock__alert-body dl { margin: 8px 0 0; display: grid; gap: 6px; } .lp-mock__alert-body dl div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border); padding-bottom: 6px; } .lp-mock__alert-body dt { color: var(--color-text-muted); } .lp-mock__alert-body dd { margin: 0; font-weight: 700; } .lp-mock__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .lp-mock__btns i { font-style: normal; text-align: center; padding: 10px; border-radius: 10px; font-weight: 800; } .lp-mock__btns .is-ok { background: var(--lp-g); color: #fff; } .lp-mock__btns .is-no { border: 1px solid var(--color-border-strong); } .lp-mock__letter-head, .lp-mock__letter-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .lp-mock__letter-head span { color: var(--color-text-muted); } .lp-mock__lines { display: grid; gap: 8px; margin: 16px 0; } .lp-mock__lines i { height: 8px; border-radius: 4px; background: var(--color-neutral-50); } .lp-mock__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .lp-mock__row:last-child { border-bottom: 0; } .lp-mock__row i { font-style: normal; font-weight: 800; padding: 2px 10px; border-radius: 999px; } .lv-high { background: var(--color-danger-50); color: var(--color-danger-text); } .lv-mid { background: var(--color-warning-50); color: var(--color-warning-text); } .lv-low { background: var(--color-teal-50); color: var(--color-teal-text); } .lp-mock--stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; } .lp-mock--stats b { display: block; font-size: 1.75rem; color: var(--lp-g-deep); } .lp-mock--stats span { color: var(--color-text-muted); } /* ---------- خطوات ولي الأمر: بطاقة لكل خطوة بشاشة جوال ---------- */ .lp-guide { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .lp-guide__step { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 20px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); } .lp-guide__n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--lp-g-deep); color: #fff; font-weight: 800; } .lp-guide__txt h3 { font-size: 1.125rem; font-weight: 800; } .lp-guide__txt p { margin-top: 6px; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.9; } .lp-mphone { align-self: end; width: 100%; max-width: 230px; margin-inline: auto; min-height: 140px; padding: 12px; border-radius: 22px; border: 5px solid #15222F; background: #fff; display: grid; gap: 8px; align-content: start; font-size: 12.5px; } .lp-mphone__t { font-weight: 800; color: var(--color-text); } .lp-mphone__otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; direction: ltr; } .lp-mphone__otp i { font-style: normal; text-align: center; padding: 6px 0; border: 1.5px solid var(--color-border-strong); border-radius: 8px; font-weight: 800; } .lp-mphone__btn { text-align: center; padding: 8px; border-radius: 10px; background: var(--lp-g); color: #fff; font-weight: 800; } .lp-mphone__kid { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--lp-soft); } .lp-mphone__kid small { margin-inline-start: auto; color: var(--color-text-muted); } .lp-mphone__f { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border); padding-bottom: 6px; } .lp-mphone__f span { color: var(--color-text-muted); } .lp-mphone__note { display: flex; gap: 8px; padding: 10px; border-radius: 10px; background: var(--color-success-50); color: var(--color-success-text); } .lp-mphone__note span { display: grid; } .lp-mphone__note small { color: var(--color-text-muted); } .lp-mphone__track { display: flex; gap: 4px; } .lp-mphone__track i { flex: 1; font-style: normal; text-align: center; font-size: 11px; padding: 4px 0; border-radius: 6px; background: var(--color-neutral-50); color: var(--color-text-muted); } .lp-mphone__track .is-done { background: var(--lp-g); color: #fff; } .lp-mphone__big { margin: 4px auto 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-g); color: #fff; font-weight: 800; font-size: 1.0625rem; box-shadow: 0 0 0 8px var(--lp-g-50); } .lp-mphone__hint { text-align: center; color: var(--color-text-muted); } .lp-mphone__bars { display: flex; align-items: flex-end; gap: 14px; height: 64px; padding-inline: 20px; } .lp-mphone__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: var(--lp-g); } .lp-mphone__trend { padding: 6px 10px; border-radius: 10px; background: var(--color-success-50); color: var(--color-success-text); font-weight: 800; text-align: center; } @media (max-width: 1023px) { .lp-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .lp-guide { grid-template-columns: 1fr; } } /* ---------- إدارات التعليم ---------- */ .lp-district { background: var(--lp-ink-deep); color: #fff; } .lp-district__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; } .lp-district h2 { color: #fff; margin-top: 4px; } .lp-district__copy p { margin-top: 14px; color: var(--lp-on-deep-muted); line-height: 1.9; } .lp-district__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lp-district__list li { display: flex; gap: 12px; padding: 16px; border-radius: 14px; background: var(--lp-ink-deep-2); } .lp-district__list .ic { color: #8FE0D7; margin-top: 2px; } .lp-district__list b { display: block; margin-bottom: 4px; color: #fff; } .lp-district__list span { color: var(--lp-on-deep-muted); font-size: var(--text-small); line-height: 1.8; } @media (max-width: 1023px) { .lp-district__in { grid-template-columns: 1fr; } } @media (max-width: 639px) { .lp-district__list { grid-template-columns: 1fr; } } /* ---------- الأسئلة: مجموعتان ---------- */ .lp-faq-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .lp-faq-group__t { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 800; margin-bottom: 12px; color: var(--lp-g-deep); } @media (max-width: 1023px) { .lp-faq-groups { grid-template-columns: 1fr; } } .lp-path, .lp-district { content-visibility: auto; contain-intrinsic-size: auto 1000px; } /* لون واحد للصفحة كلها: لمسات الكركمي القديمة تصبح من درجات الأخضر (النعناعي من الشعار على الخلفيات الداكنة) */ :root { --lp-gold: #7FD8CF; --lp-gold-text: #0E2235; --lp-gold-50: #E8F5F3; --lp-gold-100: #CDEBE6; } .lp-eyebrow__dot { box-shadow: 0 0 0 4px rgba(0, 169, 157, .18); } .lp-kicker::before { background: var(--color-primary); } .lp-final__mark { border-color: rgba(127, 216, 197, .55); } /* ---------- اختيار المدينة: بحث ذكي ---------- */ .lp-combo { position: relative; display: block; } .lp-combo input { width: 100%; } .lp-combo__list { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 4px); max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 12px; box-shadow: 0 14px 30px rgba(6, 54, 45, .14); } .lp-combo__list [role=option] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; cursor: pointer; } .lp-combo__list [role=option] span { color: var(--color-text-muted); font-size: 12px; } .lp-combo__list [role=option]:hover, .lp-combo__list [aria-selected="true"] { background: var(--color-primary-50); color: #0E2235; } .lp-combo__empty { padding: 10px 12px; color: var(--color-text-muted); font-size: var(--text-small); } /* ---------- زر تسجيل الدخول: ظاهر دائمًا في الشريط العلوي (مهم لكل من يدخل) ---------- */ .lp-header__login { display: inline-flex !important; gap: 8px; background: #fff; color: #0E2235; border: 1.5px solid var(--color-primary); font-weight: 800; } .lp-header__login:hover { background: var(--color-primary-50); } .lp-header__login .ic { width: 20px; height: 20px; stroke-width: 2.2; } @media (max-width: 639px) { .lp-header__cta { display: none; } /* «اطلب الاشتراك» موجود في البداية وفي القائمة */ .lp-header__login { min-height: 42px; padding-inline: 14px; } } @media (max-width: 359px) { .lp-header__login span { display: none; } .lp-header__login { padding-inline: 10px; } } /* ---------- أيقونات تبويبات المدرسة أوضح ---------- */ .lp-tab { min-height: 54px; padding: 0 16px 0 20px; gap: 10px; font-size: 1.0625rem; } .lp-tab .ic { box-sizing: content-box; width: 22px; height: 22px; padding: 7px; border-radius: 9px; background: var(--color-primary-50); color: #0E2235; stroke-width: 2.1; } .lp-tab:hover .ic { background: #DCEFEC; } .lp-tab[aria-selected="true"] .ic { background: rgba(255,255,255,.16); color: #fff; } .lp-tab[aria-selected="true"] { box-shadow: 0 8px 20px rgba(7, 84, 69, .25); } .lp-feats__ic { width: 44px; height: 44px; } .lp-feats__ic .ic { width: 22px; height: 22px; stroke-width: 2.1; } @media (max-width: 639px) { .lp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; margin-inline: 0; padding-inline: 0; } .lp-tab { justify-content: flex-start; min-height: 52px; padding: 0 10px; font-size: .9375rem; white-space: normal; text-align: start; line-height: 1.4; } .lp-tab .ic { width: 20px; height: 20px; padding: 6px; flex: none; } } /* ---------- لون لكل تبويب من ألوان المنصة المعتمدة (الأيقونة في التبويب وفي محتواه) ---------- */ [data-tone="ops"] { --tone: var(--color-primary); --tone-50: var(--color-primary-50); --tone-ink: #0E2235; } [data-tone="edu"] { --tone: var(--color-warning); --tone-50: var(--color-warning-50); --tone-ink: var(--color-warning-text); } [data-tone="mon"] { --tone: var(--color-teal); --tone-50: var(--color-teal-50); --tone-ink: var(--color-teal-text); } [data-tone="adm"] { --tone: var(--color-secondary); --tone-50: var(--color-secondary-50); --tone-ink: var(--color-secondary-text); } .lp-tab[data-tone] .ic { background: var(--tone-50); color: var(--tone-ink); } .lp-tab[data-tone]:hover { border-color: var(--tone); } .lp-tab[data-tone][aria-selected="true"] .ic { background: #fff; color: var(--tone-ink); } .lp-tabpanel[data-tone] .lp-feats__ic { background: var(--tone-50); color: var(--tone-ink); } .lp-tab[data-tone] .ic { background: var(--tone); color: #fff; } .lp-tab[data-tone][aria-selected="true"] .ic { background: #fff; color: var(--tone-ink); } /* هوية «مديد» (2026-10-24): الرمز الجديد داخل بلاطة بيضاء */ .lp-brand__mark { background: #fff; box-shadow: 0 1px 3px rgba(20, 45, 68, .2); } .lp-final__mark, .lp-final__mark[class] { background: #fff; border-color: rgba(255, 255, 255, .6); } .lp-brand__mark .brand-mark, .lp-final__mark .brand-mark { width: 80%; height: 80%; object-fit: contain; } /* شعار «مديد» أعلى العرض الرئيسي */ .lp-hero__logo { display: block; width: 88px; height: 88px; margin: 0 0 var(--space-3); object-fit: contain; } @media (max-width: 1023px) { .lp-hero__logo { margin-inline: auto; width: 76px; height: 76px; } } /* هوية «مديد»: الاسم الكبير بتركواز الشعار (الداكن للتباين) والأزرار كحلية */ .lp-hero--live h1 .lp-hero__brand { color: var(--color-teal); } /* ولي الأمر: أيقونة مديد على الشاشة الرئيسية (2026-10-24) */ .lp-mphone--home { background: linear-gradient(160deg, #E8F5F3, #D2DDE8); } .lp-mphone__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; padding: 6px 2px; justify-items: center; } .lp-mphone__apps > i { width: 40px; height: 40px; border-radius: 11px; background: rgba(20, 45, 68, .12); } .lp-mphone__app { display: grid; justify-items: center; gap: 3px; } .lp-mphone__app img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 4px 10px rgba(20, 45, 68, .22); margin-top: -2px; } .lp-mphone__app small { font-size: 10.5px; font-weight: 700; color: var(--color-text); } /* حقائق تحت العرض الرئيسي */ .lp-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; } .lp-facts li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-neutral-text); line-height: 1.6; } .lp-facts .ic { flex: none; color: var(--color-secondary-text, #00857B); } @media (max-width: 639px) { .lp-facts { grid-template-columns: 1fr; } } /* تبدأ مدرستك خلال أيام */ .lp-start { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; } .lp-start li { position: relative; padding: 24px 22px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); } .lp-start__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 14px; } .lp-start h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 6px; } .lp-start p { color: var(--color-text-muted); font-size: 15px; line-height: 1.85; } @media (max-width: 899px) { .lp-start { grid-template-columns: 1fr; max-width: 640px; } } /* ========================================================================== التصميم — المرحلة 3 (2026-10-24) عنصر واحد لافت: «بيت» الشعار يحتضن المنتج في البداية (المدرسة · ولي الأمر · البوابة = أشخاص الشعار الثلاثة). كل ما عداه هادئ: الكحلي للعناوين والأزرار · التركوازي إبراز قليل · الذهبي لمسار ولي الأمر وحده. خط Cairo بسلّم 56 · 40 · 28 · 20 · 16 · العناوين تبدأ من اليمين بلا عناوين صغيرة فوقها. حركة واحدة فقط: مشهد البداية عند الفتح (لا ظهور تدريجي للأقسام ولا حركة متكررة). ========================================================================== */ :root { --lp-navy: #142D44; --lp-teal: #00A99D; --lp-teal-text: #00857B; --lp-house-in: #F4F8FA; --lp-amber: #C98A1A; --lp-amber-text: #7A5208; --lp-amber-50: #FBF6EC; --lp-amber-100: #F2E2BF; } /* الحركة: لا شيء غير مشهد البداية */ .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; } .lp-flow__pulse { display: none; } .lp-step.is-active .lp-step__card { transform: none; } /* العناوين */ .lp-section__head, .lp-path__head { max-width: 720px; margin-inline: 0; text-align: start; } .lp-h2 { font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem); line-height: 1.35; font-weight: 800; color: var(--lp-navy); text-wrap: balance; } .lp-dis .lp-h2, .lp-district .lp-h2 { color: #fff; } .lp-lead { max-width: 640px; } .lp-h3, .lp-cmp__h, .lp-addons .lp-h3 { text-align: start; font-size: 1.25rem; font-weight: 800; color: var(--lp-navy); } .lp-pctl { justify-content: flex-start; margin-inline: 0; } /* ---------- البداية: العنوان ---------- */ .lp-hero--live { padding-block: 40px 96px; background: var(--color-bg); } .lp-hero--live h1 { margin-top: 0; font-size: clamp(2rem, 1.05rem + 3.1vw, 3.5rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--lp-navy); } .lp-hero--live h1 .lp-hero__brand { font-size: .5em; line-height: 1.4; color: var(--lp-teal-text); margin-bottom: 10px; } .lp-hero--live h1 .lp-hero__sub { margin-top: 0; } .lp-hero--live .lp-hero__desc { margin-top: 18px; font-size: 1.125rem; } /* ---------- البداية: البيت ---------- */ .lp-hl__stage.lp-house { isolation: isolate; padding-block: 112px 84px; padding-inline: 68px 132px; margin-bottom: 24px; } /* الجوال يكسر الجدار في نهاية السطر */ .lp-house__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; filter: drop-shadow(0 28px 44px rgba(20, 45, 68, .2)); } .lp-house .lp-scr { box-shadow: 0 10px 28px rgba(20, 45, 68, .12); } .lp-house .lp-scr__body { min-height: 300px; } .lp-house .lp-ph { inset-inline-end: -22px; bottom: 26px; } .lp-hl__tag { display: none; } .lp-gate { position: absolute; inset-inline-start: -22px; bottom: 44px; width: 168px; padding: 12px 14px; border-radius: 16px; background: var(--lp-navy); color: #fff; display: grid; gap: 2px; box-shadow: 0 18px 36px rgba(20, 45, 68, .3); } .lp-gate__t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #8FE0D7; } .lp-gate b { font-size: 1.125rem; line-height: 1.4; } .lp-gate small { font-size: 12px; color: rgba(255, 255, 255, .72); } @media (prefers-reduced-motion: no-preference) { .lp-gate { animation: lp-drop .5s 3.2s var(--ease-out) both; } } @media (max-width: 1023px) { .lp-hl__stage.lp-house { max-width: 600px; } } @media (max-width: 639px) { .lp-hl__stage.lp-house { padding-block: 76px 220px; padding-inline: 30px; } .lp-house .lp-scr__body { min-height: 270px; } .lp-house .lp-ph { width: 168px; inset-inline-end: 6px; bottom: 18px; padding-top: 22px; } .lp-gate { width: 140px; inset-inline-start: 6px; bottom: 40px; padding: 10px 12px; } .lp-gate b { font-size: 1rem; } } /* ---------- مسار ولي الأمر: الذهبي ---------- */ .lp-path--parent { background: var(--lp-amber-50); border-color: var(--lp-amber-100); } .lp-path--parent .lp-path__badge { background: var(--lp-amber-100); color: var(--lp-amber-text); } .lp-path--parent .lp-guide__step { border-color: var(--lp-amber-100); } .lp-path--parent .lp-guide__n { background: var(--lp-amber); color: var(--lp-navy); } .lp-path--parent .lp-mphone__btn, .lp-path--parent .lp-mphone__track .is-done, .lp-path--parent .lp-mphone__big { background: var(--lp-amber); color: var(--lp-navy); } .lp-path--parent .lp-mphone__big { box-shadow: 0 0 0 8px var(--lp-amber-100); } .lp-faq-group--parent .lp-faq-group__t { color: var(--lp-amber-text); } .lp-who__b[href="#parent"] .ic { color: var(--lp-amber); } .lp-who__b[href="#parent"]:hover { border-color: var(--lp-amber); background: var(--lp-amber-50); } /* ---------- تبدأ مدرستك: خط زمني لا بطاقات ---------- */ .lp-start { gap: 0; max-width: none; margin: 0; padding-top: 22px; } .lp-start li { padding: 34px 0 0; padding-inline-end: 32px; border: 0; border-top: 2px solid var(--color-border); border-radius: 0; background: transparent; } .lp-start li:first-child { border-top-color: var(--lp-teal); } .lp-start__n { position: absolute; top: -21px; inset-inline-start: 0; margin: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--lp-navy); box-shadow: 0 0 0 6px var(--color-surface); } .lp-start h3 { font-size: 1.25rem; font-weight: 800; color: var(--lp-navy); } @media (max-width: 899px) { .lp-start { padding-top: 0; } .lp-start li { border-top: 0; border-inline-start: 2px solid var(--color-border); padding: 0 0 28px; padding-inline-start: 36px; } .lp-start li:first-child { border-inline-start-color: var(--lp-teal); } .lp-start li:last-child { border-inline-start-color: transparent; } .lp-start__n { top: -4px; inset-inline-start: -21px; } } .lp-ph__st { white-space: nowrap; } /* تواصل معنا (2026-10-25) */ .lp-ct { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--color-border); } .lp-ct__i { display: flex; gap: 14px; padding: 26px 0 0; padding-inline-end: 28px; } .lp-ct__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-primary-50); color: var(--lp-navy, #142D44); } .lp-ct__i--wa .lp-ct__ic { background: #E7F7EE; color: #1A7F4B; } .lp-ct__i h3 { font-size: 1.125rem; font-weight: 800; color: var(--lp-navy, #142D44); } .lp-ct__i p { margin: 2px 0 12px; color: var(--color-text-muted); font-size: 15px; } .lp-ct__mail { font-weight: 700; color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; } .lp-social { display: flex; gap: 10px; margin-top: 28px; } .lp-social__a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-border-strong); color: var(--lp-navy, #142D44); } .lp-social__a .ic { width: 18px; height: 18px; } a.lp-social__a:hover { background: var(--lp-navy, #142D44); color: #fff; border-color: transparent; } .lp-social__a.is-soon { opacity: .45; } .lp-social--sm { margin-top: 14px; } .lp-social--sm .lp-social__a { width: 34px; height: 34px; border-color: rgba(255,255,255,.25); color: inherit; } .lp-footer__ct { display: grid; gap: 6px; margin-top: 14px; } .lp-footer__ct a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; } .lp-footer__ct a:hover { text-decoration: underline; } .lp-ct-quick { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; } .lp-ct-quick a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-primary-dark); } @media (max-width: 899px) { .lp-ct { grid-template-columns: 1fr; border-top: 0; } .lp-ct__i { border-top: 1px solid var(--color-border); padding-block: 20px; } }