From 6d76ccf99eee7888148fac2d8a14d9af2b9b19ec Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 20:03:43 +0200 Subject: [PATCH 01/25] Update --- assets/critical.css | 156 ++++++++++++++ config/settings_schema.json | 74 ++++++- docs/ODYSSEY-JEWELS-BUILD-PLAN.md | 329 ++++++++++++++++++++++++++++++ sections/cta-banner.liquid | 153 ++++++++++++++ sections/featured.liquid | 241 ++++++++++++++++++++++ sections/footer.liquid | 282 ++++++++++++++++++++++--- sections/header.liquid | 322 ++++++++++++++++++++++++++--- sections/hero.liquid | 259 +++++++++++++++++++++++ sections/promises.liquid | 112 ++++++++++ sections/regions.liquid | 255 +++++++++++++++++++++++ sections/story.liquid | 156 ++++++++++++++ snippets/css-variables.liquid | 50 ++++- templates/index.json | 176 +++++++++++++++- 13 files changed, 2492 insertions(+), 73 deletions(-) create mode 100644 docs/ODYSSEY-JEWELS-BUILD-PLAN.md create mode 100644 sections/cta-banner.liquid create mode 100644 sections/featured.liquid create mode 100644 sections/hero.liquid create mode 100644 sections/promises.liquid create mode 100644 sections/regions.liquid create mode 100644 sections/story.liquid diff --git a/assets/critical.css b/assets/critical.css index cdb1ae1aa..d80fd1686 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -74,8 +74,164 @@ p:empty { /** Theme styles below */ body { font-family: var(--font-primary--family); + font-weight: var(--font-primary--weight); background-color: var(--color-background); color: var(--color-foreground); + font-size: var(--text-base); + line-height: 1.65; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +/** Typography */ +h1, +h2, +h3, +h4 { + font-family: var(--font-heading--family); + font-weight: var(--font-heading--weight); + font-style: var(--font-heading--style); + line-height: 1.08; + letter-spacing: var(--tracking-heading); + text-wrap: balance; +} + +h1 { + font-size: var(--text-4xl); +} +h2 { + font-size: var(--text-3xl); +} +h3 { + font-size: var(--text-2xl); +} +h4 { + font-size: var(--text-xl); +} + +a { + color: inherit; + text-underline-offset: 0.2em; + text-decoration-thickness: 1px; +} + +/** Eyebrow / overline label */ +.eyebrow { + display: inline-block; + font-family: var(--font-primary--family); + font-size: var(--text-xs); + font-weight: 600; + letter-spacing: var(--tracking-eyebrow); + text-transform: uppercase; + color: var(--color-accent); + margin: 0; +} + +/** Buttons */ +.button, +button.button { + --btn-bg: var(--color-navy); + --btn-fg: var(--color-contrast); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.6em; + padding: 1rem 2.25rem; + min-height: 3rem; + font-family: var(--font-primary--family); + font-size: var(--text-sm); + font-weight: 600; + letter-spacing: 1.5px; + text-transform: uppercase; + text-decoration: none; + color: var(--btn-fg); + background-color: var(--btn-bg); + border: 1px solid var(--btn-bg); + border-radius: var(--style-border-radius-inputs); + cursor: pointer; + transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease); +} + +.button:hover { + --btn-bg: var(--color-accent); + --btn-fg: var(--color-contrast); +} + +.button--ghost { + --btn-bg: transparent; + --btn-fg: currentcolor; + border-color: currentcolor; +} +.button--ghost:hover { + --btn-bg: var(--color-foreground); + --btn-fg: var(--color-background); + border-color: var(--color-foreground); +} + +.button--on-dark { + --btn-bg: var(--color-contrast); + --btn-fg: var(--color-navy); + border-color: var(--color-contrast); +} +.button--on-dark:hover { + --btn-bg: var(--color-accent); + --btn-fg: var(--color-contrast); + border-color: var(--color-accent); +} + +/** Text link with animated underline */ +.link-underline { + position: relative; + display: inline-block; + font-size: var(--text-sm); + font-weight: 600; + letter-spacing: 1.5px; + text-transform: uppercase; + text-decoration: none; + padding-bottom: 0.3rem; +} +.link-underline::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: currentcolor; + transform: scaleX(1); + transform-origin: right; + transition: transform var(--duration) var(--ease); +} +.link-underline:hover::after { + transform: scaleX(0); +} + +/** Utilities */ +.section-spacing { + padding-block: var(--section-spacing); +} + +.measure { + max-width: 46ch; +} + +.text-center { + text-align: center; +} + +.on-dark { + background-color: var(--color-navy); + color: var(--color-contrast); +} +.on-dark .eyebrow { + color: var(--color-accent-soft); +} + +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } } /** Section layout utilities */ diff --git a/config/settings_schema.json b/config/settings_schema.json index 8d3b532d1..c86e3d3e1 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -1,9 +1,9 @@ [ { "name": "theme_info", - "theme_name": "Skeleton", + "theme_name": "Odyssey Jewels", "theme_version": "0.1.0", - "theme_author": "Shopify", + "theme_author": "Odyssey Jewels", "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", "theme_support_url": "https://support.shopify.com/" }, @@ -14,11 +14,37 @@ "type": "header", "content": "t:general.fonts" }, + { + "type": "font_picker", + "id": "type_heading_font", + "default": "playfair_display_n4", + "label": "Heading font" + }, { "type": "font_picker", "id": "type_primary_font", - "default": "work_sans_n4", + "default": "jost_n4", "label": "t:general.primary" + }, + { + "type": "range", + "id": "type_heading_tracking", + "min": -4, + "max": 4, + "step": 1, + "unit": "px", + "label": "Heading letter spacing", + "default": 0 + }, + { + "type": "range", + "id": "type_eyebrow_tracking", + "min": 0, + "max": 8, + "step": 1, + "unit": "px", + "label": "Eyebrow letter spacing", + "default": 3 } ] }, @@ -39,7 +65,7 @@ "label": "t:options.page_width.wide" } ], - "default": "90rem" + "default": "110rem" }, { "type": "range", @@ -49,7 +75,7 @@ "step": 1, "unit": "px", "label": "t:labels.page_margin", - "default": 20 + "default": 32 } ] }, @@ -59,15 +85,47 @@ { "type": "color", "id": "background_color", - "default": "#FFFFFF", + "default": "#FAF7F2", "label": "t:labels.background" }, { "type": "color", "id": "foreground_color", - "default": "#333333", + "default": "#12263F", "label": "t:labels.foreground" }, + { + "type": "header", + "content": "Brand" + }, + { + "type": "color", + "id": "color_navy", + "default": "#0E1E33", + "label": "Navy" + }, + { + "type": "color", + "id": "color_accent", + "default": "#B76E79", + "label": "Rose accent" + }, + { + "type": "color", + "id": "color_accent_soft", + "default": "#E7CFC9", + "label": "Rose soft" + }, + { + "type": "color", + "id": "color_contrast", + "default": "#FAF7F2", + "label": "On-dark text" + }, + { + "type": "header", + "content": "Shape" + }, { "type": "range", "id": "input_corner_radius", @@ -76,7 +134,7 @@ "step": 1, "unit": "px", "label": "t:labels.input_corner_radius", - "default": 4 + "default": 0 } ] } diff --git a/docs/ODYSSEY-JEWELS-BUILD-PLAN.md b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md new file mode 100644 index 000000000..73f9f55e1 --- /dev/null +++ b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md @@ -0,0 +1,329 @@ +# Odyssey Jewels — Theme Build Plan + +> **Tagline:** *Travel the World, Collect the World — Every Jewel Tells a Story.* +> +> This document translates the [OJ – Odyssey Jewels Web Timeline](https://docs.google.com/document/d/14x0lBh_xyqGfYKDEW3zwPg2JthE64zyl5WoszIA3utQ/edit) into a concrete technical build plan for the Shopify theme, grounded in this `skeleton-theme` codebase. +> +> **Status legend:** `[ ]` not started · `[~]` in progress · `[x]` done +> **Owner tags:** `@core` (our team / framework) · `@dev` (Upwork build-out devs) · `@client` (Gian & Angie) · `@app` (3rd-party app config) + +--- + +## 1. Goal & Success Criteria + +Build a **fully working, premium Shopify site live in ~90 days** (hard deadline before Christmas). + +**Definition of done (Day 90):** +- [ ] Site live on production domain, password removed. +- [ ] Full catalog uploaded (~1,000–2,000 products), structured but staged. +- [ ] Only the **first drop** visible: **Oceania Collection** (~200 pieces) + part of **The Founders Collection** (formerly "Private Collection"). +- [ ] Remaining collections staged and ready for region-by-region releases (7 Odyssey regions + 1 Founders). +- [ ] Core mechanics working: interactive world map, OJ Rewards, referral/affiliate, "sold = gone", region exclusivity. +- [ ] Influencer shortlist ready for activation. + +--- + +## 2. Guiding Strategy + +1. **We build the premium framework first.** Ship a custom, well-structured theme on top of this skeleton so the brand feels right. Then hand a documented, componentized theme to lower-cost Upwork devs for build-out, product upload, and technical grunt work. +2. **We project-manage, not hand-code everything.** Our value is architecture, brand, the "hero" custom features (world map, rewards logic), QA, and directing devs. +3. **Native-first, app-second, custom-last.** Prefer Shopify-native features → vetted apps → custom code, in that order, to hit the timeline. Reserve custom builds for the brand-defining pieces. + +--- + +## 3. Current State — Skeleton Audit + +This theme is Shopify's official **Skeleton Theme** (v0.1.0) — an intentionally minimal, best-practice starting point. What exists today: + +``` +assets/ critical.css, icon-account.svg, icon-cart.svg, shoppy-x-ray.svg +blocks/ group.liquid, text.liquid +config/ settings_data.json, settings_schema.json +layout/ theme.liquid, password.liquid +locales/ en.default.json, en.default.schema.json +sections/ header, footer, product, collection, collections, cart, blog, + article, search, page, 404, password, custom-section, hello-world +snippets/ css-variables.liquid, image.liquid, meta-tags.liquid +templates/ index, product, collection, list-collections, blog, article, + cart, page, search, 404, password, gift_card, (all JSON) +``` + +**Reality check:** Every section is currently bare-bones. For example, `sections/product.liquid` renders a raw image loop, title, price, description, and a plain variant ` +
+ + +
+ {% if form.posted_successfully? %} +

Thank you — welcome to the expedition.

+ {% endif %} + {% endform %} + + {% endif %} + + +
+ {% for block in section.blocks %} + {% if block.type == 'menu' %} +
+ {% if block.settings.title != blank %} +

{{ block.settings.title }}

+ {% endif %} +
    + {% for link in block.settings.menu.links %} +
  • {{ link.title }}
    • + {% endfor %} +
+
+ {% endif %} {% endfor %} - {% endif %} +
+ +
+

