/* ─────────────────────────────────────────────────────────── yangxuezhou.work — shared styles Bilingual editorial. Minimal black/white. Serif-first. ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Serif+SC:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&family=ZCOOL+XiaoWei&family=Ma+Shan+Zheng&family=Long+Cang&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap'); :root { /* Type */ --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif; --font-body: "EB Garamond", "Noto Serif SC", "Songti SC", serif; --font-zh: "Noto Serif SC", "Songti SC", "STSong", serif; --font-sans: "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; /* Light palette (default) */ --bg: #F7F7F5; --bg-elev: #ffffff; --fg: #14130f; --fg-muted: #5b574e; --fg-soft: #8a857a; --rule: rgba(20, 19, 15, 0.14); --rule-soft: rgba(20, 19, 15, 0.06); /* Accent — neon pink (light mode default) */ --primary: #14130f; --accent: #FF2D87; /* Scale */ --pad-x: clamp(24px, 5vw, 80px); --pad-y: clamp(28px, 4vw, 56px); /* Anim */ --ease: cubic-bezier(.2,.7,.2,1); } html.dark { --bg: #0d0c0a; --bg-elev: #16140f; --fg: #ece8de; --fg-muted: #98948a; --fg-soft: #65615a; --rule: rgba(236, 232, 222, 0.16); --rule-soft: rgba(236, 232, 222, 0.07); --primary: #ece8de; /* dark mode keeps the original ink-red accent */ --accent: #c0392b; } /* sans toggle */ html.sans { --font-display: "Geist", -apple-system, system-ui, sans-serif; --font-body: "Geist", -apple-system, system-ui, sans-serif; } /* Chinese typeface options. Set via [data-zh-font="..."] on . */ html[data-zh-font="songti"] { --font-zh: "Noto Serif SC", "Songti SC", "STSong", serif; } html[data-zh-font="heiti"] { --font-zh: "Noto Sans SC", "PingFang SC", -apple-system, sans-serif; } html[data-zh-font="kaishu"] { --font-zh: "Ma Shan Zheng", "Kaiti SC", "STKaiti", cursive; } html[data-zh-font="xiaowei"] { --font-zh: "ZCOOL XiaoWei", "Noto Serif SC", serif; } html[data-zh-font="longcang"] { --font-zh: "Long Cang", "Noto Serif SC", cursive; } /* Ensure .zh always uses the Chinese family, even when html.sans flips the latin fonts. */ .zh, html.sans .zh { font-family: var(--font-zh); } /* ───────── reset / base ───────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 18px; line-height: 1.55; font-feature-settings: "kern", "liga", "onum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .35s var(--ease), color .35s var(--ease); min-height: 100vh; } ::selection { background: var(--accent); color: #fff; } a { color: inherit; text-decoration: none; } a.underline-link { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease), color .25s var(--ease); } a.underline-link:hover { color: var(--accent); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -0.01em; } .zh { font-family: var(--font-zh); font-weight: 400; } html.sans .zh { font-family: "PingFang SC", "Noto Sans SC", sans-serif; } /* ───────── top nav ───────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 22px var(--pad-x); z-index: 100; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--rule-soft); transition: background .35s var(--ease), border-color .35s var(--ease); } .site-nav > * { pointer-events: auto; } .site-nav .brand { font-family: var(--font-display); font-style: italic; font-size: 19px; letter-spacing: 0.01em; color: var(--fg); } .site-nav .brand em { font-style: normal; } .site-nav .brand .ampersand { display: inline-block; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; vertical-align: middle; margin: 0 6px 2px; } .site-nav .links { display: flex; gap: 28px; align-items: baseline; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); } .site-nav .links a { position: relative; padding: 4px 0; opacity: 0.6; transition: opacity .3s var(--ease); } .site-nav .links a:hover { opacity: 1; } .site-nav .links a.active { opacity: 1; } .site-nav .links a.active::after { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; transform: translateY(-50%); } .site-nav .mode-toggle { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--fg); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; padding: 6px 0; margin-left: 22px; transition: opacity .3s var(--ease); } .site-nav .mode-toggle:hover { opacity: 1; } /* ───────── footer ───────── */ .site-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 36px var(--pad-x) 28px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); border-top: 1px solid var(--rule-soft); margin-top: 80px; } .site-foot .dot { display: inline-block; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; vertical-align: middle; margin: 0 8px 2px; } /* ───────── shared editorial bits ───────── */ .eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-soft); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* arriving page transition */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: rise .9s var(--ease) both; } .rise-d1 { animation-delay: .08s; } .rise-d2 { animation-delay: .16s; } .rise-d3 { animation-delay: .24s; } .rise-d4 { animation-delay: .32s; } .rise-d5 { animation-delay: .40s; } /* ───────── reusable container ───────── */ .wrap { max-width: 1440px; margin: 0 auto; padding: 120px var(--pad-x) 60px; } .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 120px var(--pad-x) 60px; } /* cursor dot — micro-interaction */ .cursor-dot { position: fixed; left: -10px; top: -10px; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999; mix-blend-mode: difference; transition: width .25s var(--ease), height .25s var(--ease), opacity .25s; opacity: 0.85; } .cursor-dot.big { width: 28px; height: 28px; opacity: 0.4; } @media (hover: none) { .cursor-dot { display: none; } }