/* ========================================================================== KhairPlus – Charity 1 (2026-11-10) — the charity sub-standard's blocks: header, split hero, quick links, about, facts, quick pay band, Instagram and YouTube feeds (templates under boxs/component/storefront/es/charity/, script assets/sf-khp.js). Every colour reads the ES tokens, so the Theme row recolours them: --es-blue = primary (green), --es-navy = secondary (ink), --es-amber = accent (gold, text --es-amber-ink), --es-bg / --es-surface / --es-text / --es-muted / --es-border = neutrals, --es-font-head = Readex Pro. Logical properties only, so Arabic (dir=rtl) mirrors without extra rules. Breakpoints: 1279 (menu row -> menu button), 999 (phone layouts), 640, 380. The header reuses the sector header classes (css/es/sector.css) and adds its own under .es-khp-hdr. ========================================================================== */ /* ---------- page frame: the design's 1160px column + IBM Plex body ------- */ .sf-scope[data-ct="5"]:has(.es-khp-hdr), .sf-scope[data-ct="5"]:has(.es-khp) { --es-wrap: min(1160px, calc(100% - 32px)); --es-font: "IBM Plex Sans Arabic", "Inter", "Cairo", system-ui, sans-serif; } /* ---------- shared ------------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp { width: var(--es-wrap); margin-inline: auto; box-sizing: border-box; color: var(--es-text); } .sf-scope[data-ct="5"] .es-khp *, .sf-scope[data-ct="5"] .es-khp *::before, .sf-scope[data-ct="5"] .es-khp *::after { box-sizing: border-box; } .sf-scope[data-ct="5"] .es-khp img { display: block; max-width: 100%; } .sf-scope[data-ct="5"] .es-khp a { text-decoration: none; } .sf-scope[data-ct="5"] .es-khp [hidden] { display: none !important; } .sf-scope[data-ct="5"] .es-khp-wrap { width: var(--es-wrap); margin-inline: auto; box-sizing: border-box; } .sf-scope[data-ct="5"] .es-khp-h { font-family: var(--es-font-head, var(--es-font)); } .sf-scope[data-ct="5"] .es-khp-ic { flex: none; display: block; } .sf-scope[data-ct="5"] .es-khp-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-scope[data-ct="5"] .es-khp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sf-scope[data-ct="5"] .es-khp-eye { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--es-blue); } .sf-scope[data-ct="5"] .es-khp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 12px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, filter .15s; } .sf-scope[data-ct="5"] .es-khp-btn--gold, .sf-scope[data-ct="5"] .es-khp-btn--gold:hover { background: var(--es-amber); color: var(--es-amber-ink); } .sf-scope[data-ct="5"] .es-khp-btn--gold:hover { filter: brightness(.95); } .sf-scope[data-ct="5"] .es-khp-btn--green { background: var(--es-blue); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-btn--green:hover { background: var(--es-blue-ink); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-btn--outline { border-color: var(--es-blue); background: var(--es-surface); color: var(--es-blue); } .sf-scope[data-ct="5"] .es-khp-btn--outline:hover { background: var(--es-blue-soft); color: var(--es-blue-ink); } .sf-scope[data-ct="5"] .es-khp-btn--line { border-color: var(--es-border); background: var(--es-surface); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-btn--line:hover { border-color: var(--es-blue); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; } .sf-scope[data-ct="5"] .es-khp-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; } .sf-scope[data-ct="5"] .es-khp-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--es-blue); font-weight: 700; } .sf-scope[data-ct="5"] .es-khp-more:hover { color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp a:focus-visible, .sf-scope[data-ct="5"] .es-khp button:focus-visible, .sf-scope[data-ct="5"] .es-khp select:focus-visible, .sf-scope[data-ct="5"] .es-khp-hdr a:focus-visible, .sf-scope[data-ct="5"] .es-khp-hdr button:focus-visible, .sf-scope[data-ct="5"] .es-khp-drawer a:focus-visible { outline: 3px solid var(--es-amber); outline-offset: 2px; } /* section heading row (Instagram strip, YouTube) */ .sf-scope[data-ct="5"] .es-khp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 28px; } .sf-scope[data-ct="5"] .es-khp-head__lead { min-width: 0; } .sf-scope[data-ct="5"] .es-khp-head__title { margin: 6px 0 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 700; color: var(--es-navy); text-wrap: balance; } /* empty state (feed not connected / nothing fetched) */ .sf-scope[data-ct="5"] .es-khp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 196px; padding: 28px; border: 1px dashed color-mix(in srgb, var(--es-blue) 45%, #FFFFFF); border-radius: 18px; background: var(--es-bg); text-align: center; } .sf-scope[data-ct="5"] .es-khp-empty__ic { width: 52px; height: 52px; border-radius: 999px; background: var(--es-blue-soft); color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-empty__title { font-size: 18px; color: var(--es-navy); } /* ---------- header ------------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-hdr { --sxh-r: 12px; } .sf-scope[data-ct="5"] .es-khp-hdr__util { background: var(--es-navy); color: rgba(255, 255, 255, .8); font-size: 13px; } .sf-scope[data-ct="5"] .es-khp-hdr__utilin { display: flex; align-items: center; gap: 4px 20px; min-height: 40px; } .sf-scope[data-ct="5"] .es-khp-hdr__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-hdr__ulink { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: rgba(255, 255, 255, .82); white-space: nowrap; } .sf-scope[data-ct="5"] .es-khp-hdr__ulink--strong { color: #FFFFFF; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-hdr__ulink:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .sf-scope[data-ct="5"] .es-khp-hdr__ulink .es-khp-ic { color: var(--es-amber); } .sf-scope[data-ct="5"] .es-khp-hdr__note { white-space: nowrap; } .sf-scope[data-ct="5"] .es-khp-hdr__ann { flex: 1 1 auto; min-width: 0; color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-hdr__tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .sf-scope[data-ct="5"] .es-khp-hdr__social { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-hdr__social:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-hdr__sep { width: 1px; height: 18px; margin-inline: 6px; background: rgba(255, 255, 255, .22); } .sf-scope[data-ct="5"] .es-khp-hdr__util .es-sxh-act, .sf-scope[data-ct="5"] .es-khp-hdr__util .es-sxh-langlink { min-height: 40px; background: transparent; color: #FFFFFF; font-size: 13px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-hdr__util .es-sxh-act:hover, .sf-scope[data-ct="5"] .es-khp-hdr__util .es-sxh-langlink:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-hdr__bar { display: flex; align-items: center; gap: 24px; min-height: 84px; padding-block: 10px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-brand { flex: none; } .sf-scope[data-ct="5"] .es-khp-hdr__nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-hdr__nav .es-sxh-nav { flex-wrap: nowrap; gap: 2px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav .es-sxh-nav__link { height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav .es-nav__item--has > .es-sxh-nav__link { padding-inline-end: 28px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav .es-nav__toggle { height: 44px; margin-inline-start: -28px; } .sf-scope[data-ct="5"] .es-khp-hdr__end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-acts { gap: 8px; } .sf-scope[data-ct="5"] .es-khp-hdr__bar .es-sxh-act { border: 1px solid var(--es-border); background: var(--es-surface); } .sf-scope[data-ct="5"] .es-khp-hdr__bar .es-sxh-act:hover { border-color: var(--es-blue); background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-icon--ring:hover { border-color: var(--es-blue); background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__menubtn, .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__menubtn:hover { background: var(--es-blue); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__menubtn:hover { background: var(--es-blue-ink); } /* dropdown: icon cards (links that carry an icon or a description) */ .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-panel { padding: 12px; border-radius: 18px; box-shadow: 0 24px 48px color-mix(in srgb, var(--es-navy) 14%, transparent); } .sf-scope[data-ct="5"] .es-khp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(620px, 80vw); } .sf-scope[data-ct="5"] .es-khp-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-card:hover { background: var(--es-bg); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-card__ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--es-blue-soft); color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-card__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; } .sf-scope[data-ct="5"] .es-khp-card__sub { font-size: 13px; line-height: 1.45; color: var(--es-muted); } /* drawer: the two buttons on top, language + WhatsApp at the foot */ .sf-scope[data-ct="5"] .es-khp-drawer__ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding-block: 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--es-border); } .sf-scope[data-ct="5"] .es-khp-drawer__ctas .es-khp-btn { padding: 0 12px; } .sf-scope[data-ct="5"] .es-khp-drawer__pair { display: flex; gap: 8px; width: 100%; } .sf-scope[data-ct="5"] .es-khp-drawer__pair .es-khp-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; } /* menu row -> menu button below 1280px; phones keep logo | search | menu */ @media (max-width: 1359px) { .sf-scope[data-ct="5"] .es-khp-hdr__bar { gap: 16px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav .es-sxh-nav__link { padding-inline: 9px; font-size: 14px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav .es-nav__item--has > .es-sxh-nav__link { padding-inline-end: 26px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-btn { padding: 0 16px; font-size: 14px; } } @media (max-width: 1279px) { .sf-scope[data-ct="5"] .es-khp-hdr .es-khp-hdr__nav { display: none; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-menubtn { display: inline-grid; } } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-hdr__utilin { gap: 4px 12px; min-height: 36px; } .sf-scope[data-ct="5"] .es-khp-hdr__ulink--mail, .sf-scope[data-ct="5"] .es-khp-hdr__note, .sf-scope[data-ct="5"] .es-khp-hdr__social, .sf-scope[data-ct="5"] .es-khp-hdr__sep { display: none; } .sf-scope[data-ct="5"] .es-khp-hdr__ann { font-size: 12px; text-align: center; } .sf-scope[data-ct="5"] .es-khp-hdr__util .es-sxh-langlink { min-height: 44px; } .sf-scope[data-ct="5"] .es-khp-hdr__bar { gap: 6px; min-height: 64px; padding-block: 10px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-brand { flex: 0 1 auto; margin-inline-end: auto; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-brand__logo { height: 36px; } .sf-scope[data-ct="5"] .es-khp-hdr__end { gap: 6px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-acts { gap: 6px; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-act--account { display: none; } .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-act { min-width: 44px; padding: 0; } } @media (max-width: 380px) { .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-brand__logo { max-width: 120px; } .sf-scope[data-ct="5"] .es-khp-hdr__end, .sf-scope[data-ct="5"] .es-khp-hdr .es-sxh-acts { gap: 4px; } } /* ---------- hero: split slide -------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-hero { position: relative; overflow: hidden; border-radius: 28px; background: var(--es-navy); color: #FFFFFF; isolation: isolate; } .sf-scope[data-ct="5"] .es-khp-hero__slide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 520px; animation: khp-fade .5s ease; } .sf-scope[data-ct="5"] .es-khp-hero__slide[hidden] { display: none !important; } .sf-scope[data-ct="5"] .es-khp-hero__panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 64px 56px 92px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-hero__eye { align-self: flex-start; display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: color-mix(in srgb, var(--es-blue) 25%, #FFFFFF); font-size: 13px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-hero__title { margin: 0; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.2; font-weight: 700; color: #FFFFFF; text-wrap: balance; } .sf-scope[data-ct="5"] .es-khp-hero__text { margin: 0; max-width: 500px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.8; color: rgba(255, 255, 255, .84); } .sf-scope[data-ct="5"] .es-khp-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .sf-scope[data-ct="5"] .es-khp-hero__media { position: relative; min-height: 260px; background: color-mix(in srgb, var(--es-navy) 80%, var(--es-blue)); } .sf-scope[data-ct="5"] .es-khp-hero__media picture { position: absolute; inset: 0; } .sf-scope[data-ct="5"] .es-khp-hero__fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--es-navy) 0%, color-mix(in srgb, var(--es-navy) 15%, transparent) 38%, transparent 60%); pointer-events: none; } [dir="rtl"] .sf-scope[data-ct="5"] .es-khp-hero__fade { background: linear-gradient(270deg, var(--es-navy) 0%, color-mix(in srgb, var(--es-navy) 15%, transparent) 38%, transparent 60%); } .sf-scope[data-ct="5"] .es-khp-hero__cap { position: absolute; inset-inline-end: 24px; bottom: 24px; z-index: 1; display: flex; align-items: center; gap: 12px; max-width: min(300px, calc(100% - 48px)); padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-hero__capic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--es-blue-soft); color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-hero__captxt { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.5; } .sf-scope[data-ct="5"] .es-khp-hero__dots { position: absolute; z-index: 2; inset-inline-start: 50px; bottom: 26px; display: flex; align-items: center; gap: 0; } .sf-scope[data-ct="5"] .es-khp-hero__dot { position: relative; width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .sf-scope[data-ct="5"] .es-khp-hero__dot::before { content: ""; position: absolute; inset-inline-start: 6px; top: 19px; width: 10px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .35); transition: width .25s, background-color .25s; } .sf-scope[data-ct="5"] .es-khp-hero__dot.is-on { width: 44px; } .sf-scope[data-ct="5"] .es-khp-hero__dot.is-on::before { width: 32px; background: var(--es-amber); } .sf-scope[data-ct="5"] .es-khp-hero__arrows { position: absolute; z-index: 2; inset-inline-end: 24px; top: 24px; display: flex; gap: 8px; } .sf-scope[data-ct="5"] .es-khp-hero__arrow { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--es-navy); cursor: pointer; } .sf-scope[data-ct="5"] .es-khp-hero__arrow:hover { background: #FFFFFF; } @keyframes khp-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-hero { border-radius: 22px; } .sf-scope[data-ct="5"] .es-khp-hero__slide { grid-template-columns: minmax(0, 1fr); min-height: 0; } .sf-scope[data-ct="5"] .es-khp-hero__media { order: -1; min-height: 0; height: clamp(200px, 48vw, 340px); } .sf-scope[data-ct="5"] .es-khp-hero__fade, [dir="rtl"] .sf-scope[data-ct="5"] .es-khp-hero__fade { background: linear-gradient(0deg, var(--es-navy) 0%, transparent 60%); } .sf-scope[data-ct="5"] .es-khp-hero__panel { gap: 14px; padding: 4px 22px 56px; } .sf-scope[data-ct="5"] .es-khp-hero__eye { min-height: 0; padding: 0; background: none; font-size: 12px; } .sf-scope[data-ct="5"] .es-khp-hero__title { font-size: clamp(26px, 7vw, 34px); line-height: 1.25; } .sf-scope[data-ct="5"] .es-khp-hero__text { font-size: 15px; } .sf-scope[data-ct="5"] .es-khp-hero__btns .es-khp-btn { flex: 1 1 auto; min-height: 48px; padding: 0 18px; font-size: 15px; } .sf-scope[data-ct="5"] .es-khp-hero__dots { inset-inline: 0; bottom: 6px; justify-content: center; } .sf-scope[data-ct="5"] .es-khp-hero__arrows { display: none; } .sf-scope[data-ct="5"] .es-khp-hero__cap { inset-inline-end: 12px; bottom: 12px; padding: 10px 12px; } } @media (max-width: 640px) { .sf-scope[data-ct="5"] .es-khp-hero__cap { display: none; } } /* ---------- quick links (overlap the hero) -------------------------------- */ .sf-scope[data-ct="5"] > .sf-part:has(.es-khp-ql) { position: relative; z-index: 2; } .sf-scope[data-ct="5"] .es-khp-ql__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .sf-scope[data-ct="5"] .es-khp-ql--overlap .es-khp-ql__grid { padding-inline: 32px; } .sf-scope[data-ct="5"] .es-khp-ql__card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--es-border); border-radius: 20px; background: var(--es-surface); color: var(--es-navy); box-shadow: 0 16px 36px color-mix(in srgb, var(--es-navy) 10%, transparent); transition: transform .15s, border-color .15s; } .sf-scope[data-ct="5"] a.es-khp-ql__card:hover { transform: translateY(-2px); border-color: var(--es-blue); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-ql__ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--es-blue-soft); color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-ql__card--1 .es-khp-ql__ic { background: var(--es-blue); color: #FFFFFF; } .sf-scope[data-ct="5"] .es-khp-ql__card--2 .es-khp-ql__ic { background: var(--es-amber); color: var(--es-amber-ink); } .sf-scope[data-ct="5"] .es-khp-ql__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-ql__label { font-size: 17px; line-height: 1.35; } .sf-scope[data-ct="5"] .es-khp-ql__sub { font-size: 14px; line-height: 1.45; color: var(--es-muted); } @media (min-width: 1000px) { /* pull the cards up over the block above (the hero): cancel the page gap + 44px */ .sf-scope[data-ct="5"] > .sf-part:has(.es-khp-ql--overlap) { margin-block-start: calc(-1 * var(--es-main-gap, 0px) - 44px); } /* the hero's photo caption and dots sit above the overlapping cards */ .sf-scope[data-ct="5"] > .sf-part:has(.es-khp-hero):has(+ .sf-part .es-khp-ql--overlap) .es-khp-hero__cap { bottom: 72px; } .sf-scope[data-ct="5"] > .sf-part:has(.es-khp-hero):has(+ .sf-part .es-khp-ql--overlap) .es-khp-hero__dots { bottom: 60px; } } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-ql__grid, .sf-scope[data-ct="5"] .es-khp-ql--overlap .es-khp-ql__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-inline: 0; } .sf-scope[data-ct="5"] .es-khp-ql__card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 16px; box-shadow: none; } .sf-scope[data-ct="5"] .es-khp-ql__ic { width: 44px; height: 44px; border-radius: 12px; } .sf-scope[data-ct="5"] .es-khp-ql__label { font-size: 15px; } .sf-scope[data-ct="5"] .es-khp-ql__sub { font-size: 13px; } } /* ---------- about --------------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; } .sf-scope[data-ct="5"] .es-khp-about--solo { grid-template-columns: minmax(0, 760px); } .sf-scope[data-ct="5"] .es-khp-about__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-about__title { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.3; font-weight: 700; color: var(--es-navy); text-wrap: balance; } .sf-scope[data-ct="5"] .es-khp-about__text { margin: 0; font-size: 17px; line-height: 1.9; color: var(--es-text); } .sf-scope[data-ct="5"] .es-khp-about__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; } .sf-scope[data-ct="5"] .es-khp-about__card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px; border: 1px solid var(--es-border); border-radius: 20px; background: var(--es-surface); color: var(--es-navy); } .sf-scope[data-ct="5"] a.es-khp-about__card:hover { border-color: var(--es-blue); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-about__cardic { width: 40px; height: 40px; border-radius: 10px; background: var(--es-blue-soft); color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-about__cardlabel { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; } .sf-scope[data-ct="5"] .es-khp-about .es-khp-more { align-self: flex-start; } .sf-scope[data-ct="5"] .es-khp-about__media { position: relative; display: grid; place-items: center; padding-block: 30px; } .sf-scope[data-ct="5"] .es-khp-about__blob { position: absolute; inset: 30px 20px; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-about__img { position: relative; width: 82%; height: auto; border-radius: 28px; } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-about { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sf-scope[data-ct="5"] .es-khp-about__text { font-size: 16px; line-height: 1.8; } .sf-scope[data-ct="5"] .es-khp-about__media { padding-block: 16px; } .sf-scope[data-ct="5"] .es-khp-about__blob { inset: 16px 8px; } .sf-scope[data-ct="5"] .es-khp-about__img { width: 88%; border-radius: 22px; } } @media (max-width: 640px) { .sf-scope[data-ct="5"] .es-khp-about__cards { gap: 8px; } .sf-scope[data-ct="5"] .es-khp-about__card { padding: 12px; border-radius: 16px; } .sf-scope[data-ct="5"] .es-khp-about__cardlabel { font-size: 14px; } } /* ---------- facts strip --------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--es-border); border-radius: 24px; background: var(--es-border); } .sf-scope[data-ct="5"] .es-khp-facts--n1 .es-khp-facts__list { grid-template-columns: minmax(0, 1fr); } .sf-scope[data-ct="5"] .es-khp-facts--n2 .es-khp-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-scope[data-ct="5"] .es-khp-facts--n3 .es-khp-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-scope[data-ct="5"] .es-khp-facts__item { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 28px 16px; background: var(--es-surface); text-align: center; } .sf-scope[data-ct="5"] .es-khp-facts__value { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; font-weight: 700; color: var(--es-blue); overflow-wrap: anywhere; } .sf-scope[data-ct="5"] .es-khp-facts__label { margin: 0; font-size: 15px; color: var(--es-muted); } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-facts--n3 .es-khp-facts__list, .sf-scope[data-ct="5"] .es-khp-facts--n4 .es-khp-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-scope[data-ct="5"] .es-khp-facts--n3 .es-khp-facts__item:last-child { grid-column: 1 / -1; } .sf-scope[data-ct="5"] .es-khp-facts__list { border-radius: 20px; } .sf-scope[data-ct="5"] .es-khp-facts__item { padding: 20px 12px; } .sf-scope[data-ct="5"] .es-khp-facts__label { font-size: 14px; } } /* ---------- quick pay band ------------------------------------------------ */ .sf-scope[data-ct="5"] .es-khp-qp { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; padding: 44px 48px; border-radius: 28px; background: var(--es-blue); color: #FFFFFF; isolation: isolate; } .sf-scope[data-ct="5"] .es-khp-qp__ring { position: absolute; z-index: -1; inset-inline-end: -80px; top: -80px; width: 280px; height: 280px; border-radius: 999px; background: rgba(255, 255, 255, .06); } .sf-scope[data-ct="5"] .es-khp-qp__lead { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-qp__eye { margin: 0; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--es-blue) 25%, #FFFFFF); } .sf-scope[data-ct="5"] .es-khp-qp__title { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; font-weight: 700; color: #FFFFFF; text-wrap: balance; } .sf-scope[data-ct="5"] .es-khp-qp__text { margin: 0; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .86); } .sf-scope[data-ct="5"] .es-khp-qp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .sf-scope[data-ct="5"] .es-khp-qp__chip { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-qp__card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border-radius: 20px; background: var(--es-surface); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-qp__field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .sf-scope[data-ct="5"] .es-khp-qp__lbl { font-size: 14px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-qp__single { font-size: 17px; } .sf-scope[data-ct="5"] .es-khp-qp__select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--es-blue) 22%, var(--es-border)); border-radius: 12px; background: var(--es-surface); color: var(--es-navy); font: inherit; font-weight: 500; cursor: pointer; } .sf-scope[data-ct="5"] .es-khp-qp__select:hover { border-color: var(--es-blue); } .sf-scope[data-ct="5"] .es-khp-qp__desc { margin: 0; font-size: 14px; line-height: 1.7; color: var(--es-muted); } .sf-scope[data-ct="5"] .es-khp-qp__amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--es-bg); font-weight: 700; } .sf-scope[data-ct="5"] .es-khp-qp__price { font-family: var(--es-font-head, var(--es-font)); font-size: 18px; text-align: end; } .sf-scope[data-ct="5"] .es-khp-qp__go { width: 100%; white-space: normal; text-align: center; } .sf-scope[data-ct="5"] .es-khp-qp__safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; color: var(--es-muted); text-align: center; } .sf-scope[data-ct="5"] .es-khp-qp__safe .es-khp-ic { color: var(--es-blue); } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-qp { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px; border-radius: 22px; } .sf-scope[data-ct="5"] .es-khp-qp__text { font-size: 14px; line-height: 1.7; } .sf-scope[data-ct="5"] .es-khp-qp__card { padding: 18px; border-radius: 16px; } } /* ---------- Instagram ----------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-ig__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .sf-scope[data-ct="5"] .es-khp-ig__tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-ig__tile img { transition: transform .3s; } .sf-scope[data-ct="5"] .es-khp-ig__tile:hover img { transform: scale(1.04); } .sf-scope[data-ct="5"] .es-khp-ig__badge { position: absolute; z-index: 1; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #FFFFFF; display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-ig__veil { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--es-navy) 55%, transparent); color: #FFFFFF; opacity: 0; transition: opacity .2s; } .sf-scope[data-ct="5"] .es-khp-ig__tile:hover .es-khp-ig__veil, .sf-scope[data-ct="5"] .es-khp-ig__tile:focus-visible .es-khp-ig__veil { opacity: 1; } .sf-scope[data-ct="5"] .es-khp-ig--grid { display: flex; flex-direction: column; gap: 22px; } .sf-scope[data-ct="5"] .es-khp-ig__title { margin: 0; font-size: clamp(24px, 2.6vw, 30px); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-ig__profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid var(--es-border); border-radius: 20px; background: var(--es-surface); } .sf-scope[data-ct="5"] .es-khp-ig__who { display: flex; align-items: center; gap: 14px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-ig__avatar { width: 56px; height: 56px; flex: none; overflow: hidden; border: 2px solid var(--es-blue); border-radius: 999px; background: #FFFFFF; color: var(--es-blue); display: grid; place-items: center; } .sf-scope[data-ct="5"] .es-khp-ig__avatar img { width: 40px; height: 40px; object-fit: contain; } .sf-scope[data-ct="5"] .es-khp-ig__whotxt { display: flex; flex-direction: column; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-ig__user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-ig__hint { font-size: 14px; color: var(--es-muted); } .sf-scope[data-ct="5"] .es-khp-ig__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .sf-scope[data-ct="5"] .es-khp-ig__card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); color: var(--es-text); transition: border-color .15s; } .sf-scope[data-ct="5"] .es-khp-ig__card:hover { border-color: var(--es-blue); color: var(--es-text); } .sf-scope[data-ct="5"] .es-khp-ig__ph { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-ig__cap { display: -webkit-box; padding: 12px 14px 4px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } .sf-scope[data-ct="5"] .es-khp-ig__date { padding: 4px 14px 12px; font-size: 12px; color: var(--es-muted); } .sf-scope[data-ct="5"] .es-khp-ig__morewrap { display: flex; justify-content: center; } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-ig__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sf-scope[data-ct="5"] .es-khp-ig__tile { border-radius: 10px; } .sf-scope[data-ct="5"] .es-khp-ig__badge { top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; } .sf-scope[data-ct="5"] .es-khp-ig__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sf-scope[data-ct="5"] .es-khp-ig__profile .es-khp-btn { flex: 1 1 100%; } } @media (max-width: 640px) { .sf-scope[data-ct="5"] .es-khp-ig__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-scope[data-ct="5"] .es-khp-ig__card { border-radius: 14px; } .sf-scope[data-ct="5"] .es-khp-ig__cap { padding: 10px 10px 2px; font-size: 13px; } .sf-scope[data-ct="5"] .es-khp-ig__date { padding: 2px 10px 10px; } } /* ---------- YouTube ------------------------------------------------------- */ .sf-scope[data-ct="5"] .es-khp-yt__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sf-scope[data-ct="5"] .es-khp-yt__card { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-yt__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-yt__thumb img { opacity: .78; transition: opacity .2s, transform .3s; } .sf-scope[data-ct="5"] .es-khp-yt__thumb:hover img { opacity: .9; transform: scale(1.03); } .sf-scope[data-ct="5"] .es-khp-yt__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 999px; background: #FFFFFF; color: var(--es-blue); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); transition: transform .15s; } .sf-scope[data-ct="5"] .es-khp-yt__play svg { margin-inline-start: 3px; } .sf-scope[data-ct="5"] .es-khp-yt__thumb:hover .es-khp-yt__play { transform: scale(1.06); } .sf-scope[data-ct="5"] .es-khp-yt__play--big { width: 84px; height: 84px; } .sf-scope[data-ct="5"] .es-khp-yt__title { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--es-navy); overflow-wrap: anywhere; } .sf-scope[data-ct="5"] .es-khp-yt__date { font-size: 13px; color: var(--es-muted); } .sf-scope[data-ct="5"] .es-khp-yt__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000000; } .sf-scope[data-ct="5"] .es-khp-yt__player--big { border-radius: 22px; } .sf-scope[data-ct="5"] .es-khp-yt__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sf-scope[data-ct="5"] .es-khp-yt__close { position: absolute; z-index: 1; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--es-navy); cursor: pointer; } .sf-scope[data-ct="5"] .es-khp-yt__stage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; } .sf-scope[data-ct="5"] .es-khp-yt__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sf-scope[data-ct="5"] .es-khp-yt__thumb--big { border-radius: 22px; } .sf-scope[data-ct="5"] .es-khp-yt__maintitle { margin: 4px 0 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-yt__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .sf-scope[data-ct="5"] .es-khp-yt__item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-yt__item:hover { background: var(--es-bg); color: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-yt__item.is-on { background: var(--es-blue-soft); } .sf-scope[data-ct="5"] .es-khp-yt__mini { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--es-navy); } .sf-scope[data-ct="5"] .es-khp-yt__now { position: absolute; bottom: 6px; inset-inline-end: 6px; display: none; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .72); color: #FFFFFF; font-size: 11px; font-weight: 600; } .sf-scope[data-ct="5"] .es-khp-yt__item.is-on .es-khp-yt__now { display: block; } .sf-scope[data-ct="5"] .es-khp-yt__itemtitle { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } @media (max-width: 999px) { .sf-scope[data-ct="5"] .es-khp-yt__cards { grid-template-columns: minmax(0, 1fr); gap: 22px; } .sf-scope[data-ct="5"] .es-khp-yt__stage { grid-template-columns: minmax(0, 1fr); } .sf-scope[data-ct="5"] .es-khp-yt__thumb, .sf-scope[data-ct="5"] .es-khp-yt__player { border-radius: 16px; } .sf-scope[data-ct="5"] .es-khp-yt__play--big { width: 68px; height: 68px; } .sf-scope[data-ct="5"] .es-khp-yt__item { grid-template-columns: 120px minmax(0, 1fr); } } /* ---------- motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sf-scope[data-ct="5"] .es-khp *, .sf-scope[data-ct="5"] .es-khp-hdr *, .sf-scope[data-ct="5"] .es-khp-btn { transition: none !important; animation: none !important; } .sf-scope[data-ct="5"] .es-khp-ig__tile:hover img, .sf-scope[data-ct="5"] .es-khp-yt__thumb:hover img, .sf-scope[data-ct="5"] a.es-khp-ql__card:hover { transform: none; } }