/* Design tokens for the "atlas" theme: the wire desk. * * A newspaper, not a poster. Nothing is rounded, nothing floats, and * the only saturated thing on the page is the oxblood that marks a link. The * band heading is a LEFT BAR on a quiet plate rather than a coloured tab, the * masthead strip is near-black instead of brand-coloured, the covers are the * tallest and narrowest of any preset and the grid runs the most columns, so a * front page here is a dense index rather than a gallery. Headlines are set in * a narrow face; the page carries a 28px horizontal ruling. * * THIS FILE MAY DECLARE VARIABLES AND NOTHING ELSE. Two selectors, :root * and html[data-theme="dark"], no layout rule, no component style. The * moment a theme file carries a selector the "one codebase, N identities" * promise is dead and every future component change has to be re-tested * per site. Every name tokens/default.css declares is declared here, in * the same order, because this file is the ONLY token file the page loads * - a missing name is an unset custom property and a broken rule, not a * fallback to default. * * CONTRAST. Every ink here was measured against every surface it is * allowed to meet, in BOTH halves, at 4.5:1 - including the 12px meta * layer, which is where a manga aggregator actually lives. The dark half * below is a full re-statement, not a tint: a preset that only redefined * the light half would inherit default's navy the moment a reader hit the * toggle, and all the sites would look alike again at that one click. */ :root { color-scheme: light; /* --- surfaces ------------------------------------------------------------ Four steps, in order of recession: the page, the card, the quiet band inside a card, the control. --surface-inset is the well. */ --page-bg: #e8eaee; --surface: #ffffff; --surface-alt: #f3f5f7; --surface-control: #eceff3; --surface-inset: #e3e7ed; /* --- brand and accent ---------------------------------------------------- Three jobs, three tokens - see tokens/default.css for why they cannot share one value. --brand is graphics and the focus ring, --brand-strong is brand-coloured TEXT and the ink on a --brand-soft plate, --brand-fill is a plate carrying --on-brand. */ --brand: #9f1239; --brand-strong: #881337; --brand-soft: #fdeaef; --brand-fill: #9f1239; --brand-fill-hover: #881337; --accent: #475569; /* --- status -------------------------------------------------------------- Signal colours: rules, dots, meters, icons. Deliberately bright and therefore never under white text - anything carrying a word uses a --badge-* fill or one of the two *-ink stops below. */ --hot: #e11d48; --new: #059669; --warn: #d97706; --danger-ink: #9f1239; --success-ink: #046c4e; /* --- text ---------------------------------------------------------------- Three steps. --text-muted is the meta layer - the densest, smallest type on the page - and is measured against every surface in the ramp above, not just against --surface. */ --text: #0d1218; --text-2: #2b3440; --text-muted: #535d6b; /* --- links --------------------------------------------------------------- --link-visited is a READ-STATE CUE, not decoration: it is how a reader scanning a chapter list finds where they stopped. It survives both themes. --link-chapter is a separate hue so a chapter number is distinguishable from a title link at 12px in a table. */ --link: #9f1239; --link-hover: #881337; --link-chapter: #1d4ed8; --link-visited: #6b21a8; /* --- borders ------------------------------------------------------------- */ --border: #d2d8e0; --border-strong: #b3bcc8; /* --- chips and bands ----------------------------------------------------- */ --chip-primary: #1e293b; --chip-accent: #9f1239; --chip-popular: #3f3f46; --chip-genres: #155e75; --chip-ink: #ffffff; --band-accent: var(--chip-primary); --band-brand: var(--chip-accent); --band-rank: var(--chip-genres); --band-tax: var(--chip-popular); --genre-ink: #155e75; /* --- badges -------------------------------------------------------------- Badges sit on cover ART, not on a surface, so they are theme-independent and hold their own contrast against anything underneath: solid fill, white text, no transparency. */ --badge-hot: #be123c; --badge-new: #046c4e; --badge-custom: #1e40af; --badge-adult: #7f1d1d; --badge-ink: #ffffff; /* --- ink on filled surfaces ---------------------------------------------- */ --on-brand: #ffffff; --on-accent: #ffffff; /* --- gradients --------------------------------------------------------- Same SHAPES as tokens/default.css and for the same reasons - chrome and plates only, never behind body copy, never on the reading surface - and built from the same token names, so they re-derive themselves from the palette above with no stop written out twice. --grad-nav is the one that is restated in the dark block, because it is the only one whose stops are not tokens that stay put across the toggle. THE CONTRAST RULE IS PER STOP, NOT PER AVERAGE. Every stop below carries --on-brand / --chip-ink and was measured on its own; the nav's two white veils were measured composited over BOTH stops, which is the number that actually decides whether a 12px nav label is readable. */ --grad-nav: linear-gradient(90deg, var(--chip-primary), color-mix(in srgb, var(--chip-genres) 45%, var(--chip-primary))); --grad-brand: linear-gradient(135deg, var(--brand-fill), var(--chip-popular)); --grad-brand-hover: linear-gradient(135deg, var(--brand-fill-hover), var(--chip-popular)); --grad-tile-brand: linear-gradient(135deg, var(--chip-primary), var(--chip-accent)); --grad-tile-rank: linear-gradient(135deg, var(--chip-popular), var(--chip-primary)); --grad-rank-1: linear-gradient(135deg, var(--chip-popular), var(--chip-primary)); --grad-rank-2: linear-gradient(135deg, color-mix(in srgb, var(--chip-popular) 55%, var(--chip-primary)), var(--chip-primary)); --grad-rank-3: linear-gradient(135deg, color-mix(in srgb, var(--chip-popular) 25%, var(--chip-primary)), var(--chip-primary)); --grad-rule: linear-gradient(90deg, var(--brand) 0%, var(--chip-popular) 55%, var(--accent) 100%); --grad-cover-scrim: linear-gradient(to top, var(--scrim), transparent 62%), linear-gradient(to top, var(--scrim), transparent 34%); --grad-glass: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(var(--scrim), var(--scrim)); /* --- chrome ------------------------------------------------------------ The three full-width strips. --nav-bg is consumed once as `background: var(--nav-bg)`, which takes an image as happily as a colour; that is also the limit of the trick, and why --grad-brand exists as a second token rather than as a redefinition of --brand-fill. */ --nav-bg: var(--grad-nav); --nav-ink: var(--on-brand); --nav-hover: rgba(255, 255, 255, .10); --nav-active: rgba(255, 255, 255, .16); --crumb-bg: var(--surface-alt); --crumb-ink: var(--text-2); /* --- the rank ladder --------------------------------------------------- --rank-10 is the plate a ranked ROW sits on, which is body text and so the one thing on this page a gradient may not touch. The podium is --grad-rank-1/2/3 above; --rank-num is the counter's tint for everyone else. */ --rank-10: var(--surface); --rank-num: color-mix(in srgb, var(--brand) 12%, var(--surface)); --rank-num-ink: var(--brand-strong); /* --- type -------------------------------------------------------------- NO WEBFONT. Both stacks are families the visitor's OS already has: a @font-face would be an external request on a page we control and the same asset fetched from every domain in the network, which is a correlation signal handed to anyone watching. If a licensed face is ever bought it ships as a self-hosted woff2 subset and --font-head is where it goes. THE SCALE IS FLUID, NOT STEPPED, for the reason default.css gives: browser zoom is a viewport-width change, so a scale that steps at a breakpoint snaps while the reader zooms. Every step is clamp(floor, vw + rem, cap) solved between a 360px phone and a 1440px desktop. A NARROW display face against a plain system body - the newspaper pairing, and what makes a headline here unmistakably not a headline on any other preset. The whole scale runs about a step below default's: this is the densest preset and small type is the point. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", Impact, "Segoe UI", sans-serif; --fs-meta: clamp(.6875rem, .09vw + .67rem, .75rem); --fs-body: clamp(.8125rem, .12vw + .78rem, .90rem); --fs-card: clamp(.875rem, .12vw + .84rem, .95rem); --fs-lead: clamp(.9375rem, .14vw + .9rem, 1.03rem); --fs-h2: clamp(1.0625rem, .28vw + 1rem, 1.25rem); --fs-h1: clamp(1.375rem, 1.02vw + 1.14rem, 2.06rem); --lh-body: 1.45; --lh-head: 1.18; --fw-head: 700; --track-chip: .07em; /* --- radii --------------------------------------------------------------- */ --r-card: 0; --r-panel: 2px; --r-pill: 2px; /* --- component geometry ------------------------------------------------- THE PART OF THE LAYOUT THIS THEME OWNS. main.css draws these shapes but does not decide them, and they are most of what stops this site from reading as the same template as the next one. WHERE A VALUE IS `initial`, THAT IS THE VALUE. --band is declared on .sect by main.css, and a custom property resolves where it is DECLARED - naming --band from :root would resolve it here, where it does not exist, and the property would compute to the guaranteed-invalid value and inherit down as invalid, taking the band heading's fill or its ink with it. Silently, and on this site only. `initial` IS the guaranteed-invalid value, which is precisely what makes main.css's `var(--sect-chip-bg, var(--band))` take its fallback and resolve --band on the chip itself. A preset that wants a plate of its own names a colour instead and never mentions --band. Nothing is rounded and the band heading SPENDS ITS PLATE: a quiet --surface-alt chip with the body ink and a 4px LEFT BAR in the band's colour, standing on a 2px rule. That is why --band-* is restated in the dark block below - here the colour is the whole cue, and a cue has to be visible where a plate only has to carry its ink. */ --logo-radius: 0; --rule-h: 2px; --hdr-h: 52px; --nav-case: uppercase; --nav-marker: 2px; --band-rule: 2px; --sect-chip-radius: 0; --sect-chip-bg: var(--surface-alt); --sect-chip-ink: var(--text); --sect-chip-bar: 4px; --sect-chip-case: uppercase; --chip-radius: 2px; --chip-h: 26px; --badge-radius: 2px; --page-texture: repeating-linear-gradient(180deg, transparent 0 27px, rgba(13, 18, 24, .045) 27px 28px); /* --- elevation --------------------------------------------------------- There is no resting elevation at all. Cards are separated by their hairline and by the ruling behind them, which is what a printed index does; the two lifted steps are a flat 1px/2px drop rather than a blur, so nothing on this page looks like it is floating. */ --shadow-1: none; --shadow-2: 0 1px 0 rgba(13, 18, 24, .16); --shadow-3: 0 2px 0 rgba(13, 18, 24, .22); --shadow-cover: inset 0 0 0 1px rgba(13, 18, 24, .10); --scrim: rgba(13, 18, 24, .66); /* --- motion ------------------------------------------------------------ Two tokens, so reduced motion is answered ONCE - main.css re-declares both under the media query - instead of in every rule that animates. */ --t-fast: 120ms ease; --lift: translateY(-1px); /* --- spacing ----------------------------------------------------------- Fluid from --space-3 up, solved between 360px and 1440px, for the reason the type scale is: padding that steps at a breakpoint jumps while the reader zooms, and the gutter is the first thing the eye notices doing it. The tightest set of the six - a phone gets 8px gutters. With the narrow floors below, this is what fits five cards across a 1440px row where default fits three. */ --space-1: 3px; --space-2: 6px; --space-3: clamp(8px, .19vw + 7.3px, 10px); --space-4: clamp(10px, .28vw + 9px, 13px); --space-5: clamp(12px, .37vw + 10.7px, 16px); --space-6: clamp(14px, .56vw + 12px, 20px); --space-7: clamp(16px, .74vw + 13.3px, 24px); --space-8: clamp(20px, 1.11vw + 16px, 32px); /* --- layout ------------------------------------------------------------- --col-main and --col-side are the two flex BASES the split wraps at, not the columns' widths: their sum plus a gap is the width below which the rail drops under the content. --cover-ratio is a theme decision and one of the loudest - it changes the silhouette of every card on every page. The widest container in the set and the narrowest covers: 5:8, tall enough that a row of them reads as an index of spines rather than as a gallery. */ --wrap-3: 1440px; --col-main: 620px; --col-side: 330px; --reader-shell: 900px; --cover-ratio: 5 / 8; --tap: 44px; /* --- intrinsic track floors --------------------------------------------- THE ONLY NUMBERS A COLLECTION IS ALLOWED TO KNOW. Every grid is repeat(auto-fit, minmax(min(, 100%), 1fr)) against one of these, so the column COUNT is computed from the space the grid has rather than declared per breakpoint. Retuning a floor re-counts every grid that uses it, in every context, with no media query to keep in step. The narrowest floors of any preset, which is the density decision made once and inherited by every grid on the site. */ --fit-card: 236px; --fit-row: 340px; --fit-fact: 260px; --fit-genre: 128px; --fit-board: 260px; } html[data-theme="dark"] { color-scheme: dark; /* Surfaces are re-designed, not tinted: a four-step recession that exists on its own terms rather than the light ramp inverted. --surface-inset keeps its alpha so a well reads as a hole punched in the card. */ --page-bg: #0d1116; --surface: #161b22; --surface-alt: #1d232c; --surface-control: #232a35; --surface-inset: #11161d99; /* THE READER IS A THEME SURFACE TOO, and it is the page a reader spends the most time on. features/reader.css builds its shell from these through `var(--reader-*, )`, and the fallbacks are the DEFAULT theme's navy - so with nothing supplied here every site in the network would read identically the moment a chapter opened, whatever its front page looked like. They live in this half because reader.html stamps data-theme="dark" unconditionally: the reader has no light mode to answer to. --reader-strip-bg is a step deeper than the page so the artwork has an edge against it. */ --reader-page-bg: var(--page-bg); --reader-surface: var(--surface); --reader-surface-alt: var(--surface-alt); --reader-surface-control: var(--surface-control); --reader-strip-bg: #06080b; /* Text is restated, not inherited: the light theme's muted stop is chosen to clear a near-white ramp and fails badly on a dark card, and muted is where the dates, view counts and chapter meta live. */ --text: #e6e9ee; --text-2: #c7cdd7; --text-muted: #9aa3b1; /* The brand lifts and desaturates - a dark hue on a dark page is nearly the page. --brand-soft inverts: a deep well here, a pale wash in light. --brand-fill is restated only where the light value stops carrying --on-brand against this page. */ --brand: #fb7185; --brand-strong: #fda4af; --brand-soft: #4c0519; --brand-fill-hover: #b91442; --accent: #94a3b8; /* Signal colours lift one stop for the same reason. They are still never used under white text. */ --hot: #fb7185; --new: #34d399; --warn: #fbbf24; --danger-ink: #fda4af; --success-ink: #6ee7b7; --genre-ink: #67e8f9; /* THE BAND CUES ARE RESTATED HERE, and they have to be: this theme spends the coloured plate, so the band's colour is carried by a rule and a bar instead of by a filled chip. A deep fill is a plate the ink sits on and may be dark; a RULE on a dark page has to be seen. This is what --band-* being its own name rather than an alias of --chip-* bought - the gradients keep the deep fills and the cues lift. */ --band-accent: #94a3b8; --band-brand: #fb7185; --band-rank: #22d3ee; --band-tax: #a1a1aa; /* Links lift into the pastel end of each hue. The visited recolouring survives the theme - it is a read cue, not a decoration. */ --link: #fda4af; --link-hover: #fecdd3; --link-chapter: #7dd3fc; --link-visited: #d8b4fe; --border: #2a313c; --border-strong: #3b434f; /* Chip and badge fills are intentionally NOT restated - they identify a band and a badge, and neither may change identity when the visitor flips the theme. The rank ladder is derived from them and re-mixes itself with no further work. */ --rank-num-ink: var(--brand-strong); /* The nav strip is restated because it is the ONE gradient whose stops are not tokens that stay put across the toggle: the light sweep runs between plate colours, and running those across this page would put the brightest object on the site above the darkest. The other gradients are not restated - every stop in them is a --chip-* or --brand-fill, which is the whole reason they were built out of those. --nav-bg is not restated either: it already reads var(--grad-nav). */ --grad-nav: linear-gradient(90deg, #0b0f14, #1d2836); --nav-hover: rgba(255, 255, 255, .10); --nav-active: rgba(255, 255, 255, .16); /* Elevation on a dark page cannot be a translucent tint of the page: it disappears. These are near-black and deeper, which is what separates a lifted card from the plane it lifts off. */ --shadow-1: none; --shadow-2: 0 1px 0 rgba(0, 0, 0, .70); --shadow-3: 0 2px 0 rgba(0, 0, 0, .80); --shadow-cover: inset 0 0 0 1px rgba(255, 255, 255, .07); --scrim: rgba(2, 4, 8, .76); /* The texture is re-cut in light ink: the light half's dark ruling over a dark page is invisible, and a texture that only exists in one half is a site that changes character at the toggle. */ --page-texture: repeating-linear-gradient(180deg, transparent 0 27px, rgba(255, 255, 255, .035) 27px 28px); }