/* ===================================================================== * landing_mobile.css — phone layer for landing.php * Design: Claude Design "Gastrozukunft Mobile" (2026-07-27), integrated * with the owner's overrides: * · language switch stays in the header pill only (NOT in the nav sheet) * and keeps the platform flag assets (/assets/img/flags/*.png) * · the existing .lp-phone device frames are kept as they are * · the existing .lp-sync orb is kept as the Live-Sync mark * · the existing chat FAB (#lsc-root) is not touched * * CONTRACT: everything below the preamble lives inside * @media (max-width: 760px). The desktop rendering is unchanged by * construction — the only global rules are "new phone-only element is * hidden", which cannot affect anything that existed before. * * Baseline this replaces (measured 2026-07-27, real browser, 390x844): * page 23 875 px · sticky header 160 px · QR card 93 px (AR 78 px). * ===================================================================== */ /* ── preamble: phone-only elements are inert everywhere by default ──── */ .lp-burger, .lp-progress, .lp-mnav, .lp-fold, .lp-product__tabs, .lp-qr-card__go, .lp-proof__hint, .lp-dots, .lang-menu__code { display: none; } /* STICKY HEADER FIX (all widths, landing only). public.css declares `html, body { overflow-x: hidden }`. `hidden` makes the root a scroll container, and a `position: sticky` descendant of a scroll container sticks to THAT container — i.e. never to the viewport. The header was therefore scrolling away on every width since it was written. `clip` clips exactly the same way but does NOT create a scroll container, so sticky works again. Guarded: browsers without `overflow: clip` keep `hidden` (no regression — the gate proves nothing overflows horizontally anyway). */ @supports (overflow-x: clip) { html.lp-root, html.lp-root > body.lp-page { overflow-x: clip; } } /* The ONLY other rule in this file that applies at every width, and deliberately so: letter-spacing tears apart the joining ligatures of Arabic script, so the uppercase/tracked kicker style must never reach an RTL page. This is a text-rendering defect fix (zero-tolerance rule), not a layout change — Arabic has no case, so dropping text-transform changes nothing visually. */ [dir="rtl"] .lp-page .lp-kicker, [dir="rtl"] .lp-page .lp-bundles__title, [dir="rtl"] .lp-page .lp-mnav__kicker { letter-spacing: normal; text-transform: none; } /* ═══════════════════════════════════════════════════════════════════════ PHONE ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* ---------------------------------------------------------------- shell */ .lp-page { --lp-gutter: 22px; --lp-head: 58px; } .lp-wrap { padding: 32px var(--lp-gutter) 34px; } .lp-sec--hero .lp-wrap { padding: 26px var(--lp-gutter) 34px; } .lp-sec { border-top: 1px solid rgba(11,18,32,0.06); } .lp-sec--hero { border-top: 0; } /* typography scale */ .lp-h2 { font-size: 26px; line-height: 1.17; letter-spacing: -0.02em; } .lp-h2--sm { font-size: 24px; line-height: 1.22; } .lp-lead { margin-top: 12px; font-size: 15px; line-height: 1.6; } .lp-kicker { font-size: 11.5px; font-weight: 800; } /* several section heads carry an inline margin-bottom:42px — too much air on a phone, and inline styles only lose to !important */ .lp-head--center { text-align: start; margin-inline: 0; margin-bottom: 18px !important; } .lp-head--center .lp-lead { margin-inline: 0; } /* Arabic: Cairo needs air and MUST NOT be letter-spaced — spacing breaks the joining ligatures, and a 1.1 line-height clips the descenders (ي ج ع). */ [dir="rtl"] .lp-page .lp-kicker { letter-spacing: normal; text-transform: none; font-size: 12.5px; font-weight: 700; } [dir="rtl"] .lp-page .lp-h2 { font-size: 23px; line-height: 1.5; letter-spacing: normal; padding-block-end: 3px; } [dir="rtl"] .lp-page .lp-h2--sm { font-size: 22px; } [dir="rtl"] .lp-page .lp-lead { line-height: 1.75; } [dir="rtl"] .lp-page .lp-hero__h1 { font-size: 31px; line-height: 1.5; letter-spacing: normal; padding-block-end: 4px; } /* ---------------------------------------------------------------- header */ /* 160 px over three wrapped rows → one 56 px row. The CTA is dropped here because the sticky bottom bar already carries it the whole way down. */ .lp-header { background: rgba(246,247,251,0.9); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } .lp-header__inner { flex-wrap: nowrap; gap: 8px; padding: 0 16px 0 var(--lp-gutter); min-height: 56px; } [dir="rtl"] .lp-header__inner { padding: 0 var(--lp-gutter) 0 16px; } .lp-header__right { flex-wrap: nowrap; gap: 8px; margin-inline-start: auto; } .lp-brand { min-height: 44px; gap: 9px; } .lp-brand__logo { width: 40px; height: auto; } .lp-brand__name { font-size: 16.5px; } .lp-header__cta { display: none; } .lp-nav { display: none; } /* language pill: flag + ISO code only (the full name made it span a whole row) */ .lang-menu__code { display: inline; font-weight: 800; font-size: 13.5px; letter-spacing: 0.02em; } .lp-header .lang-menu__current { display: none; } .lp-header .lang-menu__toggle { min-height: 44px; min-width: 56px; gap: 6px; padding: 0 10px; border-radius: 12px; } .lp-header .lang-menu__flag { width: 18px; height: 18px; } .lp-header .lang-menu__chevron { font-size: 9px; margin-inline-start: -2px; } .lp-header .lang-menu__list { min-width: 214px; border-radius: 16px; } .lp-header .lang-menu__item { min-height: 44px; } .lp-burger { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 12px; border: 1px solid rgba(11,18,32,0.14); background: #fff; cursor: pointer; } .lp-burger__bars { display: flex; flex-direction: column; gap: 4px; width: 18px; } .lp-burger__bars span { height: 2px; border-radius: 2px; background: #0b1220; } /* read-position line — orientation on a page this long */ .lp-progress { display: block; height: 2px; background: rgba(11,18,32,0.06); } .lp-progress span { display: block; height: 2px; width: 0; background: linear-gradient(90deg, #ff7a18, #c14a00); } [dir="rtl"] .lp-progress span { background: linear-gradient(-90deg, #ff7a18, #c14a00); margin-inline-start: auto; } /* -------------------------------------------------------- nav sheet */ .lp-mnav { display: block; position: fixed; inset: 0; z-index: 200; } .lp-mnav[hidden] { display: none; } .lp-mnav__scrim { position: absolute; inset: 0; background: rgba(11,18,32,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .lp-mnav__sheet { position: absolute; inset-inline: 0; inset-block-end: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 8px var(--lp-gutter) calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow: auto; animation: lpsheet .22s cubic-bezier(.22,1,.36,1); } @keyframes lpsheet { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .lp-mnav__grab { display: block; width: 44px; height: 4px; border-radius: 999px; background: rgba(11,18,32,0.16); margin: 8px auto 14px; } .lp-mnav__kicker { display: block; color: #8a95a8; font-weight: 800; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; } [dir="rtl"] .lp-mnav__kicker { letter-spacing: normal; text-transform: none; font-size: 12.5px; font-weight: 700; } .lp-mnav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .lp-mnav__grid a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 13px; background: #f1f4fa; color: #0b1220; font-weight: 700; font-size: 14.5px; line-height: 1.25; text-decoration: none; } [dir="rtl"] .lp-mnav__grid a { line-height: 1.5; } .lp-mnav__cta { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 18px; border-radius: 14px; background: #c14a00; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; } .lp-mnav__close { display: block; width: 100%; min-height: 48px; margin-top: 8px; border-radius: 14px; border: 1px solid rgba(11,18,32,0.14); background: #fff; color: #4d5a70; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; } body.lp-nav-locked { overflow: hidden; } /* ------------------------------------------------------------ folds */ /* `.is-folded` is a no-op above 760px, so every folded block stays fully rendered on desktop AND stays in the DOM here (SEO + in-page search). */ .is-folded { display: none !important; } .lp-fold { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 14px; margin-top: 14px; border: 1px solid rgba(11,18,32,0.1); border-radius: 15px; background: #fff; font: inherit; color: #0b1220; text-align: start; cursor: pointer; } .lp-fold--quiet { background: #f7f8fc; } .lp-fold__txt { flex: 1; min-width: 0; } .lp-fold__t { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.3; } .lp-fold__sub { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #4d5a70; } .lp-fold__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #f7f8fc; border: 1px solid rgba(11,18,32,0.12); display: grid; place-items: center; } .lp-fold--quiet .lp-fold__ic { background: #fff; } /* physical borders on purpose: a "more/less" chevron points DOWN in every writing direction, so it must not mirror the way a "next" arrow does */ .lp-fold__ic::before { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid #0b1220; border-bottom: 2px solid #0b1220; transform: rotate(45deg); transition: transform .2s ease; } .lp-fold[aria-expanded="true"] .lp-fold__ic::before { transform: rotate(225deg); margin-top: 2px; } /* --------------------------------------------------------- carousels */ /* Horizontal snap rails bleed to the screen edges so a half-visible next card signals "there is more" — each rail owns its own overflow, the document never scrolls sideways. */ .lp-steps, .lp-print__grid, .lp-rev__cards { display: flex !important; grid-template-columns: none !important; max-width: none !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--lp-gutter) * -1) !important; padding: 4px var(--lp-gutter) 6px; } .lp-steps::-webkit-scrollbar, .lp-print__grid::-webkit-scrollbar, .lp-rev__cards::-webkit-scrollbar { display: none; } .lp-steps > *, .lp-print__grid > *, .lp-rev__cards > * { scroll-snap-align: center; flex: 0 0 80%; } /* without scroll-padding the snap engine aligns a card to the raw scrollport edge on first paint, silently scrolling the gutter away */ .lp-steps, .lp-print__grid, .lp-rev__cards, .lp-rgrid { scroll-padding-inline: var(--lp-gutter); } .lp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .lp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(11,18,32,0.18); transition: background .2s, width .2s; } .lp-dots span.is-on { width: 18px; border-radius: 999px; background: #c14a00; } /* ------------------------------------------------------------- hero */ /* display:contents lets the copy children and the device share ONE flex column, so the order can be promise → action → device → numbers. */ /* align-items:center comes from the desktop grid — as a column it would shrink-wrap every child, so CTAs/chips/stat cards must be re-stretched. */ .lp-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .lp-hero__copy { display: contents; } .lp-badge { order: 1; } .lp-hero__h1 { order: 2; margin-top: 16px; font-size: 33px; line-height: 1.07; } .lp-hero__lead { order: 3; margin-top: 14px; font-size: 15.5px; max-width: none; } .lp-hero__cties { order: 4; flex-direction: column; gap: 10px; margin-top: 22px; } .lp-hero__cties .lp-btn { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 15px; font-size: 16.5px; padding: 0 18px; } .lp-chips { order: 5; gap: 7px; margin-top: 20px; } .lp-chip { padding: 6px 11px; font-size: 12.5px; } .lp-hero__visual { order: 6; margin-top: 24px; } .lp-hero__cards { order: 7; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .lp-hero__source { order: 8; margin-top: 10px; align-items: flex-start; font-size: 11.5px; line-height: 1.45; } .lp-hero__visual { flex-direction: column; min-height: 0; } .lp-phone { width: min(268px, 100%); } /* QR card: was a 93 px flex sibling of the phone (78 px in Arabic) because the axis stayed `row` when it turned static. Own row, real card. */ .lp-qr-card { position: static; width: 100%; max-width: none; margin: 16px 0 0; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; box-shadow: 0 10px 26px rgba(15,23,42,.09); } .lp-qr-card__img { flex: 0 0 86px; width: 86px; height: 86px; aspect-ratio: auto; border-radius: 13px; padding: 5px; } .lp-qr-card__body { flex: 1; min-width: 0; } .lp-qr-card__title { margin-top: 0; font-size: 16px; } .lp-qr-card__sub { margin-top: 3px; font-size: 13.5px; line-height: 1.45; } .lp-qr-card__go { display: inline; flex: 0 0 auto; color: #b04600; font-weight: 800; font-size: 18px; } [dir="rtl"] .lp-qr-card__go { transform: scaleX(-1); display: inline-block; } .lp-stat { padding: 12px 13px; border-radius: 16px; gap: 8px; flex-wrap: wrap; align-items: center; align-content: flex-start; } /* "34+" is a number followed by a sign: under RTL the bidi algorithm moves the "+" to the leading side and it reads "+34". Isolating the run as LTR keeps the glyph order while the box itself still flows right-to-left. */ .lp-stat__num, .lp-proof__count { direction: ltr; unicode-bidi: isolate; } .lp-stat__num { font-size: 22px; } .lp-stat__label { flex-basis: 100%; font-size: 12.5px; line-height: 1.35; } .lp-stat__stars { flex-basis: 100%; align-items: flex-start; } .lp-stat__stars .s { font-size: 13px; } .lp-stat__stars .c { font-size: 12.5px; line-height: 1.35; } /* ------------------------------------------------------- commission */ .lp-bars { margin-top: 22px; gap: 14px; } .lp-bars > div { padding: 14px; border-radius: 16px; } .lp-bars > div:first-child { background: #fef2f2; border: 1px solid rgba(220,38,38,.16); } .lp-bars > div:nth-child(2) { background: #f0fdf4; border: 1px solid rgba(22,163,74,.2); } .lp-bar__head { margin-bottom: 10px; gap: 10px; flex-wrap: nowrap; } .lp-bar__label { font-size: 14px; font-weight: 800; } .lp-bar__val { font-size: 13px; text-align: end; } .lp-bar__track { height: 12px; border-radius: 999px; } .lp-bar__fill { border-radius: 999px; } .lp-bars__foot { padding-top: 2px; } .lp-bars__keep { font-size: 17px; } /* ------------------------------------------------------- calculator */ /* The result is the argument — it stays pinned while the sliders move. NB: `.lp-wrap--narrow` is shared with #kapazitaet, so its side padding must never be zeroed here — doing so pushed the Kapazitäts-Check card flush against both screen edges (owner 2026-07-27). Every card below therefore keeps the normal page gutter. */ #lpCalc > .lp-head--center { margin-bottom: 0 !important; } .lp-calc__grid { display: flex; flex-direction: column; gap: 0; } .lp-calc__result { order: 1; position: sticky; top: var(--lp-head); z-index: 5; margin: 20px 0 0; padding: 16px 18px; border-radius: 20px; background: linear-gradient(160deg, #131c2e, #0b1220); } .lp-calc__result-label { font-size: 12.5px; letter-spacing: 0; color: #a8b3c7; } .lp-calc__big { margin: 4px 0 0; font-size: 34px; } .lp-calc__per { font-size: 12.5px; } .lp-calc__rule { margin: 12px 0; } .lp-calc__row { margin-bottom: 8px; font-size: 12.5px; } .lp-calc__row span:first-child { font-size: 12.5px; } .lp-calc__row span:last-child { font-size: 14px; } .lp-calc__cta { margin-top: 12px; padding: 14px 18px; border-radius: 13px; font-size: 15px; } .lp-calc__inputs { order: 2; margin: 16px 0 0; padding: 16px; border-radius: 20px; } .lp-calc__field { margin-bottom: 18px; } .lp-calc__field-head { margin-bottom: 4px; gap: 10px; } .lp-calc__field label { font-size: 13.5px; line-height: 1.4; } .lp-calc__field-val { font-size: 16px; white-space: nowrap; } .lp-calc__range { height: 40px; } .lp-calc__preset { min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 800; } /* legally mandatory — full text, never behind a tap */ .lp-calc__foot { margin: 14px 0 0; text-align: start; font-size: 11.5px; line-height: 1.55; } /* ------------------------------------------------------------- how */ .lp-steps { margin-top: 4px; } .lp-step { padding: 16px; border-radius: 18px; } .lp-step__n { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; background: #fff; border: 1px solid rgba(193,74,0,0.24); } .lp-step h3 { margin: 12px 0 0; font-size: 16px; } .lp-step p { margin-top: 7px; font-size: 13.5px; } .lp-how__media { margin-top: 4px; gap: 12px; } #lpOnb .lp-slot-head { display: none; } /* the fold header already names it */ .lp-onb__nav { width: 40px; height: 40px; } .lp-onb__nav--prev { inset-inline-start: 4px; } .lp-onb__nav--next { inset-inline-end: 4px; } .lp-figure { border-radius: 14px; box-shadow: 0 10px 26px rgba(15,23,42,.09); } /* --------------------------------------------------------- capacity */ .lp-kap__launch { padding: 18px 16px; border-radius: 20px; box-shadow: 0 8px 20px rgba(15,23,42,.06); } .lp-kap__launch-title { font-size: 17px; } .lp-kap__launch-sub { font-size: 13.5px; } .lp-kap__launch-cta { width: 100%; padding: 15px 20px; } /* ---------------------------------------------------------- product */ /* One device at a time behind a segmented control (two full-bezel phones stacked were 2 191 px). The device frame itself is unchanged. */ .lp-try { margin-bottom: 18px; padding: 13px 14px; border-radius: 16px; gap: 11px; } .lp-try__text { font-size: 13.5px; flex-basis: 100%; } .lp-try__cta { width: 100%; margin-inline-start: 0; justify-content: center; text-align: center; } .lp-product__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-top: 18px; border-radius: 14px; background: #eef1f7; } .lp-product__tab { min-height: 46px; border: 0; border-radius: 10px; background: transparent; color: #4d5a70; font: inherit; font-weight: 800; font-size: 13.5px; line-height: 1.25; cursor: pointer; } .lp-product__tab.is-active { background: #fff; color: #0b1220; box-shadow: 0 4px 10px rgba(15,23,42,.08); } .lp-product__row { display: flex; flex-direction: column; gap: 0; } .lp-product__col { display: none; flex: 1 1 auto; max-width: none; width: 100%; order: 2; } .lp-product__col.is-active { display: flex; } .lp-product__tag { display: none; } /* the tab label already says it */ .lp-phone--sm { width: min(250px, 100%); margin-top: 0; } .lp-phone__cap { margin-top: 14px; } .lp-phone__cap h3 { font-size: 16px; } .lp-phone__cap p { margin-top: 6px; font-size: 13.5px; } /* the platform Live-Sync orb, laid out as a horizontal mark above the device */ .lp-sync { order: 1; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 12px 0 12px; padding: 0; } .lp-sync__orb { width: 40px; height: 40px; } .lp-sync__core { width: 32px; height: 32px; } .lp-sync__core svg { width: 15px; height: 15px; } .lp-sync__ring { inset: 3px; } .lp-sync__label { font-size: 12.5px; } /* ------------------------------------------------------------ value */ .lp-vgrid { margin-top: 18px; grid-template-columns: 1fr; gap: 9px; } .lp-vcard { padding: 13px 14px; border-radius: 15px; gap: 12px; background: #fff; } .lp-vcard__n { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; background: #fff5ec; border-color: transparent; } .lp-vcard__body { gap: 4px; padding-top: 0; } .lp-vcard__body h3 { font-size: 14.5px; line-height: 1.3; } .lp-vcard__body p { font-size: 13px; line-height: 1.5; } /* ------------------------------------------------------------ print */ /* Owner: "صور Online-Menü يتم ضبطها بشكل احترافي داخل الحاوية" — one media ratio for all three cards, the image covers it from the top, and the menu shot sits on a white mat so its own page background never clashes. */ .lp-print__grid { margin-top: 16px; } .lp-pcard { flex: 0 0 82%; display: flex; flex-direction: column; border-radius: 18px; } .lp-pcard__media { aspect-ratio: 4 / 3 !important; background: #fff; } .lp-pcard__media picture { display: block; width: 100%; height: 100%; } .lp-pcard__media img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; display: block; } .lp-pcard__body { padding: 13px 14px 15px; } .lp-pcard__body h3 { font-size: 15px; line-height: 1.3; } .lp-pcard__body p { margin-top: 5px; font-size: 13px; } .lp-live-badge, .lp-pcard .lp-ai-badge { inset-block-start: 9px; inset-block-end: auto; inset-inline-end: 9px; font-size: 11px; padding: 5px 9px; } .lp-print__badge { margin-top: 12px; padding: 6px 12px; font-size: 12px; line-height: 1.35; } /* ---------------------------------------------------------- screens */ .lp-screens__grid { margin-top: 18px; grid-template-columns: 1fr; gap: 16px; } .lp-tv { border-radius: 14px; padding: 9px 9px 0; } .lp-tv__cap { margin-top: 8px; font-size: 12.5px; } .lp-points { gap: 9px; } .lp-point { padding: 12px 14px; border-radius: 14px; gap: 11px; background: #fff; } .lp-point__n { width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; } .lp-point__body h3 { font-size: 14.5px; } .lp-point__body p { font-size: 13px; line-height: 1.5; } .lp-points__chip { padding: 9px 11px; font-size: 12px; line-height: 1.4; } .lp-diagram { margin-top: 12px; padding: 14px; border-radius: 16px; flex-direction: column; gap: 10px; } .lp-diagram__node { width: 100%; padding: 11px 13px; font-size: 13px; } .lp-diagram__outs { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; } .lp-diagram__out { padding: 9px 6px; font-size: 11px; text-align: center; justify-content: center; line-height: 1.3; } /* -------------------------------------------------------- functions */ /* .lp-fgrid is declared in a