/* ========================================================================= SIRINAPA — styles for the new pages only. Every rule below starts with .page-catalog or .page-object. Both classes sit on , so the wrapper styles the page without a single bare `body`, `h1`, `p`, `a` or `:root` rule. index.html does not link this file and cannot be affected by it. success.html carries class="page-object page-success" — it reuses the object palette and adds a couple of rules of its own. Palette, fonts and numeral settings are copied from index.html, not invented: same dark ground, same gold, same Cormorant Garamond + Inter. Cinzel is not used because index.html does not use it and does not load it. ========================================================================= */ /* ---------------- base ---------------- */ .page-catalog, .page-object { --ink: #0d1013; --ink-2: #151a1f; --ink-3: #1d242b; --gold: #c9a227; --gold-soft: #e0c265; --paper: #f4f1ec; --muted: #9aa3ab; --line: rgba(201, 162, 39, .28); --maxw: 1180px; /* Serif fallbacks so a Chinese or Thai heading does not drop to a system sans and make the page look like a different, cheaper site. */ --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'SimSun', 'Noto Serif Thai', 'Thonburi', Georgia, serif; /* System Chinese fonts ahead of the web one. The web build of Noto CJK ships without hinting and blurs on an ordinary screen under Windows; PingFang SC and Microsoft YaHei are made for the screen. Latin still comes from Inter and Thai from Noto Sans Thai — neither PingFang nor YaHei carries Thai, and the order guarantees it. Noto Sans SC stays for Android and Linux, which have neither system face. */ --font-body: Inter, 'Noto Sans Thai', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, sans-serif; margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Old-style figures turn 131 into I3I. Straight figures everywhere. */ font-variant-numeric: lining-nums; -webkit-font-feature-settings: "lnum" 1, "onum" 0; font-feature-settings: "lnum" 1, "onum" 0; } /* Thai vowel and tone marks stack above and below the line and collide at the Latin default leading. */ html[lang="th"] .page-catalog, html[lang="th"] .page-object { line-height: 1.75; } /* Thai and letter-spacing do not go together. Spacing pushes apart more than letters: the vowel signs and tone marks that sit above and below a letter come loose and hang in the gap, and a word reads as debris. In Thai the spacing goes off the whole page, with one exception — the language buttons, or the header would jump on every switch. !important because several of the rules that set letter-spacing are more specific than this selector. The wrapper class sits on , so this stays scoped to the new pages. */ html[lang="th"] .page-catalog *:not([data-lang]), html[lang="th"] .page-object *:not([data-lang]) { letter-spacing: 0 !important; } /* A floor on the size for Chinese and Thai. A Latin capital has two or three strokes and reads fine at 11px. A Chinese character has ten to fifteen and they merge into a blot at that size; Thai vowel signs and tone marks become impossible to tell apart. 13px, and only for the selectors that measurement found below it. The extra attribute selector outweighs the originals, media queries included. */ html[lang="zh-CN"] .page-catalog .eyebrow, html[lang="zh-CN"] .page-object .eyebrow, html[lang="th"] .page-catalog .eyebrow, html[lang="th"] .page-object .eyebrow, html[lang="zh-CN"] .page-catalog .mini, html[lang="zh-CN"] .page-object .mini, html[lang="th"] .page-catalog .mini, html[lang="th"] .page-object .mini, html[lang="zh-CN"] .page-catalog label, html[lang="zh-CN"] .page-object label, html[lang="th"] .page-catalog label, html[lang="th"] .page-object label, html[lang="zh-CN"] .page-catalog .langs button, html[lang="zh-CN"] .page-object .langs button, html[lang="th"] .page-catalog .langs button, html[lang="th"] .page-object .langs button, html[lang="zh-CN"] .page-object .tag, html[lang="th"] .page-object .tag, html[lang="zh-CN"] .page-object .spec .k, html[lang="th"] .page-object .spec .k, html[lang="zh-CN"] .page-object .crumb, html[lang="th"] .page-object .crumb, html[lang="zh-CN"] .page-object .aerial-cap, html[lang="th"] .page-object .aerial-cap, html[lang="zh-CN"] .page-object .price small, html[lang="th"] .page-object .price small, html[lang="zh-CN"] .page-catalog .pcard-type, html[lang="th"] .page-catalog .pcard-type, html[lang="zh-CN"] .page-catalog .pcard-badge, html[lang="th"] .page-catalog .pcard-badge, html[lang="zh-CN"] .page-catalog .ph, html[lang="th"] .page-catalog .ph, html[lang="zh-CN"] .page-catalog .filters button, html[lang="th"] .page-catalog .filters button { font-size: 13px; } /* Wide letter-spacing is a Latin device. Chinese does not use it: the characters already sit on their own square grid and the extra gap pulls the line apart. The language buttons keep theirs, or the header would jump on every switch. */ html[lang="zh-CN"] .page-catalog *:not([data-lang]), html[lang="zh-CN"] .page-object *:not([data-lang]) { letter-spacing: .05em !important; } /* Capitals are a Latin device too, and characters ignore them — but the Latin inside the same caption does not. In Chinese the key facts read «平方哇 · 524 M²» instead of «m²». Capitals are cancelled for Chinese only; English and Thai keep them. */ html[lang="zh-CN"] .page-object .spec .k { text-transform: none; } /* Weights in Chinese. The light 300 comes from the wrapper and from the form fields. It suits Latin, but thin Chinese strokes at 13-16px in grey read as washed out, so Chinese gets the regular weight. The display face must not move, and only .spec .v declares a weight of its own — .price, .pcard-price and .loc-place inherit 300 from the wrapper and would have been dragged up with it, so they are given their 300 back by name. The small print inside them is set in Inter and stays at 400. The 600 on badges, buttons and the active filter welds the ten to fifteen strokes of a character into a blot at 13px. 500 gives Microsoft YaHei Regular on Windows, PingFang SC Medium on iPhone and Noto Sans SC 500 on Android. The language buttons keep what they have. */ html[lang="zh-CN"] .page-catalog, html[lang="zh-CN"] .page-object, html[lang="zh-CN"] .page-catalog input, html[lang="zh-CN"] .page-catalog select, html[lang="zh-CN"] .page-catalog textarea, html[lang="zh-CN"] .page-object input, html[lang="zh-CN"] .page-object select, html[lang="zh-CN"] .page-object textarea { font-weight: 400; } html[lang="zh-CN"] .page-object .tag, html[lang="zh-CN"] .page-catalog .pcard-badge, html[lang="zh-CN"] .page-catalog .btn, html[lang="zh-CN"] .page-object .btn, html[lang="zh-CN"] .page-catalog .filters button[aria-pressed="true"] { font-weight: 500; } html[lang="zh-CN"] .page-object .price, html[lang="zh-CN"] .page-catalog .pcard-price, html[lang="zh-CN"] .page-object .loc-place { font-weight: 300; } html[lang="zh-CN"] .page-object .price small { font-weight: 400; } .page-catalog *, .page-object * { box-sizing: border-box; } .page-catalog img, .page-object img { max-width: 100%; height: auto; display: block; } /*