with no .wall__img inside */
.wall--fire {
background:
radial-gradient(60% 75% at 12% 16%, var(--wall-fire-1), transparent 72%),
radial-gradient(55% 70% at 94% 22%, var(--wall-fire-2), transparent 72%),
radial-gradient(80% 85% at 55% 115%, var(--wall-fire-3), transparent 72%),
var(--wall-fire-base);
}
/* ==========================================================================
12. Hongguo additions: Chinese text, frames and crops for the Hongguo app's own screenshots (tour, bento, free
band), a bento with any number of tiles, a four-item trust bar, three source cards, the compare table, the
"New in 2.0" cards, the language link and the large-screen caps for 1x screenshots. Rem only (except the
screenshot caps), so section 9 scales them above 1920 px like everything else.
========================================================================== */
/* ---- Chinese text ------------------------------------------------------------------------------------------------
Drama titles, the app's Chinese name and the /zh/ pages: Mona Sans, Onest and Cascadia Mono have no Chinese, so
Simplified Chinese fonts come before the generic families (otherwise an English page may draw Chinese characters
with Japanese shapes). Latin text is unchanged. Mark Chinese words:
... */
:root {
--font-cjk: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC';
--font-display: 'Mona Sans', 'Segoe UI Variable Display', 'Segoe UI', var(--font-cjk), system-ui, sans-serif;
--font-body: 'Onest', 'Segoe UI Variable Text', 'Segoe UI', var(--font-cjk), system-ui, sans-serif;
--font-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, var(--font-cjk), monospace;
}
/* a Chinese page or heading: no negative tracking (it is tuned for Latin letters) and room for the taller glyphs */
.hero__title:lang(zh), .co-hero__title:lang(zh), .h-display:lang(zh), .page__title:lang(zh), .h-card:lang(zh),
.tour__title:lang(zh), .plan__name:lang(zh) { letter-spacing: 0; }
.hero__title:lang(zh), .co-hero__title:lang(zh) { line-height: 1.12; }
/* the brand's Chinese name before "Hongguo Downloader", in the ember accent as on the older pages:
(Chinese name) Hongguo Downloader */
.brand__cn { color: var(--ember); font-weight: 700; }
/* ---- The Hongguo app's screenshots --------------------------------------------------------------------------------
The 2.0 app is captured as its window's client area: 1264 x 791 px for a 1280 x 800 window (2x / 3x copies keep
the ratio). Once the 1px screenshot edge is trimmed that is a 16:10 frame: .shot--hg, used in place of .shot--app
(the 1440 x 940 window frame). Each light/dark pair is taken at the same moment, in the same state and size */
.shot--hg { aspect-ratio: 1600 / 1000; }
/* a screenshot of any other size or crop: the frame takes the picture's own ratio (both theme copies share one grid
cell, as the guides' .guide-shot does), so it needs no ratio class:
*/
.shot--auto { display: grid; }
.shot--auto > img { position: static; grid-area: 1 / 1; width: calc(100% + 0.125rem); max-width: none; height: auto; margin: -0.0625rem; }
/* the hero's floating detail window as a crop (.hero__detail.shot--auto) keeps the hero's rule: shown from 1024 px */
.hero__detail.shot--auto { display: none; }
@media (min-width: 1024px) {
.hero__detail.shot--auto { display: grid; }
}
/* ...drawn at its own size and never enlarged (a small crop; as the guides' .guide-fig--fit): add .shot--fit. The
img's width attribute reserves the box before the file loads (browsers without typed attr() keep width: auto) */
.shot--fit { width: fit-content; max-width: 100%; }
.shot--auto.shot--fit > img { width: auto; width: attr(width px); max-width: calc(100% + 0.125rem); }
/* showcase tour with the Hongguo screenshots: . From 768 px every step shows the
whole 16:10 window on the stage. On phones and in the thumbnails the frame crops the window to the page right of
the sidebar, from its top left. Two steps have their own crop: the series window step (class --pick or --series on
.tour__shot and .tour__thumb) starts at the series window's top left corner (x 182, y 72 of the 1264 x 791
capture), and the player step (--player) takes most of the window (about x 99-1170, y 62-777), so the actor's face
and the whole control bar show. The crops are set for the 1264 x 791 captures; /whatsnew/ uses the same values for
its phone figures. From 768 px the thumbnails sit in one row whatever their number (the base row is made for four);
below 768 px they sit two by two and an odd last one (the fifth, Player) is centred under the others */
.tour--hg .tour__thumb .shot > img { width: 200%; left: -42.4%; top: -11.6%; }
.tour--hg .tour__thumb--pick .shot > img, .tour--hg .tour__thumb--series .shot > img { left: -28.8%; top: -17.1%; }
.tour--hg .tour__thumb--player .shot > img { width: 118%; left: -9.2%; top: -8.7%; }
@media (max-width: 767.98px) {
.tour--hg .tour__stage[data-active] .tour__frame { aspect-ratio: 324 / 216; }
.tour--hg .tour__shot > img { width: 200%; left: -42.4%; top: -11.6%; }
.tour--hg .tour__shot--pick > img, .tour--hg .tour__shot--series > img { left: -28.8%; top: -17.1%; }
.tour--hg .tour__shot--player > img { width: 118%; left: -9.2%; top: -8.7%; }
.tour--hg .tour__thumb:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.25rem); }
}
@media (min-width: 768px) {
.tour--hg .tour__shot { width: 90.75%; aspect-ratio: 1600 / 1000; }
.tour--hg .tour__thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* the bento's Library crop with a Hongguo screenshot:
starts right of the
sidebar (the base .lib-shot crop would show a strip of it); same frame, same vertical crop */
.lib-shot--hg > img { width: 240%; left: -50.3%; top: -19.7%; }
@media (min-width: 768px) {
.lib-shot--hg > img { width: 179.1%; left: -37.55%; top: -23%; }
}
/* a real screenshot crop as a bento card's picture, in place of an HTML demo: a light/dark pair of files cropped from
the app's screenshots (same box in both), in a frame that takes their ratio. As the card's last piece it runs off
the card's bottom edge, like the Library crop, so a crop a little too tall is cut cleanly by the card:
(the two imgs)
*/
.bento__shot { border-radius: 0.5rem 0.5rem 0 0; box-shadow: 0 0 0 1px var(--line); background: var(--app-bg); }
.bento__demo:last-child > .bento__shot:last-child { margin-bottom: -1.5rem; }
@media (min-width: 768px) {
.bento__demo:last-child > .bento__shot:last-child { margin-bottom: -1.75rem; }
}
/* a bento with any number of tiles (the base bento is laid out for its seven named tiles): . Phones: one tile per row. Tablets (768-1279): two columns, a --wide or --big tile takes the whole row.
From 1280 px four columns and rows at least 18.75rem tall: a tile takes 1 column, --wide 2, --big 2 x 2, packed in
order with the gaps filled. Use only --wide / --big here, not the named tiles (--pick, --queue, --stat ...) */
.bento--auto .bento__card--big { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
.bento--auto > .bento__card { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
.bento--auto { grid-template-rows: none; grid-auto-rows: minmax(18.75rem, auto); grid-auto-flow: row dense; }
.bento--auto > .bento__card { grid-column: span 1; grid-row: auto; }
.bento--auto > .bento__card--wide { grid-column: span 2; }
.bento--auto > .bento__card--big { grid-column: span 2; grid-row: span 2; }
}
/* the free band's picture as real screenshot crops, in place of the HTML .free-card: one or more framed crops centred
on the panel.
(.shot.shot--auto.window
crops, with .shot--fit to draw each at its own size)
*/
.free__shots { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
@media (min-width: 768px) {
.free__shots { gap: 1.25rem; }
}
/* ---- Trust bar with four items:
(the base bar is made for five) ----------- */
@media (max-width: 1023.98px) {
.trust__list--4 li:last-child { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
@media (min-width: 1024px) {
.trust__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1921px) {
.trust__list--4 { grid-template-columns: repeat(4, auto); }
}
/* ---- Three source cards (FireCode's .sources--3): ------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
.sources--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.sources--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- Compare table (#compare) -------------------------------------------------------------------------------------
One row per point, one column per way to keep a drama. The table's second column (the first product, Hongguo
Downloader) is lifted: a fire bar on its head and a warm wash. Wider than a phone, the table scrolls sideways inside
its card and the row labels stay in view. Marks: .compare__mark with --yes / --no / --part, an icon plus
visually-hidden words (the icon alone says nothing to a screen reader). The card is position: relative so those
words (absolutely placed) stay inside the scrolling card; without it they would widen the whole page on a phone */
.compare {
position: relative; margin-top: 2rem; overflow-x: auto; overscroll-behavior-x: contain;
background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-card);
}
.compare table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.375rem; }
.compare th, .compare td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; color: var(--ink-2); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th {
padding-block: 1.125rem 1rem; vertical-align: bottom;
font-family: var(--font-display); font-weight: 650; font-size: 1rem; line-height: 1.375rem; letter-spacing: -0.01em; color: var(--ink);
}
.compare thead small { display: block; margin-top: 0.125rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.compare th:first-child { position: sticky; left: 0; z-index: 1; width: 34%; text-align: left; background: var(--surface); }
.compare :is(th, td):nth-child(2) { background: var(--fire-softer); color: var(--ink); }
.compare thead th:nth-child(2) { box-shadow: inset 0 0.1875rem 0 var(--fire-solid); }
.compare__mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; vertical-align: middle; }
.compare__mark svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare__mark--yes { background: var(--ember-soft); color: var(--ember); }
.compare__mark--no { background: var(--fill); color: var(--ink-3); }
.compare__mark--part { background: var(--fill); color: var(--ink-2); }
.compare__note { margin-top: 1.25rem; max-width: 45rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-3); text-wrap: pretty; }
/* the key to the marks, under the table:
(yes mark) yes(part mark)
depends(no mark) no
*/
.compare__legend { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-3); }
.compare__legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.compare__legend .compare__mark { width: 1.375rem; height: 1.375rem; }
.compare__legend .compare__mark svg { width: 0.75rem; height: 0.75rem; }
/* phones: a narrower label column and tighter cells, so a label and about one and a half columns show at once */
@media (max-width: 767.98px) {
.compare table { min-width: 35rem; }
.compare th, .compare td { padding: 0.75rem; }
.compare th:first-child { width: 9rem; padding-left: 1rem; box-shadow: inset -1px 0 0 var(--line); }
}
@media (min-width: 768px) {
.compare { margin-top: 3rem; }
/* equal product columns (the label column keeps its 34%) */
.compare table { table-layout: fixed; }
.compare thead th:not(:first-child) { width: 22%; }
.compare th, .compare td { padding: 1rem 1.25rem; }
.compare thead th { font-size: 1.0625rem; }
.compare th:first-child { padding-left: 1.75rem; }
.compare__note { margin-top: 1.5rem; font-size: 1rem; line-height: 1.625rem; }
.section-head--center ~ .compare__note { margin-inline: auto; text-align: center; }
.section-head--center ~ .compare__legend { justify-content: center; }
}
@media (min-width: 1280px) {
.compare { margin-top: 3.5rem; }
.compare th, .compare td { padding: 1.125rem 1.5rem; }
.compare th:first-child { padding-left: 2rem; }
}
/* ---- "New in 2.0" (#new): one small card per change (an icon tile, a title, a line or two), then a row of links -- */
.newin { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.newin__item { display: flex; flex-direction: column; padding: 1.5rem; }
.newin__icon {
display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem;
border-radius: 0.75rem; background: var(--fire-soft); color: var(--ember);
}
/* a filled icon is drawn in ember; so is a line icon whose shapes use fill="none" stroke="currentColor" */
.newin__icon svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.newin__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.newin__item .h-card, .sources__title { text-wrap: balance; }
.newin__note { margin-top: 1.5rem; max-width: 45rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.newin__note + .newin__note { margin-top: 0.75rem; }
.newin__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (min-width: 768px) {
.newin { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.newin__item { padding: 2rem; }
.newin__note { margin-top: 2rem; font-size: 1.0625rem; line-height: 1.6875rem; }
.newin__foot { margin-top: 2rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.newin > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* from 1024 px four across (eight cards make two rows); .newin--3 keeps three across (three or six cards) */
@media (min-width: 1024px) {
.newin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.newin--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 1024-1279 px: four narrow cards, so a little less gap and padding; no title then takes three lines and no Chinese
title leaves a single character on its second line */
@media (min-width: 1024px) and (max-width: 1279.98px) {
.newin:not(.newin--3) { gap: 1rem; }
.newin:not(.newin--3) > .newin__item { padding: 1.25rem; }
}
/* from 1280 px more room above the cards (and, in .newin--3, between and inside them) */
@media (min-width: 1280px) {
.newin { margin-top: 3.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.newin--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.newin--3 > .newin__item { padding: 2.25rem; }
}
/* ---- Language link (the English and Chinese pages) ----------------------------------------------------------------
In the nav (first in .nav__end) and in the phone menu's foot; a footer column takes it as a plain link */
.lang-link {
display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.625rem; border-radius: 999px;
font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.lang-link:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
.lang-link svg { flex: none; width: 1rem; height: 1rem; fill: currentColor; }
.menu__foot .lang-link { align-self: flex-start; min-height: 2.75rem; margin-left: -0.125rem; }
/* ---- Large screens: the Hongguo screenshots are 1x captures, 1264 px wide -----------------------------------------
Section 9 lets a screenshot grow with the page up to its widest file (it is set for 3x files, 4320 px wide).
The Hongguo captures are 1264 px wide (plus 640 px copies), so the same rule stops every app window at 1264 px:
past that the room around it grows instead (the hero's panel widens and becomes a card, the tour's stage keeps the
window centred), exactly as section 9 does at 4320. Add 2x / 3x captures later and raise 1264px to the widest. */
@media (min-width: 1921px) {
.hero { --hero-win: clamp(min(60rem, 1264px - 0.125rem), 50vw + var(--content) / 2 - 40rem, min(75rem, 1264px - 0.125rem)); }
.tour__shot, .tour__shot--pick { max-width: calc(1264px - 0.125rem); }
.dl-visual__shot, .co-app__shot { max-width: calc(1264px - 0.125rem); }
.cta-card__window > img { width: min(131.1%, 1264px); }
.bento__card--lib .lib-shot > img {
width: min(179.1%, 1264px);
margin: calc(min(179.1%, 1264px) * -0.036111) 0 0 calc(min(179.1%, 1264px) * -0.17778);
}
/* the Hongguo Library crop starts right of the sidebar and shows the window's full width (no header to hide) */
.bento__card--lib .lib-shot--hg > img {
margin: calc(min(179.1%, 1264px) * -0.036111) 0 0 calc(min(179.1%, 1264px) * -0.20965);
clip-path: none;
}
}