+ © {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved. +

+ + {% if section.settings.show_payment_icons %} +
+ {% for type in shop.enabled_payment_types %} + {{ type | payment_type_svg_tag }} + {% endfor %} +
+ {% endif %} +
{% stylesheet %} - footer { + .site-footer { + margin-top: 0; + } + .site-footer__inner { + padding: var(--space-2xl) var(--page-margin) var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-xl); + } + .site-footer__top { display: flex; justify-content: space-between; - margin-top: 2rem; + gap: var(--space-xl); + flex-wrap: wrap; + padding-bottom: var(--space-lg); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .site-footer__wordmark { + font-family: var(--font-heading--family); + font-size: var(--text-2xl); + letter-spacing: 2px; + text-transform: uppercase; + margin-top: var(--space-2xs); + } + .site-footer__blurb { + margin-top: var(--space-sm); + color: color-mix(in srgb, var(--color-contrast) 80%, transparent); + } + .site-footer__news-title { + font-size: var(--text-sm); + letter-spacing: 1.5px; + text-transform: uppercase; + margin-bottom: var(--space-sm); + } + .newsletter-field { + display: flex; + align-items: center; + gap: var(--space-2xs); + border-bottom: 1px solid var(--color-contrast); + min-width: min(24rem, 80vw); } - footer a { + .newsletter-field input { + flex: 1; + background: transparent; + border: 0; + color: var(--color-contrast); + padding: 0.75rem 0; + outline: none; + } + .newsletter-field input::placeholder { + color: color-mix(in srgb, var(--color-contrast) 60%, transparent); + } + .newsletter-field__submit { + background: none; + border: 0; + color: var(--color-contrast); + cursor: pointer; + display: inline-flex; + transition: color var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .newsletter-field__submit:hover { + color: var(--color-accent-soft); + transform: translateX(3px); + } + .newsletter-note { + margin-top: var(--space-xs); + font-size: var(--text-sm); + color: var(--color-accent-soft); + } + + .site-footer__columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + gap: var(--space-lg); + } + .footer-col__title { + font-size: var(--text-xs); + letter-spacing: 2px; + text-transform: uppercase; + color: var(--color-accent-soft); + margin-bottom: var(--space-sm); + } + .footer-col__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.7rem; + } + .footer-col__list a { text-decoration: none; - color: var(--color-foreground); + color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + font-size: var(--text-sm); + transition: color var(--duration) var(--ease); + } + .footer-col__list a:hover { + color: var(--color-contrast); + } + + .site-footer__bottom { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + flex-wrap: wrap; + padding-top: var(--space-lg); + border-top: 1px solid color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .site-footer__copyright { + font-size: var(--text-xs); + letter-spacing: 0.5px; + color: color-mix(in srgb, var(--color-contrast) 70%, transparent); } - footer .footer__links, - footer .footer__payment { + .site-footer__payment { display: flex; - gap: 1rem; + gap: 0.5rem; + flex-wrap: wrap; + } + + @media (max-width: 749px) { + .site-footer__top { + flex-direction: column; + gap: var(--space-lg); + } } {% endstylesheet %} @@ -42,9 +210,42 @@ "name": "t:general.footer", "settings": [ { - "type": "link_list", - "id": "menu", - "label": "t:labels.menu" + "type": "text", + "id": "tagline", + "label": "Tagline", + "default": "Travel the world, collect the world" + }, + { + "type": "textarea", + "id": "blurb", + "label": "Brand statement", + "default": "One-of-a-kind treasures gathered from artisans across the globe. Each piece carries the story of where it came from." + }, + { + "type": "header", + "content": "Newsletter" + }, + { + "type": "checkbox", + "id": "show_newsletter", + "label": "Show newsletter signup", + "default": true + }, + { + "type": "text", + "id": "newsletter_title", + "label": "Newsletter title", + "default": "Join the expedition" + }, + { + "type": "text", + "id": "newsletter_placeholder", + "label": "Newsletter placeholder", + "default": "Enter your email" + }, + { + "type": "header", + "content": "Bottom row" }, { "type": "checkbox", @@ -52,6 +253,35 @@ "label": "t:labels.show_payment_icons", "default": true } + ], + "blocks": [ + { + "type": "menu", + "name": "Link column", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Explore" + }, + { + "type": "link_list", + "id": "menu", + "label": "t:labels.menu" + } + ] + } + ], + "max_blocks": 4, + "presets": [ + { + "name": "t:general.footer", + "blocks": [ + { "type": "menu" }, + { "type": "menu" } + ] + } ] } {% endschema %} diff --git a/sections/header.liquid b/sections/header.liquid index d873bdda7..975827346 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,66 +1,308 @@ -
-

- {{ shop.name | link_to: routes.root_url }} -

- -
- {% for link in section.settings.menu.links %} - {{ link.title | link_to: link.url }} - {% endfor %} +{% comment %} + Premium site header: announcement bar, centered brand, region-based nav, + search / account / cart. Optional transparent overlay on the homepage hero. +{% endcomment %} + +{% liquid + assign is_transparent = false + if section.settings.transparent_on_home and template.name == 'index' + assign is_transparent = true + endif +%} + +{% if section.settings.announcement != blank %} +
+

{{ section.settings.announcement }}

+{% endif %} -
- {% if shop.customer_accounts_enabled %} - - {{ 'icon-account.svg' | inline_asset_content }} - - {% endif %} +
+
+ - - {% if cart.item_count > 0 %} - {{ cart.item_count }} + + {% if section.settings.logo != blank %} + {{ + section.settings.logo + | image_url: width: 600 + | image_tag: + class: 'site-header__logo', + alt: shop.name, + loading: 'eager', + widths: '120, 240, 360, 480, 600', + style: 'width: ' | append: section.settings.logo_width | append: 'px' + }} + {% else %} + {{ shop.name }} {% endif %} - - {{ 'icon-cart.svg' | inline_asset_content }} + +
+ + + + + {% if shop.customer_accounts_enabled %} + + {{ 'icon-account.svg' | inline_asset_content }} + + {% endif %} + + + {{ 'icon-cart.svg' | inline_asset_content }} + {% if cart.item_count > 0 %} + {{ cart.item_count }} + {% endif %} + + +
+ + + +
+ {% for link in section.settings.menu.links %} + {{ link.title }} + {% endfor %} +
+
+
{% stylesheet %} - header { - height: 5rem; - display: flex; + .announcement { + background-color: var(--color-navy); + color: var(--color-contrast); + text-align: center; + padding: 0.6rem var(--page-margin); + } + .announcement__text { + font-size: var(--text-xs); + letter-spacing: var(--tracking-eyebrow); + text-transform: uppercase; + font-weight: 600; + } + + .site-header { + position: sticky; + top: 0; + z-index: 20; + background-color: var(--color-background); + border-bottom: 1px solid var(--color-line); + transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); + } + + .site-header__inner { + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: space-between; + gap: var(--space-md); + padding-inline: var(--page-margin); + min-height: 5.5rem; + } + + .site-header__nav { + display: flex; + gap: var(--space-md); + } + .site-header__nav--left { + justify-content: flex-start; } - header a { + + .nav-link { + font-size: var(--text-sm); + letter-spacing: 1.5px; + text-transform: uppercase; + text-decoration: none; + color: currentcolor; position: relative; + padding-block: 0.5rem; + } + .nav-link::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: var(--color-accent); + transform: scaleX(0); + transform-origin: left; + transition: transform var(--duration) var(--ease); + } + .nav-link:hover::after { + transform: scaleX(1); + } + + .site-header__brand { + text-align: center; text-decoration: none; - color: var(--color-foreground); + color: currentcolor; + } + .site-header__wordmark { + font-family: var(--font-heading--family); + font-size: var(--text-xl); + letter-spacing: 3px; + text-transform: uppercase; + } + .site-header__logo { + height: auto; + margin-inline: auto; + } + + .site-header__actions { display: flex; align-items: center; + justify-content: flex-end; + gap: var(--space-sm); + } + .site-header__icon { + display: inline-flex; + align-items: center; justify-content: center; + color: currentcolor; + background: none; + border: 0; + cursor: pointer; + position: relative; + } + .site-header__icon svg { + width: 22px; + height: 22px; } - header a sup { + .site-header__cart-count { position: absolute; + top: -0.5rem; left: 100%; - overflow: hidden; - max-width: var(--page-margin); + margin-left: -0.6rem; + font-size: 0.65rem; + font-weight: 700; + background-color: var(--color-accent); + color: var(--color-contrast); + min-width: 1.1rem; + height: 1.1rem; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 0.25rem; } - header svg { - width: 2rem; + + /* Transparent overlay on homepage hero */ + .site-header--transparent:not([data-scrolled="true"]) { + position: fixed; + inset: 0 0 auto 0; + background-color: transparent; + border-bottom-color: transparent; + color: var(--color-contrast); + } + .site-header--transparent:not([data-scrolled="true"]) .nav-link::after { + background-color: var(--color-contrast); + } + + /* Mobile nav */ + .nav-mobile { + display: none; + position: relative; } - header .header__menu, - header .header__icons { + .nav-mobile__panel { + position: absolute; + right: 0; + top: calc(100% + 0.75rem); + background-color: var(--color-background); + color: var(--color-foreground); + border: 1px solid var(--color-line); + padding: var(--space-sm); + min-width: 14rem; display: flex; - gap: 1rem; + flex-direction: column; + gap: 0.25rem; + box-shadow: 0 20px 50px -20px rgba(14, 30, 51, 0.35); + } + .nav-mobile__link { + padding: 0.65rem 0.5rem; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 1.5px; + font-size: var(--text-sm); + border-bottom: 1px solid var(--color-line); + } + .nav-mobile__link:last-child { + border-bottom: 0; + } + .nav-mobile summary { + list-style: none; + } + .nav-mobile summary::-webkit-details-marker { + display: none; + } + + @media (max-width: 749px) { + .site-header__nav--left { + display: none; + } + .site-header__inner { + grid-template-columns: 1fr auto 1fr; + min-height: 4.5rem; + } + .nav-mobile { + display: block; + } } {% endstylesheet %} +{% javascript %} + (function () { + const header = document.currentScript + ? document.querySelector('.site-header') + : null; + const el = document.querySelector('.site-header--transparent'); + if (!el) return; + const onScroll = () => { + el.dataset.scrolled = window.scrollY > 40 ? 'true' : 'false'; + }; + onScroll(); + window.addEventListener('scroll', onScroll, { passive: true }); + })(); +{% endjavascript %} + {% schema %} { "name": "t:general.header", "settings": [ + { + "type": "text", + "id": "announcement", + "label": "Announcement text", + "default": "Complimentary worldwide shipping — Every jewel tells a story" + }, + { + "type": "image_picker", + "id": "logo", + "label": "Logo" + }, + { + "type": "range", + "id": "logo_width", + "min": 80, + "max": 320, + "step": 10, + "unit": "px", + "label": "Logo width", + "default": 160 + }, { "type": "link_list", "id": "menu", @@ -71,6 +313,18 @@ "id": "customer_account_menu", "label": "t:labels.customer_account_menu", "default": "customer-account-main-menu" + }, + { + "type": "checkbox", + "id": "sticky", + "label": "Sticky header", + "default": true + }, + { + "type": "checkbox", + "id": "transparent_on_home", + "label": "Transparent over homepage hero", + "default": true } ] } diff --git a/sections/hero.liquid b/sections/hero.liquid new file mode 100644 index 000000000..ed263f67a --- /dev/null +++ b/sections/hero.liquid @@ -0,0 +1,259 @@ +{% comment %} + Full-viewport cinematic hero with a background video (or image fallback), + overlay, eyebrow, headline and call-to-action buttons. +{% endcomment %} + +{% liquid + assign poster = section.settings.poster_url + if section.settings.poster_image != blank + assign poster = section.settings.poster_image | image_url: width: 2400 + endif +%} + +
+
+ {% if section.settings.video_url != blank %} + + {% else %} + + {% endif %} +
+
+ +
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + {% if section.settings.subheading != blank %} +

{{ section.settings.subheading }}

+ {% endif %} + +
+ {% if section.settings.button_label != blank %} + + {{ section.settings.button_label }} + + {% endif %} + {% if section.settings.button_label_2 != blank %} + + {{ section.settings.button_label_2 }} + + {% endif %} +
+
+ + {% if section.settings.show_scroll_cue %} + + {% endif %} +
+ +{% stylesheet %} + .hero { + position: relative; + min-height: var(--min-h, 92svh); + display: grid; + place-items: center; + overflow: hidden; + color: var(--color-contrast); + isolation: isolate; + } + .hero__media { + position: absolute; + inset: 0; + z-index: -1; + } + .hero__video { + width: 100%; + height: 100%; + object-fit: cover; + } + .hero__overlay { + position: absolute; + inset: 0; + background: + linear-gradient(to bottom, rgba(14, 30, 51, 0.25), rgba(14, 30, 51, 0.65)), + rgba(14, 30, 51, calc(var(--overlay) / 100)); + } + .hero__content { + padding: var(--space-2xl) var(--page-margin); + max-width: 60rem; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-md); + animation: hero-rise 1.2s var(--ease) both; + } + .hero__eyebrow { + color: var(--color-accent-soft); + } + .hero__heading { + font-size: var(--text-hero); + margin: 0; + } + .hero__subheading { + font-size: var(--text-lg); + color: color-mix(in srgb, var(--color-contrast) 88%, transparent); + } + .hero__actions { + display: flex; + gap: var(--space-sm); + flex-wrap: wrap; + justify-content: center; + margin-top: var(--space-sm); + } + .hero__button-ghost { + color: var(--color-contrast); + border-color: var(--color-contrast); + } + .hero__button-ghost:hover { + background-color: var(--color-contrast); + color: var(--color-navy); + } + .hero__scroll { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 3.5rem; + background: color-mix(in srgb, var(--color-contrast) 40%, transparent); + overflow: hidden; + } + .hero__scroll span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 40%; + background: var(--color-contrast); + animation: hero-scroll 2s var(--ease) infinite; + } + + @keyframes hero-rise { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes hero-scroll { + 0% { transform: translateY(-100%); } + 100% { transform: translateY(250%); } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Hero", + "settings": [ + { + "type": "header", + "content": "Media" + }, + { + "type": "text", + "id": "video_url", + "label": "Background video URL (mp4)", + "info": "Leave empty to use the poster image only.", + "default": "https://assets.mixkit.co/videos/preview/mixkit-waves-coming-to-the-beach-5016-large.mp4" + }, + { + "type": "image_picker", + "id": "poster_image", + "label": "Poster image" + }, + { + "type": "text", + "id": "poster_url", + "label": "Poster image URL (fallback)", + "default": "https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=2400&q=80" + }, + { + "type": "range", + "id": "overlay_opacity", + "min": 0, + "max": 80, + "step": 5, + "unit": "%", + "label": "Overlay darkness", + "default": 25 + }, + { + "type": "range", + "id": "height", + "min": 60, + "max": 100, + "step": 2, + "unit": "vh", + "label": "Section height", + "default": 92 + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Odyssey Jewels" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Travel the World, Collect the World" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story." + }, + { + "type": "text", + "id": "button_label", + "label": "Primary button label", + "default": "Explore the collection" + }, + { + "type": "url", + "id": "button_url", + "label": "Primary button link" + }, + { + "type": "text", + "id": "button_label_2", + "label": "Secondary button label", + "default": "Our story" + }, + { + "type": "url", + "id": "button_url_2", + "label": "Secondary button link" + }, + { + "type": "checkbox", + "id": "show_scroll_cue", + "label": "Show scroll indicator", + "default": true + } + ], + "presets": [ + { + "name": "Hero" + } + ] +} +{% endschema %} diff --git a/sections/promises.liquid b/sections/promises.liquid new file mode 100644 index 000000000..e5693a7af --- /dev/null +++ b/sections/promises.liquid @@ -0,0 +1,112 @@ +{% comment %} + Slim assurance band: a row of short brand promises (icon + label + text). +{% endcomment %} + +
+
+ {% for block in section.blocks %} +
+ {% if block.settings.title != blank %} +

{{ block.settings.title }}

+ {% endif %} + {% if block.settings.text != blank %} +

{{ block.settings.text }}

+ {% endif %} +
+ {% endfor %} +
+
+ +{% stylesheet %} + .promises__row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); + gap: var(--space-lg); + padding: var(--space-xl) var(--page-margin); + border-top: 1px solid var(--color-line); + border-bottom: 1px solid var(--color-line); + } + .on-dark .promises__row { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise { + text-align: center; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .promise__title { + font-family: var(--font-heading--family); + font-size: var(--text-xl); + } + .promise__text { + font-size: var(--text-sm); + color: var(--color-foreground-50); + } + .on-dark .promise__text { + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Promises", + "settings": [ + { + "type": "checkbox", + "id": "dark", + "label": "Dark theme", + "default": false + } + ], + "blocks": [ + { + "type": "promise", + "name": "Promise", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Title", + "default": "One of a kind" + }, + { + "type": "text", + "id": "text", + "label": "Text", + "default": "Every piece is unique. When it's gone, it's gone." + } + ] + } + ], + "max_blocks": 4, + "presets": [ + { + "name": "Promises", + "blocks": [ + { + "type": "promise", + "settings": { + "title": "One of a kind", + "text": "Every piece is unique. When it's gone, it's gone." + } + }, + { + "type": "promise", + "settings": { + "title": "Artisan made", + "text": "Crafted by master makers in their homeland." + } + }, + { + "type": "promise", + "settings": { + "title": "Worldwide delivery", + "text": "Complimentary, insured shipping across the globe." + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/regions.liquid b/sections/regions.liquid new file mode 100644 index 000000000..6baa12357 --- /dev/null +++ b/sections/regions.liquid @@ -0,0 +1,255 @@ +{% comment %} + Region-based collection showcase. Each block is a region card with imagery, + a status label (e.g. Available now / Coming soon) and a link. +{% endcomment %} + +
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + {% if section.settings.subheading != blank %} +

{{ section.settings.subheading }}

+ {% endif %} +
+ +
+ {% for block in section.blocks %} + {% liquid + assign img = block.settings.image_url + if block.settings.image != blank + assign img = block.settings.image | image_url: width: 1200 + endif + %} + +
+ {{ block.settings.title | escape }} +
+
+
+ {% if block.settings.status != blank %} + {{ block.settings.status }} + {% endif %} +

{{ block.settings.title }}

+ {% if block.settings.subtitle != blank %} +

{{ block.settings.subtitle }}

+ {% endif %} + {{ block.settings.cta | default: 'Discover' }} +
+ + {% endfor %} +
+
+ +{% stylesheet %} + .regions__head { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-sm); + margin-bottom: var(--space-xl); + } + .regions__sub { + color: var(--color-foreground-50); + font-size: var(--text-lg); + } + .regions__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); + gap: var(--space-md); + } + .region-card { + position: relative; + display: block; + text-decoration: none; + color: var(--color-contrast); + overflow: hidden; + aspect-ratio: 4 / 5; + isolation: isolate; + } + .region-card__media { + position: absolute; + inset: 0; + z-index: -1; + } + .region-card__media img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 1.2s var(--ease); + } + .region-card__overlay { + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(14, 30, 51, 0.85) 0%, rgba(14, 30, 51, 0.1) 55%, rgba(14, 30, 51, 0.2) 100%); + transition: background var(--duration) var(--ease); + } + .region-card:hover .region-card__media img { + transform: scale(1.06); + } + .region-card__body { + position: absolute; + inset: auto 0 0 0; + padding: var(--space-lg); + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .region-card__status { + align-self: flex-start; + font-size: var(--text-xs); + letter-spacing: 2px; + text-transform: uppercase; + padding: 0.35rem 0.75rem; + border: 1px solid color-mix(in srgb, var(--color-contrast) 55%, transparent); + color: var(--color-contrast); + margin-bottom: var(--space-2xs); + } + .region-card__title { + font-size: var(--text-2xl); + margin: 0; + } + .region-card__subtitle { + color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + font-size: var(--text-sm); + } + .region-card__cta { + margin-top: var(--space-xs); + font-size: var(--text-sm); + letter-spacing: 1.5px; + text-transform: uppercase; + position: relative; + width: fit-content; + padding-bottom: 0.3rem; + } + .region-card__cta::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background: var(--color-accent); + transform: scaleX(0); + transform-origin: left; + transition: transform var(--duration) var(--ease); + } + .region-card:hover .region-card__cta::after { + transform: scaleX(1); + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Region collections", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Collections by region" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Where in the world will you begin?" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Each region reveals a curated collection of treasures — released one expedition at a time." + } + ], + "blocks": [ + { + "type": "region", + "name": "Region", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "image_url", + "label": "Image URL (fallback)" + }, + { + "type": "text", + "id": "status", + "label": "Status label", + "default": "Available now" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Oceania" + }, + { + "type": "text", + "id": "subtitle", + "label": "Subtitle", + "default": "Treasures of the South Pacific" + }, + { + "type": "text", + "id": "cta", + "label": "Link label", + "default": "Discover" + }, + { + "type": "url", + "id": "link", + "label": "Link" + } + ] + } + ], + "max_blocks": 8, + "presets": [ + { + "name": "Region collections", + "blocks": [ + { + "type": "region", + "settings": { + "title": "Oceania", + "status": "Available now", + "subtitle": "Treasures of the South Pacific", + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80" + } + }, + { + "type": "region", + "settings": { + "title": "The Founders Collection", + "status": "By invitation", + "subtitle": "Rare pieces for our earliest collectors", + "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1200&q=80" + } + }, + { + "type": "region", + "settings": { + "title": "Asia", + "status": "Coming soon", + "subtitle": "Along the ancient trade routes", + "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1200&q=80" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/story.liquid b/sections/story.liquid new file mode 100644 index 000000000..a821e932b --- /dev/null +++ b/sections/story.liquid @@ -0,0 +1,156 @@ +{% comment %} + Editorial split section: large image paired with a story column. + Supports image on the left or right and an optional dark theme. +{% endcomment %} + +{% liquid + assign img = section.settings.image_url + if section.settings.image != blank + assign img = section.settings.image | image_url: width: 1600 + endif +%} + +
+
+
+ {{ section.settings.heading | escape }} +
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + {% if section.settings.body != blank %} +
{{ section.settings.body }}
+ {% endif %} + {% if section.settings.button_label != blank %} + + {{ section.settings.button_label }} + + {% endif %} +
+
+
+ +{% stylesheet %} + .story__grid { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + align-items: center; + gap: clamp(2rem, 5vw, 6rem); + padding-inline: var(--page-margin); + } + .story--media-right .story__media { + order: 2; + } + .story__media { + overflow: hidden; + } + .story__media img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 4 / 5; + } + .story__content { + display: flex; + flex-direction: column; + gap: var(--space-md); + max-width: 34rem; + } + .story__heading { + font-size: var(--text-3xl); + } + .story__body { + color: var(--color-foreground-50); + font-size: var(--text-lg); + line-height: 1.7; + } + .on-dark .story__body { + color: color-mix(in srgb, var(--color-contrast) 80%, transparent); + } + .story__link { + margin-top: var(--space-2xs); + } + + @media (max-width: 749px) { + .story__grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } + .story--media-right .story__media { + order: 0; + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Story", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "image_url", + "label": "Image URL (fallback)", + "default": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80" + }, + { + "type": "select", + "id": "media_position", + "label": "Image position", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "right", "label": "Right" } + ], + "default": "left" + }, + { + "type": "checkbox", + "id": "dark", + "label": "Dark theme", + "default": false + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Our philosophy" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Every jewel tells a story" + }, + { + "type": "richtext", + "id": "body", + "label": "Body", + "default": "

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

" + }, + { + "type": "text", + "id": "button_label", + "label": "Link label", + "default": "Read our story" + }, + { + "type": "url", + "id": "button_url", + "label": "Link" + } + ], + "presets": [ + { + "name": "Story" + } + ] +} +{% endschema %} diff --git a/snippets/css-variables.liquid b/snippets/css-variables.liquid index 99b5497a3..f487713d5 100644 --- a/snippets/css-variables.liquid +++ b/snippets/css-variables.liquid @@ -1,18 +1,66 @@ {% style %} - {% # Loads all font variantions with display: swap %} + {% # Load all body font variations with display: swap %} {{ settings.type_primary_font | font_face: font_display: 'swap' }} {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_face: font_display: 'swap' }} {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }} {{ settings.type_primary_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }} + {% # Load heading font variations %} + {{ settings.type_heading_font | font_face: font_display: 'swap' }} + {{ settings.type_heading_font | font_modify: 'weight', 'bold' | font_face: font_display: 'swap' }} + {{ settings.type_heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }} + :root { + /* Typography */ --font-primary--family: {{ settings.type_primary_font.family }}, {{ settings.type_primary_font.fallback_families }}; --font-primary--style: {{ settings.type_primary_font.style }}; --font-primary--weight: {{ settings.type_primary_font.weight }}; + --font-heading--family: {{ settings.type_heading_font.family }}, {{ settings.type_heading_font.fallback_families }}; + --font-heading--style: {{ settings.type_heading_font.style }}; + --font-heading--weight: {{ settings.type_heading_font.weight }}; + --tracking-heading: {{ settings.type_heading_tracking }}px; + --tracking-eyebrow: {{ settings.type_eyebrow_tracking }}px; + + /* Type scale (fluid) */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); + --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); + --text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); + --text-4xl: clamp(2.6rem, 1.8rem + 4vw, 5rem); + --text-hero: clamp(3rem, 2rem + 6vw, 7rem); + + /* Layout */ --page-width: {{ settings.max_page_width }}; --page-margin: {{ settings.min_page_margin }}px; + + /* Spacing scale */ + --space-2xs: 0.5rem; + --space-xs: 0.75rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 6rem; + --space-3xl: 9rem; + --section-spacing: clamp(4rem, 2rem + 7vw, 9rem); + + /* Colors */ --color-background: {{ settings.background_color }}; --color-foreground: {{ settings.foreground_color }}; + --color-navy: {{ settings.color_navy }}; + --color-accent: {{ settings.color_accent }}; + --color-accent-soft: {{ settings.color_accent_soft }}; + --color-contrast: {{ settings.color_contrast }}; + --color-foreground-50: color-mix(in srgb, var(--color-foreground) 50%, transparent); + --color-foreground-12: color-mix(in srgb, var(--color-foreground) 12%, transparent); + --color-line: color-mix(in srgb, var(--color-foreground) 14%, transparent); + + /* Shape & motion */ --style-border-radius-inputs: {{ settings.input_corner_radius }}px; + --ease: cubic-bezier(0.22, 1, 0.36, 1); + --duration: 0.6s; } {% endstyle %} diff --git a/templates/index.json b/templates/index.json index 1f827db93..5ae798e4f 100644 --- a/templates/index.json +++ b/templates/index.json @@ -9,12 +9,180 @@ */ { "sections": { - "main": { - "type": "hello-world", - "settings": {} + "hero": { + "type": "hero", + "settings": { + "eyebrow": "Odyssey Jewels", + "heading": "Travel the World, Collect the World", + "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.", + "button_label": "Explore the collection", + "button_label_2": "Our story", + "overlay_opacity": 25, + "height": 92 + } + }, + "promises": { + "type": "promises", + "blocks": { + "p1": { + "type": "promise", + "settings": { + "title": "One of a kind", + "text": "Every piece is unique. When it's gone, it's gone." + } + }, + "p2": { + "type": "promise", + "settings": { + "title": "Artisan made", + "text": "Crafted by master makers in their homeland." + } + }, + "p3": { + "type": "promise", + "settings": { + "title": "Worldwide delivery", + "text": "Complimentary, insured shipping across the globe." + } + } + }, + "block_order": ["p1", "p2", "p3"] + }, + "regions": { + "type": "regions", + "settings": { + "eyebrow": "Collections by region", + "heading": "Where in the world will you begin?", + "subheading": "Each region reveals a curated collection of treasures — released one expedition at a time." + }, + "blocks": { + "r1": { + "type": "region", + "settings": { + "title": "Oceania", + "status": "Available now", + "subtitle": "Treasures of the South Pacific", + "cta": "Discover", + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80" + } + }, + "r2": { + "type": "region", + "settings": { + "title": "The Founders Collection", + "status": "By invitation", + "subtitle": "Rare pieces for our earliest collectors", + "cta": "Enquire", + "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1200&q=80" + } + }, + "r3": { + "type": "region", + "settings": { + "title": "Asia", + "status": "Coming soon", + "subtitle": "Along the ancient trade routes", + "cta": "Join the waitlist", + "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1200&q=80" + } + } + }, + "block_order": ["r1", "r2", "r3"] + }, + "story": { + "type": "story", + "settings": { + "media_position": "left", + "dark": false, + "eyebrow": "Our philosophy", + "heading": "Every jewel tells a story", + "body": "

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

", + "button_label": "Read our story", + "image_url": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80" + } + }, + "featured": { + "type": "featured", + "settings": { + "eyebrow": "The first drop", + "heading": "Oceania Collection", + "link_label": "View all pieces" + }, + "blocks": { + "f1": { + "type": "piece", + "settings": { + "title": "Coral Tide Ring", + "region": "Oceania", + "badge": "One of a kind", + "price": "$1,200", + "image_url": "https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=80" + } + }, + "f2": { + "type": "piece", + "settings": { + "title": "Lagoon Pearl Pendant", + "region": "Oceania", + "badge": "One of a kind", + "price": "$980", + "image_url": "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&q=80" + } + }, + "f3": { + "type": "piece", + "settings": { + "title": "Reef Gold Bangle", + "region": "Oceania", + "badge": "One of a kind", + "price": "$1,540", + "image_url": "https://images.unsplash.com/photo-1611085583191-a3b181a88401?auto=format&fit=crop&w=900&q=80" + } + }, + "f4": { + "type": "piece", + "settings": { + "title": "Tide Drop Earrings", + "region": "Oceania", + "badge": "One of a kind", + "price": "$760", + "image_url": "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80" + } + } + }, + "block_order": ["f1", "f2", "f3", "f4"] + }, + "story_artisans": { + "type": "story", + "settings": { + "media_position": "right", + "dark": true, + "eyebrow": "The makers", + "heading": "Meet the artisans", + "body": "

Behind every treasure is a person and a place. We put their names, their cities and their craft at the heart of the story — because you're not just collecting jewellery, you're collecting the world.

", + "button_label": "Meet the makers", + "image_url": "https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&w=1600&q=80" + } + }, + "cta": { + "type": "cta-banner", + "settings": { + "eyebrow": "The odyssey begins", + "heading": "Begin your collection", + "subheading": "The first expedition has landed. Claim a piece of Oceania before it's gone forever.", + "button_label": "Shop the first drop", + "overlay_opacity": 45, + "image_url": "https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=2400&q=80" + } } }, "order": [ - "main" + "hero", + "promises", + "regions", + "story", + "featured", + "story_artisans", + "cta" ] } From cc3a0cfb2d792fb1dfb5b199dbf921c268a6b63a Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 20:38:53 +0200 Subject: [PATCH 02/25] Update --- assets/critical.css | 75 ++++- assets/theme.js | 34 ++ config/settings_schema.json | 2 +- docs/ODYSSEY-JEWELS-BUILD-PLAN.md | 24 +- layout/theme.liquid | 2 + sections/cta-banner.liquid | 46 ++- sections/featured.liquid | 322 +++++++++++++++---- sections/footer.liquid | 207 +++++++----- sections/header.liquid | 515 ++++++++++++++++++++---------- sections/hero.liquid | 201 +++++++----- sections/marquee.liquid | 128 ++++++++ sections/promises.liquid | 76 ++++- sections/regions.liquid | 263 ++++++++++----- sections/story.liquid | 176 ++++++++-- templates/index.json | 132 +++++--- 15 files changed, 1592 insertions(+), 611 deletions(-) create mode 100644 assets/theme.js create mode 100644 sections/marquee.liquid diff --git a/assets/critical.css b/assets/critical.css index d80fd1686..a53d6f9dd 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -91,7 +91,7 @@ h4 { font-family: var(--font-heading--family); font-weight: var(--font-heading--weight); font-style: var(--font-heading--style); - line-height: 1.08; + line-height: 1.02; letter-spacing: var(--tracking-heading); text-wrap: balance; } @@ -109,23 +109,66 @@ h4 { font-size: var(--text-xl); } +/** Italic serif accent inside headings */ +h1 em, +h2 em, +h3 em { + font-style: italic; + font-weight: inherit; + color: inherit; +} + a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } -/** Eyebrow / overline label */ +/** Eyebrow / overline label with optional hairline */ .eyebrow { - display: inline-block; + display: inline-flex; + align-items: center; + gap: 1rem; font-family: var(--font-primary--family); font-size: var(--text-xs); - font-weight: 600; + font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); margin: 0; } +.eyebrow--rule::before { + content: ""; + display: inline-block; + width: 2.5rem; + height: 1px; + background: currentcolor; + opacity: 0.7; +} + +/** Small meta label — coordinates, indices, expedition numbers */ +.meta-label { + font-size: 0.7rem; + font-weight: 500; + letter-spacing: 2.5px; + text-transform: uppercase; + font-variant-numeric: tabular-nums; + opacity: 0.75; +} + +/** Scroll reveal (activated by theme.js) */ +.reveal-ready [data-reveal] { + opacity: 0; + transform: translateY(28px); + transition: + opacity 1s var(--ease), + transform 1s var(--ease); + transition-delay: var(--reveal-delay, 0s); +} +.reveal-ready [data-reveal].is-visible { + opacity: 1; + transform: translateY(0); +} /** Buttons */ .button, @@ -135,13 +178,13 @@ button.button { display: inline-flex; align-items: center; justify-content: center; - gap: 0.6em; - padding: 1rem 2.25rem; - min-height: 3rem; + gap: 0.75em; + padding: 1.1rem 2.75rem; + min-height: 3.25rem; font-family: var(--font-primary--family); - font-size: var(--text-sm); + font-size: var(--text-xs); font-weight: 600; - letter-spacing: 1.5px; + letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; color: var(--btn-fg); @@ -183,12 +226,12 @@ button.button { .link-underline { position: relative; display: inline-block; - font-size: var(--text-sm); + font-size: var(--text-xs); font-weight: 600; - letter-spacing: 1.5px; + letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; - padding-bottom: 0.3rem; + padding-bottom: 0.35rem; } .link-underline::after { content: ""; @@ -236,6 +279,14 @@ button.button { /** Section layout utilities */ +/* Inline padding that aligns full-bleed content with the page column */ +:root { + --page-inline: max( + var(--page-margin), + calc((100vw - var(--page-width)) / 2 + var(--page-margin)) + ); +} + /** * Setup a grid that enables both full-width and constrained layouts * depending on the class of the child elements. diff --git a/assets/theme.js b/assets/theme.js new file mode 100644 index 000000000..fa52e9c75 --- /dev/null +++ b/assets/theme.js @@ -0,0 +1,34 @@ +/* Global theme behaviors: scroll reveals + header scroll state. */ +(() => { + document.documentElement.classList.add('reveal-ready'); + + const observer = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + } + }, + { threshold: 0.12, rootMargin: '0px 0px -6% 0px' } + ); + + const observeReveals = () => { + document + .querySelectorAll('[data-reveal]:not(.is-visible)') + .forEach((el) => observer.observe(el)); + }; + + observeReveals(); + document.addEventListener('shopify:section:load', observeReveals); + + const header = document.querySelector('[data-header]'); + if (header) { + const onScroll = () => { + header.dataset.scrolled = window.scrollY > 24 ? 'true' : 'false'; + }; + onScroll(); + window.addEventListener('scroll', onScroll, { passive: true }); + } +})(); diff --git a/config/settings_schema.json b/config/settings_schema.json index c86e3d3e1..2e89e9337 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -17,7 +17,7 @@ { "type": "font_picker", "id": "type_heading_font", - "default": "playfair_display_n4", + "default": "cormorant_n4", "label": "Heading font" }, { diff --git a/docs/ODYSSEY-JEWELS-BUILD-PLAN.md b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md index 73f9f55e1..04d5df4cf 100644 --- a/docs/ODYSSEY-JEWELS-BUILD-PLAN.md +++ b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md @@ -94,8 +94,8 @@ Core hierarchy from the brief: **Region → Country → City → Artisan**, with ## 5. Design System -- [ ] **Palette:** Navy (primary) + Rose (accent). Define full scale in `config/settings_schema.json` and expose as CSS vars via `snippets/css-variables.liquid`. -- [ ] **Typography:** Premium pairing (display serif + clean sans). Set in theme settings; preload base weight (pattern already in `layout/theme.liquid`). +- [x] **Palette:** Navy (primary) + Rose (accent). Defined in `config/settings_schema.json` and exposed as CSS vars via `snippets/css-variables.liquid`. +- [x] **Typography:** Premium pairing — Cormorant (display serif, italic accents) + Jost (sans). Set in theme settings; base weight preloaded. - [ ] **Logo:** Cleaned-up mark — separate "OJ" from wordmark, keep compass rose, remove busy background so it works for embroidery/small branding. `@client` to supply source; `@core` to produce SVG variants (full, mark-only, mono). - [ ] **Tone:** Editorial, story-first, generous whitespace, large photography. "Every Jewel Tells a Story." - [ ] **Design tokens doc:** spacing scale, radii, shadows, motion — documented so `@dev` stays consistent. @@ -107,25 +107,25 @@ Core hierarchy from the brief: **Region → Country → City → Artisan**, with Mapped to the skeleton's folders. Items marked `@core` are the premium framework we build; `@dev` items are handed off. ### 6.1 Global / Layout `@core` -- [ ] `layout/theme.liquid` — add skip links, header/footer groups, cart drawer mount, structured-data hooks, GTM/analytics slot. -- [ ] `snippets/css-variables.liquid` — full token set (Navy/Rose, spacing, type scale). +- [ ] `layout/theme.liquid` — add skip links, header/footer groups, cart drawer mount, structured-data hooks, GTM/analytics slot. *(theme.js reveal/header system wired in)* +- [x] `snippets/css-variables.liquid` — full token set (Navy/Rose, spacing, fluid type scale, motion). - [ ] `snippets/meta-tags.liquid` — Open Graph, Twitter, canonical, JSON-LD org/product. -- [ ] `assets/critical.css` — base grid, typography, buttons, header/footer critical styles. +- [x] `assets/critical.css` — base grid, typography, buttons, eyebrows/meta-labels, scroll-reveal system. ### 6.2 Header & Navigation `@core` -- [ ] Clean navigation focused on **region-based collections** (Oceania, Founders, etc.) — not a deep Region→Country→City mega-menu. Country/city surface as filters on the collection page, not primary nav. +- [x] Clean navigation focused on **region-based collections** — sticky header with blur backdrop, transparent-over-hero mode, full-screen menu overlay. Country/city surface as filters on the collection page, not primary nav. - [ ] Cart drawer (AJAX cart) — standard behavior; no special "sold = gone" logic needed here (handled by inventory, see §7.4). - [ ] Predictive search. -- [ ] Account entry (ties to Rewards). +- [x] Account entry (ties to Rewards). ### 6.3 Homepage sections `@dev` (framework by `@core`) -- [ ] Hero (brand video + "Travel the World, Collect the World"). +- [x] Hero (stock video + "Travel the World, Collect the World" — editorial layout, expedition metadata, staggered reveals). - [ ] Interactive World Map section (**hero custom feature** — see §7.1). -- [ ] Featured drop (Oceania) carousel/grid. -- [ ] "How it works" / storytelling band. -- [ ] Featured artisans. +- [x] Featured drop (Oceania) — horizontal gallery rail with controls + progress line. +- [x] "How it works" / storytelling band — layered dual-image story sections + destination marquee + promises ledger. +- [x] Featured artisans (dark story variant; to be backed by artisan metaobjects later). - [ ] Rewards teaser. -- [ ] Newsletter signup. +- [x] Newsletter signup (footer). ### 6.4 Product page (PDP) — rebuild `sections/product.liquid` `@core` - [ ] Media gallery (multi-image, angles, zoom, video). diff --git a/layout/theme.liquid b/layout/theme.liquid index 0e3fd39ca..2c75ff2a8 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -23,6 +23,8 @@ {% # Social, title, etc. %} {% render 'meta-tags' %} + + {{ content_for_header }} diff --git a/sections/cta-banner.liquid b/sections/cta-banner.liquid index 903d7e7f3..0ea84bbbd 100644 --- a/sections/cta-banner.liquid +++ b/sections/cta-banner.liquid @@ -1,5 +1,6 @@ {% comment %} - Full-width closing call-to-action with an image or video background. + Closing call-to-action: full-bleed imagery with an inset hairline frame, + centered italic-accent heading and a single refined action. {% endcomment %} {% liquid @@ -21,18 +22,23 @@
+ +
{% if section.settings.eyebrow != blank %} -

{{ section.settings.eyebrow }}

- {% endif %} - {% if section.settings.heading != blank %} -

{{ section.settings.heading }}

+

{{ section.settings.eyebrow }}

{% endif %} +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

{% if section.settings.subheading != blank %} -

{{ section.settings.subheading }}

+

{{ section.settings.subheading }}

{% endif %} {% if section.settings.button_label != blank %} - + {{ section.settings.button_label }} {% endif %} @@ -44,7 +50,7 @@ position: relative; display: grid; place-items: center; - min-height: 70svh; + min-height: 78svh; overflow: hidden; color: var(--color-contrast); isolation: isolate; @@ -62,25 +68,33 @@ .cta-banner__overlay { position: absolute; inset: 0; - background: rgba(14, 30, 51, calc(var(--overlay) / 100)); + background: rgba(10, 22, 40, calc(var(--overlay) / 100)); + } + .cta-banner__frame { + position: absolute; + inset: clamp(1.25rem, 3vw, 2.5rem); + border: 1px solid color-mix(in srgb, var(--color-contrast) 35%, transparent); + pointer-events: none; } .cta-banner__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); - padding: var(--space-2xl) var(--page-margin); - max-width: 52rem; + padding: var(--space-3xl) var(--page-inline); + max-width: 56rem; } .cta-banner__eyebrow { color: var(--color-accent-soft); } .cta-banner__heading { font-size: var(--text-4xl); + font-weight: 400; } .cta-banner__sub { font-size: var(--text-lg); - color: color-mix(in srgb, var(--color-contrast) 86%, transparent); + font-weight: 300; + color: color-mix(in srgb, var(--color-contrast) 85%, transparent); } {% endstylesheet %} @@ -124,7 +138,13 @@ "type": "text", "id": "heading", "label": "Heading", - "default": "Begin your collection" + "default": "Begin your" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "collection" }, { "type": "textarea", diff --git a/sections/featured.liquid b/sections/featured.liquid index 1fd1f6d7c..b2aeee08e 100644 --- a/sections/featured.liquid +++ b/sections/featured.liquid @@ -1,52 +1,90 @@ {% comment %} - Featured pieces grid. Uses curated blocks with stock imagery so the layout - looks complete before real products are connected. Swap to a product-backed - collection during build-out. + Featured pieces — horizontal gallery rail with scroll-snap, thin arrow + controls and a hairline progress indicator. Curated blocks with stock + imagery until real products are connected. {% endcomment %}
{% if section.settings.eyebrow != blank %} -

{{ section.settings.eyebrow }}

- {% endif %} - {% if section.settings.heading != blank %} -

{{ section.settings.heading }}

+

{{ section.settings.eyebrow }}

{% endif %} +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

+
+ +
+ +
- {% if section.settings.link_label != blank %} - - {{ section.settings.link_label }} - - {% endif %}
-
- {% for block in section.blocks %} - {% liquid - assign img = block.settings.image_url - if block.settings.image != blank - assign img = block.settings.image | image_url: width: 900 - endif - %} - -
- {{ block.settings.title | escape }} - {% if block.settings.badge != blank %} - {{ block.settings.badge }} - {% endif %} -
-
- {% if block.settings.region != blank %} - {{ block.settings.region }} - {% endif %} -

{{ block.settings.title }}

- {% if block.settings.price != blank %} - {{ block.settings.price }} - {% endif %} -
- - {% endfor %} +
+
+ {% for block in section.blocks %} + {% liquid + assign img = block.settings.image_url + if block.settings.image != blank + assign img = block.settings.image | image_url: width: 900 + endif + assign index_label = forloop.index | prepend: '00' | slice: -2, 2 + %} + +
+ {{ block.settings.title | escape }} + {% if block.settings.badge != blank %} + {{ block.settings.badge }} + {% endif %} + + View piece + + +
+
+ N° {{ index_label }} +
+ {% if block.settings.region != blank %} + {{ block.settings.region }} + {% endif %} +

{{ block.settings.title }}

+ {% if block.settings.price != blank %} + {{ block.settings.price }} + {% endif %} +
+
+ + {% endfor %} + + {% if section.settings.link_label != blank %} + + + {{ section.settings.link_label }} + + + + {% endif %} +
+ +
+ +
@@ -55,69 +93,206 @@ display: flex; align-items: flex-end; justify-content: space-between; - gap: var(--space-md); + gap: var(--space-lg); flex-wrap: wrap; - margin-bottom: var(--space-xl); + margin-bottom: var(--space-lg); } .featured__heading { - font-size: var(--text-3xl); - margin-top: var(--space-2xs); + margin-top: var(--space-sm); + font-weight: 400; } - .featured__grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); - gap: var(--space-lg) var(--space-md); + + .featured__controls { + display: flex; + gap: 0.75rem; + } + .featured__arrow { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3.25rem; + height: 3.25rem; + border: 1px solid var(--color-line); + border-radius: 999px; + background: transparent; + color: var(--color-foreground); + cursor: pointer; + transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); + } + .featured__arrow:hover { + background-color: var(--color-navy); + border-color: var(--color-navy); + color: var(--color-contrast); } + + .featured__rail-wrap { + position: relative; + } + .featured__rail { + display: flex; + gap: var(--space-md); + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-padding-inline: var(--page-inline); + padding-inline: var(--page-inline); + scrollbar-width: none; + } + .featured__rail::-webkit-scrollbar { + display: none; + } + .piece-card { + flex: 0 0 clamp(16rem, 24vw, 22rem); + scroll-snap-align: start; text-decoration: none; color: var(--color-foreground); - display: block; } .piece-card__media { position: relative; overflow: hidden; - background: var(--color-foreground-12); aspect-ratio: 4 / 5; + background: var(--color-foreground-12); margin-bottom: var(--space-sm); } .piece-card__media img { width: 100%; height: 100%; object-fit: cover; - transition: transform 1.1s var(--ease); + transition: transform 1.2s var(--ease); } .piece-card:hover .piece-card__media img { transform: scale(1.05); } .piece-card__badge { position: absolute; - top: var(--space-sm); - left: var(--space-sm); - background: var(--color-background); + top: 1rem; + left: 1rem; + background: color-mix(in srgb, var(--color-background) 92%, transparent); + backdrop-filter: blur(4px); color: var(--color-navy); - font-size: var(--text-xs); - letter-spacing: 1.5px; + font-size: 0.6rem; + font-weight: 600; + letter-spacing: 2px; text-transform: uppercase; - padding: 0.3rem 0.7rem; + padding: 0.4rem 0.8rem; } - .piece-card__region { - font-size: var(--text-xs); + .piece-card__view { + position: absolute; + left: 1rem; + bottom: 1rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.65rem; + font-weight: 600; letter-spacing: 2px; text-transform: uppercase; + color: var(--color-contrast); + background: color-mix(in srgb, var(--color-navy) 82%, transparent); + backdrop-filter: blur(6px); + padding: 0.6rem 1rem; + opacity: 0; + transform: translateY(8px); + transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .piece-card:hover .piece-card__view { + opacity: 1; + transform: translateY(0); + } + + .piece-card__info { + display: flex; + gap: 1rem; + align-items: baseline; + } + .piece-card__index { + color: var(--color-foreground-50); + } + .piece-card__region { + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; color: var(--color-accent); } .piece-card__title { - font-size: var(--text-lg); - margin: 0.35rem 0; - font-family: var(--font-heading--family); - font-weight: var(--font-heading--weight); + font-size: var(--text-xl); + font-weight: 400; + margin: 0.2rem 0; } .piece-card__price { font-size: var(--text-sm); color: var(--color-foreground-50); + font-variant-numeric: tabular-nums; + } + + .piece-card--end { + display: grid; + place-items: center; + aspect-ratio: 4 / 5; + background: var(--color-navy); + color: var(--color-contrast); + } + .piece-card__end-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-sm); + text-align: center; + padding: var(--space-md); + transition: transform var(--duration) var(--ease); + } + .piece-card--end:hover .piece-card__end-inner { + transform: translateX(6px); + } + .piece-card__end-label { + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-xl); + } + + .featured__progress { + margin: var(--space-lg) var(--page-inline) 0; + height: 1px; + background: var(--color-line); + } + .featured__progress-bar { + display: block; + height: 100%; + width: 0%; + background: var(--color-accent); + transition: width 0.2s linear; } {% endstylesheet %} +{% javascript %} + document.querySelectorAll('[data-rail-scope]').forEach((scope) => { + const rail = scope.querySelector('[data-rail]'); + const progress = scope.querySelector('[data-rail-progress]'); + const section = scope.closest('.shopify-section') || document; + const prev = section.querySelector('[data-rail-prev]'); + const next = section.querySelector('[data-rail-next]'); + if (!rail) return; + + const step = () => { + const card = rail.querySelector('.piece-card'); + return card ? card.getBoundingClientRect().width + 24 : 320; + }; + + prev?.addEventListener('click', () => rail.scrollBy({ left: -step(), behavior: 'smooth' })); + next?.addEventListener('click', () => rail.scrollBy({ left: step(), behavior: 'smooth' })); + + const updateProgress = () => { + if (!progress) return; + const max = rail.scrollWidth - rail.clientWidth; + const pct = max > 0 ? (rail.scrollLeft / max) * 100 : 0; + progress.style.width = Math.max(6, pct) + '%'; + }; + rail.addEventListener('scroll', updateProgress, { passive: true }); + updateProgress(); + }); +{% endjavascript %} + {% schema %} { "name": "Featured pieces", @@ -132,18 +307,24 @@ "type": "text", "id": "heading", "label": "Heading", - "default": "Oceania Collection" + "default": "Oceania" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "Collection" }, { "type": "text", "id": "link_label", - "label": "View-all label", - "default": "View all pieces" + "label": "End-card label", + "default": "View the full collection" }, { "type": "url", "id": "link_url", - "label": "View-all link" + "label": "End-card link" } ], "blocks": [ @@ -193,7 +374,7 @@ ] } ], - "max_blocks": 8, + "max_blocks": 10, "presets": [ { "name": "Featured pieces", @@ -233,6 +414,15 @@ "price": "$760", "image_url": "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80" } + }, + { + "type": "piece", + "settings": { + "title": "Atoll Signet", + "region": "Oceania", + "price": "$1,880", + "image_url": "https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=900&q=80" + } } ] } diff --git a/sections/footer.liquid b/sections/footer.liquid index 9c3af2784..4d1a73c17 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -1,6 +1,6 @@ {% comment %} - Premium footer: brand statement, newsletter signup, link columns, - social, payment icons and legal row. + Footer: newsletter + link columns above an oversized serif wordmark, + closing with a hairline legal row and payment icons. {% endcomment %}
@@ -8,63 +8,68 @@
{% if section.settings.tagline != blank %} -

