/** Shopify CDN: Minification failed Line 57:13 Unexpected "@media" **/ /* Motive · motion layer (proof codes A1–A5, B1–B5, approved 2026-09-11). Paper and print: nothing bounces, things settle. Effects only — no image, copy or layout changes. Loaded by layout/theme.liquid and by every ivory-*-document snippet. */ :root{--mv-ease:cubic-bezier(.2,.7,.2,1);--mv-ease-ink:cubic-bezier(.6,0,.2,1);--mv-sheet:900ms;--mv-ink:450ms;--mv-touch:180ms} /* A1 needs the headline split into lines; these rules keep the exact two-line layout with or without motion. */ .m-hero h1 .mv-line,.m-hero h1 .mv-line>span{display:block} @keyframes mv-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}} @keyframes mv-line{from{transform:translateY(160%)}to{transform:none}} @keyframes mv-foil{from{background-position:100% 0}to{background-position:0 0}} @keyframes mv-settle{from{transform:scale(1.04)}to{transform:none}} @keyframes mv-sheen{0%{transform:translateX(0) skewX(-18deg);opacity:0}18%{opacity:1}100%{transform:translateX(430%) skewX(-18deg);opacity:0}} @keyframes mv-reveal{from{opacity:.4;translate:0 16px}to{opacity:1;translate:0 0}} @keyframes mv-stamp{from{opacity:.25;scale:.82}to{opacity:1;scale:1}} @keyframes mv-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} /* Motion is switched on by the `mv-motion` class on , set by the inline script in every page head: it honours prefers-reduced-motion by default, and a visitor can force it on or off for their own browser with ?motion=on / ?motion=off (remembered in localStorage). */ /* A1 · Editorial entrance — home hero */ .mv-motion .m-hero{overflow:clip} .mv-motion .m-hero>.m-scene{animation:mv-settle 1.9s var(--mv-ease) both} .mv-motion .m-hero-copy>.m-eyebrow{animation:mv-rise .7s var(--mv-ease) both} /* The mask is a clip-path, not padding/margins: negative margins collapse and would move the headline. */ .mv-motion .m-hero h1 .mv-line{clip-path:inset(-.25em -100vw -.35em -100vw)} .mv-motion .m-hero h1 .mv-line>span{animation:mv-line var(--mv-sheet) var(--mv-ease) both} .mv-motion .m-hero h1 .mv-line+.mv-line>span{animation-delay:.12s} .mv-motion .m-hero-copy>.m-body{animation:mv-rise .8s .45s var(--mv-ease) both} .mv-motion .m-hero-copy>.m-actions{animation:mv-rise .8s .6s var(--mv-ease) both} @supports (-webkit-background-clip:text) or (background-clip:text){ .mv-motion .m-hero h1 em{background:linear-gradient(105deg,currentColor 0 42%,#d9b764 50%,currentColor 58% 100%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mv-foil 1.5s .95s var(--mv-ease) both} } /* A1 · product and bundle pages: the hero copy arrives in order; images never start hidden */ .mv-motion .ib-hero-copy>*,.mv-motion .bundle-hero .bundle-intro>:not(img){animation:mv-rise .8s var(--mv-ease) both} .mv-motion .ib-hero-copy>:nth-child(2),.mv-motion .bundle-hero .bundle-intro>:nth-child(2){animation-delay:.1s} .mv-motion .ib-hero-copy>:nth-child(3),.mv-motion .bundle-hero .bundle-intro>:nth-child(3){animation-delay:.2s} .mv-motion .ib-hero-copy>:nth-child(4),.mv-motion .bundle-hero .bundle-intro>:nth-child(4){animation-delay:.3s} .mv-motion .ib-hero-copy>:nth-child(n+5),.mv-motion .bundle-hero .bundle-intro>:nth-child(n+5){animation-delay:.4s} /* A2 · Light on gold. contain:paint clips the sheen to each button without touching its position. */ .mv-motion .m-button,.mv-motion .ib-button{contain:paint;transition:transform var(--mv-touch) var(--mv-ease),filter var(--mv-touch) var(--mv-ease)} .mv-motion .m-button::after,.mv-motion .ib-button::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,251,238,.72) 50%,transparent);transform:skewX(-18deg);opacity:0;pointer-events:none} .mv-motion .motive-ivory .m-header-cta::after{background:linear-gradient(100deg,transparent,rgba(255,236,190,.38) 50%,transparent)} .mv-motion .m-button:active,.mv-motion .ib-button:active{transform:translateY(0) scale(.975)} /* A3 · Ink underline on navigation; text links keep their underline and nudge the arrow */ .mv-motion .m-nav a,.mv-motion .m-footer nav a,.mv-motion .ib-nav nav a{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size var(--mv-ink) var(--mv-ease-ink),color .2s ease} .mv-motion .m-nav a:is(:hover,:focus-visible),.mv-motion .m-footer nav a:is(:hover,:focus-visible),.mv-motion .ib-nav nav a:is(:hover,:focus-visible){background-size:100% 1px;background-position:0 100%} .mv-motion .m-text-link .m-icon{transition:transform var(--mv-ink) var(--mv-ease)} .mv-motion @media (hover:hover){.m-button:hover::after,.ib-button:hover::after,.m-catalog-card:hover .m-product-action::after{animation:mv-sheen .95s var(--mv-ease) both} .m-text-link:hover .m-icon{transform:translateX(3px)} /* A4 · Cards that breathe */ .motive-ivory .m-product-card.m-catalog-card:nth-child(n){transition:border-color .2s ease,box-shadow var(--mv-ink) var(--mv-ease),transform var(--mv-ink) var(--mv-ease)} .motive-ivory .m-product-card.m-catalog-card:hover{transform:translateY(-3px);box-shadow:0 24px 42px -30px rgba(80,58,14,.5),0 0 0 1px color-mix(in srgb,var(--m-gold) 12%,transparent)} .motive-ivory .m-product-card.m-catalog-card .m-product-media{overflow:hidden} .motive-ivory .m-product-card.m-catalog-card .m-product-media>.m-scene{transition:transform 1.2s var(--mv-ease)} .motive-ivory .m-product-card.m-catalog-card:hover .m-product-media>.m-scene{transform:scale(1.035)!important} .bundle-card{transition:transform var(--mv-ink) var(--mv-ease),box-shadow var(--mv-ink) var(--mv-ease)} .bundle-card:hover{transform:translateY(-3px);box-shadow:0 24px 42px -30px rgba(80,58,14,.45)} .bundle-card>a .bundle-art{transition:transform 1.2s var(--mv-ease)} .bundle-card:hover>a .bundle-art{transform:scale(1.03)}} /* A5 · Answers that unfold (browsers without ::details-content open instantly, as today) */ .mv-motion .m-faq-list details,.mv-motion .ib-faq details,.mv-motion .bundle-faq details{interpolate-size:allow-keywords} .mv-motion .m-faq-list details::details-content,.mv-motion .ib-faq details::details-content,.mv-motion .bundle-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--mv-ease),content-visibility .5s allow-discrete} .mv-motion .m-faq-list details[open]::details-content,.mv-motion .ib-faq details[open]::details-content,.mv-motion .bundle-faq details[open]::details-content{block-size:auto} .mv-motion .m-faq-list summary span{transition:transform var(--mv-ink) var(--mv-ease)} /* B1 · Reveal while scrolling, from a visible resting state. B2 · Gold thread through the steps. Scroll-driven CSS only; browsers without it show everything still. */ @supports (animation-timeline:view()){ .mv-motion .motive-section:not(.motive-hero) :is(.m-eyebrow,h2):not(dialog *),.mv-motion .m-product-grid,.mv-motion .m-review-summary>:not(.m-eyebrow),.mv-motion .m-review-cards,.mv-motion .m-offer-subtitle,.mv-motion .m-offer-detail,.mv-motion .m-offer-bottom,.mv-motion .m-faq-list,.mv-motion .ib-why>*,.mv-motion .ib-included>*,.mv-motion .ib-works>*,.mv-motion .ib-reviews>*,.mv-motion .ib-faq>*,.mv-motion .bundle-benefits>*,.mv-motion .bundle-cards>*,.mv-motion .bundle-comparison>*,.mv-motion .bundle-reviews>*,.mv-motion .bundle-faq>*,.mv-motion .bundle-close>*{animation:mv-reveal var(--mv-ease) both;animation-timeline:view();animation-range:entry 5% cover 26%} .mv-motion .motive-section:not(.motive-hero) h2:not(dialog *){animation-range:entry 10% cover 30%} .mv-motion .m-steps li .m-step-number{animation:mv-stamp var(--mv-ease) both;animation-timeline:view();animation-range:entry 25% cover 38%} .mv-motion .m-steps li:nth-child(2) .m-step-number{animation-range:entry 35% cover 46%} .mv-motion .m-steps li:nth-child(3) .m-step-number{animation-range:entry 45% cover 54%} .mv-motion .m-steps li>.m-icon{animation:mv-draw linear both;animation-timeline:view();animation-range:entry 30% cover 42%} .mv-motion .m-steps li:nth-child(2)>.m-icon{animation-range:entry 40% cover 50%} } /* B4 · Page to page: the page cross-fades and each planner photo travels from its home card to its product page */ .mv-motion ::view-transition-old(root),.mv-motion ::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)} .mv-motion ::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.7,.2,1)} .mv-motion #planner-budget .m-product-media>.m-scene,.mv-motion .ib-budget-hero-original{view-transition-name:mv-budget} .mv-motion #planner-savings .m-product-media>.m-scene,.mv-motion .ib-hero-original[src*="ivory-savings-"]{view-transition-name:mv-savings} .mv-motion #planner-debt .m-product-media>.m-scene,.mv-motion .ib-hero-original[src*="ivory-debt-"]{view-transition-name:mv-debt} .mv-motion #planner-wedding .m-product-media>.m-scene,.mv-motion .ib-hero-original[src*="ivory-wedding-"]{view-transition-name:mv-wedding} .mv-motion #planner-allinone .m-product-media>.m-scene,.mv-motion .ib-hero-original[src*="ivory-task-"]{view-transition-name:mv-task} /* B5 · While a planner is being added, the gold keeps catching the light until the cart opens */ .mv-motion .m-button[aria-busy="true"]::after,.mv-motion .mv-adding.mv-adding::after{animation:mv-sheen 1.1s var(--mv-ease) infinite} .mv-motion .m-button[aria-busy="true"],.mv-motion .mv-adding{cursor:progress} /* Cross-document transitions cannot be class-gated, so they stay tied to the system preference. */ @media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}} /* B6 · Home hero film: the photo is what loads. The film lies in the same box and only fades in once the shopper starts scrolling, because its first frame sits a little closer than the photo. */ .m-hero>video.m-scene{opacity:0;transition:opacity .45s var(--mv-ease);pointer-events:none} .m-hero>video.m-scene.is-ready{opacity:1}