/* ============================================================================ AQUATICS-TOOLS. Pale water, deep tank, clear water blue. REWRITTEN 2026-09-08 (second revision of the day). WHAT CHANGED AND WHY. 1. THE GROUND WENT LIGHT. The previous ground was #071019, a near-black blue chosen on the "lit tank in a blacked-out room" reading. The founder's instruction supersedes it: the blue is right, the darkness is not. design/research/japanese-aquascaping-sites.md settles the argument with a number rather than a taste. ADA's own JAPANESE homepage is 72.7% empty LIGHT field at 1440x900; the English one, which is the full-bleed dark photograph with display type slammed over it, is 7.5% [measured, §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. So does this page now. Two zones, which is also ADA's own body / body.top split [§1.2]: - the page is pale water, #E9F1F6 - the tank is a contained deep-blue plate, #0F3A52, and it appears as a panorama and as media wells, never as the reading surface. #0F3A52 is L* 22.8 against the old ground's L* 4.4, so the dark that remains is five times lighter and unambiguously blue rather than black. "A deep tank photographed in daylight", which is the instruction. 2. BODY FACE: IBM Plex Sans, replacing Inter. Six of eight house sites ran Inter for body, which is the whole reason the set read as clones. Plex is drawn on a grid with an engineered, slightly technical fit and a distinctly squared-off bowl; it belongs next to part codes, bore diameters and glass thicknesses. Its x-height is ~0.516em against Inter's ~0.546em, so it sets a little smaller and a little lighter at the same nominal size. On the old dark ground that would have been a real problem, because light-on-dark blooms and a thinner stroke thins further. Moving the reading surface to a light field removes the interaction entirely: dark ink on pale water gains apparent weight rather than losing it. Display stays Newsreader, which is the specimen-plate serif and is not touched. 3. GROUND / HUB SEPARATION. aquascaping-hub is the near-white cool paper in this family and its own theme file justifies that choice against "the shop next door is deep blue-black". That justification is now stale, so the separation has to be re-earned on other axes, and it is: hub #FCFCFD, L* 99.0, neutral cool paper, no dark zone above the fold, Noto Serif / Noto Sans Armenian, a reading institution. shop #E9F1F6, L* 94.7, visibly BLUE paper, a deep-blue panorama plate in the first viewport, Newsreader / IBM Plex Sans, a catalogue. Four visible deltas, not one. At 200px with the wordmark cropped the shop is the one with the blue band across the top. CONTRAST, computed 2026-09-08. Floors: body 7.0, secondary and tertiary 4.5. on --surface #E9F1F6 on --surface-2 #F7FAFC on --surface-deep #0F3A52 ink 14.40 ink 15.70 ink-on-deep 10.69 ink-2 8.22 ink-2 8.96 ink-2-on-deep 7.71 ink-3 4.83 ink-3 5.27 ink-3-on-deep 5.14 accent 5.54 accent 6.04 accent-on-deep 5.67 alert 4.88 rule 1.29 (hairline, exempt) surface-2 on accent 6.33, used for the primary button label. ink-4 is 2.16 and is a non-text mark only. Never #000, never #fff for text. TYPOGRAPHY NOTES TAKEN FROM THE JAPANESE RESEARCH, applied at the component layer in site/index.html and NOT here, because the house type scale is not a brand override: - leading ratio RISES as size falls (§3.1: 21_21 DESIGN SIGHT runs 1.500 at 24px and 1.800 at 10px, the reverse of the Western default). Our micro-labels are now 10px on 18px and captions 12px on 20px. - exactly ONE large positive-tracking moment per page, 0.12em to 0.24em, on a display line and never on running text (§1.5). It is the hero eyebrow. Every other micro-label stays at the house 0.08em. - aquascape imagery is panoramic, 1.9:1 to 3.4:1, clustering 2.4 to 2.9 (§2.4). Environmental plates are 5/2. Product packshots stay 1/1 per house-standard §4.7, because a part is a product, not a scape. RADIUS: System A (sharp). 0 everywhere, pills for badges only. Unchanged. 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. --safe is the vivid cyan pulled back until it clears 4.5:1 on white, which it does at 4.60:1; --primary itself is 2.90:1 and would be illegible as text, which is the whole reason the third value exists. Updated 2026-09-24: clear-water blue selected by the founder. Primary on white 3.84:1; small text uses #0067B8 (5.78:1). Dark #071827 labels on primary clear 4.67:1. ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #0084E8; --primary: #0084E8; --deep: #0067B8; --safe: #0067B8; --fill: var(--primary); --fill-h: var(--deep); --on-fill: #071827; --on-fill-h: #FFFFFF; /* 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 fin%22%3E %3Cg fill=%22%23000%22%3E %3Cpath d=%22M12 21C13 12 16 8 23 8c-2 4-3 9-1 13z%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { /* --- surfaces -------------------------------------------------------- */ --surface: #FFFFFF; /* white. design/COLOUR.md: a vivid palette measures 3.58:1 mean on white against 2.86:1 on a tinted ground, and the colour on this site is meant to arrive in the photographs of the tank, not in the page. */ --surface-2: #FFFFFF; /* raised card, glass panel, enquiry block, footer plate. White too, and the number that decided it: --safe is 4.60:1 on white and 4.34:1 on even a one per cent tint, so a tinted panel here would be a trap for the first accent link somebody puts in one. All four users of this token already draw a 1px --rule border, so nothing lost its edge. */ --surface-deep: #0F3A52; /* the tank. Hero plate and media wells only. */ --surface-inv: #0F3A52; /* house alias for the same zone */ --rule: #C6D7E2; /* 1px hairlines only. 1.29:1, earned not drawn */ --rule-deep: #23566F; /* hairline inside the deep zone */ /* --- ink on the light zone ------------------------------------------- */ --ink: #0C2130; /* body. Blue-black, never #000. 14.40:1 */ --ink-2: #2B4A5C; /* secondary and running intro copy. 8.22:1 */ --ink-3: #546C7A; /* tertiary, micro-labels, spec keys. 4.83:1 */ --ink-4: #93A8B4; /* non-text marks only. 2.16:1 */ /* --- ink on the deep zone -------------------------------------------- */ --ink-on-deep: #EAF3F8; /* 10.69:1. Never pure white on a coloured ground */ --ink-2-on-deep: #B9D3E1; /* 7.71:1 */ --ink-3-on-deep: #8FAEBF; /* 5.14:1 */ --ink-on-inv: #EAF3F8; /* house alias, used by the toast */ /* --- accent: ONE, max 3 instances per viewport ------------------------ */ --accent: var(--safe); /* the text cut: counters, eyebrows, the citation marker. 4.60:1 on white. */ --accent-h: var(--deep); /* hover, and the reversed ground */ --accent-on-deep: #63BCEA; /* the same blue as it survives on the tank. 5.67:1 */ --alert: #A2521F; /* rust. Stock and lead-time notices. Never red. */ --focus: var(--safe); /* --- typefaces -------------------------------------------------------- */ --font-display: Newsreader, "Source Serif 4", Georgia, serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* --- radius: System A -------------------------------------------------- */ --r-0: 0; --r-pill: 999px; } /* The tank. A section, never the page. Everything inside it re-points the ink ramp at the on-deep values so a component cannot get it wrong. */ .t-deep { --surface: var(--surface-deep); --surface-2: #0B2E42; /* recessed well: deeper water, not a lighter panel */ --rule: var(--rule-deep); --ink: var(--ink-on-deep); --ink-2: var(--ink-2-on-deep); --ink-3: var(--ink-3-on-deep); --ink-4: #5E8398; --accent: var(--accent-on-deep); --accent-h: #8ACEF0; } } @layer components { /* The masthead lockup: the fin, then the name, on one line. Inline SVG rather than an so it takes --logo and --deep straight off this file and there is no second asset for a reversed ground. Sized in em so it tracks whatever the masthead sets the wordmark at. */ .wordmark { display: inline-flex; align-items: center; gap: 0.42em } .wordmark .wm-mark { width: 1.3em; height: 1.3em; 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. Newsreader stops colliding at 1.00, 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.10 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.1); --lh-h2: calc(var(--t-h2) * 1.1); --lh-display: calc(var(--t-display) * 1.1); }