{{ section.settings.tagline }}

+

{{ section.settings.tagline }}

{% endif %} -

{{ shop.name }}

{% if section.settings.blurb != blank %}

{{ section.settings.blurb }}

{% endif %} + + {% if section.settings.show_newsletter %} + + {% endif %}
- {% if section.settings.show_newsletter %} - -
- {% for block in section.blocks %} - {% if block.type == 'menu' %} -
- {% if block.settings.title != blank %} -

{{ block.settings.title }}

- {% endif %} -
    - {% for link in block.settings.menu.links %} -
  • {{ link.title }}
    • - {% endfor %} -
-
- {% endif %} - {% endfor %} -
+

© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.

+ {% if section.settings.coordinates != blank %} + {{ section.settings.coordinates }} + {% endif %} + {% if section.settings.show_payment_icons %}
{% for type in shop.enabled_payment_types %} @@ -77,57 +82,60 @@
{% stylesheet %} - .site-footer { - margin-top: 0; - } .site-footer__inner { - padding: var(--space-2xl) var(--page-margin) var(--space-lg); + padding: var(--space-2xl) var(--page-inline) var(--space-lg); display: flex; flex-direction: column; - gap: var(--space-xl); + gap: var(--space-2xl); } + .site-footer__top { - display: flex; - justify-content: space-between; - gap: var(--space-xl); - flex-wrap: wrap; - padding-bottom: var(--space-lg); - border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 18%, transparent); + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); + gap: var(--space-2xl); } - .site-footer__wordmark { - font-family: var(--font-heading--family); - font-size: var(--text-2xl); - letter-spacing: 2px; - text-transform: uppercase; - margin-top: var(--space-2xs); + + .site-footer__brand { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-md); } .site-footer__blurb { - margin-top: var(--space-sm); - color: color-mix(in srgb, var(--color-contrast) 80%, transparent); + font-weight: 300; + line-height: 1.75; + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); } + .site-footer__news-title { - font-size: var(--text-sm); - letter-spacing: 1.5px; - text-transform: uppercase; + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-xl); margin-bottom: var(--space-sm); } .newsletter-field { display: flex; align-items: center; gap: var(--space-2xs); - border-bottom: 1px solid var(--color-contrast); - min-width: min(24rem, 80vw); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + min-width: min(24rem, 100%); + transition: border-color var(--duration) var(--ease); + } + .newsletter-field:focus-within { + border-color: var(--color-contrast); } .newsletter-field input { flex: 1; background: transparent; border: 0; color: var(--color-contrast); - padding: 0.75rem 0; + padding: 0.85rem 0; outline: none; + font-weight: 300; + letter-spacing: 0.02em; } .newsletter-field input::placeholder { - color: color-mix(in srgb, var(--color-contrast) 60%, transparent); + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); } .newsletter-field__submit { background: none; @@ -139,7 +147,7 @@ } .newsletter-field__submit:hover { color: var(--color-accent-soft); - transform: translateX(3px); + transform: translateX(4px); } .newsletter-note { margin-top: var(--space-xs); @@ -149,12 +157,14 @@ .site-footer__columns { display: grid; - grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-lg); + align-content: start; } .footer-col__title { - font-size: var(--text-xs); - letter-spacing: 2px; + font-size: 0.65rem; + font-weight: 600; + letter-spacing: 2.5px; text-transform: uppercase; color: var(--color-accent-soft); margin-bottom: var(--space-sm); @@ -165,16 +175,34 @@ margin: 0; display: flex; flex-direction: column; - gap: 0.7rem; + gap: 0.75rem; } .footer-col__list a { text-decoration: none; - color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); font-size: var(--text-sm); - transition: color var(--duration) var(--ease); + font-weight: 300; + letter-spacing: 0.02em; + transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease); } .footer-col__list a:hover { color: var(--color-contrast); + padding-left: 0.4rem; + } + + /* Oversized wordmark */ + .site-footer__giant { + font-family: var(--font-heading--family); + font-size: clamp(2.75rem, 11vw, 10rem); + line-height: 0.95; + text-transform: uppercase; + letter-spacing: 0.06em; + text-align: center; + white-space: nowrap; + color: color-mix(in srgb, var(--color-contrast) 92%, transparent); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 15%, transparent); + padding-bottom: var(--space-lg); + margin: 0; } .site-footer__bottom { @@ -183,13 +211,15 @@ justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; - padding-top: var(--space-lg); - border-top: 1px solid color-mix(in srgb, var(--color-contrast) 18%, transparent); } .site-footer__copyright { font-size: var(--text-xs); - letter-spacing: 0.5px; - color: color-mix(in srgb, var(--color-contrast) 70%, transparent); + font-weight: 300; + letter-spacing: 0.04em; + color: color-mix(in srgb, var(--color-contrast) 60%, transparent); + } + .site-footer__coords { + color: color-mix(in srgb, var(--color-contrast) 45%, transparent); } .site-footer__payment { display: flex; @@ -197,10 +227,10 @@ flex-wrap: wrap; } - @media (max-width: 749px) { + @media (max-width: 989px) { .site-footer__top { - flex-direction: column; - gap: var(--space-lg); + grid-template-columns: 1fr; + gap: var(--space-xl); } } {% endstylesheet %} @@ -247,6 +277,12 @@ "type": "header", "content": "Bottom row" }, + { + "type": "text", + "id": "coordinates", + "label": "Coordinates line", + "default": "Charting all seven regions of the world" + }, { "type": "checkbox", "id": "show_payment_icons", @@ -268,7 +304,8 @@ { "type": "link_list", "id": "menu", - "label": "t:labels.menu" + "label": "t:labels.menu", + "default": "footer" } ] } diff --git a/sections/header.liquid b/sections/header.liquid index 975827346..5a587314b 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,281 +1,457 @@ {% comment %} - Premium site header: announcement bar, centered brand, region-based nav, - search / account / cart. Optional transparent overlay on the homepage hero. + Site header. The whole section wrapper is sticky: the announcement line + scrolls away (negative sticky top) while the nav bar remains. On the + homepage the header overlays the hero (negative bottom margin) and gains + a blurred background once scrolled (state set by theme.js on [data-header]). {% endcomment %} {% liquid - assign is_transparent = false + assign overlay = false if section.settings.transparent_on_home and template.name == 'index' - assign is_transparent = true + assign overlay = true + endif + + if section.settings.announcement != blank + assign ann_height = '2.5rem' + else + assign ann_height = '0rem' endif %} -{% if section.settings.announcement != blank %} -
-

{{ section.settings.announcement }}

-
-{% endif %} +{% style %} + /* + The skeleton constrains .shopify-section children to a center grid + column. The header must escape that entirely: the wrapper becomes a + plain sticky block spanning the full viewport width. + */ + #shopify-section-{{ section.id }} { + display: block; + position: sticky; + top: calc(-1 * {{ ann_height }}); + z-index: 100; + width: 100%; + } + #shopify-section-{{ section.id }} > * { + grid-column: unset; + } + {% if overlay %} + /* Overlay the hero: remove the header's footprint from the page flow. */ + #shopify-section-{{ section.id }} { + margin-bottom: calc(-1 * (var(--hdr-bar-height) + {{ ann_height }})); + } + {% endif %} +{% endstyle %} -
-
- + {% if section.settings.announcement != blank %} +

{{ section.settings.announcement }}

