/* ===================================================================== Charme-style boutique — inspired by the Shopify "Prestige" theme Aesthetic: warm cream paper, nude blush panels, chocolate brown accent. Romantic but grounded — chocolate keeps it from feeling saccharine. Display: DM Serif Display · Body / UI: DM Sans. ===================================================================== */ :root { --cream: #F9F1EA; /* warm cream 主背景 */ --cream-2: #F6EAE3; /* 粉肌次背景 */ --blush: #EFDCD1; /* 淡粉肌面板 */ --pink: #EAD5CC; /* 主粉肌 panels/badges */ --pink-soft: #F5E5DD; /* 最浅粉肌 banner 底 */ --pink-border: #D9BEB0; --wine: #4A2E20; /* 主色：巧克力棕 buttons/accents */ --wine-deep: #331E13; --mauve: #8B6B58; /* 摩卡次强调 */ --ink: #331E13; /* 主文字：深棕 */ --ink-soft: #563A2C; --muted: #987766; /* 灰咖次要文字（AA on cream） */ --line: #EBD8CE; /* 分隔线 */ --line-2: #F0DFD4; --white: #FFFFFF; --serif: 'Playfair Display', 'Noto Serif SC', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wrap: 1340px; --gutter: clamp(20px, 5vw, 60px); --radius: 0px; /* Prestige uses square corners */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 74px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--sans); color: var(--ink); background: var(--cream); font-weight: 400; line-height: 1.65; font-size: 16px; overflow-x: clip; } ::selection { background: var(--pink); color: var(--wine); } /* Hide page until JS injects header/footer to avoid FOUC flash on refresh. store.js adds .chrome-ready on once injectChrome() runs; a safety timeout inside store.js also adds it after 1.2s in case anything throws. */ html:not(.chrome-ready) body { visibility: hidden; } /* keyboard focus visibility (a11y — WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; } .swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--wine); } .field input:focus-visible, .field select:focus-visible, .news__form input:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* ---- shared bits ---- */ .eyebrow { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: var(--wine); } .muted { color: var(--muted); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; border-radius: var(--radius); transition: all .35s var(--ease); background: var(--wine); color: var(--cream); border: 1px solid var(--wine); } .btn:hover { background: var(--wine-deep); border-color: var(--wine-deep); } .btn--ghost { background: transparent; color: var(--wine); } .btn--ghost:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); } .btn--block { width: 100%; } .btn[disabled] { opacity: .45; cursor: not-allowed; } .link-underline { position: relative; padding-bottom: 3px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--wine); } .link-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .45s var(--ease); } .link-underline:hover::after { transform: scaleX(0); transform-origin: left; } /* ===================================================================== ANNOUNCEMENT BAR ===================================================================== */ .announce { background: var(--wine); color: var(--cream); overflow: hidden; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; } .announce__track { display: flex; width: max-content; animation: marquee 42s linear infinite; } .announce:hover .announce__track { animation-play-state: paused; } .announce__track span { padding: 10px 26px; white-space: nowrap; opacity: .95; } .announce__track span::before { content: '✿'; margin-right: 26px; color: var(--pink); } @keyframes marquee { to { transform: translateX(-50%); } } /* ===================================================================== HEADER ===================================================================== */ .header { position: sticky; top: 0; z-index: 60; background: rgba(255, 250, 241, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), background .4s var(--ease); } .header.is-scrolled { border-color: var(--line); background: rgba(255, 250, 241, 0.98); } .header .wrap.header__inner { max-width: none; padding-inline: clamp(20px, 3vw, 40px); } .header__inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav { display: flex; gap: 30px; align-items: center; } .nav a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); transition: color .3s var(--ease); } .nav a:hover { color: var(--wine); } .nav a.is-active { color: var(--wine); } /* desktop dropdown (Clothing → Top / Bottom / Set Wear) */ .nav-drop { position: relative; display: inline-flex; align-items: center; } .nav-drop__btn { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); transition: color .3s var(--ease); display: inline-flex; align-items: center; gap: 5px; } .nav-drop__btn:hover, .nav-drop:hover .nav-drop__btn, .nav-drop__btn.is-active { color: var(--wine); } .nav-drop__caret { font-size: 9px; line-height: 1; transition: transform .25s var(--ease); } .nav-drop:hover .nav-drop__caret { transform: rotate(180deg); } .nav-drop__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 168px; padding: 8px 0; margin-top: 0; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(28, 28, 28, .10); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s var(--ease); z-index: 60; } .nav-drop:hover .nav-drop__menu { opacity: 1; visibility: visible; } .nav-drop__menu a { display: block; padding: 9px 20px; white-space: nowrap; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); transition: color .2s var(--ease), background .2s var(--ease); } .nav-drop__menu a:hover, .nav-drop__menu a.is-active { color: var(--wine); background: rgba(130, 33, 62, .05); } .brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; white-space: nowrap; color: var(--ink); text-decoration: none; width: max-content; justify-self: center; } .brand__main { font-family: 'Cinzel', 'Trajan Pro', var(--serif); font-weight: 500; font-size: 28px; letter-spacing: 0.06em; line-height: 1; } .brand__sub { font-family: 'Cinzel', 'Trajan Pro', var(--serif); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; line-height: 1; margin-top: 6px; color: var(--ink); padding-left: 0.08em; /* compensate trailing letter-spacing for optical center */ } .brand sup { font-size: .42em; vertical-align: super; color: var(--wine); } .header__actions { display: flex; gap: 18px; justify-content: flex-end; align-items: center; } .lang-btn { font-size: 11px; letter-spacing: 0.12em; font-weight: 500; text-transform: uppercase; padding: 6px 11px; border: 1px solid var(--pink-border); border-radius: var(--radius); color: var(--ink-soft); transition: all .3s var(--ease); } .lang-btn:hover { background: var(--wine); border-color: var(--wine); color: var(--cream); } .icon-btn { display: inline-flex; position: relative; transition: color .3s var(--ease); color: var(--ink); } .icon-btn:hover { color: var(--wine); } .icon-btn svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.4; fill: none; } .cart-count { position: absolute; top: -8px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--wine); color: var(--cream); border-radius: 999px; font-family: var(--sans); font-size: 10px; font-weight: 600; display: grid; place-items: center; letter-spacing: 0; transform: scale(0); transition: transform .35s var(--ease); } .cart-count.show { transform: scale(1); } .nav-wrap { display: flex; align-items: center; gap: 22px; } .burger { display: inline-flex; } /* ===================================================================== HERO ===================================================================== */ .hero { position: relative; min-height: calc(100vh - var(--header-h) - 38px); display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch; background: var(--pink-soft); } .hero__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 7vw, 100px) clamp(28px, 5vw, 80px); position: relative; z-index: 2; } .hero__season { margin-bottom: 24px; } .hero h1 { font-size: clamp(50px, 7.5vw, 110px); line-height: 1.0; letter-spacing: 0; color: var(--ink); overflow-wrap: break-word; } .hero h1 em { font-style: italic; color: var(--wine); } .hero__lede { max-width: 42ch; margin: 26px 0 38px; color: var(--ink-soft); font-size: 17px; } .hero__cta { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .hero__media { position: relative; overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__tag { position: absolute; left: 22px; bottom: 22px; z-index: 3; background: var(--cream); padding: 12px 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; color: var(--ink); } .hero__tag b { font-weight: 600; color: var(--wine); } .hero__vert { position: absolute; right: -50px; top: 50%; transform: rotate(90deg); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--mauve); z-index: 3; } /* Hero carousel (multi-image) — position:absolute+inset:0 guarantees the carousel fills its .hero__media parent regardless of how the parent's height is computed (aspect-ratio vs min-height vs intrinsic). Some mobile browsers, especially in-app WebViews, mis-compute height:100% when the parent's height only comes from aspect-ratio, leaving a visible gap. */ /* Expanded top/right/bottom/left instead of `inset` shorthand — `inset` needs iOS Safari 14.5+, and some in-app WebViews (WeChat, older Instagram) don't parse it and drop the whole declaration, leaving the carousel unstyled. */ .hero-carousel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .hero-carousel__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .8s ease; } .hero-carousel__slide.active { opacity: 1; } .hero-carousel__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; } .hero-carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: transparent; cursor: pointer; padding: 0; transition: background .3s; } .hero-carousel__dot.active { background: #fff; } /* ===================================================================== VALUES STRIP ===================================================================== */ .values { background: var(--blush); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 6vw, 84px); padding: 20px var(--gutter); } .values div { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; } .values div span:first-child, .values div > span { color: var(--wine); } .values div span { margin-right: 0; } .values div span + span { color: var(--ink-soft); margin-left: 10px; } /* ===================================================================== SECTION HEADER ===================================================================== */ .section { padding-block: clamp(58px, 8.5vw, 116px); } .section--tight { padding-block: clamp(38px, 6vw, 66px); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; } .sec-head h2 { font-size: clamp(34px, 5vw, 58px); } .sec-head__num { font-size: 11px; letter-spacing: 0.2em; color: var(--wine); text-transform: uppercase; font-weight: 500; } .sec-head p { color: var(--muted); max-width: 34ch; } /* ===================================================================== CATEGORY TILES ===================================================================== */ .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cat { position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; background: var(--blush); } .cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .cat:hover img { transform: scale(1.06); } .cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,28,.5), rgba(28,28,28,0) 55%); } .cat__label { position: absolute; left: 22px; bottom: 22px; z-index: 2; color: var(--cream); } .cat__label h3 { font-size: 30px; color: var(--cream); } .cat__label span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: .9; } /* ===================================================================== PRODUCT GRID + CARDS ===================================================================== */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 34px) clamp(14px, 1.6vw, 24px); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .card { position: relative; display: flex; flex-direction: column; } .card__media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--blush); border-radius: var(--radius); } .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.1s var(--ease); } .card__media img.alt { opacity: 0; } .card__badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--wine); color: var(--cream); padding: 5px 11px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .card__badge.is-sale { background: #8C2836; color: var(--cream); } .card__badge.is-out { background: var(--muted); color: var(--cream); padding: 8px 16px; font-size: 14px; letter-spacing: .16em; font-weight: 700; } /* Image swap on hover — only where a real mouse pointer exists (desktop). Skipped on touch so a single tap opens the product. */ @media (hover: hover) and (pointer: fine) { .card:hover .card__media img.main { opacity: 0; } .card:hover .card__media img.alt { opacity: 1; transform: scale(1.04); } } .card__body { padding: 16px 2px 4px; text-align: center; } .card__cat { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .card__name { font-family: var(--sans); font-weight: 500; font-size: 15px; margin: 6px 0 8px; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); } .card__price { font-size: 15px; display: flex; gap: 9px; align-items: baseline; justify-content: center; } .card__price .was { color: var(--muted); text-decoration: line-through; font-size: 13px; } .card__price .now.sale { color: var(--wine); font-weight: 500; } .card__swatches { display: flex; gap: 6px; margin-top: 11px; justify-content: center; } .sw { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); } .card__colours { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 9px; } /* ===================================================================== EDITORIAL SPLIT ===================================================================== */ .editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 80px); } .editorial__media { aspect-ratio: 3/4; overflow: hidden; } .editorial__media img { width: 100%; height: 100%; object-fit: cover; } .editorial h2 { font-size: clamp(36px, 5vw, 60px); margin: 16px 0 22px; } .editorial p { color: var(--ink-soft); max-width: 46ch; margin-bottom: 18px; } .editorial--rev .editorial__media { order: 2; } /* ===================================================================== NEWSLETTER ===================================================================== */ .news { background: var(--blush); color: var(--ink); text-align: center; } .news .wrap { padding-block: clamp(58px, 8vw, 104px); } .news .eyebrow { color: var(--wine); } .news h2 { color: var(--ink); font-size: clamp(34px, 5vw, 56px); margin: 14px auto 14px; max-width: 18ch; } .news p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 32px; } .news__form { display: flex; max-width: 460px; margin-inline: auto; gap: 0; border-bottom: 1px solid var(--pink-border); } .news__form input { flex: 1; background: none; border: none; outline: none; color: var(--ink); padding: 13px 4px; font-size: 15px; } .news__form input::placeholder { color: var(--muted); } .news__form button { color: var(--wine); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 0 8px; transition: opacity .3s var(--ease); } .news__form button:hover { opacity: .65; } .news__note { font-size: 12px; color: var(--muted); margin-top: 16px; } /* ===================================================================== FOOTER ===================================================================== */ .footer { background: var(--cream-2); border-top: 1px solid var(--line); padding: clamp(50px, 8vw, 80px) var(--gutter) 0; } .footer .wrap { max-width: var(--wrap); margin: 0 auto; } .footer__main { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-bottom: clamp(40px, 6vw, 60px); } .footer__left { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } .footer__left .brand { margin-bottom: 0; } .footer__left .brand__main { font-size: 48px; } .footer__left .brand__sub { font-size: 14px; margin-top: 8px; } .footer__tagline { font-family: var(--serif); font-size: 15px; color: var(--muted); font-style: italic; max-width: 30ch; } .footer__socials { display: flex; gap: 12px; margin-top: 4px; } .footer__socials a { width: 38px; height: 38px; border: 1px solid var(--pink-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mauve); transition: all .3s var(--ease); } .footer__socials a:hover { border-color: var(--wine); color: var(--wine); background: rgba(74,46,32,0.04); } .footer__socials svg { width: 16px; height: 16px; fill: currentColor; } .footer__right { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; } .footer__col h4, .footer h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; color: var(--ink); } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .footer ul a { font-size: 14px; color: var(--ink-soft); transition: color .3s var(--ease); } .footer ul a:hover { color: var(--wine); } .footer__bottom { border-top: 1px solid var(--line); padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer__bottom small { color: var(--muted); font-size: 12px; } .footer__bottom nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; } .footer__bottom a { color: var(--muted); transition: color .3s var(--ease); } .footer__bottom a:hover { color: var(--wine); } .pay { display: flex; gap: 8px; } .pay span { font-size: 9px; letter-spacing: 0.08em; border: 1px solid var(--pink-border); color: var(--muted); padding: 4px 8px; border-radius: var(--radius); text-transform: uppercase; font-weight: 600; } /* ===================================================================== CART DRAWER ===================================================================== */ .overlay { position: fixed; inset: 0; background: rgba(28,28,28,.4); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: all .4s var(--ease); z-index: 80; } .overlay.open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--cream); z-index: 90; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--ease); box-shadow: -20px 0 60px rgba(28,28,28,.12); } .drawer.open { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); border-bottom: 1px solid var(--line); } .drawer__head h3 { font-size: 26px; } .drawer__close { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; } .drawer__close:hover { color: var(--wine); } .ship-bar { padding: 15px var(--gutter); border-bottom: 1px solid var(--line); background: var(--pink-soft); } .ship-bar p { font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: 9px; } .ship-bar p b { color: var(--wine); font-weight: 600; } .ship-track { height: 3px; background: var(--pink-border); border-radius: 99px; overflow: hidden; } .ship-track i { display: block; height: 100%; background: var(--wine); width: 0; transition: width .5s var(--ease); } .drawer__items { flex: 1; overflow-y: auto; padding: 6px var(--gutter); } .line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); } .line__img { aspect-ratio: 3/4; background: var(--blush); border-radius: var(--radius); overflow: hidden; } .line__img img { width: 100%; height: 100%; object-fit: cover; } .line__name { font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.25; } .line__meta { font-size: 12px; color: var(--muted); margin: 4px 0 12px; } .line__price { font-size: 14px; } .line__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .line__rm { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .line__rm:hover { color: var(--wine); } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--pink-border); border-radius: var(--radius); } .stepper button { width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; color: var(--ink-soft); transition: color .2s; } .stepper button:hover { color: var(--wine); } .stepper span { min-width: 26px; text-align: center; font-size: 14px; } /* ===== bundle nudge cards in the cart drawer (B + C style) ===== */ .bapplied { display:flex; align-items:center; justify-content:space-between; margin:14px 0 0; padding:11px 14px; background:#E3F1E8; border:1px solid #BFE0CC; border-radius:3px; font-size:13px; color:#0F5A2E; font-weight:600; } .bapplied b { color: var(--wine); font-weight:700; } .bapplied__tag { background:#2F7D4F; color:#fff; padding:3px 8px; border-radius:2px; font-size:11.5px; letter-spacing:.06em; font-weight:700; white-space:nowrap; } .bnudge { display:block; margin:14px 0 0; padding:14px; background:linear-gradient(180deg,#fff,#FDF3F5); border:1px solid var(--pink-border,#DAB0B7); border-radius:4px; text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease; } .bnudge:hover { box-shadow:0 4px 14px rgba(130,33,62,.12); transform:translateY(-1px); } .bnudge__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } .bnudge__nm { font-size:13.5px; font-weight:700; color:var(--wine); } .bnudge__nm small { font-weight:400; color:var(--muted); font-size:11px; letter-spacing:.03em; margin-left:4px; } .bnudge__save { font-size:11.5px; font-weight:700; color:#2F7D4F; background:#E3F1E8; padding:3px 8px; border-radius:2px; white-space:nowrap; } .bnudge__dots { display:flex; gap:5px; margin-bottom:10px; } .bdot { flex:1; height:5px; border-radius:3px; background:var(--pink,#E9C9CC); } .bdot.on { background:var(--wine); } .bnudge__row { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-soft,#3E3E3E); } .bnudge__row b { color:var(--wine); font-weight:700; } .bnudge__go { color:var(--wine); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .bnudge__pool { display:flex; gap:5px; margin-top:9px; } .bnudge__pool .bpool__p { width:30px; height:38px; border-radius:2px; overflow:hidden; background:var(--blush,#F2E4D9); flex:0 0 auto; } .bnudge__pool .bpool__p img { width:100%; height:100%; object-fit:cover; display:block; } .drawer__foot { padding: 22px var(--gutter); border-top: 1px solid var(--line); background: var(--cream-2); } .drawer__sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .drawer__sub span:first-child { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .drawer__sub b { font-family: var(--serif); font-size: 24px; font-weight: 400; } .drawer__foot small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 16px; } .cart-empty { text-align: center; padding: 70px 20px; color: var(--muted); } .cart-empty p { font-family: var(--serif); font-size: 24px; color: var(--ink); margin-bottom: 6px; } /* ===================================================================== SHOP PAGE ===================================================================== */ .page-head { text-align: center; padding-block: clamp(46px, 7vw, 78px) clamp(26px, 4vw, 42px); } .page-head h1 { font-size: clamp(44px, 7vw, 82px); } .page-head p { color: var(--muted); margin-top: 12px; } .shopbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 38px; flex-wrap: wrap; } .filters { display: flex; gap: 8px; flex-wrap: wrap; } .filters button { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 9px 17px; border: 1px solid var(--pink-border); border-radius: 99px; color: var(--ink-soft); transition: all .3s var(--ease); } .filters button:hover { border-color: var(--wine); color: var(--wine); } .filters button.is-active { background: var(--wine); border-color: var(--wine); color: var(--cream); } .sortwrap { display: flex; align-items: center; gap: 10px; } .sortwrap label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sortwrap select { border: 1px solid var(--pink-border); border-radius: var(--radius); padding: 9px 12px; background: var(--white); font-size: 13px; } .shop-count { color: var(--muted); font-size: 13px; margin-bottom: 22px; letter-spacing: .04em; } /* ===================================================================== PRODUCT DETAIL ===================================================================== */ .pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: 26px; } .gallery { display: grid; grid-template-columns: 70px 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 20px); } .gallery__thumbs { display: flex; flex-direction: column; gap: 10px; } .gallery__thumbs button { aspect-ratio: 3/4; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius); background: var(--blush); } .gallery__thumbs button.is-active { border-color: var(--wine); } .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; } .gallery__main { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); background: var(--blush); } .gallery__main img { width: 100%; height: 100%; object-fit: cover; } .gallery__slider { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gallery__slider::-webkit-scrollbar { display: none; } .gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; } .gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .gallery__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none; } .gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); transition: width .2s ease, background .2s ease; } .gallery__dot.is-active { background: #fff; width: 20px; border-radius: 3px; } .pdp__oos-badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--muted); color: var(--cream); padding: 10px 20px; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; border-radius: 4px; } .pdp__info { padding-top: 6px; } .pdp__cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wine); font-weight: 500; } .pdp__title { font-family: 'Cormorant Garamond', var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 60px); margin: 12px 0 18px; line-height: 1.04; } .pdp__price { font-size: 22px; display: flex; gap: 12px; align-items: baseline; margin-bottom: 24px; } .pdp__price .was { color: var(--muted); text-decoration: line-through; font-size: 17px; } .pdp__price .now.sale { color: var(--wine); } .pdp__desc { color: var(--ink-soft); margin-bottom: 30px; max-width: 50ch; } .opt { margin-bottom: 26px; } .opt__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; display: flex; justify-content: space-between; font-weight: 500; } .opt__label span { color: var(--muted); } .opt__label a { color: var(--wine); } .swatch-row, .size-row { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--pink-border); position: relative; transition: transform .2s var(--ease); } .swatch.is-active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--wine); } .swatch:hover { transform: scale(1.08); } .size { min-width: 48px; padding: 11px 14px; border: 1px solid var(--pink-border); border-radius: var(--radius); font-size: 13px; letter-spacing: .06em; transition: all .25s var(--ease); } .size:hover { border-color: var(--wine); color: var(--wine); } .size.is-active { background: var(--wine); color: var(--cream); border-color: var(--wine); } .size--out { color: var(--muted); text-decoration: line-through; opacity: .55; cursor: not-allowed; } .size--out:hover { border-color: var(--pink-border); color: var(--muted); } .pdp__add { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 30px 0; } /* bundle promos pills — shown below sizes when this product is in one or more bundles */ .pdp__promos { margin: -6px 0 26px; } .pdp__promos .promo-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; color: var(--ink); } .pdp__promos .promo-list { display: flex; flex-direction: column; gap: 8px; } .promo-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 1px dashed var(--pink-border); border-radius: var(--radius); background: var(--pink-soft); color: var(--wine); font-size: 13px; font-weight: 500; letter-spacing: .02em; text-align: left; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .promo-pill:hover { background: var(--pink); border-color: var(--wine); border-style: solid; } .promo-pill .promo-arrow { font-size: 15px; flex: none; opacity: .7; } .promo-pill:hover .promo-arrow { opacity: 1; } /* size chart card (between Add-to-Bag and the accordions) */ .pdp__sizechart { background: var(--white); border: 1px solid var(--pink-border); border-radius: 8px; padding: 16px 18px 18px; margin: 6px 0 26px; position: relative; } .pdp__sizechart::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 3px; background: linear-gradient(90deg, var(--wine), var(--pink-border)); border-radius: 0 0 3px 3px; } .sc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .sc-head .sc-ti { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .sc-head .sc-ti .sc-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-soft); color: var(--wine); font-size: 13px; } .sc-units { display: inline-flex; border: 1px solid var(--line); border-radius: 30px; padding: 2px; background: var(--cream-2); gap: 0; } .sc-units button { font-family: inherit; font-size: 11.5px; font-weight: 600; background: none; border: none; padding: 4px 12px; border-radius: 30px; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; } .sc-units button.is-active { background: var(--wine); color: #fff; } .sc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .sc-table th, .sc-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink-soft); } .sc-table thead th { color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--pink-border); } .sc-table tbody tr:last-child td { border-bottom: none; } .sc-table td:first-child { font-weight: 700; color: var(--wine); background: var(--cream-2); } .sc-table tr.sc-current td { background: var(--pink-soft); } .sc-table tr.sc-current td:first-child { background: var(--pink); color: var(--wine); } .sc-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; display: flex; gap: 6px; } .sc-note .sc-star { color: var(--wine); flex: none; } .pdp__acc { border-top: 1px solid var(--line); } .acc { border-bottom: 1px solid var(--line); } .acc__q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } .acc__q span { font-size: 18px; color: var(--wine); transition: transform .3s var(--ease); } .acc.open .acc__q span { transform: rotate(45deg); } .acc__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .acc__a p { padding: 0 0 18px; color: var(--ink-soft); font-size: 14px; max-width: 52ch; } .acc.open .acc__a { max-height: 240px; } /* ===================================================================== CHECKOUT ===================================================================== */ .checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: start; padding-top: 22px; padding-bottom: 90px; } .co-form fieldset { border: none; margin-bottom: 32px; } .co-form legend { font-family: var(--serif); font-size: 26px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); width: 100%; } .co-form legend small { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); float: right; margin-top: 12px; } .field { margin-bottom: 16px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .field input, .field select { width: 100%; padding: 13px 14px; background: var(--white); border: 1px solid var(--pink-border); border-radius: var(--radius); outline: none; transition: border-color .25s var(--ease); } .field input:focus, .field select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px var(--pink-soft); } .field input.err { border-color: var(--wine); background: var(--pink-soft); } .summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); position: sticky; top: calc(var(--header-h) + 20px); } .summary h3 { font-size: 26px; margin-bottom: 20px; } .summary__line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; } .summary__line .li-img { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--blush); position: relative; } .summary__line .li-img img { width: 100%; height: 100%; object-fit: cover; } .summary__line .li-img b { position: absolute; top: -7px; right: -7px; background: var(--wine); color: var(--cream); width: 20px; height: 20px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 600; display: grid; place-items: center; } .summary__line .li-name { font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.25; } .summary__line .li-meta { font-size: 11px; color: var(--muted); } .summary__line .li-price { font-size: 14px; } .totals { padding-top: 18px; } .totals div { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--ink-soft); } .totals div.grand { font-family: var(--serif); font-size: 23px; color: var(--ink); margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); } .totals div.grand b { font-weight: 400; } .co-secure { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; color: var(--muted); font-size: 12px; } .co-secure svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; } /* ===================================================================== SUCCESS ===================================================================== */ .thanks { text-align: center; max-width: 620px; margin-inline: auto; padding: clamp(60px, 10vw, 126px) var(--gutter); } .thanks__check { width: 72px; height: 72px; border-radius: 999px; border: 1.5px solid var(--wine); display: grid; place-items: center; margin: 0 auto 28px; background: var(--pink-soft); } .thanks__check svg { width: 30px; height: 30px; stroke: var(--wine); fill: none; stroke-width: 1.5; } .thanks h1 { font-size: clamp(40px, 6vw, 70px); margin-bottom: 16px; } .thanks p { color: var(--ink-soft); margin-bottom: 8px; } .thanks__order { display: inline-block; margin: 22px 0 32px; padding: 12px 22px; border: 1px dashed var(--pink-border); border-radius: var(--radius); font-size: 13px; letter-spacing: .08em; } .thanks__order b { color: var(--wine); } /* ===================================================================== ANIMATIONS ===================================================================== */ .reveal { opacity: 0; transform: translateY(24px); } .reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); } .stagger > * { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; } .stagger > *:nth-child(1) { animation-delay: .05s; } .stagger > *:nth-child(2) { animation-delay: .15s; } .stagger > *:nth-child(3) { animation-delay: .25s; } .stagger > *:nth-child(4) { animation-delay: .35s; } .stagger > *:nth-child(5) { animation-delay: .45s; } @keyframes rise { to { opacity: 1; transform: none; } } .toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 30px); z-index: 120; background: var(--wine); color: var(--cream); padding: 14px 24px; border-radius: var(--radius); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: all .45s var(--ease); pointer-events: none; box-shadow: 0 14px 40px rgba(28,28,28,.22); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { :root { --header-h: 62px; } .header__inner { grid-template-columns: 1fr auto 1fr; } .nav-wrap { justify-self: start; } .header__actions { justify-self: end; } .nav { display: none; } .burger { display: inline-flex; margin-right: 12px; } .brand__main { font-size: 24px; letter-spacing: 0.06em; } .brand__sub { font-size: 9px; letter-spacing: 0.08em; padding-left: 0.08em; margin-top: 4px; } /* mobile: cart always stays; the middle slot shows account (logged out) or inbox (logged in). Language stays visible next to icons; search moves into the burger menu. */ .header__actions { gap: 10px; } .header__actions > *:not(#cartBtn):not(#inboxBtn):not(#accountBtn):not(#langBtn) { display: none !important; } body.is-authed .header__actions > #accountBtn { display: none !important; } .header__actions .lang-btn { font-size: 10px; padding: 4px 8px; letter-spacing: 0.08em; } /* Ditch grid for flex column-reverse so the image (2nd in DOM) shows on top. Some iOS Safari versions collapse minmax(0, 1fr) grid items to their intrinsic content width when the item has aspect-ratio only, leaving a visible right-side gap. Flex children fill the cross-axis (width) by default via align-items: stretch, so no grid track quirk. */ .hero { display: flex; flex-direction: column-reverse; min-height: 0; } /* Fallbacks: - min-height guarantees visible space if aspect-ratio isn't computed (older iOS <15.4, some in-app browsers like Instagram/WeChat). - background color keeps a visible block even if the img URL is blocked (in-app browsers sometimes drop unsplash / 3rd-party requests). - width: 100% is explicit so aspect-ratio has a definite width to work from. */ .hero__media { width: 100%; aspect-ratio: 3/4; min-height: 60vh; background: var(--pink); } .hero__copy { width: 100%; } .hero__vert { display: none; } .editorial, .checkout, .pdp { grid-template-columns: minmax(0, 1fr); } .editorial--rev .editorial__media { order: 0; } .gallery { position: static; grid-template-columns: minmax(0, 1fr); } .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumbs button { width: 64px; flex-shrink: 0; } .footer__main { grid-template-columns: 1fr; gap: 40px; } .footer__col--desk { display: none; } .footer__right { grid-template-columns: 1fr 1fr 1fr; } .summary { position: static; } } @media (max-width: 680px) { .grid, .grid--3, .cats { grid-template-columns: repeat(2, 1fr); } .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; } .row2 { grid-template-columns: 1fr; } .footer__right { grid-template-columns: 1fr 1fr; } .footer__tagline { font-size: 12px; } .page-head p { font-size: 11px; } .pdp__add { grid-template-columns: 1fr; } } /* ---------- mobile slide-down menu (sectioned, refined) ---------- */ .mobile-menu { position: fixed; inset: 0; background: var(--cream); z-index: 70; display: none; flex-direction: column; padding: 20px var(--gutter) 0; background-image: radial-gradient(ellipse 90% 60% at 100% 0%, rgba(233, 201, 204, .22), transparent 60%), radial-gradient(ellipse 100% 60% at 0% 100%, rgba(233, 201, 204, .14), transparent 55%); } .mobile-menu.open { display: flex; animation: mmFadeIn .35s var(--ease) both; } @keyframes mmFadeIn { from { opacity: 0; } to { opacity: 1; } } .mm__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .mm__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .mm__eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--pink-border); } .mm__close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease); } .mm__close:hover, .mm__close:focus-visible { background: var(--pink-soft); color: var(--wine); transform: rotate(90deg); } .mm__scroll { flex: 1 1 auto; overflow-y: auto; padding: 26px 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .mm__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .mm__group + .mm__group { margin-top: 32px; } .mm__label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; } .mm__label::before { content: ""; width: 16px; height: 1px; background: var(--pink-border); } /* stagger reveal for items in each group */ .mobile-menu.open .mm__group > *:not(.mm__label) { animation: mmItemIn .5s var(--ease) both; } .mobile-menu.open .mm__group > *:nth-child(2) { animation-delay: 60ms; } .mobile-menu.open .mm__group > *:nth-child(3) { animation-delay: 120ms; } .mobile-menu.open .mm__group > *:nth-child(4) { animation-delay: 180ms; } .mobile-menu.open .mm__group > *:nth-child(5) { animation-delay: 240ms; } .mobile-menu.open .mm__group > *:nth-child(6) { animation-delay: 300ms; } .mobile-menu.open .mm__foot { animation: mmItemIn .5s var(--ease) both .34s; } @keyframes mmItemIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } .mm__link { position: relative; display: flex; align-items: center; justify-content: space-between; font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); transition: color .3s var(--ease), padding-left .3s var(--ease); } .mm__link::before { content: ""; position: absolute; left: -10px; top: 50%; width: 3px; height: 0; background: var(--wine); border-radius: 2px; transform: translateY(-50%); transition: height .35s var(--ease); } .mm__link .mm__arrow { font-family: var(--sans); font-size: 18px; color: var(--muted); transition: transform .35s var(--ease), color .35s var(--ease); } .mm__link:hover, .mm__link:active { color: var(--wine); padding-left: 12px; } .mm__link:hover::before, .mm__link:active::before { height: 24px; } .mm__link:hover .mm__arrow, .mm__link:active .mm__arrow { transform: translateX(6px); color: var(--wine); } .mm__link.is-active { color: var(--wine); } .mm__link.is-active::before { height: 24px; } .mm__link.is-active .mm__arrow { color: var(--wine); } /* mobile accordion group (Clothing → Top / Bottom / Set Wear) */ /* keep .mm__link's serif font-family + 24px size — don't reset with font:inherit */ .mm__link--parent { width: 100%; background: none; color: inherit; text-align: left; cursor: pointer; border: 0; border-bottom: 1px solid var(--line); } .mm__acc.is-open .mm__link--parent { color: var(--wine); border-bottom-color: transparent; } /* refined +/− caret: circular badge that fills wine when open */ .mm__arrow--caret { position: relative; width: 26px; height: 26px; border: 1px solid var(--pink-border); border-radius: 50%; color: var(--muted); transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .mm__arrow--caret::before, .mm__arrow--caret::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; border-radius: 1px; transition: transform .35s var(--ease), opacity .35s var(--ease); } .mm__arrow--caret::before { width: 10px; height: 1.4px; transform: translate(-50%, -50%); } .mm__arrow--caret::after { width: 1.4px; height: 10px; transform: translate(-50%, -50%); } .mm__acc.is-open .mm__link--parent .mm__arrow--caret { color: var(--cream); background: var(--wine); border-color: var(--wine); } .mm__acc.is-open .mm__link--parent .mm__arrow--caret::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } /* smooth accordion */ .mm__sub { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); } .mm__acc.is-open .mm__sub { max-height: 400px; } /* clean sub list: no boxed container, short horizontal dash prefix */ .mm__sub-inner { padding: 2px 0 6px 0; } .mm__sub-link { font-size: 18px; padding: 10px 18px 10px 24px; color: var(--ink-soft); } .mm__sub-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--pink-border); border-radius: 0; transform: translateY(-50%); transition: width .3s var(--ease), background .3s var(--ease); } .mm__sub-link:hover, .mm__sub-link:active { color: var(--wine); padding-left: 24px; } .mm__sub-link:hover::before, .mm__sub-link:active::before, .mm__sub-link.is-active::before { width: 20px; height: 1px; background: var(--wine); } .mm__sub-link.is-active { padding-left: 24px; } .mm__sub-link .mm__arrow { font-size: 15px; color: var(--pink-border); } .mm__sub-link:hover .mm__arrow, .mm__sub-link.is-active .mm__arrow { color: var(--wine); } .mm__sub-inner .mm__sub-link:last-child { border-bottom: 0; } .mm__foot { border-top: 1px solid var(--line); padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .mm__lang { position: relative; overflow: hidden; isolation: isolate; font-size: 11px; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; padding: 10px 20px; border: 1px solid var(--pink-border); border-radius: 999px; color: var(--ink-soft); transition: color .35s var(--ease), border-color .35s var(--ease); } .mm__lang::before { content: ""; position: absolute; inset: 0; background: var(--wine); transform: translateX(-101%); transition: transform .45s var(--ease); z-index: -1; } .mm__lang:hover { color: var(--cream); border-color: var(--wine); } .mm__lang:hover::before { transform: translateX(0); } .mm__contact { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), color .3s var(--ease); } .mm__contact:hover { color: var(--wine); border-bottom-color: var(--wine); } /* ---------- desktop: burger 弹出的抽屉改为「左侧窄面板 + 高度贴内容」---------- */ @media (min-width: 901px) { .mobile-menu { top: var(--header-h); right: auto; bottom: auto; width: min(320px, 92vw); height: auto; max-height: calc(100vh - var(--header-h)); padding: 18px 22px 4px; border-right: 1px solid var(--line); box-shadow: 20px 24px 60px rgba(28, 28, 28, .10); } .mobile-menu.open { animation: mmSlideInLeft .32s var(--ease) both; } @keyframes mmSlideInLeft { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } .mobile-menu .mm__scroll { padding: 14px 0 8px; } .mobile-menu .mm__link { font-size: 18px; padding: 12px 14px 12px 0; } .mobile-menu .mm__sub-link { font-size: 14px; padding: 8px 14px 8px 20px; } .mobile-menu .mm__group + .mm__group { margin-top: 20px; } .mobile-menu .mm__foot { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }