/* Self-hosted CJK fallback font (subset: weights 300–700, glyphs used on this site). Replaces the external Google Fonts dependency. */ @font-face { font-family: "Noto Sans SC"; src: url("../fonts/NotoSansSC-subset.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* OUGONG Automation — production styles Theme tokens live here; markup uses var(--x) so a single [data-theme] on reskins the whole site. Nordic is the default. */ :root, [data-theme="nordic"] { --bg: #f3f2ee; --surface: #ffffff; --surface2: #e9e7e1; --fg: #161a20; --muted: #5b626d; --line: rgba(20, 24, 31, 0.12); --line-strong: rgba(20, 24, 31, 0.18); --accent: #275d7a; --accent-fg: #ffffff; --nav-bg: rgba(243, 242, 238, 0.78); } [data-theme="graphite"] { --bg: #0e1013; --surface: #15181d; --surface2: #1b1f25; --fg: #ECEAE4; --muted: #9097a0; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --accent: #E0552D; --accent-fg: #ffffff; --nav-bg: rgba(14, 16, 19, 0.78); } [data-theme="atelier"] { --bg: #f2efe8; --surface: #fbf9f4; --surface2: #e7e3d9; --fg: #1a1a16; --muted: #5d5a4f; --line: rgba(26, 26, 22, 0.12); --line-strong: rgba(26, 26, 22, 0.18); --accent: #2f6b4f; --accent-fg: #ffffff; --nav-bg: rgba(242, 239, 232, 0.78); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } section[id] { scroll-margin-top: 88px; } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; } /* keyframes */ @keyframes og-rise { from { transform: translateY(24px); } to { transform: none; } } /* scroll-reveal: content is visible by default; this only adds a subtle entrance, so a stuck or disabled animation never hides anything. */ [data-reveal].og-seen { animation: og-rise .65s cubic-bezier(.22,.61,.36,1); } /* nav scroll state */ .site-nav { background: transparent; border-bottom-color: transparent; } .site-nav.is-scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); } /* hover states (replace the prototype's inline style-hover) */ .nav-link { transition: color .2s; } .nav-link:hover { color: var(--accent); } .card { transition: opacity .7s, transform .7s, border-color .3s; } .card:hover { border-color: var(--accent); transform: translateY(-6px); } .btn-primary { transition: transform .2s, box-shadow .2s; } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost { transition: border-color .2s, transform .2s; } .btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); } .btn-pill { transition: transform .2s, opacity .2s; } .btn-pill:hover { transform: translateY(-1px); opacity: .92; } /* language segmented control */ .lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 7px 11px; font-family: inherit; font-size: 13px; letter-spacing: 0.04em; border: none; background: transparent; color: var(--muted); cursor: pointer; } .lang-btn.is-active { background: var(--accent); color: var(--accent-fg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal].og-seen { animation: none; } [data-parallax], [data-parallax-slow] { transform: none !important; } }