+ {% endif %} - +
+
+ + + +
+ + {% if section.settings.logo != blank %} {{ section.settings.logo | image_url: width: 600 | image_tag: - class: 'site-header__logo', + class: 'hdr__logo', alt: shop.name, loading: 'eager', widths: '120, 240, 360, 480, 600', style: 'width: ' | append: section.settings.logo_width | append: 'px' }} {% else %} - {{ shop.name }} + {{ shop.name }} {% endif %} -
- -
+ + {% if shop.customer_accounts_enabled %} - + {% endif %} - - {{ 'icon-cart.svg' | inline_asset_content }} + + {% if cart.item_count > 0 %} - {{ cart.item_count }} + {{ cart.item_count }} {% endif %} - -
- - - -
- {% for link in section.settings.menu.links %} - {{ link.title }} - {% endfor %} -
-
-
+
+ +{% # Full-screen menu overlay %} + {% stylesheet %} - .announcement { - background-color: var(--color-navy); - color: var(--color-contrast); - text-align: center; - padding: 0.6rem var(--page-margin); + :root { + --hdr-bar-height: 5.25rem; } - .announcement__text { - font-size: var(--text-xs); - letter-spacing: var(--tracking-eyebrow); - text-transform: uppercase; - font-weight: 600; + + .hdr { + position: relative; + width: 100%; + color: var(--color-foreground); + transition: color var(--duration) var(--ease); } - .site-header { - position: sticky; - top: 0; - z-index: 20; - background-color: var(--color-background); - border-bottom: 1px solid var(--color-line); - transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); + /* Announcement: full-bleed navy line */ + .hdr__announcement { + position: relative; + z-index: 2; + height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.65rem; + font-weight: 600; + letter-spacing: 3px; + text-transform: uppercase; + background: var(--color-navy); + color: var(--color-contrast); + padding-inline: var(--page-inline); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - .site-header__inner { + /* Bar: backdrop lives on the bar itself so it always paints edge to edge */ + .hdr__bar { + position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; + height: var(--hdr-bar-height); + padding-inline: var(--page-inline); gap: var(--space-md); - padding-inline: var(--page-margin); - min-height: 5.5rem; + background: color-mix(in srgb, var(--color-background) 94%, transparent); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--color-line); + transition: + background-color var(--duration) var(--ease), + border-color var(--duration) var(--ease); + } + .hdr[data-scrolled="true"] .hdr__bar { + box-shadow: 0 10px 40px -18px rgba(10, 22, 40, 0.18); } - .site-header__nav { + .hdr__side { display: flex; + align-items: center; gap: var(--space-md); } - .site-header__nav--left { - justify-content: flex-start; + .hdr__side--right { + justify-content: flex-end; + gap: 1.4rem; } - .nav-link { - font-size: var(--text-sm); - letter-spacing: 1.5px; + .hdr__nav { + display: flex; + gap: 2.25rem; + } + .hdr__nav-link { + position: relative; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; color: currentcolor; - position: relative; padding-block: 0.5rem; + opacity: 0.85; + transition: opacity var(--duration) var(--ease); } - .nav-link::after { + .hdr__nav-link::after { content: ""; position: absolute; - left: 0; - bottom: 0; + left: 50%; + bottom: 0.15rem; width: 100%; height: 1px; - background-color: var(--color-accent); - transform: scaleX(0); - transform-origin: left; + background: currentcolor; + transform: translateX(-50%) scaleX(0); transition: transform var(--duration) var(--ease); } - .nav-link:hover::after { - transform: scaleX(1); + .hdr__nav-link:hover { + opacity: 1; + } + .hdr__nav-link:hover::after { + transform: translateX(-50%) scaleX(1); } - .site-header__brand { - text-align: center; + .hdr__brand { + position: relative; text-decoration: none; color: currentcolor; + text-align: center; } - .site-header__wordmark { + .hdr__wordmark { font-family: var(--font-heading--family); - font-size: var(--text-xl); - letter-spacing: 3px; + font-size: 1.45rem; + letter-spacing: 0.42em; + text-indent: 0.42em; /* optically recenters letterspaced caps */ text-transform: uppercase; + white-space: nowrap; } - .site-header__logo { + .hdr__logo { height: auto; margin-inline: auto; } - .site-header__actions { - display: flex; - align-items: center; - justify-content: flex-end; - gap: var(--space-sm); - } - .site-header__icon { + .hdr__icon { + position: relative; display: inline-flex; align-items: center; justify-content: center; color: currentcolor; background: none; border: 0; + padding: 0; cursor: pointer; - position: relative; + opacity: 0.85; + transition: opacity var(--duration) var(--ease); + } + .hdr__icon:hover { + opacity: 1; } - .site-header__icon svg { - width: 22px; - height: 22px; + .hdr__icon svg { + width: 20px; + height: 20px; + stroke-width: 1.25; } - .site-header__cart-count { + .hdr__icon--account svg { + width: 20px; + height: 20px; + } + .hdr__cart-count { position: absolute; - top: -0.5rem; - left: 100%; - margin-left: -0.6rem; - font-size: 0.65rem; + top: -0.45rem; + right: -0.65rem; + font-size: 0.6rem; font-weight: 700; - background-color: var(--color-accent); + font-variant-numeric: tabular-nums; + background: var(--color-accent); color: var(--color-contrast); - min-width: 1.1rem; - height: 1.1rem; + min-width: 1rem; + height: 1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; - padding: 0 0.25rem; + padding: 0 0.2rem; + } + + /* Burger — two lines, elegant */ + .hdr__burger { + display: none; + flex-direction: column; + justify-content: center; + gap: 7px; + width: 26px; + background: none; + border: 0; + padding: 0; + cursor: pointer; + color: currentcolor; + } + .hdr__burger span { + display: block; + height: 1px; + width: 100%; + background: currentcolor; + transition: transform var(--duration) var(--ease), width var(--duration) var(--ease); + } + .hdr__burger:hover span:last-child { + width: 60%; } - /* Transparent overlay on homepage hero */ - .site-header--transparent:not([data-scrolled="true"]) { + /* ---- Overlay (transparent over hero, until scrolled) ---- */ + .hdr--overlay[data-scrolled="false"] { + color: var(--color-contrast); + } + .hdr--overlay[data-scrolled="false"] .hdr__bar { + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border-bottom-color: color-mix(in srgb, var(--color-contrast) 16%, transparent); + } + + /* ---- Full-screen menu ---- */ + .menu-overlay { position: fixed; - inset: 0 0 auto 0; - background-color: transparent; - border-bottom-color: transparent; + inset: 0; + z-index: 60; + background: var(--color-navy); color: var(--color-contrast); + display: flex; + flex-direction: column; + padding: var(--space-md) var(--page-margin) var(--space-lg); + opacity: 0; + visibility: hidden; + transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); } - .site-header--transparent:not([data-scrolled="true"]) .nav-link::after { - background-color: var(--color-contrast); + html.menu-open { + overflow: hidden; + } + html.menu-open .menu-overlay { + opacity: 1; + visibility: visible; } - /* Mobile nav */ - .nav-mobile { - display: none; - position: relative; + .menu-overlay__head { + display: flex; + align-items: center; + justify-content: space-between; + min-height: var(--hdr-bar-height); } - .nav-mobile__panel { - position: absolute; - right: 0; - top: calc(100% + 0.75rem); - background-color: var(--color-background); - color: var(--color-foreground); - border: 1px solid var(--color-line); - padding: var(--space-sm); - min-width: 14rem; + .menu-overlay__close { + background: none; + border: 0; + color: currentcolor; + cursor: pointer; + padding: 0.25rem; + opacity: 0.8; + transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .menu-overlay__close:hover { + opacity: 1; + transform: rotate(90deg); + } + + .menu-overlay__nav { + flex: 1; display: flex; flex-direction: column; + justify-content: center; gap: 0.25rem; - box-shadow: 0 20px 50px -20px rgba(14, 30, 51, 0.35); } - .nav-mobile__link { - padding: 0.65rem 0.5rem; + .menu-overlay__link { + display: flex; + align-items: baseline; + gap: 1.25rem; + font-family: var(--font-heading--family); + font-size: clamp(2.25rem, 6vw, 4rem); + line-height: 1.25; text-decoration: none; - text-transform: uppercase; - letter-spacing: 1.5px; - font-size: var(--text-sm); - border-bottom: 1px solid var(--color-line); + color: currentcolor; + padding-block: 0.35rem; + opacity: 0; + transform: translateY(18px); + transition: + opacity 0.7s var(--ease), + transform 0.7s var(--ease), + color 0.4s var(--ease); + transition-delay: calc(var(--i) * 70ms); } - .nav-mobile__link:last-child { - border-bottom: 0; + html.menu-open .menu-overlay__link { + opacity: 1; + transform: translateY(0); } - .nav-mobile summary { - list-style: none; + .menu-overlay__link:hover { + color: var(--color-accent-soft); + font-style: italic; } - .nav-mobile summary::-webkit-details-marker { - display: none; + .menu-overlay__index { + font-family: var(--font-primary--family); + font-size: 0.7rem; + letter-spacing: 2px; + opacity: 0.5; + font-variant-numeric: tabular-nums; + } + + .menu-overlay__foot { + display: flex; + justify-content: space-between; + color: color-mix(in srgb, var(--color-contrast) 65%, transparent); } - @media (max-width: 749px) { - .site-header__nav--left { + @media (max-width: 989px) { + .hdr__nav { display: none; } - .site-header__inner { - grid-template-columns: 1fr auto 1fr; - min-height: 4.5rem; + .hdr__burger { + display: flex; } - .nav-mobile { - display: block; + .hdr__wordmark { + font-size: 1.15rem; + letter-spacing: 0.32em; + text-indent: 0.32em; + } + :root { + --hdr-bar-height: 4.5rem; } } {% endstylesheet %} {% javascript %} - (function () { - const header = document.currentScript - ? document.querySelector('.site-header') - : null; - const el = document.querySelector('.site-header--transparent'); - if (!el) return; - const onScroll = () => { - el.dataset.scrolled = window.scrollY > 40 ? 'true' : 'false'; - }; - onScroll(); - window.addEventListener('scroll', onScroll, { passive: true }); - })(); + document.querySelectorAll('[data-menu-toggle]').forEach((btn) => { + btn.addEventListener('click', () => { + const open = document.documentElement.classList.toggle('menu-open'); + document + .querySelectorAll('[data-menu-toggle]') + .forEach((b) => b.setAttribute('aria-expanded', open)); + const overlay = document.querySelector('[data-menu-overlay]'); + if (overlay) overlay.setAttribute('aria-hidden', !open); + }); + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && document.documentElement.classList.contains('menu-open')) { + document.documentElement.classList.remove('menu-open'); + } + }); {% endjavascript %} {% schema %} @@ -306,7 +482,8 @@ { "type": "link_list", "id": "menu", - "label": "t:labels.menu" + "label": "t:labels.menu", + "default": "main-menu" }, { "type": "link_list", @@ -314,17 +491,27 @@ "label": "t:labels.customer_account_menu", "default": "customer-account-main-menu" }, - { - "type": "checkbox", - "id": "sticky", - "label": "Sticky header", - "default": true - }, { "type": "checkbox", "id": "transparent_on_home", "label": "Transparent over homepage hero", "default": true + }, + { + "type": "header", + "content": "Menu overlay" + }, + { + "type": "text", + "id": "menu_overlay_label", + "label": "Overlay label", + "default": "Odyssey Jewels" + }, + { + "type": "text", + "id": "menu_overlay_footer", + "label": "Overlay footer text", + "default": "Travel the world — Collect the world" } ] } diff --git a/sections/hero.liquid b/sections/hero.liquid index ed263f67a..ca7b1593a 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -1,6 +1,7 @@ {% comment %} - Full-viewport cinematic hero with a background video (or image fallback), - overlay, eyebrow, headline and call-to-action buttons. + Cinematic editorial hero. Background video (or image), bottom-left + composition, italic serif accent line, expedition metadata and a + hairline base row with scroll cue and coordinates. {% endcomment %} {% liquid @@ -10,11 +11,11 @@ endif %} -
+
{% if section.settings.video_url != blank %} {% else %} - + {% endif %}
-
- {% if section.settings.eyebrow != blank %} -

{{ section.settings.eyebrow }}

- {% endif %} - {% if section.settings.heading != blank %} -

{{ section.settings.heading }}

+
+ {% if section.settings.expedition != blank %} +

{{ section.settings.expedition }}

{% endif %} + +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

+ {% if section.settings.subheading != blank %} -

{{ section.settings.subheading }}

+

{{ section.settings.subheading }}

{% endif %} -
+
{% if section.settings.button_label != blank %} {{ section.settings.button_label }} {% endif %} - {% if section.settings.button_label_2 != blank %} - - {{ section.settings.button_label_2 }} + {% if section.settings.link_label != blank %} + + {{ section.settings.link_label }} {% endif %}
- {% if section.settings.show_scroll_cue %} - - {% endif %} +
+ + + {{ section.settings.scroll_label }} + + {% if section.settings.coordinates != blank %} + {{ section.settings.coordinates }} + {% endif %} +
{% stylesheet %} .hero { position: relative; - min-height: var(--min-h, 92svh); - display: grid; - place-items: center; + min-height: 100svh; + display: flex; + flex-direction: column; + justify-content: flex-end; overflow: hidden; color: var(--color-contrast); isolation: isolate; @@ -76,7 +87,7 @@ inset: 0; z-index: -1; } - .hero__video { + .hero__bg { width: 100%; height: 100%; object-fit: cover; @@ -85,71 +96,89 @@ position: absolute; inset: 0; background: - linear-gradient(to bottom, rgba(14, 30, 51, 0.25), rgba(14, 30, 51, 0.65)), - rgba(14, 30, 51, calc(var(--overlay) / 100)); + linear-gradient(to top, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0.15) 45%, rgba(10, 22, 40, 0.3) 100%), + rgba(10, 22, 40, calc(var(--overlay) / 100)); } + .hero__content { - padding: var(--space-2xl) var(--page-margin); - max-width: 60rem; display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; gap: var(--space-md); - animation: hero-rise 1.2s var(--ease) both; + padding-inline: var(--page-inline); + padding-bottom: var(--space-xl); + max-width: 72rem; } .hero__eyebrow { color: var(--color-accent-soft); } .hero__heading { font-size: var(--text-hero); + font-weight: 400; margin: 0; } - .hero__subheading { + .hero__heading em { + display: block; + } + .hero__sub { font-size: var(--text-lg); - color: color-mix(in srgb, var(--color-contrast) 88%, transparent); + font-weight: 300; + letter-spacing: 0.01em; + color: color-mix(in srgb, var(--color-contrast) 85%, transparent); } .hero__actions { display: flex; - gap: var(--space-sm); + align-items: center; + gap: var(--space-lg); flex-wrap: wrap; - justify-content: center; margin-top: var(--space-sm); } - .hero__button-ghost { + .hero__text-link { color: var(--color-contrast); - border-color: var(--color-contrast); } - .hero__button-ghost:hover { - background-color: var(--color-contrast); - color: var(--color-navy); + + .hero__base { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + border-top: 1px solid color-mix(in srgb, var(--color-contrast) 22%, transparent); + padding: 1.4rem var(--page-inline); + margin-top: var(--space-lg); + } + .hero__scroll-label { + display: inline-flex; + align-items: center; + gap: 1rem; } - .hero__scroll { - position: absolute; - bottom: 2rem; - left: 50%; - transform: translateX(-50%); - width: 1px; - height: 3.5rem; - background: color-mix(in srgb, var(--color-contrast) 40%, transparent); + .hero__scroll-line { + position: relative; + display: inline-block; + width: 3.5rem; + height: 1px; + background: color-mix(in srgb, var(--color-contrast) 30%, transparent); overflow: hidden; } - .hero__scroll span { + .hero__scroll-line span { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 40%; + inset: 0; background: var(--color-contrast); - animation: hero-scroll 2s var(--ease) infinite; + animation: hero-line 2.6s var(--ease) infinite; } - @keyframes hero-rise { - from { opacity: 0; transform: translateY(24px); } - to { opacity: 1; transform: translateY(0); } + @keyframes hero-line { + 0% { transform: translateX(-100%); } + 55% { transform: translateX(0); } + 100% { transform: translateX(102%); } } - @keyframes hero-scroll { - 0% { transform: translateY(-100%); } - 100% { transform: translateY(250%); } + + @media (max-width: 749px) { + .hero__actions { + gap: var(--space-md); + } + .hero__base { + padding-block: 1.1rem; + } } {% endstylesheet %} @@ -187,17 +216,7 @@ "step": 5, "unit": "%", "label": "Overlay darkness", - "default": 25 - }, - { - "type": "range", - "id": "height", - "min": 60, - "max": 100, - "step": 2, - "unit": "vh", - "label": "Section height", - "default": 92 + "default": 20 }, { "type": "header", @@ -205,15 +224,21 @@ }, { "type": "text", - "id": "eyebrow", - "label": "Eyebrow", - "default": "Odyssey Jewels" + "id": "expedition", + "label": "Expedition label", + "default": "Expedition N° 001 — Oceania" }, { "type": "text", "id": "heading", "label": "Heading", - "default": "Travel the World, Collect the World" + "default": "Travel the World," + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic line)", + "default": "Collect the World" }, { "type": "textarea", @@ -234,20 +259,30 @@ }, { "type": "text", - "id": "button_label_2", - "label": "Secondary button label", + "id": "link_label", + "label": "Text link label", "default": "Our story" }, { "type": "url", - "id": "button_url_2", - "label": "Secondary button link" + "id": "link_url", + "label": "Text link URL" + }, + { + "type": "header", + "content": "Base row" }, { - "type": "checkbox", - "id": "show_scroll_cue", - "label": "Show scroll indicator", - "default": true + "type": "text", + "id": "scroll_label", + "label": "Scroll label", + "default": "Scroll to explore" + }, + { + "type": "text", + "id": "coordinates", + "label": "Coordinates", + "default": "17.6797° S, 149.4068° W — South Pacific" } ], "presets": [ diff --git a/sections/marquee.liquid b/sections/marquee.liquid new file mode 100644 index 000000000..3bbfb964e --- /dev/null +++ b/sections/marquee.liquid @@ -0,0 +1,128 @@ +{% comment %} + Slow-scrolling destination ticker. Items alternate between serif italic + and small-caps sans, separated by a diamond glyph. Pauses on hover. +{% endcomment %} + +
+
+ {% for i in (1..2) %} +
+ {% for block in section.blocks %} + + {{ block.settings.text }} + + + {% endfor %} +
+ {% endfor %} +
+
+ +{% stylesheet %} + .marquee { + overflow: hidden; + border-block: 1px solid var(--color-line); + padding-block: 1.4rem; + } + .marquee.on-dark { + border-color: transparent; + } + .marquee__track { + display: flex; + width: max-content; + animation: marquee-scroll var(--speed, 40s) linear infinite; + } + .marquee:hover .marquee__track { + animation-play-state: paused; + } + .marquee__group { + display: flex; + align-items: center; + flex-shrink: 0; + } + .marquee__item { + white-space: nowrap; + padding-inline: 2.5rem; + } + .marquee__item--serif { + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-2xl); + } + .marquee__item--sans { + font-size: var(--text-sm); + font-weight: 500; + letter-spacing: 4px; + text-transform: uppercase; + } + .marquee__sep { + color: var(--color-accent); + font-size: 0.8rem; + } + + @keyframes marquee-scroll { + from { transform: translateX(0); } + to { transform: translateX(-50%); } + } + + @media (prefers-reduced-motion: reduce) { + .marquee__track { + animation: none; + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Marquee", + "settings": [ + { + "type": "checkbox", + "id": "dark", + "label": "Dark theme", + "default": false + }, + { + "type": "range", + "id": "speed", + "min": 20, + "max": 90, + "step": 5, + "unit": "s", + "label": "Scroll duration", + "default": 45 + } + ], + "blocks": [ + { + "type": "item", + "name": "Item", + "settings": [ + { + "type": "text", + "id": "text", + "label": "Text", + "default": "Oceania" + } + ] + } + ], + "max_blocks": 12, + "presets": [ + { + "name": "Marquee", + "blocks": [ + { "type": "item", "settings": { "text": "Oceania" } }, + { "type": "item", "settings": { "text": "Every jewel tells a story" } }, + { "type": "item", "settings": { "text": "Asia" } }, + { "type": "item", "settings": { "text": "One of a kind" } }, + { "type": "item", "settings": { "text": "The Founders Collection" } }, + { "type": "item", "settings": { "text": "Artisan made" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/promises.liquid b/sections/promises.liquid index e5693a7af..dfe31be41 100644 --- a/sections/promises.liquid +++ b/sections/promises.liquid @@ -1,13 +1,24 @@ {% comment %} - Slim assurance band: a row of short brand promises (icon + label + text). + Brand promises as a numbered ledger row — hairline-divided columns with + index numbers, serif titles and quiet supporting text. {% endcomment %} -
-
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} + +
{% for block in section.blocks %} -
+
+ {{ forloop.index | prepend: '00' | slice: -2, 2 }} {% if block.settings.title != blank %} -

{{ block.settings.title }}

+

{{ block.settings.title }}

{% endif %} {% if block.settings.text != blank %}

{{ block.settings.text }}

@@ -18,33 +29,58 @@
{% stylesheet %} + .promises__eyebrow { + margin-bottom: var(--space-xl); + } .promises__row { display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); - gap: var(--space-lg); - padding: var(--space-xl) var(--page-margin); + grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); border-top: 1px solid var(--color-line); - border-bottom: 1px solid var(--color-line); } .on-dark .promises__row { border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); } .promise { - text-align: center; display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--space-sm); + padding: var(--space-lg) var(--space-lg) 0 0; + border-top: 1px solid transparent; + position: relative; + } + .promise + .promise { + padding-left: var(--space-lg); + border-left: 1px solid var(--color-line); + } + .on-dark .promise + .promise { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise__index { + color: var(--color-accent); } .promise__title { - font-family: var(--font-heading--family); - font-size: var(--text-xl); + font-size: var(--text-2xl); + font-weight: 400; + margin: 0; } .promise__text { font-size: var(--text-sm); + font-weight: 300; + line-height: 1.7; color: var(--color-foreground-50); + max-width: 26rem; } .on-dark .promise__text { - color: color-mix(in srgb, var(--color-contrast) 78%, transparent); + color: color-mix(in srgb, var(--color-contrast) 75%, transparent); + } + + @media (max-width: 749px) { + .promise + .promise { + padding-left: 0; + border-left: 0; + border-top: 1px solid var(--color-line); + margin-top: var(--space-lg); + } } {% endstylesheet %} @@ -52,6 +88,12 @@ { "name": "Promises", "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "The Odyssey standard" + }, { "type": "checkbox", "id": "dark", @@ -88,21 +130,21 @@ "type": "promise", "settings": { "title": "One of a kind", - "text": "Every piece is unique. When it's gone, it's gone." + "text": "Every piece is unique. When it's gone, it's gone forever." } }, { "type": "promise", "settings": { "title": "Artisan made", - "text": "Crafted by master makers in their homeland." + "text": "Crafted by master makers in their homeland, never mass-produced." } }, { "type": "promise", "settings": { "title": "Worldwide delivery", - "text": "Complimentary, insured shipping across the globe." + "text": "Complimentary, fully insured shipping across the globe." } } ] diff --git a/sections/regions.liquid b/sections/regions.liquid index 6baa12357..2615a2d84 100644 --- a/sections/regions.liquid +++ b/sections/regions.liquid @@ -1,18 +1,26 @@ {% comment %} - Region-based collection showcase. Each block is a region card with imagery, - a status label (e.g. Available now / Coming soon) and a link. + Region expeditions — asymmetric editorial grid. Cards vary in size and + vertical offset in a repeating 3-card rhythm, each numbered like an + expedition ledger entry. {% endcomment %}
-
- {% if section.settings.eyebrow != blank %} -

{{ section.settings.eyebrow }}

- {% endif %} - {% if section.settings.heading != blank %} -

{{ section.settings.heading }}

- {% endif %} - {% if section.settings.subheading != blank %} -

{{ section.settings.subheading }}

+
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

+
+ {% if section.settings.link_label != blank %} + + {{ section.settings.link_label }} + {% endif %}
@@ -21,27 +29,42 @@ {% liquid assign img = block.settings.image_url if block.settings.image != blank - assign img = block.settings.image | image_url: width: 1200 + assign img = block.settings.image | image_url: width: 1400 endif + assign index_label = forloop.index | prepend: '00' | slice: -2, 2 %}
- {{ block.settings.title | escape }} -
-
-
+ {{ block.settings.title | escape }} +
+ + N° {{ index_label }} {% if block.settings.status != blank %} {{ block.settings.status }} {% endif %} -

{{ block.settings.title }}

- {% if block.settings.subtitle != blank %} -

{{ block.settings.subtitle }}

- {% endif %} - {{ block.settings.cta | default: 'Discover' }} + +
+

{{ block.settings.title }}

+ {% if block.settings.subtitle != blank %} +

{{ block.settings.subtitle }}

+ {% endif %} +
+
+ +
+ {{ block.settings.meta }} + + {{ block.settings.cta | default: 'Discover' }} + +
{% endfor %} @@ -51,98 +74,146 @@ {% stylesheet %} .regions__head { display: flex; - flex-direction: column; - align-items: center; - gap: var(--space-sm); + align-items: flex-end; + justify-content: space-between; + gap: var(--space-lg); + flex-wrap: wrap; margin-bottom: var(--space-xl); } - .regions__sub { - color: var(--color-foreground-50); - font-size: var(--text-lg); + .regions__heading { + margin-top: var(--space-sm); + max-width: 22ch; + } + .regions__all { + margin-bottom: 0.5rem; } + .regions__grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); - gap: var(--space-md); + grid-template-columns: repeat(12, 1fr); + gap: var(--space-lg) var(--space-md); + align-items: start; } + .region-card { - position: relative; display: block; text-decoration: none; - color: var(--color-contrast); - overflow: hidden; - aspect-ratio: 4 / 5; - isolation: isolate; + color: var(--color-foreground); } + .region-card:nth-child(3n + 1) { + grid-column: 1 / span 7; + --card-ratio: 7 / 6; + } + .region-card:nth-child(3n + 2) { + grid-column: 9 / span 4; + --card-ratio: 4 / 5; + margin-top: 22%; + } + .region-card:nth-child(3n + 3) { + grid-column: 3 / span 8; + --card-ratio: 16 / 9; + } + .region-card__media { - position: absolute; - inset: 0; - z-index: -1; + position: relative; + overflow: hidden; + aspect-ratio: var(--card-ratio, 4 / 5); + isolation: isolate; + color: var(--color-contrast); } .region-card__media img { width: 100%; height: 100%; object-fit: cover; - transition: transform 1.2s var(--ease); + transition: transform 1.4s var(--ease); + } + .region-card:hover .region-card__media img { + transform: scale(1.05); } - .region-card__overlay { + .region-card__shade { position: absolute; inset: 0; - background: linear-gradient(to top, rgba(14, 30, 51, 0.85) 0%, rgba(14, 30, 51, 0.1) 55%, rgba(14, 30, 51, 0.2) 100%); - transition: background var(--duration) var(--ease); - } - .region-card:hover .region-card__media img { - transform: scale(1.06); + background: linear-gradient(to top, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0.05) 50%); + transition: opacity var(--duration) var(--ease); } - .region-card__body { + + .region-card__index { position: absolute; - inset: auto 0 0 0; - padding: var(--space-lg); - display: flex; - flex-direction: column; - gap: 0.5rem; + top: 1.4rem; + left: 1.4rem; + color: var(--color-contrast); + opacity: 0.9; } .region-card__status { - align-self: flex-start; - font-size: var(--text-xs); + position: absolute; + top: 1.25rem; + right: 1.25rem; + font-size: 0.62rem; + font-weight: 600; letter-spacing: 2px; text-transform: uppercase; - padding: 0.35rem 0.75rem; - border: 1px solid color-mix(in srgb, var(--color-contrast) 55%, transparent); - color: var(--color-contrast); - margin-bottom: var(--space-2xs); + padding: 0.45rem 0.9rem; + border: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); + } + .region-card:hover .region-card__status { + background-color: var(--color-accent); + border-color: var(--color-accent); + } + + .region-card__body { + position: absolute; + inset: auto 0 0 0; + padding: 1.75rem; } .region-card__title { font-size: var(--text-2xl); + font-weight: 400; margin: 0; } .region-card__subtitle { - color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + margin-top: 0.4rem; font-size: var(--text-sm); + font-weight: 300; + letter-spacing: 0.02em; + color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + } + + .region-card__foot { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 1rem; + border-bottom: 1px solid var(--color-line); + padding-bottom: 1rem; } .region-card__cta { - margin-top: var(--space-xs); - font-size: var(--text-sm); - letter-spacing: 1.5px; + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 2.5px; text-transform: uppercase; - position: relative; - width: fit-content; - padding-bottom: 0.3rem; } - .region-card__cta::after { - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 1px; - background: var(--color-accent); - transform: scaleX(0); - transform-origin: left; + .region-card__cta svg { transition: transform var(--duration) var(--ease); } - .region-card:hover .region-card__cta::after { - transform: scaleX(1); + .region-card:hover .region-card__cta svg { + transform: translateX(5px); + } + + @media (max-width: 749px) { + .region-card:nth-child(n) { + grid-column: 1 / -1; + margin-top: 0; + --card-ratio: 4 / 5; + } + .regions__grid { + gap: var(--space-lg); + } } {% endstylesheet %} @@ -154,19 +225,30 @@ "type": "text", "id": "eyebrow", "label": "Eyebrow", - "default": "Collections by region" + "default": "The expeditions" }, { "type": "text", "id": "heading", "label": "Heading", - "default": "Where in the world will you begin?" + "default": "Where in the world" }, { - "type": "textarea", - "id": "subheading", - "label": "Subheading", - "default": "Each region reveals a curated collection of treasures — released one expedition at a time." + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "will you begin?" + }, + { + "type": "text", + "id": "link_label", + "label": "Link label", + "default": "All expeditions" + }, + { + "type": "url", + "id": "link_url", + "label": "Link URL" } ], "blocks": [ @@ -202,6 +284,12 @@ "label": "Subtitle", "default": "Treasures of the South Pacific" }, + { + "type": "text", + "id": "meta", + "label": "Meta line", + "default": "First drop — 200 pieces" + }, { "type": "text", "id": "cta", @@ -216,7 +304,7 @@ ] } ], - "max_blocks": 8, + "max_blocks": 9, "presets": [ { "name": "Region collections", @@ -227,7 +315,8 @@ "title": "Oceania", "status": "Available now", "subtitle": "Treasures of the South Pacific", - "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80" + "meta": "First drop — 200 pieces", + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80" } }, { @@ -236,7 +325,9 @@ "title": "The Founders Collection", "status": "By invitation", "subtitle": "Rare pieces for our earliest collectors", - "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1200&q=80" + "meta": "Private access", + "cta": "Enquire", + "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1400&q=80" } }, { @@ -245,7 +336,9 @@ "title": "Asia", "status": "Coming soon", "subtitle": "Along the ancient trade routes", - "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1200&q=80" + "meta": "Expedition in progress", + "cta": "Join the waitlist", + "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80" } } ] diff --git a/sections/story.liquid b/sections/story.liquid index a821e932b..01d7db8a3 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -1,32 +1,53 @@ {% comment %} - Editorial split section: large image paired with a story column. - Supports image on the left or right and an optional dark theme. + Editorial story section with layered dual imagery: a main portrait image + framed by an offset hairline border, with a smaller overlapping image. + Content column carries an eyebrow, italic-accent heading, body and link. {% endcomment %} {% liquid - assign img = section.settings.image_url + assign img_main = section.settings.image_url if section.settings.image != blank - assign img = section.settings.image | image_url: width: 1600 + assign img_main = section.settings.image | image_url: width: 1600 + endif + + assign img_alt = section.settings.image_2_url + if section.settings.image_2 != blank + assign img_alt = section.settings.image_2 | image_url: width: 900 endif %}
-
-
- {{ section.settings.heading | escape }} +
+
+ +
+ {{ section.settings.heading | escape }} +
+ {% if img_alt != blank %} +
+ +
+ {% endif %} + {% if section.settings.visual_caption != blank %} + {{ section.settings.visual_caption }} + {% endif %}
+
{% if section.settings.eyebrow != blank %} -

{{ section.settings.eyebrow }}

- {% endif %} - {% if section.settings.heading != blank %} -

{{ section.settings.heading }}

+

{{ section.settings.eyebrow }}

{% endif %} +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

{% if section.settings.body != blank %} -
{{ section.settings.body }}
+
{{ section.settings.body }}
{% endif %} {% if section.settings.button_label != blank %} - + {{ section.settings.button_label }} {% endif %} @@ -37,39 +58,102 @@ {% stylesheet %} .story__grid { display: grid; - grid-template-columns: 1.1fr 0.9fr; + grid-template-columns: 1fr 1fr; align-items: center; - gap: clamp(2rem, 5vw, 6rem); - padding-inline: var(--page-margin); + gap: clamp(2.5rem, 6vw, 7rem); } - .story--media-right .story__media { + .story--media-right .story__visual { order: 2; } - .story__media { + + .story__visual { + position: relative; + padding: 2rem 2.5rem 3.5rem 0; + } + .story--media-right .story__visual { + padding: 2rem 0 3.5rem 2.5rem; + } + + /* Offset hairline frame behind the main image */ + .story__frame { + position: absolute; + inset: 0 0.5rem 2rem 1.5rem; + border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); + transform: translate(1.25rem, 1.25rem); + pointer-events: none; + } + .story--media-right .story__frame { + inset: 0 1.5rem 2rem 0.5rem; + transform: translate(-1.25rem, 1.25rem); + } + + .story__main { + position: relative; overflow: hidden; } - .story__media img { + .story__main img { width: 100%; - height: 100%; + height: auto; + aspect-ratio: 4 / 5; object-fit: cover; + } + + .story__inset { + position: absolute; + right: -0.5rem; + bottom: 0; + width: 38%; + box-shadow: 0 30px 60px -30px rgba(10, 22, 40, 0.55); + outline: 6px solid var(--color-background); + } + .on-dark .story__inset { + outline-color: var(--color-navy); + } + .story--media-right .story__inset { + right: auto; + left: -0.5rem; + } + .story__inset img { + width: 100%; + height: auto; aspect-ratio: 4 / 5; + object-fit: cover; } + + .story__caption { + position: absolute; + left: 0; + bottom: 0.9rem; + color: var(--color-foreground-50); + } + .on-dark .story__caption { + color: color-mix(in srgb, var(--color-contrast) 60%, transparent); + } + .story--media-right .story__caption { + left: 2.5rem; + } + .story__content { display: flex; flex-direction: column; + align-items: flex-start; gap: var(--space-md); - max-width: 34rem; + max-width: 32rem; } .story__heading { - font-size: var(--text-3xl); + font-weight: 400; + } + .story__heading em { + display: block; } .story__body { color: var(--color-foreground-50); font-size: var(--text-lg); - line-height: 1.7; + font-weight: 300; + line-height: 1.75; } .on-dark .story__body { - color: color-mix(in srgb, var(--color-contrast) 80%, transparent); + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); } .story__link { margin-top: var(--space-2xs); @@ -80,9 +164,12 @@ grid-template-columns: 1fr; gap: var(--space-lg); } - .story--media-right .story__media { + .story--media-right .story__visual { order: 0; } + .story__content { + max-width: none; + } } {% endstylesheet %} @@ -90,21 +177,42 @@ { "name": "Story", "settings": [ + { + "type": "header", + "content": "Visual" + }, { "type": "image_picker", "id": "image", - "label": "Image" + "label": "Main image" }, { "type": "text", "id": "image_url", - "label": "Image URL (fallback)", + "label": "Main image URL (fallback)", "default": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80" }, + { + "type": "image_picker", + "id": "image_2", + "label": "Inset image" + }, + { + "type": "text", + "id": "image_2_url", + "label": "Inset image URL (fallback)", + "default": "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=900&q=80" + }, + { + "type": "text", + "id": "visual_caption", + "label": "Caption", + "default": "Handcrafted — Rarotonga, Cook Islands" + }, { "type": "select", "id": "media_position", - "label": "Image position", + "label": "Visual position", "options": [ { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" } @@ -117,6 +225,10 @@ "label": "Dark theme", "default": false }, + { + "type": "header", + "content": "Content" + }, { "type": "text", "id": "eyebrow", @@ -127,7 +239,13 @@ "type": "text", "id": "heading", "label": "Heading", - "default": "Every jewel tells a story" + "default": "Every jewel" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "tells a story" }, { "type": "richtext", diff --git a/templates/index.json b/templates/index.json index 5ae798e4f..e252f1442 100644 --- a/templates/index.json +++ b/templates/index.json @@ -12,48 +12,40 @@ "hero": { "type": "hero", "settings": { - "eyebrow": "Odyssey Jewels", - "heading": "Travel the World, Collect the World", + "expedition": "Expedition N° 001 — Oceania", + "heading": "Travel the World,", + "heading_italic": "Collect the World", "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.", "button_label": "Explore the collection", - "button_label_2": "Our story", - "overlay_opacity": 25, - "height": 92 + "link_label": "Our story", + "scroll_label": "Scroll to explore", + "coordinates": "17.6797° S, 149.4068° W — South Pacific", + "overlay_opacity": 20 } }, - "promises": { - "type": "promises", + "marquee": { + "type": "marquee", + "settings": { + "dark": false, + "speed": 45 + }, "blocks": { - "p1": { - "type": "promise", - "settings": { - "title": "One of a kind", - "text": "Every piece is unique. When it's gone, it's gone." - } - }, - "p2": { - "type": "promise", - "settings": { - "title": "Artisan made", - "text": "Crafted by master makers in their homeland." - } - }, - "p3": { - "type": "promise", - "settings": { - "title": "Worldwide delivery", - "text": "Complimentary, insured shipping across the globe." - } - } + "m1": { "type": "item", "settings": { "text": "Oceania" } }, + "m2": { "type": "item", "settings": { "text": "Every jewel tells a story" } }, + "m3": { "type": "item", "settings": { "text": "Asia" } }, + "m4": { "type": "item", "settings": { "text": "One of a kind" } }, + "m5": { "type": "item", "settings": { "text": "The Founders Collection" } }, + "m6": { "type": "item", "settings": { "text": "Artisan made" } } }, - "block_order": ["p1", "p2", "p3"] + "block_order": ["m1", "m2", "m3", "m4", "m5", "m6"] }, "regions": { "type": "regions", "settings": { - "eyebrow": "Collections by region", - "heading": "Where in the world will you begin?", - "subheading": "Each region reveals a curated collection of treasures — released one expedition at a time." + "eyebrow": "The expeditions", + "heading": "Where in the world", + "heading_italic": "will you begin?", + "link_label": "All expeditions" }, "blocks": { "r1": { @@ -62,8 +54,9 @@ "title": "Oceania", "status": "Available now", "subtitle": "Treasures of the South Pacific", + "meta": "First drop — 200 pieces", "cta": "Discover", - "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80" + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80" } }, "r2": { @@ -72,8 +65,9 @@ "title": "The Founders Collection", "status": "By invitation", "subtitle": "Rare pieces for our earliest collectors", + "meta": "Private access", "cta": "Enquire", - "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1200&q=80" + "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1400&q=80" } }, "r3": { @@ -82,8 +76,9 @@ "title": "Asia", "status": "Coming soon", "subtitle": "Along the ancient trade routes", + "meta": "Expedition in progress", "cta": "Join the waitlist", - "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1200&q=80" + "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80" } } }, @@ -95,18 +90,22 @@ "media_position": "left", "dark": false, "eyebrow": "Our philosophy", - "heading": "Every jewel tells a story", + "heading": "Every jewel", + "heading_italic": "tells a story", "body": "

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

", "button_label": "Read our story", - "image_url": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80" + "visual_caption": "Handcrafted — Rarotonga, Cook Islands", + "image_url": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=900&q=80" } }, "featured": { "type": "featured", "settings": { "eyebrow": "The first drop", - "heading": "Oceania Collection", - "link_label": "View all pieces" + "heading": "Oceania", + "heading_italic": "Collection", + "link_label": "View the full collection" }, "blocks": { "f1": { @@ -148,9 +147,19 @@ "price": "$760", "image_url": "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80" } + }, + "f5": { + "type": "piece", + "settings": { + "title": "Atoll Signet", + "region": "Oceania", + "badge": "One of a kind", + "price": "$1,880", + "image_url": "https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=900&q=80" + } } }, - "block_order": ["f1", "f2", "f3", "f4"] + "block_order": ["f1", "f2", "f3", "f4", "f5"] }, "story_artisans": { "type": "story", @@ -158,17 +167,51 @@ "media_position": "right", "dark": true, "eyebrow": "The makers", - "heading": "Meet the artisans", + "heading": "Meet the", + "heading_italic": "artisans", "body": "

Behind every treasure is a person and a place. We put their names, their cities and their craft at the heart of the story — because you're not just collecting jewellery, you're collecting the world.

", "button_label": "Meet the makers", - "image_url": "https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&w=1600&q=80" + "visual_caption": "Master goldsmith — Ubud, Bali", + "image_url": "https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=900&q=80" } }, + "promises": { + "type": "promises", + "settings": { + "eyebrow": "The Odyssey standard" + }, + "blocks": { + "p1": { + "type": "promise", + "settings": { + "title": "One of a kind", + "text": "Every piece is unique. When it's gone, it's gone forever." + } + }, + "p2": { + "type": "promise", + "settings": { + "title": "Artisan made", + "text": "Crafted by master makers in their homeland, never mass-produced." + } + }, + "p3": { + "type": "promise", + "settings": { + "title": "Worldwide delivery", + "text": "Complimentary, fully insured shipping across the globe." + } + } + }, + "block_order": ["p1", "p2", "p3"] + }, "cta": { "type": "cta-banner", "settings": { "eyebrow": "The odyssey begins", - "heading": "Begin your collection", + "heading": "Begin your", + "heading_italic": "collection", "subheading": "The first expedition has landed. Claim a piece of Oceania before it's gone forever.", "button_label": "Shop the first drop", "overlay_opacity": 45, @@ -178,11 +221,12 @@ }, "order": [ "hero", - "promises", + "marquee", "regions", "story", "featured", "story_artisans", + "promises", "cta" ] } From fcf26a9fe70a4ce33d0a35275a0e9ec55a42c74b Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 21:30:43 +0200 Subject: [PATCH 03/25] Update --- sections/story.liquid | 313 +++++++++++++++++++++++++++++++++++------- templates/index.json | 26 +++- 2 files changed, 285 insertions(+), 54 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index 01d7db8a3..afb4f4fdd 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -1,7 +1,10 @@ {% comment %} - Editorial story section with layered dual imagery: a main portrait image - framed by an offset hairline border, with a smaller overlapping image. - Content column carries an eyebrow, italic-accent heading, body and link. + Editorial "journal chapter" story section. + + Full-bleed with generous internal padding. A giant ghost chapter numeral + sits behind the layout; a vertical meta label runs along the visual; + the imagery pairs a jewel with the place it came from (main + inset); + the content column closes with an optional hairline stats row. {% endcomment %} {% liquid @@ -14,20 +17,36 @@ if section.settings.image_2 != blank assign img_alt = section.settings.image_2 | image_url: width: 900 endif + + assign has_stats = false + if section.settings.stat_1_value != blank or section.settings.stat_2_value != blank or section.settings.stat_3_value != blank + assign has_stats = true + endif %} -
-
+
+ {% if section.settings.chapter != blank %} + + {% endif %} + +
+ {% if section.settings.vertical_label != blank %} + {{ section.settings.vertical_label }} + {% endif %} + +
{{ section.settings.heading | escape }}
+ {% if img_alt != blank %}
- +
{% endif %} + {% if section.settings.visual_caption != blank %} {{ section.settings.visual_caption }} {% endif %} @@ -37,17 +56,43 @@ {% if section.settings.eyebrow != blank %}

{{ section.settings.eyebrow }}

{% endif %} +

{{ section.settings.heading }} {% if section.settings.heading_italic != blank %} {{ section.settings.heading_italic }} {% endif %}

+ {% if section.settings.body != blank %}
{{ section.settings.body }}
{% endif %} + + {% if has_stats %} +
+ {% if section.settings.stat_1_value != blank %} +
+ {{ section.settings.stat_1_value }} + {{ section.settings.stat_1_label }} +
+ {% endif %} + {% if section.settings.stat_2_value != blank %} +
+ {{ section.settings.stat_2_value }} + {{ section.settings.stat_2_label }} +
+ {% endif %} + {% if section.settings.stat_3_value != blank %} +
+ {{ section.settings.stat_3_value }} + {{ section.settings.stat_3_label }} +
+ {% endif %} +
+ {% endif %} + {% if section.settings.button_label != blank %} - + {{ section.settings.button_label }} {% endif %} @@ -56,39 +101,96 @@
{% stylesheet %} - .story__grid { + .story { + position: relative; + overflow: hidden; + } + + /* Giant ghost chapter numeral */ + .story__ghost { + position: absolute; + top: 0.02em; + right: 2vw; + font-family: var(--font-heading--family); + font-style: italic; + font-size: clamp(14rem, 30vw, 34rem); + line-height: 0.8; + color: var(--color-foreground); + opacity: 0.045; + pointer-events: none; + user-select: none; + z-index: 0; + } + .story--media-right .story__ghost { + right: auto; + left: 2vw; + } + .on-dark .story__ghost { + color: var(--color-contrast); + opacity: 0.05; + } + + .story__inner { + position: relative; + z-index: 1; display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(12, 1fr); + gap: var(--space-md); align-items: center; - gap: clamp(2.5rem, 6vw, 7rem); - } - .story--media-right .story__visual { - order: 2; + padding-inline: var(--page-inline); } .story__visual { + grid-column: 1 / span 6; position: relative; - padding: 2rem 2.5rem 3.5rem 0; + padding: 1.5rem 3.5rem 4.5rem 2.75rem; + } + .story__content { + grid-column: 8 / span 5; } .story--media-right .story__visual { - padding: 2rem 0 3.5rem 2.5rem; + grid-column: 7 / span 6; + order: 2; + padding: 1.5rem 2.75rem 4.5rem 3.5rem; + } + .story--media-right .story__content { + grid-column: 1 / span 5; + order: 1; + } + + /* Vertical meta label along the visual's outer edge */ + .story__vertical { + position: absolute; + top: 1.5rem; + left: 0.5rem; + writing-mode: vertical-rl; + transform: rotate(180deg); + letter-spacing: 3px; + color: var(--color-foreground-50); + } + .story--media-right .story__vertical { + left: auto; + right: 0.5rem; + transform: none; + } + .on-dark .story__vertical { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); } - /* Offset hairline frame behind the main image */ + /* Offset hairline frame */ .story__frame { position: absolute; - inset: 0 0.5rem 2rem 1.5rem; - border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); - transform: translate(1.25rem, 1.25rem); + inset: 0 2rem 3rem 1.25rem; + border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); + transform: translate(1.5rem, 1.5rem); pointer-events: none; } .story--media-right .story__frame { - inset: 0 1.5rem 2rem 0.5rem; - transform: translate(-1.25rem, 1.25rem); + inset: 0 1.25rem 3rem 2rem; + transform: translate(-1.5rem, 1.5rem); } .story__main { - position: relative; overflow: hidden; } .story__main img { @@ -96,41 +198,46 @@ height: auto; aspect-ratio: 4 / 5; object-fit: cover; + transition: transform 1.6s var(--ease); + } + .story__visual:hover .story__main img { + transform: scale(1.04); } + /* Inset: the place the jewel came from */ .story__inset { position: absolute; - right: -0.5rem; - bottom: 0; - width: 38%; - box-shadow: 0 30px 60px -30px rgba(10, 22, 40, 0.55); - outline: 6px solid var(--color-background); + right: 0; + bottom: 1.25rem; + width: 46%; + outline: 8px solid var(--color-background); + box-shadow: 0 34px 70px -34px rgba(10, 22, 40, 0.6); } .on-dark .story__inset { outline-color: var(--color-navy); } .story--media-right .story__inset { right: auto; - left: -0.5rem; + left: 0; } .story__inset img { width: 100%; height: auto; - aspect-ratio: 4 / 5; + aspect-ratio: 5 / 4; object-fit: cover; } .story__caption { position: absolute; - left: 0; - bottom: 0.9rem; + left: 2.75rem; + bottom: 0.75rem; color: var(--color-foreground-50); } - .on-dark .story__caption { - color: color-mix(in srgb, var(--color-contrast) 60%, transparent); - } .story--media-right .story__caption { - left: 2.5rem; + left: 3.5rem; + } + .on-dark .story__caption { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); } .story__content { @@ -138,37 +245,88 @@ flex-direction: column; align-items: flex-start; gap: var(--space-md); - max-width: 32rem; } .story__heading { font-weight: 400; } .story__heading em { display: block; + padding-left: 1.5em; } .story__body { color: var(--color-foreground-50); font-size: var(--text-lg); font-weight: 300; line-height: 1.75; + max-width: 30rem; } .on-dark .story__body { color: color-mix(in srgb, var(--color-contrast) 78%, transparent); } + + /* Stats ledger row */ + .story__stats { + display: flex; + gap: var(--space-lg); + border-top: 1px solid var(--color-line); + padding-top: var(--space-md); + margin-top: var(--space-2xs); + width: 100%; + } + .on-dark .story__stats { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .story__stat { + display: flex; + flex-direction: column; + gap: 0.35rem; + } + .story__stat + .story__stat { + padding-left: var(--space-lg); + border-left: 1px solid var(--color-line); + } + .on-dark .story__stat + .story__stat { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .story__stat-value { + font-family: var(--font-heading--family); + font-size: var(--text-2xl); + line-height: 1; + } + .story__stat .meta-label { + color: var(--color-foreground-50); + } + .on-dark .story__stat .meta-label { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); + } + .story__link { margin-top: var(--space-2xs); } - @media (max-width: 749px) { - .story__grid { - grid-template-columns: 1fr; - gap: var(--space-lg); - } + @media (max-width: 989px) { + .story__visual, .story--media-right .story__visual { + grid-column: 1 / -1; order: 0; + padding: 1rem 2rem 3.5rem 1.5rem; + } + .story__content, + .story--media-right .story__content { + grid-column: 1 / -1; + order: 1; + } + .story__vertical { + display: none; } - .story__content { - max-width: none; + .story__ghost { + font-size: clamp(10rem, 34vw, 16rem); + } + .story__caption { + left: 1.5rem; + } + .story--media-right .story__caption { + left: 2rem; } } {% endstylesheet %} @@ -177,6 +335,23 @@ { "name": "Story", "settings": [ + { + "type": "header", + "content": "Chapter" + }, + { + "type": "text", + "id": "chapter", + "label": "Ghost numeral", + "info": "Oversized numeral rendered behind the layout.", + "default": "01" + }, + { + "type": "text", + "id": "vertical_label", + "label": "Vertical label", + "default": "The Odyssey Journal — Chapter 01" + }, { "type": "header", "content": "Visual" @@ -184,30 +359,30 @@ { "type": "image_picker", "id": "image", - "label": "Main image" + "label": "Main image (the jewel)" }, { "type": "text", "id": "image_url", "label": "Main image URL (fallback)", - "default": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80" + "default": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1600&q=80" }, { "type": "image_picker", "id": "image_2", - "label": "Inset image" + "label": "Inset image (the place)" }, { "type": "text", "id": "image_2_url", "label": "Inset image URL (fallback)", - "default": "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=900&q=80" + "default": "https://images.unsplash.com/photo-1468413253725-0d5181091126?auto=format&fit=crop&w=900&q=80" }, { "type": "text", "id": "visual_caption", "label": "Caption", - "default": "Handcrafted — Rarotonga, Cook Islands" + "default": "Gold work — hand finished, one of one" }, { "type": "select", @@ -253,6 +428,48 @@ "label": "Body", "default": "

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

" }, + { + "type": "header", + "content": "Stats" + }, + { + "type": "text", + "id": "stat_1_value", + "label": "Stat 1 value", + "default": "07" + }, + { + "type": "text", + "id": "stat_1_label", + "label": "Stat 1 label", + "default": "Regions" + }, + { + "type": "text", + "id": "stat_2_value", + "label": "Stat 2 value", + "default": "1/1" + }, + { + "type": "text", + "id": "stat_2_label", + "label": "Stat 2 label", + "default": "Every piece unique" + }, + { + "type": "text", + "id": "stat_3_value", + "label": "Stat 3 value" + }, + { + "type": "text", + "id": "stat_3_label", + "label": "Stat 3 label" + }, + { + "type": "header", + "content": "Link" + }, { "type": "text", "id": "button_label", diff --git a/templates/index.json b/templates/index.json index e252f1442..71bab3dca 100644 --- a/templates/index.json +++ b/templates/index.json @@ -89,14 +89,22 @@ "settings": { "media_position": "left", "dark": false, + "chapter": "01", + "vertical_label": "The Odyssey Journal — Chapter 01", "eyebrow": "Our philosophy", "heading": "Every jewel", "heading_italic": "tells a story", "body": "

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

", + "stat_1_value": "07", + "stat_1_label": "Regions to explore", + "stat_2_value": "1/1", + "stat_2_label": "Every piece unique", + "stat_3_value": "200", + "stat_3_label": "Pieces in first drop", "button_label": "Read our story", - "visual_caption": "Handcrafted — Rarotonga, Cook Islands", - "image_url": "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1600&q=80", - "image_2_url": "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=900&q=80" + "visual_caption": "Gold work — hand finished, one of one", + "image_url": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1468413253725-0d5181091126?auto=format&fit=crop&w=900&q=80" } }, "featured": { @@ -166,14 +174,20 @@ "settings": { "media_position": "right", "dark": true, + "chapter": "02", + "vertical_label": "The Odyssey Journal — Chapter 02", "eyebrow": "The makers", "heading": "Meet the", "heading_italic": "artisans", "body": "

Behind every treasure is a person and a place. We put their names, their cities and their craft at the heart of the story — because you're not just collecting jewellery, you're collecting the world.

", + "stat_1_value": "12", + "stat_1_label": "Master artisans", + "stat_2_value": "05", + "stat_2_label": "Islands of Oceania", "button_label": "Meet the makers", - "visual_caption": "Master goldsmith — Ubud, Bali", - "image_url": "https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&w=1600&q=80", - "image_2_url": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=900&q=80" + "visual_caption": "Layered gold — worn the island way", + "image_url": "https://images.unsplash.com/photo-1599459183200-59c7687a0275?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80" } }, "promises": { From 0d8898f68f9bf3543ef96381b32034a91df9883a Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 21:33:48 +0200 Subject: [PATCH 04/25] Update story.liquid --- sections/story.liquid | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index afb4f4fdd..89e0e48e8 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -227,14 +227,19 @@ object-fit: cover; } + /* + Caption sits inside the hairline frame, just above its bottom edge. + Frame bottom line lands 1.5rem from the visual's bottom (3rem inset + minus 1.5rem translate); frame left edge lands at 2.75rem. + */ .story__caption { position: absolute; - left: 2.75rem; - bottom: 0.75rem; + left: 4.25rem; + bottom: 2.6rem; color: var(--color-foreground-50); } .story--media-right .story__caption { - left: 3.5rem; + left: 2rem; } .on-dark .story__caption { color: color-mix(in srgb, var(--color-contrast) 55%, transparent); From 2794b64176e36a038ffd0841735b1b68305340b1 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 21:44:07 +0200 Subject: [PATCH 05/25] Mobile --- sections/cta-banner.liquid | 16 ++++++++++ sections/featured.liquid | 18 ++++++++++- sections/footer.liquid | 15 +++++++-- sections/header.liquid | 17 ++++++++--- sections/hero.liquid | 23 +++++++++++++- sections/marquee.liquid | 12 ++++++++ sections/promises.liquid | 14 ++++++++- sections/regions.liquid | 18 +++++++++++ sections/story.liquid | 57 +++++++++++++++++++++++++++++------ snippets/css-variables.liquid | 7 +++++ 10 files changed, 178 insertions(+), 19 deletions(-) diff --git a/sections/cta-banner.liquid b/sections/cta-banner.liquid index 0ea84bbbd..123bf22e2 100644 --- a/sections/cta-banner.liquid +++ b/sections/cta-banner.liquid @@ -96,6 +96,22 @@ font-weight: 300; color: color-mix(in srgb, var(--color-contrast) 85%, transparent); } + + @media (max-width: 749px) { + .cta-banner { + min-height: 68svh; + } + .cta-banner__frame { + inset: 0.9rem; + } + .cta-banner__content { + padding-block: var(--space-2xl); + gap: var(--space-sm); + } + .cta-banner__sub { + font-size: var(--text-base); + } + } {% endstylesheet %} {% schema %} diff --git a/sections/featured.liquid b/sections/featured.liquid index b2aeee08e..dedb535d8 100644 --- a/sections/featured.liquid +++ b/sections/featured.liquid @@ -142,11 +142,27 @@ } .piece-card { - flex: 0 0 clamp(16rem, 24vw, 22rem); + flex: 0 0 clamp(15rem, 24vw, 22rem); scroll-snap-align: start; text-decoration: none; color: var(--color-foreground); } + + @media (max-width: 749px) { + /* Touch-first: swipe is the navigation, cards show a peek of the next */ + .featured__controls { + display: none; + } + .piece-card { + flex-basis: 76vw; + } + .featured__head { + margin-bottom: var(--space-md); + } + .featured__progress { + margin-top: var(--space-md); + } + } .piece-card__media { position: relative; overflow: hidden; diff --git a/sections/footer.liquid b/sections/footer.liquid index 4d1a73c17..e2269f1e3 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -190,15 +190,17 @@ padding-left: 0.4rem; } - /* Oversized wordmark */ + /* Oversized wordmark — scales fluidly so it never overflows small screens */ .site-footer__giant { font-family: var(--font-heading--family); - font-size: clamp(2.75rem, 11vw, 10rem); + font-size: clamp(1.9rem, 10.5vw, 10rem); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; white-space: nowrap; + max-width: 100%; + overflow: hidden; color: color-mix(in srgb, var(--color-contrast) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 15%, transparent); padding-bottom: var(--space-lg); @@ -228,10 +230,19 @@ } @media (max-width: 989px) { + .site-footer__inner { + padding-top: var(--space-xl); + gap: var(--space-xl); + } .site-footer__top { grid-template-columns: 1fr; gap: var(--space-xl); } + .site-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: var(--space-sm); + } } {% endstylesheet %} diff --git a/sections/header.liquid b/sections/header.liquid index 5a587314b..11ea781c1 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -337,7 +337,7 @@ color: var(--color-contrast); display: flex; flex-direction: column; - padding: var(--space-md) var(--page-margin) var(--space-lg); + padding: var(--space-md) var(--page-margin) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); @@ -425,12 +425,19 @@ display: flex; } .hdr__wordmark { - font-size: 1.15rem; - letter-spacing: 0.32em; - text-indent: 0.32em; + font-size: 1.05rem; + letter-spacing: 0.26em; + text-indent: 0.26em; + } + .hdr__announcement { + font-size: 0.58rem; + letter-spacing: 2px; + } + .hdr__side--right { + gap: 1.1rem; } :root { - --hdr-bar-height: 4.5rem; + --hdr-bar-height: 4.25rem; } } {% endstylesheet %} diff --git a/sections/hero.liquid b/sections/hero.liquid index ca7b1593a..8558f1e0e 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -173,11 +173,32 @@ } @media (max-width: 749px) { + .hero { + min-height: 96svh; + } + .hero__content { + gap: var(--space-sm); + padding-bottom: var(--space-lg); + } + .hero__sub { + font-size: var(--text-base); + } .hero__actions { gap: var(--space-md); + margin-top: var(--space-2xs); + } + .hero__actions .button { + padding: 1rem 1.9rem; } .hero__base { - padding-block: 1.1rem; + flex-wrap: wrap; + row-gap: 0.6rem; + padding-block: 1rem; + margin-top: var(--space-md); + } + .hero__base .meta-label { + font-size: 0.6rem; + letter-spacing: 2px; } } {% endstylesheet %} diff --git a/sections/marquee.liquid b/sections/marquee.liquid index 3bbfb964e..7a9479d54 100644 --- a/sections/marquee.liquid +++ b/sections/marquee.liquid @@ -73,6 +73,18 @@ animation: none; } } + + @media (max-width: 749px) { + .marquee { + padding-block: 1rem; + } + .marquee__item { + padding-inline: 1.5rem; + } + .marquee__item--serif { + font-size: var(--text-xl); + } + } {% endstylesheet %} {% schema %} diff --git a/sections/promises.liquid b/sections/promises.liquid index dfe31be41..28df57a3f 100644 --- a/sections/promises.liquid +++ b/sections/promises.liquid @@ -75,11 +75,23 @@ } @media (max-width: 749px) { + .promises__eyebrow { + margin-bottom: var(--space-lg); + } + .promise { + padding: var(--space-md) 0 0; + } .promise + .promise { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-line); - margin-top: var(--space-lg); + margin-top: var(--space-md); + } + .on-dark .promise + .promise { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise__title { + font-size: var(--text-xl); } } {% endstylesheet %} diff --git a/sections/regions.liquid b/sections/regions.liquid index 2615a2d84..8313d856d 100644 --- a/sections/regions.liquid +++ b/sections/regions.liquid @@ -214,6 +214,24 @@ .regions__grid { gap: var(--space-lg); } + .regions__head { + margin-bottom: var(--space-lg); + } + .region-card__body { + padding: 1.25rem; + } + .region-card__index { + top: 1.1rem; + left: 1.25rem; + } + .region-card__status { + top: 1rem; + right: 1rem; + } + .region-card__foot { + flex-wrap: wrap; + gap: 0.5rem; + } } {% endstylesheet %} diff --git a/sections/story.liquid b/sections/story.liquid index 89e0e48e8..d8dfa7b05 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -239,7 +239,8 @@ color: var(--color-foreground-50); } .story--media-right .story__caption { - left: 2rem; + left: auto; + right: 4.25rem; } .on-dark .story__caption { color: color-mix(in srgb, var(--color-contrast) 55%, transparent); @@ -309,29 +310,67 @@ margin-top: var(--space-2xs); } + /* + Mobile: a dedicated composition rather than a squeezed desktop one. + The decorative frame and vertical label step aside; the inset image + overlaps the main image's bottom-right corner; the caption flows + statically beneath the image on the left, clear of everything. + */ @media (max-width: 989px) { + .story__inner { + gap: var(--space-lg); + } .story__visual, .story--media-right .story__visual { grid-column: 1 / -1; order: 0; - padding: 1rem 2rem 3.5rem 1.5rem; + padding: 0 0 3.5rem; } .story__content, .story--media-right .story__content { grid-column: 1 / -1; order: 1; } - .story__vertical { + + .story__vertical, + .story__frame { display: none; } - .story__ghost { - font-size: clamp(10rem, 34vw, 16rem); - } - .story__caption { - left: 1.5rem; + + .story__inset, + .story--media-right .story__inset { + width: 44%; + right: 0; + left: auto; + bottom: 0; + outline-width: 5px; } + + .story__caption, .story--media-right .story__caption { - left: 2rem; + position: static; + display: block; + max-width: 52%; + margin-top: 0.85rem; + } + + .story__heading em { + padding-left: 0.75em; + } + + .story__stats { + flex-wrap: wrap; + row-gap: var(--space-sm); + } + + .story__ghost { + top: 0; + right: 0; + font-size: clamp(8rem, 32vw, 14rem); + } + .story--media-right .story__ghost { + left: 0; + right: auto; } } {% endstylesheet %} diff --git a/snippets/css-variables.liquid b/snippets/css-variables.liquid index f487713d5..c87e9c65c 100644 --- a/snippets/css-variables.liquid +++ b/snippets/css-variables.liquid @@ -63,4 +63,11 @@ --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.6s; } + + /* Tighter gutters on phones (never wider than the desktop setting) */ + @media (max-width: 749px) { + :root { + --page-margin: {{ settings.min_page_margin | at_most: 20 }}px; + } + } {% endstyle %} From 562ab34756c5c7ecb9abf2b3a00068cee92739ca Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:10:53 +0200 Subject: [PATCH 06/25] optimized --- assets/critical.css | 12 ++++++++++++ sections/featured.liquid | 2 ++ sections/header.liquid | 31 ++++++++++++++++++++++++++----- sections/regions.liquid | 4 +++- sections/story.liquid | 8 +++++++- 5 files changed, 50 insertions(+), 7 deletions(-) diff --git a/assets/critical.css b/assets/critical.css index a53d6f9dd..e9e6932ee 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -13,6 +13,15 @@ body { min-height: 100svh; } +/* + * Horizontal overflow safety net. `clip` (unlike `hidden`) does not create + * a scroll container, so position: sticky keeps working. + */ +html, +body { + overflow-x: clip; +} + html:has(dialog[scroll-lock][open], details[scroll-lock][open]) { overflow: hidden; } @@ -316,6 +325,9 @@ button.button { /* Child elements, by default, are constrained to the central column of the grid. */ .shopify-section > * { grid-column: 2; + /* Prevent content-based minimum sizes from blowing out the grid tracks */ + min-width: 0; + max-width: 100%; } /* Child elements that use the full-width utility class span the entire viewport. */ diff --git a/sections/featured.liquid b/sections/featured.liquid index dedb535d8..80b9377c0 100644 --- a/sections/featured.liquid +++ b/sections/featured.liquid @@ -127,9 +127,11 @@ .featured__rail-wrap { position: relative; + min-width: 0; } .featured__rail { display: flex; + min-width: 0; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; diff --git a/sections/header.liquid b/sections/header.liquid index 11ea781c1..a26a2c9a1 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -131,6 +131,7 @@
{{ section.settings.menu_overlay_footer }} + Search
@@ -170,7 +171,7 @@ .hdr__bar { position: relative; display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--hdr-bar-height); padding-inline: var(--page-inline); @@ -416,6 +417,12 @@ justify-content: space-between; color: color-mix(in srgb, var(--color-contrast) 65%, transparent); } + .menu-overlay__search { + color: var(--color-contrast); + text-decoration: none; + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + padding-bottom: 0.25rem; + } @media (max-width: 989px) { .hdr__nav { @@ -425,21 +432,35 @@ display: flex; } .hdr__wordmark { - font-size: 1.05rem; - letter-spacing: 0.26em; - text-indent: 0.26em; + /* Scales with viewport so the brand can never overflow narrow phones */ + font-size: clamp(0.8rem, 3.4vw, 1.05rem); + letter-spacing: 0.22em; + text-indent: 0.22em; + } + .hdr__logo { + max-width: 42vw; } .hdr__announcement { font-size: 0.58rem; letter-spacing: 2px; } .hdr__side--right { - gap: 1.1rem; + gap: 1rem; + } + .hdr__bar { + gap: var(--space-sm); } :root { --hdr-bar-height: 4.25rem; } } + + @media (max-width: 479px) { + /* Very narrow phones: search lives in the menu; keep the bar airy */ + .hdr__icon[aria-label="Search"] { + display: none; + } + } {% endstylesheet %} {% javascript %} diff --git a/sections/regions.liquid b/sections/regions.liquid index 8313d856d..f4b11b1bd 100644 --- a/sections/regions.liquid +++ b/sections/regions.liquid @@ -90,13 +90,15 @@ .regions__grid { display: grid; - grid-template-columns: repeat(12, 1fr); + /* minmax(0, 1fr): image intrinsic widths must never expand the tracks */ + grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); align-items: start; } .region-card { display: block; + min-width: 0; text-decoration: none; color: var(--color-foreground); } diff --git a/sections/story.liquid b/sections/story.liquid index d8dfa7b05..85af4eb2a 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -134,12 +134,18 @@ position: relative; z-index: 1; display: grid; - grid-template-columns: repeat(12, 1fr); + /* minmax(0, 1fr): image intrinsic widths must never expand the tracks */ + grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); align-items: center; padding-inline: var(--page-inline); } + .story__visual, + .story__content { + min-width: 0; + } + .story__visual { grid-column: 1 / span 6; position: relative; From 230dfcf2fbc8353a76f06075e18b46b3e1fb2033 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:26:23 +0200 Subject: [PATCH 07/25] Update --- .preview/index.html | 331 +++++++++ .preview/sections.css | 1465 ++++++++++++++++++++++++++++++++++++++ assets/critical.css | 52 +- sections/featured.liquid | 19 +- sections/footer.liquid | 29 +- sections/promises.liquid | 8 + sections/regions.liquid | 45 +- sections/story.liquid | 72 +- 8 files changed, 1965 insertions(+), 56 deletions(-) create mode 100644 .preview/index.html create mode 100644 .preview/sections.css diff --git a/.preview/index.html b/.preview/index.html new file mode 100644 index 000000000..4fb655aad --- /dev/null +++ b/.preview/index.html @@ -0,0 +1,331 @@ + + + + + +OJ preview harness + + + + + + + + + + +
+
+

Complimentary worldwide shipping — Every jewel tells a story

+
+
+ + +
+ Odyssey Jewels +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+

Expedition N° 001 — Oceania

+

Travel the World, Collect the World

+

Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.

+
+ Explore the collection + Our story +
+
+
+ Scroll to explore + 17.6797° S, 149.4068° W — South Pacific +
+
+
+ +
+
+
+
+ Oceania✦ + Every jewel tells a story✦ + Asia✦ + One of a kind✦ + The Founders Collection✦ + Artisan made✦ +
+ +
+
+
+ + + +
+
+ 01 +
+
+ The Odyssey Journal — Chapter 01 +
+
+
+ Gold work — hand finished, one of one +
+
+

Our philosophy

+

Every jewel tells a story

+

We travel to the far corners of the world to work directly with master artisans. Each piece we bring home is one of a kind — shaped by the hands, heritage and horizon of the place it came from. When it's gone, it's gone.

+
+
07Regions to explore
+
1/1Every piece unique
+
200Pieces in first drop
+
+ Read our story +
+
+
+
+ + + +
+
+ 02 +
+
+ The Odyssey Journal — Chapter 02 +
+
+
+ Layered gold — worn the island way +
+
+

The makers

+

Meet the artisans

+

Behind every treasure is a person and a place. We put their names, their cities and their craft at the heart of the story — because you're not just collecting jewellery, you're collecting the world.

+
+
12Master artisans
+
05Islands of Oceania
+
+ Meet the makers +
+
+
+
+ +
+
+

The Odyssey standard

+
+
01

One of a kind

Every piece is unique. When it's gone, it's gone forever.

+
02

Artisan made

Crafted by master makers in their homeland, never mass-produced.

+
03

Worldwide delivery

Complimentary, fully insured shipping across the globe.

+
+
+
+ +
+
+
+ +
+
+
+
+

The odyssey begins

+

Begin your collection

+

The first expedition has landed. Claim a piece of Oceania before it's gone forever.

+ Shop the first drop +
+
+
+ + + + + diff --git a/.preview/sections.css b/.preview/sections.css new file mode 100644 index 000000000..25e82e7c7 --- /dev/null +++ b/.preview/sections.css @@ -0,0 +1,1465 @@ +/* ===== snippets/image.liquid ===== */ + .image { + display: block; + position: relative; + overflow: hidden; + width: 100%; + height: auto; + } + + .image > img { + width: 100%; + height: auto; + } +/* ===== sections/header.liquid ===== */ + :root { + --hdr-bar-height: 5.25rem; + } + + .hdr { + position: relative; + width: 100%; + color: var(--color-foreground); + transition: color var(--duration) var(--ease); + } + + /* Announcement: full-bleed navy line */ + .hdr__announcement { + position: relative; + z-index: 2; + height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.65rem; + font-weight: 600; + letter-spacing: 3px; + text-transform: uppercase; + background: var(--color-navy); + color: var(--color-contrast); + padding-inline: var(--page-inline); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* Bar: backdrop lives on the bar itself so it always paints edge to edge */ + .hdr__bar { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + height: var(--hdr-bar-height); + padding-inline: var(--page-inline); + gap: var(--space-md); + background: color-mix(in srgb, var(--color-background) 94%, transparent); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--color-line); + transition: + background-color var(--duration) var(--ease), + border-color var(--duration) var(--ease); + } + .hdr[data-scrolled="true"] .hdr__bar { + box-shadow: 0 10px 40px -18px rgba(10, 22, 40, 0.18); + } + + .hdr__side { + display: flex; + align-items: center; + gap: var(--space-md); + } + .hdr__side--right { + justify-content: flex-end; + gap: 1.4rem; + } + + .hdr__nav { + display: flex; + gap: 2.25rem; + } + .hdr__nav-link { + position: relative; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; + text-decoration: none; + color: currentcolor; + padding-block: 0.5rem; + opacity: 0.85; + transition: opacity var(--duration) var(--ease); + } + .hdr__nav-link::after { + content: ""; + position: absolute; + left: 50%; + bottom: 0.15rem; + width: 100%; + height: 1px; + background: currentcolor; + transform: translateX(-50%) scaleX(0); + transition: transform var(--duration) var(--ease); + } + .hdr__nav-link:hover { + opacity: 1; + } + .hdr__nav-link:hover::after { + transform: translateX(-50%) scaleX(1); + } + + .hdr__brand { + position: relative; + text-decoration: none; + color: currentcolor; + text-align: center; + } + .hdr__wordmark { + font-family: var(--font-heading--family); + font-size: 1.45rem; + letter-spacing: 0.42em; + text-indent: 0.42em; /* optically recenters letterspaced caps */ + text-transform: uppercase; + white-space: nowrap; + } + .hdr__logo { + height: auto; + margin-inline: auto; + } + + .hdr__icon { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + color: currentcolor; + background: none; + border: 0; + padding: 0; + cursor: pointer; + opacity: 0.85; + transition: opacity var(--duration) var(--ease); + } + .hdr__icon:hover { + opacity: 1; + } + .hdr__icon svg { + width: 20px; + height: 20px; + stroke-width: 1.25; + } + .hdr__icon--account svg { + width: 20px; + height: 20px; + } + .hdr__cart-count { + position: absolute; + top: -0.45rem; + right: -0.65rem; + font-size: 0.6rem; + font-weight: 700; + font-variant-numeric: tabular-nums; + background: var(--color-accent); + color: var(--color-contrast); + min-width: 1rem; + height: 1rem; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 0.2rem; + } + + /* Burger — two lines, elegant */ + .hdr__burger { + display: none; + flex-direction: column; + justify-content: center; + gap: 7px; + width: 26px; + background: none; + border: 0; + padding: 0; + cursor: pointer; + color: currentcolor; + } + .hdr__burger span { + display: block; + height: 1px; + width: 100%; + background: currentcolor; + transition: transform var(--duration) var(--ease), width var(--duration) var(--ease); + } + .hdr__burger:hover span:last-child { + width: 60%; + } + + /* ---- Overlay (transparent over hero, until scrolled) ---- */ + .hdr--overlay[data-scrolled="false"] { + color: var(--color-contrast); + } + .hdr--overlay[data-scrolled="false"] .hdr__bar { + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border-bottom-color: color-mix(in srgb, var(--color-contrast) 16%, transparent); + } + + /* ---- Full-screen menu ---- */ + .menu-overlay { + position: fixed; + inset: 0; + z-index: 60; + background: var(--color-navy); + color: var(--color-contrast); + display: flex; + flex-direction: column; + padding: var(--space-md) var(--page-margin) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); + opacity: 0; + visibility: hidden; + transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); + } + html.menu-open { + overflow: hidden; + } + html.menu-open .menu-overlay { + opacity: 1; + visibility: visible; + } + + .menu-overlay__head { + display: flex; + align-items: center; + justify-content: space-between; + min-height: var(--hdr-bar-height); + } + .menu-overlay__close { + background: none; + border: 0; + color: currentcolor; + cursor: pointer; + padding: 0.25rem; + opacity: 0.8; + transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .menu-overlay__close:hover { + opacity: 1; + transform: rotate(90deg); + } + + .menu-overlay__nav { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.25rem; + } + .menu-overlay__link { + display: flex; + align-items: baseline; + gap: 1.25rem; + font-family: var(--font-heading--family); + font-size: clamp(2.25rem, 6vw, 4rem); + line-height: 1.25; + text-decoration: none; + color: currentcolor; + padding-block: 0.35rem; + opacity: 0; + transform: translateY(18px); + transition: + opacity 0.7s var(--ease), + transform 0.7s var(--ease), + color 0.4s var(--ease); + transition-delay: calc(var(--i) * 70ms); + } + html.menu-open .menu-overlay__link { + opacity: 1; + transform: translateY(0); + } + .menu-overlay__link:hover { + color: var(--color-accent-soft); + font-style: italic; + } + .menu-overlay__index { + font-family: var(--font-primary--family); + font-size: 0.7rem; + letter-spacing: 2px; + opacity: 0.5; + font-variant-numeric: tabular-nums; + } + + .menu-overlay__foot { + display: flex; + justify-content: space-between; + color: color-mix(in srgb, var(--color-contrast) 65%, transparent); + } + .menu-overlay__search { + color: var(--color-contrast); + text-decoration: none; + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + padding-bottom: 0.25rem; + } + + @media (max-width: 989px) { + .hdr__nav { + display: none; + } + .hdr__burger { + display: flex; + } + .hdr__wordmark { + /* Scales with viewport so the brand can never overflow narrow phones */ + font-size: clamp(0.8rem, 3.4vw, 1.05rem); + letter-spacing: 0.22em; + text-indent: 0.22em; + } + .hdr__logo { + max-width: 42vw; + } + .hdr__announcement { + font-size: 0.58rem; + letter-spacing: 2px; + } + .hdr__side--right { + gap: 1rem; + } + .hdr__bar { + gap: var(--space-sm); + } + :root { + --hdr-bar-height: 4.25rem; + } + } + + @media (max-width: 479px) { + /* Very narrow phones: search lives in the menu; keep the bar airy */ + .hdr__icon[aria-label="Search"] { + display: none; + } + } +/* ===== sections/hero.liquid ===== */ + .hero { + position: relative; + min-height: 100svh; + display: flex; + flex-direction: column; + justify-content: flex-end; + overflow: hidden; + color: var(--color-contrast); + isolation: isolate; + } + .hero__media { + position: absolute; + inset: 0; + z-index: -1; + } + .hero__bg { + width: 100%; + height: 100%; + object-fit: cover; + } + .hero__overlay { + position: absolute; + inset: 0; + background: + linear-gradient(to top, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0.15) 45%, rgba(10, 22, 40, 0.3) 100%), + rgba(10, 22, 40, calc(var(--overlay) / 100)); + } + + .hero__content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-md); + padding-inline: var(--page-inline); + padding-bottom: var(--space-xl); + max-width: 72rem; + } + .hero__eyebrow { + color: var(--color-accent-soft); + } + .hero__heading { + font-size: var(--text-hero); + font-weight: 400; + margin: 0; + } + .hero__heading em { + display: block; + } + .hero__sub { + font-size: var(--text-lg); + font-weight: 300; + letter-spacing: 0.01em; + color: color-mix(in srgb, var(--color-contrast) 85%, transparent); + } + .hero__actions { + display: flex; + align-items: center; + gap: var(--space-lg); + flex-wrap: wrap; + margin-top: var(--space-sm); + } + .hero__text-link { + color: var(--color-contrast); + } + + .hero__base { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + border-top: 1px solid color-mix(in srgb, var(--color-contrast) 22%, transparent); + padding: 1.4rem var(--page-inline); + margin-top: var(--space-lg); + } + .hero__scroll-label { + display: inline-flex; + align-items: center; + gap: 1rem; + } + .hero__scroll-line { + position: relative; + display: inline-block; + width: 3.5rem; + height: 1px; + background: color-mix(in srgb, var(--color-contrast) 30%, transparent); + overflow: hidden; + } + .hero__scroll-line span { + position: absolute; + inset: 0; + background: var(--color-contrast); + animation: hero-line 2.6s var(--ease) infinite; + } + + @keyframes hero-line { + 0% { transform: translateX(-100%); } + 55% { transform: translateX(0); } + 100% { transform: translateX(102%); } + } + + @media (max-width: 749px) { + .hero { + min-height: 96svh; + } + .hero__content { + gap: var(--space-sm); + padding-bottom: var(--space-lg); + } + .hero__sub { + font-size: var(--text-base); + } + .hero__actions { + gap: var(--space-md); + margin-top: var(--space-2xs); + } + .hero__actions .button { + padding: 1rem 1.9rem; + } + .hero__base { + flex-wrap: wrap; + row-gap: 0.6rem; + padding-block: 1rem; + margin-top: var(--space-md); + } + .hero__base .meta-label { + font-size: 0.6rem; + letter-spacing: 2px; + } + } +/* ===== sections/marquee.liquid ===== */ + .marquee { + overflow: hidden; + border-block: 1px solid var(--color-line); + padding-block: 1.4rem; + } + .marquee.on-dark { + border-color: transparent; + } + .marquee__track { + display: flex; + width: max-content; + animation: marquee-scroll var(--speed, 40s) linear infinite; + } + .marquee:hover .marquee__track { + animation-play-state: paused; + } + .marquee__group { + display: flex; + align-items: center; + flex-shrink: 0; + } + .marquee__item { + white-space: nowrap; + padding-inline: 2.5rem; + } + .marquee__item--serif { + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-2xl); + } + .marquee__item--sans { + font-size: var(--text-sm); + font-weight: 500; + letter-spacing: 4px; + text-transform: uppercase; + } + .marquee__sep { + color: var(--color-accent); + font-size: 0.8rem; + } + + @keyframes marquee-scroll { + from { transform: translateX(0); } + to { transform: translateX(-50%); } + } + + @media (prefers-reduced-motion: reduce) { + .marquee__track { + animation: none; + } + } + + @media (max-width: 749px) { + .marquee { + padding-block: 1rem; + } + .marquee__item { + padding-inline: 1.5rem; + } + .marquee__item--serif { + font-size: var(--text-xl); + } + } +/* ===== sections/regions.liquid ===== */ + .regions__head { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--space-lg); + flex-wrap: wrap; + margin-bottom: var(--space-xl); + } + .regions__heading { + margin-top: var(--space-sm); + max-width: 22ch; + } + .regions__all { + margin-bottom: 0.5rem; + } + + .regions__grid { + display: grid; + /* minmax(0, 1fr): image intrinsic widths must never expand the tracks */ + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--space-lg) var(--space-md); + align-items: start; + } + + .region-card { + display: block; + min-width: 0; + text-decoration: none; + color: var(--color-foreground); + } + .region-card:nth-child(3n + 1) { + grid-column: 1 / span 7; + --card-ratio: 7 / 6; + } + .region-card:nth-child(3n + 2) { + grid-column: 9 / span 4; + --card-ratio: 4 / 5; + margin-top: 22%; + } + .region-card:nth-child(3n + 3) { + grid-column: 3 / span 8; + --card-ratio: 16 / 9; + } + + .region-card__media { + position: relative; + overflow: hidden; + aspect-ratio: var(--card-ratio, 4 / 5); + isolation: isolate; + color: var(--color-contrast); + } + .region-card__media img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 1.4s var(--ease); + } + .region-card:hover .region-card__media img { + transform: scale(1.05); + } + .region-card__shade { + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0.05) 50%); + transition: opacity var(--duration) var(--ease); + } + + .region-card__index { + position: absolute; + top: 1.4rem; + left: 1.4rem; + color: var(--color-contrast); + opacity: 0.9; + } + .region-card__status { + position: absolute; + top: 1.25rem; + right: 1.25rem; + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 2px; + text-transform: uppercase; + padding: 0.45rem 0.9rem; + border: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); + } + .region-card:hover .region-card__status { + background-color: var(--color-accent); + border-color: var(--color-accent); + } + + .region-card__body { + position: absolute; + inset: auto 0 0 0; + padding: 1.75rem; + } + .region-card__title { + font-size: var(--text-2xl); + font-weight: 400; + margin: 0; + } + .region-card__subtitle { + margin-top: 0.4rem; + font-size: var(--text-sm); + font-weight: 300; + letter-spacing: 0.02em; + color: color-mix(in srgb, var(--color-contrast) 82%, transparent); + } + + .region-card__foot { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 1rem; + border-bottom: 1px solid var(--color-line); + padding-bottom: 1rem; + } + .region-card__cta { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; + } + .region-card__cta svg { + transition: transform var(--duration) var(--ease); + } + .region-card:hover .region-card__cta svg { + transform: translateX(5px); + } + + @media (max-width: 749px) { + .region-card:nth-child(n) { + grid-column: 1 / -1; + margin-top: 0; + --card-ratio: 4 / 5; + } + .regions__grid { + gap: var(--space-lg); + } + .regions__head { + margin-bottom: var(--space-lg); + } + .region-card__body { + padding: 1.25rem; + } + .region-card__index { + top: 1.1rem; + left: 1.25rem; + } + .region-card__status { + top: 1rem; + right: 1rem; + } + .region-card__foot { + flex-wrap: wrap; + gap: 0.5rem; + } + } +/* ===== sections/story.liquid ===== */ + .story { + position: relative; + overflow: hidden; + } + + /* Giant ghost chapter numeral */ + .story__ghost { + position: absolute; + top: 0.02em; + right: 2vw; + font-family: var(--font-heading--family); + font-style: italic; + font-size: clamp(14rem, 30vw, 34rem); + line-height: 0.8; + color: var(--color-foreground); + opacity: 0.045; + pointer-events: none; + user-select: none; + z-index: 0; + } + .story--media-right .story__ghost { + right: auto; + left: 2vw; + } + .on-dark .story__ghost { + color: var(--color-contrast); + opacity: 0.05; + } + + .story__inner { + position: relative; + z-index: 1; + display: grid; + /* minmax(0, 1fr): image intrinsic widths must never expand the tracks */ + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--space-md); + align-items: center; + padding-inline: var(--page-inline); + } + + .story__visual, + .story__content { + min-width: 0; + } + + .story__visual { + grid-column: 1 / span 6; + position: relative; + padding: 1.5rem 3.5rem 4.5rem 2.75rem; + } + .story__content { + grid-column: 8 / span 5; + } + .story--media-right .story__visual { + grid-column: 7 / span 6; + order: 2; + padding: 1.5rem 2.75rem 4.5rem 3.5rem; + } + .story--media-right .story__content { + grid-column: 1 / span 5; + order: 1; + } + + /* Vertical meta label along the visual's outer edge */ + .story__vertical { + position: absolute; + top: 1.5rem; + left: 0.5rem; + writing-mode: vertical-rl; + transform: rotate(180deg); + letter-spacing: 3px; + color: var(--color-foreground-50); + } + .story--media-right .story__vertical { + left: auto; + right: 0.5rem; + transform: none; + } + .on-dark .story__vertical { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); + } + + /* Offset hairline frame */ + .story__frame { + position: absolute; + inset: 0 2rem 3rem 1.25rem; + border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); + transform: translate(1.5rem, 1.5rem); + pointer-events: none; + } + .story--media-right .story__frame { + inset: 0 1.25rem 3rem 2rem; + transform: translate(-1.5rem, 1.5rem); + } + + .story__main { + overflow: hidden; + } + .story__main img { + width: 100%; + height: auto; + aspect-ratio: 4 / 5; + object-fit: cover; + transition: transform 1.6s var(--ease); + } + .story__visual:hover .story__main img { + transform: scale(1.04); + } + + /* Inset: the place the jewel came from */ + .story__inset { + position: absolute; + right: 0; + bottom: 1.25rem; + width: 46%; + outline: 8px solid var(--color-background); + box-shadow: 0 34px 70px -34px rgba(10, 22, 40, 0.6); + } + .on-dark .story__inset { + outline-color: var(--color-navy); + } + .story--media-right .story__inset { + right: auto; + left: 0; + } + .story__inset img { + width: 100%; + height: auto; + aspect-ratio: 5 / 4; + object-fit: cover; + } + + /* + Caption sits inside the hairline frame, just above its bottom edge. + Frame bottom line lands 1.5rem from the visual's bottom (3rem inset + minus 1.5rem translate); frame left edge lands at 2.75rem. + */ + .story__caption { + position: absolute; + left: 4.25rem; + bottom: 2.6rem; + color: var(--color-foreground-50); + } + .story--media-right .story__caption { + left: auto; + right: 4.25rem; + } + .on-dark .story__caption { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); + } + + .story__content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-md); + } + .story__heading { + font-weight: 400; + } + .story__heading em { + display: block; + padding-left: 1.5em; + } + .story__body { + color: var(--color-foreground-50); + font-size: var(--text-lg); + font-weight: 300; + line-height: 1.75; + max-width: 30rem; + } + .on-dark .story__body { + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); + } + + /* Stats ledger row */ + .story__stats { + display: flex; + gap: var(--space-lg); + border-top: 1px solid var(--color-line); + padding-top: var(--space-md); + margin-top: var(--space-2xs); + width: 100%; + } + .on-dark .story__stats { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .story__stat { + display: flex; + flex-direction: column; + gap: 0.35rem; + } + .story__stat + .story__stat { + padding-left: var(--space-lg); + border-left: 1px solid var(--color-line); + } + .on-dark .story__stat + .story__stat { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .story__stat-value { + font-family: var(--font-heading--family); + font-size: var(--text-2xl); + line-height: 1; + } + .story__stat .meta-label { + color: var(--color-foreground-50); + } + .on-dark .story__stat .meta-label { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); + } + + .story__link { + margin-top: var(--space-2xs); + } + + /* + Mobile: a dedicated composition rather than a squeezed desktop one. + The decorative frame and vertical label step aside; the inset image + overlaps the main image's bottom-right corner; the caption flows + statically beneath the image on the left, clear of everything. + */ + @media (max-width: 989px) { + .story__inner { + gap: var(--space-lg); + } + .story__visual, + .story--media-right .story__visual { + grid-column: 1 / -1; + order: 0; + padding: 0 0 3.5rem; + } + .story__content, + .story--media-right .story__content { + grid-column: 1 / -1; + order: 1; + } + + .story__vertical, + .story__frame { + display: none; + } + + .story__inset, + .story--media-right .story__inset { + width: 44%; + right: 0; + left: auto; + bottom: 0; + outline-width: 5px; + } + + .story__caption, + .story--media-right .story__caption { + position: static; + display: block; + max-width: 52%; + margin-top: 0.85rem; + } + + .story__heading em { + padding-left: 0.75em; + } + + .story__stats { + flex-wrap: wrap; + row-gap: var(--space-sm); + } + + .story__ghost { + top: 0; + right: 0; + font-size: clamp(8rem, 32vw, 14rem); + } + .story--media-right .story__ghost { + left: 0; + right: auto; + } + } +/* ===== sections/featured.liquid ===== */ + .featured__head { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--space-lg); + flex-wrap: wrap; + margin-bottom: var(--space-lg); + } + .featured__heading { + margin-top: var(--space-sm); + font-weight: 400; + } + + .featured__controls { + display: flex; + gap: 0.75rem; + } + .featured__arrow { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3.25rem; + height: 3.25rem; + border: 1px solid var(--color-line); + border-radius: 999px; + background: transparent; + color: var(--color-foreground); + cursor: pointer; + transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); + } + .featured__arrow:hover { + background-color: var(--color-navy); + border-color: var(--color-navy); + color: var(--color-contrast); + } + + .featured__rail-wrap { + position: relative; + min-width: 0; + } + .featured__rail { + display: flex; + min-width: 0; + gap: var(--space-md); + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-padding-inline: var(--page-inline); + padding-inline: var(--page-inline); + scrollbar-width: none; + } + .featured__rail::-webkit-scrollbar { + display: none; + } + + .piece-card { + flex: 0 0 clamp(15rem, 24vw, 22rem); + scroll-snap-align: start; + text-decoration: none; + color: var(--color-foreground); + } + + @media (max-width: 749px) { + /* Touch-first: swipe is the navigation, cards show a peek of the next */ + .featured__controls { + display: none; + } + .piece-card { + flex-basis: 76vw; + } + .featured__head { + margin-bottom: var(--space-md); + } + .featured__progress { + margin-top: var(--space-md); + } + } + .piece-card__media { + position: relative; + overflow: hidden; + aspect-ratio: 4 / 5; + background: var(--color-foreground-12); + margin-bottom: var(--space-sm); + } + .piece-card__media img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 1.2s var(--ease); + } + .piece-card:hover .piece-card__media img { + transform: scale(1.05); + } + .piece-card__badge { + position: absolute; + top: 1rem; + left: 1rem; + background: color-mix(in srgb, var(--color-background) 92%, transparent); + backdrop-filter: blur(4px); + color: var(--color-navy); + font-size: 0.6rem; + font-weight: 600; + letter-spacing: 2px; + text-transform: uppercase; + padding: 0.4rem 0.8rem; + } + .piece-card__view { + position: absolute; + left: 1rem; + bottom: 1rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.65rem; + font-weight: 600; + letter-spacing: 2px; + text-transform: uppercase; + color: var(--color-contrast); + background: color-mix(in srgb, var(--color-navy) 82%, transparent); + backdrop-filter: blur(6px); + padding: 0.6rem 1rem; + opacity: 0; + transform: translateY(8px); + transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .piece-card:hover .piece-card__view { + opacity: 1; + transform: translateY(0); + } + + .piece-card__info { + display: flex; + gap: 1rem; + align-items: baseline; + } + .piece-card__index { + color: var(--color-foreground-50); + } + .piece-card__region { + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; + color: var(--color-accent); + } + .piece-card__title { + font-size: var(--text-xl); + font-weight: 400; + margin: 0.2rem 0; + } + .piece-card__price { + font-size: var(--text-sm); + color: var(--color-foreground-50); + font-variant-numeric: tabular-nums; + } + + .piece-card--end { + display: grid; + place-items: center; + aspect-ratio: 4 / 5; + background: var(--color-navy); + color: var(--color-contrast); + } + .piece-card__end-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-sm); + text-align: center; + padding: var(--space-md); + transition: transform var(--duration) var(--ease); + } + .piece-card--end:hover .piece-card__end-inner { + transform: translateX(6px); + } + .piece-card__end-label { + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-xl); + } + + .featured__progress { + margin: var(--space-lg) var(--page-inline) 0; + height: 1px; + background: var(--color-line); + } + .featured__progress-bar { + display: block; + height: 100%; + width: 0%; + background: var(--color-accent); + transition: width 0.2s linear; + } +/* ===== sections/promises.liquid ===== */ + .promises__eyebrow { + margin-bottom: var(--space-xl); + } + .promises__row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); + border-top: 1px solid var(--color-line); + } + .on-dark .promises__row { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise { + display: flex; + flex-direction: column; + gap: var(--space-sm); + padding: var(--space-lg) var(--space-lg) 0 0; + border-top: 1px solid transparent; + position: relative; + } + .promise + .promise { + padding-left: var(--space-lg); + border-left: 1px solid var(--color-line); + } + .on-dark .promise + .promise { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise__index { + color: var(--color-accent); + } + .promise__title { + font-size: var(--text-2xl); + font-weight: 400; + margin: 0; + } + .promise__text { + font-size: var(--text-sm); + font-weight: 300; + line-height: 1.7; + color: var(--color-foreground-50); + max-width: 26rem; + } + .on-dark .promise__text { + color: color-mix(in srgb, var(--color-contrast) 75%, transparent); + } + + @media (max-width: 749px) { + .promises__eyebrow { + margin-bottom: var(--space-lg); + } + .promise { + padding: var(--space-md) 0 0; + } + .promise + .promise { + padding-left: 0; + border-left: 0; + border-top: 1px solid var(--color-line); + margin-top: var(--space-md); + } + .on-dark .promise + .promise { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); + } + .promise__title { + font-size: var(--text-xl); + } + } +/* ===== sections/cta-banner.liquid ===== */ + .cta-banner { + position: relative; + display: grid; + place-items: center; + min-height: 78svh; + overflow: hidden; + color: var(--color-contrast); + isolation: isolate; + } + .cta-banner__media { + position: absolute; + inset: 0; + z-index: -1; + } + .cta-banner__bg { + width: 100%; + height: 100%; + object-fit: cover; + } + .cta-banner__overlay { + position: absolute; + inset: 0; + background: rgba(10, 22, 40, calc(var(--overlay) / 100)); + } + .cta-banner__frame { + position: absolute; + inset: clamp(1.25rem, 3vw, 2.5rem); + border: 1px solid color-mix(in srgb, var(--color-contrast) 35%, transparent); + pointer-events: none; + } + .cta-banner__content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-md); + padding: var(--space-3xl) var(--page-inline); + max-width: 56rem; + } + .cta-banner__eyebrow { + color: var(--color-accent-soft); + } + .cta-banner__heading { + font-size: var(--text-4xl); + font-weight: 400; + } + .cta-banner__sub { + font-size: var(--text-lg); + font-weight: 300; + color: color-mix(in srgb, var(--color-contrast) 85%, transparent); + } + + @media (max-width: 749px) { + .cta-banner { + min-height: 68svh; + } + .cta-banner__frame { + inset: 0.9rem; + } + .cta-banner__content { + padding-block: var(--space-2xl); + gap: var(--space-sm); + } + .cta-banner__sub { + font-size: var(--text-base); + } + } +/* ===== sections/footer.liquid ===== */ + .site-footer__inner { + padding: var(--space-2xl) var(--page-inline) var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-2xl); + } + + .site-footer__top { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); + gap: var(--space-2xl); + } + + .site-footer__brand { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-md); + } + .site-footer__blurb { + font-weight: 300; + line-height: 1.75; + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); + } + + .site-footer__news-title { + font-family: var(--font-heading--family); + font-style: italic; + font-size: var(--text-xl); + margin-bottom: var(--space-sm); + } + .newsletter-field { + display: flex; + align-items: center; + gap: var(--space-2xs); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 45%, transparent); + min-width: min(24rem, 100%); + transition: border-color var(--duration) var(--ease); + } + .newsletter-field:focus-within { + border-color: var(--color-contrast); + } + .newsletter-field input { + flex: 1; + background: transparent; + border: 0; + color: var(--color-contrast); + padding: 0.85rem 0; + outline: none; + font-weight: 300; + letter-spacing: 0.02em; + } + .newsletter-field input::placeholder { + color: color-mix(in srgb, var(--color-contrast) 55%, transparent); + } + .newsletter-field__submit { + background: none; + border: 0; + color: var(--color-contrast); + cursor: pointer; + display: inline-flex; + transition: color var(--duration) var(--ease), transform var(--duration) var(--ease); + } + .newsletter-field__submit:hover { + color: var(--color-accent-soft); + transform: translateX(4px); + } + .newsletter-note { + margin-top: var(--space-xs); + font-size: var(--text-sm); + color: var(--color-accent-soft); + } + + .site-footer__columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); + gap: var(--space-lg); + align-content: start; + } + .footer-col__title { + font-size: 0.65rem; + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; + color: var(--color-accent-soft); + margin-bottom: var(--space-sm); + } + .footer-col__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; + } + .footer-col__list a { + text-decoration: none; + color: color-mix(in srgb, var(--color-contrast) 78%, transparent); + font-size: var(--text-sm); + font-weight: 300; + letter-spacing: 0.02em; + transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease); + } + .footer-col__list a:hover { + color: var(--color-contrast); + padding-left: 0.4rem; + } + + /* Oversized wordmark — scales fluidly so it never overflows small screens */ + .site-footer__giant { + font-family: var(--font-heading--family); + font-size: clamp(1.9rem, 10.5vw, 10rem); + line-height: 0.95; + text-transform: uppercase; + letter-spacing: 0.06em; + text-align: center; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + color: color-mix(in srgb, var(--color-contrast) 92%, transparent); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 15%, transparent); + padding-bottom: var(--space-lg); + margin: 0; + } + + .site-footer__bottom { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + flex-wrap: wrap; + } + .site-footer__copyright { + font-size: var(--text-xs); + font-weight: 300; + letter-spacing: 0.04em; + color: color-mix(in srgb, var(--color-contrast) 60%, transparent); + } + .site-footer__coords { + color: color-mix(in srgb, var(--color-contrast) 45%, transparent); + } + .site-footer__payment { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + } + + @media (max-width: 989px) { + .site-footer__inner { + padding-top: var(--space-xl); + gap: var(--space-xl); + } + .site-footer__top { + grid-template-columns: 1fr; + gap: var(--space-xl); + } + .site-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: var(--space-sm); + } + } diff --git a/assets/critical.css b/assets/critical.css index e9e6932ee..31cbc5eff 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -13,15 +13,6 @@ body { min-height: 100svh; } -/* - * Horizontal overflow safety net. `clip` (unlike `hidden`) does not create - * a scroll container, so position: sticky keeps working. - */ -html, -body { - overflow-x: clip; -} - html:has(dialog[scroll-lock][open], details[scroll-lock][open]) { overflow: hidden; } @@ -288,12 +279,22 @@ button.button { /** Section layout utilities */ -/* Inline padding that aligns full-bleed content with the page column */ +/* + * Horizontal padding aligned to the page column. + * On mobile we use the gutter only — never 100vw (that includes scrollbar + * width and causes subtle overflow on real devices). + */ :root { - --page-inline: max( - var(--page-margin), - calc((100vw - var(--page-width)) / 2 + var(--page-margin)) - ); + --page-inline: var(--page-margin); +} + +@media (min-width: 990px) { + :root { + --page-inline: max( + var(--page-margin), + calc((100% - min(var(--page-width), 100%)) / 2 + var(--page-margin)) + ); + } } /** @@ -315,22 +316,41 @@ button.button { --content-margin: minmax(var(--page-margin), 1fr); --content-grid: var(--content-margin) var(--content-width) var(--content-margin); - /* This is required to make elements work as background images */ position: relative; grid-template-columns: var(--content-grid); display: grid; width: 100%; + max-width: 100%; + box-sizing: border-box; } /* Child elements, by default, are constrained to the central column of the grid. */ .shopify-section > * { grid-column: 2; - /* Prevent content-based minimum sizes from blowing out the grid tracks */ min-width: 0; max-width: 100%; + width: 100%; + box-sizing: border-box; } /* Child elements that use the full-width utility class span the entire viewport. */ .shopify-section > .full-width { grid-column: 1 / -1; + width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; +} + +/* Constrained sections: belt-and-suspenders padding on small screens */ +@media (max-width: 989px) { + .regions, + .promises, + .featured { + padding-inline: var(--page-margin); + } + + .featured__head { + padding-inline: 0; + } } diff --git a/sections/featured.liquid b/sections/featured.liquid index 80b9377c0..dceefbec3 100644 --- a/sections/featured.liquid +++ b/sections/featured.liquid @@ -89,6 +89,13 @@
{% stylesheet %} + .featured { + width: 100%; + max-width: 100%; + min-width: 0; + overflow-x: clip; + box-sizing: border-box; + } .featured__head { display: flex; align-items: flex-end; @@ -127,10 +134,15 @@ .featured__rail-wrap { position: relative; + width: 100%; + max-width: 100%; min-width: 0; + overflow: hidden; } .featured__rail { display: flex; + width: 100%; + max-width: 100%; min-width: 0; gap: var(--space-md); overflow-x: auto; @@ -156,13 +168,18 @@ display: none; } .piece-card { - flex-basis: 76vw; + flex: 0 0 82%; } .featured__head { margin-bottom: var(--space-md); } + .featured__rail { + padding-inline: 0; + scroll-padding-inline: 0; + } .featured__progress { margin-top: var(--space-md); + margin-inline: 0; } } .piece-card__media { diff --git a/sections/footer.liquid b/sections/footer.liquid index e2269f1e3..eebb50404 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -3,8 +3,8 @@ closing with a hairline legal row and payment icons. {% endcomment %} -
-
+
+
{% if section.settings.tagline != blank %} @@ -82,6 +82,11 @@
{% stylesheet %} + .site-footer { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } .site-footer__inner { padding: var(--space-2xl) var(--page-inline) var(--space-lg); display: flex; @@ -190,15 +195,16 @@ padding-left: 0.4rem; } - /* Oversized wordmark — scales fluidly so it never overflows small screens */ + /* Oversized wordmark — scales to fit any phone width */ .site-footer__giant { font-family: var(--font-heading--family); - font-size: clamp(1.9rem, 10.5vw, 10rem); - line-height: 0.95; + font-size: clamp(1.35rem, 9vw, 10rem); + line-height: 1.05; text-transform: uppercase; - letter-spacing: 0.06em; + letter-spacing: clamp(0.02em, 1.2vw, 0.06em); text-align: center; white-space: nowrap; + width: 100%; max-width: 100%; overflow: hidden; color: color-mix(in srgb, var(--color-contrast) 92%, transparent); @@ -233,6 +239,7 @@ .site-footer__inner { padding-top: var(--space-xl); gap: var(--space-xl); + padding-inline: var(--page-margin); } .site-footer__top { grid-template-columns: 1fr; @@ -243,6 +250,16 @@ align-items: flex-start; gap: var(--space-sm); } + .site-footer__giant { + font-size: clamp(1.15rem, 7.8vw, 2.25rem); + letter-spacing: 0.04em; + white-space: normal; + word-break: break-word; + } + .newsletter-field { + min-width: 0; + width: 100%; + } } {% endstylesheet %} diff --git a/sections/promises.liquid b/sections/promises.liquid index 28df57a3f..a950ebe9c 100644 --- a/sections/promises.liquid +++ b/sections/promises.liquid @@ -29,6 +29,11 @@
{% stylesheet %} + .promises { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } .promises__eyebrow { margin-bottom: var(--space-xl); } @@ -78,6 +83,9 @@ .promises__eyebrow { margin-bottom: var(--space-lg); } + .promises__row { + grid-template-columns: 1fr; + } .promise { padding: var(--space-md) 0 0; } diff --git a/sections/regions.liquid b/sections/regions.liquid index f4b11b1bd..91c4485af 100644 --- a/sections/regions.liquid +++ b/sections/regions.liquid @@ -72,6 +72,12 @@
{% stylesheet %} + .regions { + width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; + } .regions__head { display: flex; align-items: flex-end; @@ -126,6 +132,7 @@ .region-card__media img { width: 100%; height: 100%; + max-width: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } @@ -187,11 +194,18 @@ display: flex; align-items: center; justify-content: space-between; + gap: var(--space-sm); padding-top: 1rem; border-bottom: 1px solid var(--color-line); padding-bottom: 1rem; + min-width: 0; + } + .region-card__foot .meta-label { + min-width: 0; + overflow-wrap: anywhere; } .region-card__cta { + flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.6rem; @@ -207,15 +221,16 @@ transform: translateX(5px); } - @media (max-width: 749px) { + @media (max-width: 989px) { + .regions__grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } .region-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; --card-ratio: 4 / 5; } - .regions__grid { - gap: var(--space-lg); - } .regions__head { margin-bottom: var(--space-lg); } @@ -223,16 +238,26 @@ padding: 1.25rem; } .region-card__index { - top: 1.1rem; - left: 1.25rem; + top: 1rem; + left: 1rem; } .region-card__status { - top: 1rem; - right: 1rem; + top: 0.85rem; + right: 0.85rem; + font-size: 0.55rem; + letter-spacing: 1.5px; + padding: 0.35rem 0.65rem; + max-width: calc(100% - 5rem); + text-align: center; + line-height: 1.3; } .region-card__foot { - flex-wrap: wrap; - gap: 0.5rem; + flex-direction: column; + align-items: flex-start; + gap: 0.65rem; + } + .region-card__title { + font-size: var(--text-xl); } } {% endstylesheet %} diff --git a/sections/story.liquid b/sections/story.liquid index 85af4eb2a..d5c07af75 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -104,6 +104,9 @@ .story { position: relative; overflow: hidden; + width: 100%; + max-width: 100%; + box-sizing: border-box; } /* Giant ghost chapter numeral */ @@ -271,6 +274,7 @@ font-weight: 300; line-height: 1.75; max-width: 30rem; + overflow-wrap: anywhere; } .on-dark .story__body { color: color-mix(in srgb, var(--color-contrast) 78%, transparent); @@ -297,6 +301,9 @@ padding-left: var(--space-lg); border-left: 1px solid var(--color-line); } + .story__stat .meta-label { + overflow-wrap: anywhere; + } .on-dark .story__stat + .story__stat { border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); } @@ -316,26 +323,28 @@ margin-top: var(--space-2xs); } - /* - Mobile: a dedicated composition rather than a squeezed desktop one. - The decorative frame and vertical label step aside; the inset image - overlaps the main image's bottom-right corner; the caption flows - statically beneath the image on the left, clear of everything. - */ @media (max-width: 989px) { .story__inner { gap: var(--space-lg); + padding-inline: var(--page-margin); } .story__visual, .story--media-right .story__visual { grid-column: 1 / -1; order: 0; - padding: 0 0 3.5rem; + padding: 0 0 1rem; + overflow: hidden; } .story__content, .story--media-right .story__content { grid-column: 1 / -1; order: 1; + max-width: 100%; + width: 100%; + } + + .story__ghost { + display: none; } .story__vertical, @@ -345,38 +354,55 @@ .story__inset, .story--media-right .story__inset { - width: 44%; - right: 0; + width: 42%; + max-width: 9.5rem; + right: 0.5rem; left: auto; - bottom: 0; - outline-width: 5px; + bottom: 0.5rem; + outline-width: 4px; } .story__caption, .story--media-right .story__caption { position: static; display: block; - max-width: 52%; + max-width: 100%; margin-top: 0.85rem; + font-size: 0.65rem; + line-height: 1.5; } + .story__heading { + font-size: var(--text-2xl); + } .story__heading em { - padding-left: 0.75em; + padding-left: 0.5em; } - .story__stats { - flex-wrap: wrap; - row-gap: var(--space-sm); + .story__body { + max-width: 100%; + font-size: var(--text-base); } - .story__ghost { - top: 0; - right: 0; - font-size: clamp(8rem, 32vw, 14rem); + /* Stats: stack vertically so labels never clip */ + .story__stats { + flex-direction: column; + align-items: stretch; + gap: 0; + } + .story__stat { + padding: var(--space-sm) 0; + } + .story__stat + .story__stat { + padding-left: 0; + border-left: 0; + border-top: 1px solid var(--color-line); + } + .on-dark .story__stat + .story__stat { + border-color: color-mix(in srgb, var(--color-contrast) 18%, transparent); } - .story--media-right .story__ghost { - left: 0; - right: auto; + .story__stat-value { + font-size: var(--text-xl); } } {% endstylesheet %} From 043e665a21ce5079c85e38c25bc118cab9b8192b Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:30:07 +0200 Subject: [PATCH 08/25] u --- assets/critical.css | 2 + sections/story.liquid | 109 ++++++++++++++++++++++++++++++------------ 2 files changed, 80 insertions(+), 31 deletions(-) diff --git a/assets/critical.css b/assets/critical.css index 31cbc5eff..4a57f7620 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -129,6 +129,7 @@ a { display: inline-flex; align-items: center; gap: 1rem; + max-width: 100%; font-family: var(--font-primary--family); font-size: var(--text-xs); font-weight: 500; @@ -340,6 +341,7 @@ button.button { max-width: 100%; min-width: 0; box-sizing: border-box; + overflow-x: clip; } /* Constrained sections: belt-and-suspenders padding on small screens */ diff --git a/sections/story.liquid b/sections/story.liquid index d5c07af75..454a53a1c 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -37,18 +37,20 @@ -
- {{ section.settings.heading | escape }} -
- - {% if img_alt != blank %} -
- +
+
+ {{ section.settings.heading | escape }}
- {% endif %} + + {% if img_alt != blank %} +
+ +
+ {% endif %} +
{% if section.settings.visual_caption != blank %} - {{ section.settings.visual_caption }} +

{{ section.settings.visual_caption }}

{% endif %}
@@ -137,16 +139,26 @@ position: relative; z-index: 1; display: grid; - /* minmax(0, 1fr): image intrinsic widths must never expand the tracks */ grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); align-items: center; padding-inline: var(--page-inline); + width: 100%; + max-width: 100%; + box-sizing: border-box; } .story__visual, .story__content { min-width: 0; + max-width: 100%; + } + + /* Clipped stage for main + inset (outline/box-shadow stay inside) */ + .story__images { + position: relative; + width: 100%; + overflow: hidden; } .story__visual { @@ -203,7 +215,9 @@ overflow: hidden; } .story__main img { + display: block; width: 100%; + max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; @@ -219,18 +233,21 @@ right: 0; bottom: 1.25rem; width: 46%; - outline: 8px solid var(--color-background); + max-width: 11rem; + border: 6px solid var(--color-background); box-shadow: 0 34px 70px -34px rgba(10, 22, 40, 0.6); } .on-dark .story__inset { - outline-color: var(--color-navy); + border-color: var(--color-navy); } .story--media-right .story__inset { right: auto; left: 0; } .story__inset img { + display: block; width: 100%; + max-width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; @@ -260,9 +277,12 @@ flex-direction: column; align-items: flex-start; gap: var(--space-md); + width: 100%; + box-sizing: border-box; } .story__heading { font-weight: 400; + max-width: 100%; } .story__heading em { display: block; @@ -274,7 +294,13 @@ font-weight: 300; line-height: 1.75; max-width: 30rem; - overflow-wrap: anywhere; + width: 100%; + overflow-wrap: break-word; + word-wrap: break-word; + } + .story__body p { + max-width: 100%; + overflow-wrap: break-word; } .on-dark .story__body { color: color-mix(in srgb, var(--color-contrast) 78%, transparent); @@ -324,59 +350,69 @@ } @media (max-width: 989px) { + .story { + overflow-x: clip; + } + .story__inner { + display: flex; + flex-direction: column; gap: var(--space-lg); padding-inline: var(--page-margin); } + .story__visual, .story--media-right .story__visual { - grid-column: 1 / -1; order: 0; - padding: 0 0 1rem; - overflow: hidden; + width: 100%; + padding: 0; } + .story__content, .story--media-right .story__content { - grid-column: 1 / -1; order: 1; - max-width: 100%; width: 100%; + max-width: 100%; + padding: 0; } - .story__ghost { - display: none; - } - + .story__ghost, .story__vertical, .story__frame { display: none; } + .story__images { + width: 100%; + } + .story__inset, .story--media-right .story__inset { - width: 42%; - max-width: 9.5rem; - right: 0.5rem; + right: 0.75rem; left: auto; - bottom: 0.5rem; - outline-width: 4px; + bottom: 0.75rem; + width: 36%; + max-width: 7.5rem; + border-width: 3px; } .story__caption, .story--media-right .story__caption { position: static; - display: block; + width: 100%; max-width: 100%; - margin-top: 0.85rem; + margin: 0.75rem 0 0; + padding: 0; font-size: 0.65rem; line-height: 1.5; + overflow-wrap: break-word; } .story__heading { font-size: var(--text-2xl); } .story__heading em { - padding-left: 0.5em; + padding-left: 0.35em; } .story__body { @@ -384,14 +420,20 @@ font-size: var(--text-base); } - /* Stats: stack vertically so labels never clip */ + .story__eyebrow, + .story__content .eyebrow { + max-width: 100%; + } + .story__stats { flex-direction: column; align-items: stretch; gap: 0; + width: 100%; } .story__stat { padding: var(--space-sm) 0; + width: 100%; } .story__stat + .story__stat { padding-left: 0; @@ -404,6 +446,11 @@ .story__stat-value { font-size: var(--text-xl); } + + .story__link { + max-width: 100%; + overflow-wrap: break-word; + } } {% endstylesheet %} From 08ba0d34dd8576f2e99e5624371d03496ac0be1e Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:34:22 +0200 Subject: [PATCH 09/25] Update story.liquid --- sections/story.liquid | 77 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 16 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index 454a53a1c..aa0be76d5 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -365,7 +365,13 @@ .story--media-right .story__visual { order: 0; width: 100%; - padding: 0; + max-width: 100%; + position: relative; + /* Scaled-down desktop padding — room for frame + caption */ + padding: 0.75rem 1.35rem 2.1rem 0.85rem; + } + .story--media-right .story__visual { + padding: 0.75rem 0.85rem 2.1rem 1.35rem; } .story__content, @@ -376,37 +382,77 @@ padding: 0; } - .story__ghost, - .story__vertical, - .story__frame { + /* Faint chapter numeral — desktop detail, mobile-safe */ + .story__ghost { + display: block; + font-size: clamp(5.5rem, 26vw, 9rem); + top: -0.15em; + right: 0; + opacity: 0.04; + } + .story--media-right .story__ghost { + left: 0; + right: auto; + } + + .story__vertical { display: none; } + /* Hairline frame — same editorial offset as desktop, tighter */ + .story__frame { + display: block; + inset: 0 0.85rem 1.65rem 0.35rem; + transform: translate(0.65rem, 0.65rem); + } + .story--media-right .story__frame { + inset: 0 0.35rem 1.65rem 0.85rem; + transform: translate(-0.65rem, 0.65rem); + } + .story__images { width: 100%; + max-width: 100%; + border-radius: 0; } + /* Inset: desktop proportions, contained inside the image stage */ .story__inset, .story--media-right .story__inset { - right: 0.75rem; + right: 0; left: auto; - bottom: 0.75rem; - width: 36%; - max-width: 7.5rem; - border-width: 3px; + bottom: 1rem; + width: 42%; + max-width: 9rem; + border-width: 5px; + box-shadow: 0 20px 44px -22px rgba(10, 22, 40, 0.45); + } + .story--media-right .story__inset { + right: auto; + left: 0; } + /* Caption inside the frame, above the bottom hairline */ .story__caption, .story--media-right .story__caption { - position: static; - width: 100%; - max-width: 100%; - margin: 0.75rem 0 0; + position: absolute; + left: 1.65rem; + right: 1rem; + bottom: 0.15rem; + width: auto; + max-width: calc(100% - 2.65rem); + margin: 0; padding: 0; - font-size: 0.65rem; - line-height: 1.5; + font-size: 0.62rem; + letter-spacing: 1.75px; + line-height: 1.45; overflow-wrap: break-word; } + .story--media-right .story__caption { + left: 1rem; + right: 1.65rem; + text-align: right; + } .story__heading { font-size: var(--text-2xl); @@ -420,7 +466,6 @@ font-size: var(--text-base); } - .story__eyebrow, .story__content .eyebrow { max-width: 100%; } From ab2186aa820ccecce5b9056562879126b1b94a33 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:37:41 +0200 Subject: [PATCH 10/25] Update story.liquid --- sections/story.liquid | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index aa0be76d5..c6a27e6a6 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -154,17 +154,18 @@ max-width: 100%; } - /* Clipped stage for main + inset (outline/box-shadow stay inside) */ + /* Clipped stage — inset may sit flush on the corner; visual clips the stage */ .story__images { position: relative; width: 100%; - overflow: hidden; + overflow: visible; } .story__visual { grid-column: 1 / span 6; position: relative; padding: 1.5rem 3.5rem 4.5rem 2.75rem; + overflow: hidden; } .story__content { grid-column: 8 / span 5; @@ -227,11 +228,11 @@ transform: scale(1.04); } - /* Inset: the place the jewel came from */ + /* Inset: flush bottom-right of the main image */ .story__inset { position: absolute; right: 0; - bottom: 1.25rem; + bottom: 0; width: 46%; max-width: 11rem; border: 6px solid var(--color-background); @@ -367,7 +368,7 @@ width: 100%; max-width: 100%; position: relative; - /* Scaled-down desktop padding — room for frame + caption */ + overflow: hidden; padding: 0.75rem 1.35rem 2.1rem 0.85rem; } .story--media-right .story__visual { @@ -413,15 +414,14 @@ .story__images { width: 100%; max-width: 100%; - border-radius: 0; } - /* Inset: desktop proportions, contained inside the image stage */ + /* Inset: pinned to bottom-right corner of main image */ .story__inset, .story--media-right .story__inset { right: 0; left: auto; - bottom: 1rem; + bottom: 0; width: 42%; max-width: 9rem; border-width: 5px; @@ -432,15 +432,19 @@ left: 0; } - /* Caption inside the frame, above the bottom hairline */ + /* + Caption inside the frame, just above the bottom hairline. + Frame inner-left ≈ padding-left + frame inset-left + translate-x + Frame bottom ≈ padding-bottom area; caption sits above the line. + */ .story__caption, .story--media-right .story__caption { position: absolute; - left: 1.65rem; - right: 1rem; - bottom: 0.15rem; + left: 1.85rem; + right: auto; + bottom: 1.05rem; width: auto; - max-width: calc(100% - 2.65rem); + max-width: calc(100% - 3rem); margin: 0; padding: 0; font-size: 0.62rem; @@ -449,8 +453,8 @@ overflow-wrap: break-word; } .story--media-right .story__caption { - left: 1rem; - right: 1.65rem; + left: auto; + right: 1.85rem; text-align: right; } From 99c8f7d78929922fc726a78ff2fd3fe7899e4810 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:43:18 +0200 Subject: [PATCH 11/25] Update story.liquid --- sections/story.liquid | 82 +++++++++++++++++++++---------------------- 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index c6a27e6a6..95057cb3c 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -35,18 +35,20 @@ {{ section.settings.vertical_label }} {% endif %} - +
+ -
-
- {{ section.settings.heading | escape }} -
- - {% if img_alt != blank %} -
- +
+
+ {{ section.settings.heading | escape }}
- {% endif %} + + {% if img_alt != blank %} +
+ +
+ {% endif %} +
{% if section.settings.visual_caption != blank %} @@ -154,7 +156,12 @@ max-width: 100%; } - /* Clipped stage — inset may sit flush on the corner; visual clips the stage */ + .story__media { + position: relative; + width: 100%; + padding-bottom: 3rem; + } + .story__images { position: relative; width: 100%; @@ -199,16 +206,16 @@ color: color-mix(in srgb, var(--color-contrast) 55%, transparent); } - /* Offset hairline frame */ + /* Offset hairline frame — hugs the image block; caption band via media padding */ .story__frame { position: absolute; - inset: 0 2rem 3rem 1.25rem; + inset: 0 2rem 0 1.25rem; border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); transform: translate(1.5rem, 1.5rem); pointer-events: none; } .story--media-right .story__frame { - inset: 0 1.25rem 3rem 2rem; + inset: 0 1.25rem 0 2rem; transform: translate(-1.5rem, 1.5rem); } @@ -368,11 +375,18 @@ width: 100%; max-width: 100%; position: relative; - overflow: hidden; - padding: 0.75rem 1.35rem 2.1rem 0.85rem; + overflow: visible; + display: flex; + flex-direction: column; + gap: 0.65rem; + padding: 0.75rem 1.35rem 0.85rem 0.85rem; } .story--media-right .story__visual { - padding: 0.75rem 0.85rem 2.1rem 1.35rem; + padding: 0.75rem 0.85rem 0.85rem 1.35rem; + } + + .story__media { + padding-bottom: 0; } .story__content, @@ -400,15 +414,12 @@ display: none; } - /* Hairline frame — same editorial offset as desktop, tighter */ - .story__frame { - display: block; - inset: 0 0.85rem 1.65rem 0.35rem; - transform: translate(0.65rem, 0.65rem); - } + /* Frame hugs the image — left edge aligned, caption sits below */ + .story__frame, .story--media-right .story__frame { - inset: 0 0.35rem 1.65rem 0.85rem; - transform: translate(-0.65rem, 0.65rem); + display: block; + inset: 0; + transform: none; } .story__images { @@ -432,30 +443,17 @@ left: 0; } - /* - Caption inside the frame, just above the bottom hairline. - Frame inner-left ≈ padding-left + frame inset-left + translate-x - Frame bottom ≈ padding-bottom area; caption sits above the line. - */ + /* Caption below the frame — readable, not over the photo */ .story__caption, .story--media-right .story__caption { - position: absolute; - left: 1.85rem; - right: auto; - bottom: 1.05rem; - width: auto; - max-width: calc(100% - 3rem); + position: static; margin: 0; - padding: 0; + padding: 0 0.15rem; font-size: 0.62rem; letter-spacing: 1.75px; line-height: 1.45; overflow-wrap: break-word; - } - .story--media-right .story__caption { - left: auto; - right: 1.85rem; - text-align: right; + text-align: left; } .story__heading { From 4acbfe2c4824bc39e2b6ea18ac54d5a44c3d4597 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:46:44 +0200 Subject: [PATCH 12/25] Update story.liquid --- sections/story.liquid | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index 95057cb3c..57304f9f8 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -157,9 +157,8 @@ } .story__media { - position: relative; + position: static; width: 100%; - padding-bottom: 3rem; } .story__images { @@ -206,16 +205,16 @@ color: color-mix(in srgb, var(--color-contrast) 55%, transparent); } - /* Offset hairline frame — hugs the image block; caption band via media padding */ + /* Offset hairline frame — positioned against the full visual column */ .story__frame { position: absolute; - inset: 0 2rem 0 1.25rem; + inset: 0 2rem 3rem 1.25rem; border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); transform: translate(1.5rem, 1.5rem); pointer-events: none; } .story--media-right .story__frame { - inset: 0 1.25rem 0 2rem; + inset: 0 1.25rem 3rem 2rem; transform: translate(-1.5rem, 1.5rem); } @@ -386,6 +385,7 @@ } .story__media { + position: relative; padding-bottom: 0; } From 690f43deafd2b3c9e770ed04fa297cd8dd42319f Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 8 Jul 2026 23:54:46 +0200 Subject: [PATCH 13/25] Update story.liquid --- sections/story.liquid | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sections/story.liquid b/sections/story.liquid index 57304f9f8..f95669eef 100644 --- a/sections/story.liquid +++ b/sections/story.liquid @@ -239,8 +239,8 @@ position: absolute; right: 0; bottom: 0; - width: 46%; - max-width: 11rem; + width: 54%; + max-width: 15.5rem; border: 6px solid var(--color-background); box-shadow: 0 34px 70px -34px rgba(10, 22, 40, 0.6); } From 047001a9d805222ffee02d3427df3794fed5b3b2 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Thu, 9 Jul 2026 01:39:04 +0200 Subject: [PATCH 14/25] update --- .preview/index.html | 12 ++++++------ assets/critical.css | 2 +- sections/cta-banner.liquid | 2 +- sections/footer.liquid | 4 ++-- sections/hero.liquid | 12 ++++++------ sections/regions.liquid | 12 ++++++------ templates/index.json | 10 +++++----- 7 files changed, 27 insertions(+), 27 deletions(-) diff --git a/.preview/index.html b/.preview/index.html index 4fb655aad..5b49c4ccc 100644 --- a/.preview/index.html +++ b/.preview/index.html @@ -96,7 +96,7 @@
-

