/* Fook Lam Moon — landing page styles Three aesthetic variants set via [data-aesthetic] on : editorial (default) · luxe · minimal Hero layout set via [data-hero] on : full · split · type */ :root { /* Editorial heritage palette (default) */ --flm-bg: #f6f1e7; /* warm cream */ --flm-bg-alt: #ede4d3; /* deeper sand */ --flm-ink: #1c1916; /* near-black ink */ --flm-ink-soft: #4a443a; --flm-ink-mute: #847b6c; --flm-rule: #a8957a; --flm-accent: #8a1c1c; /* lacquer red — used very sparingly */ --flm-accent-deep: #6b1414; --flm-gold: #9a7d3e; --flm-on-dark: #f3ebd9; --flm-serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif; --flm-sans: "Inter Tight", "Helvetica Neue", system-ui, sans-serif; --flm-zh: "Noto Serif TC", "Source Han Serif TC", "Songti SC", "STSong", serif; --flm-edge: clamp(20px, 4vw, 80px); --flm-section-y: clamp(64px, 9vw, 140px); } /* ── LUXE: black & cream, warmer gold accents ─────────────────────────── */ html[data-aesthetic="luxe"] { --flm-bg: #0e0c0a; --flm-bg-alt: #161310; --flm-ink: #f1e7d3; --flm-ink-soft: #c9bda4; --flm-ink-mute: #8a7e68; --flm-rule: #6e5d3e; --flm-accent: #c9a25b; --flm-accent-deep: #b08838; --flm-gold: #d9b673; --flm-on-dark: #f1e7d3; } /* ── FLM: derived from the brand logo — burgundy + gold on warm ink ──── */ html[data-aesthetic="flm"] { --flm-bg: #1a0a0e; --flm-bg-alt: #2a0f18; --flm-ink: #f1e7d3; --flm-ink-soft: #d4c8b0; --flm-ink-mute: #a08a6e; --flm-rule: #6e5d3e; --flm-accent: #7b0235; --flm-accent-deep: #4a001e; --flm-gold: #cc9b5c; --flm-on-dark: #f1e7d3; } /* ── MINIMAL: gallery white, almost monochrome ────────────────────────── */ html[data-aesthetic="minimal"] { --flm-bg: #fafaf7; --flm-bg-alt: #f1efe9; --flm-ink: #111111; --flm-ink-soft: #3b3a37; --flm-ink-mute: #7c7b75; --flm-rule: #c9c6bd; --flm-accent: #111111; --flm-accent-deep: #000000; --flm-gold: #6f6a5d; --flm-on-dark: #fafaf7; } /* ── BASE ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--flm-bg); color: var(--flm-ink); font-family: var(--flm-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } em { font-style: italic; font-family: var(--flm-serif); } /* ── NAV ──────────────────────────────────────────────────────────────── */ .flm-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; } .flm-nav.is-scrolled { background: color-mix(in oklab, var(--flm-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom-color: color-mix(in oklab, var(--flm-rule) 40%, transparent); } html[data-hero="full"] .flm-nav:not(.is-scrolled) { color: #f6f1e7; } html[data-hero="full"] .flm-nav:not(.is-scrolled) .flm-pill { border-color: rgba(246, 241, 231, 0.5); color: #f6f1e7; } .flm-nav-inner { max-width: 1440px; margin: 0 auto; padding: 18px var(--flm-edge); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .flm-mark { display: flex; flex-direction: column; gap: 1px; text-decoration: none; line-height: 1; } .flm-mark-zh { font-family: var(--flm-zh); font-size: 22px; font-weight: 600; letter-spacing: 0.18em; color: var(--flm-accent); } html[data-hero="full"] .flm-nav:not(.is-scrolled) .flm-mark-zh { color: var(--flm-gold); } .flm-mark-en { font-family: var(--flm-serif); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-style: italic; } .flm-nav-links { display: flex; gap: 28px; justify-content: center; } .flm-nav-links a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--flm-sans); transition: color 0.2s; } .flm-nav-links a:hover { color: var(--flm-accent); } html[data-hero="full"] .flm-nav:not(.is-scrolled) .flm-nav-links a:hover { color: var(--flm-gold); } .flm-nav-en { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .flm-nav-zh { font-family: var(--flm-zh); font-size: 10px; letter-spacing: 0.18em; color: var(--flm-ink-mute); } html[data-hero="full"] .flm-nav:not(.is-scrolled) .flm-nav-zh { color: rgba(246, 241, 231, 0.65); } .flm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--flm-ink); border-radius: 999px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; font-weight: 500; transition: background 0.2s, color 0.2s; } .flm-pill:hover { background: var(--flm-ink); color: var(--flm-bg); } .flm-pill-zh { font-family: var(--flm-zh); font-size: 10px; letter-spacing: 0.2em; opacity: 0.6; } /* ── EYEBROW & RULE ───────────────────────────────────────────────────── */ .flm-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--flm-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--flm-ink-mute); margin-bottom: 24px; flex-wrap: wrap; } .flm-eyebrow > span { white-space: nowrap; } .flm-eyebrow-center { justify-content: center; width: 100%; } .flm-rule { display: inline-block; width: 36px; height: 1px; background: var(--flm-rule); } /* ── HERO ─────────────────────────────────────────────────────────────── */ .flm-hero { position: relative; } /* Full-bleed */ .flm-hero-full { min-height: 100vh; color: #f6f1e7; display: flex; align-items: flex-end; padding: 0 var(--flm-edge) clamp(60px, 10vh, 120px); overflow: hidden; } .flm-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.85); } .flm-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,13,0.45) 0%, rgba(20,17,13,0) 30%, rgba(20,17,13,0.65) 100%); } .flm-hero-content { position: relative; z-index: 1; max-width: 720px; } .flm-hero-full .flm-eyebrow { color: rgba(246, 241, 231, 0.75); } .flm-hero-full .flm-rule { background: rgba(246, 241, 231, 0.45); } .flm-hero-title { font-family: var(--flm-serif); font-weight: 400; margin: 0 0 28px; display: flex; flex-direction: column; gap: 8px; line-height: 0.95; } .flm-hero-title-center { align-items: center; } .flm-zh-display { font-family: var(--flm-zh); font-size: clamp(72px, 10vw, 168px); font-weight: 600; letter-spacing: 0.04em; color: var(--flm-gold); line-height: 0.9; } html[data-aesthetic="editorial"] .flm-hero-full .flm-zh-display { color: #d9b673; } html[data-aesthetic="minimal"] .flm-zh-display { color: var(--flm-ink); } .flm-en-display { font-family: var(--flm-serif); font-style: italic; font-size: clamp(36px, 4.5vw, 68px); font-weight: 400; letter-spacing: -0.005em; } .flm-hero-sub { font-family: var(--flm-serif); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; margin: 0 0 36px; max-width: 540px; color: rgba(246, 241, 231, 0.92); } .flm-hero-sub-center { text-align: center; margin-left: auto; margin-right: auto; } .flm-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; } .flm-hero-cta-center { justify-content: center; } .flm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-family: var(--flm-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; font-weight: 500; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .flm-btn-primary { background: var(--flm-accent); color: #f6f1e7; border-color: var(--flm-accent); } .flm-btn-primary:hover { background: var(--flm-accent-deep); border-color: var(--flm-accent-deep); } html[data-aesthetic="luxe"] .flm-btn-primary { color: #0e0c0a; } html[data-aesthetic="flm"] .flm-btn-primary { color: #f1e7d3; } html[data-aesthetic="minimal"] .flm-btn-primary { color: #fafaf7; } .flm-btn-ghost { background: transparent; border-color: transparent; color: inherit; padding-left: 4px; padding-right: 4px; letter-spacing: 0.18em; border-bottom: 1px solid currentColor; border-radius: 0; } .flm-btn-ghost:hover { transform: translateX(2px); } .flm-btn-outline { background: transparent; border-color: var(--flm-ink); color: var(--flm-ink); } .flm-btn-outline:hover { background: var(--flm-ink); color: var(--flm-bg); } .flm-btn-on-dark { color: #f6f1e7; } .flm-michelin { display: inline-flex; align-items: center; gap: 10px; font-family: var(--flm-serif); font-style: italic; font-size: 14px; color: var(--flm-gold); } .flm-michelin-center { justify-content: center; width: 100%; } html[data-hero="full"] .flm-hero .flm-michelin { color: #d9b673; } /* Hero — split */ .flm-hero-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 80px; } .flm-hero-split-text { padding: clamp(60px, 9vw, 140px) clamp(40px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; } .flm-hero-split .flm-zh-display { color: var(--flm-accent); } html[data-aesthetic="luxe"] .flm-hero-split .flm-zh-display, html[data-aesthetic="flm"] .flm-hero-split .flm-zh-display { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-hero-split .flm-zh-display { color: var(--flm-ink); } .flm-hero-split-img { background-size: cover; background-position: center; } /* Hero — typographic */ .flm-hero-type { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px var(--flm-edge) 80px; background: var(--flm-bg); position: relative; overflow: hidden; } .flm-hero-type-inner { text-align: center; position: relative; z-index: 1; width: 100%; max-width: 1200px; } .flm-zh-monumental { font-family: var(--flm-zh); font-size: clamp(140px, 22vw, 360px); font-weight: 600; color: var(--flm-accent); line-height: 0.85; letter-spacing: 0.08em; margin: 24px 0 12px; text-align: center; } html[data-aesthetic="luxe"] .flm-zh-monumental, html[data-aesthetic="flm"] .flm-zh-monumental { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-zh-monumental { color: var(--flm-ink); } .flm-hero-type .flm-en-display { display: block; font-size: clamp(28px, 3vw, 48px); letter-spacing: 0.06em; margin-top: 12px; } /* ── SECTIONS COMMON ──────────────────────────────────────────────────── */ .flm-section { padding: var(--flm-section-y) var(--flm-edge); max-width: 1440px; margin: 0 auto; } .flm-section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); } .flm-section-head-center { margin-left: auto; margin-right: auto; text-align: center; } .flm-section-head-bordered { padding-bottom: 32px; border-bottom: 1px solid var(--flm-rule); max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); } .flm-section-head-bordered .flm-eyebrow, .flm-section-head-bordered .flm-section-title { grid-column: 1; margin: 0; } .flm-section-head-bordered .flm-eyebrow { margin-bottom: 16px; } .flm-section-head-bordered .flm-section-lede { grid-column: 2; margin: 0; } .flm-section-title { font-family: var(--flm-serif); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 24px; color: var(--flm-ink); text-wrap: pretty; } .flm-section-title-light { color: var(--flm-on-dark); } .flm-section-title-sm { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 16px; } .flm-section-lede { font-family: var(--flm-serif); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--flm-ink-soft); margin: 0; max-width: 56ch; } .flm-section-cta { margin-top: clamp(32px, 4vw, 56px); text-align: center; } /* ── RESERVATIONS ─────────────────────────────────────────────────────── */ .flm-reservations { max-width: 1100px; } .flm-reserve-card { background: var(--flm-bg-alt); padding: clamp(32px, 4vw, 56px); border-top: 1px solid var(--flm-rule); border-bottom: 1px solid var(--flm-rule); } .flm-reserve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); margin-bottom: 32px; } .flm-reserve-field { display: flex; flex-direction: column; gap: 10px; } .flm-reserve-lbl { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--flm-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--flm-ink-soft); } .flm-reserve-zh { font-family: var(--flm-zh); font-size: 11px; letter-spacing: 0.16em; color: var(--flm-ink-mute); font-weight: 400; text-transform: none; white-space: nowrap; } .flm-reserve-lbl > span:first-child { white-space: nowrap; } .flm-reserve-field input, .flm-reserve-field select { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--flm-ink); background: transparent; padding: 8px 0 10px; font-family: var(--flm-serif); font-size: 18px; color: var(--flm-ink); outline: none; border-radius: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 4px center; cursor: pointer; } .flm-reserve-field input { background-image: none; cursor: text; } .flm-reserve-field select:focus, .flm-reserve-field input:focus { border-bottom-color: var(--flm-accent); } .flm-reserve-submit { width: 100%; } /* Reservation tabs (multi-outlet switcher) */ .flm-reserve-tabs { display: flex !important; border-bottom: 1px solid var(--flm-rule); } .flm-reserve-tab { flex: 1 !important; background: transparent !important; border: 0; border-bottom: 2px solid transparent; padding: 18px 20px; cursor: pointer; text-align: center; color: var(--flm-ink-mute); display: flex; flex-direction: column; gap: 3px; font-family: inherit; appearance: none; -webkit-appearance: none; border-radius: 0; transition: color 0.2s, border-color 0.2s, background 0.2s; } .flm-reserve-tab:hover { color: var(--flm-ink); background: color-mix(in oklab, var(--flm-gold) 6%, transparent); } .flm-reserve-tab.is-active { color: var(--flm-gold); border-bottom-color: var(--flm-gold); } .flm-reserve-tab-en { font-family: var(--flm-serif); font-size: 18px; letter-spacing: 0.02em; } .flm-reserve-tab-zh { font-family: var(--flm-zh); font-size: 12px; letter-spacing: 0.16em; } .flm-reserve-foot { margin-top: 20px; display: flex; justify-content: space-between; font-family: var(--flm-serif); font-style: italic; font-size: 14px; color: var(--flm-ink-mute); flex-wrap: wrap; gap: 12px; } /* ── SIGNATURES ──────────────────────────────────────────────────────── */ .flm-dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px) clamp(20px, 2.5vw, 40px); } .flm-dish { display: flex; flex-direction: column; gap: 20px; } .flm-dish-img { position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: center; background-color: var(--flm-bg-alt); filter: saturate(0.9); } .flm-dish-num { position: absolute; top: 16px; left: 16px; background: var(--flm-bg); color: var(--flm-ink); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-family: var(--flm-serif); font-style: italic; font-size: 16px; border-radius: 50%; } .flm-dish-titles { display: flex; flex-direction: column; gap: 4px; } .flm-dish-zh { font-family: var(--flm-zh); font-size: 26px; font-weight: 600; letter-spacing: 0.06em; margin: 0; color: var(--flm-ink); } .flm-dish-en { font-family: var(--flm-serif); font-style: italic; font-size: 18px; color: var(--flm-ink-soft); margin: 0; } .flm-dish-desc { font-family: var(--flm-sans); font-size: 15px; line-height: 1.55; color: var(--flm-ink-soft); margin: 0; } .flm-dish-note { font-family: var(--flm-serif); font-style: italic; font-size: 13px; color: var(--flm-gold); letter-spacing: 0.05em; padding-top: 8px; border-top: 1px solid var(--flm-rule); } /* ── MENU PREVIEW ────────────────────────────────────────────────────── */ .flm-menu-preview { background: var(--flm-bg-alt); max-width: none; padding-left: 0; padding-right: 0; } .flm-menu-grid { max-width: 1440px; margin: 0 auto; padding: 0 var(--flm-edge); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .flm-menu-side .flm-section-title { margin-bottom: 20px; } .flm-menu-tabs { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--flm-rule); } .flm-menu-tab { appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--flm-rule); padding: 18px 0; text-align: left; display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; font-family: var(--flm-serif); color: var(--flm-ink-soft); transition: color 0.2s, padding-left 0.2s; } .flm-menu-tab:hover { color: var(--flm-ink); padding-left: 8px; } .flm-menu-tab.is-active { color: var(--flm-accent); padding-left: 12px; } html[data-aesthetic="luxe"] .flm-menu-tab.is-active, html[data-aesthetic="flm"] .flm-menu-tab.is-active { color: var(--flm-gold); } .flm-menu-tab-en { font-size: 22px; font-weight: 400; } .flm-menu-tab-zh { font-family: var(--flm-zh); font-size: 16px; letter-spacing: 0.12em; opacity: 0.7; } .flm-menu-card { background: var(--flm-bg); padding: clamp(36px, 4vw, 64px); border: 1px solid var(--flm-rule); } .flm-menu-card-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--flm-rule); } .flm-menu-card-zh { font-family: var(--flm-zh); font-size: 32px; font-weight: 600; letter-spacing: 0.08em; color: var(--flm-accent); } html[data-aesthetic="luxe"] .flm-menu-card-zh, html[data-aesthetic="flm"] .flm-menu-card-zh { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-menu-card-zh { color: var(--flm-ink); } .flm-menu-card-en { font-family: var(--flm-serif); font-style: italic; font-size: 18px; color: var(--flm-ink-soft); } .flm-menu-list { list-style: none; padding: 0; margin: 0; } .flm-menu-list li { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px dotted var(--flm-rule); } .flm-menu-list li:last-child { border-bottom: 0; } .flm-menu-item-text { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; } .flm-menu-item-en { font-family: var(--flm-serif); font-size: 18px; } .flm-menu-item-zh { font-family: var(--flm-zh); font-size: 14px; color: var(--flm-ink-mute); letter-spacing: 0.12em; } .flm-menu-leader { flex: 1; border-bottom: 1px dotted var(--flm-rule); align-self: end; margin-bottom: 6px; min-width: 24px; } .flm-menu-item-price { font-family: var(--flm-serif); font-style: italic; font-size: 16px; color: var(--flm-ink-soft); white-space: nowrap; } .flm-menu-card-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--flm-rule); font-family: var(--flm-serif); font-style: italic; font-size: 13px; color: var(--flm-ink-mute); } /* ── STORY ────────────────────────────────────────────────────────────── */ .flm-story { border-top: 1px solid var(--flm-rule); border-bottom: 1px solid var(--flm-rule); } .flm-story-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); display: flex; flex-direction: column; align-items: center; } .flm-story-title { max-width: 18ch; font-size: clamp(36px, 4.5vw, 64px); } .flm-story-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(60px, 7vw, 120px); align-items: start; } .flm-story-text p { font-family: var(--flm-serif); font-size: 18px; line-height: 1.65; margin: 0 0 20px; color: var(--flm-ink-soft); } .flm-story-lede { font-size: 22px !important; color: var(--flm-ink) !important; line-height: 1.55 !important; border-left: 1px solid var(--flm-accent); padding-left: 24px; } .flm-story-sig { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--flm-rule); display: flex; flex-direction: column; gap: 4px; font-family: var(--flm-serif); font-style: italic; } .flm-story-sig-zh { font-family: var(--flm-zh); font-size: 16px; color: var(--flm-ink); letter-spacing: 0.14em; font-style: normal; } .flm-story-sig-en { font-size: 14px; color: var(--flm-ink-mute); } .flm-timeline { list-style: none; padding: 0; margin: 0; } .flm-timeline-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--flm-rule); } .flm-timeline-item:last-child { border-bottom: 1px solid var(--flm-rule); } .flm-timeline-year { font-family: var(--flm-serif); font-style: italic; font-size: 22px; color: var(--flm-accent); } html[data-aesthetic="luxe"] .flm-timeline-year, html[data-aesthetic="flm"] .flm-timeline-year { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-timeline-year { color: var(--flm-ink); } .flm-timeline-body h4 { font-family: var(--flm-serif); font-size: 19px; font-weight: 400; margin: 0 0 4px; color: var(--flm-ink); } .flm-timeline-body p { font-family: var(--flm-sans); font-size: 14px; margin: 0; color: var(--flm-ink-soft); line-height: 1.5; } /* ── LOCATIONS ────────────────────────────────────────────────────────── */ .flm-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 40px); } .flm-loc-card { background: var(--flm-bg-alt); display: flex; flex-direction: column; border: 1px solid var(--flm-rule); } .flm-loc-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--flm-rule); filter: saturate(0.85); } .flm-loc-body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .flm-loc-titles { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--flm-rule); flex-wrap: wrap; } .flm-loc-name { font-family: var(--flm-serif); font-size: 26px; font-weight: 400; margin: 0; } .flm-loc-zh { font-family: var(--flm-zh); font-size: 16px; letter-spacing: 0.14em; color: var(--flm-accent); } html[data-aesthetic="luxe"] .flm-loc-zh, html[data-aesthetic="flm"] .flm-loc-zh { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-loc-zh { color: var(--flm-ink-mute); } .flm-loc-note { font-family: var(--flm-serif); font-style: italic; font-size: 14px; color: var(--flm-gold); margin: 0; } .flm-loc-address, .flm-loc-tel { font-family: var(--flm-sans); font-size: 14px; margin: 0; color: var(--flm-ink-soft); line-height: 1.5; } .flm-loc-tel { font-variant-numeric: tabular-nums; } .flm-loc-hours { list-style: none; padding: 0; margin: 4px 0 0; font-family: var(--flm-serif); font-size: 14px; color: var(--flm-ink-soft); } .flm-loc-hours li { padding: 2px 0; font-variant-numeric: tabular-nums; } .flm-loc-link { margin-top: auto; padding-top: 16px; font-family: var(--flm-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--flm-accent); border-top: 1px solid var(--flm-rule); } html[data-aesthetic="luxe"] .flm-loc-link, html[data-aesthetic="flm"] .flm-loc-link { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-loc-link { color: var(--flm-ink); } /* ── PRIVATE DINING ──────────────────────────────────────────────────── */ /* Always dark — independent of aesthetic — so we never get cream-on-cream when --flm-ink is being used as the text color (luxe / flm). */ .flm-private { background: #14110d; color: #f3ebd9; max-width: none; padding-left: 0; padding-right: 0; } html[data-aesthetic="minimal"] .flm-private { background: #1a1a1a; } .flm-private .flm-section-title-light { color: #f3ebd9; } .flm-private-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; } .flm-private-img { background-size: cover; background-position: center; filter: saturate(0.9) brightness(0.85); } .flm-private-text { padding: clamp(60px, 7vw, 120px) clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; } .flm-private-text .flm-eyebrow { color: rgba(243, 235, 217, 0.7); } .flm-private-text .flm-rule { background: rgba(243, 235, 217, 0.4); } .flm-private-text p { font-family: var(--flm-serif); font-size: 18px; line-height: 1.6; color: rgba(243, 235, 217, 0.85); margin: 0 0 24px; } .flm-private-list { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .flm-private-list li { padding: 14px 0; border-top: 1px solid rgba(243, 235, 217, 0.18); font-family: var(--flm-serif); font-size: 16px; line-height: 1.5; color: rgba(243, 235, 217, 0.85); } .flm-private-list li:last-child { border-bottom: 1px solid rgba(243, 235, 217, 0.18); } .flm-private-list strong { display: inline; font-weight: 500; color: var(--flm-gold); font-style: italic; font-family: var(--flm-serif); margin-right: 8px; } /* ── GALLERY ─────────────────────────────────────────────────────────── */ .flm-gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 12px; } .flm-gallery-cell { margin: 0; position: relative; overflow: hidden; } .flm-gallery-cell-0 { grid-column: span 4; grid-row: span 2; } .flm-gallery-cell-1 { grid-column: span 2; grid-row: span 1; } .flm-gallery-cell-2 { grid-column: span 2; grid-row: span 1; } .flm-gallery-cell-3 { grid-column: span 3; grid-row: span 2; } .flm-gallery-cell-4 { grid-column: span 3; grid-row: span 1; } .flm-gallery-cell-5 { grid-column: span 3; grid-row: span 1; } .flm-gallery-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.9); transition: transform 0.6s ease; } .flm-gallery-cell:hover .flm-gallery-img { transform: scale(1.04); } .flm-gallery-cell figcaption { position: absolute; bottom: 12px; left: 12px; padding: 6px 12px; background: rgba(20, 17, 13, 0.65); color: #f3ebd9; font-family: var(--flm-serif); font-style: italic; font-size: 13px; letter-spacing: 0.04em; backdrop-filter: blur(8px); } /* ── PRESS ───────────────────────────────────────────────────────────── */ .flm-press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--flm-rule); border-bottom: 1px solid var(--flm-rule); } .flm-press-cell { margin: 0; padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--flm-rule); display: flex; flex-direction: column; gap: 16px; text-align: center; } .flm-press-cell:last-child { border-right: 0; } .flm-press-cell blockquote { margin: 0; font-family: var(--flm-serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--flm-ink); flex: 1; display: flex; align-items: center; justify-content: center; } .flm-press-cell figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--flm-rule); } .flm-press-source { font-family: var(--flm-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--flm-accent); } html[data-aesthetic="luxe"] .flm-press-source, html[data-aesthetic="flm"] .flm-press-source { color: var(--flm-gold); } html[data-aesthetic="minimal"] .flm-press-source { color: var(--flm-ink); } .flm-press-year { font-family: var(--flm-serif); font-style: italic; font-size: 13px; color: var(--flm-ink-mute); } /* ── ORDERING + NEWSLETTER ──────────────────────────────────────────── */ .flm-ordering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--flm-rule); } .flm-order-card, .flm-news-card { padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; gap: 16px; } .flm-order-card { border-right: 1px solid var(--flm-rule); } .flm-news-card { background: var(--flm-bg-alt); } .flm-order-card p, .flm-news-card p { font-family: var(--flm-serif); font-size: 17px; line-height: 1.55; color: var(--flm-ink-soft); margin: 0; } .flm-order-list { list-style: none; padding: 0; margin: 8px 0 16px; } .flm-order-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--flm-rule); font-family: var(--flm-serif); font-size: 16px; color: var(--flm-ink); } .flm-order-list li:last-child { border-bottom: 1px solid var(--flm-rule); } .flm-order-list li span:first-child { flex: 1; min-width: 0; } .flm-order-list li span:last-child { font-style: italic; color: var(--flm-ink-mute); white-space: nowrap; flex: 0 0 auto; } .flm-news-form { display: flex; gap: 8px; margin-top: 8px; } .flm-news-form input { flex: 1; border: 0; border-bottom: 1px solid var(--flm-ink); background: transparent; padding: 12px 0; font-family: var(--flm-serif); font-size: 17px; color: var(--flm-ink); outline: none; border-radius: 0; } .flm-news-form input::placeholder { color: var(--flm-ink-mute); font-style: italic; } .flm-news-form input:focus { border-bottom-color: var(--flm-accent); } .flm-news-fine { font-style: italic !important; font-size: 13px !important; color: var(--flm-ink-mute) !important; margin-top: 8px !important; } /* ── FOOTER ──────────────────────────────────────────────────────────── */ /* Footer is always dark, regardless of aesthetic — so the cream-on-cream collapse in luxe mode (where --flm-ink is cream) doesn't happen. */ .flm-footer { background: #14110d; color: #f3ebd9; padding: clamp(64px, 7vw, 120px) var(--flm-edge) 32px; margin-top: clamp(40px, 5vw, 80px); --flm-footer-gold: #d9b673; } html[data-aesthetic="minimal"] .flm-footer { background: #1a1a1a; --flm-footer-gold: #c9c6bd; } .flm-footer .flm-footer-zh { color: var(--flm-footer-gold); } .flm-footer .flm-footer-cols h3 { color: var(--flm-footer-gold); } .flm-footer-top { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 5vw, 100px); padding-bottom: 56px; border-bottom: 1px solid rgba(243, 235, 217, 0.18); } .flm-footer-zh { font-family: var(--flm-zh); font-size: 64px; font-weight: 600; letter-spacing: 0.12em; line-height: 1; } .flm-footer-en { font-family: var(--flm-serif); font-style: italic; font-size: 28px; margin-top: 4px; } .flm-footer-tagline { font-family: var(--flm-serif); font-size: 15px; color: rgba(243, 235, 217, 0.65); margin: 24px 0 0; line-height: 1.5; } .flm-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .flm-footer-cols h3 { font-family: var(--flm-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin: 0 0 16px; } .flm-footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .flm-footer-cols li { font-family: var(--flm-serif); font-size: 15px; color: rgba(243, 235, 217, 0.78); line-height: 1.4; } .flm-footer-cols a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .flm-footer-cols a:hover { border-bottom-color: var(--flm-footer-gold); } .flm-footer-bottom { max-width: 1440px; margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--flm-serif); font-style: italic; font-size: 13px; color: rgba(243, 235, 217, 0.55); flex-wrap: wrap; gap: 12px; } .flm-footer-zh-mini { font-family: var(--flm-zh); letter-spacing: 0.16em; font-style: normal; } /* ── RESPONSIVE ──────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .flm-nav-links { display: none; } .flm-nav-inner { grid-template-columns: auto auto; } .flm-section-head-bordered { grid-template-columns: 1fr; gap: 24px; } .flm-section-head-bordered .flm-section-lede { grid-column: 1; } .flm-reserve-grid { grid-template-columns: repeat(2, 1fr); } .flm-dish-grid { grid-template-columns: repeat(2, 1fr); } .flm-menu-grid { grid-template-columns: 1fr; } .flm-loc-grid { grid-template-columns: 1fr; } .flm-story-grid { grid-template-columns: 1fr; } .flm-private-grid { grid-template-columns: 1fr; } .flm-private-img { aspect-ratio: 16 / 9; } .flm-press-grid { grid-template-columns: repeat(2, 1fr); } .flm-press-cell:nth-child(2) { border-right: 0; } .flm-press-cell:nth-child(1), .flm-press-cell:nth-child(2) { border-bottom: 1px solid var(--flm-rule); } .flm-ordering-grid { grid-template-columns: 1fr; } .flm-order-card { border-right: 0; border-bottom: 1px solid var(--flm-rule); } .flm-hero-split { grid-template-columns: 1fr; } .flm-hero-split-img { min-height: 50vh; } .flm-footer-top { grid-template-columns: 1fr; } .flm-footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .flm-reserve-grid { grid-template-columns: 1fr; } .flm-dish-grid { grid-template-columns: 1fr; } .flm-footer-cols { grid-template-columns: 1fr; gap: 28px; } .flm-press-grid { grid-template-columns: 1fr; } .flm-press-cell { border-right: 0; border-bottom: 1px solid var(--flm-rule); } .flm-press-cell:last-child { border-bottom: 0; } .flm-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .flm-gallery-cell-0, .flm-gallery-cell-3 { grid-column: span 2; } .flm-gallery-cell-1, .flm-gallery-cell-2, .flm-gallery-cell-4, .flm-gallery-cell-5 { grid-column: span 1; grid-row: span 1; } .flm-footer-cols { grid-template-columns: 1fr 1fr; } }