/* ===================================================================== GRANDIQUE — Global Frame (v2) --------------------------------------------------------------------- New chrome layered on top of main.css: · Giorgetti-style header (centered wordmark, MENU left, utilities right) · Full-screen mega menu with 2-level furniture categories · Letter-style ("信函") region / language selector · Draggable galleries with inertia · Damped smooth-scroll wrapper Uses the existing design tokens from main.css (colors / type / spacing). ===================================================================== */ /* --------------------------------------------------------------------- 0 · Damped smooth scroll wrapper is fixed; JS sets body height and translates the content. Disabled automatically on touch / reduced-motion (.no-smooth on ). ------------------------------------------------------------------- */ /* body height is set by JS so the native scrollbar drives the lerp */ html.has-smooth { scroll-behavior: auto; } html.gm-lock, html.gm-lock body { overflow: hidden; } #smooth-wrapper { position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; will-change: transform; } html.no-smooth #smooth-wrapper, html:not(.has-smooth) #smooth-wrapper { position: static; width: auto; will-change: auto; } /* --------------------------------------------------------------------- 1 · Header ------------------------------------------------------------------- */ .gm-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 80; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); padding: 22px var(--container-pad); color: var(--color-ink); transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); border-bottom: 1px solid transparent; } /* transparent over a dark hero */ .gm-header.over-hero { color: var(--color-bg); } /* solid after scroll */ .gm-header.is-scrolled { background: rgba(255, 241, 229, 0.92); -webkit-backdrop-filter: saturate(120%) blur(10px); backdrop-filter: saturate(120%) blur(10px); color: var(--color-ink); padding-top: 16px; padding-bottom: 16px; border-bottom-color: var(--color-line-soft); } /* left + right clusters */ .gm-header__left { justify-self: start; } .gm-header__right { justify-self: end; display: flex; align-items: center; gap: var(--space-md); } /* trigger buttons (MENU / language) */ .gm-trigger { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: inherit; position: relative; } .gm-trigger .lines { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; } .gm-trigger .lines i { height: 1px; width: 100%; background: currentColor; transition: transform var(--dur-fast) var(--ease); display: block; } .gm-trigger:hover .lines i:first-child { transform: translateY(1px); } .gm-trigger:hover .lines i:last-child { transform: translateY(-1px); } .gm-trigger .globe { width: 15px; height: 15px; stroke: currentColor; fill: none; } .gm-trigger__label--hide-sm { display: inline; } /* centered wordmark */ .gm-brand { justify-self: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.34em; padding-left: 0.34em; color: inherit; line-height: 1; white-space: nowrap; } /* concierge mini-link in header right */ .gm-header__concierge { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: inherit; position: relative; } .gm-header__concierge::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--color-brass); transition: width var(--dur-med) var(--ease); } .gm-header__concierge:hover::after { width: 100%; } /* --------------------------------------------------------------------- 2 · Overlay base (shared by menu + language letter) ------------------------------------------------------------------- */ .gm-overlay { position: fixed; inset: 0; z-index: 90; background: var(--color-bg); opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med); overflow-y: auto; } .gm-overlay.is-open { opacity: 1; visibility: visible; } .gm-overlay__close { position: fixed; top: 20px; right: var(--container-pad); z-index: 95; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink); } .gm-overlay__close .x { font-size: 20px; line-height: 1; } .gm-overlay__inner { min-height: 100%; display: flex; flex-direction: column; padding: clamp(96px, 12vh, 160px) var(--container-pad) var(--space-xl); max-width: var(--container-max); margin: 0 auto; } /* gentle stagger when opening */ .gm-overlay .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .gm-overlay.is-open .stagger > * { opacity: 1; transform: none; } .gm-overlay.is-open .stagger > *:nth-child(2) { transition-delay: 70ms; } .gm-overlay.is-open .stagger > *:nth-child(3) { transition-delay: 140ms; } .gm-overlay.is-open .stagger > *:nth-child(4) { transition-delay: 210ms; } .gm-overlay.is-open .stagger > *:nth-child(5) { transition-delay: 280ms; } /* --------------------------------------------------------------------- 3 · Mega menu ------------------------------------------------------------------- */ .gm-menu__grid { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(40px, 6vw, 120px); flex: 1; } .gm-menu__eyebrow { display: block; margin-bottom: var(--space-md); } .gm-menu__primary { display: flex; flex-direction: column; gap: 8px; } .gm-menu__primary a { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 64px); font-weight: 400; line-height: 1.1; color: var(--color-ink); width: max-content; transition: color var(--dur-fast) var(--ease), padding-left var(--dur-med) var(--ease); } .gm-menu__primary a:hover { color: var(--color-brass-deep); padding-left: 14px; } /* categories (collections) */ .gm-menu__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3vw, 56px) clamp(28px, 4vw, 64px); } .gm-cat__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--color-ink); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-line); } .gm-cat__list { display: flex; flex-direction: column; gap: 12px; } .gm-cat__list a { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-ink-soft); letter-spacing: var(--tracking-text); width: max-content; position: relative; transition: color var(--dur-fast) var(--ease), padding-left var(--dur-med) var(--ease); } .gm-cat__list a:hover { color: var(--color-ink); padding-left: 12px; } .gm-cat__list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--color-brass); transition: width var(--dur-med) var(--ease); } .gm-cat__list a:hover::before { width: 7px; } /* menu footer */ .gm-menu__foot { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); color: var(--color-ink-mute); font-size: var(--fs-body); } .gm-menu__foot a { color: var(--color-ink-soft); } .gm-menu__foot a:hover { color: var(--color-brass-deep); } /* --------------------------------------------------------------------- 4 · Language letter (信函) ------------------------------------------------------------------- */ .gm-letter { background: var(--color-bg); } .gm-letter__sheet { width: min(760px, 100%); margin: 0 auto; background: linear-gradient(var(--color-line-soft), var(--color-line-soft)) left 0 top 0 / 100% 1px no-repeat, var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); padding: clamp(36px, 5vw, 72px); position: relative; } .gm-letter__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-line); } .gm-letter__mark { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.3em; padding-left: 0.3em; color: var(--color-ink); } .gm-letter__date { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-mute); } .gm-letter__salute { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--color-ink); margin: var(--space-lg) 0 var(--space-2xs); } .gm-letter__intro { font-family: var(--font-display); font-size: var(--fs-body-lg); font-style: italic; color: var(--color-ink-soft); margin-bottom: var(--space-lg); } .gm-letter__regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); } .gm-region__name { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-brass-deep); margin-bottom: var(--space-sm); padding-bottom: 8px; border-bottom: 1px solid var(--color-line-soft); } .gm-region__langs { display: flex; flex-direction: column; gap: 10px; } .gm-lang-opt { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-size: var(--fs-body-lg); color: var(--color-ink); width: max-content; text-align: left; transition: color var(--dur-fast) var(--ease), padding-left var(--dur-med) var(--ease); } .gm-lang-opt:hover { color: var(--color-brass-deep); padding-left: 10px; } .gm-lang-opt .native { color: var(--color-ink-mute); font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-text); } .gm-lang-opt.is-current { color: var(--color-brass-deep); } .gm-lang-opt.is-current::after { content: "—"; color: var(--color-brass); margin-left: 6px; } .gm-letter__signoff { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } .gm-letter__signoff .line { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-lg); color: var(--color-ink-soft); } .gm-letter__signoff .sign { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.18em; color: var(--color-ink); } /* --------------------------------------------------------------------- 5 · Draggable gallery with inertia ------------------------------------------------------------------- */ .drag-gallery { overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; } .drag-gallery::-webkit-scrollbar { display: none; } .drag-gallery.is-dragging { cursor: grabbing; } .drag-gallery.is-dragging a { pointer-events: none; } .drag-track { display: flex; gap: var(--gutter); padding: 4px var(--container-pad); width: max-content; } .drag-item { width: clamp(260px, 30vw, 420px); flex: 0 0 auto; } .drag-item .card__media { aspect-ratio: 4 / 5; } .drag-hint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-mute); margin-left: var(--container-pad); } .drag-hint .track { width: 40px; height: 1px; background: var(--color-line); position: relative; overflow: hidden; } .drag-hint .track::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: var(--color-brass); animation: dragHint 2.6s var(--ease) infinite; } @keyframes dragHint { 0% { left: -40%; } 60%,100% { left: 100%; } } /* --------------------------------------------------------------------- 6 · Concierge section (Design Concierge / contact) ------------------------------------------------------------------- */ .concierge__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .concierge__channels { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); } .channel { display: flex; gap: var(--space-md); align-items: flex-start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-line-soft); } .channel__qr { width: 116px; height: 116px; flex: 0 0 auto; background: var(--color-surface-deep); border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; color: var(--color-ink-mute); padding: 10px; } .channel__body h4 { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: var(--space-2xs); } .channel__body p { color: var(--color-ink-soft); } .channel__body .channel__links { margin-top: var(--space-xs); display: flex; gap: var(--space-md); } /* form */ .cform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-md); } .cform .full { grid-column: 1 / -1; } .cform .field { display: flex; flex-direction: column; } .cform label { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 10px; } .cform label .req { color: var(--color-brass); } .cform input, .cform select, .cform textarea { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-ink); background: transparent; border: 0; border-bottom: 1px solid var(--color-line); padding: 10px 2px; transition: border-color var(--dur-fast) var(--ease); } .cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--color-brass); } .cform textarea { resize: vertical; min-height: 110px; } .cform select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A68559' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; } .cform__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xs); } .btn-line { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink); border: 1px solid var(--color-ink); padding: 16px 32px; transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } .btn-line:hover { background: var(--color-ink); color: var(--color-bg); } .cform__msg { grid-column: 1 / -1; display: none; font-family: var(--font-sans); font-size: var(--fs-body); padding: 14px 18px; border: 1px solid var(--color-brass); color: var(--color-brass-deep); background: rgba(166,133,89,0.06); } .cform__msg.show { display: block; } /* --------------------------------------------------------------------- 7 · Responsive ------------------------------------------------------------------- */ @media (max-width: 900px) { .gm-trigger__label--hide-sm { display: none; } .gm-header__concierge { display: none; } .gm-header { grid-template-columns: 1fr auto 1fr; } .gm-menu__grid { grid-template-columns: 1fr; gap: var(--space-xl); } .gm-menu__cats { grid-template-columns: 1fr; } .gm-letter__regions { grid-template-columns: 1fr; } .concierge__grid { grid-template-columns: 1fr; } .cform { grid-template-columns: 1fr; } } @media (max-width: 540px) { .gm-brand { letter-spacing: 0.22em; font-size: 20px; } .channel { flex-direction: column; } } /* --------------------------------------------------------------------- 8 · Suggested-language badge (in the letter overlay) ------------------------------------------------------------------- */ .suggested-badge { display: inline-block; background: var(--color-brass); color: var(--color-bg); font-family: var(--font-sans); font-size: 9px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; padding: 3px 9px; margin-right: 10px; vertical-align: middle; line-height: 1; } .gm-lang-opt.is-suggested { color: var(--color-brass-deep); } /* --------------------------------------------------------------------- 9 · RTL (Arabic) — small adjustments ------------------------------------------------------------------- */ [dir="rtl"] .suggested-badge { margin-right: 0; margin-left: 10px; } [dir="rtl"] .link-arrow::after { content: '←'; } [dir="rtl"] .gm-menu__primary a:hover { padding-left: 0; padding-right: 14px; } [dir="rtl"] .gm-cat__list a:hover { padding-left: 0; padding-right: 12px; } [dir="rtl"] .gm-cat__list a::before { left: auto; right: 0; } [dir="rtl"] .gm-cat__list a:hover::before { width: 7px; } [dir="rtl"] .gm-overlay__close { right: auto; left: var(--container-pad); } [dir="rtl"] .gm-letter__head { flex-direction: row-reverse; } [dir="rtl"] .gm-trigger { flex-direction: row-reverse; } /* --------------------------------------------------------------------- 10 · Concierge channel cards (WeChat / WhatsApp / Instagram on contact.html) ------------------------------------------------------------------- */ .qr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: var(--space-md); } .qr-card { background: var(--color-bg); border: 1px solid var(--color-line-soft); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: var(--space-md); margin: 0; transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .qr-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); border-color: var(--color-line); } .qr-card__media { aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--color-line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .qr-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; } .qr-card__body { display: flex; flex-direction: column; gap: 6px; } .qr-card__eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-brass-deep); } .qr-card__title { font-family: var(--font-serif); font-size: 22px; line-height: 1.18; color: var(--color-ink); margin: 4px 0 4px; } .qr-card__hint { font-size: 13px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } @media (max-width: 880px) { .qr-row { grid-template-columns: 1fr; } .qr-card__media { max-width: 280px; margin: 0 auto; width: 100%; } }