1 2<!doctype html> 3<html lang="zh-Hant-HK"> 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1"> 7 8<title>å¸å ´ï½ç°çææ¸ãè¡ç¥¨ãåååå¯çï½ä¸å財ç¶å±æ</title> 9<meta name="description" content="ä¸å財ç¶å±æ å¸å ´æ¸æï¼ç°çè¡å¸ææ¸ã主è¦è¡ä»½ãéå¹åæ²¹å¹ãæ¯æ¥è²¨å¹£åèå¯çã"> 10<meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1"> 11<meta name="googlebot" content="index,follow"> 12<link rel="canonical" href="https://cnfol.hk/å¸å ´/"> 13<meta name="theme-color" content="#0d5064"> 14 15<!-- Open Graph --> 16<meta property="og:site_name" content="ä¸å財ç¶å±æ"> 17<meta property="og:type" content="website"> 18<meta property="og:locale" content="zh_Hant_HK"> 19<meta property="og:title" content="å¸å ´ï½ç°çææ¸ãè¡ç¥¨ãåååå¯çï½ä¸å財ç¶å±æ"> 20<meta property="og:description" content="ä¸å財ç¶å±æ å¸å ´æ¸æï¼ç°çè¡å¸ææ¸ã主è¦è¡ä»½ãéå¹åæ²¹å¹ãæ¯æ¥è²¨å¹£åèå¯çã"> 21<meta property="og:url" content="https://cnfol.hk/å¸å ´/"> 22<meta property="og:image" content="https://cnfol.hk/static/img/brand/cnfol/og-default.png"> 23<meta property="og:image:width" content="1200"> 24<meta property="og:image:height" content="630"> 25<meta property="og:image:alt" content="ä¸å財ç¶å±æ"> 26 27<meta name="twitter:card" content="summary_large_image"> 28 29<meta name="twitter:title" content="å¸å ´ï½ç°çææ¸ãè¡ç¥¨ãåååå¯çï½ä¸å財ç¶å±æ"> 30<meta name="twitter:description" content="ä¸å財ç¶å±æ å¸å ´æ¸æï¼ç°çè¡å¸ææ¸ã主è¦è¡ä»½ãéå¹åæ²¹å¹ãæ¯æ¥è²¨å¹£åèå¯çã"> 31 32<link rel="alternate" type="application/rss+xml" title="ä¸å財ç¶å±æ æ°èè¨é±" href="/feed.xml"> 33<link rel="alternate" hreflang="zh-Hant-HK" href="https://cnfol.hk/"> 34<link rel="alternate" hreflang="x-default" href="https://cnfol.hk/"> 35 36 37 38<link rel="icon" href="/static/img/brand/cnfol/favicon.ico" sizes="any"> 39<link rel="icon" type="image/png" sizes="32x32" href="/static/img/brand/cnfol/favicon-32.png"> 40<link rel="icon" type="image/png" sizes="16x16" href="/static/img/brand/cnfol/favicon-16.png"> 41<link rel="apple-touch-icon" href="/static/img/brand/cnfol/apple-touch-icon.png"> 42<link rel="manifest" href="/site.webmanifest"> 43 44 45<link rel="preconnect" href="https://fonts.googleapis.com"> 46<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 47 48<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap"> 49<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap" media="print" onload="this.media='all'"> 50<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap"></noscript> 51 52<!-- Site-wide Schema.org: WebSite + NewsMediaOrganization -->
53<script type="application/ld+json"> 54{ 55 "@context": "https://schema.org", 56 "@graph": [ 57 { 58 "@type": "WebSite", 59 "@id": "https://cnfol.hk/#website", 60 "url": "https://cnfol.hk/", 61 "name": "\u4e2d\u570b\u8ca1\u7d93\u5c55\u671b", 62 "alternateName": "China Financial Outlook", 63 "description": "\u4e2d\u570b\u8ca1\u7d93\u5c55\u671b CNFOL.hk\uff1a\u9999\u6e2f\u4e2d\u6587\u8ca1\u7d93\u65b0\u805e\u7db2\uff0c\u5831\u9053\u6e2f\u80a1\u3001\u4e0a\u5e02\u516c\u53f8\u696d\u7e3e\u53ca\u5e74\u5831\u3001\u6a13\u5e02\u6210\u4ea4\u3001\u532f\u5e02\u8d70\u52e2\uff0c\u6db5\u84cb\u8981\u805e\u3001\u8ca1\u7d93\u3001\u5730\u7522\u3001\u7522\u7d93\u53ca\u74b0\u7403\u5e02\u5834\u3002", 64 "inLanguage": "zh-Hant-HK", 65 "publisher": { "@id": "https://cnfol.hk/#org" }, 66 "potentialAction": { 67 "@type": "SearchAction", 68 "target": { 69 "@type": "EntryPoint", 70 "urlTemplate": "https://cnfol.hk/%E6%90%9C%E5%B0%8B?q={search_term_string}" 71 }, 72 "query-input": "required name=search_term_string" 73 } 74 }, 75 { 76 "@type": "NewsMediaOrganization", 77 "@id": "https://cnfol.hk/#org", 78 "name": "\u4e2d\u570b\u8ca1\u7d93\u5c55\u671b", 79 "alternateName": "China Financial Outlook", 80 "url": "https://cnfol.hk/", 81 "foundingDate": "2026", 82 "knowsAbout": ["\u8981\u805e", "\u8ca1\u7d93", "\u5730\u7522", "\u7522\u7d93", "\u74b0\u7403"], 83 "diversityPolicy": "https://cnfol.hk/%E7%B7%A8%E8%BC%AF%E6%96%B9%E9%87%9D", 84 "ethicsPolicy": "https://cnfol.hk/%E7%B7%A8%E8%BC%AF%E6%96%B9%E9%87%9D", 85 "correctionsPolicy":"https://cnfol.hk/%E6%9B%B4%E6%AD%A3%E6%94%BF%E7%AD%96", 86 "missionCoveragePrioritiesPolicy": "https://cnfol.hk/%E9%97%9C%E6%96%BC%E6%88%91%E5%80%91", 87 "verificationFactCheckingPolicy": "https://cnfol.hk/%E7%B7%A8%E8%BC%AF%E6%96%B9%E9%87%9D" 88 } 89 ] 90} 91</script>
91 92 93
94<script type="application/ld+json"> 95{ 96 "@context": "https://schema.org", 97 "@type": "WebPage", 98 "name": "å¸å ´æ¸æ", 99 "description": "ç°çè¡å¸ææ¸ã主è¦è¡ä»½ãååå貨幣å¯çå³æå ±å¹ã", 100 "url": "https://cnfol.hk/%E5%B8%82%E5%A0%B4/", 101 "inLanguage": "zh-Hant-HK", 102 "isPartOf": {"@id": "https://cnfol.hk/#website"}, 103 "publisher": {"@id": "https://cnfol.hk/#org"}, 104 "disclaimer": "æ¬é æ¸æå ä¾åèï¼ä¸¦ä¸æ§ææè³å»ºè°ã" 105} 106</script>
vendor: 1 bytes, line 106
106
107<script type="application/ld+json"> 108{ 109 "@context": "https://schema.org", 110 "@type": "BreadcrumbList", 111 "itemListElement": [ 112 {"@type":"ListItem","position":1,"name":"主é ","item":"https://cnfol.hk/"}, 113 {"@type":"ListItem","position":2,"name":"å¸å ´","item":"https://cnfol.hk/%E5%B8%82%E5%A0%B4/"} 114 ] 115} 116</script>
116 117<style> 118 .tag-sample { 119 display:inline-block; background:var(--n10); color:var(--muted); 120 font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; 121 padding:1px 5px; margin-left:5px; vertical-align:1px; border:1px solid var(--rule); 122 } 123 tr.is-sample td { color:var(--muted); } 124 tr.is-sample td.nm { color:var(--ink); } 125 .sample-banner { 126 border:1px solid var(--amber); border-left:4px solid var(--amber); 127 background:#fffdf3; padding:12px 16px; margin:0 0 22px; 128 font-family:var(--sans); font-size:13.5px; color:var(--ink); max-width:80ch; 129 } 130 .sample-banner strong { font-weight:600; } 131 .proxy-note { 132 border-left:3px solid var(--rule-strong); padding:10px 14px; margin:0 0 22px; 133 font-family:var(--sans); font-size:13px; color:var(--muted); max-width:80ch; 134 } 135 .proxy-note strong { font-weight:600; color:var(--ink); } 136 137 /* Same two-column shape as .article-wrap, and it has to collapse at the 138 same breakpoint. This was inline on the div, so it never collapsed: a 139 320px rail plus a 44px gap needs 364px before the content column gets 140 anything, and a 390px phone only offers 350px inside .container. The 141 content column was being squeezed to a sliver and the overflow went 142 under body's overflow-x:hidden. */ 143 .mkt-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; } 144 @media (max-width:900px) { 145 .mkt-grid { grid-template-columns:minmax(0,1fr); gap:0; } 146 .mkt-grid > aside.rail { margin-top:34px; } 147 } 148 149 /* The intraday range is the widest cell on the page ("39,142.50â39,880.25") 150 and the least load-bearing. Dropping it leaves price/change/% legible at 151 phone widths instead of wrapping every row to three lines. */ 152 @media (max-width:620px) { 153 table.quotes th.rng, table.quotes td.rng { display:none; } 154 table.quotes { font-size:13px; } 155 table.quotes td.nm { padding-right:10px; } 156 } 157</style> 158 159<style> 160 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 161 ä¸å財ç¶å±æ CNFOL.hk 162 163 A markets paper, not a general news site. Three things follow from that 164 and drive every rule below. 165 166 1. FIGURES ARE CONTENT. An index level, a percentage move and a stock 167 code are read, compared and scanned â not decoration. Everything 168 numeric is tabular-nums so columns line up and a price that ticks 169 does not shift the row, and gains/falls are coloured the way a Hong 170 Kong reader expects: RED UP, GREEN DOWN. That is the opposite of 171 the western convention, and getting it backwards on a Chinese 172 finance page is a factual error, not a style choice. 173 174 2. THE MASTHEAD IS A NAMEPLATE. ä¸å財ç¶å±æ is set in the device's Ming 175 face at nameplate size against a rule, the way a Chinese daily 176 prints its title â not as a logo mark beside a wordmark. 177 178 3. DENSITY. A business reader wants more stories above the fold, not 179 bigger cards. Hairlines, no shadows, no radii, no hover lift. 180 181 TOKEN CONTRACT. The variable names below (--sans, --rule, --muted, 182 --blue â¦) are the same ones templates/news/* write into inline styles, 183 because those page templates are shared between both mastheads. The 184 NAMES are the contract; the VALUES are what makes this a different 185 paper. --blue is not blue here â it is the house teal â and renaming it 186 would mean forking every shared template to say --brand instead. 187 --red keeps its name for the same reason: shared templates write it, and 188 on this masthead it carries the teal. 189 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 190 :root { 191 --red:#0d5064; /* nameplate, section bar, rules */ 192 --red-dark:#07323f; 193 --blue:#0d5064; /* "the brand colour" â see above */ 194 --blue-dark:#07323f; 195 --navy:#07323f; 196 --amber:#b8862b; /* section chips â gold */ 197 --ink:#16181d; /* headlines and body */ 198 --muted:#5f6470; /* bylines, timestamps, meta */ 199 --faint:#8f94a0; 200 /* A shade warmer and pinker than 馿¸¯è²¡åæ¥å ±'s #fbfaf7. The two papers 201 sit side by side in a reader's tabs and the ground is the first thing 202 that tells them apart before a word is read. */ 203 --paper:#fdf7f0; 204 --n05:#f7f1e9; 205 --n10:#efe8dd; 206 --rule:#ded5c8; /* hairline */ 207 --rule-strong:#16181d; /* section-top rule */ 208 /* Hong Kong convention: ç´ åç¶ è·. */ 209 --up:#c2181f; /* gaining */ 210 --down:#0b7a4b; /* falling */ 211 212 --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 213 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 214 'Heiti TC', sans-serif; 215 /* Headlines and reading copy. The CJK names are what actually renders 216 the Chinese; Source Serif only ever styles the latin runs inside it. */ 217 --serif:'Source Serif 4', Georgia, 'Times New Roman', 218 'Songti TC', 'Noto Serif TC', 'Source Han Serif TC', 'MS Mincho', 219 'SimSun', 'PingFang HK', serif; 220 --wrap:1240px; 221 } 222 223 *,*::before,*::after { box-sizing:border-box; } 224 html,body { margin:0; padding:0; max-width:100%; overflow-x:hidden; } 225 body { 226 font-family:var(--serif); background:var(--paper); color:var(--ink); 227 font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; 228 } 229 a { color:var(--navy); text-decoration:none; } 230 a:hover { text-decoration:underline; } 231 /* height:auto pairs with the width/height attributes story_image emits: 232 they reserve the box against layout shift, this stops the declared 233 height also forcing that pixel height on a narrow screen. */ 234 img { max-width:100%; height:auto; } 235 .container { max-width:var(--wrap); margin:0 auto; padding:0 20px; } 236 main { padding:22px 0 46px; } 237 238 /* Every figure on the site. Declared once, on the elements that carry 239 numbers, rather than per-table. */ 240 .num, .tickerbar, table.quotes td, table.quotes th, 241 .dateline, .mkt-chip { font-variant-numeric:tabular-nums; } 242 243 /* âââ Dateline strip âââââââââââââââââââââââââââââââââââââââââââââââââ 244 A printed paper puts the date and edition above the nameplate. Here it 245 also carries the one number a business reader checks first. */ 246 .dateline { 247 background:var(--ink); color:#d7d3c9; 248 font-family:var(--sans); font-size:12px; letter-spacing:.02em; 249 } 250 .dateline .container { 251 display:flex; align-items:center; justify-content:space-between; 252 gap:14px; height:32px; 253 } 254 .dateline .est { color:var(--faint); } 255 .dateline .mkt-chip { display:flex; align-items:center; gap:8px; color:#fff; } 256 .dateline .mkt-chip b { font-weight:600; } 257 .dateline a { color:#d7d3c9; } 258 @media (max-width:640px) { .dateline .est { display:none; } } 259 /* THE WHOLE STRIP GOES ON A PHONE, not just åµåæ¼. 260 It costs a full row above the fold to print two things, and on a narrow 261 screen neither earns it. The æçææ¸ chip is the first item in the è¡æ 262 ticker sitting directly beneath it â the same index, the same price, the 263 same percentage, twice within 80px â and the date is the least urgent 264 thing on a news front page. Removing the strip is what takes the header 265 above the ticker from two lines to one; merging its contents into the 266 nameplate row would have kept the second line's worth of clutter and only 267 moved it. Desktop keeps the strip, where the row is free. */ 268 @media (max-width:820px) { .dateline { display:none; } } 269 /* AND THE SECTION BAR, so the header above the ticker is ONE line. 270 Merging it into the nameplate row instead was measured and rejected: at 271 390px the hamburger, CNFOL.hk and ä¸å財ç¶å±æ take 245 of 350 usable 272 pixels, leaving 105px for six sections â 18px each, which is not a 273 navigation bar, it is six clipped characters. 274 Nothing is lost by removing it. The â° drawer's çé¢ list is generated from 275 the same all_categories loop this bar is, so every section it showed is one 276 tap away and marked 'cur' the same way. Desktop keeps the bar, where there 277 is room to show the sections rather than hide them. */ 278 @media (max-width:820px) { nav.secbar { display:none; } } 279 280 /* âââ Nameplate ââââââââââââââââââââââââââââââââââââââââââââââââââââââ
281 Three fields on one row: nameplate, latin strapline, utilities. The 282 nameplate is Han set at size against a red baseline rule, which is how 283 a Chinese daily prints its title â not a mark plus a wordmark. */ 284 header.mast { background:#fff; border-bottom:3px solid var(--red); } 285 header.mast .container { 286 display:flex; align-items:flex-end; gap:22px; padding-top:18px; 287 padding-bottom:12px; 288 } 289 header.mast .brand { display:block; flex-shrink:0; } 290 header.mast .brand:hover { text-decoration:none; } 291 /* The mark is LATIN here, not Han â CNFOL.hk is the name a reader sees 292 first â so it is set tighter than a Chinese nameplate would be, and the 293 domain suffix drops to a lighter weight and a muted colour so the eye 294 reads CNFOL as the word and .hk as the address. Same construction as 295 METROHK's wordmark; the other Hong Kong paper has no suffix at all. */ 296 header.mast .nameplate { 297 display:block; font-family:var(--serif); font-weight:700; 298 font-size:42px; line-height:1; letter-spacing:.01em; 299 color:var(--red); 300 } 301 header.mast .nameplate em { 302 font-style:normal; font-weight:400; color:var(--muted); 303 } 304 /* The masthead's Chinese name, under the Latin mark. This slot held a 305 latin strapline on the paper this theme was derived from, so it was 306 uppercased and tracked out at .22em â both wrong for Han, which has no 307 case and needs far less tracking before it stops reading as a word. */ 308 header.mast .latin { 309 display:block; margin-top:8px; font-family:var(--serif); 310 font-size:15px; font-weight:600; letter-spacing:.14em; 311 color:var(--ink); 312 } 313 header.mast .strap { 314 flex:1; min-width:0; padding-bottom:4px; 315 border-left:1px solid var(--rule); padding-left:22px; 316 font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.6; 317 } 318 header.mast .strap b { 319 display:block; font-size:14.5px; font-weight:600; color:var(--ink); 320 letter-spacing:.14em; 321 } 322 header.mast .util { 323 display:flex; align-items:center; gap:12px; flex-shrink:0; padding-bottom:4px; 324 } 325 header.mast form.search { display:flex; } 326 header.mast form.search input { 327 font-family:var(--sans); font-size:13px; width:158px; padding:7px 10px; 328 border:1px solid var(--rule); background:#fff; color:var(--ink); outline:none; 329 } 330 header.mast form.search input:focus { border-color:var(--red); } 331 header.mast form.search input::placeholder { color:var(--faint); } 332 header.mast form.search button { 333 font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; 334 text-transform:uppercase; padding:7px 13px; border:0; 335 background:var(--red); color:#fff; cursor:pointer; 336 } 337 header.mast form.search button:hover { background:var(--red-dark); } 338 339 /* âââ Section bar ââââââââââââââââââââââââââââââââââââââââââââââââââââ 340 The sections, in the paper's own order, on a solid red band. Han is not 341 tracked out: text-transform does nothing to it and .12em letter-spacing 342 turns è¦è into two loose characters instead of one word. */ 343 nav.secbar { background:var(--red); } 344 nav.secbar .container { 345 display:flex; align-items:stretch; gap:0; overflow-x:auto; 346 scrollbar-width:none; 347 } 348 nav.secbar .container::-webkit-scrollbar { display:none; } 349 nav.secbar a { 350 font-family:var(--serif); font-size:17px; font-weight:600; 351 letter-spacing:.06em; color:#fff; white-space:nowrap; 352 padding:11px 18px; border-right:1px solid rgba(255,255,255,.22); 353 } 354 nav.secbar a:first-child { padding-left:0; } 355 nav.secbar a:hover { background:var(--red-dark); text-decoration:none; } 356 nav.secbar a.cur { background:var(--ink); } 357 nav.secbar .aux { 358 margin-left:auto; font-family:var(--sans); font-size:13px; font-weight:400; 359 letter-spacing:0; display:flex; align-items:center; border-right:0; 360 } 361 362 /* âââ Market ticker ââââââââââââââââââââââââââââââââââââââââââââââââââ 363 A finance paper's one sitewide module, and the only one that earns its 364 row. It SCROLLS: the board is now indices, currencies and crypto â more 365 than fits any screen â so a static rail would simply hide everything past 366 the fourth item. 367 368 Duplicated once in the markup so translateX(-50%) loops seamlessly. 369 Hovering pauses it, because a reader who has found the number they want 370 should not have to chase it, and prefers-reduced-motion turns it into a 371 plain scrollable rail rather than removing the content. */ 372 .tickerbar { 373 background:#fff; border-bottom:1px solid var(--rule); 374 border-top:1px solid var(--rule); 375 } 376 .tickerbar .inner { display:flex; align-items:stretch; height:40px; } 377 .tickerbar .tlabel { 378 font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em; 379 text-transform:uppercase; background:var(--ink); color:#fff; 380 padding:0 13px; display:flex; align-items:center; flex-shrink:0; 381 white-space:nowrap; 382 } 383 .tickerbar .tlabel:hover { text-decoration:none; } 384 .tickerbar .track { flex:1; overflow:hidden; position:relative; } 385 .tickerbar .rail { 386 display:flex; width:max-content; 387 animation:cnfol-ticker 90s linear infinite; 388 } 389 .tickerbar:hover .rail { animation-play-state:paused; } 390 @keyframes cnfol-ticker { from { transform:translateX(0); } 391 to { transform:translateX(-50%); } } 392 @media (prefers-reduced-motion:reduce) { 393 .tickerbar .rail { animation:none; } 394 .tickerbar .track { overflow-x:auto; scrollbar-width:none; } 395 .tickerbar .track::-webkit-scrollbar { display:none; } 396 } 397 .tickerbar .q { 398 font-family:var(--sans); font-size:13px; display:flex; align-items:center; 399 gap:8px; padding:0 15px; height:38px; white-space:nowrap; 400 border-right:1px solid var(--rule); color:var(--ink); 401 } 402 .tickerbar .q .n { font-weight:500; } 403 .tickerbar .q .p { color:var(--muted); } 404 .tickerbar .q .c { font-weight:600; } 405 .tickerbar a.q:hover { background:var(--n05); text-decoration:none; } 406 .up { color:var(--up); } .down { color:var(--down); } .flat { color:var(--muted); } 407 408 /* âââ Mobile âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 409 The drawer markup and its JS are shared with the other masthead, so the 410 class names are the same; only the skin differs. */ 411 .navtoggle { display:none; } 412 .drawer, .drawer-scrim { display:none; } 413 414 @media (max-width:820px) { 415 header.mast .container { 416 align-items:center; padding-top:12px; padding-bottom:10px; gap:12px; 417 flex-wrap:wrap; 418 } 419 header.mast .nameplate { font-size:30px; } 420 /* BESIDE the mark on a phone, not under it. 421 This rule is inherited from 馿¸¯è²¡åæ¥å ±, where the slot holds a LATIN 422 strapline under a Han nameplate â 9px tracked out at .16em is right for 423 that. CNFOL inverts the construction: the mark is Latin and the slot
424 holds the masthead's CHINESE name, and the inheritance made that six 425 Han characters at 9px, stacked. Two problems at once â the masthead ran 426 two lines deep on a phone directly above the ticker, and Han at 9px is 427 below the size it stops being legible at, where Latin caps at 9px are 428 still fine. 429 Baseline-aligned on one row instead. .container already wraps at this 430 width, so the search box drops to its own row rather than squeezing 431 the name. */ 432 header.mast .brand { display:flex; align-items:baseline; gap:9px; } 433 header.mast .latin { margin-top:0; font-size:13px; letter-spacing:.06em; } 434 header.mast .strap { display:none; } 435 header.mast .util { margin-left:auto; min-width:0; justify-content:flex-end; } 436 header.mast form.search { min-width:0; } 437 header.mast form.search input { width:150px; flex:0 1 auto; min-width:0; } 438 439 .navtoggle { 440 display:flex; align-items:center; justify-content:center; order:-1; 441 width:34px; height:34px; flex-shrink:0; background:transparent; 442 border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; 443 } 444 .navtoggle .bars { display:block; width:20px; } 445 .navtoggle .bars i { 446 display:block; height:2px; background:var(--ink); border-radius:2px; 447 margin:4px 0; transition:transform .22s ease, opacity .18s ease; 448 } 449 body.drawer-open .navtoggle .bars i:nth-child(1) { transform:translateY(6px) rotate(45deg); } 450 body.drawer-open .navtoggle .bars i:nth-child(2) { opacity:0; } 451 body.drawer-open .navtoggle .bars i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); } 452 453 .drawer-scrim { 454 display:block; position:fixed; inset:0; background:rgba(22,24,29,.55); 455 opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:998; 456 } 457 body.drawer-open .drawer-scrim { opacity:1; pointer-events:auto; } 458 .drawer { 459 display:block; position:fixed; top:0; left:0; bottom:0; 460 width:74%; max-width:340px; background:#fff; z-index:999; 461 transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1); 462 overflow-y:auto; -webkit-overflow-scrolling:touch; 463 box-shadow:2px 0 24px rgba(0,0,0,.2); 464 } 465 body.drawer-open .drawer { transform:translateX(0); } 466 body.drawer-open { overflow:hidden; } 467 .drawer-head { 468 display:flex; align-items:center; justify-content:space-between; 469 background:var(--red); color:#fff; padding:0 8px 0 18px; height:56px; 470 } 471 .drawer-title { font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:.02em; } 472 .drawer-title em { font-style:normal; font-weight:400; color:var(--muted); } 473 .drawer-close { 474 background:transparent; border:0; color:#fff; font-size:30px; line-height:1; 475 width:44px; height:44px; cursor:pointer; padding:0; 476 } 477 .drawer-sec { padding:6px 0; border-bottom:1px solid var(--rule); } 478 .drawer-sec:last-child { border-bottom:0; } 479 .drawer-sec h4 { 480 font-family:var(--sans); font-size:11.5px; font-weight:600; 481 letter-spacing:.02em; color:var(--muted); margin:10px 0 4px; padding:0 18px; 482 } 483 .drawer-sec a { 484 display:block; padding:11px 18px; font-family:var(--serif); 485 font-size:17px; color:var(--ink); text-decoration:none; 486 } 487 .drawer-sec a:active { background:var(--n05); } 488 .drawer-sec a.cur { color:var(--red); font-weight:600; box-shadow:inset 3px 0 0 var(--red); } 489 nav.secbar .container { gap:0; } 490 nav.secbar a { font-size:15.5px; padding:10px 14px; } 491 } 492 493 /* âââ The masthead is ONE row on a phone âââââââââââââââââââââââââââââââââ 494 What follows below is the rule this replaces, kept because its reasoning 495 is right and only its conclusion was wrong: below ~560px the nameplate, 496 the hamburger and a usable search field genuinely do not fit on one line, 497 and squeezing the field to a sliver is worse than not having it there. 498 It took its own full-width row instead. 499 That is a second header line, and on a phone it sat directly above the 500 ticker â the masthead cost two rows before a reader reached a headline. 501 The third option is the one taken here: the field moves into the drawer, 502 which is already the place a phone reader looks for navigation and which 503 has room for a full-width field. The hamburger is two taps from a search 504 instead of one, and the masthead is a single row. 505 Applied at 560px, not 820px: between the two the field still fits beside 506 the nameplate and is more useful in the header than behind a tap. */ 507 .drawer-search { padding:12px 18px; } 508 .drawer-search form.search { display:flex; gap:8px; } 509 .drawer-search input { 510 flex:1; min-width:0; font-family:var(--sans); font-size:15px; 511 padding:9px 11px; border:1px solid var(--rule); border-radius:3px; 512 background:#fff; color:var(--ink); 513 } 514 .drawer-search button { 515 flex:0 0 auto; font-family:var(--sans); font-size:14px; font-weight:600; 516 padding:9px 14px; border:0; border-radius:3px; 517 background:var(--red); color:#fff; cursor:pointer; 518 } 519 @media (max-width:560px) { header.mast .util { display:none; } } 520 521 /* Below ~560px the nameplate, the hamburger and a usable search f
521ield stop 522 fitting on one line. The search takes its own full-width row rather than 523 being squeezed to a sliver or clipped off the right edge â flex-wrap on 524 the container above is what lets it drop, and flex-basis:100% is what 525 makes it drop rather than merely shrink. */ 526 @media (max-width:560px) { 527 header.mast .container { gap:10px 12px; } 528 header.mast .nameplate { font-size:27px; letter-spacing:.04em; } 529 header.mast .util { flex:1 0 100%; margin-left:0; justify-content:stretch; } 530 header.mast form.search { flex:1; } 531 header.mast form.search input { width:auto; flex:1; } 532 } 533 534 /* Backstop: nothing on this site should ever drag the page sideways. Long 535 unbroken runs â a stock code, a URL, a shell command in an empty-state 536 message â are the usual culprits on a 390px screen. */ 537 body { overflow-wrap:anywhere; } 538 /* A shell command in an empty-state box is exactly the run that has to 539 wrap â it is the longest unbroken ascii on the site and sits inside a 540 fixed-width box on a 390px screen. */ 541 code { overflow-wrap:anywhere; word-break:break-all; } 542 .dateline, table.quotes td.nm small { overflow-wrap:normal; } 543 544 /* âââ Page furniture âââââââââââââââââââââââââââââââââââââââââââââââ */ 545 h1.page-title { 546 font-family:var(--serif); font-size:32px; font-weight:700; margin:0 0 6px; 547 letter-spacing:.04em; 548 } 549 h1.page-title::after { 550 content:""; display:block; width:56px; height:3px; 551 background:var(--red); margin-top:9px; 552 } 553 .page-intro { 554 font-family:var(--sans); color:var(--muted); font-size:14.5px; 555 margin:14px 0 22px; max-width:68ch; 556 } 557 558 /* A section opens on a red rule with the name butted against it, so the 559 eye finds è²¡ç¶ and ç¢ç¶ without reading. */ 560 .section { margin:32px 0 0; border-top:2px solid var(--rule-strong); padding-top:0; } 561 .section:first-of-type { margin-top:0; } 562 .section > h2 { 563 font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:.1em; 564 margin:0 0 16px; display:flex; align-items:center; justify-content:space-between; 565 gap:14px; 566 } 567 .section > h2 .more { 568 font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:.02em; 569 color:var(--navy); text-transform:none; 570 } 571 572 /* âââ Eyebrows and chips âââââââââââââââââââââââââââââââââââââââââââ */ 573 .eyebrow { 574 font-family:var(--sans); font-size:12.5px; font-weight:500; 575 letter-spacing:.02em; color:var(--muted); 576 } 577 .flag { 578 display:inline-block; background:var(--amber); color:#fff; 579 font-family:var(--sans); font-size:11.5px; font-weight:600; 580 letter-spacing:.06em; padding:3px 9px; margin-bottom:8px; 581 } 582 /* Our own work, told apart from the section chip by being an outline 583 rather than a second solid colour a reader has to learn. */ 584 .flag.own { 585 background:transparent; color:var(--red); 586 box-shadow:inset 0 0 0 1.5px var(--red); 587 } 588 .by-own { font-weight:600; color:var(--red); } 589 .eyebrow .lat, .flag .lat, [lang="en"] { text-transform:uppercase; letter-spacing:.1em; } 590 591 /* âââ Story cards ââââââââââââââââââââââââââââââââââââââââââââââââââ */ 592 .story a { color:var(--ink); } 593 .story a:hover { color:var(--red); text-decoration:none; } 594 .story .hl { 595 font-family:var(--serif); font-weight:700; letter-spacing:.01em; 596 line-height:1.3; display:block; margin:0; 597 } 598 .story .byline { 599 font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:7px; 600 } 601 .story .dek { 602 font-family:var(--sans); font-size:14px; color:var(--muted); 603 margin:8px 0 0; line-height:1.62; 604 } 605 .story .thumb { 606 display:block; aspect-ratio:16/9; background:var(--n10); 607 overflow:hidden; position:relative; 608 } 609 .story .thumb img { width:100%; height:100%; object-fit:cover; display:block; } 610 .story .thumb .ph { 611 position:absolute; inset:0; display:flex; align-items:center; justify-content:center; 612 font-family:var(--sans); font-size:12px; letter-spacing:.06em; 613 color:var(--faint); background:var(--n10); 614 } 615 /* .ph is absolutely positioned and sits BEFORE the image in the DOM, so 616 without a stacking context of its own the photo paints underneath it. */ 617 .story .thumb picture { position:relative; z-index:1; display:block; width:100%; height:100%; } 618 .story .thumb picture img { width:100%; height:100%; object-fit:cover; display:block; } 619 /* A PORTRAIT HERO MUST NOT EAT THE PAGE. 620 width:100% alone renders a 3000x4000 press photo 1013px tall in a 760px 621 column â taller than most screens, so the reader meets a wall of image and 622 has to scroll past it to reach the first sentence. Only 3 of 138 heroes are 623 portrait, but those three are the worst pages on the site. 624 625 Capping the HEIGHT and letting the width shrink to match, rather than 626 cropping with object-fit: this article's hero is a Cantonese opera poster, 627 and a centre crop would cut the artwork and the title off it. Nothing is 628 lost this way â the whole picture is still there, just sized to sit in the 629 page instead of dominating it. Landscape heroes are untouched: a 16:9 at 630 760px is 428px tall and never reaches the cap. 631 632 min(620px, 72vh) so a short window gets a proportionally smaller cap 633 rather than a fixed one that still fills it. */ 634 article.story-body figure picture { display:block; } 635 article.story-body figure picture img { 636 display:block; 637 max-width:100%; 638 max-height:min(620px, 72vh); 639 width:auto; height:auto; 640 margin-inline:auto; 641 } 642 643 .hl-xl { font-size:33px; line-height:1.24; } /* front-page lead */ 644 .hl-lg { font-size:22px; } /* column lead */ 645 .hl-md { font-size:17.5px; } /* standard */ 646 .hl-sm { font-size:15.5px; } /* stacked list item */
647 @media (max-width:900px) { .hl-xl { font-size:26px; } } 648 649 /* Three columns, divided by hairlines. */ 650 .front { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:0; } 651 .front > .col { padding:0 22px; border-left:1px solid var(--rule); min-width:0; } 652 .front > .col:first-child { padding-left:0; border-left:0; } 653 .front > .col:last-child { padding-right:0; } 654 @media (max-width:1000px) { 655 .front { grid-template-columns:1fr; } 656 .front > .col { 657 padding:0; border-left:0; border-top:1px solid var(--rule); 658 padding-top:20px; margin-top:20px; 659 } 660 .front > .col:first-child { border-top:0; padding-top:0; margin-top:0; } 661 .front > .col.centre { order:-1; } 662 } 663 664 .stack > .story { padding:14px 0; border-top:1px solid var(--rule); } 665 .stack > .story:first-child { border-top:0; padding-top:0; } 666 .story.row { display:grid; grid-template-columns:104px 1fr; gap:13px; align-items:start; } 667 .story.row .thumb { aspect-ratio:3/2; } 668 669 .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:0; } 670 .grid > .story { 671 padding:17px 20px; border-top:1px solid var(--rule); border-left:1px solid var(--rule); 672 } 673 .grid > .story:nth-child(-n+4) { border-top:2px solid var(--rule-strong); } 674 @media (max-width:1000px) { .grid > .story:nth-child(-n+4) { border-top:1px solid var(--rule); } } 675 676 /* âââ Modules ââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 677 .module { border-top:2px solid var(--rule-strong); padding-top:10px; margin-bottom:24px; } 678 .module > h3 { 679 font-family:var(--serif); font-size:16px; font-weight:700; letter-spacing:.08em; 680 margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline; 681 gap:10px; 682 } 683 .module > h3 a, .module > h3 .eyebrow { 684 font-family:var(--sans); font-size:11.5px; font-weight:400; letter-spacing:.02em; 685 } 686 687 table.quotes { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:13.5px; } 688 table.quotes th { 689 text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; 690 text-transform:uppercase; color:var(--muted); padding:0 0 7px; 691 border-bottom:1px solid var(--rule); 692 } 693 table.quotes th.num, table.quotes td.num { text-align:right; } 694 table.quotes td { padding:8px 0; border-bottom:1px solid var(--rule); } 695 table.quotes tr:last-child td { border-bottom:0; } 696 table.quotes td.nm { font-weight:500; } 697 table.quotes td.nm small { 698 display:block; font-weight:400; color:var(--faint); font-size:11px; letter-spacing:.04em; 699 } 700 table.quotes .up { color:var(--up); } table.quotes .down { color:var(--down); } 701 table.quotes .flat { color:var(--muted); } 702 .stale-note, .proxy-note, .sample-banner { 703 font-family:var(--sans); font-size:11.5px; color:var(--faint); margin-top:9px; 704 } 705 .sample-banner, .proxy-note { 706 background:var(--n05); border-left:3px solid var(--amber); 707 padding:10px 13px; margin:0 0 18px; color:var(--muted); font-size:12.5px; 708 } 709 .tag-sample { 710 font-size:10.5px; background:var(--n10); color:var(--muted); padding:1px 5px; 711 } 712 .is-sample td { color:var(--muted); } 713 .mkt-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; } 714 @media (max-width:900px) { .mkt-grid { grid-template-columns:1fr; } } 715 716 /* Weather is off for this masthead, but the tokens the shared weather 717 partials use still have to resolve if it is ever switched on. */ 718 .wx-now { display:flex; align-items:center; gap:14px; } 719 .wx-now .temp { font-family:var(--sans); font-size:42px; font-weight:300; line-height:1; } 720 .wx-now .meta { font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.45; } 721 .wx-days { display:flex; margin-top:14px; } 722 .wx-days .d { 723 flex:1; text-align:center; font-family:var(--sans); font-size:12px; 724 padding:9px 2px; border-left:1px solid var(--rule); color:var(--muted); 725 } 726 .wx-days .d:first-child { border-left:0; } 727 728 /* âââ Article page âââââââââââââââââââââââââââââââââââââââââââââââââ */ 729 .article-wrap { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; }
730 @media (max-width:900px) { .article-wrap { grid-template-columns:1fr; } } 731 article.story-body h1 { 732 font-family:var(--serif); font-size:38px; font-weight:700; line-height:1.28; 733 letter-spacing:.02em; margin:8px 0 16px; 734 } 735 @media (max-width:700px) { article.story-body h1 { font-size:27px; } } 736 article.story-body .lede { 737 font-family:var(--sans); font-size:17px; color:var(--muted); 738 margin:0 0 20px; line-height:1.66; 739 } 740 article.story-body .byline { 741 font-family:var(--sans); font-size:13px; color:var(--muted); 742 border-top:2px solid var(--rule-strong); border-bottom:1px solid var(--rule); 743 padding:11px 0; margin-bottom:24px; 744 } 745 article.story-body h2 { 746 font-family:var(--serif); font-size:23px; font-weight:700; 747 letter-spacing:.04em; margin:34px 0 12px; 748 padding-left:12px; border-left:4px solid var(--red); 749 } 750 article.story-body p, article.story-body li { font-size:17.5px; line-height:1.9; } 751 article.story-body p a { color:var(--navy); border-bottom:1px solid var(--navy); } 752 article.story-body ul, article.story-body ol { margin:0 0 20px; padding-left:1.4em; } 753 article.story-body li { margin-bottom:8px; } 754 /* Figures inside the copy read as data, not prose. */ 755 article.story-body p { font-variant-numeric:tabular-nums; } 756 article.story-body .attribution { 757 margin-top:34px; padding:16px 18px; background:var(--n05); 758 border-left:3px solid var(--navy); font-family:var(--sans); 759 font-size:13.5px; line-height:1.75; 760 } 761 article.story-body .attribution.own { border-left-color:var(--red); } 762 aside.rail h3 { 763 font-family:var(--serif); font-size:16px; font-weight:700; letter-spacing:.08em; 764 border-top:2px solid var(--rule-strong); padding-top:10px; margin:0 0 12px; 765 } 766 .flink { font-family:var(--sans); } 767 768 .related { margin:38px 0 10px; border-top:2px solid var(--rule-strong); padding-top:18px; } 769 .related-h { 770 font-family:var(--serif); font-size:19px; font-weight:700; 771 letter-spacing:.08em; margin:0 0 16px; 772 } 773 .related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(208px,1fr)); gap:22px; } 774 .rel-card { display:flex; flex-direction:column; min-width:0; } 775 .rel-thumb { 776 display:block; aspect-ratio:16/9; overflow:hidden; 777 background:var(--n10); margin-bottom:9px; 778 } 779 .rel-thumb picture, .rel-thumb img { display:block; width:100%; height:100%; object-fit:cover; } 780 .rel-title { 781 font-family:var(--serif); font-size:15.5px; font-weight:700; line-height:1.45; 782 color:var(--ink); display:block; margin-bottom:5px; 783 } 784 .rel-title:hover { color:var(--red); } 785 .rel-body .byline { font-family:var(--sans); font-size:12px; color:var(--muted); } 786 @media (max-width:700px) { 787 .related-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } 788 .rel-title { font-size:14px; } 789 } 790 791 /* Subject portraits. This masthead runs no showbiz desk, so the grid is 792 here only because article.html renders it when the rows exist. */ 793 .facegrid { display:grid; gap:4px; aspect-ratio:16/9; background:var(--n10); } 794 .facegrid.faces-1 { grid-template-columns:1fr; } 795 .facegrid.faces-2 { grid-template-columns:1fr 1fr; } 796 .facegrid.faces-3, .facegrid.faces-4 { grid-template-columns:1fr 1fr; } 797 .facegrid.faces-3 .face.lead, .facegrid.faces-4 .face.lead { grid-row:1 / -1; } 798 .facegrid.faces-3 { grid-template-rows:1fr 1fr; } 799 .facegrid.faces-4 { grid-template-rows:repeat(3, 1fr); } 800 .face { position:relative; overflow:hidden; display:block; } 801 .face img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; } 802 .face-name { 803 position:absolute; left:0; right:0; bottom:0; padding:7px 9px 6px; 804 font-family:var(--sans); font-size:12.5px; font-weight:600; color:#fff; 805 background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); 806 } 807 .face-credit, .photo-credit { 808 font-family:var(--sans); font-size:11.5px; color:var(--muted); 809 line-height:1.55; margin-top:7px; padding-top:0; 810 } 811 .face-credit a, .photo-credit a { color:var(--muted); text-decoration:underline; } 812 813 /* âââ Pagination âââââââââââââââââââââââââââââââââââââââââââââââââââ */ 814 .pager { 815 display:flex; flex-wrap:wrap; gap:6px; align-items:center; 816 margin:26px 0 6px; font-family:var(--sans); font-size:14px; 817 } 818 .pager .pg { 819 min-width:38px; padding:8px 11px; text-align:center; 820 border:1px solid var(--rule); color:var(--ink); text-decoration:none; background:#fff; 821 } 822 .pager .pg:hover { background:var(--n05); text-decoration:none; } 823 .pager .pg.cur { background:var(--red); border-color:var(--red); color:#fff; font-weight:600; } 824 .pager .pg.gap { border:0; background:transparent; min-width:18px; color:var(--faint); } 825 .pgcount { font-family:var(--sans); font-size:12.5px; color:var(--muted); margin:0 0 26px; } 826 @media (max-width:520px) { .pager .pg { min-width:34px; padding:7px 9px; } } 827
828 .sr-only { 829 position:absolute; width:1px; height:1px; padding:0; margin:-1px; 830 overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; 831 } 832 833 /* âââ Footer âââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 834 /* Google's Preferred Sources button. It renders its own markup and its own 835 styling, which is the point â a reader recognises it â so this only gives 836 it room and keeps it from sitting flush against the copyright line. */ 837 .prefsrc { margin-top:14px; min-height:34px; } 838 839 /* The Preferred Sources button, INSIDE the bar. .prefsrc itself is declared 840 by each base template, because the footer carries one too and APACrealty 841 has a footer button without importing this partial. 842 843 WHY THE EXPLICIT WIDTH. Google's script injects style="width:100%" on the 844 div it takes over. .savebar .acts is a flex row sized by its own content, 845 so a percentage width there resolves against a container whose width 846 depends on its children â circular, computes to zero, and the button is 847 present in the DOM with data-initialized="true" and simply paints nothing. 848 It rendered correctly in the footer, which is a normal block, and not here, 849 which is what pointed at the containing box rather than at the script. 850 851 !important is not decoration: the declaration being overridden is inline, 852 and an author !important is the only thing that outranks it. 232px is the 853 button's own natural width â Google's iframe lays out to about that, so 854 this states a width the button lays out to without wrapping its label â 855 232px was enough to make it appear and still broke "Add to Preferred 856 Sources" across two lines. */ 857 .prefsrc-bar { margin-top:0; flex:0 0 auto; } 858 .prefsrc-bar > div[google-add-preferred-source-btn] { width:268px !important; } 859 860 /* NOT IN THE BAR ON A PHONE. Two attempts failed and both failed for the 861 same underlying reason â Google's button is a cross-origin iframe with a 862 60px min-height and a width of its own choosing, and a compact fixed 863 action bar has neither to spare. At the desktop 268px it pushed è¨çºé¦é 864 off a 390px screen; given its own full-width row it made the bar three 865 rows deep, taller than it could sit above the fold, and clipped the three 866 text buttons entirely. 867 So below 700px the bar keeps the layout it was designed with, and the 868 button is reached in the footer, which is a normal block with room for it. 869 Nothing is lost: the footer button is on every page and is not 870 dismissible, unlike the bar. */ 871 @media (max-width:700px) { .prefsrc-bar { display:none; } } 872 873 .savebar { 874 position:fixed; left:0; right:0; bottom:0; z-index:70; 875 background:#fff; border-top:3px solid var(--blue); 876 box-shadow:0 -6px 28px rgba(10,26,94,.16); 877 transform:translateY(102%); 878 transition:transform .34s cubic-bezier(.22,.61,.36,1); 879 padding-bottom:env(safe-area-inset-bottom, 0px); 880 } 881 .savebar[hidden] { display:none; } 882 .savebar.up { transform:translateY(0); } 883 @media (prefers-reduced-motion:reduce) { 884 .savebar { transition:none; } 885 } 886 887 .savebar .inner { 888 max-width:1180px; margin:0 auto; padding:14px 18px; 889 display:flex; align-items:center; gap:16px; 890 } 891 .savebar .mark { width:38px; height:38px; flex-shrink:0; } 892 .savebar .copy { flex:1; min-width:0; } 893 .savebar .copy strong { 894 display:block; font-family:var(--sans); font-size:16.5px; 895 font-weight:600; color:var(--ink); letter-spacing:.02em; 896 } 897 .savebar .copy span { 898 display:block; font-family:var(--sans); font-size:13.5px; 899 color:var(--muted); margin-top:2px; 900 } 901 .savebar .acts { display:flex; align-items:center; gap:8px; flex-shrink:0; } 902 .savebar button { 903 font-family:var(--sans); font-size:14px; font-weight:600; 904 padding:9px 15px; border:0; cursor:pointer; white-space:nowrap; 905 -webkit-tap-highlight-color:transparent; 906 } 907 .savebar .go { background:var(--amber); color:var(--blue); } 908 .savebar .alt { background:var(--n10); color:var(--ink); } 909 .savebar .go:hover { background:#ffc92e; } 910 .savebar .alt:hover { background:#e6e6e6; } 911 .savebar .no { 912 background:transparent; color:var(--faint); font-weight:400; 913 font-size:13px; padding:9px 4px; text-decoration:underline; 914 } 915 .savebar .no:hover { color:var(--muted); } 916 917 /* Instruction drop-down. Hidden until a button asks for it, because the 918 steps differ per platform and showing all of them at once is noise. */ 919 .savebar .how { 920 display:none; border-top:1px solid var(--rule); background:var(--n10); 921 } 922 .savebar .how.on { display:block; } 923 .savebar .how .inner { display:block; padding:14px 18px 16px; } 924 .savebar .how h4 { 925 font-family:var(--sans); font-size:13px; font-weight:600; 926 color:var(--blue); margin:0 0 7px; letter-spacing:.02em; 927 } 928 .savebar .how ol { margin:0; padding-left:1.3em; } 929 .savebar .how li { 930 font-family:var(--sans); font-size:14px; color:var(--ink); 931 line-height:1.6; margin-bottom:3px; 932 } 933 .savebar .how kbd { 934 font-family:var(--sans); font-size:13px; font-weight:600; 935 background:#fff; border:1px solid var(--rule); border-bottom-width:2px; 936 border-radius:4px; padding:1px 6px; color:var(--ink); 937 } 938 .savebar .how .urlrow { 939 display:flex; gap:8px; align-items:center; margin-top:10px; 940 } 941 .savebar .how .urlrow code { 942 flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; 943 white-space:nowrap; background:#fff; border:1px solid var(--rule); 944 padding:7px 9px; font-size:13.5px; color:var(--ink); 945 } 946 .savebar .how .urlrow button { padding:7px 12px; font-size:13px; } 947 948 @media (max-width:700px) { 949 .savebar .inner { padding:12px 14px; gap:11px; flex-wrap:wrap; } 950 .savebar .mark { width:32px; height:32px; } 951 .savebar .copy { flex:1 1 auto; } 952 .savebar .copy strong { font-size:15px; } 953 .savebar .copy span { font-size:12.5px; } 954 /* The buttons drop to their own full-width row rather than shrinking to 955 unreadable chips beside the copy. */ 956 .savebar .acts { flex:1 0 100%; gap:8px; } 957 .savebar .acts .go, .savebar .acts .alt { flex:1; text-align:center; padding:11px 8px; } 958 .savebar .how .inner { padding:12px 14px 14px; } 959 } 960 961 footer.site { 962 background:#fff; border-top:3px solid var(--red); margin-top:48px; 963 padding:32px 0 20px; font-family:var(--sans); font-size:14px; color:var(--muted); 964 } 965 footer.site a { color:var(--muted); } 966 footer.site a:hover { color:var(--red); } 967 footer.site h4 { 968 font-family:var(--serif); color:var(--ink); font-size:15px; font-weight:700; 969 letter-spacing:.08em; margin:0 0 11px; 970 } 971 footer.site .fgrid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; padding-bottom:20px; } 972 @media (max-width:820px) { footer.site .fgrid { grid-template-columns:1fr 1fr; } } 973 footer.site .fbrand { 974 font-family:var(--serif); font-size:26px; font-weight:700; color:var(--red); 975 letter-spacing:.01em; margin-bottom:4px; display:block; 976 } 977 footer.site .fbrand em { font-style:normal; font-weight:400; color:var(--faint); } 978 /* The Chinese name again, so the footer identifies the paper the same way 979 the masthead does. Not uppercased or widely tracked, for the reason 980 given at header.mast .latin. */ 981 footer.site .flatin { 982 font-family:var(--serif); font-size:13px; font-weight:600; 983 letter-spacing:.12em; color:var(--muted); margin-bottom:12px; 984 } 985 footer.site .flink { margin-bottom:6px; font-size:13.5px; } 986 footer.site .fbot { 987 border-top:1px solid var(--rule); padding-top:14px; font-size:11.5px; 988 color:var(--faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; 989 } 990 991 /* âââ zh-Hant typography âââââââââââââââââââââââââââââââââââââââââââ */
992 /* Tracked-out uppercase is a latin device. On Han it opens a gap between 993 every glyph, so ãææåé¡ã reads as four separate characters. Anything 994 still latin-only keeps its spacing; these get near-zero tracking. */ 995 .story .thumb .ph, .subnav .lead { letter-spacing:.02em; } 996 997 /* ââ Share row âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 998 One neutral disc behind every icon, and the ICON carries the brand 999 colour. A row of six differently-tinted circles reads as six buttons 1000 competing; one repeated disc reads as a single control strip, and the 1001 colour that identifies each service still lands where the eye looks. 1002 1003 No rules above or below. The row already sits in its own whitespace, and 1004 two hairlines across the column cut the article into pieces the reader 1005 has no reason to see as separate. 1006 1007 Palette here is --rule / --blue / --n10. --line and --brand do not exist 1008 in this stylesheet; an earlier version used them, and a var() with no 1009 definition and no fallback is invalid at computed-value time, so 1010 border-color fell back to currentColor and drew near-black. */ 1011 .share-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; 1012 margin:20px 0; } 1013 .share-label { font-size:13.5px; color:var(--muted); font-weight:500; } 1014 .share-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } 1015 .share-row .sh { display:inline-flex; align-items:center; justify-content:center; 1016 width:34px; height:34px; border-radius:50%; border:0; padding:0; 1017 background:var(--n10); cursor:pointer; 1018 transition:background .15s, transform .15s; } 1019 .share-row .sh svg { width:18px; height:18px; display:block; } 1020 .share-row .sh:hover { background:#e7e7e7; transform:translateY(-1px); } 1021 1022 /* Icon colour only â the disc stays neutral throughout, including hover. */ 1023 .share-row .sh.wa { color:#25D366; } 1024 .share-row .sh.tg { color:#26A5E4; } 1025 .share-row .sh.fb { color:#1877F2; } 1026 .share-row .sh.xt { color:#000; } 1027 .share-row .sh.em { color:#D93025; } 1028 .share-row .sh.cp { color:var(--blue); } 1029 .share-row .sh.copied { color:#25D366; background:rgba(37,211,102,.16); } 1030 @media (max-width:520px) { 1031 .share-row { gap:8px; } 1032 .share-label { width:100%; } 1033 } 1034</style> 1035 1036<style> 1037 /* âââ Quote and data tables âââââââââââââââââââââââââââââââââââââââââââ */ 1038 article.story-body table.market-table { 1039 width:100%; border-collapse:collapse; margin:0 0 22px; 1040 font-family:var(--sans); font-size:14px; 1041 font-variant-numeric:tabular-nums; 1042 } 1043 article.story-body table.market-table th { 1044 text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.04em; 1045 color:var(--muted); padding:0 10px 8px 0; border-bottom:1px solid var(--rule); 1046 white-space:nowrap; 1047 } 1048 article.story-body table.market-table td { 1049 padding:9px 10px 9px 0; border-bottom:1px solid var(--rule); 1050 line-height:1.45; 1051 } 1052 article.story-body table.market-table tr:last-child td { border-bottom:0; } 1053 article.story-body table.market-table th:last-child, 1054 article.story-body table.market-table td:last-child { padding-right:0; } 1055 /* Figures right-align and share a column width so they can be compared 1056 down the column rather than read one at a time. */ 1057 article.story-body table.market-table th.num, 1058 article.story-body table.market-table td.num { text-align:right; } 1059 article.story-body table.market-table td.nm { font-weight:600; } 1060 article.story-body table.market-table td.nm small, 1061 article.story-body table.market-table td .code { 1062 display:block; font-weight:400; font-size:11.5px; color:var(--muted); 1063 margin-top:2px; letter-spacing:.02em; 1064 } 1065 article.story-body table.market-table .up { color:var(--up); font-weight:600; } 1066 article.story-body table.market-table .down { color:var(--down); font-weight:600; } 1067 article.story-body table.market-table .flat, 1068 article.story-body table.market-table .na { color:var(--faint); } 1069 1070 /* A wide table must scroll inside itself on a phone rather than widen the 1071 page. The wrapper is applied by the browser to the table's own box. */ 1072 article.story-body table.market-table { display:block; overflow-x:auto; } 1073 @media (min-width:700px) { 1074 article.story-body table.market-table { display:table; overflow-x:visible; } 1075 } 1076 1077 /* âââ Sparklines ââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1078 article.story-body .spark-cell { width:96px; padding-right:0; } 1079 article.story-body svg.spark { display:block; width:88px; height:22px; } 1080 1081 /* âââ The peg band ââââââââââââââââââââââââââââââââââââââââââââââââââââ */
1082 /* Where USD/HKD sits between the two Convertibility Undertakings. The rate 1083 alone means nothing to most readers; its position in the corridor is the 1084 whole story, and the bar says it in one glance. */ 1085 article.story-body .peg-band { margin:0 0 26px; } 1086 article.story-body .peg-band .band { 1087 position:relative; height:12px; border:1px solid var(--rule); 1088 background:linear-gradient(to right, 1089 color-mix(in srgb, var(--down) 12%, transparent), 1090 var(--n05) 45%, var(--n05) 55%, 1091 color-mix(in srgb, var(--up) 14%, transparent)); 1092 } 1093 article.story-body .peg-band .marker { 1094 position:absolute; top:-4px; bottom:-4px; width:3px; 1095 background:var(--blue); transform:translateX(-1.5px); 1096 } 1097 article.story-body .peg-band .band-scale { 1098 display:flex; justify-content:space-between; margin-top:6px; 1099 font-family:var(--sans); font-size:11.5px; color:var(--muted); 1100 } 1101 article.story-body .peg-band figcaption { 1102 font-family:var(--sans); font-size:12.5px; color:var(--muted); 1103 line-height:1.6; margin-top:8px; 1104 } 1105 1106 /* âââ News digest âââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1107 /* report_newswrap renders a section-grouped list of our own stories. It is 1108 a table of contents, not body copy, so it is set in the UI face and 1109 tightened up â a reader scans it for the one story they missed. */ 1110 article.story-body .news-wrap { margin:0 0 26px; } 1111 article.story-body .news-wrap h3 { 1112 font-family:var(--sans); font-size:12px; font-weight:600; 1113 letter-spacing:.06em; color:var(--muted); 1114 margin:20px 0 8px; padding-bottom:6px; 1115 border-bottom:1px solid var(--rule); 1116 } 1117 article.story-body .news-wrap h3:first-child { margin-top:0; } 1118 article.story-body ul.wrap-list { list-style:none; margin:0; padding:0; } 1119 article.story-body ul.wrap-list li { 1120 display:flex; align-items:baseline; gap:12px; 1121 padding:8px 0; border-bottom:1px solid var(--rule); 1122 font-size:16px; line-height:1.55; margin:0; 1123 } 1124 article.story-body ul.wrap-list li:last-child { border-bottom:0; } 1125 article.story-body ul.wrap-list a { 1126 flex:1; min-width:0; color:var(--ink); border-bottom:0; 1127 } 1128 article.story-body ul.wrap-list a:hover { color:var(--blue); } 1129 article.story-body ul.wrap-list .wrap-time { 1130 flex-shrink:0; font-family:var(--sans); font-size:12px; 1131 color:var(--faint); font-variant-numeric:tabular-nums; 1132 } 1133 1134 /* âââ Charts, notes, disclaimer âââââââââââââââââââââââââââââââââââââââ */ 1135 article.story-body figure.market-chart { margin:0 0 24px; } 1136 article.story-body figure.market-chart svg { display:block; width:100%; height:auto; } 1137 article.story-body figure.market-chart figcaption { 1138 font-family:var(--sans); font-size:12px; color:var(--muted); 1139 line-height:1.6; margin-top:8px; 1140 } 1141 article.story-body p.table-note { 1142 font-family:var(--sans); font-size:12px; color:var(--muted); 1143 margin:-4px 0 12px; line-height:1.6; 1144 } 1145 article.story-body p.market-facts { 1146 font-family:var(--sans); font-size:14px; color:var(--ink); 1147 background:var(--n05); padding:12px 14px; margin:0 0 22px; 1148 line-height:1.7; font-variant-numeric:tabular-nums; 1149 } 1150 /* Not decoration. A market piece assembled from public data has to say so, 1151 and a reader has to be able to tell it from the reporting above it. */ 1152 article.story-body p.disclaimer { 1153 font-family:var(--sans); font-size:12.5px; color:var(--muted); 1154 line-height:1.7; margin:30px 0 0; padding:14px 16px; 1155 background:var(--n05); border-left:3px solid var(--rule); 1156 } 1157</style> 1158 1159 1160
1161<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1642753733521186" 1162 crossorigin="anonymous"></script>
1162 1163 1164<!-- Google Preferred Sources. A reader who clicks the button below marks this 1165 masthead as a preferred source in Google Search, which weights it up in 1166 Top Stories for them. Google's own script renders the button; we supply 1167 an empty div and it fills it. Only domain and subdomain level sites are 1168 eligible, which this is. 1169 data-lang is deliberately NOT set: it OVERRIDES browser detection, and 1170 the reader's own browser language is a better guess than one we hardcode. 1171 https://developers.google.com/search/docs/appearance/preferred-sources -->
1172<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
1172 1173 1174
1175<script> 1176 (function (s, t, a, y, twenty, two) { 1177 s.Stay22 = s.Stay22 || {}; 1178 s.Stay22.params = { lmaID: '6aa06d0a9092f48a175e0ac6' }; 1179 twenty = t.createElement(a); 1180 two = t.getElementsByTagName(a)[0]; 1181 twenty.async = 1; 1182 twenty.src = y; 1183 two.parentNode.insertBefore(twenty, two); 1184 })(window, document, 'script', 'https://scripts.stay22.com/letmeallez.js'); 1185</script>
1185 1186 1187<!-- Matomo -->
1188<script> 1189 var _paq = window._paq = window._paq || []; 1190 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ 1191 _paq.push(['trackPageView']); 1192 _paq.push(['enableLinkTracking']); 1193 (function() { 1194 var u="//tracking.cnfol.hk/"; 1195 _paq.push(['setTrackerUrl', u+'matomo.php']); 1196 _paq.push(['setSiteId', '4344']); 1197 var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; 1198 g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); 1199 })(); 1200</script>
1200 1201<!-- End Matomo Code --> 1202</head> 1203<body> 1204 1205 1206 1207 1208 1209 1210<div class="dateline"> 1211 <div class="container"> 1212 <span>2026å¹´10æ3æ¥ãææå </span> 1213 <span class="est">åµåæ¼2026å¹´</span> 1214 1215 <a class="mkt-chip" href="/%E5%B8%82%E5%A0%B4/"> 1216 <span>æçææ¸</span> 1217 <b>23,972</b> 1218 <span class="down">-2.25%</span> 1219 </a> 1220 1221 </div> 1222</div> 1223 1224<header class="mast"> 1225 <div class="container"> 1226 <button class="navtoggle" type="button" 1227 aria-label="éåé¸å®" aria-expanded="false" aria-controls="mobile-drawer"> 1228 <span class="bars" aria-hidden="true"><i></i><i></i><i></i></span> 1229 </button> 1230 <a class="brand" href="/"> 1231 <span class="nameplate">CNFOL<em>.hk</em></span> 1232 <span class="latin">ä¸å財ç¶å±æ</span> 1233 </a> 1234 <div class="strap"> 1235 <b>財ç¶ãæ¥ç¸¾ãå°ç¢ãå¤å¯</b> 1236 馿¸¯ä¸æè²¡ç¶æ°èç¶²ï¼å ±é港è¡ãä¸å¸å ¬å¸æ¥ç¸¾åå¹´å ±ãæ¨å¸æäº¤èå¯å¸èµ°å¢ã 1237 </div> 1238 <div class="util"> 1239 <form class="search" action="/%E6%90%9C%E5%B0%8B" method="get" role="search"> 1240 <input type="search" name="q" placeholder="æå°æ°è" aria-label="æå°ä¸å財ç¶å±æ" 1241 value=""> 1242 <button type="submit">æå°</button> 1243 </form> 1244 </div> 1245 </div> 1246</header> 1247 1248<nav class="secbar" aria-label="çé¢"> 1249 <div class="container"> 1250 <a href="/">主é </a> 1251 1252 <a href="/%E8%A6%81%E8%81%9E/">è¦è</a> 1253 1254 <a href="/%E8%B2%A1%E7%B6%93/">財ç¶</a> 1255 1256 <a href="/%E5%9C%B0%E7%94%A2/">å°ç¢</a> 1257 1258 <a href="/%E7%94%A2%E7%B6%93/">ç¢ç¶</a> 1259 1260 <a href="/%E7%92%B0%E7%90%83/">ç°ç</a> 1261 1262 1263 <a class="aux" href="/%E5%B8%82%E5%A0%B4/" class="cur">å¸å ´æ¸æ</a> 1264 1265 </div> 1266</nav> 1267 1268
1269<div class="drawer-scrim" id="drawer-scrim" hidden></div> 1270<nav class="drawer" id="mobile-drawer" aria-label="主é¸å®" aria-hidden="true"> 1271 <div class="drawer-head"> 1272 <span class="drawer-title">CNFOL<em>.hk</em></span> 1273 <button class="drawer-close" type="button" aria-label="ééé¸å®">×</button> 1274 </div> 1275 <div class="drawer-sec drawer-search"> 1276 <form class="search" action="/%E6%90%9C%E5%B0%8B" method="get" role="search"> 1277 <input type="search" name="q" placeholder="æå°æ°è" aria-label="æå°ä¸å財ç¶å±æ" 1278 value=""> 1279 <button type="submit">æå°</button> 1280 </form> 1281 </div> 1282 <div class="drawer-sec"> 1283 <a href="/">主é </a> 1284 </div> 1285 <div class="drawer-sec"> 1286 <h4>çé¢</h4> 1287 1288 <a href="/%E8%A6%81%E8%81%9E/">è¦è</a> 1289 1290 <a href="/%E8%B2%A1%E7%B6%93/">財ç¶</a> 1291 1292 <a href="/%E5%9C%B0%E7%94%A2/">å°ç¢</a> 1293 1294 <a href="/%E7%94%A2%E7%B6%93/">ç¢ç¶</a> 1295 1296 <a href="/%E7%92%B0%E7%90%83/">ç°ç</a> 1297 1298 </div> 1299 1300 <div class="drawer-sec"> 1301 <h4>å¸å ´</h4> 1302 <a href="/%E5%B8%82%E5%A0%B4/">å¸å ´æ¸æ</a> 1303 </div> 1304 1305 <div class="drawer-sec"> 1306 <h4>編輯室</h4> 1307 <a href="/%E7%B7%A8%E8%BC%AF%E5%9C%98%E9%9A%8A">編輯åé</a> 1308 <a href="/%E9%97%9C%E6%96%BC%E6%88%91%E5%80%91">éæ¼ä¸å財ç¶å±æ</a> 1309 <a href="/%E7%B7%A8%E8%BC%AF%E6%96%B9%E9%87%9D">編輯æ¹é</a> 1310 <a href="/%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91">è¯çµ¡æå</a> 1311 </div> 1312</nav> 1313 1314 1315<div class="tickerbar"> 1316 <div class="inner"> 1317 <a class="tlabel" href="/%E5%B8%82%E5%A0%B4/">è¡æ </a> 1318 <div class="track"> 1319 <div class="rail"> 1320 1321 1322 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1323 > 1324 <span class="n">æçææ¸</span> 1325 <span class="p">23,972</span> 1326 <span class="c down">-2.25%</span> 1327 </a> 1328 1329 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1330 > 1331 <span class="n">å伿æ¸</span> 1332 <span class="p">8,031</span> 1333 <span class="c down">-1.81%</span> 1334 </a> 1335 1336 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1337 > 1338 <span class="n">ä¸èç¶æ</span> 1339 <span class="p">3,842</span> 1340 <span class="c up">+0.31%</span> 1341 </a> 1342 1343 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1344 > 1345 <span class="n">S&P 500</span> 1346 <span class="p">7,720</span> 1347 <span class="c up">+0.70%</span> 1348 </a> 1349 1350 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1351 > 1352 <span class="n">éçæ¯</span> 1353 <span class="p">51,155</span> 1354 <span class="c up">+0.45%</span> 1355 </a> 1356 1357 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1358 > 1359 <span class="n">ç´æ¯éå </span> 1360 <span class="p">27,181</span> 1361 <span class="c up">+1.15%</span> 1362 </a> 1363 1364 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1365 > 1366 <span class="n">æ¥ç¶225</span> 1367 <span class="p">68,309</span> 1368 <span class="c up">+2.33%</span> 1369 </a> 1370 1371 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1372 > 1373 <span class="n">坿100</span> 1374 <span class="p">10,462</span> 1375 <span class="c up">+0.32%</span> 1376 </a> 1377 1378 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1379 > 1380 <span class="n">EUR/USD</span> 1381 <span class="p">1.1225</span> 1382 <span class="c down">-0.65%</span> 1383 </a> 1384 1385 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1386 > 1387 <span class="n">GBP/USD</span> 1388 <span class="p">1.3201</span> 1389 <span class="c down">-0.25%</span> 1390 </a> 1391 1392 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1393 > 1394 <span class="n">USD/JPY</span> 1395 <span class="p">157.67</span> 1396 <span class="c down">-0.20%</span> 1397 </a> 1398 1399 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1400 >
1401 <span class="n">USD/SGD</span> 1402 <span class="p">1.2798</span> 1403 <span class="c down">-0.01%</span> 1404 </a> 1405 1406 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1407 > 1408 <span class="n">BTC</span> 1409 <span class="p">84,809</span> 1410 <span class="c up">+0.11%</span> 1411 </a> 1412 1413 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1414 > 1415 <span class="n">ETH</span> 1416 <span class="p">2,686</span> 1417 <span class="c down">-0.38%</span> 1418 </a> 1419 1420 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1421 > 1422 <span class="n">USDT</span> 1423 <span class="p">0.9999</span> 1424 <span class="c up">+0.02%</span> 1425 </a> 1426 1427 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1428 > 1429 <span class="n">BNB</span> 1430 <span class="p">773.86</span> 1431 <span class="c up">+0.35%</span> 1432 </a> 1433 1434 1435 1436 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1437 aria-hidden="true" tabindex="-1"> 1438 <span class="n">æçææ¸</span> 1439 <span class="p">23,972</span> 1440 <span class="c down">-2.25%</span> 1441 </a> 1442 1443 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1444 aria-hidden="true" tabindex="-1"> 1445 <span class="n">å伿æ¸</span> 1446 <span class="p">8,031</span> 1447 <span class="c down">-1.81%</span> 1448 </a> 1449 1450 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1451 aria-hidden="true" tabindex="-1"> 1452 <span class="n">ä¸èç¶æ</span> 1453 <span class="p">3,842</span> 1454 <span class="c up">+0.31%</span> 1455 </a> 1456 1457 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1458 aria-hidden="true" tabindex="-1"> 1459 <span class="n">S&P 500</span> 1460 <span class="p">7,720</span> 1461 <span class="c up">+0.70%</span> 1462 </a> 1463 1464 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1465 aria-hidden="true" tabindex="-1"> 1466 <span class="n">éçæ¯</span> 1467 <span class="p">51,155</span> 1468 <span class="c up">+0.45%</span> 1469 </a> 1470 1471 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1472 aria-hidden="true" tabindex="-1"> 1473 <span class="n">ç´æ¯éå </span> 1474 <span class="p">27,181</span> 1475 <span class="c up">+1.15%</span> 1476 </a> 1477 1478 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1479 aria-hidden="true" tabindex="-1"> 1480 <span class="n">æ¥ç¶225</span> 1481 <span class="p">68,309</span> 1482 <span class="c up">+2.33%</span> 1483 </a> 1484 1485 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1486 aria-hidden="true" tabindex="-1"> 1487 <span class="n">坿100</span> 1488 <span class="p">10,462</span> 1489 <span class="c up">+0.32%</span> 1490 </a> 1491 1492 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1493 aria-hidden="true" tabindex="-1"> 1494 <span class="n">EUR/USD</span> 1495 <span class="p">1.1225</span> 1496 <span class="c down">-0.65%</span> 1497 </a> 1498 1499 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1500 aria-hidden="true" tabindex="-1"> 1501 <span class="n">GBP/USD</span> 1502 <span class="p">1.3201</span> 1503 <span class="c down">-0.25%</span> 1504 </a> 1505 1506 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1507 aria-hidden="true" tabindex="-1"> 1508 <span class="n">USD/JPY</span> 1509 <span class="p">157.67</span> 1510 <span class="c down">-0.20%</span> 1511 </a> 1512 1513 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1514 aria-hidden="true" tabindex="-1"> 1515 <span class="n">USD/SGD</span> 1516 <span class="p">1.2798</span> 1517 <span class="c down">-0.01%</span> 1518 </a> 1519 1520 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1521 aria-hidden="true" tabindex="-1">
1522 <span class="n">BTC</span> 1523 <span class="p">84,809</span> 1524 <span class="c up">+0.11%</span> 1525 </a> 1526 1527 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1528 aria-hidden="true" tabindex="-1"> 1529 <span class="n">ETH</span> 1530 <span class="p">2,686</span> 1531 <span class="c down">-0.38%</span> 1532 </a> 1533 1534 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1535 aria-hidden="true" tabindex="-1"> 1536 <span class="n">USDT</span> 1537 <span class="p">0.9999</span> 1538 <span class="c up">+0.02%</span> 1539 </a> 1540 1541 <a class="q" href="/%E5%B8%82%E5%A0%B4/" 1542 aria-hidden="true" tabindex="-1"> 1543 <span class="n">BNB</span> 1544 <span class="p">773.86</span> 1545 <span class="c up">+0.35%</span> 1546 </a> 1547 1548 1549 </div> 1550 </div> 1551 </div> 1552</div> 1553 1554 1555<main> 1556 <div class="container"> 1557 1558<h1 class="page-title">å¸å ´</h1> 1559<p class="page-intro"> 1560 ç°çææ¸ã大åè¡ä»½ãååå貨幣å¯çå ±å¹ï¼ä¸é ç¡è¦½ãå¯çæ¡ç¨æ¯æ¥åèå¯çãæ¬é å §å®¹ä¸¦ä¸æ§æä»»ä½æè³å»ºè°ã 1561</p> 1562 1563 1564 1565<div class="sample-banner"> 1566 <strong>å ±å¹åºæºã</strong>貨幣å¯ççºæ¯æ¥åèå¯çã 1567 æ¨ç¤ºçº <span class="tag-sample">示ä¾</span> çææ¸ãè¡ä»½ååå 1568 å°æªæ¥é§å ±å¹ä¾æºï¼æ¸å並éå¸å ´å¹ã 1569</div> 1570 1571 1572 1573 1574<div class="mkt-grid">
1575 <div> 1576 1577 <div class="module"> 1578 <h3>ç°çææ¸</h3> 1579 1580<table class="quotes"> 1581 <tr> 1582 <th>ææ¸</th> 1583 <th class="num">ææ°</th> 1584 <th class="num">åè·</th> 1585 <th class="num">%</th> 1586 <th class="num rng">å ¨æ¥æ³¢å¹ </th> 1587 1588 </tr> 1589 1590 1591 <tr class="is-sample"> 1592 <td class="nm">æ¨æ®500ææ¸ <span class="tag-sample">示ä¾</span><small>^GSPC</small></td> 1593 <td class="num">7,323</td> 1594 <td class="num down">-115.00</td> 1595 <td class="num down">-1.55%</td> 1596 1597 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1598 1599 7,279â7,367 1600 1601 </td> 1602 1603 1604 </tr> 1605 1606 1607 <tr class="is-sample"> 1608 <td class="nm">éçæ¯å·¥æ¥ææ¸ <span class="tag-sample">示ä¾</span><small>^DJI</small></td> 1609 <td class="num">47,396</td> 1610 <td class="num down">-724.00</td> 1611 <td class="num down">-1.50%</td> 1612 1613 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1614 1615 47,112â47,680 1616 1617 </td> 1618 1619 1620 </tr> 1621 1622 1623 <tr class="is-sample"> 1624 <td class="nm">ç´æ¯éå ææ¸ <span class="tag-sample">示ä¾</span><small>^IXIC</small></td> 1625 <td class="num">24,389</td> 1626 <td class="num up">+79.00</td> 1627 <td class="num up">+0.32%</td> 1628 1629 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1630 1631 24,243â24,535 1632 1633 </td> 1634 1635 1636 </tr> 1637 1638 1639 <tr class="is-sample"> 1640 <td class="nm">坿100ææ¸ <span class="tag-sample">示ä¾</span><small>^FTSE</small></td> 1641 <td class="num">9,365</td> 1642 <td class="num up">+105.00</td> 1643 <td class="num up">+1.13%</td> 1644 1645 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1646 1647 9,309â9,421 1648 1649 </td> 1650 1651 1652 </tr> 1653 1654 1655 <tr class="is-sample"> 1656 <td class="nm">æ¥ç¶225ææ¸ <span class="tag-sample">示ä¾</span><small>^N225</small></td> 1657 <td class="num">47,237</td> 1658 <td class="num up">+257.00</td> 1659 <td class="num up">+0.55%</td> 1660 1661 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1662 1663 46,954â47,520 1664 1665 </td> 1666 1667 1668 </tr> 1669 1670 1671 <tr class="is-sample"> 1672 <td class="nm">æçææ¸ <span class="tag-sample">示ä¾</span><small>^HSI</small></td> 1673 <td class="num">28,134</td> 1674 <td class="num up">+494.00</td> 1675 <td class="num up">+1.79%</td> 1676 1677 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1678 1679 27,965â28,303 1680 1681 </td> 1682 1683 1684 </tr> 1685 1686 1687 <tr class="is-sample"> 1688 <td class="nm">ææ´²æ¯æå 50ææ¸ <span class="tag-sample">示ä¾</span><small>^STOXX50E</small></td> 1689 <td class="num">5,776</td> 1690 <td class="num up">+56.00</td> 1691 <td class="num up">+0.98%</td> 1692 1693 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1694 1695 5,741â5,811 1696 1697 </td> 1698 1699 1700 </tr> 1701 1702 1703 <tr class="is-sample"> 1704 <td class="nm">æ³¢åçææ¸ <span class="tag-sample">示ä¾</span><small>^VIX</small></td> 1705 <td class="num">14.85</td> 1706 <td class="num up">+0.05</td> 1707 <td class="num up">+0.34%</td> 1708 1709 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1710 1711 14.76â14.94 1712 1713 </td> 1714 1715 1716 </tr> 1717 1718</table> 1719 1720 1721 </div> 1722 1723 <div class="module"> 1724 <h3>大åè¡ä»½</h3> 1725 1726<table class="quotes"> 1727 <tr> 1728 <th>å ¬å¸</th> 1729 <th class="num">ææ°</th> 1730 <th class="num">åè·</th> 1731 <th class="num">%</th> 1732 <th class="num rng">å ¨æ¥æ³¢å¹ </th> 1733 1734 </tr> 1735 1736 1737 <tr class="is-sample"> 1738 <td class="nm">èæ <span class="tag-sample">示ä¾</span><small>AAPL</small></td> 1739 <td class="num">341.21</td> 1740 <td class="num up">+4.31</td> 1741 <td class="num up">+1.28%</td> 1742 1743 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1744 1745 339.16â343.26 1746 1747 </td> 1748 1749 1750 </tr> 1751 1752 1753 <tr class="is-sample"> 1754 <td class="nm">å¾®è» <span class="tag-sample">示ä¾</span><small>MSFT</small></td> 1755 <td class="num">391.76</td> 1756 <td class="num down">
1756-1.64</td> 1757 <td class="num down">-0.42%</td> 1758 1759 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1760 1761 389.41â394.11 1762 1763 </td> 1764 1765 1766 </tr> 1767 1768 1769 <tr class="is-sample"> 1770 <td class="nm">è±åé <span class="tag-sample">示ä¾</span><small>NVDA</small></td> 1771 <td class="num">206.50</td> 1772 <td class="num down">-2.00</td> 1773 <td class="num down">-0.96%</td> 1774 1775 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1776 1777 205.26â207.74 1778 1779 </td> 1780 1781 1782 </tr> 1783 1784 1785 <tr class="is-sample"> 1786 <td class="nm">Alphabet <span class="tag-sample">示ä¾</span><small>GOOGL</small></td> 1787 <td class="num">237.05</td> 1788 <td class="num down">-4.65</td> 1789 <td class="num down">-1.92%</td> 1790 1791 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1792 1793 235.63â238.47 1794 1795 </td> 1796 1797 1798 </tr> 1799 1800 1801 <tr class="is-sample"> 1802 <td class="nm">äºé¦¬é <span class="tag-sample">示ä¾</span><small>AMZN</small></td> 1803 <td class="num">268.47</td> 1804 <td class="num up">+0.17</td> 1805 <td class="num up">+0.06%</td> 1806 1807 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1808 1809 266.86â270.08 1810 1811 </td> 1812 1813 1814 </tr> 1815 1816 1817 <tr class="is-sample"> 1818 <td class="nm">Meta <span class="tag-sample">示ä¾</span><small>META</small></td> 1819 <td class="num">736.61</td> 1820 <td class="num down">-5.49</td> 1821 <td class="num down">-0.74%</td> 1822 1823 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1824 1825 732.19â741.03 1826 1827 </td> 1828 1829 1830 </tr> 1831 1832 1833 <tr class="is-sample"> 1834 <td class="nm">ç¹æ¯æ <span class="tag-sample">示ä¾</span><small>TSLA</small></td> 1835 <td class="num">420.97</td> 1836 <td class="num up">+1.37</td> 1837 <td class="num up">+0.33%</td> 1838 1839 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1840 1841 418.44â423.50 1842 1843 </td> 1844 1845 1846 </tr> 1847 1848 1849 <tr class="is-sample"> 1850 <td class="nm">æ©æ ¹å¤§é <span class="tag-sample">示ä¾</span><small>JPM</small></td> 1851 <td class="num">319.63</td> 1852 <td class="num up">+1.23</td> 1853 <td class="num up">+0.39%</td> 1854 1855 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1856 1857 317.71â321.55 1858 1859 </td> 1860 1861 1862 </tr> 1863 1864</table> 1865 1866 1867 </div> 1868 1869 <div class="module"> 1870 <h3>åå</h3> 1871 1872<table class="quotes"> 1873 <tr> 1874 <th>åç´</th> 1875 <th class="num">ææ°</th> 1876 <th class="num">åè·</th> 1877 <th class="num">%</th> 1878 <th class="num rng">å ¨æ¥æ³¢å¹ </th> 1879 1880 </tr> 1881 1882 1883 <tr class="is-sample"> 1884 <td class="nm">é»é <span class="tag-sample">示ä¾</span><small>GC=F</small></td> 1885 <td class="num">4,090</td> 1886 <td class="num up">+16.00</td> 1887 <td class="num up">+0.39%</td> 1888 1889 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1890 1891 4,065â4,115 1892 1893 </td> 1894 1895 1896 </tr> 1897 1898 1899 <tr class="is-sample"> 1900 <td class="nm">åæ²¹ï¼WTIï¼ <span class="tag-sample">示ä¾</span><small>CL=F</small></td> 1901 <td class="num">83.27</td> 1902 <td class="num down">-1.23</td> 1903 <td class="num down">-1.46%</td> 1904 1905 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1906 1907 82.77â83.77 1908 1909 </td> 1910 1911 1912 </tr> 1913 1914 1915 <tr class="is-sample"> 1916 <td class="nm">ç½é <span class="tag-sample">示ä¾</span><small>SI=F</small></td> 1917 <td class="num">57.12</td> 1918 <td class="num down">-0.08</td> 1919 <td class="num down">-0.14%</td> 1920 1921 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1922 1923 56.78â57.46 1924 1925 </td> 1926 1927 1928 </tr> 1929 1930 1931 <tr class="is-sample"> 1932 <td class="nm">å¤©ç¶æ°£ <span class="tag-sample">示ä¾</span><small>NG=F</small></td> 1933 <td class="num">2.63</td> 1934 <td class="num down">-0.05</td> 1935 <td class="num down">-1.87%</td> 1936 1937 <td class="num rng" style="color:var(--muted); font-size:12.5px;"> 1938 1939 2.61â2.65 1940 1941 </td> 1942 1943 1944 </tr> 1945 1946</table> 1947 1948 1949 </div> 1950 1951 1952 1953 </div> 1954 1955 <aside class="rail"> 1956 <h3>貨幣å¯ç</h3> 1957 1958 <table class="quotes"> 1959 1960 1961 <tr> 1962 <td class="nm">EUR/USD</td> 1963 <td class="num">1.1225</td> 1964 <td class="num down">-0.65%</td> 1965 </tr> 1966 1967 1968 <tr> 1969 <td class="nm">GBP/USD</td> 1970 <td class="num">1.3201</td> 1971 <td class="num down">-0.25%</td> 1972 </tr> 1973 1974 1975 <tr> 1976 <td class="nm">USD/JPY</td> 1977 <td class="num">157.67</td> 1978 <td class="num down">-0.20%</td> 1979 </tr> 1980 1981 1982 <tr> 1983 <td class="nm">USD/SGD</td> 1984 <td class="num">1.2798</td> 1985 <td class="num down">-0.01%</td> 1986 </tr> 1987 1988 1989 <tr> 1990 <td class="nm">
1990USD/CHF</td> 1991 <td class="num">0.8266</td> 1992 <td class="num down">-1.03%</td> 1993 </tr> 1994 1995 1996 <tr> 1997 <td class="nm">AUD/USD</td> 1998 <td class="num">0.6939</td> 1999 <td class="num down">-0.16%</td> 2000 </tr> 2001 2002 </table> 2003 <div class="stale-note"> 2004 æ¯æ¥åèå¯çï¼2026-10-02ã 2005 åè·ä»¥å°ä¸ä¸æ¬¡å®ç¤å¹è¨ç®ã 2006 </div> 2007 2008 2009 2010 <h3 style="margin-top:30px;">è²¡ç¶æ°è</h3> 2011 2012 <div class="story" style="padding:12px 0; border-bottom:1px solid var(--rule);"> 2013 <a href="/%E8%B2%A1%E7%B6%93/%E6%AD%90%E7%9B%9F%E6%96%99%E5%87%86%E4%BA%AC%E6%9D%B125%E5%84%84%E7%BE%8E%E5%85%83%E6%94%B6%E8%B3%BCCeconomy-22f2aa"> 2014 <span class="hl hl-sm">æçæå京æ±25åç¾å æ¶è³¼Ceconomy</span> 2015 </a> 2016 <div class="byline">財ç¶</div> 2017 </div> 2018 2019 <div class="story" style="padding:12px 0; border-bottom:1px solid var(--rule);"> 2020 <a href="/%E8%B2%A1%E7%B6%93/%E7%BE%8E%E5%B0%B1%E6%A5%AD%E6%95%B8%E6%93%9A%E9%81%9C%E9%A0%90%E6%9C%9F-%E8%81%AF%E5%84%B2%E5%B1%8010%E6%9C%88%E6%96%99%E6%8C%89%E5%85%B5%E4%B8%8D%E5%8B%95-9bef48"> 2021 <span class="hl hl-sm">ç¾å°±æ¥æ¸æéé æï¼è¯å²å±10æææå µä¸å</span> 2022 </a> 2023 <div class="byline">財ç¶</div> 2024 </div> 2025 2026 <div class="story" style="padding:12px 0; border-bottom:1px solid var(--rule);"> 2027 <a href="/%E8%B2%A1%E7%B6%93/%E6%B8%AF%E9%90%B5%E5%B0%B1%E9%AB%98%E9%90%B5%E5%BB%B6%E8%AA%A4%E8%88%87%E6%94%BF%E5%BA%9C%E9%81%94%E6%88%9022-5%E5%84%84%E5%92%8C%E8%A7%A3-9f661c"> 2028 <span class="hl hl-sm">港éµå°±é«éµå»¶èª¤èæ¿åºéæ22.5ååè§£</span> 2029 </a> 2030 <div class="byline">財ç¶</div> 2031 </div> 2032 2033 <div class="story" style="padding:12px 0; border-bottom:1px solid var(--rule);"> 2034 <a href="/%E8%B2%A1%E7%B6%93/%E6%9C%AC%E6%B8%AF8%E6%9C%88%E9%9B%B6%E5%94%AE%E9%8A%B7%E5%94%AE%E5%8D%875-6-%E5%88%86%E6%9E%90%E6%8C%87%E6%9C%AA%E4%BE%86%E6%95%B8%E6%9C%88%E5%8D%87%E5%B9%85%E6%88%96%E6%94%BE%E7%B7%A9-84d68b"> 2035 <span class="hl hl-sm">æ¬æ¸¯8æé¶å®é·å®å5.6%ï¼åæææªä¾æ¸æåå¹ ææ¾ç·©</span> 2036 </a> 2037 <div class="byline">財ç¶</div> 2038 </div> 2039 2040 2041 2042 <h3 style="margin-top:30px;">æ¸æèªªæ</h3> 2043 <p class="dek"> 2044 貨幣å¯ççºæ¯æ¥åèå¯çï¼æ¯åå·¥ä½å¤©æ´æ°ä¸æ¬¡ã 2045 ææ¸ãè¡ä»½åååå°æªæ¥é§å ±å¹ä¾æºã 2046 æææ¸åå ä¾åèï¼ä¸¦ä¸æ§ææè³å»ºè°ã 2047 </p> 2048 </aside> 2049</div> 2050 2051 </div> 2052</main> 2053 2054<footer class="site"> 2055 <div class="container"> 2056 <div class="fgrid"> 2057 <div> 2058 <span class="fbrand">CNFOL<em>.hk</em></span> 2059 <div class="flatin">ä¸å財ç¶å±æ</div> 2060 <p style="margin:0 0 10px; font-size:13.5px; line-height:1.7;"> 2061 ä¸å財ç¶å±æ CNFOL.hkï¼é¦æ¸¯ä¸æè²¡ç¶æ°èç¶²ï¼å ±é港è¡ãä¸å¸å ¬å¸æ¥ç¸¾åå¹´å ±ãæ¨å¸æäº¤ãå¯å¸èµ°å¢ï¼æ¶µèè¦èã財ç¶ãå°ç¢ãç¢ç¶åç°çå¸å ´ã 2062 </p> 2063 <p style="margin:0; color:var(--faint); font-size:11.5px;">© äºâäºå å¹´ãä¸å財ç¶å±æ CNFOL.hk 編輯é¨ãçæ¬ææ</p> 2064 <!-- Renders once Google's script loads; an empty div if it does not. --> 2065 <div class="prefsrc"><div google-add-preferred-source-btn data-theme="light"></div></div> 2066 </div> 2067 <div> 2068 <h4>çé¢</h4> 2069 2070 <div class="flink"><a href="/%E8%A6%81%E8%81%9E/">è¦è</a></div> 2071 2072 <div class="flink"><a href="/%E8%B2%A1%E7%B6%93/">財ç¶</a></div> 2073 2074 <div class="flink"><a href="/%E5%9C%B0%E7%94%A2/">å°ç¢</a></div> 2075 2076 <div class="flink"><a href="/%E7%94%A2%E7%B6%93/">ç¢ç¶</a></div> 2077 2078 <div class="flink"><a href="/%E7%92%B0%E7%90%83/">ç°ç</a></div> 2079 2080 </div> 2081 <div> 2082 <h4>編輯室</h4> 2083 <div class="flink"><a href="/%E7%B7%A8%E8%BC%AF%E5%9C%98%E9%9A%8A">編輯åé</a></div> 2084 <div class="flink"><a href="/%E9%97%9C%E6%96%BC%E6%88%91%E5%80%91">éæ¼ä¸å財ç¶å±æ</a></div> 2085 <div class="flink"><a href="/%E7%B7%A8%E8%BC%AF%E6%96%B9%E9%87%9D">編輯æ¹é</a></div> 2086 <div class="flink"><a href="/%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91">è¯çµ¡æååå ±æ</a></div> 2087 <div class="flink"><a href="/%E5%B8%82%E5%A0%B4/">å¸å ´æ¸æ</a></div> 2088 </div> 2089 <div> 2090 <h4>æ³å¾è³è¨</h4> 2091 <div class="flink"><a href="/%E7%A7%81%E9%9A%B1%E6%94%BF%E7%AD%96">ç§é±æ¿ç</a></div> 2092 <div class="flink"><a href="/%E4%BD%BF%E7%94%A8%E6%A2%9D%E6%AC%BE">ä½¿ç¨æ¢æ¬¾</a></div> 2093 <div class="flink"><a href="/%E6%9B%B4%E6%AD%A3%E6%94%BF%E7%AD%96">æ´æ£æ¿ç</a></div> 2094 <div class="flink" style="margin-top:10px;"> 2095 <a href="/feed.xml" rel="alternate">RSS</a> · 2096 <a href="/sitemap.xml">ç¶²ç«å°å</a> 2097 </div> 2098 </div> 2099 </div> 2100 <div class="fbot">
2101 <span>å¸å ´æ¸æå ä¾åèï¼ä¸æ§ææè³å»ºè°ã</span> 2102 </div> 2103 </div> 2104</footer> 2105 2106 2107
2108<script> 2109/* Mobile drawer. One listener set, no dependencies â this site ships no JS 2110 framework and this must not be the thing that introduces one. */ 2111(function () { 2112 var body = document.body; 2113 var toggle = document.querySelector('.navtoggle'); 2114 var drawer = document.getElementById('mobile-drawer'); 2115 var scrim = document.getElementById('drawer-scrim'); 2116 var closeB = document.querySelector('.drawer-close'); 2117 if (!toggle || !drawer || !scrim) return; 2118 2119 function setOpen(open) { 2120 body.classList.toggle('drawer-open', open); 2121 toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); 2122 toggle.setAttribute('aria-label', open ? 'ééé¸å®' : 'éåé¸å®'); 2123 drawer.setAttribute('aria-hidden', open ? 'false' : 'true'); 2124 scrim.hidden = !open; 2125 if (open) { 2126 var first = drawer.querySelector('a, button'); 2127 if (first) first.focus({preventScroll: true}); 2128 } else { 2129 toggle.focus({preventScroll: true}); 2130 } 2131 } 2132 2133 toggle.addEventListener('click', function () { 2134 setOpen(!body.classList.contains('drawer-open')); 2135 }); 2136 scrim.addEventListener('click', function () { setOpen(false); }); 2137 if (closeB) closeB.addEventListener('click', function () { setOpen(false); }); 2138 document.addEventListener('keydown', function (e) { 2139 if (e.key === 'Escape' && body.classList.contains('drawer-open')) setOpen(false); 2140 }); 2141 /* Resizing past the breakpoint with the drawer open would otherwise leave 2142 the page scroll-locked behind an invisible panel. */ 2143 window.addEventListener('resize', function () { 2144 if (window.innerWidth > 820 && body.classList.contains('drawer-open')) setOpen(false); 2145 }); 2146 var x0 = null; 2147 drawer.addEventListener('touchstart', function (e) { x0 = e.touches[0].clientX; }, {passive: true}); 2148 drawer.addEventListener('touchend', function (e) { 2149 if (x0 !== null && x0 - e.changedTouches[0].clientX > 60) setOpen(false); 2150 x0 = null; 2151 }, {passive: true}); 2152})(); 2153</script>
2153 2154
2155<script> 2156/* Copy-link. Delegated so both share rows on a page share one listener, and 2157 feature-detected so an insecure origin or an old browser simply leaves the 2158 button inert rather than throwing. */ 2159document.addEventListener('click', function (e) { 2160 var b = e.target.closest && e.target.closest('[data-share-copy]'); 2161 if (!b) return; 2162 var url = b.getAttribute('data-share-copy'); 2163 if (!navigator.clipboard) return; 2164 navigator.clipboard.writeText(url).then(function () { 2165 b.classList.add('copied'); 2166 b.setAttribute('title', 'å·²è¤è£½'); 2167 setTimeout(function () { b.classList.remove('copied'); b.setAttribute('title', 'è¤è£½é£çµ'); }, 1600); 2168 }); 2169}); 2170</script>
2170 2171 2172<div class="savebar" id="savebar" hidden role="region" aria-label="å°CNFOLå å ¥æ¸ç±¤"> 2173 <div class="inner"> 2174 2175 <svg class="mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false"> 2176 <circle cx="16" cy="16" r="16" fill="var(--blue)"></circle> 2177 <path d="M11 9h10v14l-5-4-5 4V9z" fill="none" stroke="#fff" 2178 stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path> 2179 </svg> 2180 <div class="copy"> 2181 <strong id="savebar-title">財ç¶ãæ¥ç¸¾ãå°ç¢ãå¤å¯ï¼ä¸éæ©å°±çå°</strong> 2182 <span>æCNFOLå å ¥æ¸ç±¤æè¨çºé¦é ï¼ä¸æ¬¡ä¸ç¨åæå°ã</span> 2183 </div> 2184 <div class="acts"> 2185 <!-- Google's button first: it is the one action here that is worth more 2186 than a bookmark, because it changes what Google shows the reader 2187 rather than only what their own browser remembers. --> 2188 <div class="prefsrc prefsrc-bar"><div google-add-preferred-source-btn data-theme="light"></div></div> 2189 <button type="button" class="go" id="savebar-go">å å ¥æ¸ç±¤</button> 2190 <button type="button" class="alt" id="savebar-home">è¨çºé¦é </button> 2191 <button type="button" class="no" id="savebar-no">ä¸ç¨äº</button> 2192 </div> 2193 </div> 2194 <div class="how" id="savebar-how"> 2195 <div class="inner"> 2196 <h4 id="savebar-how-title"></h4> 2197 <ol id="savebar-how-steps"></ol> 2198 <div class="urlrow"> 2199 <code id="savebar-url"></code> 2200 <button type="button" class="alt" id="savebar-copy">è¤è£½ç¶²å</button> 2201 </div> 2202 </div> 2203 </div> 2204</div> 2205
2206<script> 2207 2208/* âââ Save-this-site prompt âââââââââââââââââââââââââââââââââââââââââââââââ 2209 Shown once, to a first-time reader, after they have stayed long enough to 2210 suggest the site is worth keeping. 2211 2212 WHAT IT CAN AND CANNOT DO. There is no web API to add a bookmark or set a 2213 homepage; both were removed years ago because they were abused. The one 2214 real capability is the install prompt browsers offer via 2215 beforeinstallprompt, so this uses that where it exists and gives accurate 2216 per-platform steps where it does not. No button here pretends to work. 2217 2218 STATE. One localStorage key. "off" is permanent; a timestamp is a snooze, 2219 so a reader who ignores the bar gets it once more a fortnight later rather 2220 than on every visit. localStorage in a partitioned or private context can 2221 throw on write, hence the try/catch â a storage failure must degrade to 2222 "do not show" rather than to "show on every page". */ 2223(function () { 2224 /* The masthead's own name, so the instructions read correctly on whichever 2225 site this is. |tojson quotes and escapes it for a JS string literal. */ 2226 var BRAND = "CNFOL"; 2227 var KEY = "cnfol.save.v1"; 2228 var DELAY_MS = 7000; /* dwell before asking */ 2229 var SCROLL = 0.28; /* or this far down the page, whichever first */ 2230 var SNOOZE = 14 * 864e5; 2231 2232 var bar = document.getElementById('savebar'); 2233 if (!bar) return; 2234 2235 /* Already installed as an app â the ask is answered. */ 2236 if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) return; 2237 if (window.navigator.standalone) return; 2238 2239 function read() { 2240 try { return localStorage.getItem(KEY); } catch (e) { return 'off'; } 2241 } 2242 function write(v) { 2243 try { localStorage.setItem(KEY, v); } catch (e) {} 2244 } 2245 2246 var seen = read(); 2247 if (seen === 'off') return; 2248 if (seen && Date.now() - parseInt(seen, 10) < SNOOZE) return; 2249 2250 var howBox = document.getElementById('savebar-how'); 2251 var howTitle = document.getElementById('savebar-how-title'); 2252 var howSteps = document.getElementById('savebar-how-steps'); 2253 var urlCode = document.getElementById('savebar-url'); 2254 var copyBtn = document.getElementById('savebar-copy'); 2255 var goBtn = document.getElementById('savebar-go'); 2256 var homeBtn = document.getElementById('savebar-home'); 2257 var noBtn = document.getElementById('savebar-no'); 2258 2259 var origin = location.origin || (location.protocol + '//' + location.host); 2260 urlCode.textContent = origin; 2261 2262 var ua = navigator.userAgent; 2263 var isIOS = /iPad|iPhone|iPod/.test(ua) || 2264 (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); 2265 var isMac = /Mac/.test(navigator.platform || ''); 2266 var isTouch = isIOS || /Android/.test(ua); 2267 var mod = isMac ? 'â' : 'Ctrl'; 2268 2269 /* Chromium fires this instead of showing its own install UI; capturing it 2270 is what lets the amber button be a real prompt rather than a diagram. */ 2271 var deferred = null; 2272 window.addEventListener('beforeinstallprompt', function (e) { 2273 e.preventDefault(); 2274 deferred = e; 2275 goBtn.textContent = 'å å°ä¸»ç«é¢'; 2276 }); 2277 2278 function showHow(title, steps, withUrl) { 2279 howTitle.textContent = title; 2280 howSteps.innerHTML = ''; 2281 steps.forEach(function (s) { 2282 var li = document.createElement('li'); 2283 li.innerHTML = s; 2284 howSteps.appendChild(li); 2285 }); 2286 howBox.querySelector('.urlrow').style.display = withUrl ? 'flex' : 'none'; 2287 howBox.classList.add('on'); 2288 } 2289 2290 function dismiss(permanent) { 2291 bar.classList.remove('up'); 2292 write(permanent ? 'off' : String(Date.now())); 2293 /* Wait out the slide before pulling it from the layout, so the exit is 2294 animated rather than an abrupt disappearance. */ 2295 setTimeout(function () { bar.hidden = true; }, 360); 2296 } 2297 2298 goBtn.addEventListener('click', function () { 2299 if (deferred) { 2300 deferred.prompt(); 2301 deferred.userChoice.then(function (r) { 2302 if (r && r.outcome === 'accepted') dismiss(true); 2303 }); 2304 deferred = null; 2305 return; 2306 } 2307 if (isIOS) { 2308 showHow('å¨ iPhone / iPad ä¸å å°ä¸»ç«é¢', [ 2309 'æç覽å¨åºé¨çãå享ãå示 <strong>â¬</strong>', 2310 'å䏿²åï¼é¸æã<strong>å å ¥ä¸»ç«é¢</strong>ã', 2311 'æãå å ¥ãï¼' + BRAND + ' å°±æå app 䏿¨£åºç¾å¨ä¸»ç«é¢' 2312 ], false); 2313 } else if (isTouch) { 2314 showHow('å¨ Android ä¸å å ¥æ¸ç±¤', [ 2315 'æå³ä¸è§çã<strong>â®</strong>ãé¸å®', 2316 '鏿æèå示 <strong>â</strong>ï¼æãå å°ä¸»ç«é¢ã', 2317 'æ¸ç±¤æåæ¾å¨ãæ¸ç±¤ãå表ï¼ä¸»ç«é¢æ·å¾åæç´æ¥åºç¾å¨æ¡é¢' 2318 ], false); 2319 } else { 2320 showHow('å¨é»è ¦ä¸å å ¥æ¸ç±¤', [ 2321 'æ <kbd>' + mod + '</kbd> + <kbd>D</kbd>', 2322 'é¸æãæ¸ç±¤åãä½çºåæ¾ä½ç½®ï¼éæ¨£æ¯æ¬¡éæ°åé é½è¦å°', 2323 'æã宿ã' 2324 ], false); 2325 } 2326 }); 2327 2328 homeBtn.addEventListener('click', function () { 2329 if (isIOS) { 2330 showHow('æ' + BRAND + 'è¨çº Safari é¦é ', [ 2331 'éåã<strong>è¨å®</strong>ãâã<strong>Safari</strong>ãâã<strong>主é </strong>ã', 2332 'è²¼ä¸ä¸é¢çç¶²å並å²å', 2333 'ä¹å¾æ Safari çä¸»é æéå°±æç´æ¥éå' + BRAND 2334 ], true); 2335 } else if (isTouch) { 2336 showHow('æ' + BRAND + 'è¨çºç覽å¨é¦é ', [ 2337 'Chromeï¼ã<strong>â®</strong>ãâãè¨å®ãâãé¦é ãâ éå並貼ä¸ç¶²å', 2338 'è¿åç覽å¨ï¼æé¦é æéå³å¯ç´æ¥éå' 2339 ], true); 2340 } else { 2341 showHow('æ' + BRAND + 'è¨çºéæ©é¦é ', [ 2342 'Chromeï¼ã<strong>â®</strong>ãâãè¨å®ãâãèµ·å§ç«é¢ãâãéå以ä¸ç¹å®ç¶²é ãâãæ°å¢ç¶²é ã', 2343 'Edgeï¼ã<strong>â¦</strong>ãâãè¨å®ãâãéå§ãé¦é åæ°åé ãâãéåéäºç¶²é ã', 2344 'Safariï¼ãSafariãâãè¨å®ãâãä¸è¬ãâãé¦é ã', 2345 'Firefoxï¼ãâ°ãâãè¨å®ãâãé¦é ãâãèªè¨ç¶²åã', 2346 'è²¼ä¸ä¸é¢çç¶²å並å²å' 2347 ], true); 2348 } 2349 }); 2350 2351 copyBtn.addEventListener('click', function () { 2352 var done = function () { 2353 copyBtn.textContent = 'å·²è¤è£½ â'; 2354 setTimeout(function () { copyBtn.textContent = 'è¤è£½ç¶²å'; }, 2200); 2355 }; 2356 if (navigator.clipboard && navigator.clipboard.writeText) { 2357 navigator.clipboard.writeText(origin).then(done, function () {}); 2358 return; 2359 } 2360 /* Pre-clipboard-API browsers, and any context where the permission is 2361 refused: select the text so the reader can copy it themselves. */ 2362 var r = document.createRange(); 2363 r.selectNodeContents(urlCode); 2364 var sel = window.getSelection(); 2365 sel.removeAllRanges(); 2366 sel.addRange(r); 2367 }); 2368 2369 noBtn.addEventListener('click', function () { dismiss(true); }); 2370 2371 document.addEventListener('keydown', function (e) { 2372 if (e.key === 'Escape' && bar.classList.contains('up')) dismiss(false); 2373 }); 2374 2375 /* Reveal. hidden must come off a frame before the class that animates the 2376 transform, or the browser has nothing to transition from. */ 2377 var shown = false;
2378 function reveal() { 2379 if (shown) return; 2380 shown = true; 2381 clearTimeout(timer); 2382 window.removeEventListener('scroll', onScroll); 2383 bar.hidden = false; 2384 requestAnimationFrame(function () { 2385 requestAnimationFrame(function () { bar.classList.add('up'); }); 2386 }); 2387 } 2388 2389 function onScroll() { 2390 var h = document.documentElement.scrollHeight - window.innerHeight; 2391 if (h > 0 && window.pageYOffset / h > SCROLL) reveal(); 2392 } 2393 2394 var timer = setTimeout(reveal, DELAY_MS); 2395 window.addEventListener('scroll', onScroll, {passive: true}); 2396 2397 /* Leaving without answering counts as a soft no, not as never-asked. */ 2398 window.addEventListener('pagehide', function () { 2399 if (shown && !bar.hidden && !read()) write(String(Date.now())); 2400 }); 2401})(); 2402 2403</script>
vendor: 1 bytes, line 2403
2403
2404<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ed71b645d9be4baa93a669c503770c61","r":1,"spa":2}' crossorigin="anonymous"></script>
2404 2405</body> 2406</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.