/* ============= Inner page styles (Menu, Outlets, Story, Contact, Investors) ============= */ /* Chinese characters fill their em box, so the tight 0.9–0.95 line-heights used for the EN serif italic display headings let adjacent lines overlap in ZH. Loosen them when [data-lang="zh"] is active on the root. */ [data-lang="zh"] .page-head h1, [data-lang="zh"] .outlets-hero h1, [data-lang="zh"] .story-hero h1, [data-lang="zh"] .timeline__inner h2, [data-lang="zh"] .portraits__head h2, [data-lang="zh"] .charity-block h2, [data-lang="zh"] .footprint__head h2, [data-lang="zh"] .model__head h2, [data-lang="zh"] .returns__head h2, [data-lang="zh"] .terms__head h2, [data-lang="zh"] .pull-quote p, [data-lang="zh"] .quiet-close h2, [data-lang="zh"] .story-pull p.quote, [data-lang="zh"] .inv-narrative h2, [data-lang="zh"] .inv-hero h1, [data-lang="zh"] .inv-contact h2 { line-height: 1.1; } .page-head { padding: clamp(80px, 12vw, 140px) var(--rail) clamp(40px, 6vw, 80px); max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; } .page-head h1 { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 10vw, 168px); line-height: 0.9; margin: 16px 0 0; letter-spacing: -0.03em; } .page-head h1 em { color: var(--forest); } .page-head p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 50ch; margin: 0; } /* ===== Menu ===== */ .menu-toc { background: var(--cream); padding: 18px var(--rail); margin: 0 0 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: var(--nav-h, 65px); z-index: 20; } .menu-toc__inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .menu-toc__inner.is-dragging { cursor: grabbing; } .menu-toc__inner::-webkit-scrollbar { display: none; } .menu-toc a { white-space: nowrap; font-family: var(--serif); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 0; border-bottom: 1px solid transparent; } .menu-toc a:hover, .menu-toc a.is-active { color: var(--forest); border-bottom-color: var(--forest); } .menu-toc a.is-active { font-weight: 700; } .menu-section { padding: 60px var(--rail); max-width: var(--maxw); margin: 0 auto; /* Account for the sticky nav AND the sticky TOC bar above this section so anchor links land the heading just below them, not hidden behind them. */ scroll-margin-top: calc(var(--nav-h, 65px) + 76px); } .menu-section__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .menu-section__head .ch { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); } .menu-section__head h2 { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 12px 0 0; letter-spacing: -0.02em; } .menu-section__head h2 .cn { font-family: var(--cn); font-style: normal; font-size: 0.4em; color: var(--forest); letter-spacing: 0.25em; display: block; margin-top: 12px; opacity: 0.7; } /* In ZH mode the .cn subtitle duplicates the ZH title — suppress it. */ [data-lang="zh"] .menu-section__head h2 .cn { display: none; } .menu-section__head p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 50ch; } .menu-section__list { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; } .dish { padding: 0 0 24px; border-bottom: 1px dotted var(--line); display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; } .dish__visual { aspect-ratio: 1/1; position: relative; overflow: hidden; } .dish__visual .ph { position: absolute; inset: 0; } .dish h3 { font-family: var(--serif); font-style: italic; font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; } .dish h3 .cn { display: block; font-family: var(--cn); font-style: normal; font-size: 13px; color: var(--forest); letter-spacing: 0.2em; margin: 8px 0 0; opacity: 0.7; } .dish p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0 0; } .dish .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 4px; font-family: var(--mono); font-size: 13px; white-space: nowrap; } .dish .price__normal { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.7; } .dish .price__member, .dish .price__single { color: var(--forest); font-weight: 700; font-size: 14px; } .dish .price__tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); opacity: 0.7; padding: 1px 6px; border: 1px solid var(--forest); border-radius: 999px; } .dish .tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; background: var(--forest); color: var(--cream); padding: 2px 8px; border-radius: 3px; margin-left: 8px; text-transform: uppercase; vertical-align: middle; } /* ===== Outlets ===== */ .outlet-card { padding: 60px var(--rail); border-top: 1px solid var(--line); } .outlet-card:nth-child(odd) { background: var(--cream); } .outlet-card__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; } .outlet-card__visual { aspect-ratio: 4/3; position: relative; } .outlet-card__visual .ph { position: absolute; inset: 0; } .outlet-card__num { position: absolute; top: -40px; left: -32px; font-family: var(--serif); font-style: italic; font-size: 240px; line-height: 1; color: rgba(79, 93, 72, 0.18); letter-spacing: -0.03em; } .outlet-card__copy h2 { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 6vw, 80px); line-height: 1; margin: 12px 0 6px; letter-spacing: -0.025em; } .outlet-card__copy h2 .cn { font-family: var(--cn); font-style: normal; font-size: 0.3em; color: var(--forest); letter-spacing: 0.3em; display: block; margin-top: 12px; } .outlet-card__copy .city { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); } .outlet-card__meta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .outlet-card__meta dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; } .outlet-card__meta dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); } .outlet-card__buttons { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; } /* ===== Story ===== */ .story-hero { padding: clamp(80px, 12vw, 140px) var(--rail) 80px; text-align: center; max-width: 1100px; margin: 0 auto; } .story-hero h1 { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 10vw, 168px); line-height: 0.9; margin: 16px 0 32px; letter-spacing: -0.03em; } .story-hero h1 em { color: var(--forest); } .story-hero .deck { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink-soft); max-width: 50ch; margin: 0 auto; } .story-pull { padding: 80px var(--rail); background: var(--cream); text-align: center; } .story-pull .quote { font-family: var(--serif); font-style: italic; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.25; letter-spacing: -0.015em; color: var(--forest); max-width: 22ch; margin: 0 auto; } .story-pull .by { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-top: 32px; } .story-body { padding: 80px var(--rail); max-width: 800px; margin: 0 auto; font-size: 18px; line-height: 1.8; } .story-body h3 { font-family: var(--serif); font-style: italic; font-size: 36px; margin: 48px 0 16px; letter-spacing: -0.015em; line-height: 1.05; } .story-body .small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin: 32px 0 8px; display: block; } .story-body p { margin: 0 0 18px; color: var(--ink); } .story-body .figure { margin: 40px 0; aspect-ratio: 16/9; position: relative; } .story-body .figure .ph { position: absolute; inset: 0; } .story-body .figure .caption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-top: 12px; } /* ===== Contact ===== */ .contact-grid { padding: 60px var(--rail) 120px; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; } .contact-form { display: grid; gap: 20px; } .contact-form label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; font-family: var(--serif); font-style: italic; font-size: 22px; padding: 8px 0 12px; color: var(--ink); outline: none; letter-spacing: -0.01em; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--mute); font-style: italic; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-bottom-color: var(--forest); } .contact-form textarea { resize: vertical; min-height: 100px; } .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .contact-side { display: grid; gap: 32px; align-content: start; } .contact-side h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin: 0 0 12px; } .contact-side p, .contact-side a { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; margin: 0; letter-spacing: -0.01em; } .contact-side .small { font-family: var(--sans); font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } /* ===== Investors ===== */ .inv-hero { padding: clamp(80px, 12vw, 140px) var(--rail) 80px; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; } .inv-hero h1 { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 10vw, 152px); line-height: 0.9; margin: 16px 0 0; letter-spacing: -0.03em; } .inv-hero h1 em { color: var(--forest); } .inv-hero p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 44ch; margin: 0; } .inv-stats { background: var(--cream); padding: 60px var(--rail); } .inv-stats__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .inv-stat { padding-top: 24px; border-top: 1px solid var(--line); } .inv-stat .num { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1; color: var(--ink); letter-spacing: -0.025em; } .inv-stat .num .unit { font-size: 0.45em; color: var(--forest); margin-left: 6px; } .inv-stat .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-top: 10px; } .inv-stat .sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .inv-section { padding: 60px var(--rail); max-width: var(--maxw); margin: 0 auto; } .inv-section h2 { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 0 0 40px; letter-spacing: -0.02em; } .inv-section h2 em { color: var(--forest); } .docs { display: grid; border-top: 1px solid var(--line); } .doc { display: grid; grid-template-columns: 60px 1.4fr 1fr auto auto; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; transition: padding 0.2s ease, background 0.2s ease; } .doc:hover { padding-left: 16px; background: var(--cream); } .doc__num { font-family: var(--mono); font-size: 12px; color: var(--forest); letter-spacing: 0.12em; } .doc h3 { font-family: var(--serif); font-style: italic; font-size: 22px; margin: 0; letter-spacing: -0.01em; } .doc .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--mute); text-transform: uppercase; } .doc .size { font-family: var(--mono); font-size: 12px; color: var(--mute); } .doc .pdf { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; background: var(--forest); color: var(--cream); padding: 4px 10px; border-radius: 3px; text-transform: uppercase; } .inv-contact { padding: 80px var(--rail); background: var(--forest); color: var(--cream); } .inv-contact__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .inv-contact h2 { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; margin: 12px 0 0; letter-spacing: -0.025em; } .inv-contact .h-eyebrow { color: var(--cream); opacity: 0.7; } .inv-contact .h-eyebrow .dot { background: var(--cream); } .inv-contact .card { padding: 32px; border: 1px solid rgba(235, 223, 196, 0.3); } .inv-contact .card h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; opacity: 0.7; } .inv-contact .card p { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; margin: 0; } @media (max-width: 900px) { .page-head, .menu-section__head, .menu-section__list, .outlet-card__inner, .contact-grid, .contact-row, .inv-hero, .inv-stats__grid, .inv-contact__inner { grid-template-columns: 1fr; gap: 32px; } .inv-stats__grid { grid-template-columns: 1fr 1fr; } .doc { grid-template-columns: 40px 1fr auto; } .doc .meta, .doc .size { display: none; } } @media (max-width: 600px) { .inv-stats__grid { grid-template-columns: 1fr; gap: 24px; } } /* ============== Contact Form 7 — shared editorial styling ============== Used by both the investor inquiry form (page-investors.php) and any general contact form on /contact. Wrap a CF7 [contact-form-7] embed in
to opt in. */ .cf7-form-block .form-wrap { background: var(--cream); padding: 28px; color: var(--ink); } .cf7-form-block .form-wrap h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px; color: var(--forest); } .cf7-form-block .wpcf7 form { display: grid; gap: 18px; } .cf7-form-block .wpcf7 form > label, .cf7-form-block .wpcf7 form > p > label { display: block; margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); line-height: 1.5; } .cf7-form-block .wpcf7 form .cf7-question { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); } .cf7-form-block .wpcf7 form input[type="text"], .cf7-form-block .wpcf7 form input[type="email"], .cf7-form-block .wpcf7 form input[type="tel"], .cf7-form-block .wpcf7 form input[type="url"], .cf7-form-block .wpcf7 form input[type="number"], .cf7-form-block .wpcf7 form textarea, .cf7-form-block .wpcf7 form select { display: block; width: 100%; margin: 8px 0 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 0; font-family: var(--sans); font-style: normal; font-size: 15px; line-height: 1.5; color: var(--ink); letter-spacing: 0; text-transform: none; box-shadow: none; transition: border-color 0.2s ease, background 0.2s ease; } .cf7-form-block .wpcf7 form input[type="text"]:focus, .cf7-form-block .wpcf7 form input[type="email"]:focus, .cf7-form-block .wpcf7 form input[type="tel"]:focus, .cf7-form-block .wpcf7 form input[type="url"]:focus, .cf7-form-block .wpcf7 form input[type="number"]:focus, .cf7-form-block .wpcf7 form textarea:focus, .cf7-form-block .wpcf7 form select:focus { outline: none; border-color: var(--forest); background: #fff; } .cf7-form-block .wpcf7 form ::placeholder { color: var(--mute); opacity: 0.85; font-family: var(--sans); font-style: italic; } .cf7-form-block .wpcf7 form textarea { min-height: 110px; resize: vertical; } .cf7-form-block .wpcf7 form .wpcf7-list-item { display: inline-flex; align-items: center; margin: 6px 18px 0 0; } .cf7-form-block .wpcf7 form .wpcf7-list-item input[type="radio"], .cf7-form-block .wpcf7 form .wpcf7-list-item input[type="checkbox"] { accent-color: var(--forest); width: 16px; height: 16px; margin: 0 8px 0 0; flex-shrink: 0; } .cf7-form-block .wpcf7 form .wpcf7-list-item-label { font-family: var(--sans); font-style: normal; font-size: 14px; color: var(--ink); letter-spacing: 0; text-transform: none; line-height: 1.45; } .cf7-form-block .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .cf7-form-block .wpcf7-acceptance .wpcf7-list-item-label { font-size: 12px; color: var(--ink-soft); } .cf7-form-block .wpcf7 form input[type="submit"] { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 14px 28px; background: var(--forest); color: var(--cream); border: 1px solid var(--forest); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .cf7-form-block .wpcf7 form input[type="submit"]:hover { background: transparent; color: var(--forest); } .cf7-form-block .wpcf7 form input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } .cf7-form-block .wpcf7-not-valid-tip { margin-top: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: #B0413E; } .cf7-form-block .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); } .cf7-form-block .wpcf7 form.invalid .wpcf7-response-output, .cf7-form-block .wpcf7 form.unaccepted .wpcf7-response-output, .cf7-form-block .wpcf7 form.payment-required .wpcf7-response-output { border-color: #B0413E; color: #B0413E; } .cf7-form-block .wpcf7 form.sent .wpcf7-response-output { border-color: var(--forest); color: var(--forest); } @media (max-width: 560px) { .cf7-form-block .wpcf7 form .wpcf7-list-item { display: flex; margin: 6px 0 0; } }