/* New design — Eden entry layer: home, login/register, delivery, catering day, slots, the language pill and the bottom bar. Loaded by front/layouts/masterNew.blade.php only when App\Support\NewDesign::on() is true; the layout then also puts `nd-entry` on . Plain file, no build step: edit it here. Screens → files: _private/docs/new-design.md. Scope and weight — every selector (the :root tokens aside) starts at body.nd-entry: body.nd-entry:not(#\9) X the design's own look. `:not(#\9)` matches every element and weighs one id, so the rule beats the Sites' class-only rules in their `css` field (measured up to [0,6,4]) without !important. body.nd-entry X structure the platform or a Site may still refine. :where(body.nd-entry) X the reset (weight 0, as a bare `*`/`img` would be). `:not(#\9)` is written once per selector, right on body. !important only where a Site uses it on the same property. A Site fixes a leftover rule of its own with `body:not(.nd-entry)` in its `css` field (examples in the docs). */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&display=swap'); /* ════════════ TOKENS ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ TOKENS — the base the entry layer reads. The brand tokens are neutral defaults: App\Support\NewDesign::theme() (printed by the layout) sets the Branch/Site colours right after this stylesheet. Neutrals, motion and type are not driven by the brand. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─────────── BRAND (overridden per Site by NewDesign::theme()) ─────────── */ --brand-primary: #4b5563; --brand-primary-rgb: 75, 85, 99; --brand-primary-hover: #444d59; --brand-on-primary: #ffffff; --brand-secondary: #1a1e23; --brand-secondary-rgb: 26, 30, 35; --brand-secondary-hover: #282c30; --brand-on-secondary: #f5f5f5; /* ─────────── NEUTRALS ─────────── */ --cream: #f5f5f5; /* page background while the photo loads */ --paper: #ffffff; --black: #0d0d0d; --line-2: rgba(var(--brand-secondary-rgb), .07); /* ─────────── MOTION ─────────── */ --e-out: cubic-bezier(.32,.72,0,1); --e-soft: cubic-bezier(.16,1,.3,1); /* Type: the font files are linked by the @import at the top of this file */ --font-stack: 'Heebo', 'Assistant', system-ui, sans-serif; } /* ════════════ BASE ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ BASE — font, reset, page background, the language pill's shape. Loaded only on the entry screens (NewDesign::on); the scenes follow below. ═══════════════════════════════════════════════════════════════════════════ */ /* Heebo 400/500/600 — Eden's only font (katzavia), on the glass, the bottom bar, the language pill and the platform's dialogs (SCENE «Scene font»). The @import itself is the first line of this file: a browser ignores an @import that follows any rule. */ /* the design's reset — the scene's spacing is written against it */ :where(body.nd-entry) *, :where(body.nd-entry) *::before, :where(body.nd-entry) *::after { box-sizing: border-box; margin: 0; padding: 0; } :where(body.nd-entry) img { max-width: 100%; display: block; } /* ─────────── Typography ─────────── */ body.nd-entry, body.nd-entry.rtl { font-family: var(--font-stack); color: var(--brand-secondary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* the browser gives form fields the system font by default */ :where(body.nd-entry) input, :where(body.nd-entry) select, :where(body.nd-entry) textarea, :where(body.nd-entry) button { font-family: inherit; } /* ─────────── Keyboard focus (Eden: a 2px brand ring, offset 3, on every link and button) ─────────── Replaces the system blue ring and the platform's outline:none on the entry screens. :where() keeps it at [1,2,1]: the checkbox, the saved-address card and «+» draw their own rings with heavier rules; text fields keep Eden's depth on focus. */ body.nd-entry:not(#\9) :where(a, button, input[type="submit"], input[type="button"], [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; } /* the input.submit is a flat box: keep the ring off its shadow */ body.nd-entry:not(#\9) input.nd-auth-cta:focus-visible { box-shadow: 0 2px 8px -3px rgba(var(--brand-secondary-rgb), .45); } /* ─────────── Page background ─────────── */ /* The platform prints the Site `background` photo inline in (same weight, earlier): only the colour is ours, for while the photo loads. */ body.nd-entry { background-color: var(--cream); } /* a faint brand warmth in the corners, fixed and non-interactive */ body.nd-entry::before { content: ''; position: fixed; inset: 0; background: radial-gradient(1200px 620px at 90% -12%, rgba(var(--brand-primary-rgb), .045), transparent 62%), radial-gradient(1000px 560px at 2% 112%, rgba(var(--brand-primary-rgb), .055), transparent 60%); pointer-events: none; z-index: 0; } /* ─────────── Language list (ul.languages in the topbar pill) ─────────── Legacy sizing met flex layouts: one compact pill, sized by its content. SCENE gives the topbar pill its glass track and ink. */ body.nd-entry:not(#\9) ul.languages { flex: none; align-self: flex-start; align-items: center; gap: 2px; width: auto; height: auto; min-height: 0; margin: 0; padding: 3px; list-style: none; border-radius: 999px; background: var(--brand-primary); } body.nd-entry:not(#\9) ul.languages > li { display: inline-block; float: none; width: auto; height: auto; margin: 0; padding: 0; border: 0; } body.nd-entry:not(#\9) ul.languages a { display: block; width: auto; height: auto; min-width: 0; padding: 4px 11px; border: 0; border-radius: 999px; font-size: 14px; line-height: 1.25; white-space: nowrap; color: var(--brand-on-primary); background: none; } /* ════════════ SCENE ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SCENE — SHARED rules for every entry screen of the order flow (home, date selection, locations: delivery and branches) Everything these pages share lives ONLY here: the photo background plus veil, centring, the panel canon, the logo, the font and mobile. The per-page sections (HOME, CATERING DAY, LOCATION) hold only their own content. A new scene is added by putting a selector into the group below, not by copying rules. The panel canon is Eden's glass: a LIGHT frosted panel — white 74%, blur 18, a 1px white rim, radius 26, shadow 0 4 30 #000 25% — with DARK ink on it. Contrast comes from the ink on the panel, so it holds over any photo or video, light ones included. Width 640 (the delivery/branch screen keeps 850 for the address row and the map); height is the content's — no canonical height, no empty springs. Scopes: body.home and body.catering_day are the platform's classes; the location pages have no body classes, hence body:has(.location_cont). ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────── Background: the photo comes from the system (the "background" setting) ─────────── */ body.nd-entry { background-color: #140c06; /* while the photo loads / when none is set */ background-size: cover; background-position: center top; background-attachment: fixed; min-height: 100vh; } /* Sites repaint the scene on phones: store-meat's css (@media max-width 767.98px) clears body with `body:not(.kiosk) { background: none }` and paints its own mobile photo on .content, which sits above the entry video. The scene is ours on every width: body keeps the Setting photo (--scene-photo from NewDesign::theme), .content stays clear. */ body.nd-entry:not(#\9) { background: #140c06 var(--scene-photo) center top / cover fixed; } body.nd-entry:not(#\9) .content { background: none; } /* the entry video (Setting `entry_video`, placed by js/new-design-entry.js): exactly where the photo is — fixed behind everything, under the veil and the glass. The document root has no background, so body's photo is painted on the canvas below it. */ body.nd-entry .kz-scene-video { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } @media (prefers-reduced-motion: reduce) { body.nd-entry .kz-scene-video { display: none; } } /* the scrim (Eden `.stage-scrim`): just enough lift at the top and bottom edges for the language pill and the footer to read — no overlay across the food. The text lives on the light glass panel, not on the photo, so the photo is not dimmed. */ body.nd-entry::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 13, 15, .22) 0%, rgba(8, 13, 15, 0) 14%, rgba(8, 13, 15, 0) 72%, rgba(8, 13, 15, .18) 100%); } /* ─────────── Content: centred on screen, the footer below the fold ─────────── */ body.nd-entry:not(#\9) .content { position: relative; z-index: 1; min-height: 100vh; /* body is a flex column (sticky footer), and front.css gives .content flex:1, i.e. flex-basis:0 — the height is measured from the free space, and content taller than the viewport slid under the footer. basis:auto stops .content from becoming shorter than its own content; we keep grow so short pages still push the footer to the bottom of the screen */ flex: 1 0 auto; display: flex; flex-direction: row; /* Sites turn .content into a column */ align-items: center; justify-content: center; } /* the platform's .container between .content and the glass: a plain full-width block. Sites' css makes it a centred flex column with a bottom margin and their own widths. */ body.nd-entry:not(#\9) .content > .container { display: block; width: 100%; max-width: none; /* bootstrap's 540px at 576–767 pinned the 640 glass to one edge and scrolled the page */ margin-bottom: 0; } body.nd-entry .main { position: relative; z-index: 1; } /* ─────────── Panel: one canon, identical everywhere ─────────── */ @media (min-width: 641px) { body.nd-entry:not(#\9) .main { width: min(640px, 94vw); max-width: 640px; margin: 24px auto !important; /* Sites: .main { margin: 0 !important } */ gap: normal; /* Sites: gap 24px (0 on the catering day) */ justify-content: normal; padding: clamp(24px, 2vw, 30px) clamp(18px, 1.5vw, 22px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 4px 30px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; } body.nd-entry:not(#\9) .main > * { width: 100%; } /* the delivery/branch screen: an address row with a pickup pill beside it, and the map */ body.nd-entry:has(.location_cont):not(#\9) .main { width: min(850px, 94vw); max-width: 850px; } body.nd-entry:has(.location_cont):not(#\9) .location_cont { margin-inline: auto; } } /* ─────────── Platform modals inside the panel ─────────── The panel is a stacking context (z-index:1 on .content/.main, backdrop-filter on the glass), and the platform prints some of its modals INSIDE it: the welcome popup (#initial_popup, rest), the branch choice (#modal_branches) and «out of the delivery zone» (#modal_nodelivery) on /front/location. Bootstrap appends the backdrop (z 1040) to , so a modal trapped at z-index 1 of the panel sat UNDER it — nothing inside could be clicked, the page was stuck. backdrop-filter also turns the glass into the containing block of the position:fixed modal. While a modal is displayed, every ancestor of it drops what creates the context; Bootstrap's own layering takes over again. The panel loses its blur only under the backdrop, where it is dimmed anyway. Generic: no modal ids, any modal. */ body.nd-entry:not(#\9) :has(.modal.show, .modal.in, .modal[style*="display: block"]) { z-index: auto; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; filter: none; } /* ─────────── Ink: dark text on the light glass (Eden --ink / --ink-glass) ─────────── */ body.nd-entry { --scene-ink: #16242c; --scene-ink-2: rgba(22, 36, 44, .82); /* secondary text on the glass: 4.5–5.5:1 in Eden */ --scene-line: rgba(22, 36, 44, .14); } body.nd-entry:not(#\9) .main { color: var(--scene-ink); } /* ─────────── Scene font: Heebo (Eden) ─────────── Everything the design draws: the glass, the bottom bar, the language pill and the platform's dialogs over the entry screens (Sites set their own fonts with !important). */ body.nd-entry:not(#\9) :is(.main, .main *, .nd-footer, .nd-footer *, .kz-topbar, .kz-topbar *, .modal-content, .modal-content *) { font-family: var(--font-stack) !important; } /* the rule above breaks icon fonts (glyph → □): icomoon and FontAwesome are declared on the element itself and our ID weight overrode them. We restore them. */ body.nd-entry:not(#\9) :is(.main, .nd-footer, .modal-content) :is([class^='icon-'], [class*=' icon-']) { font-family: 'icomoon' !important; } body.nd-entry:not(#\9) :is(.main, .nd-footer, .modal-content) .fa { font-family: 'FontAwesome' !important; } /* ─────────── Logo: Eden's .panel-logo, sized by height ───────────── Home clamp(73px, 5.9vw, 106px) (85 at 1440, 98 on a phone), inner screens clamp(52px, 4.1vw, 72px) (59 at 1440, 60 on a phone). */ body.nd-entry:not(#\9) .logo_wrap { width: auto; max-width: none; /* Sites size and space the legacy logo row */ margin-block: 0; display: flex; justify-content: center; text-align: center; } /* centring the link itself: the platform gives it a width of its own */ body.nd-entry:not(#\9) .main .logo { border: 0; margin: 0 auto 16px; display: flex; justify-content: center; width: auto; float: none; /* straight on the light glass, as in Eden: Site logos are drawn for the platform's white header, so they read on it without a plate of their own */ padding: 0; background: none; box-shadow: none; } body.nd-entry:not(#\9) .main .logo img { /* Eden `.panel-logo`: sized by height, so a wide wordmark and a square mark come out at the same visual weight */ height: clamp(73px, 5.9vw, 106px); width: auto !important; /* branches: .main .logo img { … !important } */ max-height: none !important; margin: 0 !important; max-width: 100%; /* of the panel: a % of the shrink-to-fit link cut Eden's size by 28% */ object-fit: contain; padding: 0; background: none; border-bottom: 0; /* front.css draws an underline bar */ } /* ─────────── Mobile: the panel goes full screen ─────────── */ @media (max-width: 640px) { /* Eden on a phone: the hero is the full screen and the card sits in its middle, the bottom bar below the fold. A column with auto margins rather than align-items:center: content taller than the screen starts at the top instead of being clipped above it. The top padding keeps the language pill and the Site's accessibility button clear. */ body.nd-entry:not(#\9) .content { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-block: 64px 24px; } body.nd-entry:not(#\9) .content > .container { padding: 0; max-width: none; width: 100%; margin-block: auto; } /* Eden on a phone: the same glass card with an 18px margin (16px at 360), the language pill above it — not a full-screen sheet */ body.nd-entry:not(#\9) .main { display: block; /* Sites: a flex column, max-width 850px */ width: auto; max-width: none; margin: 0 clamp(16px, 4.6vw, 18px) !important; /* Sites: margin 0 !important */ border-radius: 26px; padding: 26px 22px 24px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 4px 30px rgba(0, 0, 0, .25); } /* the logo on phones: the wrapper holds the width, the image keeps Eden's height */ body.nd-entry:not(#\9) .logo_wrap { max-width: 370px; margin-top: 0; margin-bottom: 14px; margin-inline: auto; } body.nd-entry:not(#\9) .main .logo { margin-bottom: 0; /* the spacing lives on the wrapper, no double count */ } body.nd-entry:not(#\9) .main .logo img { max-width: 100%; height: 98px; /* Eden .panel-logo on a phone */ } } /* ─────────── Language pill at the top corner (Eden .topbar/.lang) ─────────── front/layouts/masterNew.blade.php (after @yield('body_top')) prints the Site's languages as .kz-topbar at the top of , outside the glass (short labels, full names as aria-label). The track is the panel's glass and the current language is filled with ink, so the pill reads over a light photo as well as a dark video (Eden's white-on-smoke track disappears on the light demo photos). Links, hrefs and `.current` are the platform's own. */ body.nd-entry .kz-topbar { position: absolute; top: 20px; inset-inline: 0; z-index: 3; width: min(100% - 32px, 1180px); margin-inline: auto; display: flex; justify-content: flex-end; pointer-events: none; } body.nd-entry:not(#\9) .kz-topbar ul.languages { display: flex !important; /* the platform hides the list on phones (d-none d-md-flex) */ pointer-events: auto; direction: ltr; gap: 2px; margin: 0; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 4px 18px rgba(0, 0, 0, .18); overflow: visible; text-transform: none; } body.nd-entry:not(#\9) .kz-topbar ul.languages > li { border: 0; flex: none; } body.nd-entry:not(#\9) .kz-topbar ul.languages a { padding: 6px 13px 7px; font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--scene-ink-2, rgba(22, 36, 44, .82)); opacity: 1; text-decoration: none; transition: background-color .28s, color .28s; } body.nd-entry:not(#\9) .kz-topbar ul.languages a.current { background: var(--scene-ink, #16242c); color: #fff; font-weight: 500; } body.nd-entry:not(#\9) .kz-topbar ul.languages a:not(.current):hover { background: rgba(22, 36, 44, .08); } @media (max-width: 640px) { body.nd-entry .kz-topbar { top: 18px; justify-content: center; } } /* fallbacks last, so they also win over the phone card above */ /* without blur the glass would show the photo through sharply — a denser white instead */ @supports not (backdrop-filter: blur(1px)) { body.nd-entry:not(#\9) .main { background: rgba(255, 255, 255, .9); } } @media (prefers-reduced-transparency: reduce) { body.nd-entry:not(#\9) .main { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Eden's inner states (auth, delivery, pickup, venue) carry the smaller logo (.panel-logo--sm); the welcome screen keeps the large one */ @media (min-width: 641px) { body.nd-entry:not(.home):not(#\9) .main .logo img { height: clamp(52px, 4.1vw, 72px); } } @media (max-width: 640px) { body.nd-entry:not(.home):not(#\9) .main .logo img { height: 60px; } } /* ════════════ HOME ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ HOME — Eden's welcome state. Markup: resources/views/front/new-design/home.blade.php + cta.blade.php — .nd-ctas > .nd-cta-cell > .nd-cta > (.nd-cta-orb > svg) (.nd-cta-text > label, sub) (svg.nd-cta-go). The scene, panel and logo are in SCENE. :not(#\9) gives the rules ID weight over front.css's long .home_links chains. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────── The Site's greeting (Setting `home_slogan`, HTML) ─────────── */ body.nd-entry.home:not(#\9) .home_slogan { color: var(--scene-ink) !important; /* the Site colours it inline */ font-size: clamp(15px, .92vw, 17.5px); font-weight: 400; line-height: 1.45; text-align: center; max-width: 592px; /* Eden .copy */ margin: 0 auto 28px; padding: 0; /* ent draws the slogan as a plate */ border-radius: 0; text-wrap: balance; } body.nd-entry.home:not(#\9) .home_slogan > :last-child { margin-bottom: 0; } /* two sentences → two paragraphs (home.blade.php): the first set apart, no gap between them */ body.nd-entry.home:not(#\9) .home_slogan > p { margin: 0; } /* signed in: «שלום, …» and the sign-out link (Eden .greet) */ body.nd-entry.home:not(#\9) .nd-greet { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; } body.nd-entry.home:not(#\9) .nd-greet .home_slogan { margin: 0; font-size: clamp(19px, 1.3vw, 24px); font-weight: 600; line-height: 1.15; } body.nd-entry.home:not(#\9) .nd-signout { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--scene-ink); text-decoration: none; transition: opacity .2s; } body.nd-entry.home:not(#\9) .nd-signout span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } body.nd-entry.home:not(#\9) .nd-signout:hover { opacity: .62; } body.nd-entry.home .nd-signout svg { width: 18px; height: 18px; } /* signed in with a saved address: the Site's delivery text under the greeting (Eden .greet-desc) */ body.nd-entry.home:not(#\9) .nd-greet-desc { max-width: 592px; margin: 6px auto 0; font-size: clamp(15px, .92vw, 17.5px); line-height: 1.34; text-align: center; text-wrap: pretty; color: var(--scene-ink); } body.nd-entry.home:not(#\9) .nd-greet-desc * { margin: 0; font: inherit; color: inherit; } /* the Site's promo block (Setting `home_promo`): front.css pushes it 100px down */ body.nd-entry.home:not(#\9) .home_promo { display: block; /* ent draws the promo as a white flex plate */ margin: 0 0 10px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--scene-ink); font-size: 18px; font-weight: 500; text-align: center; } body.nd-entry.home:not(#\9) .home_promo > :last-child { margin-bottom: 0; } /* ─────────── The column of rows ─────────── */ body.nd-entry.home:not(#\9) .nd-ctas { display: flex; flex-direction: column; align-items: center; justify-content: normal !important; /* Sites: .home_links { justify-content: center !important } */ gap: 16px; width: 100%; margin: 0 auto; padding: 0; } /* `style="display:none"` on .home_links_more (home_login 5, guest) is the platform's toggle — the flex rule above must not override it */ body.nd-entry.home:not(#\9) .nd-ctas[style*="none"] { display: none; } body.nd-entry.home:not(#\9) .nd-cta-cell { display: block; /* Sites: .home_links > div is a rounded flex box */ width: 428px; /* Eden .cta */ max-width: 100%; min-height: auto; margin: 0; padding: 0; border-radius: 0; } /* ─────────── One row (Eden .cta) ─────────── */ body.nd-entry.home:not(#\9) .nd-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; position: static; /* Sites: .home_links a is a relative flex column with its own size */ z-index: auto; width: 100% !important; height: auto !important; max-width: none; max-height: none; min-height: 80px; flex: 0 1 auto; overflow: visible; margin: 0; padding-block: 12px; padding-inline: 16px 20px; border: 0; border-radius: 24px; background: #fff; color: var(--scene-ink); font: inherit; line-height: 1.2; text-align: start; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(var(--brand-secondary-rgb), .05), 0 10px 22px -16px rgba(var(--brand-secondary-rgb), .4); transition: transform .28s var(--e-soft), box-shadow .28s var(--e-soft); } /* Sites hang arrows and press overlays on .home_links a::before/::after */ body.nd-entry.home:not(#\9) .nd-cta::before, body.nd-entry.home:not(#\9) .nd-cta::after { content: none; } body.nd-entry.home:not(#\9) .nd-cta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(var(--brand-secondary-rgb), .07), 0 18px 34px -18px rgba(var(--brand-secondary-rgb), .46); } body.nd-entry.home:not(#\9) .nd-cta:active { transform: scale(.98); transition-duration: .1s; } body.nd-entry.home:not(#\9) .nd-cta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; } /* front.css sizes every "a span" of .home_links (min-width 212, margins, padding, brand fill, white text) and every .home_links_2 button (background image, padding, line-height 70); a Site's translated label may itself hold spans (branches: .en-text/.he-text) */ body.nd-entry.home:not(#\9) .nd-cta span { width: auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; /* front.css paints them white on the brand fill (bilingual labels keep inner spans) */ line-height: 1.2; position: static; /* Sites: relative, z-index, flex 1 0 0%, round plates, max-width */ z-index: auto; flex: 0 1 auto; max-width: none; } /* a bilingual label's inner spans (branches: .en-text/.he-text) keep the label's size */ body.nd-entry.home:not(#\9) .nd-cta-label span { font-size: inherit; } body.nd-entry.home:not(#\9) .nd-cta .nd-cta-orb { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--brand-primary); color: var(--brand-on-primary); transition: background-color .28s; } body.nd-entry.home:not(#\9) .nd-cta:hover .nd-cta-orb { background: var(--brand-primary-hover); box-shadow: 0 3px 9px -4px rgba(var(--brand-secondary-rgb), .45); } body.nd-entry.home .nd-cta-orb svg { width: 27px; height: 27px; transition: transform .28s var(--e-soft); } /* Eden's per-icon hover: the account and the bag lift and tilt, the scooter drives off */ body.nd-entry.home .nd-cta:hover .nd-cta-orb svg { transform: translateY(-5px) rotate(-6deg) scale(1.14); } body.nd-entry.home .nd-cta:hover .nd-cta-orb svg:has([data-icon="bag"]) { transform: translateY(-5px) rotate(6deg) scale(1.14); } body.nd-entry.home .nd-cta:hover .nd-cta-orb svg:has([data-icon="scooter"]) { transform: translateX(-6px) rotate(-8deg) scale(1.14); } html[dir="ltr"] body.nd-entry.home .nd-cta:hover .nd-cta-orb svg:has([data-icon="scooter"]) { transform: translateX(6px) rotate(8deg) scale(1.14); } body.nd-entry.home:not(#\9) .nd-cta-label { transition: transform .28s var(--e-soft); } body.nd-entry.home:not(#\9) .nd-cta:hover .nd-cta-label { transform: translateX(3px); } html[dir="ltr"] body.nd-entry.home:not(#\9) .nd-cta:hover .nd-cta-label { transform: translateX(-3px); } /* a Site image in the orb (Setting `wallet_image_home`) */ body.nd-entry.home:not(#\9) .nd-cta-orb img { width: 30px; height: 30px; object-fit: contain; } body.nd-entry.home:not(#\9) .nd-cta-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; padding: 0; } /* front.css paints "a span" with the brand fill and white text */ body.nd-entry.home:not(#\9) .nd-cta-text > span { background: none !important; padding: 0; margin: 0; width: auto; display: block; } body.nd-entry.home:not(#\9) .nd-cta-label { font-size: 18px; font-weight: 600; letter-spacing: -.014em; line-height: 1.2; color: var(--scene-ink) !important; } body.nd-entry.home:not(#\9) .nd-cta-sub { text-wrap: balance; /* a wrapped caption breaks evenly, never one orphaned word (Eden .m-br) */ font-size: 14px; font-weight: 400; line-height: 1.25; color: var(--scene-ink-2) !important; } body.nd-entry.home:not(#\9) .nd-cta-go { width: 20px; height: 20px; color: var(--scene-ink); transition: transform .28s var(--e-soft); } body.nd-entry.home .nd-cta:hover .nd-cta-go { transform: translateX(-3px); } html[dir="ltr"] body.nd-entry.home .nd-cta-go { transform: scaleX(-1); } html[dir="ltr"] body.nd-entry.home .nd-cta:hover .nd-cta-go { transform: scaleX(-1) translateX(-3px); } /* ─────────── Phones ─────────── */ @media (max-width: 640px) { /* Eden ≤560: wrapped Hebrew needs the taller leading, and the two sentences their gap */ body.nd-entry.home:not(#\9) .home_slogan { font-size: 15px; line-height: 1.5; margin-bottom: 20px; } body.nd-entry.home:not(#\9) .home_slogan > p + p { margin-top: .62em; } body.nd-entry.home:not(#\9) .nd-ctas { gap: 12px; } body.nd-entry.home:not(#\9) .nd-cta { min-height: 74px; padding-inline: 14px 16px; gap: 12px; border-radius: 22px; } body.nd-entry.home:not(#\9) .nd-cta .nd-cta-orb { width: 48px; height: 48px; } body.nd-entry.home .nd-cta-orb svg { width: 25px; height: 25px; } body.nd-entry.home:not(#\9) .nd-cta-label { font-size: 17px; } body.nd-entry.home:not(#\9) .nd-cta-sub { font-size: 14px; } /* Eden's icon loops on a phone (no hover there): each on the icon's inner group, three lengths and offsets so they drift apart; a tap takes the icon over */ body.nd-entry.home .nd-cta-orb :is(.ic-head, .ic-anim) { transform-box: fill-box; } body.nd-entry.home .nd-cta-orb [data-icon="user"] .ic-head { transform-origin: center; animation: ndIcHead 2.8s cubic-bezier(.45, 0, .55, 1) infinite; } body.nd-entry.home .nd-cta-orb [data-icon="bag"] .ic-anim { transform-origin: 50% 0%; animation: ndIcSwing 2.4s cubic-bezier(.45, 0, .55, 1) .45s infinite; } body.nd-entry.home .nd-cta-orb [data-icon="scooter"] .ic-anim { transform-origin: 50% 88%; animation: ndIcRoll 2.1s cubic-bezier(.45, 0, .55, 1) .9s infinite; } body.nd-entry.home .nd-cta:active .nd-cta-orb :is(.ic-head, .ic-anim) { animation: none; } } @keyframes ndIcHead { 0%, 100% { transform: translate(0, 0); } 22% { transform: translate(-1.2px, -2.9px); } 46% { transform: translate(0, -.7px); } 72% { transform: translate(1.2px, -2.9px); } } @keyframes ndIcSwing { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(-7.5deg); } 52% { transform: rotate(6deg); } 78% { transform: rotate(-2.5deg); } } @keyframes ndIcRoll { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 28% { transform: translate(-4.2px, -.8px) rotate(-4deg); } 56% { transform: translate(1.4px, 0) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { body.nd-entry.home:not(#\9) .nd-cta, body.nd-entry.home .nd-cta-orb svg, body.nd-entry.home:not(#\9) .nd-cta-label, body.nd-entry.home:not(#\9) .nd-cta-go { transition: none; } body.nd-entry.home:not(#\9) .nd-cta:hover, body.nd-entry.home .nd-cta:hover .nd-cta-orb svg, body.nd-entry.home:not(#\9) .nd-cta:hover .nd-cta-label { transform: none; } body.nd-entry.home .nd-cta-orb :is(.ic-head, .ic-anim) { animation: none; } } /* ════════════ CATERING DAY ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ CATERING DAY — Eden's pickup slots. Markup: front/new-design/catering-days.blade.php — .nd-page-head, then .catering_days.nd-slots > a.nd-slot (.nd-slot-when > day + date, .nd-slot-time, svg.nd-slot-go); «order now» / Wolt rows are a.nd-slot.nd-slot--wide. The calendar mode (enable_catering_calendar) keeps the platform's component. ═══════════════════════════════════════════════════════════════════════════ */ body.nd-entry.catering_day:not(#\9) .nd-slots { --slot-h: clamp(60px, 6.6vh, 70px); width: 100% !important; /* Sites: .catering_days { width: … !important } */ max-width: none; /* Eden: the list takes the panel's full width */ margin: 34px auto 0; display: flex; flex-direction: column; gap: clamp(8px, 1vh, 11px); } /* Eden's slot: four fixed lines — day │ date │ hours, then the control. The values own the elastic tracks and the hairlines 1px ones, so each value is centred between its two boundaries and every column stands on the same guide down the list. */ body.nd-entry.catering_day:not(#\9) .nd-slot { --c-day: 86px; --c-date: 76px; --c-time: 116px; display: grid; grid-template-columns: minmax(var(--c-day), 1fr) 1px minmax(var(--c-date), 1fr) 1px minmax(var(--c-time), 1fr) calc(var(--slot-h) - 2px); align-items: center; column-gap: 0; min-height: var(--slot-h); margin: 0; padding: 0; border-radius: 20px; border: 1px solid rgba(22, 36, 44, .05); background: #fff; color: var(--scene-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(var(--brand-secondary-rgb), .05), 0 10px 22px -16px rgba(var(--brand-secondary-rgb), .4); transition: transform .24s var(--e-soft), box-shadow .24s, border-color .24s; } html[dir="ltr"] body.nd-entry.catering_day:not(#\9) .nd-slot { --c-day: 104px; } /* «order now» and the Wolt rows: one label, then the control */ body.nd-entry.catering_day:not(#\9) .nd-slot--wide { grid-template-columns: minmax(0, 1fr) calc(var(--slot-h) - 2px); padding-inline-start: 22px; } body.nd-entry.catering_day:not(#\9) .nd-slot--wide .nd-slot-day { justify-self: start; white-space: normal; } body.nd-entry.catering_day:not(#\9) .nd-slot:hover { transform: translateY(-2px); border-color: rgba(var(--brand-primary-rgb), .28); box-shadow: 0 2px 4px rgba(var(--brand-secondary-rgb), .07), 0 18px 34px -18px rgba(var(--brand-secondary-rgb), .46); } body.nd-entry.catering_day:not(#\9) .nd-slot:active { transform: scale(.99); transition-duration: .09s; } body.nd-entry.catering_day:not(#\9) :is(.nd-slot-day, .nd-slot-date, .nd-slot-time) { justify-self: center; min-width: 0; white-space: nowrap; } body.nd-entry.catering_day:not(#\9) .nd-slot-sep { justify-self: center; width: 1px; height: 60%; background: rgba(20, 35, 40, .12); } body.nd-entry.catering_day:not(#\9) .nd-slot-day { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; } body.nd-entry.catering_day:not(#\9) .nd-slot-date { font-size: 16px; line-height: 1.2; color: rgba(22, 36, 44, .84); } body.nd-entry.catering_day:not(#\9) .nd-slot-time { font-size: 17px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: center; } body.nd-entry.catering_day .nd-slot-time * { margin: 0; } /* the control (Eden .slot-act): outlined brand circle, filled on hover */ body.nd-entry.catering_day:not(#\9) .nd-slot-go { justify-self: center; width: 38px; height: 38px; padding: 9px; border-radius: 999px; color: var(--brand-primary); background: #fff; box-shadow: inset 0 0 0 1.75px var(--brand-primary); transition: background-color .24s, color .24s; } body.nd-entry.catering_day:not(#\9) .nd-slot:hover .nd-slot-go { color: var(--brand-on-primary); background: var(--brand-primary); } html[dir="ltr"] body.nd-entry.catering_day .nd-slot-go { transform: scaleX(-1); } @media (max-width: 640px) { body.nd-entry.catering_day:not(#\9) .nd-slots { --slot-h: clamp(58px, 7.6vh, 68px); gap: 9px; margin-top: 24px; } body.nd-entry.catering_day:not(#\9) .nd-slot { --c-day: 66px; --c-date: 62px; --c-time: 92px; border-radius: 18px; } html[dir="ltr"] body.nd-entry.catering_day:not(#\9) .nd-slot { --c-day: 66px; } body.nd-entry.catering_day:not(#\9) .nd-slot--wide { padding-inline-start: 16px; } body.nd-entry.catering_day:not(#\9) .nd-slot-day { font-size: 17px; } body.nd-entry.catering_day:not(#\9) .nd-slot-date { font-size: 15px; } body.nd-entry.catering_day:not(#\9) .nd-slot-time { font-size: 16px; } body.nd-entry.catering_day:not(#\9) .nd-slot-go { width: 34px; height: 34px; padding: 8px; } } /* the slots arrive in turn (Eden: 45ms apart); off with reduced motion */ @media (prefers-reduced-motion: no-preference) { body.nd-entry.catering_day:not(#\9) .nd-slot { animation: kzSlotIn .42s var(--e-soft) backwards; } body.nd-entry.catering_day:not(#\9) .nd-slot:nth-child(2) { animation-delay: 45ms; } body.nd-entry.catering_day:not(#\9) .nd-slot:nth-child(3) { animation-delay: 90ms; } body.nd-entry.catering_day:not(#\9) .nd-slot:nth-child(4) { animation-delay: 135ms; } body.nd-entry.catering_day:not(#\9) .nd-slot:nth-child(5) { animation-delay: 180ms; } body.nd-entry.catering_day:not(#\9) .nd-slot:nth-child(n+6) { animation-delay: 225ms; } } /* Eden's arrow → check on hover: ONE path whose three points travel (M,L,L both ways, so `d` interpolates). Where CSS `d` is unsupported the arrow simply stays; the check is never mirrored, so LTR draws its own arrow instead of flipping the glyph. */ @supports (d: path("M 0 0")) { body.nd-entry :is(.nd-slot-go, .nd-act) path { d: path("M 15 18 L 9 12 L 15 6"); transition: d .26s cubic-bezier(.4, 0, .2, 1); } html[dir="ltr"] body.nd-entry :is(.nd-slot-go, .nd-act) path { d: path("M 9 18 L 15 12 L 9 6"); } html[dir="ltr"] body.nd-entry.catering_day .nd-slot-go { transform: none; } body.nd-entry :is(.nd-slot:hover .nd-slot-go, .nd-addr-saved:hover .nd-act) path { d: path("M 20 6 L 9 17 L 4 12"); } } /* ════════════ LOCATION ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LOCATIONS — the own content of two pages only: branch selection and delivery with a map. The scene, panel, logo, font and mobile full-screen are SHARED, in SCENE. Page scope: body:has(.location_cont) — their body carries no classes. ═══════════════════════════════════════════════════════════════════════════ */ /* the heading above the content, if any */ body.nd-entry:has(.location_cont):not(#\9) .location_cont h1, body.nd-entry:has(.location_cont):not(#\9) .location_cont h2, body.nd-entry:has(.location_cont):not(#\9) .location_cont .h1 { color: var(--scene-ink); font-weight: 400; /* Heebo is loaded at 400–600 */ font-size: clamp(1.25rem, 2.4vw, 1.6rem); text-align: center; } body.nd-entry:not(#\9) .location_cont { width: 100%; /* Sites: 360px on phones */ max-width: 720px; } /* ─────────── Branches: pills per mockup 43:116 ─────────── DOM: .branch_item > a.bg-white > img(canopy) + span(city) + .branch_address. The link is a transparent column; the pill is the span itself with a pin circle and a chevron; the address sits on the glass under the pill, in secondary ink. */ body.nd-entry:not(#\9) .select_ta_branch .branch_item > a { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 0 !important; /* legacy set its own with !important */ background: transparent !important; /* and the white background too */ border: none; box-shadow: none; color: var(--black); text-decoration: none; } /* we drop the old design's canopy image — the mockup has none */ body.nd-entry:not(#\9) .select_ta_branch .branch_item > a > img, body.nd-entry .select_ta_branch .branch_item > a > br { display: none; } /* the city pill */ body.nd-entry:not(#\9) .select_ta_branch .branch_item > a > span { display: flex; align-items: center; gap: 16px; min-height: 76px; padding-inline: 9px 22px; border-radius: 999px; background: var(--paper); color: var(--black); font-size: 20px; font-weight: 500; box-shadow: 0 1px 2px rgba(22, 36, 44, .05), 0 10px 22px -16px rgba(22, 36, 44, .4); transition: transform .35s var(--e-soft), box-shadow .35s var(--e-soft); } body.nd-entry:not(#\9) .select_ta_branch .branch_item > a:hover > span { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22, 36, 44, .07), 0 18px 34px -18px rgba(22, 36, 44, .46); } /* the pin circle: a white pin over a gradient circle — two background layers */ body.nd-entry .select_ta_branch .branch_item > a > span::before { content: ''; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(180deg, var(--brand-secondary-hover) 0%, var(--brand-secondary) 100%); } /* the chevron at the pill's end */ body.nd-entry .select_ta_branch .branch_item > a > span::after { content: ''; width: 8px; height: 8px; border-top: 2px solid rgba(13, 13, 13, .45); border-left: 2px solid rgba(13, 13, 13, .45); transform: rotate(-45deg); margin-inline-start: auto; } /* the address sits on the scene, under the pill, centred */ body.nd-entry:not(#\9) .select_ta_branch .branch_address { text-align: center; } body.nd-entry:not(#\9) .select_ta_branch .branch_address small { color: var(--scene-ink-2) !important; /* .text-muted colours it with !important */ font-size: 14px; font-weight: 400; } /* ═══════════════════════════════════════════════════════════════════════════ DELIVERY: the address row + map DOM: .choose_location:not(.nd-deliv) > form > .choose_del_row (address / the בחר button / או / the pickup pill) + .map_wrapper > #map. ═══════════════════════════════════════════════════════════════════════════ */ /* the row and its wrappers are transparent: the scene shows through between the pills, the white band was drawn by the platform */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv), body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) form, body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row { background: transparent !important; box-shadow: none; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row { display: flex; align-items: center; gap: 14px; max-width: none; /* across the panel's full inner width, like the map */ margin: 0 0 30px; /* air before the map */ } /* the «בחר» button's column overlaps the field — the button ends up INSIDE the pill. The shift goes on the column: a margin on the button itself collapsed its column and the button stood beside the field rather than at its end. */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> input[type="submit"]) { margin-inline-start: -70px; /* a little deeper into the pill */ position: relative; z-index: 2; /* the button strictly centred at the field's end */ height: 62px; display: flex; align-items: center; justify-content: center; align-self: center; } /* the platform hides pickup and «או» on mobile (d-none d-md-block from the old design) — in the new one they are needed at every width */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> span.or), body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> a.takeaway) { display: flex !important; align-items: center; justify-content: center; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > [class*="col-"] { float: none; flex: none; width: auto; max-width: none; padding: 0; } /* the address field is a 62px pill */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) #address_placeholder { flex: 1 1 auto; position: relative; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address { width: 100%; height: 62px; border: none; border-radius: 999px; background: var(--paper); padding-inline: 26px 78px; /* room on the right, space for the בחר button on the left */ font-size: 17px; color: var(--black); box-shadow: 0 1px 2px rgba(22, 36, 44, .05), 0 10px 22px -16px rgba(22, 36, 44, .4); } body.nd-entry .choose_location:not(.nd-deliv) input#address::placeholder { color: rgba(22, 36, 44, .64); /* 4.6:1 on the white pill */ } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address:focus { outline: none; box-shadow: 0 1px 2px rgba(22, 36, 44, .05), 0 10px 22px -16px rgba(22, 36, 44, .4), 0 0 0 2px rgba(var(--brand-primary-rgb), .5); } /* the «בחר» button is a brown 52 circle at the field pill's end */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row input[type="submit"] { width: 52px; height: 52px; border: none; border-radius: 50%; background: linear-gradient(180deg, var(--brand-secondary-hover) 0%, var(--brand-secondary) 100%); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; position: relative; z-index: 2; transition: transform .3s var(--e-soft); /* it is an : its own padding shifted the text — centred hard */ padding: 0 !important; text-align: center; line-height: 52px; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row input[type="submit"]:hover { transform: scale(1.05); } /* the «או» separator is a red 41 circle */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) span.or { display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 41px; border-radius: 50%; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 15px; font-weight: 500; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); } /* the «איסוף עצמי» pill with an icon circle */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) a.takeaway { display: flex; align-items: center; gap: 12px; height: 62px; min-width: 280px; padding-inline: 6px 22px; border: none; border-radius: 999px; background: var(--paper); color: var(--black); font-size: 17px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 2px rgba(22, 36, 44, .05), 0 10px 22px -16px rgba(22, 36, 44, .4); position: relative; transition: transform .3s var(--e-soft); /* the chevron as a background: both pseudo-elements are taken by the circle and the icon */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='%23b9b3ad' stroke-width='1.8'%3E%3Cpath d='M7 1 1 7l6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; background-size: 7px 12px; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) a.takeaway:hover { transform: translateY(-2px); } body.nd-entry .choose_location:not(.nd-deliv) a.takeaway::before { content: ''; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, var(--brand-secondary-hover) 0%, var(--brand-secondary) 100%); } /* the package icon over the circle — a mask from the assets folder */ body.nd-entry .choose_location:not(.nd-deliv) a.takeaway::after { content: ''; position: absolute; inset-inline-start: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 25px; background: #fff; -webkit-mask: url('/images/new-design/icons/entry/takeaway.svg?v=2') center / contain no-repeat; mask: url('/images/new-design/icons/entry/takeaway.svg?v=2') center / contain no-repeat; } /* the map spans the full inner width and is rounded */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .map_wrapper, body.nd-entry:has(.choose_location):not(#\9) .map_wrapper { max-width: none; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); /* the platform gives the wrapper its own height and a white background, which would show a block under the map */ height: auto !important; background: transparent !important; line-height: 0; } body.nd-entry .choose_location:not(.nd-deliv) #map, body.nd-entry:has(.choose_location) #map { height: 400px !important; /* the platform sets its own height inline */ border-radius: 24px; } /* ─────────── Mobile: location content only ─────────── */ @media (max-width: 640px) { body.nd-entry:not(#\9) .select_ta_branch .branch_item { margin-bottom: 12px; } /* the address row folds: line 1 is the field with the בחר button, line 2 is full-width pickup; «או» is not needed */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row { flex-wrap: wrap; row-gap: 12px; margin-bottom: 20px; position: relative; /* the anchor for the בחר button */ } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) #address_placeholder { flex: 1 1 100%; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> span.or) { display: none !important; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> a.takeaway) { flex: 1 1 100%; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address { height: 54px; font-size: 15px; padding-inline: 20px 64px; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row input[type="submit"] { width: 44px; height: 44px; font-size: 14px; line-height: 44px; } /* the button is absolute at the field's end: at narrow widths a negative margin pushed it outside the pill's perimeter */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row > div:has(> input[type="submit"]) { position: absolute; inset-inline-end: 5px; top: 27px; /* the centre of a 54-tall field */ transform: translateY(-50%); height: auto; margin: 0; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) a.takeaway { min-width: 0; width: 100%; height: 54px; font-size: 15px; padding-inline: 5px 18px; } body.nd-entry .choose_location:not(.nd-deliv) a.takeaway::before { flex-basis: 44px; width: 44px; height: 44px; } body.nd-entry .choose_location:not(.nd-deliv) a.takeaway::after { width: 20px; height: 21px; inset-inline-start: 17px; } /* the press response */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) a.takeaway:active, body.nd-entry:not(#\9) .select_ta_branch .branch_item > a:active { transform: scale(.985); transition-duration: .12s; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .map_wrapper, body.nd-entry:has(.choose_location):not(#\9) .map_wrapper { border-radius: 18px; } body.nd-entry .choose_location:not(.nd-deliv) #map { height: 300px !important; border-radius: 18px; } } /* ─────────── Desktop: branch selection — larger and exactly centred ─────────── Pill text 32px, address 18px, and the block exactly in the panel's middle rather than the middle of what remains under the logo. Absolute positioning aligns to .main's geometric centre and does not depend on the logo's height. Branch variant only (:has(.select_ta_branch)) — on delivery the map content is taller than the panel and absolute is contraindicated. */ @media (min-width: 641px) { body.nd-entry:has(.select_ta_branch):not(#\9) .location_cont:has(.select_ta_branch) { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); /* RTL: inline-start = right, so the shift is +50% */ width: 100%; margin: 0; } body.nd-entry:not(#\9) .select_ta_branch .branch_item > a > span { font-size: 32px; min-height: 88px; /* the pill breathes around the larger text */ } body.nd-entry:not(#\9) .select_ta_branch .branch_address small { font-size: 18px; } } /* ─────────── Hovers ─────────── The branch pill turns red, the pin circle white with a red pin; the בחר button next to the address becomes a red circle (the field pill is unchanged); pickup behaves like the home screen's white rows. */ body.nd-entry:not(#\9) .select_ta_branch .branch_item > a:hover > span { background: var(--brand-primary); color: #fff; } /* the pin is cut out of the white circle (mask XOR), so it shows the pill's own brand fill underneath — no colour is baked into the SVG */ body.nd-entry .select_ta_branch .branch_item > a:hover > span::before { --kz-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); background: #fff; -webkit-mask: linear-gradient(#000 0 0), var(--kz-pin) center / 26px no-repeat; -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0), var(--kz-pin) center / 26px no-repeat; mask-composite: exclude; } body.nd-entry .select_ta_branch .branch_item > a:hover > span::after { border-color: rgba(255, 255, 255, .85); } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) .choose_del_row input[type="submit"]:hover { background: var(--brand-primary); } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) a.takeaway:hover { background: var(--brand-primary); color: #fff; } body.nd-entry .choose_location:not(.nd-deliv) a.takeaway:hover::before { background: #fff; } body.nd-entry .choose_location:not(.nd-deliv) a.takeaway:hover::after { background: var(--brand-primary); } /* One «איסוף עצמי» on a phone. Legacy prints the pickup link twice: a mobile-only copy above the address (.d-md-none, with its own «או») and the desktop column in the address row (.d-none.d-md-block), which this design shows at every width. When both exist the mobile copy goes — the row is the one the design lays out. */ @media (max-width: 767.98px) { body.nd-entry:not(#\9) .choose_location:not(.nd-deliv):has(.choose_del_row a.takeaway) > .d-md-none:has(> a.takeaway) { display: none !important; } } /* ════════════ LOGIN / REGISTER ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LOGIN AND SIGN-UP — Eden's auth state. Markup: front/new-design/{login,register,field}.blade.php — .inner.nd-auth > a.nd-back + .nd-auth-head (h1 + .nd-auth-sub) + [.alert] + form.nd-auth-form > (label.visuallyhidden + .nd-field-box > svg + input [+ .nd-eye])… + .nd-field-note + label.nd-check… + input.nd-auth-cta + p.nd-auth-swap. The form, its ids and names are the legacy ones. Shared panel pieces (the back pill, page headings) are here too: login/register are their first users. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────── Back pill (Eden .panel-back), top corner of the glass ─────────── */ body.nd-entry .main { position: relative; } body.nd-entry:not(#\9) .nd-back { position: absolute; inset-block-start: 18px; inset-inline-start: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding-block: 8px; padding-inline: 12px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--scene-ink); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .11); text-decoration: none; transition: background-color .24s, box-shadow .24s; } /* on the delivery, catering day and slots panels the pill is a direct child of .main, whose children the panel stretches to the full width */ body.nd-entry:not(#\9) .main > a.nd-back { width: auto; } body.nd-entry .nd-back svg { width: 16px; height: 16px; flex: none; transition: transform .26s var(--e-soft); } body.nd-entry:not(#\9) .nd-back:hover { background: rgba(255, 255, 255, .74); box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .18); } body.nd-entry .nd-back:hover svg { transform: translateX(3px); } html[dir="ltr"] body.nd-entry .nd-back svg { transform: scaleX(-1); } /* ─────────── Page headings (Eden .auth-head / .pickup-head) ─────────── */ body.nd-entry:not(#\9) .nd-auth-head, body.nd-entry:not(#\9) .nd-page-head { display: flex; flex-direction: column; gap: 4px; text-align: center; } body.nd-entry:not(#\9) .nd-auth-head h1, body.nd-entry:not(#\9) .nd-page-title { margin: 0 !important; font-size: clamp(19px, 1.3vw, 24px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--scene-ink); } body.nd-entry:not(#\9) .nd-auth-sub, body.nd-entry:not(#\9) .nd-page-sub { margin: 0; text-wrap: balance; font-size: clamp(15px, .92vw, 17.5px); line-height: 1.25; color: rgba(22, 36, 44, .9); } /* ─────────── The column ─────────── */ /* front.css draws .inner as a white card with 130px padding: the glass is the card */ body.nd-entry:is(.login, .register):not(#\9) .nd-auth { width: 100%; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; text-align: center; } body.nd-entry:is(.login, .register):not(#\9) .nd-auth-form { width: min(100%, 440px); margin: 30px auto 0; display: flex; flex-direction: column; gap: 16px; text-align: start; } /* validation errors: red, on the glass (never the brand colour) */ body.nd-entry:is(.login, .register):not(#\9) .nd-auth .alert-danger { width: min(100%, 440px); margin: 20px auto 0; background: rgba(238, 58, 48, .1); border: 1px solid rgba(238, 58, 48, .45); border-radius: 14px; color: #a4221b; padding: 12px 18px; text-align: start; } /* ─────────── Fields (Eden .field-box) ─────────── */ body.nd-entry:not(#\9) .nd-field-box { display: flex; align-items: center; gap: 14px; min-height: 62px; padding-inline: 20px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 1px 2px rgba(var(--brand-secondary-rgb), .05); transition: box-shadow .22s; } body.nd-entry:not(#\9) .nd-field-box:focus-within { box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 4px 10px -4px rgba(var(--brand-secondary-rgb), .2), 0 14px 30px -12px rgba(var(--brand-primary-rgb), .55); } /* the SMS code input is hidden by the platform until the code is sent */ body.nd-entry:not(#\9) .nd-field-box:has(> input[style*="display:none"], > input[style*="display: none"]) { display: none; } body.nd-entry:not(#\9) .nd-field-ic { width: 22px; height: 22px; flex: none; color: var(--scene-ink); } /* front.css styles every form input as its own pill (height, border, padding, margin) */ body.nd-entry:not(#\9) .nd-field-box input { flex: 1 1 auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 17px; line-height: 1.2; color: var(--scene-ink); direction: inherit; text-align: start; } body.nd-entry .nd-field-box input::placeholder { color: rgba(22, 36, 44, .5); opacity: 1; } body.nd-entry .nd-field-box input::-webkit-outer-spin-button, body.nd-entry .nd-field-box input::-webkit-inner-spin-button { appearance: none; margin: 0; } /* the platform's invalid phone state (aria-invalid) stays red */ body.nd-entry:not(#\9) .nd-field-box:has(> input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px rgba(238, 58, 48, .75); } /* dates keep a visible label */ body.nd-entry:not(#\9) .nd-date-label { display: block; margin: 0 4px -8px; font-size: 14px; color: var(--scene-ink-2); } /* the eye (Eden .eye) */ body.nd-entry:not(#\9) .nd-eye { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--scene-ink); cursor: pointer; } body.nd-entry:not(#\9) .nd-eye:hover { background: rgba(22, 36, 44, .07); } body.nd-entry .nd-eye svg { width: 22px; height: 22px; } body.nd-entry .nd-eye .nd-eye-off, body.nd-entry .nd-eye[aria-pressed="true"] .nd-eye-on { display: none; } body.nd-entry .nd-eye[aria-pressed="true"] .nd-eye-off { display: block; } /* ─────────── Under the fields: forgot password, required legend ─────────── */ body.nd-entry:not(#\9) .nd-field-note { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: -4px 0 0; padding-inline: 4px; font-size: 14px; color: var(--scene-ink); } body.nd-entry:not(#\9) .nd-field-note a { font-size: 15px; font-weight: 500; color: var(--scene-ink); text-decoration: underline; text-underline-offset: 3px; } body.nd-entry .nd-req-note b { font-weight: 600; } /* ─────────── Checkboxes (Eden .check) ─────────── */ body.nd-entry.register:not(#\9) .nd-check { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--scene-ink); cursor: pointer; } body.nd-entry.register:not(#\9) .nd-check input[type=checkbox] { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(22, 36, 44, .2); display: grid; place-items: center; cursor: pointer; } body.nd-entry.register:not(#\9) .nd-check input[type=checkbox]:checked { background: var(--brand-primary); box-shadow: inset 0 0 0 1.5px var(--brand-primary); } body.nd-entry.register:not(#\9) .nd-check input[type=checkbox]:checked::after { content: ''; width: 14px; height: 14px; background: var(--brand-on-primary); -webkit-mask: url('/images/new-design/icons/check.svg') center / contain no-repeat; mask: url('/images/new-design/icons/check.svg') center / contain no-repeat; } body.nd-entry.register:not(#\9) .nd-check input[type=checkbox]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 0 0 3px rgba(var(--brand-primary-rgb), .3); } body.nd-entry.register:not(#\9) .nd-check a { color: var(--scene-ink); font-weight: 600; text-decoration: underline; } /* ─────────── The action (Eden .auth-cta) ─────────── */ body.nd-entry:not(#\9) .nd-auth-cta { width: 100%; min-height: 62px; height: auto; margin: 6px 0 0; border: 0; border-radius: 14px; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 18px; font-weight: 600; letter-spacing: -.014em; cursor: pointer; box-shadow: 0 2px 8px -3px rgba(var(--brand-secondary-rgb), .45); transition: transform .24s var(--e-soft), background-color .24s, box-shadow .24s; } body.nd-entry:not(#\9) .nd-auth-cta:hover { transform: translateY(-2px); background: var(--brand-primary-hover); box-shadow: 0 8px 20px -8px rgba(var(--brand-secondary-rgb), .5); } body.nd-entry:not(#\9) .nd-auth-cta:active { transform: scale(.99); transition-duration: .1s; } body.nd-entry:not(#\9) .nd-auth-swap { margin: 2px 0 0; font-size: 15px; text-align: center; color: var(--scene-ink); } body.nd-entry:not(#\9) .nd-auth-swap a { margin-inline-start: 4px; color: var(--scene-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* the registration success line the platform appends to the form */ body.nd-entry.register:not(#\9) #registration_success_message { text-align: center; color: var(--scene-ink); font-weight: 500; } /* ─────────── Phones ─────────── */ @media (max-width: 640px) { body.nd-entry:not(#\9) .nd-back { inset-block-start: 14px; inset-inline-start: 14px; } /* the back pill and the centred logo do not share a line on a phone */ body.nd-entry:not(#\9) .main:has(.nd-back) .logo_wrap { margin-top: 34px; } body.nd-entry:is(.login, .register):not(#\9) .nd-auth-form { margin-top: 22px; gap: 14px; } body.nd-entry:not(#\9) .nd-field-box { min-height: 58px; padding-inline: 16px; gap: 12px; } body.nd-entry:not(#\9) .nd-field-box input { font-size: 16px; } body.nd-entry:not(#\9) .nd-auth-cta { min-height: 58px; font-size: 17px; } } @media (prefers-reduced-motion: reduce) { body.nd-entry:not(#\9) .nd-auth-cta, body.nd-entry .nd-back svg { transition: none; } body.nd-entry:not(#\9) .nd-auth-cta:hover { transform: none; } } /* ════════════ SLOTS ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SLOTS — body.slots (/front/slots/N, organisational dining). Page content only. Eden's «venue» screen drawn on the legacy markup; there is no design partial. The scene, panel, logo, font and phone card are SHARED, in SCENE. DOM (front/slots.blade.php) is styled as it is — the same links, forms, buttons and the page's own expand/close script: .main > [.text-center.mb-3 logout | user menu] + .logo_wrap + h2.mb-4 (choose restaurant) + [.alert] + .slot-location-change a.btn (switch) + h2.my-4 (choose time) + .row.branch-slots-grid > .col-12.col-md-4 > .branch-slot-card > .branch-slot-card-header (img? + .branch-name + .branch-address) .branch-slot-card-body > .branch-first-slot (.time + .actions > form×1–2 > button) | .alert-info, button.branch-slots-expand .branch-slots-popup > -inner > header + .branch-slots-list > .slot-item×N + footer button.branch-slots-close The sit/pickup buttons are told apart by their form's hidden input[name=type]; the «change to» link gets Eden's swap glyph as a mask on ::before. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────── Stage: one size up for three cards side by side (Eden venue 880) ─────────── */ @media (min-width: 641px) { body.nd-entry.slots:not(#\9) .main { width: min(880px, 94vw); max-width: 880px; background: rgba(255, 255, 255, .6); /* a panel this size at .74 would cover the photo */ } } /* the order Eden reads in: logo, member links, title, subtitle, switch, the cards */ body.nd-entry.slots:not(#\9) .main { display: flex; flex-direction: column; align-items: center; } body.nd-entry.slots:not(#\9) .main > * { width: 100%; } body.nd-entry.slots:not(#\9) .main > .logo_wrap { order: 1; } body.nd-entry.slots:not(#\9) .main > .text-center.mb-3 { order: 2; } body.nd-entry.slots:not(#\9) .main > h2.mb-4 { order: 3; } body.nd-entry.slots:not(#\9) .main > h2.my-4 { order: 4; } body.nd-entry.slots:not(#\9) .main > .alert, body.nd-entry.slots:not(#\9) .main > .slot-location-change { order: 5; } body.nd-entry.slots:not(#\9) .main > .branch-slots-grid { order: 6; } /* ─────────── Member bar (signed in): «התנתקות | איזור אישי» as ink links ─────────── */ body.nd-entry.slots:not(#\9) .main > .text-center.mb-3 { margin: -4px 0 12px !important; color: rgba(22, 36, 44, .3); font-size: 15px; } body.nd-entry.slots:not(#\9) .main > .text-center.mb-3 a { color: var(--scene-ink); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; vertical-align: baseline; } /* ─────────── Title and subtitle ─────────── */ body.nd-entry.slots:not(#\9) .main > h2.mb-4 { margin: 0 !important; color: var(--scene-ink); font-size: 20px; font-weight: 600; line-height: 1.3; text-align: center; } body.nd-entry.slots:not(#\9) .main > h2.my-4 { margin: 4px 0 0 !important; color: var(--scene-ink-2); font-size: 15px; font-weight: 400; line-height: 1.4; text-align: center; } /* ─────────── «להחלפה ל: …» — a pill, a setting rather than another counter ─────────── */ body.nd-entry.slots:not(#\9) .slot-location-change { margin: 14px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } body.nd-entry.slots:not(#\9) .slot-location-change a.btn { display: inline-flex; align-items: center; gap: 9px; margin: 0 !important; padding: 9px 15px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .12); color: var(--scene-ink); font-size: 14px; font-weight: 500; line-height: 1; white-space: normal; transition: background-color .24s var(--e-soft), box-shadow .24s var(--e-soft), transform .24s var(--e-soft); } /* Eden's swap glyph, drawn on the legacy link, in the brand's deep shade */ body.nd-entry.slots:not(#\9) .slot-location-change a.btn::before { content: ""; order: 1; flex: 0 0 17px; width: 17px; height: 17px; background-color: var(--brand-secondary); -webkit-mask: url("/images/new-design/icons/entry/swap.svg") center / contain no-repeat; mask: url("/images/new-design/icons/entry/swap.svg") center / contain no-repeat; } body.nd-entry.slots:not(#\9) .slot-location-change a.btn:hover, body.nd-entry.slots:not(#\9) .slot-location-change a.btn:focus-visible { transform: translateY(-1px); background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .34); color: var(--scene-ink); } body.nd-entry.slots:not(#\9) .main > .alert { margin: 14px 0 0 !important; border-radius: 14px; } /* ─────────── The row: three columns, one on a phone ─────────── */ body.nd-entry.slots:not(#\9) .branch-slots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; max-width: none; margin: 24px 0 0; } body.nd-entry.slots:not(#\9) .branch-slots-grid > [class*='col-'] { flex: none; width: auto; max-width: none; margin: 0 !important; padding: 0; } /* ─────────── The card (Eden .rest-card): flat white, one soft shadow, no ring ─────────── */ body.nd-entry.slots:not(#\9) .branch-slot-card { display: flex; flex-direction: column; height: auto; padding: 0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(22, 36, 44, .05), 0 12px 26px -18px rgba(22, 36, 44, .4); transition: transform .26s var(--e-soft), box-shadow .3s var(--e-soft), opacity .3s var(--e-soft); } body.nd-entry.slots:not(#\9) .branch-slot-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22, 36, 44, .07), 0 20px 38px -20px rgba(22, 36, 44, .46); } body.nd-entry.slots:not(#\9) .branch-slot-card-header, body.nd-entry.slots:not(#\9) .branch-slots-popup-header { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 15px 12px 11px; color: var(--scene-ink); } /* The mark. The design has a line-art glyph per counter; the platform stores one raster image per Branch (`image`), so the image sits in a round brand-ringed frame. No image → no mark, the name leads (graceful: nothing invented). */ body.nd-entry.slots:not(#\9) .branch-slot-card-header img, body.nd-entry.slots:not(#\9) .branch-slots-popup-header img { display: block; width: 64px; height: 64px; max-width: none; object-fit: cover; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(var(--brand-primary-rgb), .55); } body.nd-entry.slots:not(#\9) .branch-slot-card-header .branch-name, body.nd-entry.slots:not(#\9) .branch-slots-popup-header .branch-name { margin: 9px 0 0 !important; color: var(--scene-ink); font-size: 18px; font-weight: 600; line-height: 1.2; } body.nd-entry.slots:not(#\9) .branch-slot-card-header .branch-address, body.nd-entry.slots:not(#\9) .branch-slots-popup-header .branch-address { margin-top: 2px; color: var(--scene-ink-2) !important; /* .text-muted carries !important */ font-size: 13px; } body.nd-entry.slots:not(#\9) .branch-address:empty { display: none; } body.nd-entry.slots:not(#\9) .branch-slot-card-body { margin: 0; padding: 0 10px; } /* ─────────── A time row (Eden .slotcard) ─────────── */ body.nd-entry.slots:not(#\9) .branch-first-slot, body.nd-entry.slots:not(#\9) .branch-slots-list .slot-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 !important; padding: 7px 12px; border-radius: 13px; background: rgba(22, 36, 44, .038); transition: background-color .2s var(--e-soft); } body.nd-entry.slots:not(#\9) .branch-first-slot:hover, body.nd-entry.slots:not(#\9) .branch-slots-list .slot-item:hover { background: rgba(var(--brand-primary-rgb), .07); } body.nd-entry.slots:not(#\9) .branch-first-slot .time, body.nd-entry.slots:not(#\9) .slot-item .time { margin: 0; color: var(--scene-ink); font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.018em; font-variant-numeric: tabular-nums; white-space: nowrap; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions { display: flex; flex-wrap: nowrap; gap: 5px; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions form { display: block; margin: 0 !important; } /* ─────────── The two actions (Eden .svc-btn): sit filled, pickup outlined ─────────── */ body.nd-entry.slots:not(#\9) .branch-slot-card .actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.15; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--e-soft), color .2s var(--e-soft), border-color .2s var(--e-soft), box-shadow .2s var(--e-soft), transform .2s var(--e-soft); } body.nd-entry.slots:not(#\9) .branch-slot-card .actions :where(form:has(input[name="type"][value="sit"])) button.btn { color: var(--brand-on-primary); background: var(--brand-primary); border: 1px solid var(--brand-primary); box-shadow: 0 1px 2px rgba(22, 36, 44, .18); } body.nd-entry.slots:not(#\9) .branch-slot-card .actions :where(form:has(input[name="type"][value="pickup"])) button.btn { color: var(--brand-secondary); background: #fff; border: 1px solid rgba(var(--brand-primary-rgb), .55); box-shadow: none; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions button:enabled:hover { color: var(--brand-on-primary); background: var(--brand-secondary); border-color: var(--brand-secondary); transform: translateY(-1px); box-shadow: 0 6px 14px -7px rgba(22, 36, 44, .55); } body.nd-entry.slots:not(#\9) .branch-slot-card .actions button:enabled:active { transform: translateY(0) scale(.985); box-shadow: none; transition-duration: .08s; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions button:disabled { opacity: .4; cursor: not-allowed; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions button:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; } body.nd-entry.slots:not(#\9) .branch-slot-card-body .alert-info { margin: 0; border: 0; border-radius: 13px; background: rgba(22, 36, 44, .038); color: var(--scene-ink-2); font-size: 14px; text-align: center; } /* ─────────── The opener / closer: a round chevron (Eden .rest-caret) ─────────── */ body.nd-entry.slots:not(#\9) .branch-slots-expand, body.nd-entry.slots:not(#\9) .branch-slots-close { display: grid; place-items: center; width: 32px; height: 32px; margin: 12px auto 13px; padding: 0; border: 0; border-radius: 50%; font-size: 13px; color: var(--brand-secondary); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .45); text-decoration: none; transition: background-color .24s var(--e-soft), color .24s var(--e-soft), box-shadow .24s var(--e-soft); } body.nd-entry.slots:not(#\9) .branch-slots-expand:hover, body.nd-entry.slots:not(#\9) .branch-slots-close { color: var(--brand-on-primary); background: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); } body.nd-entry.slots:not(#\9) .branch-slots-expand:focus-visible, body.nd-entry.slots:not(#\9) .branch-slots-close:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 3px; } /* ─────────── The open card: the page's own popup over the card ─────────── */ body.nd-entry.slots:not(#\9) .branch-slots-popup { margin: 0; } body.nd-entry.slots:not(#\9) .branch-slots-popup-inner { padding: 0; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px rgba(22, 36, 44, .09), 0 26px 48px -24px rgba(22, 36, 44, .55); } body.nd-entry.slots:not(#\9) .branch-slots-list { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; max-height: 234px; /* Eden's open list, scrolls inside itself */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--brand-primary-rgb), .3) transparent; } body.nd-entry.slots:not(#\9) .branch-slots-popup-footer { margin: 0; } /* the page's own states keep winning over the styling above: an open card hides its first row and its opener (the popup shows every row), and on narrower screens the popup repeats no header — front.css rules, restated at this weight */ body.nd-entry.slots:not(#\9) .branch-slot-card--open .branch-first-slot, body.nd-entry.slots:not(#\9) .branch-slot-card--open .branch-slots-expand { display: none; } @media (max-width: 767.98px) { body.nd-entry.slots:not(#\9) .branch-slots-popup-header { display: none; } body.nd-entry.slots:not(#\9) .branch-slots-popup-inner { box-shadow: none; } } /* the legacy dim of the other cards while one is open, softer */ body.nd-entry.slots:not(#\9) .branch-slots-grid--dimmed .branch-slot-card { opacity: .45; } body.nd-entry.slots:not(#\9) .branch-slots-grid--dimmed .branch-slot-card.branch-slot-card--expanded { opacity: 1; } /* ─────────── Entrance: the cards arrive in turn (entry motion; off when reduced) ─────────── */ @keyframes kzSlotIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { body.nd-entry.slots:not(#\9) .branch-slots-grid > [class*='col-'] { animation: kzSlotIn .44s var(--e-soft) backwards; } body.nd-entry.slots:not(#\9) .branch-slots-grid > :nth-child(2) { animation-delay: 70ms; } body.nd-entry.slots:not(#\9) .branch-slots-grid > :nth-child(3) { animation-delay: 140ms; } body.nd-entry.slots:not(#\9) .branch-slots-grid > :nth-child(n+4) { animation-delay: 210ms; } } /* ─────────── Tablet and phone ─────────── */ @media (max-width: 940px) { body.nd-entry.slots:not(#\9) .branch-slots-grid { gap: 11px; } body.nd-entry.slots:not(#\9) .branch-first-slot, body.nd-entry.slots:not(#\9) .branch-slots-list .slot-item { min-height: 44px; gap: 7px; padding-inline: 9px; border-radius: 11px; } body.nd-entry.slots:not(#\9) .branch-first-slot .time, body.nd-entry.slots:not(#\9) .slot-item .time { font-size: 18px; } body.nd-entry.slots:not(#\9) .branch-slot-card .actions button { min-height: 31px; padding: 6px 10px; font-size: 13px; } } @media (max-width: 640px) { body.nd-entry.slots:not(#\9) .branch-slots-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } body.nd-entry.slots:not(#\9) .slot-location-change a.btn { font-size: 13px; padding: 8px 13px; } body.nd-entry.slots:not(#\9) .branch-slot-card-header { padding: 16px 14px 12px; } body.nd-entry.slots:not(#\9) .branch-slot-card-body { padding-inline: 12px; } body.nd-entry.slots:not(#\9) .branch-first-slot, body.nd-entry.slots:not(#\9) .branch-slots-list .slot-item { min-height: 58px; padding-inline: 12px; border-radius: 14px; } body.nd-entry.slots:not(#\9) .branch-first-slot .time, body.nd-entry.slots:not(#\9) .slot-item .time { font-size: 22px; } /* a finger, not a pointer */ body.nd-entry.slots:not(#\9) .branch-slot-card .actions button { min-height: 40px; padding: 10px 15px; font-size: 14px; border-radius: 11px; } body.nd-entry.slots:not(#\9) .branch-slots-list { padding-inline: 12px; } } /* ════════════ FOOTER ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ FOOTER — Eden's bottom bar. Markup: front/layouts/masterNew.blade.php, the @elseif($newDesign) footer (replaces the platform footer on the entry screens only) — footer.nd-footer > .nd-ftr-band > [.nd-ftr-group address, phone] [nav.nd-ftr-nav links] + .nd-ftr-legal (© + the platform credit). A dark bar held off the sides, flush to the bottom, top corners rounded. ═══════════════════════════════════════════════════════════════════════════ */ /* the panel is centred in the space above the bar, the bar sits at the bottom of the first screen (body is the platform's flex column, min-height 100vh) */ body.nd-entry:has(> .nd-footer):not(#\9) .content { min-height: 0; flex: 1 0 auto; } body.nd-entry:not(#\9) .nd-footer { position: relative; z-index: 1; /* above the scene's fixed scrim */ flex: 0 0 auto; margin: 24px clamp(0px, 1.7vw, 24px) 0 !important; /* Sites: footer { margin: 0 !important } */ padding: 24px 24px 20px; /* Eden: 20 at the bottom, the legal text's optical balance */ border-radius: 48px 48px 0 0; background: #1c1c1c; color: #fff; font-size: 13px; line-height: 1.4; text-align: center; } body.nd-entry:not(#\9) .nd-ftr-band, body.nd-entry:not(#\9) .nd-ftr-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; } body.nd-entry:not(#\9) .nd-ftr-band { gap: 10px 40px; } body.nd-entry:not(#\9) .nd-footer a { color: #fff; text-decoration: none; white-space: nowrap; transition: opacity .24s; } body.nd-entry:not(#\9) .nd-footer a:hover { opacity: .72; } body.nd-entry:not(#\9) .nd-ftr-line { display: inline-flex; align-items: center; gap: 8px; } body.nd-entry .nd-ftr-line svg { width: 16px; height: 16px; flex: none; } /* the legal line (Eden band 3): its own band under a hairline, the same white 13px */ body.nd-entry:not(#\9) .nd-ftr-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 64px; /* Eden --ftr-signature between the credit and the legal text */ width: fit-content; max-width: 100%; margin: 20px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: #fff; } body.nd-entry:not(#\9) .nd-ftr-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; } body.nd-entry:not(#\9) .nd-ftr-brand img { height: 20px; width: auto; filter: brightness(0) invert(1); } /* Eden ≤720: every band stacks, one 16px rhythm, the links lead (the thumb's target) */ @media (max-width: 720px) { body.nd-entry:not(#\9) .nd-footer { margin: 16px 0 0 !important; padding: 24px 16px; border-radius: 32px 32px 0 0; } body.nd-entry:not(#\9) .nd-ftr-band { gap: 16px; font-size: 15px; } body.nd-entry:not(#\9) .nd-ftr-group { gap: 6px 16px; } body.nd-entry:not(#\9) .nd-ftr-nav { order: -1; } body.nd-entry:not(#\9) .nd-ftr-nav a { font-size: 16px; white-space: normal; } body.nd-entry:not(#\9) .nd-ftr-legal { gap: 16px; margin-top: 16px; padding-top: 16px; font-size: 13px; } } /* phones: the hero is the full screen (SCENE), the bar starts below the fold as in Eden */ @media (max-width: 640px) { body.nd-entry:has(> .nd-footer):not(#\9) .content { min-height: 100vh; min-height: 100svh; } } /* The platform's floating accessibility button (enable_accessibility = 3) is fixed 80px above the bottom edge: on a phone it sat on the bottom bar and on the cards scrolling under it. On the entry screens it lives in the free band above the glass, next to the language pill, and scrolls with the page. */ @media (max-width: 640px) { body.nd-entry:not(#\9) .a11y_floating_button { position: absolute; top: 14px; bottom: auto; } /* up there it would sit on a dialog's close button (the welcome popup): under the backdrop while a dialog is open */ body.nd-entry.modal-open:not(#\9) .a11y_floating_button { z-index: 1039; } } /* ════════════ LOCATION — delivery row ════════════ */ /* Google supplies an inline error icon (.gm-err-autocomplete) when the referrer is unauthorized. A single icon and readable placeholder preserve that error rather than masking it. The icon sits at the field's START; the END keeps LOCATION's reserve for the «בחר» button, so neither the text nor the icon runs under the button. */ body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address { background-repeat: no-repeat; background-size: 20px; font-family: inherit; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address.gm-err-autocomplete { padding-inline-start: 46px; background-position: left 16px center; } html[dir="rtl"] body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) input#address.gm-err-autocomplete { background-position: right 16px center; } body.nd-entry:not(#\9) .choose_location:not(.nd-deliv) span.or { width: auto; height: auto; min-width: 2em; padding: 4px; background: transparent; color: var(--main-text); border-radius: 0; box-shadow: none; font-size: 15px; } /* ═══════════════════════════════════════════════════════════════════════════ DELIVERY — Eden's delivery state. Markup: front/new-design/location-delivery.blade.php — .choose_location.nd-deliv > form#form > .nd-deliv-row > [.nd-addr > svg + #address_placeholder > input#address + input.nd-addr-go] [span.nd-or] [a.takeaway.nd-pickup] + .map_wrapper > #map. The title (.nd-page-title) is defined by the partial and printed by front/layouts/inner.blade.php (@yield('nd_page_title')) above the page; the Site's `location_message` (h4.my-5, printed by the page) reads as its subtitle. ═══════════════════════════════════════════════════════════════════════════ */ /* the legacy «home_welcome + name» h1 a signed-in Client gets over this screen: Eden has no greeting here — visually hidden, it stays the page's heading for screen readers */ body.nd-entry.location:not(#\9) .main > h1.mb-3 { position: absolute; width: 1px; height: 1px; margin: 0 !important; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body.nd-entry.location:not(#\9) .main > .nd-page-title { margin: 0 !important; text-align: center; } /* the Site's own headings in the panel keep Bootstrap's spacing; the subtitle rule right below keeps its own (Sites: .inner h4 { margin-bottom: 0 !important }) */ body.nd-entry.location:not(#\9) .main h4:not(.modal-title) { margin-bottom: .5rem !important; } body.nd-entry.location:not(#\9) .main > .nd-page-title + h4 { margin: 4px auto 0 !important; max-width: 620px; text-wrap: balance; font-size: clamp(15px, .92vw, 17.5px); font-weight: 400; line-height: 1.3; text-align: center; color: rgba(22, 36, 44, .9); } body.nd-entry.location:not(#\9) .main > .nd-page-title + h4 > * { margin: 0; font: inherit; color: inherit; } body.nd-entry:not(#\9) .nd-deliv, body.nd-entry:not(#\9) .nd-deliv form { background: none !important; box-shadow: none; margin: 0; padding: 0; } body.nd-entry:not(#\9) .nd-deliv { margin-top: 30px; } /* Eden keeps the delivery panel at the entry width (640), the map included */ @media (min-width: 641px) { body.nd-entry:has(.nd-deliv):not(#\9) .main { width: min(640px, 94vw); max-width: 640px; } } body.nd-entry:not(#\9) .nd-deliv .nd-deliv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin-bottom: 14px; } body.nd-entry:not(#\9) .nd-deliv .nd-deliv-row:not(:has(.nd-addr, .nd-addr-cell)), body.nd-entry:not(#\9) .nd-deliv .nd-deliv-row:not(:has(.nd-pickup)) { grid-template-columns: minmax(0, 1fr); } /* LOGIN_DELIVERY_PICKUP: like legacy, «או» and pickup show from md (768) up only */ @media (max-width: 767.98px) { body.nd-entry:not(#\9) .nd-deliv .nd-deliv-row:has(.nd-pickup.d-md-flex) { grid-template-columns: minmax(0, 1fr); } } /* the address field (Eden .addr-field): pin, the platform's input, the round «go» */ body.nd-entry:not(#\9) .nd-deliv .nd-addr { display: flex; align-items: center; gap: 12px; min-height: 62px; padding-inline: 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 1px 2px rgba(var(--brand-secondary-rgb), .05); transition: box-shadow .22s; } body.nd-entry:not(#\9) .nd-deliv .nd-addr:focus-within { box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 4px 10px -4px rgba(var(--brand-secondary-rgb), .2), 0 14px 30px -12px rgba(var(--brand-primary-rgb), .55); } body.nd-entry:not(#\9) .nd-deliv .nd-addr-pin { width: 22px; height: 22px; flex: none; color: var(--scene-ink); } body.nd-entry:not(#\9) .nd-deliv .nd-addr-field { flex: 1 1 auto; min-width: 0; } /* the platform's input — or Google's PlaceAutocompleteElement that replaces it (new_google_maps) — fills the field without a frame of its own */ body.nd-entry:not(#\9) .nd-deliv .nd-addr-field input, body.nd-entry .nd-deliv .nd-addr-field > :not(label) { width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background-color: transparent; font: inherit; font-size: 17px; font-weight: 500; color: var(--scene-ink); direction: inherit; text-align: start; } body.nd-entry .nd-deliv .nd-addr-field input::placeholder { color: rgba(22, 36, 44, .5); font-weight: 400; opacity: 1; } /* Google's referrer error puts one warning icon in the input — kept visible, not tiled */ body.nd-entry:not(#\9) .nd-deliv .nd-addr-field input.gm-err-autocomplete { background-repeat: no-repeat; background-size: 18px; background-position: right 0 center; padding-inline-start: 26px; } html[dir="ltr"] body.nd-entry:not(#\9) .nd-deliv .nd-addr-field input.gm-err-autocomplete { background-position: left 0 center; } /* the platform's submit is Eden's round control (.addr-go = .slot-act): the label stays for screen readers, the arrow is drawn over it */ body.nd-entry:not(#\9) .nd-deliv input.nd-addr-go { flex: none; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 999px; color: transparent; font-size: 0; cursor: pointer; background-color: #fff; box-shadow: inset 0 0 0 1.75px var(--brand-primary); background-image: none; -webkit-appearance: none; appearance: none; transition: background-color .24s; } body.nd-entry .nd-deliv .nd-addr:has(input.nd-addr-go)::after { content: none; } body.nd-entry .nd-deliv .nd-addr { position: relative; } body.nd-entry .nd-deliv .nd-addr::before { content: ''; position: absolute; inset-inline-end: 25px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--brand-primary); -webkit-mask: url('/images/new-design/icons/entry/go.svg') center / contain no-repeat; mask: url('/images/new-design/icons/entry/go.svg') center / contain no-repeat; pointer-events: none; transition: background-color .24s; } body.nd-entry:not(#\9) .nd-deliv .nd-addr:has(input.nd-addr-go:hover) input.nd-addr-go { background-color: var(--brand-primary); } body.nd-entry .nd-deliv .nd-addr:has(input.nd-addr-go:hover)::before { background: var(--brand-on-primary); } html[dir="ltr"] body.nd-entry .nd-deliv .nd-addr::before { transform: scaleX(-1); } body.nd-entry .nd-deliv .nd-addr:not(:has(input.nd-addr-go))::before { content: none; } body.nd-entry:not(#\9) .nd-deliv .nd-or { width: auto; height: auto; padding: 0; background: none; box-shadow: none; font-size: 15px; color: var(--scene-ink); } /* pickup (Eden .deliv-alt) */ body.nd-entry:not(#\9) .nd-deliv a.nd-pickup { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 62px; height: auto; min-width: 0; margin: 0; padding-inline: 20px; border-radius: 16px; border: 1px solid rgba(22, 36, 44, .05); background: #fff; color: var(--scene-ink); font-size: 16px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; text-decoration: none; box-shadow: 0 1px 2px rgba(var(--brand-secondary-rgb), .05), 0 8px 18px -14px rgba(var(--brand-secondary-rgb), .42); transition: transform .24s var(--e-soft), box-shadow .24s, border-color .24s; } body.nd-entry:not(#\9) .nd-deliv a.nd-pickup:hover { transform: translateY(-2px); border-color: rgba(var(--brand-primary-rgb), .34); } body.nd-entry .nd-deliv a.nd-pickup svg { width: 24px; height: 24px; } /* ─────────── The saved address (Eden .addr-saved / .addr-add) ─────────── Signed in: front/new-design/location-saved.blade.php (the delivery screen; the cards are the legacy button.address, «+» is the legacy «new address» button) and home-rows.blade.php (the home launcher; links). The card is the whole control, its circle is the slot control; «+» sits beside it, never inside. Several saved addresses stack in one column. */ body.nd-entry:not(#\9) .nd-addr-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } body.nd-entry:not(#\9) .nd-addr-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; } body.nd-entry:not(#\9) .nd-addr-cell > .nd-addr-saved { flex: 1 1 auto; } body.nd-entry:not(#\9) .nd-addr-saved { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; height: auto; min-height: 62px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px; outline: none; background: #fff; color: var(--scene-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 1px 2px rgba(var(--brand-secondary-rgb), .05); transition: box-shadow .24s, transform .24s var(--e-soft); } body.nd-entry:not(#\9) .nd-addr-saved:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(22, 36, 44, .07), 0 4px 10px -4px rgba(var(--brand-secondary-rgb), .2), 0 14px 30px -12px rgba(var(--brand-primary-rgb), .55); } body.nd-entry:not(#\9) .nd-addr-saved:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 1px 2px rgba(var(--brand-secondary-rgb), .05); } body.nd-entry:not(#\9) .nd-addr-saved .nd-addr-pin { width: 22px; height: 22px; flex: none; color: var(--scene-ink); } body.nd-entry:not(#\9) .nd-addr-saved-text { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--scene-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the card's circle: the slot control (Eden .slot-act), filled on the card's hover */ body.nd-entry:not(#\9) .nd-act { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 999px; color: var(--brand-primary); background: #fff; box-shadow: inset 0 0 0 1.75px var(--brand-primary); transition: background-color .24s, color .24s; } body.nd-entry:not(#\9) .nd-addr-saved:hover .nd-act { color: var(--brand-on-primary); background: var(--brand-primary); } body.nd-entry:not(#\9) .nd-addr-add { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; color: var(--brand-on-primary); background: var(--brand-primary); box-shadow: 0 2px 6px -2px rgba(var(--brand-secondary-rgb), .38); cursor: pointer; text-decoration: none; transition: background-color .24s, box-shadow .24s, transform .24s var(--e-soft); } body.nd-entry:not(#\9) .nd-addr-add::after { content: none; } /* front.css: .new .address.opened:after */ body.nd-entry:not(#\9) .nd-addr-add:hover { transform: translateY(-2px); background: var(--brand-primary-hover); box-shadow: 0 6px 16px -6px rgba(var(--brand-secondary-rgb), .45); } body.nd-entry:not(#\9) .nd-addr-add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .4), 0 2px 6px -2px rgba(var(--brand-secondary-rgb), .38); } body.nd-entry:not(#\9) .nd-addr-add.opened { background: var(--brand-primary-hover); } body.nd-entry .nd-addr-add svg { width: 22px; height: 22px; flex: none; } /* «כתובת חדשה»: a tooltip above the button, out of flow, so nothing in the row moves */ body.nd-entry:not(#\9) .nd-addr-add-label { position: absolute; bottom: calc(100% + 9px); left: 50%; padding: 6px 11px; border-radius: 8px; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.2; color: #fff; background: rgba(20, 28, 32, .93); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); opacity: 0; transform: translateX(-50%) translateY(4px); transition: opacity .18s, transform .22s var(--e-soft); pointer-events: none; } body.nd-entry:not(#\9) .nd-addr-add-label::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: rgba(20, 28, 32, .93); } body.nd-entry:not(#\9) .nd-addr-add:is(:hover, :focus-visible) .nd-addr-add-label { opacity: 1; transform: translateX(-50%) translateY(0); } /* the delivery screen with saved addresses: the typed address (after «+») below the row */ body.nd-entry:not(#\9) .nd-saved { margin-top: 30px; } body.nd-entry:not(#\9) .nd-saved .nd-saved-new { margin: 0 0 14px; } body.nd-entry:not(#\9) .nd-saved .nd-deliv-row { margin-bottom: 14px; } /* the home launcher (signed in, a saved address): Eden .home-row-label + .home-row */ body.nd-entry.home:not(#\9) .nd-home-launch { width: 100%; margin: 0; } body.nd-entry.home:not(#\9) .nd-home-row-label { margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; color: var(--scene-ink); } body.nd-entry.home:not(#\9) .nd-home-launch .nd-deliv-row { margin: 0; } /* the Site's live map (Eden .deliv-map) */ body.nd-entry:not(#\9) .nd-deliv .map_wrapper { max-width: none; margin: 0; height: auto !important; border-radius: 20px; overflow: hidden; background: transparent !important; line-height: 0; box-shadow: 0 1px 2px rgba(var(--brand-secondary-rgb), .05), 0 12px 28px -18px rgba(var(--brand-secondary-rgb), .5); } body.nd-entry:not(#\9) .nd-deliv #map { height: clamp(220px, 30vh, 330px) !important; border-radius: 20px; } @media (max-width: 640px) { body.nd-entry.location:not(#\9) .main > .nd-page-title + h4 { font-size: 15px; } body.nd-entry:not(#\9) .nd-deliv { margin-top: 22px; } body.nd-entry:not(#\9) .nd-deliv .nd-deliv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; } body.nd-entry:not(#\9) .nd-deliv .nd-addr { flex: 1 1 100%; min-height: 58px; } body.nd-entry:not(#\9) .nd-deliv .nd-addr-cell { flex: 1 1 100%; } body.nd-entry:not(#\9) .nd-addr-saved { min-height: 58px; padding-inline: 14px; } body.nd-entry:not(#\9) .nd-addr-saved-text { font-size: 16px; } /* Eden on a phone: «או» on its own line, the pickup pill full width under it */ body.nd-entry:not(#\9) .nd-deliv .nd-or { flex: 1 1 100%; text-align: center; } body.nd-entry:not(#\9) .nd-deliv a.nd-pickup { flex: 1 1 100%; min-height: 58px; } body.nd-entry:not(#\9) .nd-deliv .nd-or { font-size: 14px; } body.nd-entry:not(#\9) .nd-deliv #map { height: 260px !important; } } /* ════════════ ENTRY DIALOGS ════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ENTRY DIALOGS — the platform's own modals and bootbox on the entry scenes The menu layer (phase 2) reskins its dialogs; on the entry screens the platform's dialogs kept the legacy look inside the new design: the pickup confirmation (bootbox), the Site's welcome popup (#initial_popup), the branch choice — red ×, red outlined buttons, a red frame. Generic by structure only (.modal-content / header / footer / .btn-primary / .btn-default / .close); no ids, no texts. The Site's popup content itself is left as the Site wrote it. ═══════════════════════════════════════════════════════════════════════════ */ body.nd-entry:not(#\9) .modal-backdrop.show { background: rgba(0, 0, 0, .55); opacity: 1; } body.nd-entry:not(#\9) .modal-content { position: relative; border: none; border-radius: 26px; /* Eden's panel radius */ background: #fff; color: var(--black); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); overflow: hidden; } body.nd-entry:not(#\9) .modal-header { border-bottom: 1px solid var(--line-2); padding: 18px 20px 14px; padding-inline-end: 60px; /* room for the round close button */ } body.nd-entry:not(#\9) .modal-title { margin: 0; font-weight: 600; color: var(--black); } body.nd-entry:not(#\9) .modal-body { padding: 18px 20px; color: var(--black); text-align: start; } /* a bootbox confirmation has no header: the message is the body and × sits in it */ body.nd-entry:not(#\9) .bootbox .modal-body { padding-inline-end: 60px; font-size: 17px; line-height: 1.45; } body.nd-entry:not(#\9) .modal button.close { position: absolute; top: 14px; inset-inline-end: 14px; float: none; z-index: 5; width: 34px; height: 34px; margin: 0; padding: 0; border: none; border-radius: 50%; background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-secondary); opacity: 1; font-size: 22px; line-height: 1; text-shadow: none; display: flex; align-items: center; justify-content: center; } body.nd-entry:not(#\9) .modal-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; border-top: none; padding: 4px 20px 20px; } body.nd-entry:not(#\9) .modal-footer > * { margin: 0; } body.nd-entry:not(#\9) .modal :is(.btn-primary, .btn-default, .btn-secondary)::after { content: none; } body.nd-entry:not(#\9) .modal :is(.btn-primary, .btn-default, .btn-secondary) { position: static; /* delicates: a press overlay on buttons (relative + ::after) */ overflow: visible; min-width: 110px; min-height: 48px; padding: 10px 28px; border: 1.5px solid transparent; border-radius: 14px; /* Eden .auth-cta */ font-size: 16px; font-weight: 600; line-height: 1.2; box-shadow: none; transition: background-color .24s, border-color .24s; } /* the dialog's main action is the brand's, as Eden's buttons (Alik 30.09, O1) */ body.nd-entry:not(#\9) .modal .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); } body.nd-entry:not(#\9) .modal .btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } body.nd-entry:not(#\9) .modal :is(.btn-default, .btn-secondary) { background: transparent; border-color: rgba(var(--brand-secondary-rgb), .25); color: var(--black); }