/* AQUASCAPING-HUB — cool paper, ink blue. The reference library. Written 2026-09-08 from design/research/japanese-aquascaping-sites.md, which was researched for this site and is cited here by section number. WHY WHITE. Not a taste call, a measured one. ADA's own JAPANESE homepage is 72.7% empty LIGHT field at 1440x900. Its English homepage, the full-bleed dark photograph with display type slammed across it, is 7.5% [§1.1]. IAPLC's Japanese hero is 69.1% white and carries no photograph at all in the hero of a photography contest [§2.2]. The people who invented this hobby's visual grammar publish on a light field and keep the dark inside the picture. On top of that, this is a reference library: nobody glances at it, they read it for twenty minutes, and a dark ground for twenty minutes of body copy is a worse read, not a moodier one. Type and measure matter more here than anywhere else in the house. HOW IT SEPARATES FROM THE SHOP NEXT DOOR. aquatics-tools was rewritten to a light ground on the same research the same day, so "the shop is dark and we are light" is no longer the difference. The separation is re-earned on four visible axes, and its theme file agrees: hub #FCFCFD, L* 99.0, NEUTRAL cool paper. No dark zone above the fold. Noto Serif / Noto Sans Armenian. Trilingual. A reading institution. shop #E9F1F6, L* 94.7, visibly BLUE paper, a deep-blue tank plate in the first viewport. Newsreader / IBM Plex Sans. A catalogue. At 200px with the wordmark cropped, the shop is the one with the blue band across the top and the hub is the one that is all paper and type. WHY BLUE, AND WHICH BLUE. Decision D10: colour follows what a reader expects and trusts, and this is a water subject. The shop owns #0A6690, the blue of a lit water column. A library is not lit water, it is ink on paper, so the hub takes the other blue this subject owns: #0F4C81, the deep ink blue of a plate in a natural-history monograph. 8.64:1 on the ground, so it can carry a link and still be an accent rather than a decoration. NEUTRALS. Five neutrals, one hue, ~215, chroma held very low. Cool paper rather than ADA's warm #f5f5f5: warm is already spoken for by plant-pots and ceramics, and cool reads as journal and museum rather than as cream stock. Two light surfaces, mirroring ADA's own body / body.top split [§1.2] where the front page is the brightest thing in the site and panels step down one notch. --surface-inv is used ONCE, below the fold, for the method and sources band. At #0B1720 it is L* 8, roughly a third the lightness of the shop's tank plate at L* 22.8, and it is near-neutral rather than blue. It is a colophon plate in a printed book, not a tank. CONTRAST, computed 2026-09-08 against #FCFCFD unless noted. ink #14202B 16.11:1 floor 7.0 ink-2 #4A5A68 6.93:1 floor 4.5 ink-3 #5F6D77 5.20:1 floor 4.5 (4.83:1 on surface-2) accent #0F4C81 8.64:1 (8.02:1 on surface-2) alert #9A4A1F 6.07:1 on surface-inv: ink 15.50, ink-2 9.34, ink-3 5.74, accent-inv 7.93 ink-4 #86939B is 3.08 and is a non-text mark only. Never #000. Never #fff for text. TYPEFACES. Armenian is the primary language, and per house-standard.md §5.1 that removes almost the entire premium catalogue: six families on Google Fonts declare an armenian subset, and none of the shop's faces (Inter 0/96, Newsreader, Geist Mono, IBM Plex) is among them. The trilingual job picks the type here. display Noto Serif Armenian + Noto Serif. Metrically identical to within 0.1%, cap drift +-0.0%, built as one system, so no size-adjust and no override arithmetic. Set at 300 it is the reference-publication voice: a botanical monograph, not a magazine. body Noto Sans Armenian + Noto Sans. Same pair, same arithmetic. §5.4 is honest that Noto Sans Armenian is not loved in Armenia, which is exactly why it belongs in the body and the UI where nobody grades it, and not in a wordmark. The wordmark is a codename and will be drawn, not set, when the name lands. mono Iosevka Charon Mono. Verified live 2026-09-08 to serve an armenian subset at U+0530-058F plus the FB13-FB17 ligatures, which makes it the only free monospace covering all three scripts. §5.1 flags the Armenian as parametrically derived: proof it before any Armenian text is set in it. Latin and Cyrillic data labels are safe today. A third weight is permitted because one of them is the display cut (§4.3). Armenian reads optically lighter than Latin at the same nominal weight (§5.8 rule 4), so Armenian display runs one step above --w-display. TAKEN FROM THE JAPANESE RESEARCH BUT APPLIED AT THE COMPONENT LAYER, in site/index.html, because the house type scale is not a brand override: - the leading RATIO rises as the size falls [§3.1: 21_21 DESIGN SIGHT runs 1.500 at 24px and 1.800 at 10px, the reverse of the Western default]. Micro-labels are 11/19, captions 12/20. - exactly ONE large positive-tracking moment per page, 0.12em to 0.24em, on the wordmark, never on running text [§1.5]. - image boxes are 5/2, because grand prize photographs measure 1.9:1 to 3.4:1 and cluster at 2.4 to 2.9 [§2.4]. - the primary language is a filled chip, not a bold weight [§3.1]. RADIUS: System A (sharp). 0 everywhere, pills for badges only. Same tier as the shop, deliberately: in a reference library and a tool catalogue alike, a rounded corner is an opinion nobody asked for. Overridden here: palette, typefaces, radius tier. Nothing else. The spacing scale, the grid, the type scale and the motion timing come from the house file unchanged. ========================================================================= */ /* --------------------------------------------------------------------------- THE PALETTE. FOUR VALUES, AND IT IS NOT SETTLED. The founder is still choosing between four palettes, so all four live here and nowhere else on this site. A swap is an edit to these four lines; if it ever needs a second edit somewhere, that somewhere is the bug. --logo the mark, and only the mark --primary primary button fill, active states --deep secondary button, hover, and any reversed ground --safe links, and every piece of text under 24px One hue at three values, and this brand has the easiest arithmetic in the house: the vivid blue clears 4.5:1 on white at 5.63:1 on its own, so --safe and --primary are the same value and a link can be the brand colour without being pulled back from it. CONTRAST, RE-MEASURED 2026-09-14 on the white ground. These numbers supersede the table further up this file, which names #FCFCFD. Floors: body 7.0, secondary 4.5, tertiary 4.5. on #FFFFFF panel #F1F4F7 ink #14202B 16.52 14.96 ink-2 #4A5A68 7.11 6.44 ink-3 #5F6D77 5.33 4.83 ink-4 #86939B 2.93 2.65 non-text marks only rule #D8DEE3 1.36 1.23 hairlines, exempt --safe #0B62D6 5.63 5.10 --deep #0954B8 7.07 6.40 --on-fill on --primary 5.30, on --deep 6.09 This is the only brand whose accent clears the floor on the panel as well as on the page, which is why the panel keeps its tint where three of the product sites had to give theirs up. ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #0B62D6; --primary: #0B62D6; --deep: #0954B8; --safe: #0B62D6; /* 5.63:1 on white, 5.10:1 on --surface-2 */ /* Derived from the four, in the same block so a swap stays one edit. A button label is text under 24px on a COLOURED ground, which is the one measurement the four cannot answer. Here the near-white the theme already names clears it: 5.30:1 on --primary, 6.09:1 on --deep. */ --fill: var(--primary); --fill-h: var(--deep); --on-fill: var(--ink-on-inv); /* The mark as typographic furniture, for brandmark.css. Copied from design/logos/mark-masks.css, which is generated. */ --mark-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2211 6 14 16%22 role=%22img%22 aria-label=%22a stone%22%3E %3Cg fill=%22%23000%22%3E %3Cpolygon points=%2212,21 14.5,11.5 18.5,8.5 23,13 23,21%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { --surface: #FFFFFF; /* the page. White, per design/COLOUR.md. It was only a half step off already, so this is the smallest ground move of the eight and nothing on the site depended on the tint. */ --surface-2: #F1F4F7; /* raised panel, quoted block, reading chapter */ --surface-inv: #0B1720; /* the colophon plate. Once, below the fold. */ --rule: #D8DEE3; /* 1px hairlines only, 1.32:1. Earned, not drawn */ --rule-inv: #22333F; /* the same hairline inside the colophon plate */ --ink: #14202B; /* body. Never #000 */ --ink-2: #4A5A68; /* secondary, intro copy, weighted captions */ --ink-3: #5F6D77; /* tertiary, micro-labels, metadata */ --ink-4: #86939B; /* non-text marks only, never running text */ --ink-on-inv: #E8EEF2; /* on surface-inv. Never pure white */ --ink-2-on-inv:#A9BDC9; --ink-3-on-inv:#7E94A2; --accent: var(--safe); /* the text cut: links, markers, eyebrows. Max 3 instances per viewport, unchanged. */ --accent-h: var(--deep); /* hover, and the reversed ground */ --accent-inv: #5FB4E8; /* the accent as it survives on surface-inv */ --alert: #9A4A1F; /* corrections and disputed claims. Never red. */ --focus: var(--safe); --font-display: "Noto Serif Armenian", "Noto Serif", Georgia, serif; --font-body: "Noto Sans Armenian", "Noto Sans", system-ui, sans-serif; --font-mono: "Iosevka Charon Mono", ui-monospace, monospace; --w-display: 300; /* the display cut, permitted as the third weight */ --r-0: 0; --r-pill: 999px; } } /* --------------------------------------------------------------------------- Language switcher, corrected 2026-09-09. It previously marked Armenian as "primary" with a filled chip while also marking English as the current page with an underline. Two selected states at once, which is exactly as confusing as it sounds. One rule now: the language you are reading is marked, and nothing else is. Armenian and Russian are not published yet, so they are not links. They stay visible because the site is genuinely trilingual by intent, but a link that 404s is worse than an honest unavailable state. ------------------------------------------------------------------------ */ @layer components { .lang .lang-current { color: var(--ink); font-weight: var(--w-medium); border-bottom: 2px solid var(--accent); padding: var(--sp-1) var(--sp-2); display: inline-block; } .lang .lang-soon { /* was --ink-4 at 3.15:1. These chips say which editions exist, which is information the reader has to be able to read, not a decorative mark. */ color: var(--ink-3); padding: var(--sp-1) var(--sp-2); display: inline-block; cursor: default; } .lang [data-primary] { all: unset } /* kill the old filled chip everywhere */ } @layer components { /* The masthead lockup: the stone, then the name over its English reading. Inline SVG rather than an so it takes --logo and --deep straight off this file and there is no second asset for the colophon plate. Sized in em so it tracks whatever the masthead sets the wordmark at. */ .wordmark { display: inline-flex; align-items: center; gap: 0.5em } .wordmark .wm-mark { width: 1.85em; height: 1.85em; flex: none } .wordmark .wm-name { font: inherit; letter-spacing: inherit } } /* ============================================================================ DISPLAY LINE-HEIGHT, MEASURED RATHER THAN CHOSEN. The shared tokens set --lh-h1 to 4.75rem against a 4.5rem --t-h1, a ratio of 1.056, and --lh-display to exactly the font size, a ratio of 1.00. That is tighter than these faces' own ascent plus descent, so the wrapped lines of a headline physically collided -- the founder photographed it. Noto Serif Armenian stops colliding at 1.36, measured by binary search on the ink rects of a real two-line heading with the font loaded, not guessed and not taken from the font's bounding box. It is set to 1.40 here for a little air. Across the eight sites the needed ratio runs from 1.00 to 1.58, which is why this belongs per site and cannot be one global number. h3 is left alone: it already sits at 1.23 and was never the problem. ========================================================================= */ :root { --lh-h1: calc(var(--t-h1) * 1.4); --lh-h2: calc(var(--t-h2) * 1.4); --lh-display: calc(var(--t-display) * 1.4); } /* --------------------------------------------------------------------------- FIELD-GUIDE STICKERS These are subject markers, not badges or decoration. Their vocabulary comes from the nouns readers meet most often on the site: water, tank, fish, plants, stone, substrate, light, oxygen, filters and bacteria. The white cut line makes each drawing read like a removable specimen label against both paper grounds without introducing another card shape. ------------------------------------------------------------------------ */ @layer components { :root { --sticker-green: #3D7D62; --sticker-mineral: #C58A46; --sticker-coral: #D96A5A; --sticker-sun: #F1C65B; } /* Topic cards gain a small visual index only when their destination maps to one of the recurring physical subjects. Editorial and administrative links remain type-only, which keeps the marks useful rather than noisy. */ .xnav > .xcard:is( [href*="/water/"], [href*="/fish/"], [href*="/livestock/"], [href*="/shoaling/"], [href*="/plants/"], [href*="/windowsill/"], [href*="/hardscape/"], [href*="/substrate/"], [href*="/easy/"], [href*="/jar/"], [href*="/method/cycling/"], [href*="/science/biology/"] ) { position: relative; min-height: 4.5rem; padding-left: 4.5rem; } .xnav > .xcard:is( [href*="/water/"], [href*="/fish/"], [href*="/livestock/"], [href*="/shoaling/"], [href*="/plants/"], [href*="/windowsill/"], [href*="/hardscape/"], [href*="/substrate/"], [href*="/easy/"], [href*="/jar/"], [href*="/method/cycling/"], [href*="/science/biology/"] )::before { content: ""; position: absolute; left: 0; top: .55rem; width: 3.5rem; height: 3.5rem; background: var(--sticker) center / contain no-repeat; transform: rotate(var(--sticker-turn, -2deg)); transition: transform var(--dur-2) var(--ease-out); } .xnav > .xcard:hover::before { transform: rotate(0deg) translateY(-2px); } .xcard[href*="/water/"] { --sticker: url("/brand/stickers/water.svg"); } .xcard[href*="/water/oxygen/"], .xcard[href*="/water/oxidators/"] { --sticker: url("/brand/stickers/oxygen.svg"); --sticker-turn: 3deg; } .xcard[href*="/fish/"], .xcard[href*="/livestock/"], .xcard[href*="/shoaling/"] { --sticker: url("/brand/stickers/fish.svg"); --sticker-turn: 2deg; } .xcard[href*="/plants/"], .xcard[href*="/windowsill/"] { --sticker: url("/brand/stickers/plant.svg"); --sticker-turn: -4deg; } .xcard[href*="/hardscape/"] { --sticker: url("/brand/stickers/stone.svg"); } .xcard[href*="/substrate/"] { --sticker: url("/brand/stickers/substrate.svg"); --sticker-turn: 2deg; } .xcard[href*="/easy/"], .xcard[href*="/jar/"] { --sticker: url("/brand/stickers/tank.svg"); --sticker-turn: -3deg; } .xcard[href*="/method/cycling/"], .xcard[href*="/science/biology/"] { --sticker: url("/brand/stickers/bacteria.svg"); --sticker-turn: 4deg; } /* The homepage already reserves a 5:2 image plate on its main cards. A sticker turns selected gradients into a real visual index without making the whole library pretend it has photography. */ .plt::before { content: ""; position: absolute; z-index: 2; width: clamp(4rem, 31%, 7.5rem); aspect-ratio: 1; right: 8%; top: 50%; background: var(--plate-sticker) center / contain no-repeat; transform: translateY(-50%) rotate(var(--plate-turn, -3deg)); } .plt-scape { --plate-sticker: url("/brand/stickers/tank.svg"); } .card[href*="/competitions/"] .plt-scape { --plate-sticker: url("/brand/stickers/trophy.svg"); --plate-turn: 3deg; } .plt-stone { --plate-sticker: url("/brand/stickers/stone.svg"); --plate-turn: 2deg; } .plt-fauna { --plate-sticker: url("/brand/stickers/fish.svg"); --plate-turn: 3deg; } .plt-map { --plate-sticker: url("/brand/stickers/landscape.svg"); --plate-turn: -2deg; } .plt-page { --plate-sticker: url("/brand/stickers/book.svg"); --plate-turn: 2deg; } .plt-water { --plate-sticker: url("/brand/stickers/water.svg"); } .plt-child { --plate-sticker: url("/brand/stickers/plant.svg"); --plate-turn: -5deg; } /* A chapter break: the line still does the structural work, while three small subjects preview the next cluster of reading. */ .sticker-divider { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); margin-block: var(--sp-3) var(--sp-7); } .sticker-divider::before, .sticker-divider::after { content: ""; height: 1px; background: var(--rule); } .sticker-divider span { display: flex; align-items: center; gap: var(--sp-2); } .sticker-divider img { width: 3.25rem; height: 3.25rem; object-fit: contain; } .sticker-divider img:nth-child(1) { transform: rotate(-5deg); } .sticker-divider img:nth-child(2) { transform: translateY(-.4rem) rotate(3deg); } .sticker-divider img:nth-child(3) { transform: rotate(6deg); } @media (max-width: 479px) { .xnav > .xcard:is( [href*="/water/"], [href*="/fish/"], [href*="/livestock/"], [href*="/shoaling/"], [href*="/plants/"], [href*="/windowsill/"], [href*="/hardscape/"], [href*="/substrate/"], [href*="/easy/"], [href*="/jar/"], [href*="/method/cycling/"], [href*="/science/biology/"] ) { padding-left: 4rem; } .sticker-divider { gap: var(--sp-3); } .sticker-divider img { width: 2.6rem; height: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .xnav > .xcard::before { transition: none; } } } /* Whole aquascapes retain their composition; photography replaces decorative plates. */ .photo-plate { margin: 0; min-width: 0; } .photo-plate img { display: block; width: 100%; height: auto; background: #10261f; } .card .photo-plate img { aspect-ratio: 16 / 9; object-fit: contain; } .photo-plate figcaption { margin-top: .4rem; font-size: .7rem; line-height: 1.4; color: var(--ink-2); } /* Related-page headings use the row, not a single narrow grid track. */ section.grid > .sh { grid-column: 1 / -1; min-width: 0; } #next-h { max-width: none; font-size: clamp(26px, 5vw, 48px); } /* Photograph-led direction: retire the rejected sticker treatment. */ .sticker-divider { display: none !important; } .plt::before, .xnav > .xcard::before { content: none !important; } .xnav > .xcard { padding-left: 0 !important; } .toc li::before { content: none; } main > .section { padding-block: clamp(2rem, 4vw, 4rem); } /* These briefs are revealed on localhost only, until a suitable asset is ready. */ .planned-image[hidden] { display: none !important; } .visual-lead:has(> .planned-image[hidden]) { display: none; } .planned-image:not([hidden]) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: clamp(160px, 25vw, 320px); margin: 0 0 2rem; padding: 2rem; background: #f1f4f7; border: 1px dashed #8b9ba8; color: #435663; } .planned-image figcaption { max-width: 52ch; font-size: .875rem; line-height: 1.6; } .planned-image figcaption::before { content: 'PHOTO / DIAGRAM — LOCAL PREVIEW'; display: block; font-size: .65rem; letter-spacing: .12em; margin-bottom: .75rem; } @media print { .planned-image { display: none !important; } }