/* KL Flora Designs — one film, one bench. */ :root { /* Two colours, from the hero painting: its near-black and a warm cream. Everything else is a tint of these. */ --black: #14110e; --cream: #eee5d2; --moss: var(--black); /* dark surfaces */ --moss-2: #2a241e; /* dark hover */ --sage: #8a8170; --petal: var(--cream); /* light surfaces */ --petal-2: #e2d7c1; /* light hover / wells */ --card: #f6f0e4; /* raised cards on cream */ --peony: var(--black); /* accents are black on cream */ --peony-deep: var(--black); --butter: var(--cream); --ink: var(--black); --muted: #5e564b; /* black at about 70% on cream */ --display: "Bodoni Moda", "Didot", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif; --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem); --step-3: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem); --step-4: clamp(2.8rem, 1.9rem + 4.6vw, 6.4rem); /* Material textures (kraft fibre, paper grain) drawn as SVG noise. */ --tex-kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .13 0 0 0 0 .05 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .04 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .13 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --tex-linen: repeating-linear-gradient(0deg, rgba(90, 76, 60, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 76, 60, .06) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 7px); --tex-velvet: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px), radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .14), transparent 55%); --gutter: clamp(16px, 4vw, 56px); --header-h: 68px; --ease-out: cubic-bezier(.2, .8, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; background: var(--petal); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } :focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; border-radius: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--petal); padding: 10px 14px; border-radius: 6px; } .skip:focus { top: 12px; } /* ---------- Header: glass over the film, solid after ---------- */ .top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--header-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0; display: flex; align-items: center; gap: 28px; color: var(--petal); transition: background-color .35s, border-color .35s, backdrop-filter .35s, color .35s; border-bottom: 1px solid transparent; } .top[data-state="glass"] { background: linear-gradient(to bottom, rgba(20, 26, 22, .55), rgba(20, 26, 22, 0)); } .top[data-state="solid"] { background: rgba(244, 239, 242, .9); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(38, 48, 42, .12); color: var(--ink); } .wordmark { display: flex; align-items: baseline; gap: .45em; text-decoration: none; margin-right: auto; } .wordmark-kl { font: italic 600 1.7rem/1 var(--display); } .wordmark-rest { font: 500 1.02rem/1 var(--display); letter-spacing: .02em; } .nav { display: flex; gap: 26px; } .nav a, .top-call { text-decoration: none; font-weight: 500; font-size: .95rem; padding: 10px 0; } .nav a:hover, .top-call:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .top-call { border: 1px solid currentColor; border-radius: 999px; padding: 9px 18px; } .top-call:hover { text-decoration: none; background: rgba(255,255,255,.12); } .menu-btn { display: none; } @media (max-width: 820px) { :root { --header-h: 58px; } .nav, .top-call { display: none; } .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: inherit; cursor: pointer; } .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s var(--ease-out); } .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; } .menu-lines::before { top: -7px; } .menu-lines::after { top: 7px; } .menu-btn[aria-expanded="true"] .menu-lines { background: transparent; } .menu-btn[aria-expanded="true"] .menu-lines::before { transform: translateY(7px) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-lines::after { transform: translateY(-7px) rotate(-45deg); } } .menu { position: fixed; inset: 0; z-index: 45; background: var(--moss); color: var(--petal); padding: calc(var(--header-h) + 40px + env(safe-area-inset-top)) var(--gutter) 40px; } .menu nav { display: grid; gap: 6px; } .menu a { font: 500 var(--step-3)/1.15 var(--display); text-decoration: none; padding: 8px 0; } .menu a:last-child { font: 500 var(--step-1)/1.4 var(--sans); margin-top: 24px; color: var(--butter); } body.menu-open { overflow: hidden; } body.menu-open .top { color: var(--petal); background: transparent; border-color: transparent; backdrop-filter: none; } /* ---------- The film ---------- */ .film { position: relative; background: var(--moss); } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .stage-canvas, .stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .stage-poster { transition: opacity .6s; } .film.is-live .stage-poster { opacity: 0; } .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20, 26, 22, .72) 0%, rgba(20, 26, 22, .18) 34%, rgba(20, 26, 22, 0) 55%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(16, 20, 18, .45)); } /* Anamorphic bars: they open as the film begins and close for the final shot. */ .bars i { position: absolute; left: 0; right: 0; height: var(--bar, 0px); background: #141915; transition: height .1s linear; } .bars i:first-child { top: 0; } .bars i:last-child { bottom: 0; } .titles { position: absolute; inset: 0; pointer-events: none; } .title-card { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(88px, 14vh, 150px); max-width: 34ch; color: var(--petal); opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); } .title-card.on { opacity: 1; transform: none; } .title-card h2 { font-size: var(--step-3); font-style: italic; font-weight: 400; text-wrap: balance; } .title-card p { margin-top: 14px; font-size: var(--step-1); line-height: 1.45; max-width: 36ch; color: rgba(244, 239, 242, .86); } .title-card .btn { margin-top: 26px; pointer-events: auto; } .title-card.is-hero { max-width: none; right: var(--gutter); } .title-card.is-hero h1 { font-size: var(--step-4); font-weight: 400; font-style: italic; line-height: .98; max-width: 12ch; text-wrap: balance; } .title-card.is-hero p { margin-top: 22px; } .title-card.is-reveal { left: auto; right: var(--gutter); text-align: right; } .title-card.is-reveal p { margin-left: auto; } .film-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 20px; color: var(--petal); } .reel { flex: 1; height: 1px; background: rgba(244, 239, 242, .25); position: relative; } .reel-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--petal); transform-origin: left; transform: scaleX(var(--p, 0)); } .film-skip { font-size: .92rem; font-weight: 500; text-underline-offset: 5px; padding: 12px 0; } /* Reduced motion: the film becomes a short sequence of stills. */ .film.is-still .stage { position: relative; height: auto; } .film.is-still .stage-canvas, .film.is-still .reel { display: none; } .film-stills { display: grid; } .film-still { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: var(--petal); } .film-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .film-still .title-card { position: relative; opacity: 1; transform: none; left: 0; right: 0; bottom: 0; margin: 0 var(--gutter) 12vh; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .2s, color .2s, transform .2s var(--ease-out); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--peony); color: var(--ink); } .btn-primary:hover { background: #d59cb0; } .btn-ghost { border-color: currentColor; background: transparent; color: inherit; } .btn-ghost:hover { background: rgba(38, 48, 42, .06); } .btn-light { background: var(--petal); color: var(--ink); } .btn-light:hover { background: #fff; } /* ---------- Builder ---------- */ .build { padding: clamp(72px, 10vw, 140px) var(--gutter); } .build-head { max-width: 1320px; margin: 0 auto clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: end; } .build-head h2 { font-size: var(--step-4); font-style: italic; font-weight: 400; } .build-head p { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 38ch; } .build-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .bench { position: sticky; top: calc(var(--header-h) + 20px); height: min(78vh, 760px); border-radius: 28px 28px 28px 4px; overflow: hidden; background: var(--moss); color: var(--petal); } .bench-light { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 38%, rgba(233, 200, 108, .2), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, .35), transparent 70%); } .bench::after { /* the wooden design table */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: repeating-linear-gradient(178deg, rgba(0,0,0,.0) 0 7px, rgba(0,0,0,.12) 7px 8px, rgba(255,255,255,.03) 8px 15px), var(--tex-kraft), linear-gradient(to bottom, #4a3729, #2b2019); box-shadow: 0 -1px 0 rgba(255,255,255,.1); } .bench { background-image: var(--tex-grain); background-blend-mode: soft-light; } .bench-empty { position: absolute; left: 0; right: 0; top: 40%; text-align: center; z-index: 3; font: italic 400 var(--step-2)/1.2 var(--display); color: rgba(244, 239, 242, .7); transition: opacity .4s; } .bench.has-stems .bench-empty { opacity: 0; } .bench-tally { position: absolute; left: 22px; right: 22px; top: 20px; z-index: 4; display: flex; justify-content: space-between; font-weight: 500; font-variant-numeric: tabular-nums; } .tally-total { font: 500 var(--step-1)/1 var(--display); } .bouquet { position: absolute; left: 50%; bottom: 9%; width: min(88%, 560px); aspect-ratio: 1 / 1.08; transform: translateX(-50%); z-index: 2; } .stems { position: absolute; inset: 0; } .stem { position: absolute; left: 50%; bottom: 6%; width: calc(var(--w) * 1%); transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--r)) translateY(var(--lift, 0px)); z-index: var(--z); transition: transform .9s var(--ease-out), opacity .5s; will-change: transform; } .stem img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)); } .stem .sway { transform-origin: 50% 100%; animation: sway var(--sd, 6s) ease-in-out var(--sdl, 0s) infinite alternate; } @keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } } .stem.is-entering { transition: none; } .stem.is-leaving { opacity: 0; transform: translateX(-50%) rotate(var(--r)) translateY(-90px) !important; } /* Wraps are drawn in CSS so they recolour instantly. */ .wrap-back, .wrap-front, .bow { position: absolute; left: 50%; transform: translateX(-50%); transition: opacity .5s, background-color .5s, clip-path .6s var(--ease-out), width .6s var(--ease-out), height .6s var(--ease-out), bottom .6s var(--ease-out); pointer-events: none; } .wrap-back { z-index: 0; } .wrap-front { z-index: 200; } .bow { z-index: 201; opacity: 0; } .bench.has-stems.has-ribbon .bow { opacity: 1; } .bench:not(.has-stems) .wrap-back, .bench:not(.has-stems) .wrap-front { opacity: 0; } /* Paper cone (kraft / linen) */ .bouquet[data-wrap="kraft"] .wrap-back, .bouquet[data-wrap="linen"] .wrap-back { bottom: 18%; width: 84%; height: 46%; background: var(--tex-kraft), var(--wrap-tone); clip-path: polygon(4% 8%, 22% 0, 50% 6%, 78% 0, 96% 8%, 58% 100%, 42% 100%); filter: brightness(.7) saturate(.9); } .bouquet[data-wrap="kraft"] .wrap-front, .bouquet[data-wrap="linen"] .wrap-front { bottom: 2%; width: 56%; height: 35%; background: linear-gradient(100deg, rgba(0,0,0,.18), transparent 35%, transparent 60%, rgba(0,0,0,.22)), var(--tex-kraft), var(--wrap-tone); clip-path: polygon(0 10%, 26% 0, 50% 14%, 74% 0, 100% 10%, 62% 100%, 38% 100%); } .bouquet[data-wrap="linen"] .wrap-back { background: var(--tex-linen), var(--wrap-tone); } .bouquet[data-wrap="linen"] .wrap-front { background: linear-gradient(100deg, rgba(0,0,0,.12), transparent 35%, transparent 60%, rgba(0,0,0,.16)), var(--tex-linen), var(--wrap-tone); } .bouquet[data-wrap="kraft"] .bow, .bouquet[data-wrap="linen"] .bow { bottom: 13%; width: 24%; height: 7%; background: var(--peony); clip-path: polygon(0 0, 46% 40%, 54% 40%, 100% 0, 100% 100%, 54% 60%, 62% 140%, 50% 66%, 38% 140%, 46% 60%, 0 100%); } /* Glass vase */ .bouquet[data-wrap="vase"] .wrap-back { opacity: 0; } .bouquet[data-wrap="vase"] .wrap-front { bottom: 0; width: 42%; height: 40%; border-radius: 40% 40% 18% 18% / 20% 20% 14% 14%; background: linear-gradient(90deg, rgba(201, 219, 216, .28), rgba(255,255,255,.42) 30%, rgba(201,219,216,.18) 60%, rgba(255,255,255,.3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -30px 40px rgba(143, 165, 150, .35); clip-path: none; backdrop-filter: blur(1px); } .bouquet[data-wrap="vase"] .bow { bottom: 35%; width: 20%; height: 6%; background: var(--peony); clip-path: polygon(0 0, 46% 40%, 54% 40%, 100% 0, 100% 100%, 54% 60%, 0 100%); } /* Hatbox */ .bouquet[data-wrap="hatbox"] .wrap-back { bottom: 30%; width: 66%; height: 9%; border-radius: 50%; background: #1b231e; clip-path: none; filter: none; } .bouquet[data-wrap="hatbox"] .wrap-front { bottom: 0; width: 66%; height: 35%; clip-path: none; background: var(--tex-velvet), linear-gradient(90deg, #233028, #34443a 40%, #2a372f); border-radius: 0 0 50% 50% / 0 0 18% 18%; box-shadow: inset 0 6px 0 rgba(255,255,255,.06); } .bouquet[data-wrap="hatbox"] .stems { clip-path: inset(-50% -50% 8% -50%); } .bouquet[data-wrap="hatbox"] .bow { bottom: 14%; width: 66%; height: 3%; background: var(--peony); clip-path: none; } /* Steps */ .steps { display: grid; gap: clamp(36px, 5vw, 56px); } .step { border: 0; padding: 0; margin: 0; min-width: 0; } .step legend { font: 500 var(--step-2)/1.15 var(--display); padding: 0; margin-bottom: 8px; display: flex; align-items: baseline; gap: 14px; } .step-n { font: italic 400 var(--step-1)/1 var(--display); color: var(--peony-deep); min-width: 1ch; } .step-hint { color: var(--muted); font-size: var(--step--1); margin-bottom: 18px; } .flower-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 10px; } .flower-meta { white-space: nowrap; } .flower { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(38, 48, 42, .08); transition: box-shadow .25s, background-color .25s; } .flower.is-picked { box-shadow: 0 0 0 1.5px var(--peony-deep); background: #fbf6f8; } .flower-thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--petal-2) center 18% / 160% auto no-repeat; position: relative; overflow: hidden; } .flower-thumb::after { content: ""; position: absolute; inset: auto 6px 6px auto; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px #fff; } .flower-name { font-weight: 600; line-height: 1.25; } .flower-meta { font-size: var(--step--1); color: var(--muted); } .flower-price { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; } .stepper { display: flex; align-items: center; gap: 2px; } .stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--petal); color: var(--ink); font: 500 1.2rem/1 var(--sans); display: grid; place-items: center; transition: background-color .2s; } .stepper button:hover { background: var(--petal-2); } .stepper button:disabled { opacity: .35; cursor: default; } .stepper .add { background: var(--moss); color: var(--petal); } .stepper .add:hover { background: var(--moss-2); } .stepper output { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .flower:not(.is-picked) .stepper .sub, .flower:not(.is-picked) .stepper output { display: none; } @media (pointer: coarse) { .stepper button { width: 44px; height: 44px; } } .wrap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-bottom: 16px; } .wrap-opt { position: relative; cursor: pointer; } .wrap-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .wrap-opt span { display: grid; grid-template-columns: 58px 1fr auto; gap: 2px 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(38,48,42,.08); transition: box-shadow .25s, transform .25s var(--ease-out); } .wrap-opt:hover span { transform: translateY(-1px); } /* Each wrap shows its real material: kraft fibre, linen weave, glass, velvet hatbox. */ .wrap-opt i { width: 58px; height: 58px; border-radius: 12px; grid-row: span 2; position: relative; overflow: hidden; background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 2px 6px rgba(38,48,42,.12); } .wrap-opt i::after { content: ""; position: absolute; inset: 0; } .wrap-opt[data-wrap="kraft"] i { background: var(--tex-kraft), linear-gradient(135deg, #c79a6a, #a77b4d); } .wrap-opt[data-wrap="kraft"] i::after { background: linear-gradient(115deg, transparent 46%, rgba(0,0,0,.14) 47%, transparent 60%); } .wrap-opt[data-wrap="linen"] i { background: var(--tex-linen), linear-gradient(135deg, #f1ebe1, #ddd3c4); } .wrap-opt[data-wrap="linen"] i::after { background: linear-gradient(115deg, transparent 50%, rgba(80,60,40,.1) 51%, transparent 64%); } .wrap-opt[data-wrap="vase"] i { background: linear-gradient(160deg, #e3efec, #b9d0cb 55%, #9fbcb6); } .wrap-opt[data-wrap="vase"] i::after { background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.75) 24%, transparent 32%, transparent 62%, rgba(255,255,255,.35) 68%, transparent 74%), radial-gradient(60% 30% at 50% 100%, rgba(120, 150, 140, .35), transparent); } .wrap-opt[data-wrap="hatbox"] i { background: var(--tex-velvet), linear-gradient(135deg, #34443a, #1f2a23); } .wrap-opt[data-wrap="hatbox"] i::after { background: linear-gradient(transparent 58%, var(--peony) 58% 68%, transparent 68%); } .wrap-opt b { font-weight: 600; } .wrap-opt small { grid-column: 2; color: var(--muted); font-size: var(--step--1); } .wrap-opt em { font-style: normal; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 3; } .wrap-opt input:checked + span { box-shadow: 0 0 0 1.5px var(--peony-deep); background: #fbf6f8; } .wrap-opt input:focus-visible + span { outline: 2px solid var(--peony-deep); outline-offset: 2px; } .check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; } .check input { width: 20px; height: 20px; accent-color: var(--moss); } .check em { font-style: normal; color: var(--muted); } .segmented { display: inline-grid; grid-auto-flow: column; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 0 0 1px rgba(38,48,42,.08); margin-bottom: 20px; } .segmented label { position: relative; cursor: pointer; } .segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .segmented span { display: block; padding: 11px 20px; border-radius: 999px; font-weight: 500; transition: background-color .25s, color .25s; } .segmented input:checked + span { background: var(--moss); color: var(--petal); } .segmented input:focus-visible + span { outline: 2px solid var(--peony-deep); outline-offset: 2px; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: grid; gap: 6px; margin-bottom: 14px; } .field-short { max-width: 220px; } .field label { font-weight: 500; font-size: .95rem; } .optional { color: var(--muted); font-weight: 400; } .field input, .field select, .field textarea { font: inherit; color: inherit; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(38, 48, 42, .18); background: #fff; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(139, 154, 124, .35); } .field.has-error input { border-color: #a3354b; } .field-error { color: #a3354b; font-size: var(--step--1); font-weight: 500; } .summary { background: var(--moss); color: var(--petal); border-radius: 22px; padding: clamp(22px, 3vw, 32px); } .summary-lines { margin: 0 0 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-variant-numeric: tabular-nums; } .summary-lines dt { color: rgba(244, 239, 242, .78); } .summary-lines dd { margin: 0; text-align: right; } .summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(244,239,242,.18); margin-bottom: 22px; } .summary-total strong { font: 500 var(--step-3)/1 var(--display); font-variant-numeric: tabular-nums; } .summary .btn { width: 100%; } .summary-note { margin-top: 14px; font-size: var(--step--1); color: rgba(244, 239, 242, .72); } @media (max-width: 980px) { .build-head { grid-template-columns: 1fr; } .build-grid { grid-template-columns: 1fr; } .bench { top: var(--header-h); height: 46vh; height: 46svh; border-radius: 0 0 22px 22px; margin: 0 calc(var(--gutter) * -1); z-index: 5; } } @media (max-width: 560px) { .flower-list, .wrap-list, .row { grid-template-columns: 1fr; } .segmented { display: grid; grid-auto-flow: row; border-radius: 18px; } .segmented span { border-radius: 14px; } } /* ---------- Ready-made ---------- */ .signature, .occasions { padding: clamp(64px, 9vw, 120px) var(--gutter); max-width: 1320px; margin: 0 auto; } .signature h2, .occasions h2 { font-size: var(--step-3); font-style: italic; font-weight: 400; margin-bottom: clamp(28px, 4vw, 48px); } .sig-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .sig-list li { padding: 22px; background: #fff; border-radius: 18px; display: grid; gap: 6px; } .sig-list b { font: 500 var(--step-1)/1.2 var(--display); } /* ---------- Occasions ---------- */ .occasions { border-top: 1px solid rgba(38, 48, 42, .1); } .occ-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); } .occ-list h3 { font-size: var(--step-2); font-weight: 400; margin-bottom: 10px; } .occ-list p { color: var(--muted); max-width: 36ch; } /* ---------- Visit ---------- */ .visit { position: relative; min-height: 100vh; display: grid; align-items: end; padding: clamp(80px, 10vw, 140px) var(--gutter); color: var(--petal); overflow: hidden; } .visit-img { position: absolute; inset: 0; background: var(--moss) url("assets/img/reveal.webp") center / cover no-repeat; } .visit-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 26, 22, .86) 0%, rgba(20, 26, 22, .55) 45%, rgba(20,26,22,.1) 80%); } .visit-card { position: relative; max-width: 460px; } .visit h2 { font-size: var(--step-4); font-style: italic; font-weight: 400; margin-bottom: 26px; } .visit address { font-style: normal; font-size: var(--step-1); line-height: 1.45; } .visit-phone { display: inline-block; margin-top: 10px; font: 500 var(--step-2)/1.2 var(--display); text-decoration: none; } .visit-phone:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 28px 0 8px; } .hours dt { color: rgba(244, 239, 242, .75); } .hours dd { margin: 0; } .hours-note { font-size: var(--step--1); color: rgba(244, 239, 242, .7); } .visit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .visit .btn-ghost:hover { background: rgba(255,255,255,.1); } .foot { background: var(--moss); color: rgba(244, 239, 242, .8); padding: 56px var(--gutter) calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 14px; } .foot-mark { font: 500 var(--step-2)/1 var(--display); color: var(--petal); } .foot-mark span { font-style: italic; font-weight: 600; } .foot p { max-width: 60ch; } .foot-small { font-size: var(--step--1); } /* ---------- Order dialog ---------- */ .order-dialog { border: 0; padding: 0; border-radius: 22px; width: min(560px, calc(100vw - 32px)); background: var(--petal); color: var(--ink); } .order-dialog::backdrop { background: rgba(20, 26, 22, .6); backdrop-filter: blur(4px); } .order-inner { padding: 28px; display: grid; gap: 16px; } .order-inner h2 { font-size: var(--step-2); font-style: italic; font-weight: 400; } .order-text { margin: 0; white-space: pre-wrap; font: 400 .95rem/1.55 var(--sans); background: #fff; border-radius: 14px; padding: 16px; max-height: 44vh; overflow: auto; } .order-status { font-weight: 500; } .order-actions { display: flex; flex-wrap: wrap; gap: 10px; } .order-close { justify-self: start; background: none; border: 0; padding: 10px 0; font: 500 1rem var(--sans); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; color: var(--muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } } /* ---------- Grain: a faint paper/film texture over the whole page ---------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; background-image: var(--tex-grain); background-size: 200px; opacity: .1; mix-blend-mode: multiply; } .cart-fab[hidden] { display: none; } .btn-ghost-light { border: 1px solid rgba(244, 239, 242, .6); color: var(--petal); background: transparent; } .btn-ghost-light:hover { background: rgba(244, 239, 242, .1); } .title-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; pointer-events: auto; } .title-card .title-actions .btn { margin-top: 0; } .title-card.is-reveal .title-actions { justify-content: flex-end; } /* ---------- Ready to send ---------- */ @property --glow { syntax: ""; inherits: true; initial-value: #e8a3bb; } .ready { padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(56px, 7vw, 96px); max-width: 1440px; margin: 0 auto; } .ready-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); } .ready-head h2 { font-size: var(--step-4); font-style: italic; font-weight: 400; } .ready-head p { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 40ch; } .ready-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: 500 .92rem/1 var(--sans); padding: 11px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(38, 48, 42, .16); background: transparent; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; } .chip:hover { border-color: var(--moss); } .chip[aria-pressed="true"] { background: var(--moss); color: var(--petal); border-color: var(--moss); } .swatches { display: flex; gap: 8px; } .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 0; background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .2s var(--ease-out), box-shadow .2s; } .swatch:hover { transform: scale(1.1); } .swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--petal), 0 0 0 5px var(--moss); } .ready-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .turntable { position: relative; aspect-ratio: 1 / 1.02; max-height: 80vh; border-radius: 28px 28px 28px 4px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #fdfbfc, #efe8eb); perspective: 1200px; cursor: grab; touch-action: pan-y; user-select: none; outline-offset: 4px; } .turntable:active { cursor: grabbing; } .tt-glow { position: absolute; inset: 0; background: radial-gradient(58% 52% at 50% 44%, color-mix(in srgb, var(--glow) 80%, transparent), color-mix(in srgb, var(--glow) 22%, transparent) 55%, transparent 78%); transition: --glow .9s ease; } .tt-plinth { position: absolute; left: 50%; bottom: -14%; width: 74%; aspect-ratio: 1; transform: translateX(-50%) rotateX(76deg); border-radius: 50%; background: radial-gradient(circle, rgba(38, 48, 42, .22), rgba(38, 48, 42, .06) 60%, transparent 70%); } .tt-plinth i { position: absolute; inset: 9%; border-radius: 50%; background: repeating-conic-gradient(rgba(38, 48, 42, .32) 0 1.2deg, transparent 1.2deg 10deg); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65% 70%, transparent 71%); mask: radial-gradient(circle, transparent 64%, #000 65% 70%, transparent 71%); transform: rotate(var(--turn, 0deg)); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); } .tt-spin { position: absolute; inset: 5% 12% 9%; display: grid; place-items: end center; transform-style: preserve-3d; mix-blend-mode: multiply; will-change: transform; } .tt-img { max-width: 100%; max-height: 100%; object-fit: contain; animation: float 7s ease-in-out infinite; pointer-events: none; } @keyframes float { 0%, 100% { transform: translateY(0) rotateY(-4deg); } 50% { transform: translateY(-8px) rotateY(4deg); } } .tt-petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } .tt-nav { position: absolute; top: 50%; z-index: 4; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(38, 48, 42, .14); transition: transform .2s var(--ease-out), background-color .2s; } .tt-nav:hover { transform: scale(1.06); background: #fff; } .tt-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tt-prev { left: 16px; } .tt-next { right: 16px; } .tt-count { position: absolute; left: 20px; bottom: 16px; z-index: 4; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; } .ready-detail { max-width: 520px; } .rd-tag { display: inline-block; font-size: var(--step--1); font-weight: 600; color: var(--peony-deep); margin-bottom: 10px; } .rd-name { font-size: var(--step-3); font-style: italic; font-weight: 400; line-height: 1.04; text-wrap: balance; } .rd-name span { display: inline-block; } .ready-detail.is-in .rd-name span { animation: rise .6s var(--ease-out) both; animation-delay: var(--d); } .ready-detail.is-in .rd-desc, .ready-detail.is-in .rd-colors { animation: rise .6s var(--ease-out) .12s both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rd-desc { margin-top: 16px; color: var(--muted); max-width: 46ch; } .rd-colors { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--step--1); color: var(--muted); } .rd-colors li { display: flex; align-items: center; gap: 6px; } .rd-colors li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .rd-sizes { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; } .rd-sizes legend { font-weight: 600; font-size: .95rem; margin-bottom: 10px; padding: 0; } .rd-size-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rd-size { position: relative; cursor: pointer; } .rd-size input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .rd-size span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(38,48,42,.1); transition: box-shadow .2s, background-color .2s; } .rd-size b { font-weight: 600; } .rd-size em { font-style: normal; color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; } .rd-size input:checked + span { box-shadow: 0 0 0 1.5px var(--peony-deep); background: #fbf6f8; } .rd-size input:focus-visible + span { outline: 2px solid var(--peony-deep); outline-offset: 2px; } .rd-buy { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; } .rd-price { font: 500 var(--step-3)/1 var(--display); font-variant-numeric: tabular-nums; min-width: 5ch; } .rd-add { min-width: 200px; } .rd-note { margin-top: 18px; font-size: var(--step--1); color: var(--muted); max-width: 46ch; } .strip-wrap { margin-top: clamp(28px, 4vw, 44px); position: relative; } .strip-wrap::before, .strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 1; pointer-events: none; } .strip-wrap::before { left: 0; background: linear-gradient(90deg, var(--petal), transparent); } .strip-wrap::after { right: 0; background: linear-gradient(-90deg, var(--petal), transparent); } .strip { list-style: none; margin: 0; padding: 10px 40px 16px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(38,48,42,.25) transparent; } .strip li { flex: 0 0 auto; scroll-snap-align: center; animation: rise .5s var(--ease-out) both; animation-delay: var(--d); } .strip-btn { display: block; padding: 6px; border: 0; border-radius: 14px; background: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(38,48,42,.08); transition: transform .3s var(--ease-out), box-shadow .3s; } .strip-btn img { width: 84px; height: 105px; object-fit: contain; } .strip-btn:hover { transform: translateY(-3px); } .strip li.is-on .strip-btn { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 2px var(--peony-deep), 0 10px 20px rgba(38,48,42,.12); } @media (max-width: 980px) { .ready-head, .ready-main { grid-template-columns: 1fr; } .turntable { aspect-ratio: 1 / 1.05; max-height: 70svh; margin: 0 calc(var(--gutter) * -1); border-radius: 0; } .ready-filters { flex-direction: column; align-items: stretch; min-width: 0; } .ready-filters > * { min-width: 0; } .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100vw; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; } .tt-nav { width: 44px; height: 44px; margin-top: -22px; } .strip { padding-left: var(--gutter); padding-right: var(--gutter); } .strip-wrap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); } } @media (max-width: 560px) { .rd-size span { padding: 10px; } .rd-buy { gap: 14px; } .rd-add { flex: 1; min-width: 0; } } /* ---------- The order (cart) ---------- */ .cart-fab { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px 0 18px; border-radius: 999px; border: 0; background: var(--moss); color: var(--petal); font: 600 .98rem/1 var(--sans); cursor: pointer; box-shadow: 0 12px 28px rgba(20, 26, 22, .28); } .cart-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .cart-count { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--peony); color: var(--ink); display: grid; place-items: center; font-variant-numeric: tabular-nums; } .cart-fab.is-bump { animation: bump .6s cubic-bezier(.3, 1.6, .5, 1); } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14) rotate(-3deg); } 100% { transform: scale(1); } } .cart-ghost { position: fixed; z-index: 70; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; } .cart { margin: 0 0 0 auto; padding: 0; border: 0; height: 100%; max-height: 100dvh; width: min(480px, 100vw); max-width: 100vw; background: var(--petal); color: var(--ink); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); } .cart.is-open { transform: none; } .cart::backdrop { background: rgba(20, 26, 22, .5); backdrop-filter: blur(3px); } .cart-inner { display: grid; grid-template-rows: auto 1fr auto; height: 100%; } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; } .cart-head h2 { font-size: var(--step-2); font-style: italic; font-weight: 400; } .cart-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink); margin-right: -10px; } .cart-close:hover { background: rgba(38,48,42,.06); } .cart-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .cart-body { overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; } .cart-items { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "img text price" "img qty qty"; gap: 4px 12px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; } .cart-item img { grid-area: img; width: 64px; height: 76px; object-fit: contain; } .ci-text { grid-area: text; min-width: 0; } .ci-text b { display: block; font-weight: 600; line-height: 1.25; } .ci-meta { font-size: var(--step--1); color: var(--muted); } .ci-price { grid-area: price; font-variant-numeric: tabular-nums; font-weight: 500; align-self: start; } .ci-qty { grid-area: qty; display: flex; align-items: center; gap: 4px; } .ci-qty button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--petal); cursor: pointer; font: 500 1.1rem/1 var(--sans); color: var(--ink); } .ci-qty button:hover { background: var(--petal-2); } .ci-qty output { min-width: 22px; text-align: center; font-weight: 600; } .cart-empty { color: var(--muted); font-style: italic; font-family: var(--display); font-size: var(--step-1); margin: 30px 0; } .cart:not(.is-empty) .cart-empty { display: none; } .cart.is-empty .cart-checkout, .cart.is-empty .pay, .cart.is-empty .cart-lines, .cart.is-empty .cart-total { display: none; } .cart-checkout { display: grid; gap: 30px; } .cart-checkout .step legend { font-size: var(--step-1); margin-bottom: 12px; } .cart-checkout .row { grid-template-columns: 1fr 1fr; } .cart-foot { background: var(--moss); color: var(--petal); padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); background-image: var(--tex-grain); background-blend-mode: soft-light; } .cart-lines { margin: 0 0 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: var(--step--1); font-variant-numeric: tabular-nums; } .cart-lines dt { color: rgba(244, 239, 242, .75); } .cart-lines dd { margin: 0; text-align: right; } .cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(244,239,242,.18); margin-bottom: 14px; } .cart-total strong { font: 500 var(--step-2)/1 var(--display); font-variant-numeric: tabular-nums; } .pay { display: grid; gap: 8px; } .pay-now { width: 100%; min-height: 54px; background: var(--petal); color: var(--ink); font-size: 1.05rem; } .pay-now:hover { background: #fff; } .pay-now:disabled { opacity: .6; cursor: progress; } .pay-marks svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .pay-hint { font-size: var(--step--1); color: rgba(244, 239, 242, .72); text-align: center; } .send-request { width: 100%; min-height: 46px; font-size: .95rem; } .cart-status { font-size: var(--step--1); margin-top: 10px; color: var(--petal); } .cart-status:empty { display: none; } .cart.is-paid .cart-status { font: italic 400 var(--step-1)/1.35 var(--display); } .cart-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cart-actions:empty { display: none; } .cart-actions .btn { min-height: 42px; padding: 0 16px; font-size: .92rem; } @media (max-width: 480px) { .cart-checkout .row { grid-template-columns: 1fr; } } /* 3D turntable: the WebGL bouquet replaces the flat photo (kept for screen readers and as a fallback). */ .tt-spin.has-3d { inset: 3% 6% 6%; mix-blend-mode: normal; } .tt-spin.has-3d .tt-img { visibility: hidden; position: absolute; } .tt-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Category picker in the stage's top-left corner */ .tt-cat { position: absolute; top: 16px; left: 16px; z-index: 6; max-width: calc(100% - 32px); } .tt-cat-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 16px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; font: 500 .95rem/1 var(--sans); box-shadow: 0 6px 18px rgba(38, 48, 42, .12); transition: background-color .2s; } .tt-cat-btn:hover { background: #fff; } .tt-cat-label { color: var(--muted); font-weight: 400; } .tt-cat-name { font-weight: 600; } .tt-cat-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); } .tt-cat-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .tt-cat .chips { margin: 8px 0 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 6px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-radius: 18px; box-shadow: 0 14px 34px rgba(38, 48, 42, .18); overflow: visible; max-width: 100%; flex-wrap: wrap; animation: rise .28s var(--ease-out) both; } .tt-cat .chips[hidden] { display: none; } .tt-cat .chip { text-align: left; white-space: nowrap; } @media (max-width: 980px) { .tt-cat .chips { margin: 8px 0 0; padding: 10px; overflow: visible; flex-wrap: wrap; } } @media (max-width: 420px) { .tt-cat .chips { grid-template-columns: 1fr 1fr; } .tt-cat .chip { white-space: normal; } } /* Tablet widths: the stage is height-limited, so centre it instead of hugging the left edge. */ @media (max-width: 980px) and (min-width: 561px) { .turntable { margin: 0 auto; border-radius: 28px 28px 28px 4px; width: 100%; max-width: calc(70svh / 1.05); } } /* Simplified detail panel: name, short description, size, one button. */ .ready-detail { max-width: 440px; } .rd-name { font-size: var(--step-3); } .rd-desc { margin-top: 14px; max-width: 40ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rd-sizes { margin-top: 28px; } .rd-size-list { display: inline-flex; grid-template-columns: none; gap: 0; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(38, 48, 42, .1); } .rd-size span { display: block; padding: 10px 18px; border-radius: 999px; box-shadow: none; background: transparent; font-weight: 500; transition: background-color .25s, color .25s; } .rd-size input:checked + span { background: var(--moss); color: var(--petal); box-shadow: none; } .rd-add { display: flex; justify-content: space-between; gap: 24px; width: 100%; max-width: 360px; min-height: 56px; margin-top: 18px; padding: 0 24px; } .rd-add .rd-price { font: 500 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; min-width: 0; } @media (max-width: 560px) { .rd-size-list { display: flex; } .rd-size { flex: 1; text-align: center; } .rd-size span { padding: 10px 8px; } .rd-add { max-width: none; } } /* ---------- Build section on the dusty-rose bouquet photograph ---------- */ .build { position: relative; background: #b47f79; color: var(--ink); overflow: hidden; isolation: isolate; } .build::before { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 16 / 9; z-index: -1; background: linear-gradient(to bottom, rgba(180, 127, 121, 0) 52%, #b47f79 96%), url("assets/img/build-bg.webp") center top / cover no-repeat; } .build-head { min-height: min(38vw, 560px); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .build-head > * { grid-column: 1; } .build-head p { color: #3d2b2a; margin-top: 6px; } .build .step legend { color: var(--ink); } .build .step-hint, .build .optional { color: #3d2b2a; } .build .step-n { color: #6e2f45; } .build .check em { color: #3d2b2a; } @media (max-width: 980px) { .build-head { min-height: 62vw; grid-template-columns: 1fr; } .build-head > * { max-width: 62%; } } /* ---------- Occasions on the moss wall and pink sofa ---------- */ .occasions { position: relative; max-width: none; margin: 0; border-top: 0; color: var(--petal); min-height: min(100vh, 62vw); display: flex; align-items: center; padding: clamp(72px, 9vw, 130px) var(--gutter); background: linear-gradient(90deg, rgba(28, 38, 24, .82) 0%, rgba(28, 38, 24, .55) 38%, rgba(28, 38, 24, 0) 62%), url("assets/img/occasions-bg.webp") right center / cover no-repeat, #34412b; } .occ-inner { max-width: min(560px, 48%); } .occ-mark { font: 400 clamp(3rem, 1.4rem + 6vw, 7.4rem)/.9 var(--display); letter-spacing: .06em; color: #f1e6e2; margin-bottom: clamp(14px, 2vw, 26px); text-shadow: 0 2px 30px rgba(0,0,0,.25); } .occasions h2 { font-size: var(--step-2); font-style: italic; font-weight: 400; margin-bottom: clamp(20px, 3vw, 34px); color: #f1e6e2; } .occasions .occ-list { grid-template-columns: 1fr; gap: 16px; } .occasions .occ-list li { display: grid; grid-template-columns: minmax(9.5em, auto) 1fr; gap: 4px 18px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid rgba(241, 230, 226, .16); } .occasions .occ-list h3 { font-size: var(--step-1); margin: 0; color: #f6ede9; } .occasions .occ-list p { color: rgba(244, 239, 242, .78); font-size: var(--step--1); max-width: 34ch; } @media (max-width: 860px) { .occasions { display: block; min-height: 0; padding-top: 56vw; background: linear-gradient(180deg, rgba(52, 65, 43, 0) 30vw, #34412b 56vw), url("assets/img/occasions-bg.webp") 70% top / auto 60vw no-repeat, #34412b; } .occ-inner { max-width: none; } .occasions .occ-list li { grid-template-columns: 1fr; } } /* ---------- Our story, tied with a satin bow ---------- */ .about { position: relative; overflow: hidden; text-align: center; color: #f3e6e8; padding: clamp(80px, 11vw, 150px) 0 clamp(40px, 6vw, 80px); background: radial-gradient(90% 70% at 50% 0%, #5e2535, #3f1823 70%), #3f1823; } .about::after { content: ""; position: absolute; inset: 0; background-image: var(--tex-grain); opacity: .25; mix-blend-mode: soft-light; pointer-events: none; } .about-text { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); } .about h2 { font-size: var(--step-4); font-style: italic; font-weight: 400; margin-bottom: 26px; color: #f6e9ec; } .about-text p { font-size: var(--step-1); line-height: 1.55; color: rgba(243, 230, 232, .86); margin: 0 auto 16px; max-width: 46ch; } .about-text .about-areas { font-size: var(--step--1); color: rgba(243, 230, 232, .66); margin-top: 22px; } .ribbon { --bw: min(500px, 74vw); position: relative; z-index: 1; height: calc(var(--bw) * 1.07); margin-top: clamp(30px, 5vw, 60px); } .ribbon-band { position: absolute; top: calc(var(--bw) * 1.07 * .24 - var(--bw) * .05); height: calc(var(--bw) * .1); width: 50%; background: linear-gradient(180deg, #6f2a3c 0%, #a34f63 22%, #d58c9b 42%, #e9aab6 50%, #b8606f 64%, #7c3245 86%, #5c2232 100%); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); } .ribbon-band::after { /* faint satin weave */ content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); } .ribbon-l { left: 0; transform-origin: right center; transform: scaleX(var(--band, 0)); } .ribbon-r { right: 0; transform-origin: left center; transform: scaleX(var(--band, 0)); } .ribbon-bow { position: absolute; left: 50%; top: 0; width: var(--bw); transform-origin: 50% 24%; opacity: var(--bow-in, 0); transform: translateX(-50%) translateY(calc((1 - var(--bow, 0)) * -70px)) scale(calc(.5 + .5 * var(--bow, 0))) rotate(calc((1 - var(--bow, 0)) * -12deg)); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .38)); } .ribbon-bow img { width: 100%; height: auto; display: block; } .ribbon-bow img, .ribbon-shine { transform-origin: 50% 24%; } .ribbon-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-mask: url("assets/img/bow.webp") center / 100% 100% no-repeat; mask: url("assets/img/bow.webp") center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 244, .55) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; mix-blend-mode: screen; } .ribbon.is-tied .ribbon-bow img, .ribbon.is-tied .ribbon-shine { animation: bow-sway 6s ease-in-out infinite; } .ribbon.is-tied .ribbon-shine { opacity: 1; animation: bow-sway 6s ease-in-out infinite, bow-shine 3.6s ease-in-out .3s infinite; } @keyframes bow-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } } @keyframes bow-shine { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } } .build-head { align-content: start; } .occasions .occ-list li { grid-template-columns: 12.5em 1fr; } @media (max-width: 860px) { .occasions .occ-list li { grid-template-columns: 1fr; } } .strip-thumb { display: block; width: 84px; height: 105px; background-repeat: no-repeat; } /* Order button lives in the header now, beside "Call the studio". */ .top .cart-fab { position: static; box-shadow: none; min-height: 42px; padding: 0 6px 0 14px; gap: 8px; background: transparent; color: inherit; border: 1px solid currentColor; font: 500 .95rem/1 var(--sans); } .top .cart-fab:hover { background: rgba(255, 255, 255, .12); } .top[data-state="solid"] .cart-fab:hover { background: rgba(38, 48, 42, .06); } .top .cart-fab svg { width: 18px; height: 18px; } .top .cart-count { min-width: 28px; height: 28px; font-size: .85rem; } @media (max-width: 820px) { .top .cart-fab { border: 0; padding: 0 4px; min-height: 44px; margin-left: auto; margin-right: 4px; } .top .cart-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .top .cart-fab svg { width: 22px; height: 22px; } .top .cart-count { min-width: 22px; height: 22px; font-size: .75rem; padding: 0 6px; } .wordmark { margin-right: 0; } .top { gap: 10px; } .top .wordmark { margin-right: auto; } } /* ---------- Seasonal spotlight: pinned bouquet, parting headline ---------- */ .spot { --p1: 0; --p2: 0; --p3: 0; position: relative; height: 300vh; background: #eeae43; } .spot-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #2b1d0e; background: radial-gradient(75% 65% at 38% 58%, #f8cd6d 0%, #f0b345 55%, #e39d33 100%); } .spot-stage::after { content: ""; position: absolute; inset: 0; background-image: var(--tex-grain); opacity: .18; mix-blend-mode: soft-light; pointer-events: none; } .spot-big { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.4vw; margin: 0; font: 400 clamp(4.5rem, 16vw, 17rem)/.85 var(--display); letter-spacing: -.02em; color: #fff3dc; opacity: calc(1 - var(--p2) * .9); pointer-events: none; white-space: nowrap; } .spot-big span:first-child { transform: translateX(calc(var(--p1) * -34vw)); } .spot-big span:last-child { font-style: italic; transform: translateX(calc(var(--p1) * 34vw)); } .spot-img { position: absolute; z-index: 2; left: 50%; bottom: -8vh; height: 96vh; width: auto; max-width: none; transform-origin: 50% 100%; transform: translateX(calc(-50% - var(--p1) * 23vw)) translateY(calc(var(--p1) * -3vh)) scale(calc(1 - var(--p1) * .1)); filter: drop-shadow(0 30px 40px rgba(90, 45, 0, .35)); } .spot-story, .spot-buy { position: absolute; z-index: 3; left: 55%; right: max(var(--gutter), 5vw); max-width: 520px; } .spot-story { top: 22%; opacity: var(--p2); transform: translateY(calc((1 - var(--p2)) * 40px)); } .spot-story h2 { font-size: var(--step-3); font-style: italic; font-weight: 400; line-height: 1.02; color: #2b1d0e; } .spot-body { margin-top: 18px; font-size: var(--step-1); line-height: 1.5; color: #4a3317; max-width: 40ch; } .spot-buy { top: 62%; opacity: var(--p3); transform: translateY(calc((1 - var(--p3)) * 30px)); pointer-events: none; } .spot[style*="--p3: 1"] .spot-buy, .spot.is-static .spot-buy { pointer-events: auto; } .spot-name { font: 500 var(--step-1)/1.2 var(--display); } .spot-price { margin-top: 4px; color: #4a3317; font-variant-numeric: tabular-nums; } .spot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 18px; } .spot-add { background: #2b1d0e; color: #fff3dc; } .spot-add:hover { background: #47301a; } .spot-more { color: #2b1d0e; font-weight: 500; text-underline-offset: 5px; } .spot.is-static { height: auto; } .spot.is-static .spot-stage { position: relative; min-height: 100vh; } @media (max-width: 820px) { .spot-big { align-items: flex-start; padding-top: 18vh; flex-direction: column; gap: 0; font-size: 24vw; text-align: center; } .spot-big span:first-child { transform: translateX(calc(var(--p1) * -60vw)); } .spot-big span:last-child { transform: translateX(calc(var(--p1) * 60vw)); } .spot-img { height: 58vh; bottom: auto; top: 14vh; transform-origin: 50% 0; transform: translateX(-50%) translateY(calc(var(--p1) * -6vh)) scale(calc(1 - var(--p1) * .32)); } .spot-story, .spot-buy { left: var(--gutter); right: var(--gutter); } .spot-story { top: 52%; } .spot-story h2 { font-size: var(--step-2); } .spot-body { font-size: var(--step-0); } .spot-buy { top: auto; bottom: calc(5vh + env(safe-area-inset-bottom)); } } @media (min-width: 821px) { .spot-img { height: 88vh; bottom: -6vh; transform: translateX(calc(-50% - var(--p1) * 21vw)) translateY(calc(var(--p1) * -2vh)) scale(calc(1 - var(--p1) * .12)); } } /* Spotlight in the site's own palette; the chosen bouquet's photo blends onto petal-pink. */ .spot { --spot-tone: #e8a3bb; background: #efe3e7; } .spot-stage { color: var(--ink); background: radial-gradient(48% 50% at 34% 56%, color-mix(in srgb, var(--spot-tone) 34%, transparent), transparent 72%), radial-gradient(90% 80% at 40% 40%, #f8f1f4 0%, #efe3e7 55%, #e4cfd6 100%); transition: background .6s ease; } .spot-big { color: color-mix(in srgb, var(--peony-deep) 22%, #efe3e7); } .spot-img { mix-blend-mode: multiply; filter: none; transition: opacity .25s ease; } .spot-img.is-swapping { opacity: 0; } .spot-img:not([src]) { visibility: hidden; } .spot-story h2 { color: var(--ink); } .spot-body { color: #4b4448; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .spot-name { font: 500 var(--step-0)/1.2 var(--sans); color: var(--muted); } .spot-price { margin-top: 2px; font: 500 var(--step-2)/1.1 var(--display); color: var(--ink); } .spot-add { background: var(--moss); color: var(--petal); } .spot-add:hover { background: var(--moss-2); } .spot-more { color: var(--ink); } .spot-buy { pointer-events: none; } .spot.is-buyable .spot-buy, .spot.is-static .spot-buy { pointer-events: auto; } @media (min-width: 821px) { .spot-img { height: 92vh; bottom: -4vh; } } /* Long arrangement names: keep the story at the top and the buy row anchored low, never overlapping. */ .spot-story { top: 15%; } .spot-story h2 { font-size: var(--step-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .spot-body { -webkit-line-clamp: 3; } .spot-buy { top: auto; bottom: 11%; } @media (max-width: 820px) { .spot-story { top: 50%; } .spot-story h2 { -webkit-line-clamp: 2; } .spot-body { -webkit-line-clamp: 2; font-size: var(--step--1); } .spot-buy { bottom: calc(4vh + env(safe-area-inset-bottom)); } } .nav a, .top-call, .top .cart-fab { white-space: nowrap; } @media (max-width: 1100px) and (min-width: 821px) { .top-call { display: none; } .nav { gap: 18px; } .top { gap: 18px; } } /* Size on the stand: a tag that pops when the size changes; the flat-photo fallback scales too. */ .tt-size { position: absolute; right: 18px; bottom: 16px; z-index: 4; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); font: 500 .9rem/1 var(--sans); color: var(--ink); box-shadow: 0 6px 16px rgba(38, 48, 42, .1); } .tt-size:empty { display: none; } .tt-size.is-pop { animation: size-pop .55s cubic-bezier(.3, 1.6, .5, 1); } @keyframes size-pop { 0% { transform: scale(.7); opacity: .3; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } .tt-spin:not(.has-3d) .tt-img { scale: var(--size-scale, 1); transform-origin: 50% 100%; transition: scale .6s cubic-bezier(.2, .9, .25, 1.12); } /* With the 3D turntable, the disc and shadow are drawn in 3D, under the bouquet. */ .turntable:has(.tt-spin.has-3d) .tt-plinth { display: none; } /* Flat photos for now (3D switched off in index.html): just the picture, no turntable ring. */ .turntable:has(.tt-spin:not(.has-3d)) .tt-plinth { display: none; } .tt-spin.has-3d { inset: 2% 4% 2%; } /* ---------- Occasions, take two: shoppable rows and a full photo on smaller screens ---------- */ .occ-inner { max-width: min(640px, 52%); } .occ-mark { font-size: clamp(3rem, 1rem + 5.4vw, 7rem); white-space: nowrap; } .occasions .occ-list { gap: 0; } .occasions .occ-list li { display: block; padding: 0; border-bottom: 1px solid rgba(241, 230, 226, .14); } .occ-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 14px; margin: 0 -14px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .25s ease; } .occ-row:hover, .occ-row:focus-visible { background: rgba(255, 255, 255, .07); } .occ-text h3 { font-size: var(--step-1); margin: 0 0 4px; color: #f6ede9; } .occ-text p { color: rgba(244, 239, 242, .74); font-size: var(--step--1); max-width: 38ch; } .occ-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .occ-thumbs { display: flex; } .occ-thumb { width: 40px; height: 50px; border-radius: 10px; overflow: hidden; background: #fff; margin-left: -12px; box-shadow: 0 0 0 2px #2f3a28, 0 6px 12px rgba(0, 0, 0, .25); transition: transform .35s var(--ease-out); } .occ-thumb:first-child { margin-left: 0; } .occ-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .occ-thumb .strip-thumb { transform: scale(.476); transform-origin: 0 0; } .occ-row:hover .occ-thumb:nth-child(1) { transform: translateX(-8px) rotate(-6deg); } .occ-row:hover .occ-thumb:nth-child(3) { transform: translateX(8px) rotate(6deg); } .occ-cta { font-size: var(--step--1); font-weight: 500; color: #f1d7dd; white-space: nowrap; } .occ-row:hover .occ-cta { text-decoration: underline; text-underline-offset: 4px; } /* Tablets and phones: the photo as a full banner on top, so the sofa and bouquet are never cropped away. */ @media (max-width: 1100px) { .occasions { display: block; min-height: 0; padding: calc(56.25vw - 40px) var(--gutter) clamp(56px, 8vw, 90px); background: linear-gradient(180deg, rgba(52, 65, 43, 0) calc(56.25vw - 180px), #34412b calc(56.25vw - 10px)), url("assets/img/occasions-bg.webp") center top / 100% auto no-repeat, #34412b; } .occ-inner { max-width: 720px; } .occ-mark { font-size: clamp(3rem, 1.2rem + 9vw, 6.5rem); } } @media (max-width: 560px) { .occ-row { grid-template-columns: 1fr; gap: 10px; } .occ-side { flex-direction: row; align-items: center; justify-content: space-between; } } /* Our story: the satin bow ties onto a bouquet (replaces the ribbon band). */ .ribbon { --bh: min(74vh, 680px); --ar: .707; --waist: .7126; --sw: calc(var(--bh) * var(--ar)); --bw: calc(var(--sw) * .62); height: calc(var(--bh) + 20px); margin-top: clamp(24px, 4vw, 48px); } .ribbon-band { display: none; } .ribbon-stage { position: absolute; left: 50%; top: 0; height: var(--bh); width: var(--sw); transform: translateX(-50%) translateY(calc((1 - var(--band, 0)) * 70px)) scale(calc(.94 + .06 * var(--band, 0))); opacity: var(--band, 0); } .ribbon-stage::before { /* a soft glow behind the flowers */ content: ""; position: absolute; inset: 4% -10% 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 170, 182, .28), transparent); filter: blur(10px); } .ribbon-bouquet { position: relative; height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4)); } .ribbon-bow { width: var(--bw); top: calc(var(--bh) * var(--waist) - var(--bw) * 1.07 * .24); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)); } /* ---------- Opener: the name over a painted still life ---------- The name holds still; the blooms move. The backdrop is the painting with its flowers painted out, and the flowers sit on top in four corner groups that part outward as you scroll and sway a little at rest. hero.js sets --p (progress) and --e (eased parting). */ .paint-hero { position: relative; height: 240vh; background: #120f0c; --cream: #eee5d2; } .ph-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .ph-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .ph-back { z-index: 1; transform: scale(calc(1.02 + var(--e, 0) * .05)); filter: brightness(calc(1 - var(--e, 0) * .2)); } .ph-title { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 14vh; color: var(--cream); text-align: center; pointer-events: none; font-weight: 400; } .ph-name { font: 400 clamp(4rem, 15.5vw, 16rem)/.86 var(--display); font-variation-settings: "opsz" 96; letter-spacing: -.035em; word-spacing: .12em; } .ph-sub { font: italic 400 clamp(1.3rem, 2.6vw, 2.4rem)/1 var(--display); margin-top: .5em; } /* Every moving group (six of leaves, four of blooms) moves only with the scroll, two ways: - parting: the wrapper drifts outward, turns and grows (--x, --y, --r, --s, driven by --e from hero.js); - swaying: the image rocks back and forth as you scroll (--w from hero.js swings -1..1), pivoting where a stem would hold it. Nothing moves while the page is still. */ .ph-leaf, .ph-bloom { position: absolute; inset: 0; pointer-events: none; transform: translate(calc(var(--e, 0) * var(--x)), calc(var(--e, 0) * var(--y))) rotate(calc(var(--e, 0) * var(--r))) scale(calc(1 + var(--e, 0) * var(--s))); } .ph-leaf img, .ph-bloom img { transform-origin: inherit; transform: rotate(calc(var(--w, 0) * var(--a))) translate(calc(var(--w, 0) * var(--fx, 0px)), calc(var(--w, 0) * var(--fy, 0px))); } .ph-bloom { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .5)); } .ph-leaf { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); } /* Stacking: backdrop, leaves, left blooms, the name (so the K always reads), right blooms (the A tucks behind the roses). */ .ph-back { z-index: 0; } .ph-leaf { z-index: 1; } .ph-tl, .ph-bl { z-index: 2; } .ph-title { z-index: 3; } .ph-tr, .ph-br { z-index: 4; } .ph-copy { z-index: 6; } /* Leaves: they stay framing the name (only a small drift) and do most of the swaying. */ .ph-l-tl { --x: -4vw; --y: -2vh; --r: -6deg; --s: .08; transform-origin: 0% 30%; } .ph-l-tc { --x: 1vw; --y: -4vh; --r: 4deg; --s: .06; transform-origin: 50% 0%; } .ph-l-tr { --x: 4vw; --y: -2vh; --r: 6deg; --s: .08; transform-origin: 100% 30%; } .ph-l-bl { --x: -3vw; --y: 3vh; --r: -5deg; --s: .1; transform-origin: 0% 100%; } .ph-l-bc { --x: 0vw; --y: 4vh; --r: -3deg; --s: .08; transform-origin: 50% 100%; } .ph-l-br { --x: 4vw; --y: 3vh; --r: 5deg; --s: .1; transform-origin: 100% 100%; } .ph-l-tl img { --a: 6deg; --fx: 14px; --fy: 8px; } .ph-l-tc img { --a: -5deg; --fx: -10px; --fy: 14px; } .ph-l-tr img { --a: -7deg; --fx: -14px; --fy: 10px; } .ph-l-bl img { --a: 5deg; --fx: 16px; --fy: -10px; } .ph-l-bc img { --a: -6deg; --fx: 10px; --fy: -14px; } .ph-l-br img { --a: 7deg; --fx: -16px; --fy: -12px; } /* Blooms: they part outward and sway a little. */ .ph-tl { --x: -24vw; --y: -22vh; --r: -14deg; --s: .12; transform-origin: 15% 15%; } .ph-tr { --x: 24vw; --y: -24vh; --r: 12deg; --s: .12; transform-origin: 80% 5%; } .ph-bl { --x: -30vw; --y: 18vh; --r: -10deg; --s: .2; transform-origin: 10% 80%; } .ph-br { --x: 32vw; --y: 24vh; --r: 9deg; --s: .22; transform-origin: 85% 85%; } .ph-tl img { --a: -3deg; } .ph-tr img { --a: 2.5deg; } .ph-bl img { --a: 3deg; } .ph-br img { --a: -2.5deg; } .ph-copy { position: absolute; z-index: 6; left: 50%; bottom: 9vh; width: min(560px, calc(100% - 2 * var(--gutter, 20px))); transform: translateX(-50%); text-align: center; color: var(--cream); opacity: clamp(0, calc((var(--p, 0) - .35) * 3), 1); visibility: hidden; } .paint-hero.is-copy .ph-copy { visibility: visible; } .ph-copy p { font: italic 400 clamp(1.7rem, 3vw, 2.5rem)/1.08 var(--display); margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .7); } .ph-copy .title-actions { justify-content: center; margin-top: 24px; } @media (max-width: 760px) { .ph-layer { object-position: 74% 50%; } .ph-title { justify-content: flex-start; padding: 15vh var(--gutter, 16px) 0; } .ph-name { font-size: 27vw; line-height: .86; } .ph-tl, .ph-bl { --x: -50vw; } .ph-tr { --x: 40vw; --y: -18vh; } .ph-br { --x: 44vw; --y: 28vh; } .ph-copy { bottom: 7vh; } .ph-copy p { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .paint-hero { height: auto; } .ph-stage { position: relative; } .ph-back, .ph-bloom, .ph-leaf, .ph-bloom img, .ph-leaf img { transform: none !important; } .ph-copy { opacity: 1; visibility: visible; } } /* ========================================================================== Two-colour theme: painting black (--black) and cream (--cream). Sections alternate: hero black, bouquets + spotlight + builder cream, occasions black, our story cream, visit on its photo, footer black. Photos keep their own colours; every UI colour is one of the two or a tint. ========================================================================== */ :focus-visible { outline-color: currentColor; } ::selection { background: var(--black); color: var(--cream); } /* Header */ .top[data-state="glass"] { background: linear-gradient(to bottom, rgba(20, 17, 14, .6), rgba(20, 17, 14, 0)); } .top[data-state="solid"] { background: rgba(238, 229, 210, .92); border-bottom-color: rgba(20, 17, 14, .12); } .top[data-state="solid"] .cart-fab:hover { background: rgba(20, 17, 14, .06); } .menu a:last-child { color: var(--cream); } /* Buttons and small accents: black on cream, cream on black */ .btn-primary, .cart-count { background: var(--black); color: var(--cream); } .btn-primary:hover { background: var(--moss-2); } .btn-ghost:hover, .cart-close:hover { background: rgba(20, 17, 14, .06); } .btn-light { background: var(--cream); color: var(--black); } .btn-light:hover { background: var(--card); } .btn-ghost-light { border-color: rgba(238, 229, 210, .6); color: var(--cream); } .btn-ghost-light:hover { background: rgba(238, 229, 210, .1); } .chip { border-color: rgba(20, 17, 14, .2); } /* Raised cards: a lighter cream instead of white; product photos (white backgrounds) melt into them */ .flower, .wrap-opt span, .segmented, .field input, .field select, .field textarea, .sig-list li, .order-text, .rd-size span, .rd-size-list, .strip-btn, .cart-item, .occ-thumb { background: var(--card); } .flower.is-picked, .wrap-opt input:checked + span { background: var(--petal-2); } .rd-size input:checked + span { background: var(--black); color: var(--cream); } .rd-size input:checked + span em { color: rgba(238, 229, 210, .7); } .flower-thumb::after { box-shadow: 0 0 0 2px var(--card); } .strip-btn img, .cart-item img, .occ-thumb img, .ci-img img { mix-blend-mode: multiply; } .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(20, 17, 14, .15); } .flower, .wrap-opt span, .segmented, .rd-size span, .rd-size-list, .strip-btn { box-shadow: 0 0 0 1px rgba(20, 17, 14, .1); } /* Bouquet turntable: cream stage, neutral glow (no per-bouquet colour) */ .turntable { background: radial-gradient(120% 100% at 50% 0%, var(--card), var(--petal-2)); } .tt-glow { background: radial-gradient(58% 52% at 50% 44%, rgba(255, 252, 245, .9), rgba(255, 252, 245, .35) 55%, transparent 78%) !important; } .tt-nav, .tt-cat-btn, .tt-size { background: rgba(246, 240, 228, .85); } .tt-nav:hover, .tt-cat-btn:hover { background: var(--card); } .tt-cat-menu, .tt-cat-list { background: rgba(246, 240, 228, .96); } /* Spotlight: cream stage, black type */ .spot { --spot-tone: #ffffff; background: var(--cream); } .spot-stage { background: radial-gradient(90% 80% at 40% 40%, var(--card) 0%, var(--cream) 55%, var(--petal-2) 100%); } .spot-big { color: color-mix(in srgb, var(--black) 9%, var(--cream)); } .spot-body { color: var(--muted); } /* Builder: the bouquet photo now sits on a cream wall and fades into cream */ .build { background: var(--cream); } .build::before { background: linear-gradient(to bottom, rgba(238, 229, 210, 0) 52%, var(--cream) 96%), url("assets/img/build-bg.webp") center top / cover no-repeat; } .build-head p, .build .step-hint, .build .optional, .build .check em { color: var(--muted); } .build .step-n { color: var(--black); } /* Occasions: black, the moss-sofa photo on the right */ .occasions { background: linear-gradient(90deg, rgba(20, 17, 14, .92) 0%, rgba(20, 17, 14, .6) 38%, rgba(20, 17, 14, 0) 62%), url("assets/img/occasions-bg.webp") right center / cover no-repeat, var(--black); } .occ-mark, .occasions h2, .occasions .occ-list h3, .occ-text h3 { color: var(--cream); } .occasions .occ-list p, .occ-text p { color: rgba(238, 229, 210, .74); } .occasions .occ-list li { border-bottom-color: rgba(238, 229, 210, .16); } .occ-cta { color: var(--cream); } .occ-thumb { box-shadow: 0 0 0 2px var(--black), 0 6px 12px rgba(0, 0, 0, .3); } @media (max-width: 1100px) { .occasions { background: linear-gradient(180deg, rgba(20, 17, 14, 0) calc(56.25vw - 180px), var(--black) calc(56.25vw - 10px)), url("assets/img/occasions-bg.webp") center top / 100% auto no-repeat, var(--black); } } /* Our story: cream, black type; the bouquet and its satin bow stay as photographed */ .about { background: var(--cream); color: var(--black); } .about::after { opacity: .12; mix-blend-mode: multiply; } .about h2 { color: var(--black); } .about-text p { color: var(--muted); } .about-text .about-areas { color: rgba(20, 17, 14, .55); } .ribbon-stage::before { background: radial-gradient(closest-side, rgba(255, 252, 245, .9), transparent); } .ribbon-bouquet, .ribbon-bow { filter: drop-shadow(0 24px 30px rgba(20, 17, 14, .25)); } /* Visit and footer: black */ .visit-img::after { background: linear-gradient(100deg, rgba(20, 17, 14, .88) 0%, rgba(20, 17, 14, .58) 45%, rgba(20, 17, 14, .12) 80%); } .foot { background: var(--black); color: rgba(238, 229, 210, .8); } .foot-mark { color: var(--cream); } .order-dialog::backdrop, .cart::backdrop { background: rgba(20, 17, 14, .6); } /* Builder bench: black stage with a soft cream light and a dark table (no brown wood, no yellow) */ .bench-light { background: radial-gradient(60% 55% at 50% 38%, rgba(238, 229, 210, .14), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, .35), transparent 70%); } .bench::after { background: repeating-linear-gradient(178deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.18) 7px 8px, rgba(238,229,210,.03) 8px 15px), linear-gradient(to bottom, #2a241e, var(--black)); box-shadow: 0 -1px 0 rgba(238, 229, 210, .12); } .bench-empty { color: rgba(238, 229, 210, .7); } /* ---------- Mobile menu: a quiet bouquet of links ---------- Cream Bodoni names on the painting's dark canvas, separated by hairlines. Each name carries a small round bloom from the hero painting in a fine ring of that flower's colour (--c); the name takes the colour only when touched. Painted sprays frame the corners. Opening the menu plays one soft arrangement: sprays settle in, rows fade up one after another (--i staggers them). */ .menu { overflow: hidden auto; background: var(--black); } .menu::before { /* the painting's canvas */ content: ""; position: absolute; inset: 0; background: url("assets/img/hero-paint.webp") center / cover; opacity: .75; pointer-events: none; } .menu nav { position: relative; z-index: 2; gap: 0; max-width: 420px; } .menu nav a:not(.menu-call) { display: flex; align-items: center; gap: 18px; padding: 15px 0; font: italic 400 clamp(1.55rem, 6.2vw, 2.1rem)/1.15 var(--display); letter-spacing: .005em; color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(238, 229, 210, .12); transition: color .3s ease; animation: menu-rise .7s var(--ease-out) calc(.1s + var(--i) * .05s) both; } .menu nav a:not(.menu-call):first-child { border-top: 1px solid rgba(238, 229, 210, .12); } .menu-bloom { width: 40px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--black), 0 0 0 4px var(--c); /* a fine coloured ring, set off by a hairline of black */ transition: transform .6s var(--ease-out); } .menu nav a:not(.menu-call):hover, .menu nav a:not(.menu-call):focus-visible, .menu nav a:not(.menu-call):active { color: var(--c); } .menu nav a:not(.menu-call):hover .menu-bloom, .menu nav a:not(.menu-call):focus-visible .menu-bloom, .menu nav a:not(.menu-call):active .menu-bloom { transform: rotate(-18deg); } .menu nav a.menu-call { justify-self: start; margin-top: 30px; padding: 13px 24px; border-radius: 999px; text-decoration: none; font: 500 .95rem/1 var(--sans); letter-spacing: .02em; color: var(--cream); background: transparent; border: 1px solid rgba(238, 229, 210, .45); box-shadow: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; animation: menu-rise .7s var(--ease-out) calc(.1s + var(--i) * .05s) both; } .menu nav a.menu-call:hover, .menu nav a.menu-call:focus-visible { background: var(--cream); color: var(--black); border-color: var(--cream); } .menu-address { margin-top: 16px; font: 400 var(--step--1)/1.5 var(--sans); color: rgba(238, 229, 210, .55); animation: menu-rise .7s var(--ease-out) calc(.1s + var(--i) * .05s) both; } .menu-spray { position: absolute; z-index: 1; pointer-events: none; opacity: .92; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)); } .menu-spray-top { top: -2%; right: -26%; width: min(104vw, 560px); transform-origin: 100% 0; animation: menu-spray-top 1.1s var(--ease-out) both; } .menu-spray-roses { bottom: -10%; right: -26%; width: min(82vw, 440px); transform-origin: 100% 100%; animation: menu-spray-roses 1.2s var(--ease-out) .05s both; } @keyframes menu-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes menu-spray-top { from { opacity: 0; transform: translate(6%, -8%) rotate(5deg); } to { opacity: .92; transform: none; } } @keyframes menu-spray-roses { from { opacity: 0; transform: translate(8%, 8%) rotate(-5deg); } to { opacity: .92; transform: none; } } @media (prefers-reduced-motion: reduce) { .menu nav a, .menu-address, .menu-spray { animation: none !important; } .menu-bloom, .menu nav a { transition: none; } } /* ---------- Occasions, take three: a 2x2 grid of cards, then a short made-to-order list ---------- Each card shows one bouquet (never repeated), its occasion, a line about it and how many there are. Prom and weddings have nothing to browse, so they sit below as rows with a call link. */ .occasions .occ-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 16px); list-style: none; padding: 0; margin: 0; } .occasions .occ-list li { display: block; padding: 0; border: 0; } .occ-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: 18px; overflow: hidden; background: rgba(238, 229, 210, .05); box-shadow: inset 0 0 0 1px rgba(238, 229, 210, .12); transition: box-shadow .3s ease, background-color .3s ease; } .occ-photo { display: block; aspect-ratio: 1; overflow: hidden; background: radial-gradient(90% 80% at 50% 40%, var(--card), var(--petal-2)); } .occ-photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 7% 10% 4%; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); } .occ-photo img:not([src]) { visibility: hidden; } .occ-card-text { display: grid; gap: 6px; padding: 14px 16px 16px; align-content: start; flex: 1; } .occasions .occ-card h3 { font: 400 clamp(1.1rem, .95rem + .6vw, 1.4rem)/1.15 var(--display); margin: 0; color: var(--cream); } .occasions .occ-card p { font-size: var(--step--1); line-height: 1.45; color: rgba(238, 229, 210, .68); max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .occ-count { margin-top: 4px; font-size: var(--step--1); font-weight: 500; color: var(--cream); text-decoration: underline; text-decoration-color: rgba(238, 229, 210, .35); text-underline-offset: 4px; transition: text-decoration-color .3s ease; } .occ-card:hover, .occ-card:focus-visible { background: rgba(238, 229, 210, .09); box-shadow: inset 0 0 0 1px rgba(238, 229, 210, .3); } .occ-card:hover .occ-photo img, .occ-card:focus-visible .occ-photo img { transform: scale(1.05); } .occ-card:hover .occ-count, .occ-card:focus-visible .occ-count { text-decoration-color: var(--cream); } .occ-made-title { margin: clamp(30px, 4vw, 44px) 0 6px; font: italic 400 var(--step-1)/1.2 var(--display); color: rgba(238, 229, 210, .8); } .occ-made { list-style: none; padding: 0; margin: 0; } .occ-made li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(238, 229, 210, .14); } .occ-made li:first-child { border-top: 1px solid rgba(238, 229, 210, .14); } .occasions .occ-made h3 { font: 400 var(--step-1)/1.2 var(--display); margin: 0 0 3px; color: var(--cream); } .occasions .occ-made p { font-size: var(--step--1); color: rgba(238, 229, 210, .68); max-width: 38ch; } .occ-call { flex: none; min-height: 40px; padding: 0 18px; font-size: .9rem; } @media (min-width: 1101px) { .occ-inner { max-width: min(660px, 52%); } } @media (max-width: 480px) { .occ-card-text { padding: 12px 12px 14px; } .occasions .occ-card p { -webkit-line-clamp: 3; } .occ-made li { align-items: flex-start; flex-direction: column; gap: 10px; } } /* ---------- Visit, on the painting's canvas ---------- The street photo is gone: the section sits on the hero painting's dark canvas, framed by the same painted blooms (poppy and marigolds at the top, roses low on the right), so it reads as the last page of the same book. Text stays cream on the dark left side. */ .visit { min-height: min(100vh, 860px); } .visit-img { background: var(--black) url("assets/img/hero-paint.webp") center / cover no-repeat; } .visit-img::after { background: radial-gradient(80% 90% at 0% 100%, rgba(20, 17, 14, .7), transparent 70%); } .visit-spray { position: absolute; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); } .visit-spray-top { top: 0; right: -6%; width: min(58vw, 760px); } .visit-spray-roses { bottom: -8%; right: -4%; width: min(44vw, 620px); } .visit-card { z-index: 1; } .visit h2, .visit address, .visit-phone { color: var(--cream); } .hours dt { color: rgba(238, 229, 210, .7); } .hours dd { color: var(--cream); } .hours-note { color: rgba(238, 229, 210, .6); } .visit .btn-primary { background: var(--cream); color: var(--black); } .visit .btn-primary:hover { background: var(--card); } .visit .btn-ghost { color: var(--cream); border: 1px solid rgba(238, 229, 210, .5); } .visit .btn-ghost:hover { background: rgba(238, 229, 210, .1); } @media (max-width: 860px) { .visit { padding-top: 62vw; } .visit-spray-top { right: -22%; width: 104vw; } .visit-spray-roses { top: 12vw; bottom: auto; left: -18%; right: auto; width: 62vw; transform: scaleX(-1); } .visit-img::after { background: linear-gradient(to bottom, transparent 30%, rgba(20, 17, 14, .75) 62%); } } /* Occasions on wide screens: the sofa photo becomes a banner, the four cards one row beneath it. */ @media (min-width: 1101px) { .occasions { display: block; min-height: 0; padding-top: 30vw; background: linear-gradient(180deg, rgba(20, 17, 14, 0) 14vw, var(--black) 30vw), url("assets/img/occasions-bg.webp") center -16vw / 100% auto no-repeat, var(--black); } .occ-inner { max-width: 1240px; margin: 0 auto; } .occasions .occ-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .occ-made { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } .occ-made li:nth-child(2) { border-top: 1px solid rgba(238, 229, 210, .14); } } /* Bigger tap areas for small text links (logo, "See every size", phone number) without moving anything. */ .wordmark, .spot-more, .visit-phone { padding-block: 9px; margin-block: -9px; } /* Hero, smoother: the line and the buttons rise in one after the other (--c1, --c2 from hero.js), and a quiet scroll hint sits at the bottom of the first screen, fading as soon as you scroll. */ .ph-copy { opacity: 1; } .ph-copy p { opacity: var(--c1, 0); transform: translateY(calc((1 - var(--c1, 0)) * 24px)); } .ph-copy .title-actions { opacity: var(--c2, 0); transform: translateY(calc((1 - var(--c2, 0)) * 20px)); } .ph-hint { position: absolute; z-index: 6; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 10px; pointer-events: none; font: 500 .78rem/1 var(--sans); letter-spacing: .14em; color: rgba(238, 229, 210, .75); opacity: var(--hint, 1); } .ph-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(rgba(238, 229, 210, .7), rgba(238, 229, 210, 0)); } .ph-bloom, .ph-leaf, .ph-back, .ph-copy p, .ph-copy .title-actions { will-change: transform; } @media (prefers-reduced-motion: reduce) { .ph-copy p, .ph-copy .title-actions { opacity: 1; transform: none; } .ph-hint { display: none; } } /* Your Pick: a shorter scroll (faster), with the moving parts on their own layers (smoother). */ .spot { height: 200vh; } .spot-img, .spot-big span, .spot-story, .spot-buy { will-change: transform, opacity; } .ph-hint { color: var(--cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); } .ph-hint::after { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); } /* ---------- Hero, first version (restored) ---------- One painting, with the tulip and roses cut from it on a front layer; both layers share the same push-in so they stay aligned. The name splits as you scroll: KL slides left, FLORA right, behind the roses. */ .ph-v1 { height: 260vh; } .ph-v1 .ph-layer { transform: scale(calc(1.02 + var(--e, 0) * .1)); transform-origin: 50% 60%; } .ph-v1 .ph-back { z-index: 1; filter: brightness(calc(1 - var(--e, 0) * .25)); } .ph-v1 .ph-title { z-index: 2; } .ph-v1 .ph-front { z-index: 3; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); } .ph-v1 .ph-name { display: flex; gap: .22em; word-spacing: normal; } .ph-v1 .ph-name > span { will-change: transform; } .ph-v1 .ph-name > span:first-child { transform: translateX(calc(var(--e, 0) * -48vw)); } .ph-v1 .ph-name > span:last-child { transform: translateX(calc(var(--e, 0) * 52vw)); } .ph-v1 .ph-sub { opacity: calc(1 - var(--e, 0) * 2.5); } @media (max-width: 760px) { .ph-v1 .ph-layer { object-position: 74% 50%; transform-origin: 60% 70%; } .ph-v1 .ph-name { flex-direction: column; gap: 0; } .ph-v1 .ph-name > span:first-child { transform: translateX(calc(var(--e, 0) * -105vw)); } .ph-v1 .ph-name > span:last-child { transform: translateX(calc(var(--e, 0) * 105vw)); } .ph-v1 .ph-copy { bottom: auto; top: 24vh; } } @media (prefers-reduced-motion: reduce) { .ph-v1 .ph-layer, .ph-v1 .ph-name > span { transform: none !important; } } /* Smoother on phones: section lengths in svh (they don't change as the address bar slides), the pinned stages contained, and the moving pieces on their own GPU layers. */ .spot { height: 200vh; height: 200svh; } .ph-v1 { height: 260vh; height: 260svh; } .spot-stage, .ph-stage { contain: layout paint; } .spot-img, .spot-big span, .spot-story, .spot-buy, .ph-v1 .ph-layer, .ph-v1 .ph-name > span { backface-visibility: hidden; will-change: transform, opacity; } @media (max-width: 820px) { .spot-img { transform: translate3d(-50%, calc(var(--p1) * -6vh), 0) scale(calc(1 - var(--p1) * .32)); } } /* Hero: the blooms fly out of the frame. Each group's wrapper travels well past the edge (--x, --y), turns (--r) and grows (--s) as if passing the camera; hero.js gives each its own staggered --e. Only the plate behind pushes in; the bloom images themselves stay still inside their wrappers. */ .ph-v1 .ph-bloom img { transform: none; } .ph-v1 .ph-back { z-index: 1; } .ph-v1 .ph-tl, .ph-v1 .ph-bl { z-index: 2; } .ph-v1 .ph-title { z-index: 3; } .ph-v1 .ph-tr, .ph-v1 .ph-br { z-index: 4; } .ph-v1 .ph-tl { --x: -55vw; --y: -62vh; --r: -18deg; --s: .3; } .ph-v1 .ph-tr { --x: 50vw; --y: -70vh; --r: 16deg; --s: .3; } .ph-v1 .ph-bl { --x: -78vw; --y: 34vh; --r: -14deg; --s: .35; } .ph-v1 .ph-br { --x: 78vw; --y: 58vh; --r: 12deg; --s: .4; } @media (max-width: 760px) { .ph-v1 .ph-tl { --x: -90vw; --y: -55vh; } .ph-v1 .ph-tr { --x: 70vw; --y: -70vh; } .ph-v1 .ph-bl { --x: -110vw; --y: 30vh; } .ph-v1 .ph-br { --x: 90vw; --y: 70vh; } } @media (prefers-reduced-motion: reduce) { .ph-v1 .ph-bloom { transform: none !important; } } /* The KL FLORA sign stays put: no split, no fade. Only the flowers move. */ .ph-v1 .ph-name > span:first-child, .ph-v1 .ph-name > span:last-child { transform: none !important; } .ph-v1 .ph-sub { opacity: 1; } @media (max-width: 760px) { .ph-v1 .ph-copy { top: auto; bottom: 7vh; } } /* Hero length: the flowers clear and the buttons arrive exactly as the hero ends (see END in hero.js), then the bouquets follow straight away. 200 = 100 for the screen + 100 of scrolling. */ .ph-v1 { height: 200vh; height: 200svh; } /* ---------- Hero: everything leaves, the canvas warms into cream ---------- After the blooms, the leaves fly out too (hero.js staggers each group's --e). As the canvas empties, a warm cream wash fades in (--bg): brighter in the middle, the site's cream at the edges, so the hero meets the cream sections below without a seam. The name, line and buttons turn from cream to black with it (colour only; the sign never moves). */ .ph-v1 .ph-back { z-index: 0; } .ph-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--bg, 0); background: radial-gradient(70% 62% at 50% 42%, #fbf6ec 0%, var(--card) 38%, var(--cream) 78%); } .ph-v1 .ph-leaf { z-index: 2; } .ph-v1 .ph-leaf img { transform: none; } .ph-v1 .ph-l-tl { --x: -62vw; --y: -48vh; --r: -20deg; --s: .25; transform-origin: 0% 30%; } .ph-v1 .ph-l-tc { --x: 4vw; --y: -72vh; --r: 10deg; --s: .2; transform-origin: 50% 0%; } .ph-v1 .ph-l-tr { --x: 62vw; --y: -50vh; --r: 18deg; --s: .25; transform-origin: 100% 30%; } .ph-v1 .ph-l-bl { --x: -66vw; --y: 42vh; --r: -16deg; --s: .3; transform-origin: 0% 100%; } .ph-v1 .ph-l-bc { --x: -4vw; --y: 74vh; --r: -8deg; --s: .3; transform-origin: 50% 100%; } .ph-v1 .ph-l-br { --x: 66vw; --y: 46vh; --r: 14deg; --s: .3; transform-origin: 100% 100%; } @media (max-width: 760px) { .ph-v1 .ph-l-tl, .ph-v1 .ph-l-bl { --x: -105vw; } .ph-v1 .ph-l-tr, .ph-v1 .ph-l-br { --x: 105vw; } } .ph-v1 .ph-title { color: color-mix(in srgb, var(--black) calc(var(--bg, 0) * 100%), var(--cream)); } .ph-v1 .ph-copy { color: color-mix(in srgb, var(--black) calc(var(--bg, 0) * 100%), var(--cream)); } .ph-v1 .ph-copy p { text-shadow: 0 2px 24px rgba(0, 0, 0, calc(.7 * (1 - var(--bg, 0)))); } .ph-v1 .ph-copy .btn-light { background: color-mix(in srgb, var(--black) calc(var(--bg, 0) * 100%), var(--cream)); color: color-mix(in srgb, var(--cream) calc(var(--bg, 0) * 100%), var(--black)); } .ph-v1 .ph-copy .btn-ghost-light { color: color-mix(in srgb, var(--black) calc(var(--bg, 0) * 100%), var(--cream)); border-color: color-mix(in srgb, var(--black) calc(var(--bg, 0) * 55%), rgba(238, 229, 210, .6)); } @media (prefers-reduced-motion: reduce) { .ph-v1 .ph-leaf { transform: none !important; } } /* Your Pick ends the moment its story is complete (END in spotlight.js): 170 = 100 for the screen + 70 of scrolling. */ .spot { height: 170vh; height: 170svh; } /* Hero buttons change colour with the scroll itself, not on a delay. */ .ph-v1 .ph-copy .btn { transition: none; } /* ---------- Headings: Cormorant Garamond ---------- Section headings, bouquet names and card titles move from Bodoni italic (wide, swashy) to upright Cormorant Garamond: a classical Garamond from the same age as the painted still lifes, calmer and easier to read, and a good partner for the Bodoni KL FLORA sign and logo (which stay as they are). Cormorant runs small, so sizes step up a little. */ :root { --heading: "Cormorant Garamond", "Garamond", Georgia, serif; } .ready-head h2, .build-head h2, .occasions h2, .about h2, .visit h2, .spot-story h2, .cart-head h2, .order-inner h2, .rd-name, .occ-card h3, .occ-made h3, .occ-made-title, .step legend, .tally-total, .spot-price, .rd-price { font-family: var(--heading); font-style: normal; font-weight: 500; letter-spacing: -0.005em; } .ready-head h2, .build-head h2, .about h2, .visit h2 { font-size: calc(var(--step-4) * 1.08); line-height: 1; } .rd-name, .spot-story h2 { font-size: calc(var(--step-3) * 1.1); line-height: 1.02; } .occasions h2 { font-style: italic; } /* the one italic: the line under KL FLORA */ .occ-card h3, .occ-made h3 { font-weight: 600; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); } .rd-price, .spot-price, .tally-total { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } /* Hero wash: a soft rose pink from the painted roses, smooth and luminous in the middle, easing to the site's cream along the bottom edge so it still meets the bouquets section without a seam. */ .ph-wash { background: linear-gradient(to bottom, rgba(238, 229, 210, 0) 72%, var(--cream) 100%), radial-gradient(85% 70% at 50% 40%, #fbe4e8 0%, #f5d2d9 42%, #efc6cf 72%, #ead2cf 100%); } /* Hero wash, take two: the site's cream, with a faint memory of each flower where it stood (marigold orange top left, poppy coral top right, hydrangea blue on the left, tulip pink bottom left, rose blush bottom right). The bottom edge is pure cream so it still meets the bouquets section cleanly. */ .ph-wash { background: linear-gradient(to bottom, rgba(238, 229, 210, 0) 80%, var(--cream) 100%), radial-gradient(34% 40% at 14% 6%, rgba(236, 150, 70, .26), transparent 70%), radial-gradient(36% 42% at 74% 4%, rgba(222, 92, 66, .2), transparent 70%), radial-gradient(28% 36% at 9% 36%, rgba(168, 188, 226, .28), transparent 72%), radial-gradient(30% 40% at 6% 82%, rgba(222, 112, 140, .2), transparent 72%), radial-gradient(42% 52% at 84% 76%, rgba(240, 172, 186, .3), transparent 74%), radial-gradient(70% 60% at 50% 45%, #f7f1e6, var(--cream) 80%); } @media (max-width: 760px) { /* phones show the right of the painting: poppy and marigolds up top, roses below */ .ph-wash { background: linear-gradient(to bottom, rgba(238, 229, 210, 0) 84%, var(--cream) 100%), radial-gradient(60% 26% at 18% 4%, rgba(236, 150, 70, .24), transparent 72%), radial-gradient(70% 30% at 85% 6%, rgba(222, 92, 66, .2), transparent 72%), radial-gradient(90% 40% at 70% 78%, rgba(240, 172, 186, .32), transparent 74%), radial-gradient(90% 60% at 50% 42%, #f7f1e6, var(--cream) 80%); } } /* No scroll hint. */ .ph-hint { display: none !important; } /* ---------- Your Pick: one tight block of text ---------- Name, description, price and buttons now sit together, centred beside the bouquet on wide screens and stacked under it on phones, instead of split top and bottom with a gap in between. Each part still arrives on its own beat (--p2 for the story, --p3 for the buy row). */ .spot-text { position: absolute; z-index: 3; left: 55%; right: max(var(--gutter), 5vw); max-width: 520px; top: 50%; transform: translateY(-50%); display: grid; gap: clamp(22px, 3vh, 34px); } .spot-text .spot-story, .spot-text .spot-buy { position: static; left: auto; right: auto; top: auto; bottom: auto; max-width: none; } .spot-text .spot-story h2 { -webkit-line-clamp: 3; } .spot-text .spot-body { margin-top: 14px; } .spot-text .spot-name { margin: 0; } .spot-text .spot-actions { margin-top: 16px; } @media (max-width: 820px) { .spot-text { left: var(--gutter); right: var(--gutter); max-width: none; top: auto; transform: none; bottom: calc(5vh + env(safe-area-inset-bottom)); gap: 18px; } .spot-text .spot-story h2 { -webkit-line-clamp: 2; } } @media (max-width: 820px) { .spot-img { transform: translate3d(-50%, calc(var(--p1) * -7vh), 0) scale(calc(1 - var(--p1) * .4)); } } /* Phones: a larger bouquet, with the text block anchored just beneath it (image box ends at 54vh). */ @media (max-width: 820px) { .spot-img { transform: translate3d(-50%, calc(var(--p1) * -6vh), 0) scale(calc(1 - var(--p1) * .2)); } .spot-text { top: 56vh; top: 56svh; bottom: auto; } } /* ---------- One heading font everywhere ---------- Every display use now reads Cormorant Garamond (the shared --display), upright. Bodoni is kept only for the brand marks: the KL FLORA sign, the logo, the KL FLORA mark over Occasions, the footer mark and the mobile menu. */ :root { --sign: "Bodoni Moda", "Didot", Georgia, serif; --display: var(--heading); } .ph-name, .ph-sub, .wordmark-kl, .wordmark-rest, .occ-mark, .foot-mark, .menu a:not(.menu-call) { font-family: var(--sign); } .bench-empty, .step-n, .cart-empty, .cart.is-paid .cart-status, .ph-copy p, .occ-made-title, .spot-big span:last-child { font-style: normal; } .ph-copy p { font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.7rem); } .spot-big { font-weight: 500; } .visit-phone, .summary-total strong, .cart-total strong { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } /* Hero copy: a short headline, a smaller line saying what you get, then the buttons. */ .ph-copy .ph-lead { font: 500 clamp(2rem, 3.6vw, 3rem)/1.05 var(--heading); letter-spacing: -.01em; margin: 0; } .ph-copy .ph-detail { font: 400 clamp(1rem, .95rem + .25vw, 1.15rem)/1.5 var(--sans); margin: 12px auto 0; max-width: 34ch; opacity: calc(var(--c1, 0) * .82); text-shadow: none; } .ph-copy .title-actions { margin-top: 26px; } .menu nav a:not(.menu-call) { font-family: var(--sign); } /* the menu keeps its approved Bodoni */ /* ========================================================================== Deep moss green, from the wall in the occasions photo. The hero now finishes on it, and the dark sections share it (occasions, visit, footer, the builder's bouquet bench and summary), alternating with the cream sections. Black stays as the ink. ========================================================================== */ :root { --green: #2f3120; --green-2: #3b3e2a; --green-ink: rgba(238, 229, 210, .72); } /* Hero: the canvas empties into the green; the name and copy stay cream on it. */ .ph-wash { background: radial-gradient(80% 70% at 50% 42%, #3a3d28 0%, var(--green) 55%, #272919 100%) !important; } .ph-v1 .ph-title, .ph-v1 .ph-copy { color: var(--cream); } .ph-v1 .ph-copy p { text-shadow: 0 2px 20px rgba(0, 0, 0, calc(.6 * (1 - var(--bg, 0)))); } .ph-v1 .ph-copy .btn-light { background: var(--cream); color: var(--black); } .ph-v1 .ph-copy .btn-ghost-light { color: var(--cream); border-color: rgba(238, 229, 210, .6); } .paint-hero { background: var(--green); } /* Occasions, visit, footer on the green. */ .occasions { background: linear-gradient(90deg, rgba(35, 42, 31, .94) 0%, rgba(35, 42, 31, .6) 38%, rgba(35, 42, 31, 0) 62%), url("assets/img/occasions-bg.webp") right center / cover no-repeat, var(--green); } @media (max-width: 1100px) { .occasions { background: linear-gradient(180deg, rgba(35, 42, 31, 0) calc(56.25vw - 180px), var(--green) calc(56.25vw - 10px)), url("assets/img/occasions-bg.webp") center top / 100% auto no-repeat, var(--green); } } @media (min-width: 1101px) { .occasions { background: linear-gradient(180deg, rgba(35, 42, 31, 0) 14vw, var(--green) 30vw), url("assets/img/occasions-bg.webp") center -16vw / 100% auto no-repeat, var(--green); } } .occ-thumb { box-shadow: 0 0 0 2px var(--green), 0 6px 12px rgba(0, 0, 0, .3); } .visit-img { background-color: var(--green); } .visit-img::after { background: radial-gradient(80% 90% at 0% 100%, rgba(35, 42, 31, .75), transparent 70%); } @media (max-width: 860px) { .visit-img::after { background: linear-gradient(to bottom, transparent 30%, rgba(35, 42, 31, .8) 62%); } } .foot { background: var(--green); } /* Builder: the bench and the summary on the green; the summary button is a clear cream pill. */ .bench { background-color: var(--green); } .bench::after { background: repeating-linear-gradient(178deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.16) 7px 8px, rgba(238,229,210,.03) 8px 15px), linear-gradient(to bottom, #3a3d28, #24261a); } .summary { background: var(--green); border-radius: 22px; padding: clamp(24px, 3vw, 34px); } .summary-lines dt, .summary-note { color: var(--green-ink); } .summary-lines { border-bottom: 1px solid rgba(238, 229, 210, .14); padding-bottom: 14px; margin: 0 0 14px; } .summary-total { border-top: 0; padding-top: 0; } .summary .btn-primary { width: 100%; min-height: 54px; border-radius: 999px; background: var(--cream); color: var(--black); font: 600 1rem/1 var(--sans); letter-spacing: .01em; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); } .summary .btn-primary:hover { background: #fff8ea; } .summary .btn-primary:disabled, .summary .btn-primary[aria-disabled="true"] { opacity: .55; } .summary-note { text-align: center; margin-top: 14px; } /* Prices: the clean body face with straight, even (lining) numbers everywhere. */ .rd-price, .rd-add .rd-price, .spot-price, .tally-total, .summary-total strong, .cart-total strong, .ci-price, .rd-size em, .flower-meta { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; } .rd-add .rd-price { font-weight: 600; font-size: 1.05rem; } .spot-price { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.01em; } .summary-total strong, .cart-total strong { font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -.01em; } .tally-total { font-weight: 600; } /* Dark green, truer than the photo's olive: the hero's final colour and the dark sections. */ :root { --green: #263023; --green-2: #323d2e; } .ph-wash { background: radial-gradient(80% 70% at 50% 42%, #304030 0%, var(--green) 55%, #1d251b 100%) !important; } .occasions { background-color: var(--green); } .bench::after { background: repeating-linear-gradient(178deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.16) 7px 8px, rgba(238,229,210,.03) 8px 15px), linear-gradient(to bottom, #304030, #1d251b); } /* Short, wide windows (laptops, small browser panes): size the sign by height and lift it, so it never collides with the copy that arrives at the bottom. */ @media (min-width: 761px) and (max-height: 720px) { .ph-v1 .ph-title { padding-bottom: 30vh; } .ph-v1 .ph-name { font-size: min(15.5vw, 24vh); } .ph-v1 .ph-copy { bottom: 6vh; } .ph-copy .ph-lead { font-size: clamp(1.6rem, 5vh, 2.6rem); } .ph-copy .title-actions { margin-top: 16px; } } /* The green never goes solid: it settles at about 78%, a tint over the painting's dark canvas, so the brushwork and craquelure still show through at the end of the hero. */ .ph-wash { opacity: calc(var(--bg, 0) * .78); } /* ---------- Bouquet details (from the shop's product pages) ---------- */ .rd-more { margin-top: 16px; border-top: 1px solid rgba(20, 17, 14, .14); border-bottom: 1px solid rgba(20, 17, 14, .14); max-width: 46ch; } .rd-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; font: 600 .95rem/1 var(--sans); letter-spacing: .01em; list-style: none; } .rd-more summary::-webkit-details-marker { display: none; } .rd-more summary::after { /* a fine plus that turns into a minus */ content: ""; width: 14px; height: 14px; flex: none; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: background-size .25s var(--ease-out); } .rd-more[open] summary::after { background-size: 14px 1.5px, 1.5px 0; } .rd-facts { display: grid; gap: 12px; margin: 0 0 16px; } .rd-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; } .rd-facts dt { font-size: var(--step--1); font-weight: 600; color: var(--ink); } .rd-facts dd { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--muted); } @media (max-width: 480px) { .rd-facts div { grid-template-columns: 1fr; gap: 2px; } } /* Hero: trim the outermost pixels of each flying layer, so their image edges never show as thin light lines while they turn and leave the frame. */ .ph-v1 .ph-bloom img, .ph-v1 .ph-leaf img { clip-path: inset(3px); } /* The dark sections take the exact green the hero ends on (78% green over the dark canvas). */ :root { --green: #232a1f; } /* Favourite heart: top right of the stage. Outline when off, filled rose-black when saved, a small pop on save. */ .tt-fav { position: absolute; top: 16px; right: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(246, 240, 228, .85); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(20, 17, 14, .12); transition: transform .2s var(--ease-out), background-color .2s; } .tt-fav:hover { transform: scale(1.06); background: var(--card); } .tt-fav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s; } .tt-fav[aria-pressed="true"] svg { fill: currentColor; } .tt-fav.is-pop svg { animation: fav-pop .45s cubic-bezier(.3, 1.6, .5, 1); } @keyframes fav-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } #tt-cat-list .chip[hidden] { display: none; } /* ---------- The bouquet strip, bigger and clearer ---------- Larger cards at the thumbnails' full resolution, each with its name and starting price, snapping as you swipe; the one on the stage is lifted with a fine black ring. */ .strip { gap: 14px; padding-top: 14px; padding-bottom: 18px; } .strip-btn { display: grid; grid-template-rows: auto auto auto; gap: 4px; width: 152px; padding: 8px 8px 12px; border-radius: 18px; text-align: left; color: var(--ink); font: inherit; } .strip-photo { display: grid; place-items: center; height: 158px; border-radius: 12px; background: radial-gradient(90% 80% at 50% 40%, #fbf7ef, var(--card)); overflow: hidden; } .strip-btn img, .strip-thumb { width: 120px; height: 150px; } .strip-btn img { object-fit: contain; } .strip-name { margin-top: 6px; font: 600 .98rem/1.15 var(--heading); padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; } .strip-price { font: 500 .8rem/1 var(--sans); color: var(--muted); padding: 0 2px; font-variant-numeric: lining-nums tabular-nums; } .strip-btn:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(20, 17, 14, .16), 0 12px 24px rgba(20, 17, 14, .1); } .strip li.is-on .strip-btn { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--ink), 0 14px 28px rgba(20, 17, 14, .14); } .strip-wrap::before, .strip-wrap::after { width: 56px; } @media (max-width: 560px) { .strip-btn { width: 128px; } .strip-photo { height: 132px; } .strip-btn img, .strip-thumb { width: 100px; height: 125px; } .strip-thumb { transform: scale(.8333); transform-origin: center; } } /* Your Pick at in-between widths (tablets, small laptops): keep the bouquet inside the left half so it never runs under the text column. */ @media (min-width: 821px) and (max-width: 1180px) { .spot-img { height: 74vh; bottom: 2vh; transform: translateX(calc(-50% - var(--p1) * 25vw)) translateY(calc(var(--p1) * -2vh)) scale(calc(1 - var(--p1) * .12)); } .spot-text { left: 54%; right: var(--gutter); } } /* ---------- Phone menu, take three ---------- The painting's canvas under the site's dark green; each link shows a short line saying what's there; the lower half answers the practical questions (open today, call, directions, address). */ .menu { background: var(--green); display: flex; flex-direction: column; } .menu::before { opacity: .35; mix-blend-mode: luminosity; } .menu nav { gap: 0; max-width: 460px; } .menu nav a:not(.menu-call) { padding: 14px 0; gap: 16px; align-items: center; } .menu nav a .m-text { display: grid; gap: 4px; background: none; padding: 0; } .menu nav a .m-label { font: italic 400 clamp(1.5rem, 6vw, 2rem)/1.1 var(--sign); background: linear-gradient(var(--c), var(--c)) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; justify-self: start; transition: background-size .35s var(--ease-out); } .menu nav a:hover .m-label, .menu nav a:focus-visible .m-label { background-size: 100% 1.5px; } .menu nav a .m-hint { font: 400 .86rem/1.35 var(--sans); color: rgba(238, 229, 210, .62); letter-spacing: .005em; } .menu nav a:not(.menu-call):hover, .menu nav a:not(.menu-call):focus-visible { color: var(--cream); } .menu nav a:hover .m-label, .menu nav a:focus-visible .m-label, .menu nav a:active .m-label { color: var(--c); } .menu-bloom { width: 46px; } .menu-foot { position: relative; z-index: 2; max-width: 460px; margin-top: auto; padding-top: 28px; display: grid; gap: 14px; animation: menu-rise .7s var(--ease-out) calc(.1s + var(--i) * .05s) both; } .menu-today { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 400 .9rem/1.4 var(--sans); color: rgba(238, 229, 210, .7); } .menu-today b { font-weight: 600; color: var(--cream); font-variant-numeric: lining-nums; } .menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .menu-foot .btn { min-height: 50px; justify-content: center; border-radius: 999px; font: 600 .95rem/1 var(--sans); margin: 0; padding: 0 16px; text-decoration: none; } .menu-foot .menu-call { background: var(--cream); color: var(--black); border: 0; box-shadow: none; } .menu-foot .menu-dir { background: transparent; color: var(--cream); border: 1px solid rgba(238, 229, 210, .45); } .menu-foot .menu-dir:hover { background: rgba(238, 229, 210, .08); } .menu-address { margin: 0; font: 400 .85rem/1.45 var(--sans); color: rgba(238, 229, 210, .55); animation: none; } .menu-spray-roses { width: min(66vw, 360px); bottom: auto; top: 46%; right: -24%; opacity: .55; } @media (prefers-reduced-motion: reduce) { .menu-foot { animation: none; } } /* Menu footer buttons: identical pills in the body face; no leftover spacing on the last link. */ .menu .menu-foot a.btn { font: 600 .95rem/1 var(--sans) !important; min-height: 50px; height: 50px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; } .menu nav a:last-child { margin-top: 0; } /* The menu's flex layout must never override [hidden]: closed means gone. */ .menu[hidden] { display: none !important; }