/* ============================================================================= Public site — "صحن ورغيف" design system. ============================================================================= Replaces the stylesheet that dressed the previous landing page. The source is the standalone UI package (sahn-wa-ragheef-ui), rewritten here in two ways: 1. EVERY class carries an `lp-` prefix, and the two bare element rules the package shipped — `input, textarea` and `blockquote` — are scoped under `.lp-page`. The package was written for a document that loads nothing else. This site still loads bootstrap.min.css and web/css/sass/style.css for the signup wizard, the OTP screens and the delete-account flow, whose markup is built out of `.container` / `.row` / `.col-*` and the old theme's form skin. Dropped in unprefixed, the package's `.container` (no gutter) would leave every `.row` on those pages overflowing by its own negative margin, its `.btn` would fight bootstrap's, and its bare `input` rule would restyle every field on the site including the panel-adjacent ones. Prefixing is what lets the new chrome go on every page while those bodies keep working. 2. It covers the bands the package had no markup for. The package is a one-restaurant brochure; this page also has a partners strip, a store download band and a testimonials carousel driven by real records, and the about/policy/terms pages render long-form copy from the panel. Those are built from the same tokens rather than left to the old theme, so the site is one design rather than the new one until you scroll past the fold. Section order below follows the page: tokens, chrome (header/footer), then each band top to bottom, then the standalone pages, then responsive. ========================================================================== */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root { --lp-orange: #f48118; --lp-orange-dark: #df6e0b; --lp-ink: #17120f; --lp-muted: #655f59; --lp-body: #4f4944; --lp-paper: #fffdf9; --lp-cream: #fbf8f3; --lp-line: #eee7de; --lp-radius: 14px; --lp-shadow: 0 8px 26px rgba(49, 33, 20, .055); /* The gutter the package folded into `.container`'s width calculation. Named so the bands that need to break out of the container can add it back. */ --lp-gutter: 28px; } /* ── 2. Page shell ───────────────────────────────────────────────────────── */ /* `.lp-page` goes on . It is what scopes the element-level rules further down, so a page that opts out of the new design keeps the old theme's form skin untouched. */ .lp-page { margin: 0; background: var(--lp-paper); color: var(--lp-ink); font-family: "Alexandria", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.75; } .lp-page * { box-sizing: border-box; } .lp-page img { display: block; max-width: 100%; } .lp-page a { color: inherit; text-decoration: none; } html { scroll-behavior: smooth; } .lp-container { width: min(1180px, calc(100% - (var(--lp-gutter) * 2))); margin-inline: auto; } /* Skip link. The package had none, and the nav is 5 links deep before the heading — so a keyboard or screen-reader visitor tabbed through the whole header on every page of the site before reaching any content. */ .lp-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--lp-orange); color: #fff; padding: 10px 18px; border-radius: 0 0 9px 9px; transition: top .18s; } .lp-skip:focus { top: 0; } /* Visually hidden but readable by assistive tech — the form labels the design draws as placeholders still need to exist. */ .lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keep the focus ring the package's `outline:none`-free CSS relies on visible against both the paper and the cream grounds. */ .lp-page a:focus-visible, .lp-page button:focus-visible, .lp-page input:focus-visible, .lp-page textarea:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 2px; } /* ── 3. Buttons ──────────────────────────────────────────────────────────── */ .lp-btn { min-height: 52px; padding: 0 34px; border: 1px solid transparent; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 "Alexandria", sans-serif; cursor: pointer; transition: .2s; } .lp-btn--small { min-height: 48px; padding-inline: 25px; } .lp-btn--primary { background: var(--lp-orange); color: #fff; } .lp-btn--primary:hover { background: var(--lp-orange-dark); transform: translateY(-1px); } .lp-btn--outline { border-color: #3a342f; background: transparent; } .lp-btn--outline:hover { border-color: var(--lp-orange); color: var(--lp-orange); } /* ── 4. Header ───────────────────────────────────────────────────────────── */ /* `.lp-header`, not the package's `.site-header`: the old theme styles `.site-header` for its own dark carousel header, and both stylesheets are loaded on every page. */ .lp-header { height: 110px; display: flex; align-items: center; background: rgba(255, 253, 249, .96); position: relative; z-index: 10; } .lp-nav-wrap { height: 100%; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 28px; } .lp-brand img { width: 94px; height: 68px; object-fit: contain; } .lp-nav { display: flex; align-items: center; justify-content: center; gap: 42px; font-weight: 600; /* The package hand-wrote siblings; this is a real