@gemboss/gem-framework 0.5.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -1
- package/dist/SOURCE.json +2 -2
- package/dist/gem-framework.css +206 -64
- package/dist/gem-runtime.js +158 -12
- package/dist/index.js +747 -112
- package/dist/plugins/before_after.d.ts +9 -0
- package/dist/plugins/before_after.js +37 -0
- package/dist/plugins/carousel.d.ts +9 -0
- package/dist/plugins/carousel.js +49 -0
- package/dist/plugins/cart-drawer.d.ts +9 -0
- package/dist/plugins/cart-drawer.js +69 -0
- package/dist/plugins/context-adapter.d.ts +9 -0
- package/dist/plugins/context-adapter.js +17 -0
- package/dist/plugins/countdown.d.ts +9 -0
- package/dist/plugins/countdown.js +164 -0
- package/dist/plugins/disclosure.d.ts +9 -0
- package/dist/plugins/disclosure.js +40 -0
- package/dist/plugins/hero-slideshow.d.ts +9 -0
- package/dist/plugins/hero-slideshow.js +57 -0
- package/dist/plugins/localization.d.ts +9 -0
- package/dist/plugins/localization.js +37 -0
- package/dist/plugins/media-gallery.d.ts +9 -0
- package/dist/plugins/media-gallery.js +57 -0
- package/dist/plugins/mobile-menu.d.ts +9 -0
- package/dist/plugins/mobile-menu.js +51 -0
- package/dist/plugins/offer-engine.d.ts +9 -0
- package/dist/plugins/offer-engine.js +57 -0
- package/dist/plugins/predictive-search.d.ts +9 -0
- package/dist/plugins/predictive-search.js +77 -0
- package/dist/plugins/promo-popup.d.ts +9 -0
- package/dist/plugins/promo-popup.js +117 -0
- package/dist/plugins/quantity-input.d.ts +9 -0
- package/dist/plugins/quantity-input.js +44 -0
- package/dist/plugins/quick-view.d.ts +9 -0
- package/dist/plugins/quick-view.js +69 -0
- package/dist/plugins/recently-viewed.d.ts +9 -0
- package/dist/plugins/recently-viewed.js +71 -0
- package/dist/plugins/reveal-on-scroll.d.ts +9 -0
- package/dist/plugins/reveal-on-scroll.js +37 -0
- package/dist/plugins/runtime-slot-loader.d.ts +9 -0
- package/dist/plugins/runtime-slot-loader.js +29 -0
- package/dist/plugins/seasonal-effects.d.ts +9 -0
- package/dist/plugins/seasonal-effects.js +17 -0
- package/dist/plugins/sticky-atc.d.ts +9 -0
- package/dist/plugins/sticky-atc.js +43 -0
- package/dist/plugins/tabs.d.ts +9 -0
- package/dist/plugins/tabs.js +50 -0
- package/dist/plugins/variant-selects.d.ts +9 -0
- package/dist/plugins/variant-selects.js +70 -0
- package/dist/popup-shell.css +91 -0
- package/dist/primitives.css +1430 -0
- package/dist/runtime-core.d.ts +51 -0
- package/dist/runtime-core.js +176 -0
- package/dist/section-gate.js +432 -21
- package/dist/sections.css +1116 -0
- package/dist/tokens.css +67 -0
- package/package.json +21 -1
package/README.md
CHANGED
|
@@ -9,7 +9,9 @@ gem-framework của GemTheme đóng thành package, cho các repo **ngoài** mon
|
|
|
9
9
|
| `…/sections` | 4 hàm `headless.tsx` được import (`elementOverrides`, `imageSrcSet`, `subscriptionPlans`, `defaultPlan`) | `packages/gem-sections/src` |
|
|
10
10
|
| `…/section-gate` | `validateSectionArtifacts`: ĐÚNG bộ kiểm section gemtheme dùng khi duyệt. Từ 0.3.0 thêm ba cổng của thư viện cho MỘT section: `layoutKnobCheck` (+ `LAYOUT_ATTRS`), `slotContractDrift` (+ `slotsReadBy`, `slotSourceFromElementTree`), `cssPairingOrphans` (+ `classesStyledBy`, truyền CSS từ `createGemThemeCss`). Từ 0.3.2 thêm hai cổng pháp lý: `fabricatedProofInSource` / `fabricatedProofInSchema` (điểm, số lượt, người, lời hứa bịa) và `inventedTestimonyIn` (hằng DEMO_*_QUOTE/REVIEW… làm giá trị khi thiếu dữ liệu). Từ 0.3.3 hai cổng này đọc được tiếng Việt ("4,8/5", "đã bán", "miễn phí vận chuyển", "199k", cả chữ NFD), tra giá trị của `DEMO.<key>` ở mọi chỗ đọc nó (`??`, `\|\|`, toán tử ba ngôi, dòng bị Prettier ngắt), và bỏ qua số lượng hiển thị (`reviews_to_show`…). Nâng từ 0.3.2 lên có thể làm đỏ section trước đó xanh: đó là lời khẳng định nằm trong DEMO. Từ 0.3.5 bắt thêm chữ ký người Việt (tên kèm nơi chốn như "Chị Lan, Hà Nội", hoặc họ + Thị/Văn như "Nguyễn Thị Hoa"; tiêu đề viết hoa từng chữ thì không), điểm sao ("4,9 ★"), `rating: 4.9` / `reviewCount: "1.284"` trong mảng sản phẩm mẫu, và hằng demo ở nhánh else của toán tử ba ngôi (`bound ? [] : DEMO_REVIEWS`). Mỗi thứ bịa chỉ báo MỘT lần: tại dòng DEMO nếu dòng đó tự lộ, không thì tại chỗ đọc. "đồng hồ" không còn bị đọc là giá. Từ 0.3.6 bắt lời hứa có thời hạn đứng sau từ khoá ("Dùng thử 30 ngày", "Bảo hành 12 tháng", "Nhận trong 2–4 ngày", "Giao 2 giờ") và "hoàn tiền" không kèm số; "Chính sách hoàn tiền" vẫn là nhãn. Từ 0.3.7 câu hỏi (kết thúc bằng "?") không bao giờ là lời hứa, "không hợp lệ"/số bước/nhịp giao không bị báo, và bắt thêm "trong vòng N ngày", "Giao hàng 2–4 ngày", "Bảo hành 1 đổi 1…", "Try it free for 30 days", "Ships in 24h". Từ 0.3.8 xuất thêm `claimIn` (câu hỏi "một chuỗi này có phải lời khẳng định, người bịa, hay lời hứa?"). Từ 0.3.9 bắt "cancel anytime", "guaranteed delivery", "huỷ bất cứ lúc nào" (chính sách huỷ gói và giao hàng). Từ 0.3.10 lời từ chối ("cannot be canceled", "Không thể hủy") không bị báo, "giao dịch/giao diện" không phải giao hàng, "Delivery not guaranteed" là lời miễn trừ, một chuỗi chỉ gồm con số viết tắt ("199k", "12k+") mang nhãn trung tính "hardcoded figure" (không phân biệt được giá với số đếm), và `stringLiteralsIn(line)` thay cho hằng `STRING_LITERAL` (đã gỡ: một regex `/g` dùng chung rò `lastIndex`; 0 chỗ dùng ở gemboss/gemfactory/gemsite). Từ 0.3.11 "Huỷ bỏ lọc…" và "Hủy đơn, gọi chúng tôi bất cứ lúc nào" không bị đọc là chính sách huỷ; "huỷ đăng ký" là bỏ nhận tin (như "Unsubscribe anytime"); `SOURCE.json` ghi `gemtheme_dirty`, và `npm pack` từ chối khi ĐẦU VÀO của gói (`packages/`, gói này trừ `package.json`, `scripts/lib/`) có thay đổi chưa commit hoặc git không trả lời được. Từ 0.3.12 bắt lời hứa hoàn tiền không có chữ "hoàn tiền" liền nhau ("nhận lại toàn bộ tiền", "Hoàn lại 100% tiền", "Trả lại tiền nếu không hài lòng"); lời từ chối ("Không được hoàn lại tiền") và tiền thừa/thối khi thanh toán không bị bắt Từ 0.4.0: `demoOutsidePreview(tsx)` (chữ mẫu DEMO chỉ hiện trong bản xem trước, tức khi `section.demo === true`; plan xuất bản không bao giờ mang cờ đó) và schema `SectionSpec` khai trường `demo` | `packages/gem-sections/src/section-artifacts.ts`, `section-contract.ts` |
|
|
11
11
|
| `…/settings-schema` | `validateSettingsSchema` | `scripts/lib/settings-schema-contract.mjs` |
|
|
12
|
-
| `…/gem-framework.css`, `…/gem-runtime.js` | CSS token mặc định + runtime mọi plugin, dựng sẵn | build |
|
|
12
|
+
| `…/gem-framework.css`, `…/gem-runtime.js` | CSS token mặc định + runtime mọi plugin, dựng sẵn. `gem-runtime.js` tự chạy khi tải: đăng ký và lên lịch đủ 22 plugin | build |
|
|
13
|
+
| `…/tokens.css`, `…/primitives.css`, `…/sections.css`, `…/popup-shell.css` | Từ 0.8.0: `gem-framework.css` cắt ba (từ 0.8.3 cắt bốn), nối lại theo đúng thứ tự đó thì bằng `gem-framework.css` từng byte (build dừng nếu không bằng). `tokens.css`: biến `:root` + núm style. `primitives.css`: reset, phần tử nền, tiện ích, mọi primitive `.gem-*`. `sections.css`: khung header/footer, lớp section chung, profile theme. `popup-shell.css` (0.8.3): khung popup `.gem-popup-shell`, chỉ trang có popup mới cần tải, đặt sau `primitives.css` và trước `sections.css` (thứ tự nối: tokens, primitives, popup-shell, sections). CSS riêng của từng section (`section-library/**/gem.css`) KHÔNG nằm trong gói | `createGemThemeCssParts` |
|
|
14
|
+
| `…/plugins/<key>` (`…/plugins/<key>.js`), `…/runtime-core` | Từ 0.8.0: mỗi plugin của runtime là một ES module, `export function mount(root = document, options?)` trả về `unmount()`, import không làm gì. Cùng dòng mã với `gem-runtime.js` (một bảng trong `runtime.ts`), chỉ khác: mọi `x.addEventListener(` thành `__gemListen(x, ` để unmount gỡ được. `runtime-core.js` là phần dùng chung: `mountPlugin`, `createGemApi`, `gemApi` | `runtime.ts`, `runtime-modules.ts`, `runtime-core.js` |
|
|
13
15
|
|
|
14
16
|
## Cài
|
|
15
17
|
|
|
@@ -40,3 +42,63 @@ phiên hết hạn, rồi `npm publish`. npm hỏi mã từ app xác thực củ
|
|
|
40
42
|
người. Đổi luật kiểm (manifest, validation,
|
|
41
43
|
section-artifacts) là đổi **minor**: repo dùng package sẽ thấy cảnh báo mới sau khi lên version. Trước khi đổi
|
|
42
44
|
version, xem `npm view @gemboss/gem-framework versions`: phiên khác có thể đã lấy số đó.
|
|
45
|
+
|
|
46
|
+
## Plugin module (0.8.0)
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
import { mount } from "@gemboss/gem-framework/plugins/countdown";
|
|
50
|
+
const unmount = mount(sectionEl); // chỉ gắn trong sectionEl, kể cả chính nó; mặc định cả document
|
|
51
|
+
unmount(); // gỡ listener, timer, IntersectionObserver và dấu data-gem-bound-* nó đặt
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null, options?: MountOptions): Unmount`, `key`,
|
|
55
|
+
`readyEvent`); `MountOptions`, `Unmount`, `GemApi` nằm ở `@gemboss/gem-framework/runtime-core`.
|
|
56
|
+
|
|
57
|
+
- Gắn hai lần lên cùng một root thì chỉ gắn một lần; mỗi lần gọi trả một tay cầm, gỡ hết tay cầm thì plugin mới gỡ.
|
|
58
|
+
- `options.api`: hub sự kiện (truyền `window.GemTheme` để dùng chung với `gem-runtime.js`); mặc định một hub chung của
|
|
59
|
+
các module. Sự kiện `gem:*` vẫn bắn trên `document` như runtime.
|
|
60
|
+
- `options.window`: cửa sổ dùng cho timer/storage/scroll (mặc định `root.ownerDocument.defaultView`).
|
|
61
|
+
- Trang đã chạy `gem-runtime.js` rồi mount module lên cùng phần tử thì không gắn đôi: cả hai cùng dùng dấu
|
|
62
|
+
`data-gem-bound-<key>`.
|
|
63
|
+
|
|
64
|
+
## Hợp đồng chung với gemsite (0.8.0)
|
|
65
|
+
|
|
66
|
+
| Plugin | Quyết định |
|
|
67
|
+
|---|---|
|
|
68
|
+
| countdown | Ghi cả hai bộ ô: `data-gem-countdown-days\|hours\|minutes\|seconds` (runtime) và `data-gem-cd-days\|hours\|mins\|secs` (gemsite, Liquid cũ). Có ô giây thì nhảy mỗi giây, không thì mỗi phút, đúng lúc chữ số phút của thời gian còn lại đổi (từ 0.8.2; trước đó tính từ lúc mount nên chậm tới 59 giây). Lúc hết giờ vẫn đúng tới mili giây. Kết thúc: `data-gem-countdown-state="complete"` là giá trị chuẩn; nghĩa "ended" của gemsite đi bằng `data-gem-countdown-ended="true"` trên chính timer (như timer theo thời lượng), trừ khi timer là gốc section (để luật band quyết định). `gem:countdown:start` báo mỗi phút như cũ với bộ đếm phút, một lần với bộ đếm giây; `complete` một lần. KHÔNG có mốc giả 3 ngày khi thiếu hạn: gemsite chỉ vẽ timer không hạn trong bản xem trước (CountdownBannerOfferBar.tsx), trên store thật không bao giờ; runtime ghi `invalid` |
|
|
69
|
+
| promo-popup | Cùng khoá `gem:promo-popup-dismissed:<id>`. Đọc cả hai nghĩa: giá trị ở tương lai là "ẩn tới lúc" (runtime ≤ 0.7), giữ ẩn tới lúc đó, và ghi lại MỘT lần thành thời điểm bấm đóng khi trừ đi cửa sổ hiện tại ra một thời điểm đã qua (cửa sổ cũ dài hơn thì giữ nguyên tới khi hết); giá trị ở quá khứ là thời điểm bấm đóng (gemsite), áp cửa sổ `data-gem-promo-frequency-days`. Ghi từ nay: thời điểm bấm đóng. Hạn "tới lúc" của 0.7 đã qua thì đọc thành thời điểm bấm đóng: popup vắng thêm tối đa một cửa sổ, không bao giờ hiện sớm hơn. Thêm `data-gem-promo-trigger` = `delay` (mặc định) \| `exit_intent` (màn cảm ứng rơi về delay) \| `scroll` (`data-gem-promo-scroll-percent`, 10 tới 90, mặc định 50), mở một lần, ghi `data-gem-promo-armed`. Trễ mặc định giữ 0 giây của runtime (gemsite: 6) |
|
|
70
|
+
| sticky-atc | Bar có `data-gem-sticky-atc-threshold` (gemsite) thì theo luật gemsite: số đó, không thì biến CSS `--gem-sticky-atc-threshold`, không thì 360. Không có thì `data-gem-sticky-threshold` như cũ, mặc định 240. Có cả hai: theo của gemsite |
|
|
71
|
+
| `:root` muted | `#656c79` thay `#6b7280` (4,88:1 trên nền `#f6f6f3`, cũ 4,47:1 dưới ngưỡng AA). Đem từ gemsite |
|
|
72
|
+
| thanh lọc collection | Không đổi. Bản flex/grid hai khổ của gemsite là `gem.css` của section `collection-filter-toolbar/filter-sort-bar`, đã nằm trong `section-library` của gemtheme, giống từng byte. Gói chỉ mang CSS framework, không mang CSS riêng của section |
|
|
73
|
+
|
|
74
|
+
## Nhật ký thay đổi
|
|
75
|
+
|
|
76
|
+
- **0.9.0** (05/10/2026): `claimIn` (và mọi cổng dùng nó: `fabricatedProofInSource`, làn mã sinh theme của
|
|
77
|
+
`check-fabricated-proof`) bắt lời hứa phí ship bằng 0 không có chữ "free" (`shippingZeroPromiseIn`: tách câu, bỏ ký hiệu đầu dòng, đòi CẢ câu khớp
|
|
78
|
+
một dạng có tên):
|
|
79
|
+
"No extra shipping.", "No additional shipping costs", "No shipping fees on this order", "Shipping (costs) included" đứng
|
|
80
|
+
riêng, "Includes shipping", "Zero shipping fees", "Không mất/thu phí ship", "Không phí vận chuyển", "Đã (bao) gồm phí ship".
|
|
81
|
+
Chỉ dạng lời hứa không mơ hồ: lời từ chối, câu hỏi, nhãn giỏ ("Total (shipping included)", "Tổng (không tính phí vận
|
|
82
|
+
chuyển)"), nhãn tuỳ chọn ("Include shipping protection") và trạng thái ("No shipping fees have been configured") vẫn
|
|
83
|
+
sạch; bộ 130 ca trong `section-contract.test.ts`.
|
|
84
|
+
Nguồn: mẫu post-purchase bonus-steps của gemboss in "No extra shipping." cho mọi store (GemFactory gap #21). Minor vì là
|
|
85
|
+
luật kiểm mới: chữ trước đó xanh có thể đỏ. GemFactory ghim `^0.6.0` nên chỉ có luật này khi nâng phiên bản ở PR riêng.
|
|
86
|
+
- **0.8.3** (05/10/2026): sửa các lỗi popup ghi trong review gemboss PR #3758. Khung popup `.gem-popup-shell` ra khỏi
|
|
87
|
+
`primitives.css` thành `popup-shell.css` riêng (export `./popup-shell.css`): `primitives.css` nhẹ đi 9.058 byte thô,
|
|
88
|
+
1.194 byte gzip; `gem-framework.css` vẫn đủ luật, khung nằm giữa primitives và sections (đo Chromium 390 và 1280,
|
|
89
|
+
15 ca: giống hệt từng điểm ảnh). `createPrimitiveCss()` không còn khung: ai dựng CSS từ hàm đó mà vẽ popup thì
|
|
90
|
+
thêm `GEM_POPUP_SHELL_CSS`. Plugin `promo-popup` bỏ qua popup đã mang `data-gem-bound-promo-popup` (popup
|
|
91
|
+
email-capture tự chạy `behavior.js`), và `api.promoPopup.open` chỉ mở popup nó đã gắn, mở cả dialog, tính là lần
|
|
92
|
+
mở của lượt xem trang (gỡ trigger đang chờ). Countdown chế độ `visible` bắn
|
|
93
|
+
`gem:countdown:start` một lần (trước đây mỗi lần chạy tiếp) và gỡ IntersectionObserver ngay khi hết giờ hoặc dừng.
|
|
94
|
+
- **0.8.2** (05/10/2026): countdown không có ô giây (trang nội dung gemboss chỉ ghi ngày/giờ/phút) đổi chữ số phút
|
|
95
|
+
đúng lúc thời gian còn lại qua mốc phút, không còn chậm tới 59 giây vì nhịp 60 giây tính từ lúc mount (gemsite #780
|
|
96
|
+
tìm ra). Có ô giây thì vẫn mỗi giây; lúc hết giờ vẫn đúng; `gem-runtime.js` đổi theo vì cùng một bảng. Gói kèm khai
|
|
97
|
+
báo kiểu: `dist/plugins/<key>.d.ts` và `dist/runtime-core.d.ts`, `types` trong `exports` của `./plugins/*` và
|
|
98
|
+
`./runtime-core`, nên repo TypeScript import `@gemboss/gem-framework/plugins/<key>` không cần `declare module`.
|
|
99
|
+
- **0.8.1** (05/10/2026): bỏ `.gem-footer` khỏi danh sách root của các núm layout (`:is(.gem-section, …, .gem-slideshow)`,
|
|
100
|
+
68 chỗ). Không còn gì phát ra class đó từ khi hai footer cũ bị xoá (gemtheme #660, library 1.38.0); hai section đó
|
|
101
|
+
cũng mang `.gem-section` nên luật vẫn với tới chúng qua root kia. Không đổi hành vi.
|
|
102
|
+
- **0.8.0** (05/10/2026): plugin module (`plugins/*`, `runtime-core`), CSS cắt ba (`tokens.css`, `primitives.css`,
|
|
103
|
+
`sections.css`), hợp đồng chung countdown / promo-popup / sticky-atc với gemsite, muted `#656c79`.
|
|
104
|
+
`gem-runtime.js` vẫn tự chạy, vẫn đủ 22 plugin; hành vi chỉ đổi ở ba plugin trên, theo bảng trên.
|
package/dist/SOURCE.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@gemboss/gem-framework",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"gemtheme_sha": "
|
|
3
|
+
"version": "0.9.0",
|
|
4
|
+
"gemtheme_sha": "a60504b03d89dabdda00812f0b026b5cc68fddfb",
|
|
5
5
|
"gemtheme_dirty": false,
|
|
6
6
|
"framework_version": "0.1.0"
|
|
7
7
|
}
|
package/dist/gem-framework.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--gem-color-background: #f6f6f3;
|
|
3
3
|
--gem-color-surface: #ffffff;
|
|
4
4
|
--gem-color-text: #202223;
|
|
5
|
-
--gem-color-muted: #
|
|
5
|
+
--gem-color-muted: #656c79;
|
|
6
6
|
--gem-color-accent: #008060;
|
|
7
7
|
--gem-color-accent-text: #ffffff;
|
|
8
8
|
--gem-color-border: #d2d5d8;
|
|
@@ -327,6 +327,57 @@ a {
|
|
|
327
327
|
block-size: var(--gem-space-lg);
|
|
328
328
|
accent-color: var(--gem-color-accent);
|
|
329
329
|
}
|
|
330
|
+
[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {
|
|
331
|
+
min-height: var(--gem-input-height);
|
|
332
|
+
height: auto;
|
|
333
|
+
border: var(--gem-input-border-width) solid var(--gem-input-border-color);
|
|
334
|
+
border-radius: var(--gem-input-radius);
|
|
335
|
+
background: var(--gem-input-bg);
|
|
336
|
+
padding-inline: var(--gem-input-padding-inline);
|
|
337
|
+
font-size: var(--gem-input-font-size);
|
|
338
|
+
}
|
|
339
|
+
[data-gem-form-set] textarea:is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {
|
|
340
|
+
min-height: calc(var(--gem-input-height) * 2);
|
|
341
|
+
border-radius: min(var(--gem-input-radius), 12px);
|
|
342
|
+
padding-block: var(--gem-space-sm);
|
|
343
|
+
}
|
|
344
|
+
[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):focus-visible {
|
|
345
|
+
outline: var(--gem-input-focus-ring, var(--gem-focus-ring, 2px solid var(--gem-color-accent)));
|
|
346
|
+
outline-offset: var(--gem-focus-offset, 2px);
|
|
347
|
+
}
|
|
348
|
+
[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {
|
|
349
|
+
border-width: 0 0 var(--gem-input-border-width);
|
|
350
|
+
border-radius: 0;
|
|
351
|
+
background: transparent;
|
|
352
|
+
color: inherit;
|
|
353
|
+
}
|
|
354
|
+
[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))::placeholder {
|
|
355
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
356
|
+
}
|
|
357
|
+
[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) option {
|
|
358
|
+
color: CanvasText;
|
|
359
|
+
background: Canvas;
|
|
360
|
+
}
|
|
361
|
+
[data-gem-form-set][data-gem-field-shape="filled"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {
|
|
362
|
+
border-width: 0 0 var(--gem-input-border-width);
|
|
363
|
+
border-end-start-radius: 0;
|
|
364
|
+
border-end-end-radius: 0;
|
|
365
|
+
}
|
|
366
|
+
[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {
|
|
367
|
+
background: color-mix(in srgb, currentColor 6%, var(--gem-input-bg));
|
|
368
|
+
}
|
|
369
|
+
[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {
|
|
370
|
+
background: color-mix(in srgb, currentColor 6%, transparent);
|
|
371
|
+
}
|
|
372
|
+
[data-gem-form-set] .gem-search-form .gem-input {
|
|
373
|
+
--gem-input-border-width: initial;
|
|
374
|
+
--gem-input-radius: initial;
|
|
375
|
+
}
|
|
376
|
+
[data-gem-form-set] .gem-checkbox {
|
|
377
|
+
inline-size: var(--gem-checkbox-size);
|
|
378
|
+
block-size: var(--gem-checkbox-size);
|
|
379
|
+
accent-color: var(--gem-checkbox-accent);
|
|
380
|
+
}
|
|
330
381
|
.gem-submit {
|
|
331
382
|
cursor: pointer;
|
|
332
383
|
}
|
|
@@ -1060,24 +1111,24 @@ a {
|
|
|
1060
1111
|
[data-gem-reveal] { transition: none; opacity: 1; transform: none; }
|
|
1061
1112
|
.gem-marquee__track { animation-duration: calc(var(--gem-marquee-duration, 40s) * 2.5); }
|
|
1062
1113
|
}
|
|
1063
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1064
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1065
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1066
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1067
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1068
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1069
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1070
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1071
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1072
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1073
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1074
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1075
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1076
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1077
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1078
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1079
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1080
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
1114
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }
|
|
1115
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
|
|
1116
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }
|
|
1117
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }
|
|
1118
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z'/%3E%3C/svg%3E"); }
|
|
1119
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z'/%3E%3C/svg%3E"); }
|
|
1120
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V10 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V10 Z'/%3E%3C/svg%3E"); }
|
|
1121
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V10 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V10 Z'/%3E%3C/svg%3E"); }
|
|
1122
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 L95 10 L90 3 L85 10 L80 3 L75 10 L70 3 L65 10 L60 3 L55 10 L50 3 L45 10 L40 3 L35 10 L30 3 L25 10 L20 3 L15 10 L10 3 L5 10 L0 3 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 L95 10 L90 3 L85 10 L80 3 L75 10 L70 3 L65 10 L60 3 L55 10 L50 3 L45 10 L40 3 L35 10 L30 3 L25 10 L20 3 L15 10 L10 3 L5 10 L0 3 Z'/%3E%3C/svg%3E"); }
|
|
1123
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 L95 10 L90 3 L85 10 L80 3 L75 10 L70 3 L65 10 L60 3 L55 10 L50 3 L45 10 L40 3 L35 10 L30 3 L25 10 L20 3 L15 10 L10 3 L5 10 L0 3 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V3 L95 10 L90 3 L85 10 L80 3 L75 10 L70 3 L65 10 L60 3 L55 10 L50 3 L45 10 L40 3 L35 10 L30 3 L25 10 L20 3 L15 10 L10 3 L5 10 L0 3 Z'/%3E%3C/svg%3E"); }
|
|
1124
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); }
|
|
1125
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); }
|
|
1126
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); }
|
|
1127
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); }
|
|
1128
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }
|
|
1129
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }
|
|
1130
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }
|
|
1131
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }
|
|
1081
1132
|
:root:not(:has([data-gem-canvas])) [data-gem-section-id][data-gem-countdown-ended='true'] { display: none; }
|
|
1082
1133
|
:root:has([data-gem-canvas]) [data-gem-section-id][data-gem-countdown-ended='true'] { opacity: .55; }
|
|
1083
1134
|
.gem-countdown-ended-note { display: none; }
|
|
@@ -1444,6 +1495,97 @@ a {
|
|
|
1444
1495
|
.gem-collection-filter-toolbar__active-filter, .gem-collection-filter-toolbar__clear { min-height: 2.25rem; align-items: center; }
|
|
1445
1496
|
}
|
|
1446
1497
|
|
|
1498
|
+
.gem-popup-shell { padding: 0; }
|
|
1499
|
+
.gem-popup-shell__dialog {
|
|
1500
|
+
padding: 0; border: 0; margin: auto; color: var(--gem-color-text); background: var(--gem-color-background);
|
|
1501
|
+
width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;
|
|
1502
|
+
border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);
|
|
1503
|
+
}
|
|
1504
|
+
.gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }
|
|
1505
|
+
.gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }
|
|
1506
|
+
.gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }
|
|
1507
|
+
.gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
1508
|
+
.gem-popup-shell__panel {
|
|
1509
|
+
position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gem-space-md);
|
|
1510
|
+
padding: var(--gem-space-2xl) var(--gem-space-xl); overflow-y: auto; align-items: center; text-align: center;
|
|
1511
|
+
}
|
|
1512
|
+
.gem-popup-shell[data-gem-popup-align='start'] .gem-popup-shell__panel { align-items: stretch; text-align: start; }
|
|
1513
|
+
.gem-popup-shell[data-gem-popup-desktop='split-right'] .gem-popup-shell__media { order: 2; }
|
|
1514
|
+
.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,
|
|
1515
|
+
.gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__frame { grid-template-columns: 1fr; }
|
|
1516
|
+
@media (min-width: 750px) {
|
|
1517
|
+
.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__dialog,
|
|
1518
|
+
.gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__dialog { width: min(480px, 92vw); }
|
|
1519
|
+
}
|
|
1520
|
+
.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__media { display: none; }
|
|
1521
|
+
.gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__media { max-height: 200px; }
|
|
1522
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__frame { grid-template-columns: 1fr; place-items: center; }
|
|
1523
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: absolute; inset: 0; }
|
|
1524
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {
|
|
1525
|
+
width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);
|
|
1526
|
+
}
|
|
1527
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }
|
|
1528
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,
|
|
1529
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }
|
|
1530
|
+
.gem-popup-shell__close {
|
|
1531
|
+
position: absolute; inset-block-start: var(--gem-space-xs); inset-inline-end: var(--gem-space-xs); z-index: 2;
|
|
1532
|
+
display: inline-grid; place-items: center; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0;
|
|
1533
|
+
border: 0; border-radius: var(--gem-radius-pill); color: inherit; background: transparent; cursor: pointer;
|
|
1534
|
+
}
|
|
1535
|
+
.gem-popup-shell__close:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); }
|
|
1536
|
+
.gem-popup-shell__teaser {
|
|
1537
|
+
position: fixed; inset-block-end: var(--gem-space-md); inset-inline-end: var(--gem-space-md); z-index: 40;
|
|
1538
|
+
min-height: var(--gem-tap-min); padding: 0 var(--gem-space-md); font: inherit; font-weight: 600; cursor: pointer;
|
|
1539
|
+
color: var(--gem-color-accent-text); background: var(--gem-color-accent); border: 0; border-radius: var(--gem-radius-pill); box-shadow: var(--gem-shadow-md);
|
|
1540
|
+
}
|
|
1541
|
+
.gem-popup-shell__teaser[data-position='left'] { inset-inline-end: auto; inset-inline-start: var(--gem-space-md); }
|
|
1542
|
+
.gem-popup-shell__teaser[hidden] { display: none; }
|
|
1543
|
+
@media (min-width: 750px) {
|
|
1544
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
|
|
1545
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__frame { min-height: 100%; }
|
|
1546
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__media { order: 2; }
|
|
1547
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__panel { padding: var(--gem-space-3xl); }
|
|
1548
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-align='start'] .gem-popup-shell__panel { padding-inline-start: max(var(--gem-space-3xl), 8vw); }
|
|
1549
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-columns: 1fr; }
|
|
1550
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'][data-gem-popup-align='start'] .gem-popup-shell__frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
1551
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; }
|
|
1552
|
+
.gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__panel { position: relative; z-index: 1; }
|
|
1553
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'][data-gem-popup-media='background'] .gem-popup-shell__panel { color: var(--gem-color-text); }
|
|
1554
|
+
.gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__panel,
|
|
1555
|
+
.gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__close { color: var(--gem-color-text); }
|
|
1556
|
+
.gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__media::after { content: none; }
|
|
1557
|
+
}
|
|
1558
|
+
@media (max-width: 749px) {
|
|
1559
|
+
.gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
|
|
1560
|
+
.gem-popup-shell[data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { height: auto; max-height: 88dvh; margin: auto 0 0; border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0; }
|
|
1561
|
+
.gem-popup-shell__frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100%; }
|
|
1562
|
+
.gem-popup-shell__panel { justify-content: flex-start; padding: var(--gem-space-3xl) var(--gem-space-lg) var(--gem-space-xl); }
|
|
1563
|
+
.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__panel,
|
|
1564
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel { justify-content: center; }
|
|
1565
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel { width: 100%; margin: 0; border-radius: 0; box-shadow: none; background: transparent; }
|
|
1566
|
+
.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: relative; }
|
|
1567
|
+
.gem-popup-shell__media { order: 2; max-height: 34dvh; }
|
|
1568
|
+
.gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__media { order: 0; }
|
|
1569
|
+
.gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__panel { padding-top: var(--gem-space-lg); }
|
|
1570
|
+
.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,
|
|
1571
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }
|
|
1572
|
+
.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }
|
|
1573
|
+
}
|
|
1574
|
+
:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }
|
|
1575
|
+
:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }
|
|
1576
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }
|
|
1577
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }
|
|
1578
|
+
@media (min-width: 750px) {
|
|
1579
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
|
|
1580
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }
|
|
1581
|
+
}
|
|
1582
|
+
@media (max-width: 749px) {
|
|
1583
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }
|
|
1584
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { height: 844px; max-height: none; width: 100%; max-width: 100%; }
|
|
1585
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] { padding-top: 160px; }
|
|
1586
|
+
:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { min-height: 0; }
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1447
1589
|
.page-width {
|
|
1448
1590
|
max-width: var(--page-width, var(--gem-layout-page, 1200px));
|
|
1449
1591
|
margin: 0 auto;
|
|
@@ -2013,24 +2155,24 @@ sticky-header.header-wrapper {
|
|
|
2013
2155
|
}
|
|
2014
2156
|
.gem-section { font-family: var(--gem-font-body); }
|
|
2015
2157
|
.gem-section [class*="__copy"] ul, .gem-section [class*="__copy"] ol { list-style: none; padding-left: 0; margin: var(--gem-space-sm, 12px) 0 0; }
|
|
2016
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2017
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2018
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2019
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2020
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2021
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2022
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2023
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2024
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2025
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2026
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2027
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2028
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2029
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2030
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2031
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2032
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2033
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2158
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='left'] .gem-section__inner { justify-items: start; }
|
|
2159
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='left'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: left; }
|
|
2160
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='center'] .gem-section__inner { justify-items: center; }
|
|
2161
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='center'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: center; }
|
|
2162
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='right'] .gem-section__inner { justify-items: end; }
|
|
2163
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='right'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: right; }
|
|
2164
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment] .gem-section__inner > :is([class*='__grid'], [class*='__media'], [class*='__mosaic'], [class*='__masonry'], [class*='__frame'], [class*='__collage'], [class*='__row']) { justify-self: stretch; width: 100%; }
|
|
2165
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='top'] .gem-hero-banner__copy { top: 50px; bottom: auto; }
|
|
2166
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='center'] .gem-hero-banner__copy { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
|
|
2167
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='bottom'] .gem-hero-banner__copy { bottom: 50px; top: auto; }
|
|
2168
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='top'] .gem-section__inner { align-content: start; }
|
|
2169
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='center'] .gem-section__inner { align-content: center; }
|
|
2170
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='bottom'] .gem-section__inner { align-content: end; }
|
|
2171
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='left'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='left'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: -1; }
|
|
2172
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='right'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='right'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: 1; }
|
|
2173
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='tight'] .gem-section__inner { gap: var(--gem-space-sm); }
|
|
2174
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='normal'] .gem-section__inner { gap: var(--gem-space-lg); }
|
|
2175
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='roomy'] .gem-section__inner { gap: var(--gem-space-3xl); }
|
|
2034
2176
|
:is(.gem-hero-banner, .gem-hero-video, .gem-hero)[data-gem-content-spacing='tight'] :is(.gem-hero-banner__copy, .gem-hero-banner__content, .gem-hero-slideshow__copy, .gem-hero-video__content, .gem-hero__content) { row-gap: var(--gem-space-xs); }
|
|
2035
2177
|
:is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='tight'] .gem-hero-banner__copy > * + *, .gem-hero-banner[data-gem-content-spacing='tight'] .gem-hero-slideshow__copy > * + * { margin-top: var(--gem-space-xs); }
|
|
2036
2178
|
:is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='tight'] .gem-hero-banner__copy > :not(:last-child), .gem-hero-banner[data-gem-content-spacing='tight'] .gem-hero-slideshow__copy > :not(:last-child) { margin-bottom: 0; }
|
|
@@ -2040,33 +2182,33 @@ sticky-header.header-wrapper {
|
|
|
2040
2182
|
:is(.gem-hero-banner, .gem-hero-video, .gem-hero)[data-gem-content-spacing='roomy'] :is(.gem-hero-banner__copy, .gem-hero-banner__content, .gem-hero-slideshow__copy, .gem-hero-video__content, .gem-hero__content) { row-gap: var(--gem-space-xl); }
|
|
2041
2183
|
:is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='roomy'] .gem-hero-banner__copy > * + *, .gem-hero-banner[data-gem-content-spacing='roomy'] .gem-hero-slideshow__copy > * + * { margin-top: var(--gem-space-xl); }
|
|
2042
2184
|
:is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='roomy'] .gem-hero-banner__copy > :not(:last-child), .gem-hero-banner[data-gem-content-spacing='roomy'] .gem-hero-slideshow__copy > :not(:last-child) { margin-bottom: 0; }
|
|
2043
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2044
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2045
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2046
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2047
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2048
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2049
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2050
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2051
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2052
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2053
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2054
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2055
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2056
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2057
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2058
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2059
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2060
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2061
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2062
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2063
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2064
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2065
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2066
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2067
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2068
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2069
|
-
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow
|
|
2185
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='full'] .gem-section__inner { width: 100%; max-width: none; }
|
|
2186
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='contained'] .gem-section__inner { width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px))); max-width: none; }
|
|
2187
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='narrow'] .gem-section__inner { width: min(56rem, calc(100% - var(--gem-layout-gutter, 32px))); }
|
|
2188
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='short'] { min-height: 420px; }
|
|
2189
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='tall'] { min-height: 760px; }
|
|
2190
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='short'] .gem-section__inner { min-height: 420px; }
|
|
2191
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='normal'] .gem-section__inner { min-height: auto; }
|
|
2192
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='tall'] .gem-section__inner { min-height: 760px; }
|
|
2193
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
2194
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 2; --gem-row-cols-md: 2; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }
|
|
2195
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
2196
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 3; --gem-row-cols-md: 3; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }
|
|
2197
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
2198
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }
|
|
2199
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }
|
|
2200
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }
|
|
2201
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }
|
|
2202
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }
|
|
2203
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }
|
|
2204
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }
|
|
2205
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }
|
|
2206
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='red'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #d61f1f; }
|
|
2207
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='green'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #1a7f37; }
|
|
2208
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='bold'] { --gem-style-weight: 1.25; }
|
|
2209
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='bold'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 800; }
|
|
2210
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='light'] { --gem-style-weight: 0.8; }
|
|
2211
|
+
:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='light'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 350; }
|
|
2070
2212
|
.gem-section[data-gem-heading-color='accent'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: var(--gem-color-accent); }
|
|
2071
2213
|
.gem-section[data-gem-heading-color='red'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: #d61f1f; }
|
|
2072
2214
|
.gem-section[data-gem-heading-color='green'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: #1a7f37; }
|