diff --git a/.preview/index.html b/.preview/index.html new file mode 100644 index 000000000..5b49c4ccc --- /dev/null +++ b/.preview/index.html @@ -0,0 +1,331 @@ + + + + + +OJ preview harness + + + + + + + + + + +
+
+

Complimentary worldwide shipping — Every jewel tells a story

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

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.

+
+ 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✦ +
+ +
+
+
+ +
+
+
+
+

The regions

+

Where in the world will you begin?

+
+ All regions +
+
+ +
+ Oceania +
+ N° 01 + Available now +
+

Oceania

+

Treasures of the South Pacific

+
+
+
+ First drop — 200 pieces + Discover +
+ + +
+ Founders +
+ N° 02 + By invitation +
+

The Founders Collection

+

Rare pieces for our earliest collectors

+
+
+
+ Private access + Enquire +
+ + +
+ Asia +
+ N° 03 + Coming soon +
+

Asia

+

Along the ancient trade routes

+
+
+
+ Region in progress + Join the waitlist +
+ +
+
+
+ +
+
+ 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 region 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 cdb1ae1aa..3a96551a7 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -74,12 +74,284 @@ 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.02; + 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); +} + +/** 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 with optional hairline */ +.eyebrow { + 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; + 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, region 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, +button.button { + --btn-bg: var(--color-navy); + --btn-fg: var(--color-contrast); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.75em; + padding: 1.1rem 2.75rem; + min-height: 3.25rem; + font-family: var(--font-primary--family); + font-size: var(--text-xs); + font-weight: 600; + letter-spacing: 2.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-xs); + font-weight: 600; + letter-spacing: 2.5px; + text-transform: uppercase; + text-decoration: none; + padding-bottom: 0.35rem; +} +.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); +} + +/** 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: 1px; + z-index: 3; +} +.media-controls__btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.6rem; + height: 2.6rem; + padding: 0; + color: var(--color-contrast); + 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(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: var(--color-accent); + border-color: var(--color-accent); +} +.media-controls__icon { + width: 0.95rem; + height: 0.95rem; +} +/* 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.4rem; + height: 2.4rem; + } +} + +/** 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 */ +/* + * 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: 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)) + ); + } +} + /** * Setup a grid that enables both full-width and constrained layouts * depending on the class of the child elements. @@ -99,19 +371,42 @@ body { --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; + 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; + overflow-x: clip; +} + +/* 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/assets/theme.js b/assets/theme.js new file mode 100644 index 000000000..731ba2584 --- /dev/null +++ b/assets/theme.js @@ -0,0 +1,157 @@ +/* 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 }); + } + + /* Responsive background video: swap desktop/mobile source by viewport */ + const initResponsiveVideos = (root = document) => { + root.querySelectorAll('video[data-responsive-video]').forEach((video) => { + if (video.dataset.responsiveReady === 'true') return; + video.dataset.responsiveReady = 'true'; + + const desktop = video.dataset.desktop || ''; + const mobile = video.dataset.mobile || desktop; + const bp = parseInt(video.dataset.breakpoint || '750', 10); + const mq = window.matchMedia(`(max-width: ${bp}px)`); + + /* Inline tags render the desktop file, so we start there */ + let current = 'desktop'; + + const apply = () => { + const target = mq.matches && mobile ? 'mobile' : 'desktop'; + if (target === current) return; + current = target; + + const url = target === 'mobile' ? mobile : desktop; + if (!url) return; + + const wasPlaying = !video.paused && !video.dataset.userPaused; + video.src = url; + video.load(); + if (video.autoplay || wasPlaying) { + video.play().catch(() => {}); + } + }; + + apply(); + if (mq.addEventListener) { + mq.addEventListener('change', apply); + } else if (mq.addListener) { + mq.addListener(apply); + } + }); + }; + + /* Cinematic media: play/pause + mute toggles (hero, video story) */ + const initVideoControls = (root = document) => { + root.querySelectorAll('[data-video-section]').forEach((scope) => { + if (scope.dataset.videoReady === 'true') return; + const video = scope.querySelector('video'); + if (!video) return; + scope.dataset.videoReady = 'true'; + + const playBtn = scope.querySelector('[data-video-play]'); + const muteBtn = scope.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', (event) => { + event.preventDefault(); + event.stopPropagation(); + + if (video.paused) { + video.dataset.userPaused = ''; + video.play().catch(() => {}); + } else { + video.dataset.userPaused = 'true'; + video.pause(); + } + syncPlay(); + }); + } + + if (muteBtn) { + muteBtn.addEventListener('click', (event) => { + event.preventDefault(); + event.stopPropagation(); + + video.muted = !video.muted; + syncMute(); + + /* Unmuting often needs an explicit play() in the same gesture */ + if (!video.muted && video.paused) { + video.play().catch(() => {}); + syncPlay(); + } + }); + } + + video.addEventListener('play', syncPlay); + video.addEventListener('pause', syncPlay); + video.addEventListener('volumechange', syncMute); + + /* Pause offscreen videos to save resources; don't fight user pause */ + const playState = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (video.dataset.userPaused) continue; + + if (entry.isIntersecting && video.paused && video.autoplay) { + video.play().catch(() => {}); + } else if (!entry.isIntersecting && !video.paused) { + video.pause(); + } + } + }, + { threshold: 0.2 } + ); + playState.observe(video); + + syncPlay(); + syncMute(); + }); + }; + + initResponsiveVideos(); + initVideoControls(); + document.addEventListener('shopify:section:load', (event) => { + const scope = event.target || document; + initResponsiveVideos(scope); + initVideoControls(scope); + }); +})(); diff --git a/config/settings_schema.json b/config/settings_schema.json index 8d3b532d1..2e89e9337 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": "cormorant_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..1a921aaae --- /dev/null +++ b/docs/ODYSSEY-JEWELS-BUILD-PLAN.md @@ -0,0 +1,330 @@ +# 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 regions.

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

