/* ========================================================================== ArbiHonor / 中诚 — Design System v2 · dual-theme token architecture -------------------------------------------------------------------------- Aesthetic: Institutional Editorial. Two grounds: warm paper (light, the default) and obsidian (dark). The active theme is [data-theme] on , set before first paint by the inline bootstrap in views/layout.js and flipped by the nav toggle (public/js/theme.js, persisted in localStorage). Palette rule (LOCKED): jade is the ONLY interactive accent. Brass is a non-interactive decorative metal — hairlines, numerals, small-caps, emblem. Never a brass button, never a jade hairline. Radius rule (LOCKED): panels/cards 14px · buttons/inputs 8px · chips/badges pill · media 10px · hairline rules 0. Deliberately NOT blue. Deliberately no purple/pink gradients. Token layers — recoloring the site means editing layer 2 only: 1. Primitives (theme-agnostic, defined once in :root): jade/brass scales, fixed ink/paper constants, fonts, radius, rhythm, motion. 2. Semantic (theme-scoped): ground, type, accent, signals, glass, shadow, washes, chrome overlays, atmosphere. :root carries the LIGHT values; [data-theme="dark"] overrides them with the original obsidian set. Components reference semantic tokens only. The few rgba() literals left in components are alpha tints of the theme-agnostic jade/brass/signal hues and read correctly on both grounds. ========================================================================== */ /* ---------- 1. TOKENS ---------------------------------------------------- */ :root { /* === Layer 1 · primitives (theme-agnostic) ========================== */ /* Jade scale — the only interactive hue */ --jade-400: #56C08C; --jade-500: #2F9E68; --jade-600: #1D7A4D; --jade-700: #135437; --jade-glow: rgba(47, 158, 104, 0.28); /* Brass scale — decorative metal only */ --brass-200: #EBD8AC; --brass-300: #D8BE84; --brass-400: #C6A667; --brass-600: #8A6F3C; /* Fixed constants — text sitting ON jade fills, valid on both themes */ --paper: #FFFFFF; /* on jade-600/700 fills (skip link, active filter) */ --accent-ink: #04120B; /* on jade-500 fills (primary button, checkboxes) */ /* Families */ --f-display: 'EB Garamond', 'Noto Serif SC', 'Songti SC', Georgia, serif; --f-sans: 'Noto Sans SC', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Radius */ --r-btn: 8px; --r-panel: 14px; --r-media: 10px; --r-pill: 999px; /* Rhythm */ --gut: clamp(20px, 4.5vw, 64px); --max: 1320px; --max-read: 68ch; /* Motion */ --e-out: cubic-bezier(0.16, 0.84, 0.28, 1); --e-io: cubic-bezier(0.65, 0.02, 0.24, 1); --t-fast: 180ms; --t-mid: 320ms; /* === Layer 2 · semantic — LIGHT THEME (default) ===================== */ color-scheme: light; /* Ground — warm rice-paper whites, never cold grey-white */ --void: #0E1B15; --base: #FAF6EE; --surface: #FFFFFF; --raised: #F3EEE1; --line: #E3DCC8; --line-soft: rgba(138, 111, 60, 0.18); /* Type — deep ink green on paper. On --base: --ivory 15.1:1, --dim 8.5:1, --faint 5.4:1, --ghost 4.6:1 — small text clears the WCAG AA 4.5:1 floor. */ --ivory: #14261D; --dim: #3E4B44; --faint: #5C6860; --ghost: #6A736C; /* placeholders & decorative micro-labels only */ /* Accent — jade deepened for paper: link/label text 5.0:1 */ --accent: var(--jade-600); /* Brass text — decorative only, deepened for paper (--brass-fig is for large numerals at AA-large ≥3:1; anything small uses --brass-ink 5.4:1) */ --brass-ink: #7C6232; --brass-fig: #8A6F3C; /* Signal (status only — never decorative) */ --pos: #1D7A4D; --warn: #8A6A14; --neg: #B23B2E; /* Glass */ --glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(242, 236, 222, 0.62) 100%); --glass-brd: rgba(138, 111, 60, 0.26); --glass-spec: rgba(255, 255, 255, 0.85); --glass-blur: blur(20px) saturate(150%); --shadow-lift: 0 24px 60px -28px rgba(20, 38, 29, 0.22), 0 2px 10px -4px rgba(20, 38, 29, 0.08); /* Washes & wells — ground-relative fills */ --wash: rgba(20, 38, 29, 0.05); /* hover */ --wash-2: rgba(20, 38, 29, 0.09); /* stronger hover */ --well: rgba(20, 38, 29, 0.035); /* inputs, chips, table heads */ /* Chrome & overlays */ --chrome-bg: rgba(250, 246, 238, 0.86); /* stuck topbar */ --pop-bg: rgba(255, 255, 255, 0.94); /* mega menus */ --drawer-bg: rgba(250, 246, 238, 0.97); --scrim: rgba(14, 27, 21, 0.5); /* modal backdrop */ --dialog-bg: rgba(255, 255, 255, 0.97); /* modal box, toasts */ --side-bg: rgba(243, 238, 225, 0.55); /* admin sidebar */ --foot-bg: linear-gradient(180deg, transparent, rgba(228, 220, 201, 0.55)); /* Atmosphere */ --img-fade: linear-gradient(to top, rgba(14, 27, 21, 0.55) 0%, transparent 52%); --aura-1: rgba(47, 158, 104, 0.14); --aura-2: rgba(198, 166, 103, 0.18); /* Hero — engraved world map on ivory; the veil is BASE-colored (it only ever lightens), protecting left-hand copy contrast and dissolving the plate into the page ground at the bottom edge */ --hero-img: url("/img/hero/hero-c.webp"); --hero-veil: linear-gradient(180deg, color-mix(in srgb, var(--base) 76%, transparent) 0%, transparent 24%), linear-gradient(180deg, transparent 56%, var(--base) 96%), linear-gradient(90deg, color-mix(in srgb, var(--base) 94%, transparent) 0%, color-mix(in srgb, var(--base) 72%, transparent) 32%, color-mix(in srgb, var(--base) 20%, transparent) 56%, transparent 74%); /* Interior mastheads (§14c) — same idea as the hero veil but quieter: solid-to-sheer left→right for the title column, a top band to keep the nav legible, a bottom dissolve into the page ground. Base-colored, so it only ever lightens the plate. */ --ph-veil: linear-gradient(180deg, color-mix(in srgb, var(--base) 78%, transparent) 0%, transparent 30%), linear-gradient(180deg, transparent 58%, var(--base) 100%), linear-gradient(90deg, color-mix(in srgb, var(--base) 95%, transparent) 0%, color-mix(in srgb, var(--base) 80%, transparent) 36%, color-mix(in srgb, var(--base) 32%, transparent) 62%, transparent 84%); } /* === Layer 2 · semantic — DARK THEME (the original obsidian ground) ==== */ [data-theme="dark"] { color-scheme: dark; --void: #07100C; --base: #0A1310; --surface: #0F1A16; --raised: #14231D; --line: #1F332B; --line-soft: rgba(198, 166, 103, 0.13); /* --faint raised from #74786F (4.5:1, marginal) and --ghost from #4A5049: the footer disclaimer and form help sat below the AA floor for small text — the "can't read the fine print" complaint. Now 5.1:1 / 4.0:1. */ --ivory: #F1EEE6; --dim: #A9AAA1; --faint: #7E837A; --ghost: #6A716A; --accent: var(--jade-400); --brass-ink: var(--brass-300); --brass-fig: var(--brass-200); --pos: #56C08C; --warn: #D9A544; --neg: #D46A5A; --glass-bg: linear-gradient(158deg, rgba(86, 192, 140, 0.055) 0%, rgba(255, 255, 255, 0.022) 42%, rgba(7, 16, 12, 0.16) 100%); --glass-brd: rgba(198, 166, 103, 0.16); --glass-spec: rgba(235, 216, 172, 0.42); --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.82), 0 2px 10px -4px rgba(0, 0, 0, 0.5); --wash: rgba(255, 255, 255, 0.045); --wash-2: rgba(255, 255, 255, 0.09); --well: rgba(255, 255, 255, 0.035); --chrome-bg: rgba(10, 19, 16, 0.82); --pop-bg: rgba(15, 26, 22, 0.93); --drawer-bg: rgba(7, 16, 12, 0.97); --scrim: rgba(4, 10, 7, 0.86); --dialog-bg: rgba(15, 26, 22, 0.96); --side-bg: rgba(15, 26, 22, 0.5); --foot-bg: linear-gradient(180deg, transparent, rgba(7, 16, 12, 0.6)); --img-fade: linear-gradient(to top, rgba(7, 16, 12, 0.9) 0%, transparent 52%); --aura-1: rgba(47, 158, 104, 0.17); --aura-2: rgba(198, 166, 103, 0.09); /* Hero — same engraving, brass on near-black green */ --hero-img: url("/img/hero/hero-dark.webp"); --hero-veil: linear-gradient(180deg, color-mix(in srgb, var(--base) 72%, transparent) 0%, transparent 24%), linear-gradient(180deg, transparent 56%, var(--base) 96%), linear-gradient(90deg, color-mix(in srgb, var(--base) 90%, transparent) 0%, color-mix(in srgb, var(--base) 64%, transparent) 34%, color-mix(in srgb, var(--base) 24%, transparent) 58%, transparent 78%); /* Interior mastheads — the plate itself drops to .ph-media opacity .16 (watermark), so the veil only needs to protect the title column */ --ph-veil: linear-gradient(180deg, color-mix(in srgb, var(--base) 74%, transparent) 0%, transparent 30%), linear-gradient(180deg, transparent 58%, var(--base) 100%), linear-gradient(90deg, color-mix(in srgb, var(--base) 88%, transparent) 0%, color-mix(in srgb, var(--base) 62%, transparent) 38%, color-mix(in srgb, var(--base) 22%, transparent) 64%, transparent 86%); } /* ---------- 2. RESET ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--f-sans); background: var(--base); color: var(--ivory); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-feature-settings: 'kern' 1; transition: background-color var(--t-mid), color var(--t-mid); } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--jade-600); color: var(--paper); } :focus-visible { outline: 2px solid var(--jade-500); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--jade-600); color: var(--paper); padding: 12px 20px; } .skip:focus { left: 12px; top: 12px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. TEXTURE / GROUND ------------------------------------------ */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.032; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .aura { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px); } .aura-1 { top: -14vh; right: -6vw; width: 46vw; height: 46vw; background: radial-gradient(circle, var(--aura-1), transparent 68%); } .aura-2 { top: 52vh; left: -14vw; width: 40vw; height: 40vw; background: radial-gradient(circle, var(--aura-2), transparent 70%); } /* ---------- 4. TYPOGRAPHY ------------------------------------------------ */ .display, h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.014em; line-height: 1.1; text-wrap: balance; } :lang(zh) .display, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4 { letter-spacing: 0.002em; } .h-xl { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.04; } .h-lg { font-size: clamp(2rem, 3.9vw, 3.1rem); } .h-md { font-size: clamp(1.5rem, 2.5vw, 2.1rem); } .h-sm { font-size: clamp(1.18rem, 1.6vw, 1.4rem); line-height: 1.3; } .lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--dim); line-height: 1.72; max-width: 56ch; } .prose { max-width: var(--max-read); color: var(--dim); line-height: 1.82; } .prose p + p { margin-top: 1.1em; } .prose h2, .prose h3 { color: var(--ivory); margin: 2.1em 0 0.7em; } .prose h2 { font-size: 1.7rem; } .prose h3 { font-size: 1.3rem; } .prose strong { color: var(--ivory); font-weight: 600; } .prose ul { margin: 1.1em 0; } .prose ul li { position: relative; padding-left: 1.4em; margin-bottom: 0.5em; } .prose ul li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--brass-600); } .prose blockquote { margin: 1.8em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 1px solid var(--brass-600); font-family: var(--f-display); font-size: 1.22rem; color: var(--brass-ink); font-style: italic; line-height: 1.5; } /* Eyebrow — RATIONED. Max 1 per 3 sections. */ .eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-ink); display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--brass-600); flex: none; } .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .muted { color: var(--dim); } .faint { color: var(--faint); } .brass { color: var(--brass-ink); } .jade { color: var(--accent); } /* ---------- 5. LAYOUT --------------------------------------------------- */ .shell { position: relative; z-index: 1; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .wrap-narrow { max-width: 900px; } section { position: relative; } .band { padding-block: clamp(64px, 8.5vw, 128px); } .band-sm { padding-block: clamp(44px, 5.5vw, 76px); } .band-line { border-top: 1px solid var(--line); } .grid { display: grid; gap: clamp(18px, 2.4vw, 34px); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .g-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .g-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .row { display: flex; align-items: center; gap: 12px; } .row-wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .stack { display: flex; flex-direction: column; } .gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; } .rule { height: 1px; background: var(--line); border: 0; } .rule-brass { height: 1px; background: linear-gradient(90deg, var(--brass-600), transparent); border: 0; } @media (max-width: 900px) { .g3, .g4, .g-7-5, .g-5-7, .g-8-4 { grid-template-columns: minmax(0, 1fr); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .g2, .g4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- 6. GLASS MATERIAL ------------------------------------------- */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--r-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden; } /* Specular top edge — what makes it read as glass rather than a grey box */ .glass::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-spec), transparent); opacity: 0.75; } .glass-hover { transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid), box-shadow var(--t-mid); } .glass-hover:hover { transform: translateY(-3px); border-color: rgba(86, 192, 140, 0.34); box-shadow: var(--shadow-lift); } /* Honest fallback: no blur support, or user asks for less transparency */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface); } } @media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); } /* ---------- 7. NAVIGATION ---------------------------------------------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 72px; transition: background var(--t-mid), border-color var(--t-mid), height var(--t-mid); border-bottom: 1px solid transparent; } .topbar.stuck { height: 64px; background: var(--chrome-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); } .topbar-in { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 11px; flex: none; } .brand-mark { width: 30px; height: 30px; flex: none; } .brand-txt { display: flex; flex-direction: column; line-height: 1.08; } .brand-en { font-family: var(--f-display); font-size: 17px; letter-spacing: 0.05em; } .brand-zh { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: 0.28em; color: var(--brass-ink); text-transform: uppercase; } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: var(--r-btn); font-size: 13.5px; color: var(--dim); transition: color var(--t-fast), background var(--t-fast); white-space: nowrap; } .nav-link:hover, .nav-item[aria-expanded="true"] .nav-link { color: var(--ivory); background: var(--wash); } .nav-link.on { color: var(--ivory); } .nav-link.on::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1px; background: var(--brass-600); } .caret { width: 9px; height: 9px; opacity: 0.55; transition: transform var(--t-fast); } .nav-item[aria-expanded="true"] .caret { transform: rotate(180deg); } .mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 300px; padding: 10px; background: var(--pop-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--glass-brd); border-radius: var(--r-panel); box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-8px); transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid); } .nav-item[aria-expanded="true"] .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-link { display: block; padding: 10px 13px; border-radius: var(--r-btn); transition: background var(--t-fast); } .mega-link:hover { background: rgba(86, 192, 140, 0.11); } .mega-link b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ivory); } .mega-link span { display: block; font-size: 11.8px; color: var(--faint); margin-top: 2px; line-height: 1.5; } .nav-tail { display: flex; align-items: center; gap: 8px; flex: none; } /* Theme toggle — shows the moon in light, the sun in dark (i.e. the theme a click switches TO). Label and pressed state are synced by theme.js. */ .theme-btn { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--dim); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .theme-btn:hover { color: var(--ivory); border-color: var(--brass-600); background: var(--wash); } .theme-btn .ic-sun { display: none; } [data-theme="dark"] .theme-btn .ic-sun { display: block; } [data-theme="dark"] .theme-btn .ic-moon { display: none; } .lang { display: flex; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; } .lang a { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: var(--r-pill); color: var(--faint); transition: color var(--t-fast), background var(--t-fast); } .lang a.on { color: var(--void); background: var(--brass-300); font-weight: 600; } .lang a:not(.on):hover { color: var(--ivory); } .burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-btn); border: 1px solid var(--line); } .burger span { display: block; width: 17px; height: 1.5px; background: var(--ivory); position: relative; transition: transform var(--t-mid) var(--e-io); } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ivory); transition: transform var(--t-mid) var(--e-io), opacity var(--t-fast); } .burger span::before { top: -5.5px; } .burger span::after { top: 5.5px; } body.menu-open .burger span { transform: rotate(45deg); } body.menu-open .burger span::before { transform: rotate(-90deg) translateX(5.5px); } body.menu-open .burger span::after { opacity: 0; } .drawer { position: fixed; inset: 0; z-index: 88; background: var(--drawer-bg); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); padding: 96px var(--gut) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility var(--t-mid); } body.menu-open { overflow: hidden; } body.menu-open .drawer { opacity: 1; visibility: visible; } .drawer-grp { border-top: 1px solid var(--line); padding: 18px 0; } .drawer-grp > b { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-ink); } .drawer-grp a { display: block; font-family: var(--f-display); font-size: 1.32rem; padding: 9px 0; color: var(--ivory); } /* 1220 rather than 1080: with a persona item promoted into the nav the bar measured 1176px (zh) / 1228px (en) of content at 1100px and overflowed. */ @media (max-width: 1220px) { .nav { display: none; } .burger { display: flex; } .nav-tail { margin-left: auto; } } /* Below ~620px the brand plus both header buttons plus the burger measured 503px of content in a 375px bar. html{overflow-x:hidden} hid the overflow instead of resolving it, which pushed the burger off-screen entirely and made the mobile menu unreachable. Both buttons already appear in the drawer, so dropping them from the bar costs nothing. The theme toggle is not a .btn and stays — it is the only theme control on small screens. */ @media (max-width: 620px) { .topbar-in { gap: 12px; } .nav-tail .btn { display: none; } } @media (max-width: 400px) { .brand-zh { font-size: 8px; letter-spacing: 0.15em; } } /* ---------- 8. BUTTONS -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: var(--r-btn); font-size: 13.8px; font-weight: 500; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--t-fast) var(--e-out), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); } .btn:active { transform: scale(0.982) translateY(1px); } /* Primary = jade. Text is near-black for AA contrast on a light-ish jade. */ .btn-1 { background: var(--jade-500); color: var(--accent-ink); font-weight: 600; box-shadow: 0 6px 20px -10px var(--jade-glow); } .btn-1:hover { background: var(--jade-400); box-shadow: 0 10px 30px -10px var(--jade-glow); } .btn-2 { background: var(--well); color: var(--ivory); border: 1px solid var(--line); } .btn-2:hover { background: var(--wash-2); border-color: var(--brass-600); } .btn-ghost { color: var(--dim); padding: 12px 4px; } .btn-ghost:hover { color: var(--ivory); } .btn-sm { padding: 8px 15px; font-size: 12.5px; } .btn-lg { padding: 15px 30px; font-size: 15px; } .btn-full { width: 100%; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-danger { background: rgba(212, 106, 90, 0.14); color: var(--neg); border: 1px solid rgba(212, 106, 90, 0.32); } .btn-danger:hover { background: rgba(212, 106, 90, 0.22); } .arrow { transition: transform var(--t-mid) var(--e-out); } .btn:hover .arrow, .lnk:hover .arrow { transform: translateX(4px); } .lnk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--accent); border-bottom: 1px solid rgba(86, 192, 140, 0.28); padding-bottom: 2px; transition: border-color var(--t-fast), color var(--t-fast); } .lnk:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- 9. CHIPS / BADGES ------------------------------------------ */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 10.2px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); color: var(--dim); background: var(--well); white-space: nowrap; } .chip-jade { border-color: rgba(86,192,140,0.38); color: var(--accent); background: rgba(47,158,104,0.11); } .chip-brass { border-color: rgba(198,166,103,0.42); color: var(--brass-ink); background: rgba(198,166,103,0.09); } .chip-warn { border-color: rgba(217,165,68,0.4); color: var(--warn); background: rgba(217,165,68,0.1); } .chip-neg { border-color: rgba(212,106,90,0.4); color: var(--neg); background: rgba(212,106,90,0.1); } .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .dot-live { box-shadow: 0 0 0 0 currentColor; animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(86,192,140,0.55); } 70% { box-shadow: 0 0 0 7px rgba(86,192,140,0); } 100% { box-shadow: 0 0 0 0 rgba(86,192,140,0); } } @media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } } /* Filter pills */ .filters { display: flex; flex-wrap: wrap; gap: 7px; } .filter { padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12.4px; color: var(--dim); background: transparent; transition: all var(--t-fast); } .filter:hover { color: var(--ivory); border-color: var(--brass-600); } .filter.on { background: var(--jade-600); border-color: var(--jade-500); color: var(--paper); } /* ---------- 10. METRICS ------------------------------------------------ */ .metrics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; } .metric { background: var(--base); padding: clamp(20px, 2.6vw, 32px); position: relative; } .metric-v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.85rem, 3.1vw, 2.7rem); line-height: 1; color: var(--brass-fig); letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 2px; } .metric-v sup { font-size: 0.44em; color: var(--brass-ink); top: -0.75em; } .metric-k { font-size: 12.3px; color: var(--dim); margin-top: 11px; line-height: 1.5; } .metric-note { font-family: var(--f-mono); font-size: 9.6px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ghost); margin-top: 7px; } .m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* A figure is unreadable once its column is narrower than the figure. Drop to two columns early, and to one only where two no longer fit either. */ @media (max-width: 900px) { .m3, .m4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .m2, .m3, .m4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- 11. CARDS -------------------------------------------------- */ .card { padding: clamp(20px, 2.3vw, 30px); display: flex; flex-direction: column; } .card-idx { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--brass-ink); } .card-t { font-family: var(--f-display); font-size: 1.28rem; line-height: 1.26; margin-top: 14px; } .card-d { font-size: 13.7px; color: var(--dim); line-height: 1.72; margin-top: 11px; flex: 1; } .card-f { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } /* Editorial list row — used instead of a 3rd card grid */ .erow { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: start; padding: clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid var(--line); position: relative; transition: background var(--t-mid); } .erow:hover { background: linear-gradient(90deg, rgba(86,192,140,0.045), transparent 72%); } .erow-k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.15em; color: var(--brass-ink); padding-top: 6px; text-transform: uppercase; } .erow-t { font-family: var(--f-display); font-size: clamp(1.22rem, 1.85vw, 1.6rem); line-height: 1.24; } .erow-d { font-size: 13.7px; color: var(--dim); margin-top: 9px; line-height: 1.7; max-width: 62ch; } .erow-x { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; } @media (max-width: 760px) { .erow { grid-template-columns: minmax(0,1fr); gap: 10px; } .erow-x { align-items: flex-start; } } /* ---------- 12. FORMS ------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-size: 12.6px; color: var(--ivory); font-weight: 500; } .field > label .req { color: var(--accent); margin-left: 3px; } .help { font-size: 11.8px; color: var(--faint); line-height: 1.55; } .err { font-size: 11.8px; color: var(--neg); display: none; } .field.bad .err { display: block; } .field.bad .inp { border-color: var(--neg); } .inp { width: 100%; padding: 11px 14px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ivory); font-size: 14px; transition: border-color var(--t-fast), background var(--t-fast); } .inp::placeholder { color: var(--ghost); } .inp:focus { outline: none; border-color: var(--jade-500); background: rgba(47,158,104,0.07); box-shadow: 0 0 0 3px rgba(47,158,104,0.14); } textarea.inp { min-height: 122px; resize: vertical; line-height: 1.65; } select.inp { appearance: none; cursor: pointer; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A9AAA1' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } select.inp option { background: var(--surface); color: var(--ivory); } .check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 12.8px; color: var(--dim); line-height: 1.6; } .check input { appearance: none; width: 17px; height: 17px; flex: none; margin-top: 1px; border: 1px solid var(--line); border-radius: 4px; background: var(--well); cursor: pointer; transition: all var(--t-fast); position: relative; } .check input:checked { background: var(--jade-500); border-color: var(--jade-500); } .check input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); } .note { padding: 13px 16px; border-radius: var(--r-btn); font-size: 12.8px; line-height: 1.6; border: 1px solid var(--line); background: var(--well); color: var(--dim); } .note-ok { border-color: rgba(86,192,140,0.35); background: rgba(47,158,104,0.1); color: var(--accent); } .note-bad { border-color: rgba(212,106,90,0.35); background: rgba(212,106,90,0.1); color: var(--neg); } .note-warn{ border-color: rgba(217,165,68,0.32); background: rgba(217,165,68,0.09); color: var(--warn); } /* ---------- 13. TABLES ------------------------------------------------- */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-panel); } .tbl { min-width: 660px; font-size: 13.2px; } .tbl thead th { text-align: left; padding: 13px 16px; background: var(--well); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr { transition: background var(--t-fast); } .tbl tbody tr:hover { background: rgba(86,192,140,0.045); } .tbl td strong, .tbl td b { color: var(--ivory); font-weight: 500; } .tbl .num { color: var(--brass-ink); } /* ---------- 14. HERO (engraved-map backdrop, static flow) -------------- Full-bleed section in normal document flow — no pinning, no scrub. .hero-media carries the theme-scoped engraving (--hero-img, swapped in the dark token layer); .hero-veil is a base-colored gradient that keeps the left-hand copy at AA contrast and dissolves the plate into the page ground at the bottom edge. Entrance motion lives in app.js motion(): the media settles from scale 1.05 once the image has loaded. */ .hero { position: relative; overflow: hidden; padding-top: clamp(118px, 16vh, 162px); padding-bottom: clamp(64px, 8vw, 104px); } .hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--hero-img); background-size: cover; background-position: right center; transform-origin: 64% 42%; will-change: transform; } .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--hero-veil); } .hero-in { position: relative; z-index: 2; } .hero-copy { max-width: 660px; } .hero-h { font-size: clamp(2.5rem, 6.2vw, 5.2rem); line-height: 1.04; letter-spacing: -0.022em; } :lang(zh) .hero-h { letter-spacing: 0.002em; } .hero-h em { font-style: italic; color: var(--brass-fig); line-height: 1.12; padding-bottom: 2px; display: inline-block; } .hero-sub { font-size: clamp(0.98rem, 1.28vw, 1.14rem); color: var(--dim); line-height: 1.74; max-width: 50ch; margin-top: 24px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero-note { font-size: 11.8px; max-width: 46ch; line-height: 1.6; color: var(--faint); margin-top: 26px; } /* Portfolio deck — frosted glass over the engraving */ .hero-deck { margin-top: clamp(52px, 7.5vh, 88px); } .hero-deck-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .hero-deck-t { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink); } .hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); } .hero-card { position: relative; display: block; overflow: hidden; border: 1px solid var(--glass-brd); border-radius: var(--r-panel); background: color-mix(in srgb, var(--surface) 58%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 22px 48px -26px rgba(20, 38, 29, 0.26), 0 2px 10px -5px rgba(20, 38, 29, 0.1); padding: clamp(17px, 1.9vw, 24px); transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid), box-shadow var(--t-mid); } .hero-card::before { /* specular top edge, same trick as .glass */ content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-spec), transparent); opacity: 0.7; } .hero-card:hover { transform: translateY(-3px); border-color: rgba(86, 192, 140, 0.34); box-shadow: var(--shadow-lift); } .hero-card-idx { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--brass-ink); } .hero-card-t { font-size: clamp(1.05rem, 1.35vw, 1.24rem); color: var(--ivory); margin-top: 14px; line-height: 1.32; } .hero-card-d { font-family: var(--f-mono); font-size: 9.8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 10px; line-height: 1.7; } .hero-card-f { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .hero-card-f .num { font-size: 13px; color: var(--brass-ink); } .hero-card-a { color: var(--faint); display: inline-flex; transition: color var(--t-fast), transform var(--t-fast); } .hero-card:hover .hero-card-a { color: var(--accent); transform: translateX(3px); } .hero-deck-f { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: 11.6px; color: var(--faint); } .hero-deck-f .lnk { font-size: 12px; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-card { background: var(--surface); } } @media (max-width: 900px) { .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .hero { padding-top: 108px; } .hero-media { background-position: 74% 26%; } /* copy spans the full width here, so the horizontal-only veil no longer protects it — swap in a full-width vertical wash, still base-colored (lightens only); the plate keeps showing through below the fold line */ .hero-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--base) 82%, transparent) 0%, transparent 22%), linear-gradient(180deg, transparent 52%, var(--base) 97%), linear-gradient(180deg, color-mix(in srgb, var(--base) 88%, transparent) 0%, color-mix(in srgb, var(--base) 78%, transparent) 30%, color-mix(in srgb, var(--base) 62%, transparent) 52%, color-mix(in srgb, var(--base) 30%, transparent) 74%, transparent 94%); } .hero-copy { max-width: none; } .hero-h { font-size: clamp(2.15rem, 9.2vw, 2.9rem); } .hero-cards { grid-template-columns: minmax(0, 1fr); } .hero-deck-f { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ---------- 14b. PARTNER WALL ------------------------------------------ Two counter-scrolling marquee rows, pure CSS. The second .pmq-set is an aria-hidden duplicate that makes the -50% loop seamless; under prefers-reduced-motion it is dropped and the row becomes a static wrapped grid. Logos ride the paper via mix-blend-mode: multiply (their white boxes disappear); the dark theme gives each a small ivory tile instead. */ .pmq-wrap { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); } .pmq { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .pmq-t { display: flex; width: max-content; animation: pmq-run 52s linear infinite; } .pmq-rev .pmq-t { animation: pmq-run 60s linear infinite reverse; } .pmq:hover .pmq-t { animation-play-state: paused; } .pmq-set { display: flex; align-items: center; gap: clamp(38px, 4.6vw, 68px); padding-right: clamp(38px, 4.6vw, 68px); } @keyframes pmq-run { to { transform: translateX(-50%); } } .plogo { flex: none; display: flex; align-items: center; } .plogo img { height: 34px; width: auto; max-width: 152px; object-fit: contain; filter: grayscale(1); opacity: 0.68; mix-blend-mode: multiply; transition: filter var(--t-mid), opacity var(--t-mid); } .plogo img:hover { filter: none; opacity: 1; } [data-theme="dark"] .plogo { background: rgba(244, 242, 236, 0.94); border-radius: 8px; padding: 8px 13px; } [data-theme="dark"] .plogo img { mix-blend-mode: normal; height: 24px; } @media (prefers-reduced-motion: reduce) { .pmq { overflow: visible; mask-image: none; -webkit-mask-image: none; } .pmq-t { animation: none; width: auto; } .pmq-set { flex-wrap: wrap; justify-content: center; padding-right: 0; } .pmq-set[aria-hidden] { display: none; } } /* ---------- 14c. PAGE-HEAD ENGRAVING (interior mastheads) --------------- The home hero's visual family at masthead scale: same div-backdrop + base-colored veil construction (§14), but the section keeps its normal band-sm rhythm — this is a page head, not a hero. The plate hugs the right edge; --ph-veil (tokenized per theme next to --hero-veil) keeps the title column at AA and dissolves the plate into the page ground. The dark theme drops the plate to a watermark instead of swapping art. Entrance motion: app.js motion() settles .ph-media from scale 1.05, same tween as .hero-media. */ .has-ph-media { position: relative; overflow: hidden; } .ph-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: right center; transform-origin: 68% 40%; will-change: transform; } .ph-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ph-veil); } .has-ph-media > .wrap { position: relative; z-index: 2; } [data-theme="dark"] .ph-media { opacity: 0.16; } @media (max-width: 767px) { /* copy runs the full width — same fix as the mobile hero: a vertical base-colored wash replaces the horizontal-only veil */ .ph-media { background-position: 72% 28%; } .ph-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--base) 82%, transparent) 0%, transparent 24%), linear-gradient(180deg, transparent 56%, var(--base) 99%), linear-gradient(180deg, color-mix(in srgb, var(--base) 88%, transparent) 0%, color-mix(in srgb, var(--base) 62%, transparent) 46%, color-mix(in srgb, var(--base) 26%, transparent) 76%, transparent 96%); } } /* Hero side instrument — live deal-flow board, glass */ .board { padding: 22px; } .board-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .board-t { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink); } .board-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); } .board-row:last-child { border-bottom: 0; } .board-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .board-l b { font-size: 12.8px; font-weight: 500; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-l span { font-family: var(--f-mono); font-size: 9.8px; letter-spacing: 0.11em; color: var(--faint); text-transform: uppercase; } .board-r { font-family: var(--f-mono); font-size: 13px; color: var(--brass-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- 15. SIGNAL DESK (automated advisory) ---------------------- */ .sig { padding: 0; overflow: hidden; } .sig-h { display: flex; align-items: center; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--line); background: rgba(86,192,140,0.05); flex-wrap: wrap; } .sig-h .board-t { flex: 1; min-width: 140px; } .sig-item { padding: 19px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 15px; } .sig-item:last-child { border-bottom: 0; } .sig-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid; } .sig-ic svg { width: 15px; height: 15px; } .sig-act { color: var(--neg); border-color: rgba(212,106,90,0.34); background: rgba(212,106,90,0.1); } .sig-watch{ color: var(--warn); border-color: rgba(217,165,68,0.34); background: rgba(217,165,68,0.09); } .sig-opp { color: var(--accent); border-color: rgba(86,192,140,0.34); background: rgba(47,158,104,0.1); } .sig-t { font-size: 13.8px; font-weight: 500; color: var(--ivory); line-height: 1.45; } .sig-d { font-size: 12.6px; color: var(--dim); line-height: 1.68; margin-top: 6px; } .sig-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .sig-ev span { font-family: var(--f-mono); font-size: 9.8px; letter-spacing: 0.07em; padding: 3px 8px; border-radius: 4px; background: var(--well); border: 1px solid var(--line); color: var(--brass-ink); } .sig-do { font-size: 12.3px; color: var(--accent); margin-top: 11px; display: flex; gap: 7px; align-items: baseline; } .sig-do::before { content: '→'; flex: none; opacity: 0.7; } /* ---------- 16. TIMELINE / MILESTONES -------------------------------- */ .tl { position: relative; padding-left: 28px; } .tl::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--brass-600), var(--line) 72%, transparent); } .tl-i { position: relative; padding-bottom: 30px; } .tl-i:last-child { padding-bottom: 0; } .tl-i::before { content: ''; position: absolute; left: -28px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--base); border: 1px solid var(--brass-400); } .tl-i.on::before { background: var(--jade-500); border-color: var(--jade-400); box-shadow: 0 0 0 4px rgba(47,158,104,0.16); } .tl-y { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--brass-ink); } .tl-t { font-family: var(--f-display); font-size: 1.14rem; margin-top: 5px; } .tl-d { font-size: 13.2px; color: var(--dim); margin-top: 6px; line-height: 1.68; max-width: 58ch; } /* ---------- 17. PEOPLE ------------------------------------------------ */ .who { padding: 0; overflow: hidden; cursor: pointer; text-align: left; width: 100%; display: block; } .who-img { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--raised); } .who-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter 620ms var(--e-out), transform 720ms var(--e-out); } .who:hover .who-img img { filter: grayscale(0.3) contrast(1); transform: scale(1.035); } .who-img::after { content: ''; position: absolute; inset: 0; background: var(--img-fade); } .who-b { padding: 17px 19px 20px; } .who-n { font-family: var(--f-display); font-size: 1.14rem; line-height: 1.22; } .who-r { font-size: 11.8px; color: var(--brass-ink); margin-top: 5px; line-height: 1.45; } .who-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; } .who-tags span { font-family: var(--f-mono); font-size: 9.4px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); padding: 3px 7px; border-radius: var(--r-pill); } /* Modal */ .modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: var(--gut); } .modal.open { display: flex; } .modal-bg { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .modal-box { position: relative; z-index: 2; width: 100%; max-width: 760px; max-height: 86vh; overflow-y: auto; background: var(--dialog-bg); border: 1px solid var(--glass-brd); border-radius: var(--r-panel); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow-lift); padding: clamp(24px, 3.4vw, 42px); } .modal-x { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--dim); transition: all var(--t-fast); } .modal-x:hover { color: var(--ivory); border-color: var(--brass-600); background: var(--wash); } /* ---------- 18. JURISDICTION MAP ------------------------------------- */ .jmap { position: relative; } .jmap svg { width: 100%; height: auto; } .jdot { cursor: pointer; transition: r 220ms var(--e-out), opacity 220ms; } .jmap-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; } .jleg { display: flex; align-items: center; gap: 7px; font-size: 11.8px; color: var(--dim); } .jleg i { width: 8px; height: 8px; border-radius: 50%; display: block; } .jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; } .jcell { background: var(--base); padding: 16px 17px; transition: background var(--t-fast); } .jcell:hover { background: var(--raised); } .jcell b { font-size: 13.2px; font-weight: 500; display: block; } .jcell span { font-family: var(--f-mono); font-size: 9.6px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); display: block; margin-top: 5px; } .jcell .bar { height: 2px; background: var(--line); margin-top: 11px; border-radius: 2px; overflow: hidden; } .jcell .bar i { display: block; height: 100%; background: var(--jade-500); border-radius: 2px; } /* ---------- 19. DASHBOARD / ADMIN ----------------------------------- */ .app { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100dvh; } .side { border-right: 1px solid var(--line); padding: 96px 0 32px; background: var(--side-bg); } .side-grp { padding: 0 14px 20px; } .side-grp > b { font-family: var(--f-mono); font-size: 9.6px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ghost); padding: 0 12px; display: block; margin-bottom: 8px; } .side-l { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-btn); font-size: 13.2px; color: var(--dim); transition: all var(--t-fast); } .side-l:hover { background: var(--wash); color: var(--ivory); } .side-l.on { background: rgba(47,158,104,0.13); color: var(--accent); } .side-l svg { width: 15px; height: 15px; flex: none; opacity: 0.8; } .side-l .cnt { margin-left: auto; font-family: var(--f-mono); font-size: 10px; background: var(--raised); padding: 2px 7px; border-radius: var(--r-pill); color: var(--brass-ink); } .main { padding: 96px var(--gut) 64px; min-width: 0; } @media (max-width: 940px) { .app { grid-template-columns: minmax(0,1fr); } .side { display: none; } .main { padding-top: 88px; } } .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 14px; } .kpi-c { padding: 18px 19px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); } .kpi-k { font-family: var(--f-mono); font-size: 9.6px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); } .kpi-v { font-family: var(--f-mono); font-size: 1.72rem; color: var(--brass-fig); margin-top: 9px; line-height: 1; font-variant-numeric: tabular-nums; } .kpi-t { font-size: 11.6px; margin-top: 8px; display: flex; align-items: center; gap: 5px; } .up { color: var(--pos); } .down { color: var(--neg); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; } .tab { padding: 11px 17px; font-size: 13.2px; color: var(--dim); border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--t-fast); } .tab:hover { color: var(--ivory); } .tab.on { color: var(--accent); border-bottom-color: var(--jade-500); } /* ---------- 20. FOOTER --------------------------------------------- */ .foot { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 76px); padding-bottom: 32px; background: var(--foot-bg); } .foot-top { display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2fr)); gap: clamp(24px, 3.4vw, 48px); } .foot h5 { font-family: var(--f-mono); font-size: 9.8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 15px; font-weight: 500; } .foot-l { display: block; font-size: 13.2px; color: var(--dim); padding: 5px 0; transition: color var(--t-fast); } .foot-l:hover { color: var(--ivory); } .foot-bot { margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 11.8px; color: var(--faint); } /* Legal disclaimer: small text that MUST stay readable — uses --faint (≥4.5:1 on both grounds), never --ghost. */ .disc { font-size: 11.2px; color: var(--faint); line-height: 1.65; max-width: 92ch; margin-top: 18px; } @media (max-width: 860px) { .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px) { .foot-top { grid-template-columns: minmax(0,1fr); } } /* ---------- 21. MOTION STATES (anime.js targets) ------------------ */ [data-rise] { opacity: 0; will-change: transform, opacity; } [data-split] .ln { display: block; overflow: hidden; } [data-split] .ln > span { display: block; } .no-js [data-rise] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Marquee */ .mq { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .mq-t { display: flex; gap: 52px; width: max-content; align-items: center; } .mq-t > span { font-family: var(--f-display); font-size: 1.02rem; color: var(--faint); white-space: nowrap; letter-spacing: 0.03em; } .mq-t > i { width: 4px; height: 4px; border-radius: 50%; background: var(--brass-600); flex: none; } /* Toast */ .toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 360px; } .toast { padding: 14px 17px; border-radius: var(--r-btn); font-size: 13px; display: flex; gap: 11px; align-items: flex-start; background: var(--dialog-bg); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-lift); } .toast.ok { border-color: rgba(86,192,140,0.4); } .toast.bad { border-color: rgba(212,106,90,0.4); } @media (max-width: 520px) { .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; } } /* Utilities */ .hide { display: none !important; } .cx { display: flex; align-items: center; justify-content: center; } .tc { text-align: center; } .nowrap { white-space: nowrap; } .pt-nav { padding-top: 104px; } .rel { position: relative; } .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }