/* LMYfloral — public site. Adapted from the original bundler export. Fonts loaded via Google Fonts in the HTML. */ :root { --bg: #f3ede2; --bg-2: #ebe3d4; --ink: #2b2520; --ink-soft: #5a4f44; --moss: #3a4a32; --terra: #b8593d; --mushroom: #a89786; --line: rgba(43, 37, 32, 0.18); --line-soft: rgba(43, 37, 32, 0.08); --serif: 'Cormorant Garamond', 'Noto Serif SC', serif; --hand: 'Caveat', 'Ma Shan Zheng', cursive; --sans: 'Inter', 'Noto Serif SC', system-ui, sans-serif; --radius: 2px; } /* Palettes — CMS sets data-palette on . */ html[data-palette="earth"] { --bg:#f3ede2; --bg-2:#ebe3d4; --ink:#2b2520; --ink-soft:#5a4f44; --moss:#3a4a32; --terra:#b8593d; --mushroom:#a89786; --line:rgba(43,37,32,0.18); --line-soft:rgba(43,37,32,0.08); } html[data-palette="bone"] { --bg:#f8f5ee; --bg-2:#efe9dc; --ink:#2a2725; --ink-soft:#6a6058; --moss:#4a5d3f; --terra:#9c4f37; --mushroom:#bfa896; --line:rgba(42,39,37,0.16); --line-soft:rgba(42,39,37,0.08); } html[data-palette="dusk"] { --bg:#ebe5d8; --bg-2:#ddd5c4; --ink:#2a2419; --ink-soft:#5b5142; --moss:#36412c; --terra:#a14a32; --mushroom:#9b8a78; --line:rgba(42,36,25,0.20); --line-soft:rgba(42,36,25,0.10); } html[data-palette="noir"] { --bg:#1c1916; --bg-2:#252220; --ink:#f3ede2; --ink-soft:#bdb3a4; --moss:#a8b58a; --terra:#d97a5a; --mushroom:#a89786; --line:rgba(243,237,226,0.18); --line-soft:rgba(243,237,226,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--sans); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(168,151,134,0.06) 0px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(58,74,50,0.04) 0px, transparent 1px), radial-gradient(circle at 50% 80%, rgba(184,89,61,0.05) 0px, transparent 1px); background-size: 7px 7px, 11px 11px, 13px 13px; pointer-events: none; z-index: 0; opacity: 0.8; } #app { position: relative; z-index: 1; } ::selection { background: var(--moss); color: var(--bg); } .slot { display: block; background: var(--bg-2); position: relative; overflow: hidden; } .slot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; transition: background .35s ease, padding .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(243,237,226,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 40px; border-bottom-color: var(--line-soft); } .nav-logo { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: .02em; color: var(--ink); display: flex; align-items: baseline; gap: 8px; text-decoration: none; } .nav-logo em { font-style: italic; color: var(--moss); } .nav-logo .mark { font-family: var(--hand); font-size: 22px; color: var(--terra); transform: translateY(-2px); } .nav-links { display: flex; gap: 36px; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; } .nav-links a { color: var(--ink-soft); text-decoration: none; position: relative; padding: 4px 0; transition: color .2s; } .nav-links a:hover { color: var(--moss); } .nav-links a::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0; background: currentColor; transition: width .3s; } .nav-links a:hover::after { width: 100%; } .nav-cta { font-family: var(--hand); font-size: 19px; color: var(--moss); text-decoration: none; border-bottom: 1px solid var(--moss); padding-bottom: 1px; } /* SHARED */ .section { padding: 120px 40px; position: relative; } .container { max-width: 1320px; margin: 0 auto; } .eyebrow { font-family: var(--hand); font-size: 22px; color: var(--terra); margin-bottom: 8px; line-height: 1; } .section-title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); } .section-title em { font-style: italic; color: var(--moss); font-weight: 400; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .section-head .lede { max-width: 380px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* HERO */ .hero { min-height: 100vh; padding: 120px 40px 80px; position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } .hero[data-layout="centered"] { grid-template-columns: 1fr; text-align: center; justify-items: center; } .hero[data-layout="centered"] .hero-meta { justify-content: center; } .hero[data-layout="centered"] .hero-text { max-width: 880px; } .hero[data-layout="centered"] .hero-actions { justify-content: center; } .hero[data-layout="centered"] .hero-visual-wide { position: relative; width: 100%; max-width: 1100px; height: 56vh; min-height: 420px; margin-top: 60px; overflow: hidden; } .hero[data-layout="centered"] .hero-visual { display: none; } .hero-text { position: relative; z-index: 2; } .hero-meta { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 28px; } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); display: inline-block; } .hero-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 9vw, 132px); line-height: .95; letter-spacing: -0.025em; color: var(--ink); } .hero-headline .line { display: block; } .hero-headline .italic { font-style: italic; color: var(--moss); } .hero-headline .hand { font-family: var(--hand); font-style: normal; font-size: .55em; color: var(--terra); margin-left: .1em; transform: translateY(-0.3em); display: inline-block; } .hero-sub { margin-top: 36px; max-width: 460px; font-size: 15px; line-height: 1.75; color: var(--ink-soft); } .hero-sub .zh { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 400; } .hero[data-layout="centered"] .hero-sub { margin: 36px auto 0; } .hero-actions { margin-top: 44px; display: flex; gap: 28px; align-items: center; } .btn-primary { background: var(--moss); color: var(--bg); border: 0; padding: 16px 32px; font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, transform .25s; } .btn-primary:hover { background: var(--ink); transform: translateY(-1px); } .btn-link { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .hero-visual { position: relative; height: 78vh; min-height: 560px; } .hero-image-main { position: absolute; top: 0; right: 0; width: 88%; height: 100%; overflow: hidden; } .hero-image-sub { position: absolute; bottom: -40px; left: 0; width: 38%; height: 32%; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(43,37,32,.25); } .hero-stamp { position: absolute; top: 24px; left: -10px; width: 130px; height: 130px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); background: var(--bg); z-index: 3; font-family: var(--hand); font-size: 18px; color: var(--ink); text-align: center; line-height: 1.1; padding: 12px; } .hero-stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--line); } .hero-marquee { position: absolute; bottom: 24px; left: 40px; right: 40px; display: flex; align-items: center; gap: 24px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); z-index: 2; } .hero-marquee .line { flex: 1; height: 1px; background: var(--line); } .hero-marquee .item { display: flex; gap: 8px; align-items: center; } .hero-marquee .item .num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss); letter-spacing: 0; text-transform: none; } /* WEEKLY */ .weekly { background: var(--bg-2); } .weekly-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 40px; margin-bottom: 60px; } .weekly-date { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); } .weekly-card { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; padding: 40px 0; } .weekly-image { height: 600px; position: relative; overflow: hidden; } .weekly-image .badge { position: absolute; top: 20px; left: 20px; background: var(--terra); color: var(--bg); font-family: var(--hand); font-size: 18px; padding: 8px 16px; border-radius: 999px; z-index: 2; } .weekly-info h3 { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; } .weekly-info h3 em { font-style: italic; color: var(--moss); } .weekly-info .hand { font-family: var(--hand); font-size: 28px; color: var(--terra); margin-top: 12px; margin-bottom: 28px; } .weekly-info p { font-size: 15px; line-height: 1.8; color: var(--ink-soft); max-width: 460px; margin-bottom: 32px; } .weekly-stems { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .stem-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; } .weekly-meta { display: flex; gap: 48px; padding-top: 24px; border-top: 1px solid var(--line); } .weekly-meta .label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .weekly-meta .value { font-family: var(--serif); font-size: 22px; color: var(--ink); } /* PRODUCT GRID */ .product-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 56px 32px; } .product { cursor: pointer; text-decoration: none; color: inherit; display: block; } .product-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); margin-bottom: 18px; } .product-image .slot { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .6s ease, transform 1.2s ease; } .product-image .alt { opacity: 0; } .product:hover .product-image .main { opacity: 0; transform: scale(1.04); } .product:hover .product-image .alt { opacity: 1; } .product-image .num { position: absolute; top: 12px; left: 12px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink); background: var(--bg); padding: 4px 10px; z-index: 2; } .product-image .quick { position: absolute; bottom: 12px; right: 12px; background: var(--bg); color: var(--ink); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 8px 14px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; z-index: 2; } .product:hover .product-image .quick { opacity: 1; transform: translateY(0); } .product-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .product-name { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.2; } .product-zh { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); margin-top: 2px; letter-spacing: .05em; } .product-price { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--moss); white-space: nowrap; } .product-tag { margin-top: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); } /* ABOUT */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image { height: 640px; position: relative; overflow: hidden; } .about-image .stamp { position: absolute; bottom: -30px; right: -30px; width: 160px; height: 160px; background: var(--terra); color: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--hand); font-size: 22px; line-height: 1.1; padding: 20px; transform: rotate(8deg); z-index: 2; white-space: pre-line; } .about-text .eyebrow { margin-bottom: 14px; } .about-text h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 8px; } .about-text h2 em { font-style: italic; color: var(--moss); } .about-text .zh-title { font-family: 'Noto Serif SC', serif; font-size: 18px; color: var(--ink-soft); margin-bottom: 32px; letter-spacing: .18em; } .about-text p { font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 18px; } .about-sig { margin-top: 36px; font-family: var(--hand); font-size: 36px; color: var(--ink); line-height: 1; } .about-sig small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; } /* INSTAGRAM */ .ig { background: var(--bg-2); padding-bottom: 100px; } .ig-head { text-align: center; margin-bottom: 60px; } .ig-head .handle { font-family: var(--hand); font-size: 32px; color: var(--terra); margin-top: 8px; display: inline-block; text-decoration: none; } .ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .ig-grid > * { aspect-ratio: 1 / 1; position: relative; overflow: hidden; transition: transform .4s, filter .4s; } .ig-grid > *:hover { transform: scale(.98); filter: brightness(.95); } /* FAQ */ .faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; } .faq-side .eyebrow { margin-bottom: 14px; } .faq-side h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4vw, 56px); line-height: 1.05; margin-bottom: 24px; } .faq-side h2 em { font-style: italic; color: var(--moss); } .faq-side p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 32px; max-width: 320px; } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); padding: 28px 0; cursor: pointer; } .faq-q { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; } .faq-q .num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss); width: 28px; flex-shrink: 0; } .faq-q .q-text { flex: 1; font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--ink); } .faq-q .toggle { font-family: var(--serif); font-size: 28px; color: var(--moss); transition: transform .4s; line-height: 1; } .faq-item.open .faq-q .toggle { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .5s ease, padding .4s ease; padding-left: 28px; } .faq-item.open .faq-a { max-height: 240px; padding-top: 16px; } .faq-a p { font-size: 14px; line-height: 1.8; color: var(--ink-soft); max-width: 540px; } /* FOOTER */ .footer { padding: 80px 40px 32px; background: var(--ink); color: var(--bg); } .footer-wordmark { font-family: var(--serif); font-weight: 300; font-size: clamp(80px, 14vw, 200px); line-height: .9; letter-spacing: -0.02em; margin-bottom: 60px; } .footer-wordmark em { font-style: italic; color: var(--terra); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; padding: 40px 0; border-top: 1px solid rgba(243,237,226,.18); } .footer-col h4 { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,226,.6); margin-bottom: 18px; } .footer-col a, .footer-col p { font-family: var(--serif); font-size: 17px; color: var(--bg); text-decoration: none; display: block; margin-bottom: 8px; line-height: 1.5; white-space: pre-line; } .footer-col .hand { font-family: var(--hand); font-size: 26px; color: var(--terra); margin-top: 16px; } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(243,237,226,.18); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,237,226,.5); } /* DETAIL PAGE */ .crumb { padding: 100px 40px 0; max-width: 1320px; margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-soft); display: flex; gap: 8px; } .crumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; } .crumb a:hover { border-bottom-color: var(--ink-soft); } .crumb .sep { color: var(--mushroom); } .crumb .current { color: var(--ink); } .product-page { display: grid; grid-template-columns: 80px 1.05fr 0.95fr; gap: 32px; max-width: 1320px; margin: 32px auto 0; padding: 0 40px; } .thumbs { display: flex; flex-direction: column; gap: 12px; padding-top: 40px; } .thumb { width: 80px; height: 100px; cursor: pointer; opacity: .55; transition: opacity .25s; position: relative; overflow: hidden; } .thumb.active { opacity: 1; box-shadow: 0 0 0 1px var(--ink); } .thumb-label { font-family: var(--hand); font-size: 17px; color: var(--terra); margin-top: 16px; padding-left: 4px; } .gallery { position: sticky; top: 100px; } .gallery .stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); } .stage-num { position: absolute; top: 16px; left: 16px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); background: var(--bg); padding: 4px 10px; z-index: 3; } .stage-zoom-hint { position: absolute; bottom: 16px; right: 16px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--bg); padding: 6px 10px; z-index: 3; } .zoom-layer { position: absolute; inset: 0; transition: transform .3s ease; } .zoom-layer .slot { position: absolute; inset: 0; transition: opacity .25s; } .info { padding-top: 40px; } .info .meta { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 24px; } .info .meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); display: inline-block; } .badge-new { background: var(--terra); color: var(--bg); font-family: var(--hand); font-size: 16px; padding: 4px 12px; border-radius: 999px; } .info h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.02em; } .info h1 em { font-style: italic; color: var(--moss); } .info .zh-title { font-family: 'Noto Serif SC', serif; font-size: 17px; color: var(--ink-soft); letter-spacing: .18em; margin-top: 12px; } .info .zh-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mushroom); margin-top: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .price-row { display: flex; align-items: baseline; gap: 16px; margin-top: 28px; } .price-row .price { font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--moss); } .price-row .price small { font-style: normal; font-size: 14px; color: var(--ink-soft); margin-left: 6px; } .price-row .stock { font-family: var(--hand); font-size: 22px; color: var(--terra); } .info .lede { font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin-top: 28px; max-width: 520px; } .size-block { margin-top: 36px; } .field-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; } .field-label .hint { font-style: italic; font-family: var(--serif); font-size: 14px; letter-spacing: 0; text-transform: none; } .size-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .size-opt { padding: 14px 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; } .size-opt:hover { border-color: var(--mushroom); } .size-opt.active { border-color: var(--ink); background: var(--bg-2); } .size-opt .name { font-family: var(--serif); font-size: 18px; line-height: 1; } .size-opt .desc { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0; } .size-opt .add-price { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss); } .wechat-block { margin-top: 36px; padding: 24px; background: var(--bg-2); border: 1px solid var(--line-soft); } .wechat-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; } .wechat-eyebrow { font-family: var(--hand); font-size: 18px; color: var(--terra); margin-bottom: 4px; } .wechat-title { font-family: var(--serif); font-size: 22px; line-height: 1.3; } .wechat-title em { font-style: italic; color: var(--moss); } .wechat-qr { text-align: center; flex-shrink: 0; } .wechat-qr .slot { display: block; width: 108px; height: 108px; } .qr-cap { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; } .wechat-id-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wechat-id-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .wechat-id-value { display: flex; align-items: center; gap: 12px; } .id-text { font-family: var(--serif); font-size: 18px; } .id-copy { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--ink); background: transparent; cursor: pointer; } .id-copy:hover { background: var(--ink); color: var(--bg); } .wechat-note { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-top: 14px; } .wechat-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mushroom); margin-top: 12px; } .wechat-meta .dot-sm { width: 3px; height: 3px; border-radius: 50%; background: var(--mushroom); display: inline-block; } .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); } .perk { display: flex; gap: 12px; align-items: flex-start; } .perk .icon { width: 24px; height: 24px; border-radius: 50%; background: var(--moss); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 13px; flex-shrink: 0; } .perk .label { font-family: var(--serif); font-size: 16px; } .perk .sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .stems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; } .stem .stem-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-2); margin-bottom: 12px; } .stem .pct { position: absolute; top: 12px; right: 12px; background: var(--bg); padding: 4px 10px; font-family: var(--serif); font-style: italic; font-size: 14px; } .stem-name { font-family: var(--serif); font-size: 22px; } .stem-zh { font-family: 'Noto Serif SC', serif; font-size: 13px; color: var(--ink-soft); margin: 4px 0 10px; } .stem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .stem-desc { font-size: 13px; line-height: 1.7; color: var(--ink-soft); } .care-block { padding: 80px 40px; background: var(--bg-2); } .care { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; } .care-image { aspect-ratio: 4 / 5; position: relative; overflow: hidden; } .care-text h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; } .care-text h2 em { font-style: italic; color: var(--moss); } .care-text .hand { font-family: var(--hand); font-size: 28px; color: var(--terra); margin-top: 8px; } .care-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; } .care-step .num { font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--moss); } .care-step h4 { font-family: var(--serif); font-size: 19px; margin: 4px 0 6px; font-weight: 400; } .care-step p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); } .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .related-grid a { text-decoration: none; color: inherit; } .related-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); margin-bottom: 12px; } .related-image .slot { position: absolute; inset: 0; transition: opacity .5s; } .related-image .alt { opacity: 0; } .related-grid a:hover .related-image .main { opacity: 0; } .related-grid a:hover .related-image .alt { opacity: 1; } .related-row { display: flex; justify-content: space-between; align-items: baseline; } .related-name { font-family: var(--serif); font-size: 18px; } .related-zh { font-family: 'Noto Serif SC', serif; font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .related-price { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--moss); } .footer-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; } .footer .wm { font-family: var(--serif); font-size: 36px; } .footer .wm em { font-style: italic; color: var(--terra); } .footer .back { font-family: var(--serif); font-style: italic; color: var(--bg); text-decoration: none; } @media (max-width: 960px) { .nav { padding: 16px 20px; } .nav-links { display: none; } .section { padding: 80px 20px; } .hero { padding: 120px 20px 60px; grid-template-columns: 1fr; gap: 40px; } .hero-visual { height: 70vh; min-height: 480px; } .weekly-card, .about, .faq, .care { grid-template-columns: 1fr; gap: 48px; } .weekly-image, .about-image { height: 480px; } .product-grid { --cols: 2; gap: 32px 16px; } .ig-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .section-head { flex-direction: column; align-items: flex-start; } .weekly-head { grid-template-columns: 1fr; } .product-page { grid-template-columns: 1fr; padding: 0 20px; } .thumbs { flex-direction: row; padding-top: 16px; overflow-x: auto; } .gallery { position: static; } .stems-grid { grid-template-columns: 1fr 1fr; } .related-grid { grid-template-columns: 1fr 1fr; } .care-steps { grid-template-columns: 1fr; } }