{{ block.settings.title }}

+ {% endif %} + +
+ {% endif %} + {% endfor %} +
+ + + -
- {% if section.settings.show_payment_icons %} - {% for type in shop.enabled_payment_types %} - {{ type | payment_type_svg_tag }} - {% endfor %} - {% endif %} +
+

+ © {{ '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 %} + {{ type | payment_type_svg_tag }} + {% endfor %} +
+ {% endif %} +
{% stylesheet %} - footer { + .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; - justify-content: space-between; - margin-top: 2rem; + 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); } - footer a { + .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: var(--color-foreground); + 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 to fit any phone width */ + .site-footer__giant { + font-family: var(--font-heading--family); + font-size: clamp(1.35rem, 9vw, 10rem); + line-height: 1.05; + text-transform: uppercase; + 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); + border-bottom: 1px solid color-mix(in srgb, var(--color-contrast) 15%, transparent); + padding-bottom: var(--space-lg); + margin: 0; } - footer .footer__links, - footer .footer__payment { + + .site-footer__bottom { display: flex; - gap: 1rem; + 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); + padding-inline: var(--page-margin); + } + .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); + } + .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 %} @@ -42,9 +268,48 @@ "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": "Explore the regions" + }, + { + "type": "text", + "id": "newsletter_placeholder", + "label": "Newsletter placeholder", + "default": "Enter your email" + }, + { + "type": "header", + "content": "Bottom row" + }, + { + "type": "text", + "id": "coordinates", + "label": "Coordinates line", + "default": "Charting all seven regions of the world" }, { "type": "checkbox", @@ -52,6 +317,36 @@ "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", + "default": "footer" + } + ] + } + ], + "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..a26a2c9a1 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,76 +1,545 @@ -
-

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