Expedition N° 001 — Oceania

+

Region N° 001 — Oceania

Travel the World, Collect the World

Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.

@@ -138,10 +138,10 @@

Travel the World, Collect the World
-

The expeditions

+

The regions

Where in the world will you begin?

- All expeditions + All regions
@@ -188,7 +188,7 @@

Asia

- Expedition in progress + Region in progress Join the waitlist
@@ -292,7 +292,7 @@

Meet the artisans

The odyssey begins

Begin your collection

-

The first expedition has landed. Claim a piece of Oceania before it's gone forever.

+

The first region has landed. Claim a piece of Oceania before it's gone forever.

Shop the first drop
@@ -306,7 +306,7 @@

Begin your collection

Travel the world, collect the world

One-of-a-kind treasures gathered from artisans across the globe. Each piece carries the story of where it came from.

@@ -293,7 +293,7 @@ "type": "text", "id": "newsletter_title", "label": "Newsletter title", - "default": "Join the expedition" + "default": "Explore the regions" }, { "type": "text", diff --git a/sections/hero.liquid b/sections/hero.liquid index 8558f1e0e..c24e9dd28 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -1,6 +1,6 @@ {% comment %} Cinematic editorial hero. Background video (or image), bottom-left - composition, italic serif accent line, expedition metadata and a + composition, italic serif accent line, region metadata and a hairline base row with scroll cue and coordinates. {% endcomment %} @@ -31,8 +31,8 @@
- {% if section.settings.expedition != blank %} -

{{ section.settings.expedition }}

+ {% if section.settings.region != blank %} +

{{ section.settings.region }}

{% endif %}

@@ -245,9 +245,9 @@ }, { "type": "text", - "id": "expedition", - "label": "Expedition label", - "default": "Expedition N° 001 — Oceania" + "id": "region", + "label": "Region label", + "default": "Region N° 001 — Oceania" }, { "type": "text", diff --git a/sections/regions.liquid b/sections/regions.liquid index 91c4485af..96ed9e8b3 100644 --- a/sections/regions.liquid +++ b/sections/regions.liquid @@ -1,7 +1,7 @@ {% comment %} - Region expeditions — asymmetric editorial grid. Cards vary in size and - vertical offset in a repeating 3-card rhythm, each numbered like an - expedition ledger entry. + Region grid — asymmetric editorial layout. Cards vary in size and + vertical offset in a repeating 3-card rhythm, each numbered like a + region ledger entry. {% endcomment %}
@@ -270,7 +270,7 @@ "type": "text", "id": "eyebrow", "label": "Eyebrow", - "default": "The expeditions" + "default": "The regions" }, { "type": "text", @@ -288,7 +288,7 @@ "type": "text", "id": "link_label", "label": "Link label", - "default": "All expeditions" + "default": "All regions" }, { "type": "url", @@ -381,7 +381,7 @@ "title": "Asia", "status": "Coming soon", "subtitle": "Along the ancient trade routes", - "meta": "Expedition in progress", + "meta": "Region in progress", "cta": "Join the waitlist", "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80" } diff --git a/templates/index.json b/templates/index.json index 71bab3dca..e8dac11d9 100644 --- a/templates/index.json +++ b/templates/index.json @@ -12,7 +12,7 @@ "hero": { "type": "hero", "settings": { - "expedition": "Expedition N° 001 — Oceania", + "region": "Region N° 001 — Oceania", "heading": "Travel the World,", "heading_italic": "Collect the World", "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.", @@ -42,10 +42,10 @@ "regions": { "type": "regions", "settings": { - "eyebrow": "The expeditions", + "eyebrow": "The regions", "heading": "Where in the world", "heading_italic": "will you begin?", - "link_label": "All expeditions" + "link_label": "All regions" }, "blocks": { "r1": { @@ -76,7 +76,7 @@ "title": "Asia", "status": "Coming soon", "subtitle": "Along the ancient trade routes", - "meta": "Expedition in progress", + "meta": "Region in progress", "cta": "Join the waitlist", "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80" } @@ -226,7 +226,7 @@ "eyebrow": "The odyssey begins", "heading": "Begin your", "heading_italic": "collection", - "subheading": "The first expedition has landed. Claim a piece of Oceania before it's gone forever.", + "subheading": "The first region has landed. Claim a piece of Oceania before it's gone forever.", "button_label": "Shop the first drop", "overlay_opacity": 45, "image_url": "https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=2400&q=80" From a919371f80490ecdfdab6e1697923ef5c8c344c1 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 15 Jul 2026 17:06:34 +0200 Subject: [PATCH 15/25] Pandora update --- assets/critical.css | 50 ++++ assets/theme.js | 72 ++++++ docs/ODYSSEY-JEWELS-BUILD-PLAN.md | 3 +- sections/hero.liquid | 300 ++++++++++++++--------- sections/video-story.liquid | 392 ++++++++++++++++++++++++++++++ snippets/vstory-copy.liquid | 47 ++++ templates/index.json | 43 +++- 7 files changed, 776 insertions(+), 131 deletions(-) create mode 100644 sections/video-story.liquid create mode 100644 snippets/vstory-copy.liquid diff --git a/assets/critical.css b/assets/critical.css index a7992fd0e..d4da78fa6 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -250,6 +250,56 @@ button.button { transform: scaleX(0); } +/** Shared cinematic media controls (hero + video story) */ +.media-controls { + position: absolute; + right: clamp(1.25rem, 0.5rem + 2vw, 2.75rem); + bottom: clamp(1.25rem, 0.5rem + 2vw, 2.75rem); + display: flex; + gap: 0.6rem; + z-index: 3; +} +.media-controls__btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + padding: 0; + color: var(--color-contrast); + background: color-mix(in srgb, var(--color-navy) 32%, transparent); + border: 1px solid color-mix(in srgb, var(--color-contrast) 55%, transparent); + border-radius: 50%; + cursor: pointer; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); +} +.media-controls__btn:hover { + background: color-mix(in srgb, var(--color-navy) 55%, transparent); + border-color: var(--color-contrast); +} +.media-controls__icon { + width: 1.15rem; + height: 1.15rem; +} +/* Toggle icon visibility from the button's data-state */ +.media-controls__icon--play, +.media-controls__icon--unmuted { + display: none; +} +[data-video-play][data-state="paused"] .media-controls__icon--pause { display: none; } +[data-video-play][data-state="paused"] .media-controls__icon--play { display: block; } +[data-video-mute][data-state="unmuted"] .media-controls__icon--muted { display: none; } +[data-video-mute][data-state="unmuted"] .media-controls__icon--unmuted { display: block; } + +@media (max-width: 749px) { + .media-controls__btn { + width: 2.5rem; + height: 2.5rem; + } +} + /** Utilities */ .section-spacing { padding-block: var(--section-spacing); diff --git a/assets/theme.js b/assets/theme.js index fa52e9c75..2dd205168 100644 --- a/assets/theme.js +++ b/assets/theme.js @@ -31,4 +31,76 @@ onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); } + + /* Cinematic media: play/pause + mute toggles (hero, video story) */ + const initVideoControls = (root = document) => { + root.querySelectorAll('[data-media-video]').forEach((wrap) => { + if (wrap.dataset.videoReady === 'true') return; + const video = wrap.querySelector('video'); + if (!video) return; + wrap.dataset.videoReady = 'true'; + + const playBtn = wrap.querySelector('[data-video-play]'); + const muteBtn = wrap.querySelector('[data-video-mute]'); + + const syncPlay = () => { + if (playBtn) playBtn.dataset.state = video.paused ? 'paused' : 'playing'; + }; + const syncMute = () => { + if (muteBtn) muteBtn.dataset.state = video.muted ? 'muted' : 'unmuted'; + }; + + if (playBtn) { + playBtn.addEventListener('click', () => { + if (video.paused) { + video.play(); + } else { + video.pause(); + } + }); + } + if (muteBtn) { + muteBtn.addEventListener('click', () => { + video.muted = !video.muted; + syncMute(); + }); + } + + video.addEventListener('play', syncPlay); + video.addEventListener('pause', syncPlay); + video.addEventListener('volumechange', syncMute); + + /* Pause offscreen videos to save resources, resume when visible */ + const playState = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (!video.dataset.userPaused) { + if (entry.isIntersecting && video.paused && video.autoplay) { + video.play().catch(() => {}); + } else if (!entry.isIntersecting && !video.paused) { + video.pause(); + } + } + } + }, + { threshold: 0.2 } + ); + playState.observe(video); + + /* Track explicit user pause so we don't auto-resume against their wish */ + if (playBtn) { + playBtn.addEventListener('click', () => { + video.dataset.userPaused = video.paused ? 'true' : ''; + }); + } + + syncPlay(); + syncMute(); + }); + }; + + initVideoControls(); + document.addEventListener('shopify:section:load', (event) => { + initVideoControls(event.target || document); + }); })(); diff --git a/docs/ODYSSEY-JEWELS-BUILD-PLAN.md b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md index 04d5df4cf..1a921aaae 100644 --- a/docs/ODYSSEY-JEWELS-BUILD-PLAN.md +++ b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md @@ -119,9 +119,10 @@ Mapped to the skeleton's folders. Items marked `@core` are the premium framework - [x] Account entry (ties to Rewards). ### 6.3 Homepage sections `@dev` (framework by `@core`) -- [x] Hero (stock video + "Travel the World, Collect the World" — editorial layout, expedition metadata, staggered reveals). +- [x] Hero (clean, premium Pandora-inspired full-bleed video — bottom-left composition, subtle scrim, elegant play/pause + mute controls, alignment/height/button-style options). - [ ] Interactive World Map section (**hero custom feature** — see §7.1). - [x] Featured drop (Oceania) — horizontal gallery rail with controls + progress line. +- [x] Cinematic video storytelling section (`video-story`) — full-bleed overlay or split layout, autoplay/click-to-play, reusable for collection & brand stories. - [x] "How it works" / storytelling band — layered dual-image story sections + destination marquee + promises ledger. - [x] Featured artisans (dark story variant; to be backed by artisan metaobjects later). - [ ] Rewards teaser. diff --git a/sections/hero.liquid b/sections/hero.liquid index c24e9dd28..b32040b19 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -1,7 +1,7 @@ {% comment %} - Cinematic editorial hero. Background video (or image), bottom-left - composition, italic serif accent line, region metadata and a - hairline base row with scroll cue and coordinates. + Clean, premium hero. A full-bleed background video (or image) sits behind + a restrained content block. A soft bottom scrim keeps text legible; elegant + media controls (play/pause, mute) live in the lower corner. {% endcomment %} {% liquid @@ -9,11 +9,19 @@ if section.settings.poster_image != blank assign poster = section.settings.poster_image | image_url: width: 2400 endif + + assign has_video = false + if section.settings.video_url != blank + assign has_video = true + endif %} -
-
- {% if section.settings.video_url != blank %} +
+
+ {% if has_video %}
+
-
- {% if section.settings.region != blank %} -

