/** * Section: Comparison table * * Ported from _mockups/pricing.html `.pr-table` / `.pr-fig` and * _mockups/our-team.html `.tm-table` / `.tm-stagenote`. * * WHAT IS DELIBERATELY NOT HERE, because components.css already owns it and it * is reached by single.php, which renders no section stack and therefore * enqueues no section stylesheet at all: * * .table-wrap the scroller, the hairline, the radius, the paper * ground and the resting shadow. * .table the 100% width, the collapsed borders, the 560px * minimum that makes the scroller necessary, the cell * padding, the row rules, the forest `thead` and the * row hover. * .table tbody th[scope="row"] the row-header weight and ink. The part all * three ports of this table agree on. Shared in * anticipation of single.php, which does not exist yet; * this section is its only consumer today. * .table thead th .sub the smaller second line in a column heading, on the * forest `thead` at --on-dark-strong. Same standing. * .note the small line under the table. * .sr-only base.css. * :focus-visible tokens.css, which is the ring on the scroll region. * * WHAT IS HERE, AND WHY IT IS HERE RATHER THAN SHARED. `td.y`, `td.n` and * `tr.from` have exactly ONE consumer, this section, verified rather than * assumed: blog-post.html's `.bp-table` was read line by line and uses * `.bp-flag--ok` / `.bp-flag--muted` pills instead, with no `.y`, no `.n` and * no `tr.from` anywhere in it. The class names are kept verbatim because the * map comment at the top of components.css names them and points here, and a * rename would make that comment untrue for the next reader. * * THE ROW-HEADER SHADING is this file's own call, and the reasoning is in * sections/data-table.php. Two of the three ports shade it, the shading is what * makes the first column read as a header rather than as a cell, and the two * that shade it are the ones whose row labels carry the most weight. * * THE GOLD NUMERAL PILLS ARE GONE, and that is a decision rather than an * omission. our-team.html numbers its stage rows with `.tm-stageno`. Bringing * them back needs either a "number the rows" tick box, which is a presentation * switch, or numbering every table, which would run 1 to 7 down the side of a * comparison of services. DO NOT REINSTATE THEM. * * THE REVEAL, AS IT NOW IS. `.reveal` in base.css is an `animation`, not a * transition, and the four `.reveal-dN` delay classes have been DELETED. Both * changes landed after this file was first written and both invalidate what it * used to say here. The transition collision it warned about cannot happen any * more, because `animation` and `transition` are different properties. * * What replaces that warning is narrower and sharper: DO NOT DECLARE * `animation` ON A `.reveal` ELEMENT from this file. An animation outranks * every normal author declaration, so a second one here would not merely * conflict with the reveal, it would replace it. Nothing in this file declares * either property today. * * --------------------------------------------------------------------------- * CONTRAST, MEASURED, NOT ESTIMATED, AND MEASURED AS COMPOSITED * * The band is `.section.tint`, --paper #ffffff, and so is `.table-wrap`. Two of * the grounds below are translucent, so they are measured after compositing and * not against the bare token, which is not a measurement of anything. * * On --paper #ffffff: * --ink #14231f 16.28:1 a plain cell * --forest #0e4038 11.61:1 an included cell * --ink-faint #5f6b66 5.55:1 an excluded cell, and the note * --gold-deep #7e622e 5.72:1 the tick glyph * * On --forest-tint-05 over --paper, which composites to #f3f5f5. This is the * row-header column and the shaded summary row: * --ink #14231f 14.92:1 the row label * --price #1c6b4a 5.92:1 the emphasised amount in a summary row * --forest #0e4038 10.64:1 an included cell in a summary row * --ink-faint #5f6b66 5.09:1 an excluded cell in a summary row * --gold-deep #7e622e 5.24:1 the tick glyph in a summary row * * Every one of those clears WCAG AA for normal text, and the summary row is set * at --text-base rather than --text-sm, so it has more headroom, not less. * * ON HOVER, WHICH IS THE COMPOSITION A MOUSE USER SEES MOST AND WHICH THIS * LADDER USED TO OMIT. components.css puts --forest-tint-05 on the `tr`, and * this file puts the same translucent fill on the row header and on the summary * row's cells. Row backgrounds paint beneath cell backgrounds, so those cells * composite the tint TWICE and land on #e8ecec, not #f3f5f5: * --ink #14231f 13.69:1 the row label, hovered * --price #1c6b4a 5.43:1 the summary amount, hovered * --forest #0e4038 9.76:1 an included cell in a hovered summary row * --gold-deep #7e622e 4.81:1 the tick glyph, hovered * --ink-faint #5f6b66 4.67:1 an excluded cell, hovered * All five still clear AA, --ink-faint most narrowly at 4.67:1. * * The double composition is also what KEEPS the row header distinct on hover * rather than flattening it: at rest the header is one tint step darker than * the cells beside it, and hovered it is still exactly one step darker, because * both sides gained the same step. An opaque header fill would have lost that. * * On the forest `thead`, which components.css owns: --paper is 11.61:1 and * --on-dark-strong is 8.36:1. The full on-dark ladder is in the header of * assets/css/sections/cta-dark.css. * * NEVER a tint token as a text colour. AGENTS.md ยง1.7. * ------------------------------------------------------------------------- */ /* --- cells ---------------------------------------------------------------- Top alignment, from our-team.html. pricing.html's cells are one line each so it cannot tell the difference, and our-team.html's are two and three lines, where anything else leaves the row label floating against a paragraph. `overflow-wrap: anywhere` rather than `break-word`, because only `anywhere` affects min-content sizing. Without it a long unbroken string in a cell sets the column's minimum to its own length and the table grows to match, which the scroller contains but only after a very long scroll. With it the table holds its width and the string wraps. Either way the PAGE never scrolls sideways: that is the `.table-wrap` scroller's job and it is CSS, so it works with JavaScript off. */ .data-table .table th, .data-table .table td { vertical-align: top; } .data-table .table td { overflow-wrap: anywhere; } /* `break-word` on the HEADINGS, not `anywhere`, and the difference is the whole point. `anywhere` lowers min-content sizing to a single character, so the auto table layout is free to squeeze a heading column below its longest word: a "Transfer" column rendered as `Transfe` / `r` at 1024px once a neighbouring column had taken the space. `break-word` leaves min-content at the longest word, so a heading column can never be narrower than a word, and a genuinely unbreakable string still breaks rather than overflowing. Cells keep `anywhere` because a pasted URL in a cell is what the lower minimum is for, and a cell has no structural width to defend. */ .data-table .table th { overflow-wrap: break-word; } /* --- the row-header column ------------------------------------------------ components.css owns the weight and the ink, which is the part every port of this table agrees on. The shading is this section's. */ .data-table .table tbody th[scope="row"] { background: var(--forest-tint-05); } /* --- included and not included ------------------------------------------- The mark is decorative and the cell always carries real wording beside it, because generated content is not dependably announced. The excluded cell's dash is `aria-hidden` in the markup and its meaning is in `.sr-only` text. */ .data-table .table td.y { color: var(--forest); font-weight: 600; } .data-table .table td.y::before { content: "\2713\00a0"; color: var(--gold-deep); font-weight: 700; } .data-table .table td.n { color: var(--ink-faint); } /* --- the summary row ------------------------------------------------------ Declared after the row-header rule on purpose: the two selectors weigh the same, so source order settles the `th`. They set the same ground, so nothing moves; the size does. Money in here is always a range placeholder, HK$X,XXX, and this file has no opinion about what the cell says. */ .data-table .table tr.from th, .data-table .table tr.from td { background: var(--forest-tint-05); font-size: var(--text-base); } /* MONEY MUST NOT BE BROKEN ACROSS LINES, and this selector is the guard. `overflow-wrap: anywhere` on a cell sets its min-content to a single character, which is what stops a pasted URL widening the table without limit. The same rule will happily split HK$X,XXX into HK$X,X and XXX when a neighbouring column has taken the space, and a range broken mid-figure is a compliance problem rather than a cosmetic one: the reader sees two numbers. THIS RULE ONLY WORKS BECAUSE THE RENDERER EMITS `` ON EVERY VALUED CELL IN A SUMMARY ROW. An earlier version emitted it on the plain branch only, so a cell that was BOTH ticked and carrying an amount, which the field model allows and the instructions invite, got neither the guard nor the colour: HK$X,XXX broke across three lines at 1024px and again at 1440px and rendered --forest beside a --price figure in the same From row. The row is the wrong unit to reason about here and the value is the right one. If you change the cell branches in the renderer, this selector is what you have to keep reaching. */ .data-table .table tr.from td strong { color: var(--price); white-space: nowrap; } /* --- the note under the table --------------------------------------------- */ .data-table .data-table-note { margin-top: var(--s-3); text-align: center; font-style: italic; color: var(--ink-faint); }