+{% comment %} + 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 %} -
- {% for link in section.settings.menu.links %} - {{ link.title | link_to: link.url }} - {% endfor %} -
+{% liquid + assign overlay = false + if section.settings.transparent_on_home and template.name == 'index' + assign overlay = true + endif -
- {% if shop.customer_accounts_enabled %} - - {{ 'icon-account.svg' | inline_asset_content }} - - {% endif %} + if section.settings.announcement != blank + assign ann_height = '2.5rem' + else + assign ann_height = '0rem' + endif +%} - - {% if cart.item_count > 0 %} - {{ cart.item_count }} - {% 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 %} - {{ 'icon-cart.svg' | inline_asset_content }} +
+
+ + + +
+ + + {% if section.settings.logo != blank %} + {{ + section.settings.logo + | image_url: width: 600 + | image_tag: + 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 }} + {% endif %} + +
+ + + + + {% if shop.customer_accounts_enabled %} + + {% endif %} + + + + {% if cart.item_count > 0 %} + {{ cart.item_count }} + {% endif %} + +
+
+
+ +{% # Full-screen menu overlay %} +
+ {% stylesheet %} - header { - height: 5rem; + :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: space-between; + 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; } - header a { + + /* Bar: backdrop lives on the bar itself so it always paints edge to edge */ + .hdr__bar { position: relative; - text-decoration: none; - color: var(--color-foreground); + 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); } - header a sup { + .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; - left: 100%; + 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; - max-width: var(--page-margin); } - header svg { - width: 2rem; + 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); } - header .header__menu, - header .header__icons { + .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; - gap: 1rem; + 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; + } } {% endstylesheet %} +{% javascript %} + 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 %} { "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", - "label": "t:labels.menu" + "label": "t:labels.menu", + "default": "main-menu" }, { "type": "link_list", "id": "customer_account_menu", "label": "t:labels.customer_account_menu", "default": "customer-account-main-menu" + }, + { + "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 new file mode 100644 index 000000000..a3b87a117 --- /dev/null +++ b/sections/hero.liquid @@ -0,0 +1,400 @@ +{% comment %} + 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 + assign poster = section.settings.poster_url + 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 != blank or section.settings.video_url != blank or section.settings.video_mobile != blank or section.settings.video_mobile_url != blank + assign has_video = true + endif +%} + +
+
+ {% if has_video %} + {% render 'responsive-bg-video', + classes: 'hero__bg', + desktop_video: section.settings.video, + desktop_url: section.settings.video_url, + mobile_video: section.settings.video_mobile, + mobile_url: section.settings.video_mobile_url, + poster: poster, + autoplay: true + %} + {% else %} + + {% endif %} + +
+
+
+ +
+
+ {% 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.subheading != blank %} +

{{ section.settings.subheading }}

+ {% endif %} + + {% 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 %} +
+
+ + {% if has_video and section.settings.show_controls %} +
+ + +
+ {% endif %} +
+ +{% stylesheet %} + .hero { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + overflow: hidden; + 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; + z-index: -1; + } + .hero__bg { + width: 100%; + height: 100%; + object-fit: cover; + } + + /* Uniform tint (adjustable) + a soft bottom scrim for text legibility */ + .hero__overlay { + position: absolute; + inset: 0; + background: rgba(14, 30, 51, calc(var(--overlay) / 100)); + pointer-events: none; + } + .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% + ); + pointer-events: none; + } + + .hero .media-controls { + z-index: 2; + } + + .hero__inner { + position: relative; + z-index: 1; + 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); + max-width: 44rem; + } + + .hero__eyebrow { + 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: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); + font-weight: 400; + line-height: 1.06; + letter-spacing: 0.004em; + margin: 0; + text-shadow: 0 1px 32px rgba(10, 22, 40, 0.22); + } + .hero__heading em { + display: block; + } + .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) 88%, transparent); + max-width: 38rem; + } + .hero__actions { + display: flex; + align-items: center; + gap: var(--space-lg); + flex-wrap: wrap; + margin-top: var(--space-xs); + } + .hero__text-link { + color: var(--color-contrast); + } + + /* Centered variant */ + .hero--center .hero__inner { + padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); + } + .hero--center .hero__content { + align-items: center; + text-align: center; + max-width: 52rem; + margin-inline: auto; + } + + @media (max-width: 749px) { + .hero--h-standard, + .hero--h-tall { min-height: 86svh; } + .hero--h-full { min-height: 94svh; } + + .hero__content { + gap: var(--space-sm); + } + .hero__sub { + font-size: var(--text-base); + } + .hero__actions { + gap: var(--space-md); + width: 100%; + } + .hero__actions .button { + flex: 1 1 auto; + padding-inline: 1.75rem; + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Hero", + "settings": [ + { + "type": "header", + "content": "Media" + }, + { + "type": "video", + "id": "video", + "label": "Desktop video (upload)", + "info": "Upload or pick a Shopify-hosted video. Takes priority over the URL below." + }, + { + "type": "text", + "id": "video_url", + "label": "Desktop video URL (mp4)", + "info": "Used only if no uploaded desktop video is set. Leave empty for image only.", + "default": "https://assets.mixkit.co/videos/preview/mixkit-waves-coming-to-the-beach-5016-large.mp4" + }, + { + "type": "video", + "id": "video_mobile", + "label": "Mobile video (upload)", + "info": "Optional. Shown on phones instead of the desktop video. Falls back to the desktop video when empty." + }, + { + "type": "text", + "id": "video_mobile_url", + "label": "Mobile video URL (mp4)", + "info": "Used only if no uploaded mobile video is set." + }, + { + "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-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": 70, + "step": 5, + "unit": "%", + "label": "Overall tint", + "default": 10 + }, + { + "type": "range", + "id": "scrim_strength", + "min": 0, + "max": 90, + "step": 5, + "unit": "%", + "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": "eyebrow", + "label": "Eyebrow", + "default": "The Oceania Collection" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Travel the world," + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic line)", + "default": "collect the world" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Rare, one-of-a-kind treasures gathered from artisans across the globe." + }, + { + "type": "text", + "id": "button_label", + "label": "Primary button label", + "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", + "label": "Text link label", + "default": "Our story" + }, + { + "type": "url", + "id": "link_url", + "label": "Text link URL" + } + ], + "presets": [ + { + "name": "Hero" + } + ] +} +{% endschema %} diff --git a/sections/marquee.liquid b/sections/marquee.liquid new file mode 100644 index 000000000..7a9479d54 --- /dev/null +++ b/sections/marquee.liquid @@ -0,0 +1,140 @@ +{% 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; + } + } + + @media (max-width: 749px) { + .marquee { + padding-block: 1rem; + } + .marquee__item { + padding-inline: 1.5rem; + } + .marquee__item--serif { + font-size: var(--text-xl); + } + } +{% 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 new file mode 100644 index 000000000..a950ebe9c --- /dev/null +++ b/sections/promises.liquid @@ -0,0 +1,174 @@ +{% comment %} + 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 }}

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

{{ block.settings.text }}

+ {% endif %} +
+ {% endfor %} +
+
+ +{% stylesheet %} + .promises { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + .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); + } + .promises__row { + grid-template-columns: 1fr; + } + .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); + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Promises", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "The Odyssey standard" + }, + { + "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 forever." + } + }, + { + "type": "promise", + "settings": { + "title": "Artisan made", + "text": "Crafted by master makers in their homeland, never mass-produced." + } + }, + { + "type": "promise", + "settings": { + "title": "Worldwide delivery", + "text": "Complimentary, fully insured shipping across the globe." + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/regions.liquid b/sections/regions.liquid new file mode 100644 index 000000000..96ed9e8b3 --- /dev/null +++ b/sections/regions.liquid @@ -0,0 +1,393 @@ +{% comment %} + 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 %} + +
+
+
+ {% 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 %} +
+ +
+ {% 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: 1400 + endif + assign index_label = forloop.index | prepend: '00' | slice: -2, 2 + %} + +
+ {{ 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.meta }} + + {{ block.settings.cta | default: 'Discover' }} + + +
+ + {% endfor %} +
+
+ +{% stylesheet %} + .regions { + width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; + } + .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%; + max-width: 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; + 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; + 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: 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__head { + margin-bottom: var(--space-lg); + } + .region-card__body { + padding: 1.25rem; + } + .region-card__index { + top: 1rem; + left: 1rem; + } + .region-card__status { + 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-direction: column; + align-items: flex-start; + gap: 0.65rem; + } + .region-card__title { + font-size: var(--text-xl); + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "Region collections", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "The regions" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Where in the world" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "will you begin?" + }, + { + "type": "text", + "id": "link_label", + "label": "Link label", + "default": "All regions" + }, + { + "type": "url", + "id": "link_url", + "label": "Link URL" + } + ], + "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": "meta", + "label": "Meta line", + "default": "First drop — 200 pieces" + }, + { + "type": "text", + "id": "cta", + "label": "Link label", + "default": "Discover" + }, + { + "type": "url", + "id": "link", + "label": "Link" + } + ] + } + ], + "max_blocks": 9, + "presets": [ + { + "name": "Region collections", + "blocks": [ + { + "type": "region", + "settings": { + "title": "Oceania", + "status": "Available now", + "subtitle": "Treasures of the South Pacific", + "meta": "First drop — 200 pieces", + "image_url": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80" + } + }, + { + "type": "region", + "settings": { + "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=1400&q=80" + } + }, + { + "type": "region", + "settings": { + "title": "Asia", + "status": "Coming soon", + "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" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/story.liquid b/sections/story.liquid new file mode 100644 index 000000000..f95669eef --- /dev/null +++ b/sections/story.liquid @@ -0,0 +1,661 @@ +{% comment %} + 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 + assign img_main = section.settings.image_url + if section.settings.image != blank + 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 + + 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 %} +
+ +
+ {% 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 %} +
+
+
+ +{% stylesheet %} + .story { + position: relative; + overflow: hidden; + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + /* 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: 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%; + } + + .story__media { + position: static; + width: 100%; + } + + .story__images { + position: relative; + width: 100%; + 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; + } + .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 — positioned against the full visual column */ + .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 { + display: block; + width: 100%; + max-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: flush bottom-right of the main image */ + .story__inset { + position: absolute; + right: 0; + bottom: 0; + width: 54%; + max-width: 15.5rem; + border: 6px solid var(--color-background); + box-shadow: 0 34px 70px -34px rgba(10, 22, 40, 0.6); + } + .on-dark .story__inset { + 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; + } + + /* + 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); + width: 100%; + box-sizing: border-box; + } + .story__heading { + font-weight: 400; + max-width: 100%; + } + .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; + 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); + } + + /* 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); + } + .story__stat .meta-label { + overflow-wrap: anywhere; + } + .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: 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 { + order: 0; + width: 100%; + max-width: 100%; + position: relative; + 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 0.85rem 1.35rem; + } + + .story__media { + position: relative; + padding-bottom: 0; + } + + .story__content, + .story--media-right .story__content { + order: 1; + width: 100%; + max-width: 100%; + padding: 0; + } + + /* 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; + } + + /* Frame hugs the image — left edge aligned, caption sits below */ + .story__frame, + .story--media-right .story__frame { + display: block; + inset: 0; + transform: none; + } + + .story__images { + width: 100%; + max-width: 100%; + } + + /* Inset: pinned to bottom-right corner of main image */ + .story__inset, + .story--media-right .story__inset { + right: 0; + left: auto; + bottom: 0; + 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 below the frame — readable, not over the photo */ + .story__caption, + .story--media-right .story__caption { + position: static; + margin: 0; + padding: 0 0.15rem; + font-size: 0.62rem; + letter-spacing: 1.75px; + line-height: 1.45; + overflow-wrap: break-word; + text-align: left; + } + + .story__heading { + font-size: var(--text-2xl); + } + .story__heading em { + padding-left: 0.35em; + } + + .story__body { + max-width: 100%; + font-size: var(--text-base); + } + + .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; + 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__stat-value { + font-size: var(--text-xl); + } + + .story__link { + max-width: 100%; + overflow-wrap: break-word; + } + } +{% endstylesheet %} + +{% schema %} +{ + "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" + }, + { + "type": "image_picker", + "id": "image", + "label": "Main image (the jewel)" + }, + { + "type": "text", + "id": "image_url", + "label": "Main image URL (fallback)", + "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 (the place)" + }, + { + "type": "text", + "id": "image_2_url", + "label": "Inset image URL (fallback)", + "default": "https://images.unsplash.com/photo-1468413253725-0d5181091126?auto=format&fit=crop&w=900&q=80" + }, + { + "type": "text", + "id": "visual_caption", + "label": "Caption", + "default": "Gold work — hand finished, one of one" + }, + { + "type": "select", + "id": "media_position", + "label": "Visual position", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "right", "label": "Right" } + ], + "default": "left" + }, + { + "type": "checkbox", + "id": "dark", + "label": "Dark theme", + "default": false + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Our philosophy" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Every jewel" + }, + { + "type": "text", + "id": "heading_italic", + "label": "Heading (italic)", + "default": "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": "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", + "label": "Link label", + "default": "Read our story" + }, + { + "type": "url", + "id": "button_url", + "label": "Link" + } + ], + "presets": [ + { + "name": "Story" + } + ] +} +{% endschema %} diff --git a/sections/video-story.liquid b/sections/video-story.liquid new file mode 100644 index 000000000..a6f776e0c --- /dev/null +++ b/sections/video-story.liquid @@ -0,0 +1,416 @@ +{% 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 != blank or section.settings.video_url != blank or section.settings.video_mobile != blank or section.settings.video_mobile_url != blank + assign has_video = true + endif +%} + +
+
+
+ {% if has_video %} + {% render 'responsive-bg-video', + classes: 'vstory__bg', + desktop_video: section.settings.video, + desktop_url: section.settings.video_url, + mobile_video: section.settings.video_mobile, + mobile_url: section.settings.video_mobile_url, + poster: poster, + autoplay: section.settings.autoplay + %} + {% 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% + ); + pointer-events: none; + } + + .vstory__media .media-controls { + z-index: 4; + } + + /* --- 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": "video", + "id": "video", + "label": "Desktop video (upload)", + "info": "Upload or pick a Shopify-hosted video. Takes priority over the URL below." + }, + { + "type": "text", + "id": "video_url", + "label": "Desktop video URL (mp4)", + "info": "Used only if no uploaded desktop video is set.", + "default": "https://assets.mixkit.co/videos/preview/mixkit-tropical-beach-with-palm-trees-and-clear-water-1564-large.mp4" + }, + { + "type": "video", + "id": "video_mobile", + "label": "Mobile video (upload)", + "info": "Optional. Shown on phones instead of the desktop video. Falls back to the desktop video when empty." + }, + { + "type": "text", + "id": "video_mobile_url", + "label": "Mobile video URL (mp4)", + "info": "Used only if no uploaded mobile video is set." + }, + { + "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/css-variables.liquid b/snippets/css-variables.liquid index 99b5497a3..c87e9c65c 100644 --- a/snippets/css-variables.liquid +++ b/snippets/css-variables.liquid @@ -1,18 +1,73 @@ {% 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; + } + + /* 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 %} diff --git a/snippets/responsive-bg-video.liquid b/snippets/responsive-bg-video.liquid new file mode 100644 index 000000000..9da109a32 --- /dev/null +++ b/snippets/responsive-bg-video.liquid @@ -0,0 +1,72 @@ +{% comment %} + Responsive background video. + + Renders a single