{{ section.settings.region }}

+ {% if has_video and section.settings.show_controls %} +
+ + +
{% endif %} +
-

- {{ section.settings.heading }} - {% if section.settings.heading_italic != blank %} - {{ section.settings.heading_italic }} +
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

{% endif %} -

- {% if section.settings.subheading != blank %} -

{{ section.settings.subheading }}

- {% endif %} +

+ {{ section.settings.heading }} + {% if section.settings.heading_italic != blank %} + {{ section.settings.heading_italic }} + {% endif %} +

-
- {% if section.settings.button_label != blank %} - - {{ section.settings.button_label }} - + {% if section.settings.subheading != blank %} +

{{ section.settings.subheading }}

{% endif %} - {% if section.settings.link_label != blank %} - - {{ section.settings.link_label }} - + + {% if section.settings.button_label != blank or section.settings.link_label != blank %} +
+ {% if section.settings.button_label != blank %} + + {{ section.settings.button_label }} + + {% endif %} + {% if section.settings.link_label != blank %} + + {{ section.settings.link_label }} + + {% endif %} +
{% endif %}
- -
- - - {{ section.settings.scroll_label }} - - {% if section.settings.coordinates != blank %} - {{ section.settings.coordinates }} - {% endif %} -
{% stylesheet %} .hero { position: relative; - min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; @@ -82,6 +112,10 @@ color: var(--color-contrast); isolation: isolate; } + .hero--h-standard { min-height: 88svh; } + .hero--h-tall { min-height: 94svh; } + .hero--h-full { min-height: 100svh; } + .hero__media { position: absolute; inset: 0; @@ -92,30 +126,53 @@ height: 100%; object-fit: cover; } + + /* Uniform tint (adjustable) + a soft bottom scrim for text legibility */ .hero__overlay { position: absolute; inset: 0; - background: - linear-gradient(to top, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0.15) 45%, rgba(10, 22, 40, 0.3) 100%), - rgba(10, 22, 40, calc(var(--overlay) / 100)); + background: rgba(14, 30, 51, calc(var(--overlay) / 100)); + } + .hero__scrim { + position: absolute; + inset: 0; + background: linear-gradient( + to top, + rgba(14, 30, 51, calc(var(--scrim) / 100)) 0%, + rgba(14, 30, 51, calc(var(--scrim) / 100 * 0.45)) 26%, + transparent 55% + ); } + .hero__inner { + padding-inline: var(--page-inline); + padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); + padding-top: var(--space-2xl); + width: 100%; + } .hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); - padding-inline: var(--page-inline); - padding-bottom: var(--space-xl); - max-width: 72rem; + max-width: 44rem; } + .hero__eyebrow { - color: var(--color-accent-soft); + font-size: var(--text-xs); + font-weight: 500; + letter-spacing: var(--tracking-eyebrow); + text-transform: uppercase; + color: var(--color-contrast); + opacity: 0.85; + margin: 0; } .hero__heading { font-size: var(--text-hero); font-weight: 400; + line-height: 0.98; margin: 0; + text-shadow: 0 1px 40px rgba(10, 22, 40, 0.28); } .hero__heading em { display: block; @@ -123,82 +180,51 @@ .hero__sub { font-size: var(--text-lg); font-weight: 300; + line-height: 1.6; letter-spacing: 0.01em; - color: color-mix(in srgb, var(--color-contrast) 85%, transparent); + color: color-mix(in srgb, var(--color-contrast) 88%, transparent); + max-width: 38rem; } .hero__actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; - margin-top: var(--space-sm); + margin-top: var(--space-xs); } .hero__text-link { color: var(--color-contrast); } - .hero__base { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-md); - border-top: 1px solid color-mix(in srgb, var(--color-contrast) 22%, transparent); - padding: 1.4rem var(--page-inline); - margin-top: var(--space-lg); + /* Centered variant */ + .hero--center .hero__inner { + padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); } - .hero__scroll-label { - display: inline-flex; + .hero--center .hero__content { align-items: center; - gap: 1rem; - } - .hero__scroll-line { - position: relative; - display: inline-block; - width: 3.5rem; - height: 1px; - background: color-mix(in srgb, var(--color-contrast) 30%, transparent); - overflow: hidden; - } - .hero__scroll-line span { - position: absolute; - inset: 0; - background: var(--color-contrast); - animation: hero-line 2.6s var(--ease) infinite; - } - - @keyframes hero-line { - 0% { transform: translateX(-100%); } - 55% { transform: translateX(0); } - 100% { transform: translateX(102%); } + text-align: center; + max-width: 52rem; + margin-inline: auto; } @media (max-width: 749px) { - .hero { - min-height: 96svh; - } + .hero--h-standard, + .hero--h-tall { min-height: 86svh; } + .hero--h-full { min-height: 94svh; } + .hero__content { gap: var(--space-sm); - padding-bottom: var(--space-lg); } .hero__sub { font-size: var(--text-base); } .hero__actions { gap: var(--space-md); - margin-top: var(--space-2xs); + width: 100%; } .hero__actions .button { - padding: 1rem 1.9rem; - } - .hero__base { - flex-wrap: wrap; - row-gap: 0.6rem; - padding-block: 1rem; - margin-top: var(--space-md); - } - .hero__base .meta-label { - font-size: 0.6rem; - letter-spacing: 2px; + flex: 1 1 auto; + padding-inline: 1.75rem; } } {% endstylesheet %} @@ -221,7 +247,7 @@ { "type": "image_picker", "id": "poster_image", - "label": "Poster image" + "label": "Poster / fallback image" }, { "type": "text", @@ -229,55 +255,103 @@ "label": "Poster image URL (fallback)", "default": "https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=2400&q=80" }, + { + "type": "checkbox", + "id": "show_controls", + "label": "Show video controls", + "default": true + }, + { + "type": "select", + "id": "height", + "label": "Height", + "options": [ + { "value": "standard", "label": "Standard" }, + { "value": "tall", "label": "Tall" }, + { "value": "full", "label": "Full screen" } + ], + "default": "tall" + }, { "type": "range", "id": "overlay_opacity", "min": 0, - "max": 80, + "max": 70, + "step": 5, + "unit": "%", + "label": "Overall tint", + "default": 10 + }, + { + "type": "range", + "id": "scrim_strength", + "min": 0, + "max": 90, "step": 5, "unit": "%", - "label": "Overlay darkness", - "default": 20 + "label": "Bottom scrim strength", + "info": "Darkens the lower area so text stays legible.", + "default": 60 }, { "type": "header", "content": "Content" }, + { + "type": "select", + "id": "text_align", + "label": "Alignment", + "options": [ + { "value": "left", "label": "Bottom left" }, + { "value": "center", "label": "Bottom center" } + ], + "default": "left" + }, { "type": "text", - "id": "region", - "label": "Region label", - "default": "Region N° 001 — Oceania" + "id": "eyebrow", + "label": "Eyebrow", + "default": "The Oceania Collection" }, { "type": "text", "id": "heading", "label": "Heading", - "default": "Travel the World," + "default": "Travel the world," }, { "type": "text", "id": "heading_italic", "label": "Heading (italic line)", - "default": "Collect the World" + "default": "collect the world" }, { "type": "textarea", "id": "subheading", "label": "Subheading", - "default": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story." + "default": "Rare, one-of-a-kind treasures gathered from artisans across the globe." }, { "type": "text", "id": "button_label", "label": "Primary button label", - "default": "Explore the collection" + "default": "Shop the collection" }, { "type": "url", "id": "button_url", "label": "Primary button link" }, + { + "type": "select", + "id": "button_style", + "label": "Button style", + "options": [ + { "value": "solid", "label": "Solid (light)" }, + { "value": "ghost", "label": "Ghost (outline)" } + ], + "default": "solid" + }, { "type": "text", "id": "link_label", @@ -288,22 +362,6 @@ "type": "url", "id": "link_url", "label": "Text link URL" - }, - { - "type": "header", - "content": "Base row" - }, - { - "type": "text", - "id": "scroll_label", - "label": "Scroll label", - "default": "Scroll to explore" - }, - { - "type": "text", - "id": "coordinates", - "label": "Coordinates", - "default": "17.6797° S, 149.4068° W — South Pacific" } ], "presets": [ diff --git a/sections/video-story.liquid b/sections/video-story.liquid new file mode 100644 index 000000000..b71164593 --- /dev/null +++ b/sections/video-story.liquid @@ -0,0 +1,392 @@ +{% comment %} + Cinematic video storytelling section — built for telling collection and + brand stories. Two layouts: + • Overlay — full-bleed video with an editorial text block over a scrim. + • Split — video on one side, a quiet text column on the other. + Video can autoplay muted on loop, or wait behind a poster until pressed. +{% endcomment %} + +{% liquid + assign poster = section.settings.poster_url + if section.settings.poster_image != blank + assign poster = section.settings.poster_image | image_url: width: 2000 + endif + + assign has_video = false + if section.settings.video_url != blank + assign has_video = true + endif +%} + +
+
+
+ {% if has_video %} + + {% else %} + {{ section.settings.heading | escape }} + {% endif %} + + {% if section.settings.layout == 'overlay' %} +
+ {% endif %} + + {% if has_video and section.settings.show_controls %} +
+ + {% if section.settings.autoplay %} + + {% endif %} +
+ {% endif %} + + {% if section.settings.layout == 'overlay' %} +
+ {% render 'vstory-copy', s: section.settings %} +
+ {% endif %} +
+ + {% if section.settings.layout == 'split' %} +
+ {% render 'vstory-copy', s: section.settings %} +
+ {% endif %} +
+
+ +{% stylesheet %} + .vstory { + position: relative; + overflow: hidden; + } + + .vstory__media { + position: relative; + overflow: hidden; + } + .vstory--h-standard { aspect-ratio: 16 / 9; } + .vstory--h-tall { aspect-ratio: 4 / 5; } + .vstory--h-cinema { aspect-ratio: 21 / 9; } + .vstory__bg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + .vstory__scrim { + position: absolute; + inset: 0; + background: linear-gradient( + to top, + rgba(14, 30, 51, calc(var(--scrim) / 100)) 0%, + rgba(14, 30, 51, calc(var(--scrim) / 100 * 0.35)) 40%, + transparent 72% + ); + } + + /* --- Copy block --- */ + .vstory__content { + display: flex; + flex-direction: column; + gap: var(--space-md); + color: var(--color-contrast); + } + .vstory__eyebrow { + font-size: var(--text-xs); + font-weight: 500; + letter-spacing: var(--tracking-eyebrow); + text-transform: uppercase; + opacity: 0.85; + margin: 0; + } + .vstory__heading { + font-size: var(--text-3xl); + font-weight: 400; + line-height: 1; + margin: 0; + } + .vstory__heading em { display: block; } + .vstory__body { + font-size: var(--text-lg); + font-weight: 300; + line-height: 1.7; + max-width: 40ch; + color: color-mix(in srgb, var(--color-contrast) 85%, transparent); + } + .vstory__actions { + display: flex; + align-items: center; + gap: var(--space-lg); + flex-wrap: wrap; + margin-top: var(--space-2xs); + } + .vstory__text-link { color: inherit; } + + /* --- Overlay layout --- */ + .vstory--overlay .vstory__content--overlay { + position: absolute; + inset: 0; + z-index: 2; + justify-content: flex-end; + padding: clamp(1.75rem, 1rem + 4vw, 4.5rem) var(--page-inline); + pointer-events: none; + } + .vstory--overlay .vstory__content--overlay > * { pointer-events: auto; } + .vstory--overlay.vstory--align-center .vstory__content--overlay { + align-items: center; + text-align: center; + justify-content: center; + } + .vstory--overlay .vstory__heading { font-size: var(--text-4xl); } + .vstory--overlay .vstory__body { + text-shadow: 0 1px 30px rgba(10, 22, 40, 0.3); + } + + /* --- Split layout --- */ + .vstory--split .vstory__grid { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: stretch; + } + .vstory--split .vstory__media { + height: 100%; + aspect-ratio: auto; + min-height: 34rem; + } + .vstory--split .vstory__content--split { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); + background: var(--color-background); + color: var(--color-foreground); + } + .vstory--split.on-dark .vstory__content--split { + background: var(--color-navy); + color: var(--color-contrast); + } + .vstory--split .vstory__body { + color: var(--color-foreground-50); + } + .vstory--split.on-dark .vstory__body { + color: color-mix(in srgb, var(--color-contrast) 80%, transparent); + } + .vstory--split.vstory--media-right .vstory__media { order: 2; } + .vstory--split.vstory--media-right .vstory__content--split { order: 1; } + + .vstory--split .vstory__eyebrow { color: var(--color-accent); } + .vstory--split.on-dark .vstory__eyebrow { color: var(--color-accent-soft); } + + @media (max-width: 989px) { + .vstory--split .vstory__grid { + grid-template-columns: 1fr; + } + .vstory--split .vstory__media, + .vstory--split.vstory--media-right .vstory__media { + order: 0; + min-height: 0; + aspect-ratio: 4 / 3; + } + .vstory--split .vstory__content--split, + .vstory--split.vstory--media-right .vstory__content--split { + order: 1; + } + .vstory--tall { aspect-ratio: 3 / 4; } + .vstory--cinema { aspect-ratio: 16 / 9; } + } + + @media (max-width: 749px) { + .vstory--overlay .vstory__heading { font-size: var(--text-3xl); } + .vstory__body { font-size: var(--text-base); } + .vstory--overlay .vstory__content--overlay { + padding-inline: var(--page-margin); + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Video story", + "settings": [ + { + "type": "header", + "content": "Layout" + }, + { + "type": "select", + "id": "layout", + "label": "Layout", + "options": [ + { "value": "overlay", "label": "Full-bleed (text over video)" }, + { "value": "split", "label": "Split (video + text)" } + ], + "default": "overlay" + }, + { + "type": "select", + "id": "height", + "label": "Video shape (full-bleed)", + "options": [ + { "value": "cinema", "label": "Cinematic (21:9)" }, + { "value": "standard", "label": "Widescreen (16:9)" }, + { "value": "tall", "label": "Portrait (4:5)" } + ], + "default": "cinema" + }, + { + "type": "select", + "id": "media_position", + "label": "Video side (split layout)", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "right", "label": "Right" } + ], + "default": "left" + }, + { + "type": "select", + "id": "text_align", + "label": "Text alignment (full-bleed)", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" } + ], + "default": "left" + }, + { + "type": "checkbox", + "id": "dark", + "label": "Dark text panel (split layout)", + "default": true + }, + { + "type": "header", + "content": "Media" + }, + { + "type": "text", + "id": "video_url", + "label": "Video URL (mp4)", + "default": "https://assets.mixkit.co/videos/preview/mixkit-tropical-beach-with-palm-trees-and-clear-water-1564-large.mp4" + }, + { + "type": "image_picker", + "id": "poster_image", + "label": "Poster / fallback image" + }, + { + "type": "text", + "id": "poster_url", + "label": "Poster image URL (fallback)", + "default": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80" + }, + { + "type": "checkbox", + "id": "autoplay", + "label": "Autoplay (muted, looping)", + "default": true + }, + { + "type": "checkbox", + "id": "show_controls", + "label": "Show video controls", + "default": true + }, + { + "type": "range", + "id": "scrim_strength", + "min": 0, + "max": 90, + "step": 5, + "unit": "%", + "label": "Scrim strength (full-bleed)", + "default": 55 + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Oceania — Chapter One" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Born of the" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic line)", + "default": "South Pacific" + }, + { + "type": "richtext", + "id": "body", + "label": "Body", + "default": "

Follow the tide to where each piece began — the hands, the heritage and the horizon behind the Oceania collection.

" + }, + { + "type": "text", + "id": "button_label", + "label": "Button label", + "default": "Explore Oceania" + }, + { + "type": "url", + "id": "button_url", + "label": "Button link" + }, + { + "type": "text", + "id": "link_label", + "label": "Text link label" + }, + { + "type": "url", + "id": "link_url", + "label": "Text link URL" + } + ], + "presets": [ + { + "name": "Video story" + } + ] +} +{% endschema %} diff --git a/snippets/vstory-copy.liquid b/snippets/vstory-copy.liquid new file mode 100644 index 000000000..b0c47b701 --- /dev/null +++ b/snippets/vstory-copy.liquid @@ -0,0 +1,47 @@ +{% comment %} + Copy block for the video story section. Shared between the overlay and + split layouts so the markup stays in one place. + + Accepts: + s — the section.settings object +{% endcomment %} + +{% liquid + assign is_overlay = false + if s.layout == 'overlay' + assign is_overlay = true + endif +%} + +{% if s.eyebrow != blank %} +

{{ s.eyebrow }}

+{% endif %} + +

+ {{ s.heading }} + {% if s.heading_italic != blank %} + {{ s.heading_italic }} + {% endif %} +

+ +{% if s.body != blank %} +
{{ s.body }}
+{% endif %} + +{% if s.button_label != blank or s.link_label != blank %} +
+ {% if s.button_label != blank %} + + {{ s.button_label }} + + {% endif %} + {% if s.link_label != blank %} + + {{ s.link_label }} + + {% endif %} +
+{% endif %} diff --git a/templates/index.json b/templates/index.json index e8dac11d9..c0055e9fa 100644 --- a/templates/index.json +++ b/templates/index.json @@ -12,15 +12,20 @@ "hero": { "type": "hero", "settings": { - "region": "Region N° 001 — Oceania", - "heading": "Travel the World,", - "heading_italic": "Collect the World", - "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe. Every jewel tells a story.", - "button_label": "Explore the collection", - "link_label": "Our story", - "scroll_label": "Scroll to explore", - "coordinates": "17.6797° S, 149.4068° W — South Pacific", - "overlay_opacity": 20 + "video_url": "https://assets.mixkit.co/videos/preview/mixkit-waves-coming-to-the-beach-5016-large.mp4", + "poster_url": "https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=2400&q=80", + "show_controls": true, + "height": "tall", + "overlay_opacity": 10, + "scrim_strength": 60, + "text_align": "left", + "eyebrow": "The Oceania Collection", + "heading": "Travel the world,", + "heading_italic": "collect the world", + "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe.", + "button_label": "Shop the collection", + "button_style": "solid", + "link_label": "Our story" } }, "marquee": { @@ -169,6 +174,25 @@ }, "block_order": ["f1", "f2", "f3", "f4", "f5"] }, + "video_story": { + "type": "video-story", + "settings": { + "layout": "overlay", + "height": "cinema", + "text_align": "left", + "video_url": "https://assets.mixkit.co/videos/preview/mixkit-tropical-beach-with-palm-trees-and-clear-water-1564-large.mp4", + "poster_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80", + "autoplay": true, + "show_controls": true, + "scrim_strength": 55, + "eyebrow": "Oceania — Chapter One", + "heading": "Born of the", + "heading_italic": "South Pacific", + "body": "

Follow the tide to where each piece began — the hands, the heritage and the horizon behind the Oceania collection.

", + "button_label": "Explore Oceania", + "link_label": "Watch the film" + } + }, "story_artisans": { "type": "story", "settings": { @@ -239,6 +263,7 @@ "regions", "story", "featured", + "video_story", "story_artisans", "promises", "cta" From 3ecdec6d2a09163434a3a638a772c862c6d6c8c8 Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Wed, 15 Jul 2026 15:12:31 +0000 Subject: [PATCH 16/25] Update from Shopify for theme skeleton-theme/main Committed from shop: Odyssey Jewels --- templates/index.json | 202 +++++++++++++++++++++++++++++-------------- 1 file changed, 138 insertions(+), 64 deletions(-) diff --git a/templates/index.json b/templates/index.json index c0055e9fa..1f71c8955 100644 --- a/templates/index.json +++ b/templates/index.json @@ -12,7 +12,7 @@ "hero": { "type": "hero", "settings": { - "video_url": "https://assets.mixkit.co/videos/preview/mixkit-waves-coming-to-the-beach-5016-large.mp4", + "video_url": "https://cdn.media.amplience.net/v/pandora/2026Q2D_culture_pearls_go_con_be_motion_video_01_6s_3x4_Gemini_D1229867/mp4_720p", "poster_url": "https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=2400&q=80", "show_controls": true, "height": "tall", @@ -24,78 +24,128 @@ "heading_italic": "collect the world", "subheading": "Rare, one-of-a-kind treasures gathered from artisans across the globe.", "button_label": "Shop the collection", + "button_url": "", "button_style": "solid", - "link_label": "Our story" + "link_label": "Our story", + "link_url": "" } }, "marquee": { "type": "marquee", + "blocks": { + "m1": { + "type": "item", + "settings": { + "text": "Oceania" + } + }, + "m2": { + "type": "item", + "settings": { + "text": "Every jewel tells a story" + } + }, + "m3": { + "type": "item", + "settings": { + "text": "Asia" + } + }, + "m4": { + "type": "item", + "settings": { + "text": "One of a kind" + } + }, + "m5": { + "type": "item", + "settings": { + "text": "The Founders Collection" + } + }, + "m6": { + "type": "item", + "settings": { + "text": "Artisan made" + } + } + }, + "block_order": [ + "m1", + "m2", + "m3", + "m4", + "m5", + "m6" + ], "settings": { "dark": false, "speed": 45 - }, - "blocks": { - "m1": { "type": "item", "settings": { "text": "Oceania" } }, - "m2": { "type": "item", "settings": { "text": "Every jewel tells a story" } }, - "m3": { "type": "item", "settings": { "text": "Asia" } }, - "m4": { "type": "item", "settings": { "text": "One of a kind" } }, - "m5": { "type": "item", "settings": { "text": "The Founders Collection" } }, - "m6": { "type": "item", "settings": { "text": "Artisan made" } } - }, - "block_order": ["m1", "m2", "m3", "m4", "m5", "m6"] + } }, "regions": { "type": "regions", - "settings": { - "eyebrow": "The regions", - "heading": "Where in the world", - "heading_italic": "will you begin?", - "link_label": "All regions" - }, "blocks": { "r1": { "type": "region", "settings": { - "title": "Oceania", + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80", "status": "Available now", + "title": "Oceania", "subtitle": "Treasures of the South Pacific", "meta": "First drop — 200 pieces", "cta": "Discover", - "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80" + "link": "" } }, "r2": { "type": "region", "settings": { - "title": "The Founders Collection", + "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1400&q=80", "status": "By invitation", + "title": "The Founders Collection", "subtitle": "Rare pieces for our earliest collectors", "meta": "Private access", "cta": "Enquire", - "image_url": "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=1400&q=80" + "link": "" } }, "r3": { "type": "region", "settings": { - "title": "Asia", + "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80", "status": "Coming soon", + "title": "Asia", "subtitle": "Along the ancient trade routes", "meta": "Region in progress", "cta": "Join the waitlist", - "image_url": "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=1400&q=80" + "link": "" } } }, - "block_order": ["r1", "r2", "r3"] + "block_order": [ + "r1", + "r2", + "r3" + ], + "settings": { + "eyebrow": "The regions", + "heading": "Where in the world", + "heading_italic": "will you begin?", + "link_label": "All regions", + "link_url": "" + } }, "story": { "type": "story", "settings": { - "media_position": "left", - "dark": false, "chapter": "01", "vertical_label": "The Odyssey Journal — Chapter 01", + "image_url": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1468413253725-0d5181091126?auto=format&fit=crop&w=900&q=80", + "visual_caption": "Gold work — hand finished, one of one", + "media_position": "left", + "dark": false, "eyebrow": "Our philosophy", "heading": "Every jewel", "heading_italic": "tells a story", @@ -107,79 +157,91 @@ "stat_3_value": "200", "stat_3_label": "Pieces in first drop", "button_label": "Read our story", - "visual_caption": "Gold work — hand finished, one of one", - "image_url": "https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1600&q=80", - "image_2_url": "https://images.unsplash.com/photo-1468413253725-0d5181091126?auto=format&fit=crop&w=900&q=80" + "button_url": "" } }, "featured": { "type": "featured", - "settings": { - "eyebrow": "The first drop", - "heading": "Oceania", - "heading_italic": "Collection", - "link_label": "View the full collection" - }, "blocks": { "f1": { "type": "piece", "settings": { - "title": "Coral Tide Ring", - "region": "Oceania", + "image_url": "https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=80", "badge": "One of a kind", + "region": "Oceania", + "title": "Coral Tide Ring", "price": "$1,200", - "image_url": "https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=80" + "link": "" } }, "f2": { "type": "piece", "settings": { - "title": "Lagoon Pearl Pendant", - "region": "Oceania", + "image_url": "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&q=80", "badge": "One of a kind", + "region": "Oceania", + "title": "Lagoon Pearl Pendant", "price": "$980", - "image_url": "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&q=80" + "link": "" } }, "f3": { "type": "piece", "settings": { - "title": "Reef Gold Bangle", - "region": "Oceania", + "image_url": "https://images.unsplash.com/photo-1611085583191-a3b181a88401?auto=format&fit=crop&w=900&q=80", "badge": "One of a kind", + "region": "Oceania", + "title": "Reef Gold Bangle", "price": "$1,540", - "image_url": "https://images.unsplash.com/photo-1611085583191-a3b181a88401?auto=format&fit=crop&w=900&q=80" + "link": "" } }, "f4": { "type": "piece", "settings": { - "title": "Tide Drop Earrings", - "region": "Oceania", + "image_url": "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80", "badge": "One of a kind", + "region": "Oceania", + "title": "Tide Drop Earrings", "price": "$760", - "image_url": "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80" + "link": "" } }, "f5": { "type": "piece", "settings": { - "title": "Atoll Signet", - "region": "Oceania", + "image_url": "https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=900&q=80", "badge": "One of a kind", + "region": "Oceania", + "title": "Atoll Signet", "price": "$1,880", - "image_url": "https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=900&q=80" + "link": "" } } }, - "block_order": ["f1", "f2", "f3", "f4", "f5"] + "block_order": [ + "f1", + "f2", + "f3", + "f4", + "f5" + ], + "settings": { + "eyebrow": "The first drop", + "heading": "Oceania", + "heading_italic": "Collection", + "link_label": "View the full collection", + "link_url": "" + } }, "video_story": { "type": "video-story", "settings": { "layout": "overlay", "height": "cinema", + "media_position": "left", "text_align": "left", + "dark": true, "video_url": "https://assets.mixkit.co/videos/preview/mixkit-tropical-beach-with-palm-trees-and-clear-water-1564-large.mp4", "poster_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80", "autoplay": true, @@ -190,16 +252,21 @@ "heading_italic": "South Pacific", "body": "

Follow the tide to where each piece began — the hands, the heritage and the horizon behind the Oceania collection.

", "button_label": "Explore Oceania", - "link_label": "Watch the film" + "button_url": "", + "link_label": "Watch the film", + "link_url": "" } }, "story_artisans": { "type": "story", "settings": { - "media_position": "right", - "dark": true, "chapter": "02", "vertical_label": "The Odyssey Journal — Chapter 02", + "image_url": "https://images.unsplash.com/photo-1599459183200-59c7687a0275?auto=format&fit=crop&w=1600&q=80", + "image_2_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80", + "visual_caption": "Layered gold — worn the island way", + "media_position": "right", + "dark": true, "eyebrow": "The makers", "heading": "Meet the", "heading_italic": "artisans", @@ -208,17 +275,14 @@ "stat_1_label": "Master artisans", "stat_2_value": "05", "stat_2_label": "Islands of Oceania", + "stat_3_value": "", + "stat_3_label": "", "button_label": "Meet the makers", - "visual_caption": "Layered gold — worn the island way", - "image_url": "https://images.unsplash.com/photo-1599459183200-59c7687a0275?auto=format&fit=crop&w=1600&q=80", - "image_2_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80" + "button_url": "" } }, "promises": { "type": "promises", - "settings": { - "eyebrow": "The Odyssey standard" - }, "blocks": { "p1": { "type": "promise", @@ -242,18 +306,28 @@ } } }, - "block_order": ["p1", "p2", "p3"] + "block_order": [ + "p1", + "p2", + "p3" + ], + "settings": { + "eyebrow": "The Odyssey standard", + "dark": false + } }, "cta": { "type": "cta-banner", "settings": { + "video_url": "", + "image_url": "https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=2400&q=80", + "overlay_opacity": 45, "eyebrow": "The odyssey begins", "heading": "Begin your", "heading_italic": "collection", "subheading": "The first region has landed. Claim a piece of Oceania before it's gone forever.", "button_label": "Shop the first drop", - "overlay_opacity": 45, - "image_url": "https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=2400&q=80" + "button_url": "" } } }, From 30c63d028beb7cf7a33f66f47701f9ec7e0185b1 Mon Sep 17 00:00:00 2001 From: WestpointCapital Date: Wed, 15 Jul 2026 17:13:19 +0200 Subject: [PATCH 17/25] Update --- assets/critical.css | 32 ++++++++++++++++++-------------- sections/hero.liquid | 34 ++++++++++++++++++++++++++++------ sections/video-story.liquid | 25 +++++++++++++++++++++++-- 3 files changed, 69 insertions(+), 22 deletions(-) diff --git a/assets/critical.css b/assets/critical.css index d4da78fa6..3a96551a7 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -256,32 +256,36 @@ button.button { right: clamp(1.25rem, 0.5rem + 2vw, 2.75rem); bottom: clamp(1.25rem, 0.5rem + 2vw, 2.75rem); display: flex; - gap: 0.6rem; + gap: 1px; z-index: 3; } .media-controls__btn { display: inline-flex; align-items: center; justify-content: center; - width: 2.75rem; - height: 2.75rem; + width: 2.6rem; + height: 2.6rem; padding: 0; color: var(--color-contrast); - background: color-mix(in srgb, var(--color-navy) 32%, transparent); - border: 1px solid color-mix(in srgb, var(--color-contrast) 55%, transparent); - border-radius: 50%; + background: color-mix(in srgb, var(--color-navy) 42%, transparent); + border: 1px solid color-mix(in srgb, var(--color-contrast) 35%, transparent); + border-radius: var(--style-border-radius-inputs); cursor: pointer; - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); } +/* Keep the pair reading as one refined unit */ +.media-controls__btn + .media-controls__btn { + border-left: none; +} .media-controls__btn:hover { - background: color-mix(in srgb, var(--color-navy) 55%, transparent); - border-color: var(--color-contrast); + background: var(--color-accent); + border-color: var(--color-accent); } .media-controls__icon { - width: 1.15rem; - height: 1.15rem; + width: 0.95rem; + height: 0.95rem; } /* Toggle icon visibility from the button's data-state */ .media-controls__icon--play, @@ -295,8 +299,8 @@ button.button { @media (max-width: 749px) { .media-controls__btn { - width: 2.5rem; - height: 2.5rem; + width: 2.4rem; + height: 2.4rem; } } diff --git a/sections/hero.liquid b/sections/hero.liquid index b32040b19..708f4d929 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -10,8 +10,10 @@ assign poster = section.settings.poster_image | image_url: width: 2400 endif + assign hero_video = section.settings.video + assign has_video = false - if section.settings.video_url != blank + if hero_video != blank or section.settings.video_url != blank assign has_video = true endif %} @@ -21,7 +23,20 @@ style="--overlay: {{ section.settings.overlay_opacity }}%; --scrim: {{ section.settings.scrim_strength }}%;" >
- {% if has_video %} + {% if hero_video != blank %} + + {% elsif section.settings.video_url != blank %}