/* ===== SoCiviC brand tokens ===== */ :root { --red: #B22222; --blue: #1E3A5F; --cream: #F4EDE3; --ink: #1A1A1A; --muted: #6B6B6B; --placeholder-bg: #FFF8E7; --placeholder-border: #D4A017; --placeholder-note: #8B6914; /* Override moss public-API tokens */ --moss-color-bg: var(--cream); --moss-color-text: var(--ink); --moss-color-muted: var(--muted); --moss-color-accent: var(--red); --moss-color-surface: var(--cream); --moss-font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif; --moss-font-heading: var(--moss-font-body); --moss-nav-width: 960px; --moss-content-width: 960px; --moss-site-max-width: 960px; } /* ===== Dark mode ===== Use :root[data-theme="dark"] to match specificity of moss's own dark-mode rule. */ :root[data-theme="dark"] { --cream: #1A1A1A; --ink: #F4EDE3; --muted: #9A9A9A; --placeholder-bg: #2A2418; --placeholder-border: #8B6914; --placeholder-note: #D4A017; --moss-color-bg: #1A1A1A; --moss-color-text: #F4EDE3; --moss-color-muted: #9A9A9A; --moss-color-surface: #262626; } /* Directly set body bg/color for dark mode — Chrome sometimes doesn't re-resolve background: var(--cream) when --cream changes via inherited attribute toggle. */ :root[data-theme="dark"] body { background: #1A1A1A !important; color: #F4EDE3 !important; } /* System preference dark mode (when no explicit data-theme) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --cream: #1A1A1A; --ink: #F4EDE3; --muted: #9A9A9A; --moss-color-bg: #1A1A1A; --moss-color-text: #F4EDE3; --moss-color-muted: #9A9A9A; --moss-color-surface: #262626; } :root:not([data-theme]) body { background: #1A1A1A; color: #F4EDE3; } } /* ===== Fonts ===== */ @font-face { font-family: 'Inter'; src: url('inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Source Han Sans SC'; src: url('source-han-sans-sc-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Source Han Sans SC'; src: url('source-han-sans-sc-bold.woff2') format('woff2'); font-weight: 600; font-display: swap; } /* ===== Base type ===== */ body { font-family: var(--moss-font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--cream); } .zh, [lang="zh"], [lang="zh-hans"] { font-family: 'Source Han Sans SC', 'PingFang SC', sans-serif; line-height: 1.75; } /* ===== Moss nav restyling ===== */ .main-nav .site-name { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; font-size: 14px !important; } .main-nav .nav-links a { color: var(--ink); font-weight: 500; text-decoration: none; } .main-nav .nav-links a:hover, .main-nav .nav-links a.active { color: var(--red); } .main-nav .nav-links a.active { border-bottom: 2px solid var(--red); } .nav-lang-toggle { font-size: 13px; } .nav-lang-current { color: var(--red); font-weight: 600; } .nav-lang-link { color: var(--muted); text-decoration: none; } .nav-lang-link:hover { color: var(--ink); } .nav-lang-link[hreflang^="zh"] { font-family: 'Source Han Sans SC', sans-serif; font-size: 14px; } /* ===== Hide moss auto-injected elements ===== */ .moss-colophon { display: none; } /* Kill the 60px gap moss base CSS adds below
— we want article footer to sit flush against the body-injected footer.container below it. */ main { padding-bottom: 0 !important; } /* moss default > footer.container — appears below
in the DOM. Style it as the bottom subscription row of our dark footer: matches article-footer's inset (max-width 960 + 32px article padding = 896), divider above, email form right-aligned. */ body > footer.container { background: var(--ink); color: var(--cream); max-width: 896px; margin: 0 auto; padding: 24px 48px 32px; border: none; box-sizing: border-box; } body > footer.container .footer-content { max-width: none; margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(244,237,227,0.15) !important; display: flex; justify-content: flex-end; align-items: center; } body > footer.container .footer-right { display: flex; justify-content: flex-end; } body > footer.container .footer-subscribe-form { display: flex; gap: 8px; max-width: 320px; } body > footer.container .footer-subscribe-form .moss-input { flex: 1; background: transparent; border: 1px solid rgba(244,237,227,0.25); color: var(--cream); padding: 8px 12px; font-size: 12px; font-family: inherit; outline: none; min-width: 180px; } body > footer.container .footer-subscribe-form .moss-input::placeholder { color: rgba(244,237,227,0.5); } body > footer.container .footer-subscribe-form .moss-input:focus { border-color: var(--cream); } body > footer.container .footer-subscribe-form .moss-btn { background: var(--cream); color: var(--ink); border: none; padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; font-family: inherit; } body > footer.container .moss-subscribe-status { font-size: 11px; color: rgba(244,237,227,0.7); margin-top: 4px; } main > article > .moss-collection-grid:first-child, article > .moss-collection-grid:first-child { display: none; } article > h1.article-title, h1.article-title, article > h1.moss-article-title, h1.moss-article-title { display: none; } .moss-article-listing, .moss-summary-layout, .moss-article-listing + footer { display: none; } /* ===== Page article content ===== */ article { max-width: var(--moss-content-width); margin: 0 auto; } article h1 { font-size: 72px; line-height: 0.98; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 0; } /* Section headings — used everywhere outside hero/footer/support-band */ article > h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; color: var(--red); margin: 88px 0 24px; text-transform: none; } article > h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } article > h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0; } article > p { margin: 18px 0; } article > ul, article > ol { margin: 18px 0; padding-left: 1.4em; } article > ul li, article > ol li { margin-bottom: 8px; line-height: 1.55; } article > ul li strong:first-child { font-weight: 700; } article > ul li em { font-style: italic; color: var(--muted); } /* Lead paragraph after h1 */ article > h1 + p { font-size: 19px; line-height: 1.6; max-width: 720px; margin-top: 24px; } /* First paragraph after h2 */ article > h2 + p { margin-top: 0; } /* Horizontal rules as section dividers — full content width */ article > hr { height: 1px; background: rgba(0,0,0,0.08); border: none; box-sizing: border-box; width: 100%; margin: 0; } /* Remove moss default decorative triple-dot on all hr (including footer) */ hr::before, hr::after { display: none !important; } article > blockquote { border-left: 3px solid rgba(0,0,0,0.12); margin: 24px 0; padding: 0 0 0 20px; font-style: italic; color: var(--muted); } article > blockquote p { margin: 0; } article > .callout { margin-left: 0; margin-right: 0; } article img { max-width: 100%; display: block; } /* ===== Eyebrow (first paragraph in hero panels) ===== */ .hero-split > .moss-grid > .moss-grid-card:first-child > p:first-child { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--cream); opacity: 0.85; margin: 0 0 8px; } /* ===== Hero-split ===== */ .hero-split { margin: 0 auto; } .hero-split > .moss-grid { min-height: 560px; gap: 0; align-items: stretch; padding: 0 !important; } /* Cell 1: text panel */ .hero-split > .moss-grid > .moss-grid-card:first-child { background: var(--red); color: var(--cream); padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; } .hero-split > .moss-grid > .moss-grid-card:first-child h1 { color: var(--cream); font-family: var(--moss-font-body); font-size: 68px; line-height: 0.98; letter-spacing: -0.015em; margin: 22px 0 0; } [lang="zh-hans"] .hero-split > .moss-grid > .moss-grid-card:first-child h1 { font-size: 56px; line-height: 1.1; letter-spacing: 0.04em; } .hero-split > .moss-grid > .moss-grid-card:first-child p { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.8; color: var(--cream); opacity: 0.82; margin: 18px 0 0; } /* Cell 2: photo/video panel — for home hero */ .hero-split > .moss-grid > .moss-grid-card:nth-child(2) { padding: 0; overflow: hidden; } .hero-split > .moss-grid > .moss-grid-card:nth-child(2) > p { margin: 0; height: 100%; } .hero-split > .moss-grid > .moss-grid-card:nth-child(2) img, .hero-split > .moss-grid > .moss-grid-card:nth-child(2) video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; aspect-ratio: auto; margin: 0; } /* Farewell hero: cell 2 is text (date/venue/runtime) — override red bg away */ .hero-split > .moss-grid > .moss-grid-card:nth-child(2):not(:has(img)) { background: transparent; color: var(--ink); padding: 56px 48px; display: flex; flex-direction: column; justify-content: flex-end; } /* Farewell cell 1 (no image inside): no red — override with white/cream */ .hero-split > .moss-grid:has(> .moss-grid-card:nth-child(2):not(:has(img))) > .moss-grid-card:first-child { background: var(--ink); } /* ===== Moss hero shortcode (daowu) ===== */ .moss-hero { position: relative; overflow: hidden; min-height: 560px; } /* The :::hero shortcode emits both an outer empty (legacy) and the real image inside .moss-hero-content. Hide the legacy outer one and target only the content's first as the background-fill image. */ .moss-hero > img { display: none; } .moss-hero .moss-hero-content { position: relative; padding: 64px 72px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cream); min-height: 560px; width: 100%; /* Override moss base default max-width: max(600px, 35%) */ max-width: none; box-sizing: border-box; } .moss-hero .moss-hero-content > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; } /* Scrim above image, below text — keep text legible without burying the image */ .moss-hero .moss-hero-content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); z-index: 1; } .moss-hero .moss-hero-content > *:not(img) { position: relative; z-index: 2; } .moss-hero .moss-hero-content > p:first-child { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--cream); opacity: 0.85; } .moss-hero h1 { font-size: 88px; line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; margin-top: 16px; color: var(--cream); } [lang="zh-hans"] .moss-hero h1 { font-size: 56px; line-height: 1.05; } .moss-hero blockquote { font-size: 14px; font-style: italic; margin-top: 18px; opacity: 0.85; max-width: 560px; line-height: 1.4; border: none; padding: 0; background: none; color: var(--cream); } .moss-hero blockquote p { margin: 0; } /* ===== Moss grid ===== */ .moss-grid { padding: 0 72px; margin: 24px 0; } .moss-grid-card { min-width: 0; } /* Images in grid cards */ .moss-grid-card img { width: 100%; display: block; } /* Work/also-by compound link cards */ .moss-grid-card.link-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .moss-grid-card.link-card > p:first-child { display: block; margin: 0; line-height: 0; font-size: 0; width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; } .moss-grid-card.link-card picture { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } .moss-grid-card.link-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .moss-grid-card.link-card img[src*="poster-"] { object-position: center top; } /* Higher-specificity rules below override the article/article > .moss-grid h3 defaults so link-card titles get their proper size + breathing room above the title. */ article .moss-grid .moss-grid-card.link-card h3, article > .moss-grid .moss-grid-card.link-card h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin: 32px 0 0; } article .moss-grid .moss-grid-card.link-card > p em:only-child, article > .moss-grid .moss-grid-card.link-card > p em:only-child { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--muted); display: block; margin-top: 10px; } article .moss-grid .moss-grid-card.link-card > p:not(:first-child), article > .moss-grid .moss-grid-card.link-card > p:not(:first-child) { font-size: 15px; line-height: 1.55; margin-top: 14px; opacity: 0.85; } /* Re-assert image wrapper has no inline-level baseline / line-box (otherwise inner / sits on a baseline and shifts down inside the aspect-ratio box). */ article .moss-grid .moss-grid-card.link-card > p:first-child, article > .moss-grid .moss-grid-card.link-card > p:first-child { font-size: 0; line-height: 0; } /* Section h2 inside grid (footer columns) should not inherit article > h2 caps */ .moss-grid h2 { text-transform: none; letter-spacing: normal; font-size: 16px; font-weight: 700; margin: 0 0 12px; } /* Production photo grid: cover-fill cells */ article > .moss-grid .moss-grid-card > p:only-child > img { aspect-ratio: 4/3; object-fit: cover; } /* ===== About / Cast grids: h3 = name, em = role ===== */ article .moss-grid h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; } article .moss-grid h3 + em, article .moss-grid h3 ~ p > em:only-child { font-size: 12px; color: var(--muted); font-style: italic; display: block; margin-top: 2px; } /* Village-to-city practice: h3 steps */ article > .moss-grid .moss-grid-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 6px; } article > .moss-grid .moss-grid-card h3 + em, article > .moss-grid .moss-grid-card h3 ~ p:first-of-type { font-size: 13px; color: var(--muted); } /* ===== Schedule list (farewell performance schedule) ===== */ article .moss-grid ul { list-style: none; padding: 0; margin: 0; } article .moss-grid li { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 16px; } article .moss-grid li strong { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; font-weight: 600; min-width: 56px; } article .moss-grid li em { margin-left: auto; font-style: normal; font-size: 15px; opacity: 0.9; font-weight: 500; } /* ===== Buttons shortcode ===== */ .moss-buttons { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; } .moss-btn-primary { background: var(--red); color: var(--cream); padding: 13px 26px; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border: none; text-decoration: none; display: inline-block; } .moss-btn-secondary { color: var(--red); padding: 13px 26px; border: 1px solid var(--red); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; text-decoration: none; display: inline-block; } .moss-buttons.inverted .moss-btn-primary { background: var(--cream); color: var(--red); } .moss-buttons.inverted .moss-btn-secondary { background: transparent; color: var(--cream); border-color: var(--cream); } /* Buttons inside hero-split cell 1 (inverted) */ .hero-split > .moss-grid > .moss-grid-card:first-child .moss-buttons.inverted .moss-btn-primary { background: var(--cream); color: var(--red); } .hero-split > .moss-grid > .moss-grid-card:first-child .moss-buttons.inverted .moss-btn-secondary { background: transparent; color: var(--cream); border-color: var(--cream); } /* ===== [!pending] callouts ===== */ .callout.callout-pending { margin: 14px 0; padding: 14px 18px; border-left: 3px solid var(--placeholder-border); background: var(--placeholder-bg); font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--placeholder-note); line-height: 1.55; } .callout.callout-pending .callout-title { font-weight: 600; letter-spacing: 0.12em; color: var(--placeholder-border); text-transform: uppercase; font-size: 12px; margin-bottom: 8px; } .callout.callout-pending .callout-title::before { content: 'PENDING · '; } .callout.callout-pending .callout-content { color: var(--placeholder-note); font-family: 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.55; } .callout.callout-pending .callout-content p { margin: 0; } /* Standalone pending callout in article — align with other article children */ article > .callout.callout-pending { margin: 24px 0; } /* ===== Support band — sits inside article content frame ===== */ .support-band { background: var(--red); color: var(--cream); padding: 64px 48px; margin: 64px 0 0; } .support-band h2 { font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--cream); text-transform: none; letter-spacing: normal; margin: 0 0 24px; } [lang="zh-hans"] .support-band h2 { font-size: 32px; line-height: 1.15; } .support-band p { font-size: 16px; line-height: 1.6; opacity: 0.9; max-width: 540px; margin: 0 0 16px; } .support-band p em { font-style: italic; font-size: 12px; opacity: 0.8; } .support-band .moss-buttons { margin-top: 8px; } /* ===== Footer — sits inside article content frame, flush against support-band above ===== */ article footer { background: var(--ink); color: var(--cream); padding: 48px 48px 24px; margin: 0; } /* First paragraph: brand name + tagline */ article footer > p:first-child { font-size: 12px; line-height: 1.6; opacity: 0.7; max-width: 500px; margin-bottom: 48px; } article footer > p:first-child strong { font-weight: 700; letter-spacing: 0.08em; color: var(--cream); font-size: 14px; } article footer > p:first-child strong em { font-style: normal; color: #ff6b6b; } /* Grid inside footer */ article footer .moss-grid { padding: 0; margin: 0 0 48px; } article footer .moss-grid-card h2 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; opacity: 0.75; color: var(--cream); } article footer .moss-grid-card ul { list-style: none; padding: 0; margin: 0; } article footer .moss-grid-card li { margin-bottom: 8px; padding: 0; border: none; display: block; font-size: 17px; } article footer .moss-grid-card li a { font-size: 13px; color: var(--cream); text-decoration: none; opacity: 0.85; } article footer .moss-grid-card li a:hover { opacity: 1; } article footer > hr { background: rgba(244,237,227,0.15); margin: 0; height: 1px; border: none; } article footer > p:last-child { font-size: 11px; opacity: 0.5; padding-top: 20px; margin: 0; } /* ===== Film-frame image (daowu) ===== */ article > p > img[alt*="premiere"], article > p > img[alt*="首演"] { max-width: 440px; margin: 48px auto; display: block; box-shadow: 0 8px 32px rgba(0,0,0,0.15); background: var(--ink); padding: 32px; } /* ===== Contact grid (support page) ===== */ article > .moss-grid .moss-grid-card > p:first-child > strong { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: block; padding-top: 24px; border-top: 2px solid var(--red); } article > .moss-grid .moss-grid-card > p:first-child > strong + br + a, article > .moss-grid .moss-grid-card > p a { font-size: 17px; color: var(--red); font-weight: 500; text-decoration: none; display: block; margin-top: 12px; } /* ===== Cast bio cluster (within :::grid 4) ===== In farewell cast section, each cell is: ### Name *role* bio paragraph (optional) Tighten typography and add bio paragraph styling. */ article > .moss-grid .moss-grid-card > p:nth-of-type(2) { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); opacity: 0.85; } [lang="zh-hans"] article > .moss-grid .moss-grid-card > p:nth-of-type(2) { line-height: 1.7; } /* ===== Accent video (top-level