/* BinaryPHP landing — Open 粉圓 + system fallback, dark theme, single-file.
*
* Font loading strategy:
* 1. in kicks off the font download as early
* as the HTML byte stream is parsed.
* 2. @font-face below uses `font-display: swap` so first paint uses the OS
* sans-serif (instant, no FOIT) and the page swaps to Open Huninn
* mid-render once the woff2 finishes downloading (~2.1 MB).
* 3. The font is served from download.binaryphp.com (Cloudflare R2 public
* bucket via custom domain) — globally CDN-cached at CF edge so a
* visitor in Taiwan, the US, and Europe all download from the nearest
* PoP. Origin /assets/fonts/ is kept as a same-origin fallback only.
*/
@font-face {
font-family: 'Open Huninn';
src: url('https://download.binaryphp.com/fonts/jf-openhuninn-2.1.woff2') format('woff2');
font-weight: 100 900; /* variable-ish range; jf-openhuninn ships one weight */
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, /* Basic Latin */
U+00A0-00FF, /* Latin-1 Supplement */
U+2000-206F, /* General Punctuation */
U+3000-303F, /* CJK Symbols and Punctuation */
U+3100-312F, /* Bopomofo */
U+31A0-31BF, /* Bopomofo Extended */
U+4E00-9FFF, /* CJK Unified Ideographs */
U+FF00-FFEF; /* Halfwidth/Fullwidth Forms */
}
/* Per-language fonts — full character coverage (no subsetting), so user-typed
content (support tickets, plugin names) renders consistently. Sizes:
TangYuan ~1.3 MB, Kosugi Maru ~1.5 MB, Nanum Square Round ~240 KB.
Loaded only when html[lang] matches via the body[lang=...] selector below.
font-display: swap — system font shows first, swap once webfont arrives. */
@font-face {
font-family: 'TangYuan';
src: url('https://download.binaryphp.com/fonts/tangyuan-full.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Kosugi Maru';
src: url('https://download.binaryphp.com/fonts/kosugimaru-full.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nanum Square Round';
src: url('https://download.binaryphp.com/fonts/nanumsquareround-full.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* MiSans Thai — variable font, ~22 KB, covers full Thai script + Latin.
The variation axis spans Thin (100) → Heavy (900). */
@font-face {
font-family: 'MiSans Thai';
src: url('https://download.binaryphp.com/fonts/misansthai-vf.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Nunito — rounded geometric sans, variable font, ~99 KB. Covers Latin
Extended-A (German umlauts ä ö ü ß), Latin Extended-B, and Cyrillic.
Used for de + fr to match the rounded visual style of the CJK fonts. */
@font-face {
font-family: 'Nunito';
src: url('https://download.binaryphp.com/fonts/nunito-vf.woff2') format('woff2-variations');
font-weight: 200 1000;
font-style: normal;
font-display: swap;
}
/* Apply language-specific fonts via html[lang]. Each rule overrides --sans so
every place in the codebase that uses var(--sans) (i.e. body and most text)
automatically picks up the right font. The original Open Huninn fallback
chain is preserved as fallbacks after the language-specific font. */
html[lang="zh-CN"] {
--sans: 'TangYuan', 'Open Huninn', -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[lang="ja"] {
--sans: 'Kosugi Maru', 'Open Huninn', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[lang="ko"] {
--sans: 'Nanum Square Round', 'Open Huninn', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[lang="th"] {
--sans: 'MiSans Thai', 'Open Huninn', -apple-system, BlinkMacSystemFont, "Sukhumvit Set", "Krub", "Noto Sans Thai", "Thonburi", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[lang="de"], html[lang="fr"] {
--sans: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root {
--bg: #0b0d10;
--bg-soft: #14171c;
--bg-card: #181c22;
--border: #232830;
--text: #e6e8eb;
--text-dim: #9aa3ad;
--text-muted: #6c7480;
--accent: #ff7a18; /* warm orange — "binary heat" */
--accent-soft: #ffd9b8;
--good: #4ade80;
--code-bg: #0e1116;
--shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.4);
--max: 1100px;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--sans: 'Open Huninn', -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
/* ── Nav ─────────────────────────────────────── */
.nav {
border-bottom: 1px solid var(--border);
background: rgba(11,13,16,.85);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 50;
}
.nav-row {
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
}
.brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--text);
font-weight: 700;
font-size: 18px;
}
.brand-mark {
font-family: var(--mono);
color: var(--accent);
letter-spacing: -1px;
}
.brand-name { letter-spacing: -.5px; }
.accent { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
flex-wrap: nowrap; /* lang switcher must not drop to a second row */
min-width: 0; /* allow children to shrink instead of overflowing the row */
}
/* Mobile hamburger — checkbox + label trick (no JS). The hidden checkbox
stores the open/closed state; the