/* =========================== eSIM Catalog page Direction-agnostic (RTL/LTR). Direction is NOT set here — it comes from (driven by culture in the master). All directional offsets use logical properties so the layout mirrors automatically on dir change. Requires esim-tokens.css (loaded first). =========================== */ /* --- Page container --- */ .esim-page { /* direction inherited from — do NOT hardcode it here */ text-align: start; font-family: var(--esim-font); color: var(--esim-text-dark); max-width: 1600px; margin: 0 auto; padding: 0 20px; } /* =========================== Catalog page — desktop layout 2-column: main content (right in RTL) + phone (left in RTL) =========================== */ .esim-content { display: block; } /* --- Stage: 2-column row that sits BELOW the hero + tabs --- In RTL the first DOM child (.esim-phone) renders on the right, the catalog sections (.esim-stage__main) on the left. The phone lives here (not inside any
) so it stays visible on every tab. */ .esim-stage { display: flex; gap: 32px; align-items: flex-start; position: relative; } .esim-stage__main { flex: 1; min-width: 0; /* let the inner grid shrink */ } .esim-main { flex: 1; min-width: 0; /* allow inner grid to shrink */ } /* --- Hero section --- */ .esim-hero { padding: 0 0 24px; margin-bottom: 20px; margin-inline-start: 340px; /* gutter for the phone, which sits on the start side */ } .esim-hero__title { font-family: var(--esim-font-u-bold); font-size: 55px; font-weight: 700; color: var(--esim-navy); line-height: 56px; text-align: center; } .esim-hero__subtitle { font-family: var(--esim-font-u-bold); font-size: 55px; font-weight: 700; color: var(--esim-orange); margin: 0 0 24px; line-height: 56px; text-align: center; } .esim-search { display: flex; align-items: stretch; gap: 12px; max-width: 100%; margin: 0; } .esim-search__input { flex: 1; padding: 12px 22px; font-size: 14px; font-family: var(--esim-font); outline: none; background: var(--esim-white); color: var(--esim-text-dark); min-width: 0; /*min-width: 0;*/ /* allow input to shrink inside flex */ max-width: 742px; width: 100%; margin-inline-end: auto; /* inert at width:100%; kept logical so it mirrors */ border-color: #60748B; text-align: start; border-radius: 15px; border: 1px solid #60748B; } .esim-search__input:focus { border-color: var(--esim-navy); box-shadow: 0 0 0 3px rgba(45, 43, 107, 0.1); } .esim-search__input::placeholder { color: #AAABAD; font-family: var(--esim-font); font-weight: 400; font-size: 16px; line-height: 28px; letter-spacing: 0; text-align: start; } .esim-search__btn { background: var(--esim-navy); color: var(--esim-white); border: 3px solid var(--esim-white); padding: 12px 36px; font-family: var(--esim-font); font-size: 20px; font-weight: 400; cursor: pointer; border-radius: 100px; transition: background 0.2s; flex-shrink: 0; } .esim-search__btn:hover { background: var(--esim-navy-light); } /* =========================================================================== Search dropdown --------------------------------------------------------------------------- Styles the panel built by esim-search.js inside .esim-search__field: .esim-search-dd > (.esim-search-dd__item > .esim-search-dd__name + .esim-search-dd__flag) plus .esim-search-dd__label (the "זמינה גם ב..." divider) and .esim-search-dd__empty. =========================================================================== */ /* --- Field wrapper: fills the search pill and anchors the dropdown --------- */ .esim-search__field { position: relative; /* containing block for the absolutely-positioned panel */ flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; } .esim-search__field .esim-search__input { width: 100%; } /* --- Panel ----------------------------------------------------------------- */ .esim-search-dd { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0; z-index: 20; max-height: 60vh; overflow-y: auto; background-color: var(--esim-white); border: 1px solid var(--esim-gray-border); border-radius: 15px; padding-block: 8px; padding-inline: 8px; box-shadow: var(--esim-shadow-hover); } .esim-search-dd[hidden] { display: none; } /* --- Result row ------------------------------------------------------------ */ .esim-search-dd__item { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding-block: 8px; padding-inline: 10px; border-radius: 10px; text-decoration: none; color: var(--esim-navy); } .esim-search-dd__item:hover { background-color: var(--esim-blue-light); } .esim-search-dd__name { font-family: var(--esim-font-bold); font-weight: 700; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esim-search-dd__item--region .esim-search-dd__name { font-family: var(--esim-font); font-weight: 400; } /* Constrains BOTH the country flag and the region icon (r.icon) — this is what stops a large image (e.g. the eSIM-chip region art) from blowing the panel out to full size. */ .esim-search-dd__flag { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } /* --- "זמינה גם ב..." section divider --------------------------------------- */ .esim-search-dd__label { margin-block-start: 4px; padding-block: 8px 4px; padding-inline: 10px; font-family: var(--esim-font-bold); font-weight: 700; font-size: 13px; color: #160861; border-block-start: 1px solid var(--esim-gray-border); } /* --- Empty / no-results state ---------------------------------------------- */ .esim-search-dd__empty { padding-block: 12px; padding-inline: 10px; font-family: var(--esim-font); font-weight: 700; font-size: 14px; color: var(--esim-text-muted); text-align: center; } /* --- Tabs --- */ .esim-tabs { display: flex; justify-content: space-between; align-items: stretch; gap: 0; /* Solid 3px orange strip under all tabs (per design). The active tab is distinguished by font-weight (800), not by a separate underline. */ border-bottom: 3px solid #F1481F; margin-bottom: 7px; margin-inline-start: 340px; /* same phone gutter as .esim-hero */ } .esim-tabs__tab { /* Each tab takes equal share of the row width. Combined with space-between, tabs span the full width evenly. */ flex: 1; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 12px; font-family: var(--esim-font); font-size: 18px; font-weight: 400; line-height: 28px; letter-spacing: 0; text-align: start; color: var(--esim-navy); cursor: pointer; border: none; background: none; position: relative; transition: color 0.2s; white-space: nowrap; } .esim-tabs__tab:hover { color: var(--esim-navy); } .esim-tabs__tab--active { color: var(--esim-navy); font-weight: 800; } .esim-tabs__tab--active::after { content: ""; position: absolute; bottom: -2px; inset-inline-start: 0; width: 100%; height: 6px; background: #F1481F; } .esim-tabs__tab--active:hover, .esim-tabs__tab--active:focus { color: var(--esim-white); } /* --- Tab icons: per-type sizes (Figma exports) --- Reset old margin/font-size; we use flex gap on the parent now. */ .esim-tabs__icon { display: block; flex-shrink: 0; margin: 0; } .esim-tabs__tab[data-type="popular"] .esim-tabs__icon { width: 26.25px; height: 26.25px; } .esim-tabs__tab[data-type="local"] .esim-tabs__icon { width: 27px; height: 29px; } .esim-tabs__tab[data-type="regional"] .esim-tabs__icon { width: 22.68px; height: 24.5px; } .esim-tabs__tab[data-type="global"] .esim-tabs__icon { width: 22px; height: 22px; } /* --- Catalog header ("Popular destinations") --- */ .esim-catalog__header { font-family: var(--esim-font-u-bold); font-size: 18px; font-weight: 700; color: #112C55; margin: 15px 0 24px 0; text-align: start; } .esim-main__row { display: flex; gap: 20px; min-height: 500px; align-items: flex-start; padding-block: 24px; padding-inline: 0 15px; /* start end (was right:0 / left:15px) */ border: 1px solid #E5E5E7; border-radius: 33px; background: linear-gradient(264.26deg, #F4F8FF 5.98%, #BED5FF 67.63%); } .esim-catalog { flex: 1; min-width: 0; } .esim-catalog-regional-wrapper { max-width: 650px; margin-block: 0; margin-inline-end: auto; /* hug the start edge (was margin-left:auto) */ } /* --- Country grid --- */ .esim-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 12px; column-gap: 20px; } /* --- Country card (pill style, navy background, white text) --- */ .esim-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* keeps the name from touching the price */ background: #6684BA; border-radius: 33px; padding-block: 18px; padding-inline: 21px 30px; /* start end — more room on the price (end) side */ cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; text-decoration: none; color: var(--esim-white); } .esim-card:hover { background: var(--esim-white); color: var(--esim-navy); box-shadow: 0 4px 12px rgba(45, 43, 107, 0.18); transform: translateY(-1px); } .esim-card:hover .esim-card__name, .esim-card:hover .esim-card__name, .esim-card:hover .esim-card__price-before-vat, .esim-card:hover .esim-card__price-value, .esim-card:hover .esim-card__vat { color: var(--esim-navy); } .esim-card__info { display: flex; align-items: center; gap: 12px; min-width: 0; } .esim-card__flag { font-size: 18px; line-height: 1; flex-shrink: 0; } img.esim-card__flag { width: 18px; height: 12.75px; border-radius: 3px; object-fit: cover; } .esim-card__name { font-family: var(--esim-font); font-size: 20px; line-height: 28px; font-weight: 400; color: var(--esim-white); /* long names wrap to a 2nd/3rd line instead of running into the price; clamp caps it at 3 lines with an ellipsis after that */ white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .esim-card__prices { font-family: var(--esim-font-d-bold); font-weight: 600; color: var(--esim-white); white-space: nowrap; display: flex; flex-direction: column; /* RTL parent: flex-start is the right edge */ align-items: flex-end; opacity: 0.9; } .esim-card__price-before-vat { direction: ltr; unicode-bidi: isolate; font-size: 18px; flex-shrink: 0; } .esim-card__price-with-vat { display: flex; align-items: baseline; gap: 4px; /* LTR: amount first (left), label after it (right) */ direction: ltr; flex-shrink: 0; } .esim-card__price-value { direction: ltr; unicode-bidi: isolate; font-size: 12px; } .esim-card__vat { font-size: 11px; } .esim-card__price-before-vat, .esim-card__price-with-vat { line-height: 1.1; } .esim-grid--regional { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .esim-card--region { /* No price → no need for space-between; content sits at the start side (right in RTL) */ justify-content: flex-start; padding: 14px 22px; min-height: 56px; } .esim-card--region .esim-card__info { gap: 14px; width: 100%; } /* Region icon: stylised continent silhouette (SVG file). In RTL flex it naturally appears on the right of the name. */ .esim-card__region-icon { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; } .esim-card--region .esim-card__name { font-size: 20px; /* Long region names ("המזרח התיכון וצפון אפריקה") should wrap if needed */ white-space: normal; line-height: 28px; } /* When the section has no promo, the inner row's grid should take full width (no 220px column reserved for promo). */ .esim-main__row--no-promo .esim-catalog { flex: 1 1 100%; } /* --- Promo block (left side in RTL) --- Speech-bubble style card: rounded panel with a small rotated square "tail" pointing toward the country grid. */ .esim-promo { width: 220px; flex-shrink: 0; position: relative; /* anchor for the ::before "tail" */ background: var(--esim-white); border: 1px solid var(--esim-gray-border); border-radius: 30px; padding: 20px; box-shadow: 0 2px 8px rgba(45, 43, 107, 0.04); margin-top: 55px; margin-inline-start: 10px; } /* Diamond "tail" pointing toward the grid. In RTL `right` is the start side (visually the right edge of the card — adjacent to the grid). The square sits half inside / half outside the card so only a triangle sticks out beyond the card edge. */ .esim-promo::before { content: ''; display: block; position: absolute; width: 64px; height: 64px; top: 80px; inset-inline-start: -15px; /* points toward the grid (start side of the promo) */ transform: rotate(45deg); background: var(--esim-white); border-radius: 10px; /* Sit behind the card content but still on the gradient backdrop. */ z-index: 0; } /* Make sure all real content sits above the tail. */ .esim-promo > * { position: relative; z-index: 1; } .esim-idea-icon { width: 24px; height: 24px; flex-shrink: 0; } .esim-promo__badge { display: flex; align-items: center; gap: 3px; margin-bottom: 15px; margin-inline-start: -10px; } .esim-promo__title { display: block; font-family: var(--esim-font-u-bold); font-size: 21px; font-weight: 800; color: #160861; } .esim-promo__text { font-family: var(--esim-font); font-size: 18px; font-weight: 400; line-height: 20px; color: #160861; margin: 0 0 10px; } .esim-promo__text:last-of-type { margin-bottom: 0; } /* Inline highlight inside body text — used by wrappers around "כרטיס eSIM" and "25% הנחה על כל חבילה שתרכשו" inside the resx strings. */ .esim-promo__highlight { color: var(--esim-orange); } .esim-promo__footnote { font-family: var(--esim-font); font-weight: 400; font-size: 14px; color: #160861; line-height: 18px; margin: 12px 0 0; } .esim-footer-actions { display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin-top: 46px; flex-wrap: wrap; } .esim-more__btn { display: inline-block; padding: 6px 32px; background: linear-gradient(270deg, #F1481F 5.06%, #FB956A 115.32%); box-shadow: 0px 4px 30px 0px #24126A3D; color: var(--esim-white); border: 3px solid var(--esim-white); border-radius: 100px; font-size: 16px; font-weight: 500; font-family: var(--esim-font); cursor: pointer; transition: background 0.2s; text-decoration: none; } .esim-more__btn:hover { background: var(--esim-orange-light); } .esim-viewall__link { font-size: 18px; font-family: var(--esim-font-u-bold); color: var(--esim-navy); text-decoration: none; font-weight: 800; } .esim-viewall__link:hover { text-decoration: underline; } .esim-phone { width: 343px; text-align: center; } .esim-phone__img { display: block; max-width: 100%; height: auto; margin: 0 auto; } /* =========================== Desktop: phone overlays the section panel (.esim-main__row). The phone sits ON the blue panel (not in a column beside it), rides up over the panel's top edge, and juts slightly past the panel's right edge. The panel reserves space on its right so the country cards don't sit under the phone. Anchored to .esim-stage (position:relative), so the single phone overlays whichever section/tab is currently visible. Tuning knobs (all in this block): .esim-phone top -> how far the top pokes above the panel .esim-phone inset-inline-start -> how far it juts past the panel's start edge .esim-phone width -> phone size .esim-main__row padding-inline-start -> how much card space to reserve =========================== */ @media (min-width: 1025px) { .esim-main__row { padding-inline-start: 340px; /* reserve card space on the phone (start) side */ } .esim-phone { position: absolute; top: -120px; inset-inline-start: -10px; width: 343px; } } /* =========================== Mobile: Catalog page Reworked to match the mobile Figma mockup. Phones AND tablets up to 1024px share the mobile treatment (plan "a"). Desktop overlay starts at 1025px. =========================== */ /* --- ≤1024px: hide phone, stack the inner row, keep the panel --- */ @media (max-width: 1024px) { .esim-phone { display: none; } /* phone no longer reserves card space on the panel */ .esim-main__row { flex-direction: column; padding-inline-start: 0; } /* drop the 340px gutter that was reserved for the phone */ .esim-hero, .esim-tabs { margin-inline-start: 0; } .esim-promo { width: 100%; min-width: auto; } .esim-page { padding-inline: 0; min-width: 320px; } } /* --- Narrow desktop (1025-1250px): 2 country columns instead of 3, so the promo panel and long country names do not collide with the prices. --- */ @media (min-width: 1025px) and (max-width: 1280px) { .esim-grid { grid-template-columns: repeat(2, 1fr); } .esim-main__row { padding-inline-start: 290px; } .esim-phone { width: 300px; top: -105px; } .esim-promo { width: 195px; } }